@duetds/components - npm Package Compare versions

Comparing version 0.0.1-alpha.25 to 0.0.1-alpha.26

lib/cjs/es5/build/duet-button.entry.js

@@ -107,7 +107,7 @@ "use strict";
         if (this.url) {
-            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
+            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
+            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
         }
@@ -210,3 +210,3 @@ };
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva .duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n  color: #940925;\n}"; },
         enumerable: true,
@@ -218,1 +218,281 @@ configurable: true
 exports.DuetButton = DuetButton;
+var tokens_common = {
+    colorWarning: "rgb(247, 178, 40)",
+    colorGrayLighter: "rgb(245, 248, 250)",
+    colorCategoryHome: "rgb(211, 36, 131)",
+    colorPrimary: "rgb(0, 119, 179)",
+    colorCategoryVehicle: "rgb(54, 74, 129)",
+    colorSuccess: "rgb(0, 135, 90)",
+    colorCategoryFamily: "rgb(11, 114, 136)",
+    colorPrimaryLightest: "rgb(243, 249, 252)",
+    colorPrimaryLighter: "rgb(230, 242, 248)",
+    colorBrandBlue: "rgb(0, 161, 212)",
+    colorPrimaryDark: "rgb(0, 77, 128)",
+    colorGrayLightest: "rgb(255, 255, 255)",
+    colorCategoryFinance: "rgb(122, 1, 196)",
+    colorGrayDark: "rgb(101, 119, 135)",
+    colorGrayLight: "rgb(225, 227, 230)",
+    colorSecondary: "rgb(0, 41, 77)",
+    colorCategoryPet: "rgb(168, 1, 78)",
+    colorPrimaryLight: "rgb(205, 229, 241)",
+    colorCategoryTravel: "rgb(213, 66, 3)",
+    colorGray: "rgb(207, 210, 212)",
+    colorDanger: "rgb(222, 35, 98)",
+    colorGrayDarkerTurva: "rgb(69, 69, 69)",
+    colorGrayLighterTurva: "rgb(249, 249, 249)",
+    colorCategoryHomeTurva: "rgb(161, 10, 78)",
+    colorPrimaryTurva: "rgb(198, 12, 48)",
+    colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+    colorSuccessTurva: "rgb(8, 135, 78)",
+    colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+    colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+    colorCategoryUnionTurva: "rgb(132, 68, 148)",
+    colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+    colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+    colorGrayLightestTurva: "rgb(255, 255, 255)",
+    colorGrayDarkTurva: "rgb(117, 117, 117)",
+    colorGrayLightTurva: "rgb(230, 230, 230)",
+    colorBrandGrayTurva: "rgb(178, 180, 179)",
+    colorSecondaryTurva: "rgb(17, 17, 17)",
+    colorPrimaryLightTurva: "rgb(244, 207, 214)",
+    colorCategoryTravelTurva: "rgb(9, 129, 148)",
+    colorGrayTurva: "rgb(209, 209, 209)",
+    colorDangerTurva: "rgb(224, 42, 13)",
+    colorWarningTurva: "rgb(250, 164, 15)",
+    fontWeightExtraBold: "800",
+    letterSpacingHeading: "-0.01rem",
+    fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontWeightBold: "700",
+    fontWeightNormal: "400",
+    fontWeightSemiBold: "600",
+    fontSizeXxxxLarge: "4.5rem",
+    fontSizeXxxLarge: "3rem",
+    fontSizeXxLarge: "2.25rem",
+    fontSizeXLarge: "1.5rem",
+    fontSizeLarge: "1.25rem",
+    fontSizeMedium: "1rem",
+    fontSizeSmall: "0.875rem",
+    fontSizeXSmall: "0.75rem",
+    radiusDefault: "4px",
+    radiusCircle: "50%",
+    radiusPill: "20rem",
+    shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+    shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+    shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+    shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+    shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+    spaceXxSmall: "4px",
+    spaceLarge: "20px",
+    spaceXSmall: "8px",
+    spaceSmall: "12px",
+    spaceMedium: "16px",
+    spaceXxLarge: "36px",
+    spaceXxxxLarge: "72px",
+    spaceXxxLarge: "48px",
+    spaceXLarge: "28px",
+    sizeIconXxLarge: "48px",
+    sizeStepMedium: "40px",
+    sizeButtonMinWidth: "6.875rem",
+    sizeHeader: "70px",
+    sizeIconXxxLarge: "72px",
+    sizeIconXLarge: "36px",
+    sizeIconXxSmall: "12px",
+    sizeStepSmall: "30px",
+    sizeIconLarge: "30px",
+    sizeTappableSquare: "48px",
+    sizeIconXSmall: "16px",
+    sizeButtonBorder: "inset 0 0 0 2px",
+    sizeIconMedium: "24px",
+    sizeIconSmall: "20px",
+    opacity75: "0.75",
+    opacity50: "0.50",
+    opacity30: "0.30",
+    zIndexDropdown: "600",
+    zIndexSpinner: "800",
+    zIndexDefault: "1",
+    zIndexToast: "500",
+    zIndexPopup: "950",
+    zIndexModal: "900",
+    zIndexSticky: "300",
+    zIndexMasked: "100",
+    zIndexDeep: "-999999",
+    zIndexOverlay: "700",
+    zIndexMask: "200",
+    zIndexHeader: "400",
+    lineHeightMedium: "1.5",
+    lineHeightSmall: "1.25",
+    lineHeightXSmall: "1",
+    transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+var DuetSpinner = /** @class */ (function () {
+    function DuetSpinner() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    DuetSpinner.prototype.render = function () {
+        var classes = chunk_e639420f_js_1.b("duet-spinner", "" + this.size);
+        var styles = {
+            color: this.color,
+        };
+        return duet_core_js_1.h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    };
+    Object.defineProperty(DuetSpinner, "is", {
+        get: function () { return "duet-spinner"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "encapsulation", {
+        get: function () { return "shadow"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "properties", {
+        get: function () {
+            return {
+                "accessibleLabel": {
+                    "type": String,
+                    "attr": "accessible-label"
+                },
+                "color": {
+                    "type": String,
+                    "attr": "color"
+                },
+                "size": {
+                    "type": String,
+                    "attr": "size"
+                }
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "style", {
+        get: function () { return ":host {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium::after {\n  border-width: 4px;\n}\n.duet-spinner.large {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return DuetSpinner;
+}());
+exports.DuetSpinner = DuetSpinner;

lib/cjs/es5/build/duet-button.sc.entry.js

@@ -107,7 +107,7 @@ "use strict";
         if (this.url) {
-            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
+            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)), duet_core_js_1.h("div", { class: "duet-spinner" })));
+            return (duet_core_js_1.h("div", { class: "duet-button-container" }, duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)), this.variation === "loading" ? duet_core_js_1.h("duet-spinner", null) : ""));
         }
@@ -210,3 +210,3 @@ };
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button    + .duet-spinner.sc-duet-button {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva.sc-duet-button   .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button   .duet-button.disabled.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button:hover {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.loading.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.negative.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button:hover {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button:hover {\n  color: #940925;\n}"; },
         enumerable: true,
@@ -218,1 +218,281 @@ configurable: true
 exports.DuetButton = DuetButton;
+var tokens_common = {
+    colorWarning: "rgb(247, 178, 40)",
+    colorGrayLighter: "rgb(245, 248, 250)",
+    colorCategoryHome: "rgb(211, 36, 131)",
+    colorPrimary: "rgb(0, 119, 179)",
+    colorCategoryVehicle: "rgb(54, 74, 129)",
+    colorSuccess: "rgb(0, 135, 90)",
+    colorCategoryFamily: "rgb(11, 114, 136)",
+    colorPrimaryLightest: "rgb(243, 249, 252)",
+    colorPrimaryLighter: "rgb(230, 242, 248)",
+    colorBrandBlue: "rgb(0, 161, 212)",
+    colorPrimaryDark: "rgb(0, 77, 128)",
+    colorGrayLightest: "rgb(255, 255, 255)",
+    colorCategoryFinance: "rgb(122, 1, 196)",
+    colorGrayDark: "rgb(101, 119, 135)",
+    colorGrayLight: "rgb(225, 227, 230)",
+    colorSecondary: "rgb(0, 41, 77)",
+    colorCategoryPet: "rgb(168, 1, 78)",
+    colorPrimaryLight: "rgb(205, 229, 241)",
+    colorCategoryTravel: "rgb(213, 66, 3)",
+    colorGray: "rgb(207, 210, 212)",
+    colorDanger: "rgb(222, 35, 98)",
+    colorGrayDarkerTurva: "rgb(69, 69, 69)",
+    colorGrayLighterTurva: "rgb(249, 249, 249)",
+    colorCategoryHomeTurva: "rgb(161, 10, 78)",
+    colorPrimaryTurva: "rgb(198, 12, 48)",
+    colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+    colorSuccessTurva: "rgb(8, 135, 78)",
+    colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+    colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+    colorCategoryUnionTurva: "rgb(132, 68, 148)",
+    colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+    colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+    colorGrayLightestTurva: "rgb(255, 255, 255)",
+    colorGrayDarkTurva: "rgb(117, 117, 117)",
+    colorGrayLightTurva: "rgb(230, 230, 230)",
+    colorBrandGrayTurva: "rgb(178, 180, 179)",
+    colorSecondaryTurva: "rgb(17, 17, 17)",
+    colorPrimaryLightTurva: "rgb(244, 207, 214)",
+    colorCategoryTravelTurva: "rgb(9, 129, 148)",
+    colorGrayTurva: "rgb(209, 209, 209)",
+    colorDangerTurva: "rgb(224, 42, 13)",
+    colorWarningTurva: "rgb(250, 164, 15)",
+    fontWeightExtraBold: "800",
+    letterSpacingHeading: "-0.01rem",
+    fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontWeightBold: "700",
+    fontWeightNormal: "400",
+    fontWeightSemiBold: "600",
+    fontSizeXxxxLarge: "4.5rem",
+    fontSizeXxxLarge: "3rem",
+    fontSizeXxLarge: "2.25rem",
+    fontSizeXLarge: "1.5rem",
+    fontSizeLarge: "1.25rem",
+    fontSizeMedium: "1rem",
+    fontSizeSmall: "0.875rem",
+    fontSizeXSmall: "0.75rem",
+    radiusDefault: "4px",
+    radiusCircle: "50%",
+    radiusPill: "20rem",
+    shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+    shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+    shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+    shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+    shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+    spaceXxSmall: "4px",
+    spaceLarge: "20px",
+    spaceXSmall: "8px",
+    spaceSmall: "12px",
+    spaceMedium: "16px",
+    spaceXxLarge: "36px",
+    spaceXxxxLarge: "72px",
+    spaceXxxLarge: "48px",
+    spaceXLarge: "28px",
+    sizeIconXxLarge: "48px",
+    sizeStepMedium: "40px",
+    sizeButtonMinWidth: "6.875rem",
+    sizeHeader: "70px",
+    sizeIconXxxLarge: "72px",
+    sizeIconXLarge: "36px",
+    sizeIconXxSmall: "12px",
+    sizeStepSmall: "30px",
+    sizeIconLarge: "30px",
+    sizeTappableSquare: "48px",
+    sizeIconXSmall: "16px",
+    sizeButtonBorder: "inset 0 0 0 2px",
+    sizeIconMedium: "24px",
+    sizeIconSmall: "20px",
+    opacity75: "0.75",
+    opacity50: "0.50",
+    opacity30: "0.30",
+    zIndexDropdown: "600",
+    zIndexSpinner: "800",
+    zIndexDefault: "1",
+    zIndexToast: "500",
+    zIndexPopup: "950",
+    zIndexModal: "900",
+    zIndexSticky: "300",
+    zIndexMasked: "100",
+    zIndexDeep: "-999999",
+    zIndexOverlay: "700",
+    zIndexMask: "200",
+    zIndexHeader: "400",
+    lineHeightMedium: "1.5",
+    lineHeightSmall: "1.25",
+    lineHeightXSmall: "1",
+    transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+var DuetSpinner = /** @class */ (function () {
+    function DuetSpinner() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    DuetSpinner.prototype.render = function () {
+        var classes = chunk_e639420f_js_1.b("duet-spinner", "" + this.size);
+        var styles = {
+            color: this.color,
+        };
+        return duet_core_js_1.h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    };
+    Object.defineProperty(DuetSpinner, "is", {
+        get: function () { return "duet-spinner"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "encapsulation", {
+        get: function () { return "shadow"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "properties", {
+        get: function () {
+            return {
+                "accessibleLabel": {
+                    "type": String,
+                    "attr": "accessible-label"
+                },
+                "color": {
+                    "type": String,
+                    "attr": "color"
+                },
+                "size": {
+                    "type": String,
+                    "attr": "size"
+                }
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "style", {
+        get: function () { return ".sc-duet-spinner-h {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner.sc-duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner.sc-duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium.sc-duet-spinner {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium.sc-duet-spinner::after {\n  border-width: 4px;\n}\n.duet-spinner.large.sc-duet-spinner {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large.sc-duet-spinner::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return DuetSpinner;
+}());
+exports.DuetSpinner = DuetSpinner;

lib/cjs/es5/duet.components.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // Duet: Host Data, ES Module/es5 Target
-exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1]];
+exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]];

lib/collection/collection-manifest.json

@@ -5,3 +5,5 @@ {
       "tag": "duet-button",
-      "dependencies": [],
+      "dependencies": [
+        "duet-spinner"
+      ],
       "componentClass": "DuetButton",
@@ -249,2 +251,33 @@ "componentPath": "components/duet-button/duet-button.js",
       "shadow": true
+    },
+    {
+      "tag": "duet-spinner",
+      "dependencies": [],
+      "componentClass": "DuetSpinner",
+      "componentPath": "components/duet-spinner/duet-spinner.js",
+      "styles": {
+        "$": {
+          "stylePaths": [
+            "components/duet-spinner/duet-spinner.scss"
+          ]
+        }
+      },
+      "props": [
+        {
+          "name": "accessibleLabel",
+          "type": "String",
+          "attr": "accessible-label"
+        },
+        {
+          "name": "color",
+          "type": "String",
+          "attr": "color"
+        },
+        {
+          "name": "size",
+          "type": "String",
+          "attr": "size"
+        }
+      ],
+      "shadow": true
     }
@@ -251,0 +284,0 @@ ],

lib/collection/components/duet-button/duet-button.js

@@ -106,3 +106,3 @@ import { applyThemeClasses } from "../../utils/applyThemeClasses";
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
@@ -114,3 +114,3 @@ }
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -117,0 +117,0 @@ }

lib/duet.js

@@ -134,2 +134,2 @@
 
-  })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button,duet-input",HTMLElement.prototype);
+  })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button,duet-input,duet-spinner",HTMLElement.prototype);

lib/duet/duet-button.entry.js

@@ -108,3 +108,3 @@ const h = window.Duet.h;
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
@@ -116,3 +116,3 @@ }
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -194,5 +194,267 @@ }
         }]; }
-    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva .duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n  color: #940925;\n}"; }
 }
 
-export { DuetButton };
+var tokens_common = {
+  colorWarning: "rgb(247, 178, 40)",
+  colorGrayLighter: "rgb(245, 248, 250)",
+  colorCategoryHome: "rgb(211, 36, 131)",
+  colorPrimary: "rgb(0, 119, 179)",
+  colorCategoryVehicle: "rgb(54, 74, 129)",
+  colorSuccess: "rgb(0, 135, 90)",
+  colorCategoryFamily: "rgb(11, 114, 136)",
+  colorPrimaryLightest: "rgb(243, 249, 252)",
+  colorPrimaryLighter: "rgb(230, 242, 248)",
+  colorBrandBlue: "rgb(0, 161, 212)",
+  colorPrimaryDark: "rgb(0, 77, 128)",
+  colorGrayLightest: "rgb(255, 255, 255)",
+  colorCategoryFinance: "rgb(122, 1, 196)",
+  colorGrayDark: "rgb(101, 119, 135)",
+  colorGrayLight: "rgb(225, 227, 230)",
+  colorSecondary: "rgb(0, 41, 77)",
+  colorCategoryPet: "rgb(168, 1, 78)",
+  colorPrimaryLight: "rgb(205, 229, 241)",
+  colorCategoryTravel: "rgb(213, 66, 3)",
+  colorGray: "rgb(207, 210, 212)",
+  colorDanger: "rgb(222, 35, 98)",
+  colorGrayDarkerTurva: "rgb(69, 69, 69)",
+  colorGrayLighterTurva: "rgb(249, 249, 249)",
+  colorCategoryHomeTurva: "rgb(161, 10, 78)",
+  colorPrimaryTurva: "rgb(198, 12, 48)",
+  colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+  colorSuccessTurva: "rgb(8, 135, 78)",
+  colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+  colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+  colorCategoryUnionTurva: "rgb(132, 68, 148)",
+  colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+  colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+  colorGrayLightestTurva: "rgb(255, 255, 255)",
+  colorGrayDarkTurva: "rgb(117, 117, 117)",
+  colorGrayLightTurva: "rgb(230, 230, 230)",
+  colorBrandGrayTurva: "rgb(178, 180, 179)",
+  colorSecondaryTurva: "rgb(17, 17, 17)",
+  colorPrimaryLightTurva: "rgb(244, 207, 214)",
+  colorCategoryTravelTurva: "rgb(9, 129, 148)",
+  colorGrayTurva: "rgb(209, 209, 209)",
+  colorDangerTurva: "rgb(224, 42, 13)",
+  colorWarningTurva: "rgb(250, 164, 15)",
+  fontWeightExtraBold: "800",
+  letterSpacingHeading: "-0.01rem",
+  fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontWeightBold: "700",
+  fontWeightNormal: "400",
+  fontWeightSemiBold: "600",
+  fontSizeXxxxLarge: "4.5rem",
+  fontSizeXxxLarge: "3rem",
+  fontSizeXxLarge: "2.25rem",
+  fontSizeXLarge: "1.5rem",
+  fontSizeLarge: "1.25rem",
+  fontSizeMedium: "1rem",
+  fontSizeSmall: "0.875rem",
+  fontSizeXSmall: "0.75rem",
+  radiusDefault: "4px",
+  radiusCircle: "50%",
+  radiusPill: "20rem",
+  shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+  shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+  shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+  shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+  shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+  spaceXxSmall: "4px",
+  spaceLarge: "20px",
+  spaceXSmall: "8px",
+  spaceSmall: "12px",
+  spaceMedium: "16px",
+  spaceXxLarge: "36px",
+  spaceXxxxLarge: "72px",
+  spaceXxxLarge: "48px",
+  spaceXLarge: "28px",
+  sizeIconXxLarge: "48px",
+  sizeStepMedium: "40px",
+  sizeButtonMinWidth: "6.875rem",
+  sizeHeader: "70px",
+  sizeIconXxxLarge: "72px",
+  sizeIconXLarge: "36px",
+  sizeIconXxSmall: "12px",
+  sizeStepSmall: "30px",
+  sizeIconLarge: "30px",
+  sizeTappableSquare: "48px",
+  sizeIconXSmall: "16px",
+  sizeButtonBorder: "inset 0 0 0 2px",
+  sizeIconMedium: "24px",
+  sizeIconSmall: "20px",
+  opacity75: "0.75",
+  opacity50: "0.50",
+  opacity30: "0.30",
+  zIndexDropdown: "600",
+  zIndexSpinner: "800",
+  zIndexDefault: "1",
+  zIndexToast: "500",
+  zIndexPopup: "950",
+  zIndexModal: "900",
+  zIndexSticky: "300",
+  zIndexMasked: "100",
+  zIndexDeep: "-999999",
+  zIndexOverlay: "700",
+  zIndexMask: "200",
+  zIndexHeader: "400",
+  lineHeightMedium: "1.5",
+  lineHeightSmall: "1.25",
+  lineHeightXSmall: "1",
+  transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+
+class DuetSpinner {
+    constructor() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const classes = classNames("duet-spinner", `${this.size}`);
+        const styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    }
+    static get is() { return "duet-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() { return {
+        "accessibleLabel": {
+            "type": String,
+            "attr": "accessible-label"
+        },
+        "color": {
+            "type": String,
+            "attr": "color"
+        },
+        "size": {
+            "type": String,
+            "attr": "size"
+        }
+    }; }
+    static get style() { return ":host {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium::after {\n  border-width: 4px;\n}\n.duet-spinner.large {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+}
+
+export { DuetButton, DuetSpinner };

lib/duet/duet-button.es5.entry.js

@@ -105,7 +105,7 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
             if (this.url) {
-                return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+                return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
                 // If URL prop doesn’t exist, render a regular button.
             }
             else {
-                return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+                return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
             }
@@ -208,3 +208,3 @@ };
         Object.defineProperty(DuetButton, "style", {
-            get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva .duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n  color: #940925;\n}"; },
             enumerable: true,
@@ -215,4 +215,284 @@ configurable: true
     }());
+    var tokens_common = {
+        colorWarning: "rgb(247, 178, 40)",
+        colorGrayLighter: "rgb(245, 248, 250)",
+        colorCategoryHome: "rgb(211, 36, 131)",
+        colorPrimary: "rgb(0, 119, 179)",
+        colorCategoryVehicle: "rgb(54, 74, 129)",
+        colorSuccess: "rgb(0, 135, 90)",
+        colorCategoryFamily: "rgb(11, 114, 136)",
+        colorPrimaryLightest: "rgb(243, 249, 252)",
+        colorPrimaryLighter: "rgb(230, 242, 248)",
+        colorBrandBlue: "rgb(0, 161, 212)",
+        colorPrimaryDark: "rgb(0, 77, 128)",
+        colorGrayLightest: "rgb(255, 255, 255)",
+        colorCategoryFinance: "rgb(122, 1, 196)",
+        colorGrayDark: "rgb(101, 119, 135)",
+        colorGrayLight: "rgb(225, 227, 230)",
+        colorSecondary: "rgb(0, 41, 77)",
+        colorCategoryPet: "rgb(168, 1, 78)",
+        colorPrimaryLight: "rgb(205, 229, 241)",
+        colorCategoryTravel: "rgb(213, 66, 3)",
+        colorGray: "rgb(207, 210, 212)",
+        colorDanger: "rgb(222, 35, 98)",
+        colorGrayDarkerTurva: "rgb(69, 69, 69)",
+        colorGrayLighterTurva: "rgb(249, 249, 249)",
+        colorCategoryHomeTurva: "rgb(161, 10, 78)",
+        colorPrimaryTurva: "rgb(198, 12, 48)",
+        colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+        colorSuccessTurva: "rgb(8, 135, 78)",
+        colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+        colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+        colorCategoryUnionTurva: "rgb(132, 68, 148)",
+        colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+        colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+        colorGrayLightestTurva: "rgb(255, 255, 255)",
+        colorGrayDarkTurva: "rgb(117, 117, 117)",
+        colorGrayLightTurva: "rgb(230, 230, 230)",
+        colorBrandGrayTurva: "rgb(178, 180, 179)",
+        colorSecondaryTurva: "rgb(17, 17, 17)",
+        colorPrimaryLightTurva: "rgb(244, 207, 214)",
+        colorCategoryTravelTurva: "rgb(9, 129, 148)",
+        colorGrayTurva: "rgb(209, 209, 209)",
+        colorDangerTurva: "rgb(224, 42, 13)",
+        colorWarningTurva: "rgb(250, 164, 15)",
+        fontWeightExtraBold: "800",
+        letterSpacingHeading: "-0.01rem",
+        fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontWeightBold: "700",
+        fontWeightNormal: "400",
+        fontWeightSemiBold: "600",
+        fontSizeXxxxLarge: "4.5rem",
+        fontSizeXxxLarge: "3rem",
+        fontSizeXxLarge: "2.25rem",
+        fontSizeXLarge: "1.5rem",
+        fontSizeLarge: "1.25rem",
+        fontSizeMedium: "1rem",
+        fontSizeSmall: "0.875rem",
+        fontSizeXSmall: "0.75rem",
+        radiusDefault: "4px",
+        radiusCircle: "50%",
+        radiusPill: "20rem",
+        shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+        shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+        shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+        shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+        shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+        spaceXxSmall: "4px",
+        spaceLarge: "20px",
+        spaceXSmall: "8px",
+        spaceSmall: "12px",
+        spaceMedium: "16px",
+        spaceXxLarge: "36px",
+        spaceXxxxLarge: "72px",
+        spaceXxxLarge: "48px",
+        spaceXLarge: "28px",
+        sizeIconXxLarge: "48px",
+        sizeStepMedium: "40px",
+        sizeButtonMinWidth: "6.875rem",
+        sizeHeader: "70px",
+        sizeIconXxxLarge: "72px",
+        sizeIconXLarge: "36px",
+        sizeIconXxSmall: "12px",
+        sizeStepSmall: "30px",
+        sizeIconLarge: "30px",
+        sizeTappableSquare: "48px",
+        sizeIconXSmall: "16px",
+        sizeButtonBorder: "inset 0 0 0 2px",
+        sizeIconMedium: "24px",
+        sizeIconSmall: "20px",
+        opacity75: "0.75",
+        opacity50: "0.50",
+        opacity30: "0.30",
+        zIndexDropdown: "600",
+        zIndexSpinner: "800",
+        zIndexDefault: "1",
+        zIndexToast: "500",
+        zIndexPopup: "950",
+        zIndexModal: "900",
+        zIndexSticky: "300",
+        zIndexMasked: "100",
+        zIndexDeep: "-999999",
+        zIndexOverlay: "700",
+        zIndexMask: "200",
+        zIndexHeader: "400",
+        lineHeightMedium: "1.5",
+        lineHeightSmall: "1.25",
+        lineHeightXSmall: "1",
+        transitionQuickly: "300ms ease",
+    };
+    var tokens_common_1 = tokens_common.colorWarning;
+    var tokens_common_2 = tokens_common.colorGrayLighter;
+    var tokens_common_3 = tokens_common.colorCategoryHome;
+    var tokens_common_4 = tokens_common.colorPrimary;
+    var tokens_common_5 = tokens_common.colorCategoryVehicle;
+    var tokens_common_6 = tokens_common.colorSuccess;
+    var tokens_common_7 = tokens_common.colorCategoryFamily;
+    var tokens_common_8 = tokens_common.colorPrimaryLightest;
+    var tokens_common_9 = tokens_common.colorPrimaryLighter;
+    var tokens_common_10 = tokens_common.colorBrandBlue;
+    var tokens_common_11 = tokens_common.colorPrimaryDark;
+    var tokens_common_12 = tokens_common.colorGrayLightest;
+    var tokens_common_13 = tokens_common.colorCategoryFinance;
+    var tokens_common_14 = tokens_common.colorGrayDark;
+    var tokens_common_15 = tokens_common.colorGrayLight;
+    var tokens_common_16 = tokens_common.colorSecondary;
+    var tokens_common_17 = tokens_common.colorCategoryPet;
+    var tokens_common_18 = tokens_common.colorPrimaryLight;
+    var tokens_common_19 = tokens_common.colorCategoryTravel;
+    var tokens_common_20 = tokens_common.colorGray;
+    var tokens_common_21 = tokens_common.colorDanger;
+    var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+    var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+    var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+    var tokens_common_25 = tokens_common.colorPrimaryTurva;
+    var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+    var tokens_common_27 = tokens_common.colorSuccessTurva;
+    var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+    var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+    var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+    var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+    var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+    var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+    var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+    var tokens_common_35 = tokens_common.colorGrayLightTurva;
+    var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+    var tokens_common_37 = tokens_common.colorSecondaryTurva;
+    var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+    var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+    var tokens_common_40 = tokens_common.colorGrayTurva;
+    var tokens_common_41 = tokens_common.colorDangerTurva;
+    var tokens_common_42 = tokens_common.colorWarningTurva;
+    var tokens_common_43 = tokens_common.fontWeightExtraBold;
+    var tokens_common_44 = tokens_common.letterSpacingHeading;
+    var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+    var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+    var tokens_common_47 = tokens_common.fontFamilyHeading;
+    var tokens_common_48 = tokens_common.fontFamilyText;
+    var tokens_common_49 = tokens_common.fontWeightBold;
+    var tokens_common_50 = tokens_common.fontWeightNormal;
+    var tokens_common_51 = tokens_common.fontWeightSemiBold;
+    var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+    var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+    var tokens_common_54 = tokens_common.fontSizeXxLarge;
+    var tokens_common_55 = tokens_common.fontSizeXLarge;
+    var tokens_common_56 = tokens_common.fontSizeLarge;
+    var tokens_common_57 = tokens_common.fontSizeMedium;
+    var tokens_common_58 = tokens_common.fontSizeSmall;
+    var tokens_common_59 = tokens_common.fontSizeXSmall;
+    var tokens_common_60 = tokens_common.radiusDefault;
+    var tokens_common_61 = tokens_common.radiusCircle;
+    var tokens_common_62 = tokens_common.radiusPill;
+    var tokens_common_63 = tokens_common.shadowDefault;
+    var tokens_common_64 = tokens_common.shadowHover;
+    var tokens_common_65 = tokens_common.shadowModal;
+    var tokens_common_66 = tokens_common.shadowDefaultTurva;
+    var tokens_common_67 = tokens_common.shadowHoverTurva;
+    var tokens_common_68 = tokens_common.spaceXxSmall;
+    var tokens_common_69 = tokens_common.spaceLarge;
+    var tokens_common_70 = tokens_common.spaceXSmall;
+    var tokens_common_71 = tokens_common.spaceSmall;
+    var tokens_common_72 = tokens_common.spaceMedium;
+    var tokens_common_73 = tokens_common.spaceXxLarge;
+    var tokens_common_74 = tokens_common.spaceXxxxLarge;
+    var tokens_common_75 = tokens_common.spaceXxxLarge;
+    var tokens_common_76 = tokens_common.spaceXLarge;
+    var tokens_common_77 = tokens_common.sizeIconXxLarge;
+    var tokens_common_78 = tokens_common.sizeStepMedium;
+    var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+    var tokens_common_80 = tokens_common.sizeHeader;
+    var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+    var tokens_common_82 = tokens_common.sizeIconXLarge;
+    var tokens_common_83 = tokens_common.sizeIconXxSmall;
+    var tokens_common_84 = tokens_common.sizeStepSmall;
+    var tokens_common_85 = tokens_common.sizeIconLarge;
+    var tokens_common_86 = tokens_common.sizeTappableSquare;
+    var tokens_common_87 = tokens_common.sizeIconXSmall;
+    var tokens_common_88 = tokens_common.sizeButtonBorder;
+    var tokens_common_89 = tokens_common.sizeIconMedium;
+    var tokens_common_90 = tokens_common.sizeIconSmall;
+    var tokens_common_91 = tokens_common.opacity75;
+    var tokens_common_92 = tokens_common.opacity50;
+    var tokens_common_93 = tokens_common.opacity30;
+    var tokens_common_94 = tokens_common.zIndexDropdown;
+    var tokens_common_95 = tokens_common.zIndexSpinner;
+    var tokens_common_96 = tokens_common.zIndexDefault;
+    var tokens_common_97 = tokens_common.zIndexToast;
+    var tokens_common_98 = tokens_common.zIndexPopup;
+    var tokens_common_99 = tokens_common.zIndexModal;
+    var tokens_common_100 = tokens_common.zIndexSticky;
+    var tokens_common_101 = tokens_common.zIndexMasked;
+    var tokens_common_102 = tokens_common.zIndexDeep;
+    var tokens_common_103 = tokens_common.zIndexOverlay;
+    var tokens_common_104 = tokens_common.zIndexMask;
+    var tokens_common_105 = tokens_common.zIndexHeader;
+    var tokens_common_106 = tokens_common.lineHeightMedium;
+    var tokens_common_107 = tokens_common.lineHeightSmall;
+    var tokens_common_108 = tokens_common.lineHeightXSmall;
+    var tokens_common_109 = tokens_common.transitionQuickly;
+    var DuetSpinner = /** @class */ (function () {
+        function DuetSpinner() {
+            /**
+             * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+             */
+            this.color = tokens_common.colorGrayLightest;
+            /**
+             * Size variation of the spinner. Can be one of: small, medium, large.
+             */
+            this.size = "small";
+        }
+        /**
+         * render() function
+         * Always the last one in the class.
+         */
+        DuetSpinner.prototype.render = function () {
+            var classes = __chunk_1.classNames("duet-spinner", "" + this.size);
+            var styles = {
+                color: this.color,
+            };
+            return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+        };
+        Object.defineProperty(DuetSpinner, "is", {
+            get: function () { return "duet-spinner"; },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "encapsulation", {
+            get: function () { return "shadow"; },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "properties", {
+            get: function () {
+                return {
+                    "accessibleLabel": {
+                        "type": String,
+                        "attr": "accessible-label"
+                    },
+                    "color": {
+                        "type": String,
+                        "attr": "color"
+                    },
+                    "size": {
+                        "type": String,
+                        "attr": "size"
+                    }
+                };
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "style", {
+            get: function () { return ":host {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium::after {\n  border-width: 4px;\n}\n.duet-spinner.large {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            enumerable: true,
+            configurable: true
+        });
+        return DuetSpinner;
+    }());
     exports.DuetButton = DuetButton;
+    exports.DuetSpinner = DuetSpinner;
     Object.defineProperty(exports, '__esModule', { value: true });
 });

lib/duet/duet-button.sc.entry.js

@@ -108,3 +108,3 @@ const h = window.Duet.h;
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
@@ -116,3 +116,3 @@ }
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -194,5 +194,267 @@ }
         }]; }
-    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button    + .duet-spinner.sc-duet-button {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva.sc-duet-button   .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button   .duet-button.disabled.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button:hover {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.loading.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.negative.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button:hover {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button:hover {\n  color: #940925;\n}"; }
 }
 
-export { DuetButton };
+var tokens_common = {
+  colorWarning: "rgb(247, 178, 40)",
+  colorGrayLighter: "rgb(245, 248, 250)",
+  colorCategoryHome: "rgb(211, 36, 131)",
+  colorPrimary: "rgb(0, 119, 179)",
+  colorCategoryVehicle: "rgb(54, 74, 129)",
+  colorSuccess: "rgb(0, 135, 90)",
+  colorCategoryFamily: "rgb(11, 114, 136)",
+  colorPrimaryLightest: "rgb(243, 249, 252)",
+  colorPrimaryLighter: "rgb(230, 242, 248)",
+  colorBrandBlue: "rgb(0, 161, 212)",
+  colorPrimaryDark: "rgb(0, 77, 128)",
+  colorGrayLightest: "rgb(255, 255, 255)",
+  colorCategoryFinance: "rgb(122, 1, 196)",
+  colorGrayDark: "rgb(101, 119, 135)",
+  colorGrayLight: "rgb(225, 227, 230)",
+  colorSecondary: "rgb(0, 41, 77)",
+  colorCategoryPet: "rgb(168, 1, 78)",
+  colorPrimaryLight: "rgb(205, 229, 241)",
+  colorCategoryTravel: "rgb(213, 66, 3)",
+  colorGray: "rgb(207, 210, 212)",
+  colorDanger: "rgb(222, 35, 98)",
+  colorGrayDarkerTurva: "rgb(69, 69, 69)",
+  colorGrayLighterTurva: "rgb(249, 249, 249)",
+  colorCategoryHomeTurva: "rgb(161, 10, 78)",
+  colorPrimaryTurva: "rgb(198, 12, 48)",
+  colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+  colorSuccessTurva: "rgb(8, 135, 78)",
+  colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+  colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+  colorCategoryUnionTurva: "rgb(132, 68, 148)",
+  colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+  colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+  colorGrayLightestTurva: "rgb(255, 255, 255)",
+  colorGrayDarkTurva: "rgb(117, 117, 117)",
+  colorGrayLightTurva: "rgb(230, 230, 230)",
+  colorBrandGrayTurva: "rgb(178, 180, 179)",
+  colorSecondaryTurva: "rgb(17, 17, 17)",
+  colorPrimaryLightTurva: "rgb(244, 207, 214)",
+  colorCategoryTravelTurva: "rgb(9, 129, 148)",
+  colorGrayTurva: "rgb(209, 209, 209)",
+  colorDangerTurva: "rgb(224, 42, 13)",
+  colorWarningTurva: "rgb(250, 164, 15)",
+  fontWeightExtraBold: "800",
+  letterSpacingHeading: "-0.01rem",
+  fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontWeightBold: "700",
+  fontWeightNormal: "400",
+  fontWeightSemiBold: "600",
+  fontSizeXxxxLarge: "4.5rem",
+  fontSizeXxxLarge: "3rem",
+  fontSizeXxLarge: "2.25rem",
+  fontSizeXLarge: "1.5rem",
+  fontSizeLarge: "1.25rem",
+  fontSizeMedium: "1rem",
+  fontSizeSmall: "0.875rem",
+  fontSizeXSmall: "0.75rem",
+  radiusDefault: "4px",
+  radiusCircle: "50%",
+  radiusPill: "20rem",
+  shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+  shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+  shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+  shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+  shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+  spaceXxSmall: "4px",
+  spaceLarge: "20px",
+  spaceXSmall: "8px",
+  spaceSmall: "12px",
+  spaceMedium: "16px",
+  spaceXxLarge: "36px",
+  spaceXxxxLarge: "72px",
+  spaceXxxLarge: "48px",
+  spaceXLarge: "28px",
+  sizeIconXxLarge: "48px",
+  sizeStepMedium: "40px",
+  sizeButtonMinWidth: "6.875rem",
+  sizeHeader: "70px",
+  sizeIconXxxLarge: "72px",
+  sizeIconXLarge: "36px",
+  sizeIconXxSmall: "12px",
+  sizeStepSmall: "30px",
+  sizeIconLarge: "30px",
+  sizeTappableSquare: "48px",
+  sizeIconXSmall: "16px",
+  sizeButtonBorder: "inset 0 0 0 2px",
+  sizeIconMedium: "24px",
+  sizeIconSmall: "20px",
+  opacity75: "0.75",
+  opacity50: "0.50",
+  opacity30: "0.30",
+  zIndexDropdown: "600",
+  zIndexSpinner: "800",
+  zIndexDefault: "1",
+  zIndexToast: "500",
+  zIndexPopup: "950",
+  zIndexModal: "900",
+  zIndexSticky: "300",
+  zIndexMasked: "100",
+  zIndexDeep: "-999999",
+  zIndexOverlay: "700",
+  zIndexMask: "200",
+  zIndexHeader: "400",
+  lineHeightMedium: "1.5",
+  lineHeightSmall: "1.25",
+  lineHeightXSmall: "1",
+  transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+
+class DuetSpinner {
+    constructor() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const classes = classNames("duet-spinner", `${this.size}`);
+        const styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    }
+    static get is() { return "duet-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() { return {
+        "accessibleLabel": {
+            "type": String,
+            "attr": "accessible-label"
+        },
+        "color": {
+            "type": String,
+            "attr": "color"
+        },
+        "size": {
+            "type": String,
+            "attr": "size"
+        }
+    }; }
+    static get style() { return ".sc-duet-spinner-h {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner.sc-duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner.sc-duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium.sc-duet-spinner {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium.sc-duet-spinner::after {\n  border-width: 4px;\n}\n.duet-spinner.large.sc-duet-spinner {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large.sc-duet-spinner::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+}
+
+export { DuetButton, DuetSpinner };

lib/duet/duet-button.sc.es5.entry.js

@@ -105,7 +105,7 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
             if (this.url) {
-                return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+                return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
                 // If URL prop doesn’t exist, render a regular button.
             }
             else {
-                return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+                return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
             }
@@ -208,3 +208,3 @@ };
         Object.defineProperty(DuetButton, "style", {
-            get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button    + .duet-spinner.sc-duet-button {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva.sc-duet-button   .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button   .duet-button.disabled.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button:hover {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.loading.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.negative.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button:hover {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button:hover {\n  color: #940925;\n}"; },
             enumerable: true,
@@ -215,4 +215,284 @@ configurable: true
     }());
+    var tokens_common = {
+        colorWarning: "rgb(247, 178, 40)",
+        colorGrayLighter: "rgb(245, 248, 250)",
+        colorCategoryHome: "rgb(211, 36, 131)",
+        colorPrimary: "rgb(0, 119, 179)",
+        colorCategoryVehicle: "rgb(54, 74, 129)",
+        colorSuccess: "rgb(0, 135, 90)",
+        colorCategoryFamily: "rgb(11, 114, 136)",
+        colorPrimaryLightest: "rgb(243, 249, 252)",
+        colorPrimaryLighter: "rgb(230, 242, 248)",
+        colorBrandBlue: "rgb(0, 161, 212)",
+        colorPrimaryDark: "rgb(0, 77, 128)",
+        colorGrayLightest: "rgb(255, 255, 255)",
+        colorCategoryFinance: "rgb(122, 1, 196)",
+        colorGrayDark: "rgb(101, 119, 135)",
+        colorGrayLight: "rgb(225, 227, 230)",
+        colorSecondary: "rgb(0, 41, 77)",
+        colorCategoryPet: "rgb(168, 1, 78)",
+        colorPrimaryLight: "rgb(205, 229, 241)",
+        colorCategoryTravel: "rgb(213, 66, 3)",
+        colorGray: "rgb(207, 210, 212)",
+        colorDanger: "rgb(222, 35, 98)",
+        colorGrayDarkerTurva: "rgb(69, 69, 69)",
+        colorGrayLighterTurva: "rgb(249, 249, 249)",
+        colorCategoryHomeTurva: "rgb(161, 10, 78)",
+        colorPrimaryTurva: "rgb(198, 12, 48)",
+        colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+        colorSuccessTurva: "rgb(8, 135, 78)",
+        colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+        colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+        colorCategoryUnionTurva: "rgb(132, 68, 148)",
+        colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+        colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+        colorGrayLightestTurva: "rgb(255, 255, 255)",
+        colorGrayDarkTurva: "rgb(117, 117, 117)",
+        colorGrayLightTurva: "rgb(230, 230, 230)",
+        colorBrandGrayTurva: "rgb(178, 180, 179)",
+        colorSecondaryTurva: "rgb(17, 17, 17)",
+        colorPrimaryLightTurva: "rgb(244, 207, 214)",
+        colorCategoryTravelTurva: "rgb(9, 129, 148)",
+        colorGrayTurva: "rgb(209, 209, 209)",
+        colorDangerTurva: "rgb(224, 42, 13)",
+        colorWarningTurva: "rgb(250, 164, 15)",
+        fontWeightExtraBold: "800",
+        letterSpacingHeading: "-0.01rem",
+        fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        fontWeightBold: "700",
+        fontWeightNormal: "400",
+        fontWeightSemiBold: "600",
+        fontSizeXxxxLarge: "4.5rem",
+        fontSizeXxxLarge: "3rem",
+        fontSizeXxLarge: "2.25rem",
+        fontSizeXLarge: "1.5rem",
+        fontSizeLarge: "1.25rem",
+        fontSizeMedium: "1rem",
+        fontSizeSmall: "0.875rem",
+        fontSizeXSmall: "0.75rem",
+        radiusDefault: "4px",
+        radiusCircle: "50%",
+        radiusPill: "20rem",
+        shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+        shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+        shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+        shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+        shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+        spaceXxSmall: "4px",
+        spaceLarge: "20px",
+        spaceXSmall: "8px",
+        spaceSmall: "12px",
+        spaceMedium: "16px",
+        spaceXxLarge: "36px",
+        spaceXxxxLarge: "72px",
+        spaceXxxLarge: "48px",
+        spaceXLarge: "28px",
+        sizeIconXxLarge: "48px",
+        sizeStepMedium: "40px",
+        sizeButtonMinWidth: "6.875rem",
+        sizeHeader: "70px",
+        sizeIconXxxLarge: "72px",
+        sizeIconXLarge: "36px",
+        sizeIconXxSmall: "12px",
+        sizeStepSmall: "30px",
+        sizeIconLarge: "30px",
+        sizeTappableSquare: "48px",
+        sizeIconXSmall: "16px",
+        sizeButtonBorder: "inset 0 0 0 2px",
+        sizeIconMedium: "24px",
+        sizeIconSmall: "20px",
+        opacity75: "0.75",
+        opacity50: "0.50",
+        opacity30: "0.30",
+        zIndexDropdown: "600",
+        zIndexSpinner: "800",
+        zIndexDefault: "1",
+        zIndexToast: "500",
+        zIndexPopup: "950",
+        zIndexModal: "900",
+        zIndexSticky: "300",
+        zIndexMasked: "100",
+        zIndexDeep: "-999999",
+        zIndexOverlay: "700",
+        zIndexMask: "200",
+        zIndexHeader: "400",
+        lineHeightMedium: "1.5",
+        lineHeightSmall: "1.25",
+        lineHeightXSmall: "1",
+        transitionQuickly: "300ms ease",
+    };
+    var tokens_common_1 = tokens_common.colorWarning;
+    var tokens_common_2 = tokens_common.colorGrayLighter;
+    var tokens_common_3 = tokens_common.colorCategoryHome;
+    var tokens_common_4 = tokens_common.colorPrimary;
+    var tokens_common_5 = tokens_common.colorCategoryVehicle;
+    var tokens_common_6 = tokens_common.colorSuccess;
+    var tokens_common_7 = tokens_common.colorCategoryFamily;
+    var tokens_common_8 = tokens_common.colorPrimaryLightest;
+    var tokens_common_9 = tokens_common.colorPrimaryLighter;
+    var tokens_common_10 = tokens_common.colorBrandBlue;
+    var tokens_common_11 = tokens_common.colorPrimaryDark;
+    var tokens_common_12 = tokens_common.colorGrayLightest;
+    var tokens_common_13 = tokens_common.colorCategoryFinance;
+    var tokens_common_14 = tokens_common.colorGrayDark;
+    var tokens_common_15 = tokens_common.colorGrayLight;
+    var tokens_common_16 = tokens_common.colorSecondary;
+    var tokens_common_17 = tokens_common.colorCategoryPet;
+    var tokens_common_18 = tokens_common.colorPrimaryLight;
+    var tokens_common_19 = tokens_common.colorCategoryTravel;
+    var tokens_common_20 = tokens_common.colorGray;
+    var tokens_common_21 = tokens_common.colorDanger;
+    var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+    var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+    var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+    var tokens_common_25 = tokens_common.colorPrimaryTurva;
+    var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+    var tokens_common_27 = tokens_common.colorSuccessTurva;
+    var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+    var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+    var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+    var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+    var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+    var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+    var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+    var tokens_common_35 = tokens_common.colorGrayLightTurva;
+    var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+    var tokens_common_37 = tokens_common.colorSecondaryTurva;
+    var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+    var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+    var tokens_common_40 = tokens_common.colorGrayTurva;
+    var tokens_common_41 = tokens_common.colorDangerTurva;
+    var tokens_common_42 = tokens_common.colorWarningTurva;
+    var tokens_common_43 = tokens_common.fontWeightExtraBold;
+    var tokens_common_44 = tokens_common.letterSpacingHeading;
+    var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+    var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+    var tokens_common_47 = tokens_common.fontFamilyHeading;
+    var tokens_common_48 = tokens_common.fontFamilyText;
+    var tokens_common_49 = tokens_common.fontWeightBold;
+    var tokens_common_50 = tokens_common.fontWeightNormal;
+    var tokens_common_51 = tokens_common.fontWeightSemiBold;
+    var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+    var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+    var tokens_common_54 = tokens_common.fontSizeXxLarge;
+    var tokens_common_55 = tokens_common.fontSizeXLarge;
+    var tokens_common_56 = tokens_common.fontSizeLarge;
+    var tokens_common_57 = tokens_common.fontSizeMedium;
+    var tokens_common_58 = tokens_common.fontSizeSmall;
+    var tokens_common_59 = tokens_common.fontSizeXSmall;
+    var tokens_common_60 = tokens_common.radiusDefault;
+    var tokens_common_61 = tokens_common.radiusCircle;
+    var tokens_common_62 = tokens_common.radiusPill;
+    var tokens_common_63 = tokens_common.shadowDefault;
+    var tokens_common_64 = tokens_common.shadowHover;
+    var tokens_common_65 = tokens_common.shadowModal;
+    var tokens_common_66 = tokens_common.shadowDefaultTurva;
+    var tokens_common_67 = tokens_common.shadowHoverTurva;
+    var tokens_common_68 = tokens_common.spaceXxSmall;
+    var tokens_common_69 = tokens_common.spaceLarge;
+    var tokens_common_70 = tokens_common.spaceXSmall;
+    var tokens_common_71 = tokens_common.spaceSmall;
+    var tokens_common_72 = tokens_common.spaceMedium;
+    var tokens_common_73 = tokens_common.spaceXxLarge;
+    var tokens_common_74 = tokens_common.spaceXxxxLarge;
+    var tokens_common_75 = tokens_common.spaceXxxLarge;
+    var tokens_common_76 = tokens_common.spaceXLarge;
+    var tokens_common_77 = tokens_common.sizeIconXxLarge;
+    var tokens_common_78 = tokens_common.sizeStepMedium;
+    var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+    var tokens_common_80 = tokens_common.sizeHeader;
+    var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+    var tokens_common_82 = tokens_common.sizeIconXLarge;
+    var tokens_common_83 = tokens_common.sizeIconXxSmall;
+    var tokens_common_84 = tokens_common.sizeStepSmall;
+    var tokens_common_85 = tokens_common.sizeIconLarge;
+    var tokens_common_86 = tokens_common.sizeTappableSquare;
+    var tokens_common_87 = tokens_common.sizeIconXSmall;
+    var tokens_common_88 = tokens_common.sizeButtonBorder;
+    var tokens_common_89 = tokens_common.sizeIconMedium;
+    var tokens_common_90 = tokens_common.sizeIconSmall;
+    var tokens_common_91 = tokens_common.opacity75;
+    var tokens_common_92 = tokens_common.opacity50;
+    var tokens_common_93 = tokens_common.opacity30;
+    var tokens_common_94 = tokens_common.zIndexDropdown;
+    var tokens_common_95 = tokens_common.zIndexSpinner;
+    var tokens_common_96 = tokens_common.zIndexDefault;
+    var tokens_common_97 = tokens_common.zIndexToast;
+    var tokens_common_98 = tokens_common.zIndexPopup;
+    var tokens_common_99 = tokens_common.zIndexModal;
+    var tokens_common_100 = tokens_common.zIndexSticky;
+    var tokens_common_101 = tokens_common.zIndexMasked;
+    var tokens_common_102 = tokens_common.zIndexDeep;
+    var tokens_common_103 = tokens_common.zIndexOverlay;
+    var tokens_common_104 = tokens_common.zIndexMask;
+    var tokens_common_105 = tokens_common.zIndexHeader;
+    var tokens_common_106 = tokens_common.lineHeightMedium;
+    var tokens_common_107 = tokens_common.lineHeightSmall;
+    var tokens_common_108 = tokens_common.lineHeightXSmall;
+    var tokens_common_109 = tokens_common.transitionQuickly;
+    var DuetSpinner = /** @class */ (function () {
+        function DuetSpinner() {
+            /**
+             * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+             */
+            this.color = tokens_common.colorGrayLightest;
+            /**
+             * Size variation of the spinner. Can be one of: small, medium, large.
+             */
+            this.size = "small";
+        }
+        /**
+         * render() function
+         * Always the last one in the class.
+         */
+        DuetSpinner.prototype.render = function () {
+            var classes = __chunk_1.classNames("duet-spinner", "" + this.size);
+            var styles = {
+                color: this.color,
+            };
+            return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+        };
+        Object.defineProperty(DuetSpinner, "is", {
+            get: function () { return "duet-spinner"; },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "encapsulation", {
+            get: function () { return "shadow"; },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "properties", {
+            get: function () {
+                return {
+                    "accessibleLabel": {
+                        "type": String,
+                        "attr": "accessible-label"
+                    },
+                    "color": {
+                        "type": String,
+                        "attr": "color"
+                    },
+                    "size": {
+                        "type": String,
+                        "attr": "size"
+                    }
+                };
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DuetSpinner, "style", {
+            get: function () { return ".sc-duet-spinner-h {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner.sc-duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner.sc-duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium.sc-duet-spinner {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium.sc-duet-spinner::after {\n  border-width: 4px;\n}\n.duet-spinner.large.sc-duet-spinner {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large.sc-duet-spinner::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            enumerable: true,
+            configurable: true
+        });
+        return DuetSpinner;
+    }());
     exports.DuetButton = DuetButton;
+    exports.DuetSpinner = DuetSpinner;
     Object.defineProperty(exports, '__esModule', { value: true });
 });

lib/esm/es2017/build/duet-button.entry.js

@@ -108,3 +108,3 @@ import { h } from '../duet.core.js';
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
@@ -116,3 +116,3 @@ }
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -194,5 +194,267 @@ }
         }]; }
-    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva .duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n  color: #940925;\n}"; }
 }
 
-export { DuetButton };
+var tokens_common = {
+  colorWarning: "rgb(247, 178, 40)",
+  colorGrayLighter: "rgb(245, 248, 250)",
+  colorCategoryHome: "rgb(211, 36, 131)",
+  colorPrimary: "rgb(0, 119, 179)",
+  colorCategoryVehicle: "rgb(54, 74, 129)",
+  colorSuccess: "rgb(0, 135, 90)",
+  colorCategoryFamily: "rgb(11, 114, 136)",
+  colorPrimaryLightest: "rgb(243, 249, 252)",
+  colorPrimaryLighter: "rgb(230, 242, 248)",
+  colorBrandBlue: "rgb(0, 161, 212)",
+  colorPrimaryDark: "rgb(0, 77, 128)",
+  colorGrayLightest: "rgb(255, 255, 255)",
+  colorCategoryFinance: "rgb(122, 1, 196)",
+  colorGrayDark: "rgb(101, 119, 135)",
+  colorGrayLight: "rgb(225, 227, 230)",
+  colorSecondary: "rgb(0, 41, 77)",
+  colorCategoryPet: "rgb(168, 1, 78)",
+  colorPrimaryLight: "rgb(205, 229, 241)",
+  colorCategoryTravel: "rgb(213, 66, 3)",
+  colorGray: "rgb(207, 210, 212)",
+  colorDanger: "rgb(222, 35, 98)",
+  colorGrayDarkerTurva: "rgb(69, 69, 69)",
+  colorGrayLighterTurva: "rgb(249, 249, 249)",
+  colorCategoryHomeTurva: "rgb(161, 10, 78)",
+  colorPrimaryTurva: "rgb(198, 12, 48)",
+  colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+  colorSuccessTurva: "rgb(8, 135, 78)",
+  colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+  colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+  colorCategoryUnionTurva: "rgb(132, 68, 148)",
+  colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+  colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+  colorGrayLightestTurva: "rgb(255, 255, 255)",
+  colorGrayDarkTurva: "rgb(117, 117, 117)",
+  colorGrayLightTurva: "rgb(230, 230, 230)",
+  colorBrandGrayTurva: "rgb(178, 180, 179)",
+  colorSecondaryTurva: "rgb(17, 17, 17)",
+  colorPrimaryLightTurva: "rgb(244, 207, 214)",
+  colorCategoryTravelTurva: "rgb(9, 129, 148)",
+  colorGrayTurva: "rgb(209, 209, 209)",
+  colorDangerTurva: "rgb(224, 42, 13)",
+  colorWarningTurva: "rgb(250, 164, 15)",
+  fontWeightExtraBold: "800",
+  letterSpacingHeading: "-0.01rem",
+  fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontWeightBold: "700",
+  fontWeightNormal: "400",
+  fontWeightSemiBold: "600",
+  fontSizeXxxxLarge: "4.5rem",
+  fontSizeXxxLarge: "3rem",
+  fontSizeXxLarge: "2.25rem",
+  fontSizeXLarge: "1.5rem",
+  fontSizeLarge: "1.25rem",
+  fontSizeMedium: "1rem",
+  fontSizeSmall: "0.875rem",
+  fontSizeXSmall: "0.75rem",
+  radiusDefault: "4px",
+  radiusCircle: "50%",
+  radiusPill: "20rem",
+  shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+  shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+  shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+  shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+  shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+  spaceXxSmall: "4px",
+  spaceLarge: "20px",
+  spaceXSmall: "8px",
+  spaceSmall: "12px",
+  spaceMedium: "16px",
+  spaceXxLarge: "36px",
+  spaceXxxxLarge: "72px",
+  spaceXxxLarge: "48px",
+  spaceXLarge: "28px",
+  sizeIconXxLarge: "48px",
+  sizeStepMedium: "40px",
+  sizeButtonMinWidth: "6.875rem",
+  sizeHeader: "70px",
+  sizeIconXxxLarge: "72px",
+  sizeIconXLarge: "36px",
+  sizeIconXxSmall: "12px",
+  sizeStepSmall: "30px",
+  sizeIconLarge: "30px",
+  sizeTappableSquare: "48px",
+  sizeIconXSmall: "16px",
+  sizeButtonBorder: "inset 0 0 0 2px",
+  sizeIconMedium: "24px",
+  sizeIconSmall: "20px",
+  opacity75: "0.75",
+  opacity50: "0.50",
+  opacity30: "0.30",
+  zIndexDropdown: "600",
+  zIndexSpinner: "800",
+  zIndexDefault: "1",
+  zIndexToast: "500",
+  zIndexPopup: "950",
+  zIndexModal: "900",
+  zIndexSticky: "300",
+  zIndexMasked: "100",
+  zIndexDeep: "-999999",
+  zIndexOverlay: "700",
+  zIndexMask: "200",
+  zIndexHeader: "400",
+  lineHeightMedium: "1.5",
+  lineHeightSmall: "1.25",
+  lineHeightXSmall: "1",
+  transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+
+class DuetSpinner {
+    constructor() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const classes = classNames("duet-spinner", `${this.size}`);
+        const styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    }
+    static get is() { return "duet-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() { return {
+        "accessibleLabel": {
+            "type": String,
+            "attr": "accessible-label"
+        },
+        "color": {
+            "type": String,
+            "attr": "color"
+        },
+        "size": {
+            "type": String,
+            "attr": "size"
+        }
+    }; }
+    static get style() { return ":host {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium::after {\n  border-width: 4px;\n}\n.duet-spinner.large {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+}
+
+export { DuetButton, DuetSpinner };

lib/esm/es2017/build/duet-button.sc.entry.js

@@ -108,3 +108,3 @@ import { h } from '../duet.core.js';
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
@@ -116,3 +116,3 @@ }
                     h("slot", null)),
-                h("div", { class: "duet-spinner" })));
+                this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -194,5 +194,267 @@ }
         }]; }
-    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button    + .duet-spinner.sc-duet-button {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva.sc-duet-button   .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button   .duet-button.disabled.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button:hover {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.loading.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.negative.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button:hover {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button:hover {\n  color: #940925;\n}"; }
 }
 
-export { DuetButton };
+var tokens_common = {
+  colorWarning: "rgb(247, 178, 40)",
+  colorGrayLighter: "rgb(245, 248, 250)",
+  colorCategoryHome: "rgb(211, 36, 131)",
+  colorPrimary: "rgb(0, 119, 179)",
+  colorCategoryVehicle: "rgb(54, 74, 129)",
+  colorSuccess: "rgb(0, 135, 90)",
+  colorCategoryFamily: "rgb(11, 114, 136)",
+  colorPrimaryLightest: "rgb(243, 249, 252)",
+  colorPrimaryLighter: "rgb(230, 242, 248)",
+  colorBrandBlue: "rgb(0, 161, 212)",
+  colorPrimaryDark: "rgb(0, 77, 128)",
+  colorGrayLightest: "rgb(255, 255, 255)",
+  colorCategoryFinance: "rgb(122, 1, 196)",
+  colorGrayDark: "rgb(101, 119, 135)",
+  colorGrayLight: "rgb(225, 227, 230)",
+  colorSecondary: "rgb(0, 41, 77)",
+  colorCategoryPet: "rgb(168, 1, 78)",
+  colorPrimaryLight: "rgb(205, 229, 241)",
+  colorCategoryTravel: "rgb(213, 66, 3)",
+  colorGray: "rgb(207, 210, 212)",
+  colorDanger: "rgb(222, 35, 98)",
+  colorGrayDarkerTurva: "rgb(69, 69, 69)",
+  colorGrayLighterTurva: "rgb(249, 249, 249)",
+  colorCategoryHomeTurva: "rgb(161, 10, 78)",
+  colorPrimaryTurva: "rgb(198, 12, 48)",
+  colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+  colorSuccessTurva: "rgb(8, 135, 78)",
+  colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+  colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+  colorCategoryUnionTurva: "rgb(132, 68, 148)",
+  colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+  colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+  colorGrayLightestTurva: "rgb(255, 255, 255)",
+  colorGrayDarkTurva: "rgb(117, 117, 117)",
+  colorGrayLightTurva: "rgb(230, 230, 230)",
+  colorBrandGrayTurva: "rgb(178, 180, 179)",
+  colorSecondaryTurva: "rgb(17, 17, 17)",
+  colorPrimaryLightTurva: "rgb(244, 207, 214)",
+  colorCategoryTravelTurva: "rgb(9, 129, 148)",
+  colorGrayTurva: "rgb(209, 209, 209)",
+  colorDangerTurva: "rgb(224, 42, 13)",
+  colorWarningTurva: "rgb(250, 164, 15)",
+  fontWeightExtraBold: "800",
+  letterSpacingHeading: "-0.01rem",
+  fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  fontWeightBold: "700",
+  fontWeightNormal: "400",
+  fontWeightSemiBold: "600",
+  fontSizeXxxxLarge: "4.5rem",
+  fontSizeXxxLarge: "3rem",
+  fontSizeXxLarge: "2.25rem",
+  fontSizeXLarge: "1.5rem",
+  fontSizeLarge: "1.25rem",
+  fontSizeMedium: "1rem",
+  fontSizeSmall: "0.875rem",
+  fontSizeXSmall: "0.75rem",
+  radiusDefault: "4px",
+  radiusCircle: "50%",
+  radiusPill: "20rem",
+  shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+  shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+  shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+  shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+  shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+  spaceXxSmall: "4px",
+  spaceLarge: "20px",
+  spaceXSmall: "8px",
+  spaceSmall: "12px",
+  spaceMedium: "16px",
+  spaceXxLarge: "36px",
+  spaceXxxxLarge: "72px",
+  spaceXxxLarge: "48px",
+  spaceXLarge: "28px",
+  sizeIconXxLarge: "48px",
+  sizeStepMedium: "40px",
+  sizeButtonMinWidth: "6.875rem",
+  sizeHeader: "70px",
+  sizeIconXxxLarge: "72px",
+  sizeIconXLarge: "36px",
+  sizeIconXxSmall: "12px",
+  sizeStepSmall: "30px",
+  sizeIconLarge: "30px",
+  sizeTappableSquare: "48px",
+  sizeIconXSmall: "16px",
+  sizeButtonBorder: "inset 0 0 0 2px",
+  sizeIconMedium: "24px",
+  sizeIconSmall: "20px",
+  opacity75: "0.75",
+  opacity50: "0.50",
+  opacity30: "0.30",
+  zIndexDropdown: "600",
+  zIndexSpinner: "800",
+  zIndexDefault: "1",
+  zIndexToast: "500",
+  zIndexPopup: "950",
+  zIndexModal: "900",
+  zIndexSticky: "300",
+  zIndexMasked: "100",
+  zIndexDeep: "-999999",
+  zIndexOverlay: "700",
+  zIndexMask: "200",
+  zIndexHeader: "400",
+  lineHeightMedium: "1.5",
+  lineHeightSmall: "1.25",
+  lineHeightXSmall: "1",
+  transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+
+class DuetSpinner {
+    constructor() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const classes = classNames("duet-spinner", `${this.size}`);
+        const styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    }
+    static get is() { return "duet-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() { return {
+        "accessibleLabel": {
+            "type": String,
+            "attr": "accessible-label"
+        },
+        "color": {
+            "type": String,
+            "attr": "color"
+        },
+        "size": {
+            "type": String,
+            "attr": "size"
+        }
+    }; }
+    static get style() { return ".sc-duet-spinner-h {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner.sc-duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner.sc-duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium.sc-duet-spinner {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium.sc-duet-spinner::after {\n  border-width: 4px;\n}\n.duet-spinner.large.sc-duet-spinner {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large.sc-duet-spinner::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+}
+
+export { DuetButton, DuetSpinner };

lib/esm/es2017/duet.components.js

 // Duet: Host Data, ES Module/es2017 Target
-export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1]]
+export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

lib/esm/es5/build/duet-button.entry.js

@@ -105,7 +105,7 @@ import { h } from '../duet.core.js';
         if (this.url) {
-            return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+            return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+            return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -208,3 +208,3 @@ };
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading + .duet-spinner {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva .duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n  color: #940925;\n}"; },
         enumerable: true,
@@ -215,2 +215,281 @@ configurable: true
 }());
-export { DuetButton };
+var tokens_common = {
+    colorWarning: "rgb(247, 178, 40)",
+    colorGrayLighter: "rgb(245, 248, 250)",
+    colorCategoryHome: "rgb(211, 36, 131)",
+    colorPrimary: "rgb(0, 119, 179)",
+    colorCategoryVehicle: "rgb(54, 74, 129)",
+    colorSuccess: "rgb(0, 135, 90)",
+    colorCategoryFamily: "rgb(11, 114, 136)",
+    colorPrimaryLightest: "rgb(243, 249, 252)",
+    colorPrimaryLighter: "rgb(230, 242, 248)",
+    colorBrandBlue: "rgb(0, 161, 212)",
+    colorPrimaryDark: "rgb(0, 77, 128)",
+    colorGrayLightest: "rgb(255, 255, 255)",
+    colorCategoryFinance: "rgb(122, 1, 196)",
+    colorGrayDark: "rgb(101, 119, 135)",
+    colorGrayLight: "rgb(225, 227, 230)",
+    colorSecondary: "rgb(0, 41, 77)",
+    colorCategoryPet: "rgb(168, 1, 78)",
+    colorPrimaryLight: "rgb(205, 229, 241)",
+    colorCategoryTravel: "rgb(213, 66, 3)",
+    colorGray: "rgb(207, 210, 212)",
+    colorDanger: "rgb(222, 35, 98)",
+    colorGrayDarkerTurva: "rgb(69, 69, 69)",
+    colorGrayLighterTurva: "rgb(249, 249, 249)",
+    colorCategoryHomeTurva: "rgb(161, 10, 78)",
+    colorPrimaryTurva: "rgb(198, 12, 48)",
+    colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+    colorSuccessTurva: "rgb(8, 135, 78)",
+    colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+    colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+    colorCategoryUnionTurva: "rgb(132, 68, 148)",
+    colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+    colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+    colorGrayLightestTurva: "rgb(255, 255, 255)",
+    colorGrayDarkTurva: "rgb(117, 117, 117)",
+    colorGrayLightTurva: "rgb(230, 230, 230)",
+    colorBrandGrayTurva: "rgb(178, 180, 179)",
+    colorSecondaryTurva: "rgb(17, 17, 17)",
+    colorPrimaryLightTurva: "rgb(244, 207, 214)",
+    colorCategoryTravelTurva: "rgb(9, 129, 148)",
+    colorGrayTurva: "rgb(209, 209, 209)",
+    colorDangerTurva: "rgb(224, 42, 13)",
+    colorWarningTurva: "rgb(250, 164, 15)",
+    fontWeightExtraBold: "800",
+    letterSpacingHeading: "-0.01rem",
+    fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontWeightBold: "700",
+    fontWeightNormal: "400",
+    fontWeightSemiBold: "600",
+    fontSizeXxxxLarge: "4.5rem",
+    fontSizeXxxLarge: "3rem",
+    fontSizeXxLarge: "2.25rem",
+    fontSizeXLarge: "1.5rem",
+    fontSizeLarge: "1.25rem",
+    fontSizeMedium: "1rem",
+    fontSizeSmall: "0.875rem",
+    fontSizeXSmall: "0.75rem",
+    radiusDefault: "4px",
+    radiusCircle: "50%",
+    radiusPill: "20rem",
+    shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+    shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+    shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+    shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+    shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+    spaceXxSmall: "4px",
+    spaceLarge: "20px",
+    spaceXSmall: "8px",
+    spaceSmall: "12px",
+    spaceMedium: "16px",
+    spaceXxLarge: "36px",
+    spaceXxxxLarge: "72px",
+    spaceXxxLarge: "48px",
+    spaceXLarge: "28px",
+    sizeIconXxLarge: "48px",
+    sizeStepMedium: "40px",
+    sizeButtonMinWidth: "6.875rem",
+    sizeHeader: "70px",
+    sizeIconXxxLarge: "72px",
+    sizeIconXLarge: "36px",
+    sizeIconXxSmall: "12px",
+    sizeStepSmall: "30px",
+    sizeIconLarge: "30px",
+    sizeTappableSquare: "48px",
+    sizeIconXSmall: "16px",
+    sizeButtonBorder: "inset 0 0 0 2px",
+    sizeIconMedium: "24px",
+    sizeIconSmall: "20px",
+    opacity75: "0.75",
+    opacity50: "0.50",
+    opacity30: "0.30",
+    zIndexDropdown: "600",
+    zIndexSpinner: "800",
+    zIndexDefault: "1",
+    zIndexToast: "500",
+    zIndexPopup: "950",
+    zIndexModal: "900",
+    zIndexSticky: "300",
+    zIndexMasked: "100",
+    zIndexDeep: "-999999",
+    zIndexOverlay: "700",
+    zIndexMask: "200",
+    zIndexHeader: "400",
+    lineHeightMedium: "1.5",
+    lineHeightSmall: "1.25",
+    lineHeightXSmall: "1",
+    transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+var DuetSpinner = /** @class */ (function () {
+    function DuetSpinner() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    DuetSpinner.prototype.render = function () {
+        var classes = classNames("duet-spinner", "" + this.size);
+        var styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    };
+    Object.defineProperty(DuetSpinner, "is", {
+        get: function () { return "duet-spinner"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "encapsulation", {
+        get: function () { return "shadow"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "properties", {
+        get: function () {
+            return {
+                "accessibleLabel": {
+                    "type": String,
+                    "attr": "accessible-label"
+                },
+                "color": {
+                    "type": String,
+                    "attr": "color"
+                },
+                "size": {
+                    "type": String,
+                    "attr": "size"
+                }
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "style", {
+        get: function () { return ":host {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium::after {\n  border-width: 4px;\n}\n.duet-spinner.large {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return DuetSpinner;
+}());
+export { DuetButton, DuetSpinner };

lib/esm/es5/build/duet-button.sc.entry.js

@@ -105,7 +105,7 @@ import { h } from '../duet.core.js';
         if (this.url) {
-            return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+            return (h("div", { class: "duet-button-container" }, h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), h("div", { class: "duet-spinner" })));
+            return (h("div", { class: "duet-button-container" }, h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)), this.variation === "loading" ? h("duet-spinner", null) : ""));
         }
@@ -208,3 +208,3 @@ };
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button    + .duet-spinner.sc-duet-button {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 200;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  z-index: 100;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button-container.sc-duet-button {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-theme-turva.sc-duet-button   .duet-button[disabled].sc-duet-button, .duet-theme-turva.sc-duet-button   .duet-button.disabled.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.primary.sc-duet-button:hover {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.loading.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.negative.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.destructive.sc-duet-button:hover {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-theme-turva.sc-duet-button   .duet-button.plain.sc-duet-button:hover {\n  color: #940925;\n}"; },
         enumerable: true,
@@ -215,2 +215,281 @@ configurable: true
 }());
-export { DuetButton };
+var tokens_common = {
+    colorWarning: "rgb(247, 178, 40)",
+    colorGrayLighter: "rgb(245, 248, 250)",
+    colorCategoryHome: "rgb(211, 36, 131)",
+    colorPrimary: "rgb(0, 119, 179)",
+    colorCategoryVehicle: "rgb(54, 74, 129)",
+    colorSuccess: "rgb(0, 135, 90)",
+    colorCategoryFamily: "rgb(11, 114, 136)",
+    colorPrimaryLightest: "rgb(243, 249, 252)",
+    colorPrimaryLighter: "rgb(230, 242, 248)",
+    colorBrandBlue: "rgb(0, 161, 212)",
+    colorPrimaryDark: "rgb(0, 77, 128)",
+    colorGrayLightest: "rgb(255, 255, 255)",
+    colorCategoryFinance: "rgb(122, 1, 196)",
+    colorGrayDark: "rgb(101, 119, 135)",
+    colorGrayLight: "rgb(225, 227, 230)",
+    colorSecondary: "rgb(0, 41, 77)",
+    colorCategoryPet: "rgb(168, 1, 78)",
+    colorPrimaryLight: "rgb(205, 229, 241)",
+    colorCategoryTravel: "rgb(213, 66, 3)",
+    colorGray: "rgb(207, 210, 212)",
+    colorDanger: "rgb(222, 35, 98)",
+    colorGrayDarkerTurva: "rgb(69, 69, 69)",
+    colorGrayLighterTurva: "rgb(249, 249, 249)",
+    colorCategoryHomeTurva: "rgb(161, 10, 78)",
+    colorPrimaryTurva: "rgb(198, 12, 48)",
+    colorCategoryVehicleTurva: "rgb(62, 85, 173)",
+    colorSuccessTurva: "rgb(8, 135, 78)",
+    colorPrimaryLightestTurva: "rgb(252, 243, 244)",
+    colorCategoryFamilyTurva: "rgb(199, 12, 112)",
+    colorCategoryUnionTurva: "rgb(132, 68, 148)",
+    colorPrimaryLighterTurva: "rgb(249, 230, 234)",
+    colorPrimaryDarkTurva: "rgb(148, 9, 37)",
+    colorGrayLightestTurva: "rgb(255, 255, 255)",
+    colorGrayDarkTurva: "rgb(117, 117, 117)",
+    colorGrayLightTurva: "rgb(230, 230, 230)",
+    colorBrandGrayTurva: "rgb(178, 180, 179)",
+    colorSecondaryTurva: "rgb(17, 17, 17)",
+    colorPrimaryLightTurva: "rgb(244, 207, 214)",
+    colorCategoryTravelTurva: "rgb(9, 129, 148)",
+    colorGrayTurva: "rgb(209, 209, 209)",
+    colorDangerTurva: "rgb(224, 42, 13)",
+    colorWarningTurva: "rgb(250, 164, 15)",
+    fontWeightExtraBold: "800",
+    letterSpacingHeading: "-0.01rem",
+    fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    fontWeightBold: "700",
+    fontWeightNormal: "400",
+    fontWeightSemiBold: "600",
+    fontSizeXxxxLarge: "4.5rem",
+    fontSizeXxxLarge: "3rem",
+    fontSizeXxLarge: "2.25rem",
+    fontSizeXLarge: "1.5rem",
+    fontSizeLarge: "1.25rem",
+    fontSizeMedium: "1rem",
+    fontSizeSmall: "0.875rem",
+    fontSizeXSmall: "0.75rem",
+    radiusDefault: "4px",
+    radiusCircle: "50%",
+    radiusPill: "20rem",
+    shadowDefault: "0 2px 6px 0 rgba(101, 119, 135, 0.15)",
+    shadowHover: "0 2px 10px 0 rgba(101, 119, 135, 0.15)",
+    shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
+    shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.15)",
+    shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
+    spaceXxSmall: "4px",
+    spaceLarge: "20px",
+    spaceXSmall: "8px",
+    spaceSmall: "12px",
+    spaceMedium: "16px",
+    spaceXxLarge: "36px",
+    spaceXxxxLarge: "72px",
+    spaceXxxLarge: "48px",
+    spaceXLarge: "28px",
+    sizeIconXxLarge: "48px",
+    sizeStepMedium: "40px",
+    sizeButtonMinWidth: "6.875rem",
+    sizeHeader: "70px",
+    sizeIconXxxLarge: "72px",
+    sizeIconXLarge: "36px",
+    sizeIconXxSmall: "12px",
+    sizeStepSmall: "30px",
+    sizeIconLarge: "30px",
+    sizeTappableSquare: "48px",
+    sizeIconXSmall: "16px",
+    sizeButtonBorder: "inset 0 0 0 2px",
+    sizeIconMedium: "24px",
+    sizeIconSmall: "20px",
+    opacity75: "0.75",
+    opacity50: "0.50",
+    opacity30: "0.30",
+    zIndexDropdown: "600",
+    zIndexSpinner: "800",
+    zIndexDefault: "1",
+    zIndexToast: "500",
+    zIndexPopup: "950",
+    zIndexModal: "900",
+    zIndexSticky: "300",
+    zIndexMasked: "100",
+    zIndexDeep: "-999999",
+    zIndexOverlay: "700",
+    zIndexMask: "200",
+    zIndexHeader: "400",
+    lineHeightMedium: "1.5",
+    lineHeightSmall: "1.25",
+    lineHeightXSmall: "1",
+    transitionQuickly: "300ms ease",
+};
+var tokens_common_1 = tokens_common.colorWarning;
+var tokens_common_2 = tokens_common.colorGrayLighter;
+var tokens_common_3 = tokens_common.colorCategoryHome;
+var tokens_common_4 = tokens_common.colorPrimary;
+var tokens_common_5 = tokens_common.colorCategoryVehicle;
+var tokens_common_6 = tokens_common.colorSuccess;
+var tokens_common_7 = tokens_common.colorCategoryFamily;
+var tokens_common_8 = tokens_common.colorPrimaryLightest;
+var tokens_common_9 = tokens_common.colorPrimaryLighter;
+var tokens_common_10 = tokens_common.colorBrandBlue;
+var tokens_common_11 = tokens_common.colorPrimaryDark;
+var tokens_common_12 = tokens_common.colorGrayLightest;
+var tokens_common_13 = tokens_common.colorCategoryFinance;
+var tokens_common_14 = tokens_common.colorGrayDark;
+var tokens_common_15 = tokens_common.colorGrayLight;
+var tokens_common_16 = tokens_common.colorSecondary;
+var tokens_common_17 = tokens_common.colorCategoryPet;
+var tokens_common_18 = tokens_common.colorPrimaryLight;
+var tokens_common_19 = tokens_common.colorCategoryTravel;
+var tokens_common_20 = tokens_common.colorGray;
+var tokens_common_21 = tokens_common.colorDanger;
+var tokens_common_22 = tokens_common.colorGrayDarkerTurva;
+var tokens_common_23 = tokens_common.colorGrayLighterTurva;
+var tokens_common_24 = tokens_common.colorCategoryHomeTurva;
+var tokens_common_25 = tokens_common.colorPrimaryTurva;
+var tokens_common_26 = tokens_common.colorCategoryVehicleTurva;
+var tokens_common_27 = tokens_common.colorSuccessTurva;
+var tokens_common_28 = tokens_common.colorPrimaryLightestTurva;
+var tokens_common_29 = tokens_common.colorCategoryFamilyTurva;
+var tokens_common_30 = tokens_common.colorCategoryUnionTurva;
+var tokens_common_31 = tokens_common.colorPrimaryLighterTurva;
+var tokens_common_32 = tokens_common.colorPrimaryDarkTurva;
+var tokens_common_33 = tokens_common.colorGrayLightestTurva;
+var tokens_common_34 = tokens_common.colorGrayDarkTurva;
+var tokens_common_35 = tokens_common.colorGrayLightTurva;
+var tokens_common_36 = tokens_common.colorBrandGrayTurva;
+var tokens_common_37 = tokens_common.colorSecondaryTurva;
+var tokens_common_38 = tokens_common.colorPrimaryLightTurva;
+var tokens_common_39 = tokens_common.colorCategoryTravelTurva;
+var tokens_common_40 = tokens_common.colorGrayTurva;
+var tokens_common_41 = tokens_common.colorDangerTurva;
+var tokens_common_42 = tokens_common.colorWarningTurva;
+var tokens_common_43 = tokens_common.fontWeightExtraBold;
+var tokens_common_44 = tokens_common.letterSpacingHeading;
+var tokens_common_45 = tokens_common.fontFamilyHeadingTurva;
+var tokens_common_46 = tokens_common.fontFamilyTextTurva;
+var tokens_common_47 = tokens_common.fontFamilyHeading;
+var tokens_common_48 = tokens_common.fontFamilyText;
+var tokens_common_49 = tokens_common.fontWeightBold;
+var tokens_common_50 = tokens_common.fontWeightNormal;
+var tokens_common_51 = tokens_common.fontWeightSemiBold;
+var tokens_common_52 = tokens_common.fontSizeXxxxLarge;
+var tokens_common_53 = tokens_common.fontSizeXxxLarge;
+var tokens_common_54 = tokens_common.fontSizeXxLarge;
+var tokens_common_55 = tokens_common.fontSizeXLarge;
+var tokens_common_56 = tokens_common.fontSizeLarge;
+var tokens_common_57 = tokens_common.fontSizeMedium;
+var tokens_common_58 = tokens_common.fontSizeSmall;
+var tokens_common_59 = tokens_common.fontSizeXSmall;
+var tokens_common_60 = tokens_common.radiusDefault;
+var tokens_common_61 = tokens_common.radiusCircle;
+var tokens_common_62 = tokens_common.radiusPill;
+var tokens_common_63 = tokens_common.shadowDefault;
+var tokens_common_64 = tokens_common.shadowHover;
+var tokens_common_65 = tokens_common.shadowModal;
+var tokens_common_66 = tokens_common.shadowDefaultTurva;
+var tokens_common_67 = tokens_common.shadowHoverTurva;
+var tokens_common_68 = tokens_common.spaceXxSmall;
+var tokens_common_69 = tokens_common.spaceLarge;
+var tokens_common_70 = tokens_common.spaceXSmall;
+var tokens_common_71 = tokens_common.spaceSmall;
+var tokens_common_72 = tokens_common.spaceMedium;
+var tokens_common_73 = tokens_common.spaceXxLarge;
+var tokens_common_74 = tokens_common.spaceXxxxLarge;
+var tokens_common_75 = tokens_common.spaceXxxLarge;
+var tokens_common_76 = tokens_common.spaceXLarge;
+var tokens_common_77 = tokens_common.sizeIconXxLarge;
+var tokens_common_78 = tokens_common.sizeStepMedium;
+var tokens_common_79 = tokens_common.sizeButtonMinWidth;
+var tokens_common_80 = tokens_common.sizeHeader;
+var tokens_common_81 = tokens_common.sizeIconXxxLarge;
+var tokens_common_82 = tokens_common.sizeIconXLarge;
+var tokens_common_83 = tokens_common.sizeIconXxSmall;
+var tokens_common_84 = tokens_common.sizeStepSmall;
+var tokens_common_85 = tokens_common.sizeIconLarge;
+var tokens_common_86 = tokens_common.sizeTappableSquare;
+var tokens_common_87 = tokens_common.sizeIconXSmall;
+var tokens_common_88 = tokens_common.sizeButtonBorder;
+var tokens_common_89 = tokens_common.sizeIconMedium;
+var tokens_common_90 = tokens_common.sizeIconSmall;
+var tokens_common_91 = tokens_common.opacity75;
+var tokens_common_92 = tokens_common.opacity50;
+var tokens_common_93 = tokens_common.opacity30;
+var tokens_common_94 = tokens_common.zIndexDropdown;
+var tokens_common_95 = tokens_common.zIndexSpinner;
+var tokens_common_96 = tokens_common.zIndexDefault;
+var tokens_common_97 = tokens_common.zIndexToast;
+var tokens_common_98 = tokens_common.zIndexPopup;
+var tokens_common_99 = tokens_common.zIndexModal;
+var tokens_common_100 = tokens_common.zIndexSticky;
+var tokens_common_101 = tokens_common.zIndexMasked;
+var tokens_common_102 = tokens_common.zIndexDeep;
+var tokens_common_103 = tokens_common.zIndexOverlay;
+var tokens_common_104 = tokens_common.zIndexMask;
+var tokens_common_105 = tokens_common.zIndexHeader;
+var tokens_common_106 = tokens_common.lineHeightMedium;
+var tokens_common_107 = tokens_common.lineHeightSmall;
+var tokens_common_108 = tokens_common.lineHeightXSmall;
+var tokens_common_109 = tokens_common.transitionQuickly;
+var DuetSpinner = /** @class */ (function () {
+    function DuetSpinner() {
+        /**
+         * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+         */
+        this.color = tokens_common.colorGrayLightest;
+        /**
+         * Size variation of the spinner. Can be one of: small, medium, large.
+         */
+        this.size = "small";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    DuetSpinner.prototype.render = function () {
+        var classes = classNames("duet-spinner", "" + this.size);
+        var styles = {
+            color: this.color,
+        };
+        return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel });
+    };
+    Object.defineProperty(DuetSpinner, "is", {
+        get: function () { return "duet-spinner"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "encapsulation", {
+        get: function () { return "shadow"; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "properties", {
+        get: function () {
+            return {
+                "accessibleLabel": {
+                    "type": String,
+                    "attr": "accessible-label"
+                },
+                "color": {
+                    "type": String,
+                    "attr": "color"
+                },
+                "size": {
+                    "type": String,
+                    "attr": "size"
+                }
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DuetSpinner, "style", {
+        get: function () { return ".sc-duet-spinner-h {\n  margin: 0;\n  position: absolute;\n  z-index: 800;\n  top: 50%;\n  left: 50%;\n  max-width: 100%;\n}\n\n.duet-spinner.sc-duet-spinner {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 24px;\n  height: 24px;\n  will-change: tranform;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border: 2px solid transparent;\n  border-left: 2px solid currentColor;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner.sc-duet-spinner::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  opacity: 0.3;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n  transform: translateZ(0) translateX(-50%) translateY(-50%);\n  z-index: 200;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n}\n.duet-spinner.medium.sc-duet-spinner {\n  width: 36px;\n  height: 36px;\n  border-width: 4px;\n}\n.duet-spinner.medium.sc-duet-spinner::after {\n  border-width: 4px;\n}\n.duet-spinner.large.sc-duet-spinner {\n  width: 72px;\n  height: 72px;\n  border-width: 8px;\n}\n.duet-spinner.large.sc-duet-spinner::after {\n  border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return DuetSpinner;
+}());
+export { DuetButton, DuetSpinner };

lib/esm/es5/duet.components.js

 // Duet: Host Data, ES Module/es5 Target
-export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1]]
+export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

lib/types/components.d.ts

@@ -348,2 +348,31 @@ /* tslint:disable */
   }
+
+  interface DuetSpinner {
+    /**
+    * Adds accessible label for the spinner that is only shown for screen readers.
+    */
+    'accessibleLabel': string;
+    /**
+    * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+    */
+    'color': string;
+    /**
+    * Size variation of the spinner. Can be one of: small, medium, large.
+    */
+    'size': string;
+  }
+  interface DuetSpinnerAttributes extends StencilHTMLAttributes {
+    /**
+    * Adds accessible label for the spinner that is only shown for screen readers.
+    */
+    'accessibleLabel'?: string;
+    /**
+    * Color of the spinner, as a design token. Example: “tokens.colorPrimary”.
+    */
+    'color'?: string;
+    /**
+    * Size variation of the spinner. Can be one of: small, medium, large.
+    */
+    'size'?: string;
+  }
 }
@@ -355,2 +384,3 @@
     'DuetInput': Components.DuetInput;
+    'DuetSpinner': Components.DuetSpinner;
   }
@@ -361,2 +391,3 @@
     'duet-input': Components.DuetInputAttributes;
+    'duet-spinner': Components.DuetSpinnerAttributes;
   }
@@ -377,5 +408,12 @@
 
+  interface HTMLDuetSpinnerElement extends Components.DuetSpinner, HTMLStencilElement {}
+  var HTMLDuetSpinnerElement: {
+    prototype: HTMLDuetSpinnerElement;
+    new (): HTMLDuetSpinnerElement;
+  };
+
   interface HTMLElementTagNameMap {
     'duet-button': HTMLDuetButtonElement
     'duet-input': HTMLDuetInputElement
+    'duet-spinner': HTMLDuetSpinnerElement
   }
@@ -386,2 +424,3 @@
     'duet-input': HTMLDuetInputElement;
+    'duet-spinner': HTMLDuetSpinnerElement;
   }
@@ -388,0 +427,0 @@

lib/web-components.json

@@ -5,3 +5,3 @@ {
       "label": "duet-button",
-      "description": "---\ntitle: Button\nname: duet-button\nstatus: prototype\nslot: Button\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nvariations:\n  - primary\n  - loading\n  - secondary\n  - default\n  - negative\n  - destructive\n  - disabled\n  - plain\ntags:\n  - docs-components\n---",
+      "description": "---\ntitle: Button\nname: duet-button\nstatus: in review\nslot: Button\nreleased: 0.0.1-alpha.25\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nplatforms: Web only\nvariations:\n  - primary\n  - loading\n  - secondary\n  - default\n  - negative\n  - destructive\n  - disabled\n  - plain\ntags:\n  - docs-components\n---",
       "attributes": [
@@ -72,3 +72,3 @@ {
       "label": "duet-input",
-      "description": "---\ntitle: Input\nname: duet-input\nstatus: prototype\nslot: Input\nintro: Form Inputs are used to allow users to provide text input when the expected input is short. Form Input has a range of options and supports several text formats including numbers. For longer input, use the form Textarea element.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\ntags:\n  - docs-components\n---",
+      "description": "---\ntitle: Input\nname: duet-input\nstatus: prototype\nslot: Input\nreleased: 0.0.1-alpha.25\nplatforms: Web only\nintro: Form Inputs are used to allow users to provide text input when the expected input is short. Form Input has a range of options and supports several text formats including numbers.\ndescription: N/A\ntags:\n  - docs-components\n---",
       "attributes": [
@@ -201,4 +201,25 @@ {
       ]
+    },
+    {
+      "label": "duet-spinner",
+      "description": "---\ntitle: Spinner\nname: duet-spinner\nstatus: in review\nintro: Spinners are used to indicate users that their action is being processed. Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on JavaScript.\ndescription: \"You can customize the size and color of the spinner with the provided properties. Spinner comes in three sizes: small, medium and large.\"\nplatforms: Web only\nappearance: negative\nsizes:\n  - small\n  - medium\n  - large\ntags:\n  - docs-components\n---",
+      "attributes": [
+        {
+          "label": "accessible-label",
+          "description": "Adds accessible label for the spinner that is only shown for screen readers.",
+          "required": false
+        },
+        {
+          "label": "color",
+          "description": "Color of the spinner, as a design token. Example: “tokens.colorPrimary”.",
+          "required": false
+        },
+        {
+          "label": "size",
+          "description": "Size variation of the spinner. Can be one of: small, medium, large.",
+          "required": false
+        }
+      ]
     }
   ]
 }

package.json

 {
   "name": "@duetds/components",
-  "version": "0.0.1-alpha.25",
+  "version": "0.0.1-alpha.26",
   "description": "This package includes Duet Components and related tools.",
@@ -42,6 +42,6 @@ "author": "Viljami Salminen <[e-mail]>",
   },
-  "gitHead": "d71e928439f7db5f6b6f86948567c6cc05db62b5",
+  "gitHead": "1da343a74800e2afc8636982e3574f109876939a",
   "devDependencies": {
     "@duetds/fonts": "^1.0.7",
-    "@duetds/tokens": "^1.1.6",
+    "@duetds/tokens": "^1.1.7",
     "@stencil/core": "^0.18.1",
@@ -48,0 +48,0 @@ "@stencil/sass": "^0.2.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2015632

increased by7.64%

Number of package files

117

increased by3.54%

Lines of code

23185

increased by14.64%

Worsened metrics

Number of low supply chain risk alerts

18

increased by80%

No dependency changes