@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -24,6 +24,36 @@ export class DuetSlideoutPanel {
             sv: "Tillbaka till huvudmenyn",
         };
         this.hasStickyHeaderSlot = false;
+        this.language = getLanguage();
+        this.bodyScrollLocked = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
+        /**
+         * Size. Small, medium or large.
+         */
+        this.labelSize = "medium";
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
         this.updateLabel = () => {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
@@ -44,16 +74,6 @@ export class DuetSlideoutPanel {
                 slideout.toggle();
             }
         };
-        this.label = undefined;
-        this.language = getLanguage();
-        this.bodyScrollLocked = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
-        this.labelSize = "medium";
-        this.backgroundColor = "primary-lightest";
-        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -149,33 +169,30 @@ export class DuetSlideoutPanel {
      * Always the last one in the class.
      */
     render() {
-        const defaultBackgroundColor = this.backgroundColor === "primary-lightest"
-            ? this.theme === "turva"
-                ? "gray-lighter"
-                : this.backgroundColor
-            : this.backgroundColor;
         const styles = {
-            background: getColorByName(defaultBackgroundColor, this.theme),
+            background: getColorByName(this.backgroundColor, this.theme),
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '3cc575a27526f9eb936cc77fbd5d73fae704a02e' }, h("div", { key: '54f6df02833967cc73e36fea9e3bc054e9b6aa73', class: {
+        return (h(Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '2757a9e467ee80835f260ea3631fbe561f2aabf5', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: '86db5918e585201320c57a8770ab850356bda06b', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '227406b6650708fc7fd1904d7c7d528692edaf64', class: "duet-slideout-icon" }, h("duet-icon", { key: '36401c7328497294e9c894e9dd6d27937a51c494', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '7e06124b0bd84ab528b325885bc3c0babbd08742', class: "duet-slideout-badge" }))), h("span", { key: '9a846cb510d44c0af591554b22f23efab9560448', class: "label" }, h("span", { key: '6307191c9aa066915943fc6111c8c9de795c13cb', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'c52bc96f6bd93f8183fd8f05d551218a0f67e637', name: "label" })), h("duet-icon", { key: '74c42ebef00e4feeb6205718db4b7ef1315d3855', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'bc171acb5cbbe6c929fdb639dc3aa6bfb11740b1', ref: element => (this.dialog = element), class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '635addd38144863b546edd4d8792a26d4e8dd3c4', class: "duet-slideout-icon" }, h("duet-icon", { key: '3610a7e6ebcdf22fe198e4428538d559599c79c0', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '9b4d70cc570113c1e667ced944bccae1e4613398', class: "label" }, h("span", { key: '6f16630f451ef9ebd920462cd81df2cf92ab5312', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '80688a824da754215dcbfcd668ff8144880147d1', name: "label" })), h("duet-icon", { key: '205d74fef784d3db602fcccf61ba49dfb5995317', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '5be9dab7afdb48916100c5bfb8242eb061ba6c96', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '4db620b5032b9f8b5f37a4ba07ad387fc38b680f', moveFocusTo: this.closeButton }), h("div", { key: '8a4b956558e630cf3ab6b148a94bfbde4300b7ea', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'ddd353e3cf2e9d4d938cd9402e440459a64809af', class: "top" }, h("button", { key: '7fcb43d03e0a15af4a12f67e7b2810efb595d02b', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '98891c6a2349246b457f003ed501770a2289afe7', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '1b052537ae01f496e1d175c6f99134048278c3fd' }, this.label.innerHTML), h("button", { key: '8b4098001333b24d00d1dde0a39f9b6ee9b065cc', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'd0e70007d5554ddb18292fa3d90a136198c89c3a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a3abfbd5e6b8616670c4ba95ba76ba89b5d84f70', class: "sticky-header" }, h("slot", { key: '0276df7b3885dfe4b806db392e6f1a2000df5894', name: "sticky-header" }))), h("div", { key: '20894d6bbfece88c8094cef54fede14b97469ead', tabindex: "-1", role: "menu",
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'e2a19bcf68d13caeec8cd0d03e79d8f347436f84', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '5e410d780eed931181591dd44c6d5d6281096edc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e798417e14455bde09f3ad7e27d204990b2b6d17', class: "sticky-header" }, h("slot", { key: 'bdafb4122d5c49b37933244930f66b1a171d9641', name: "sticky-header" }))), h("div", { key: '807f98f59416699cda295c7e2939faa6241e87bd', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'e6fa25439fd7062824cc0fae6b4c7cb2e258f089' })), h(FocusGuard, { key: '9cb7008c88d6f03f06a0e027c8fd174277b99fd6', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'a4239425381aff3fe79c099a7a0d471377cfc475' })), h(FocusGuard, { key: '7861bde566dea39216e74ae0a7b37e13d92562c3', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -193,6 +210,7 @@ export class DuetSlideoutPanel {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -213,12 +231,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -233,12 +251,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -253,12 +271,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -273,12 +291,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "labelSize": {
                 "type": "string",
+                "attribute": "label-size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -293,12 +311,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-size",
                 "reflect": true,
                 "defaultValue": "\"medium\""
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
@@ -319,12 +337,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-color",
                 "reflect": true,
-                "defaultValue": "\"primary-lightest\""
+                "defaultValue": "\"gray-lightest\""
             },
             "badge": {
                 "type": "boolean",
+                "attribute": "badge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -339,7 +357,6 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
 }
@@ -44,7 +44,7 @@
 .duet-slideout-panel-dropdown button {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -59,6 +59,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-slideout-panel-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-slideout-panel-dropdown button .label {
   position: relative;
   display: flex;
@@ -66,10 +76,6 @@
   align-items: center;
   justify-content: center;
 }
-.duet-slideout-panel-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-slideout-panel-dropdown button.active .label::after {
   position: absolute;
   top: auto;
@@ -84,35 +90,32 @@
 }
 .duet-slideout-panel-dropdown .items {
   display: flex;
+  visibility: visible;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-height: 1000px;
-  padding: 4px 20px 8px 44px;
+  padding: 4px 20px 8px 36px;
   overflow-y: auto;
-  visibility: visible;
+  scrollbar-width: none;
   transition: max-height 0.3s ease-in, padding-bottom 0.3s ease-in;
   -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 .duet-slideout-panel-dropdown .items::-webkit-scrollbar {
   display: none;
 }
 .duet-slideout-panel-dropdown .items.hidden {
+  visibility: hidden;
   max-height: 0;
   padding: 0;
   overflow: hidden;
-  visibility: hidden;
   transition: max-height 0.3s ease-out, padding-bottom 0.3s ease-out;
 }
 .duet-slideout-panel-dropdown.duet-theme-turva button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
-.duet-slideout-panel-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
   background: rgb(198, 12, 48);
 }
@@ -131,4 +134,14 @@ slot {
 slot[name=label] {
   font-size: 1rem;
   font-weight: 600;
+}
+
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) slot {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -5,13 +5,25 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetSlideoutPanelDropdown {
     constructor() {
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -40,16 +52,18 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd473e124378cf692756294cbc4b63ece1c24fa37' }, h("div", { key: '555568422a4a461d1687f9524152552d06214e81', class: {
+        return (h(Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '54f92eef148b91fb1649a00e797489545b9c0ae5', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '887b98839351d36434969447057013fd8e7614ed', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '5e2e285e54edbd2b5178e0caf582ad4ae63da2ed', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '55fc2889f31dc259aea19bf6c758dcb38630feed', class: "label" }, h("slot", { key: 'fd41a86f0c71f73e589940ad8910143439f4f739', name: "label" }), h("duet-icon", { key: '35236f2cd06ad8fc37299319e1430bc92059fd12', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'd9b4c34b5e9ca0611f1a1eed1dda3fd2ad8627d7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'a3d25c295dd87dd7d7427c08776e74f93ff06539', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'f5721ac3bf32dc5d3a02c06c3945169f5191b8bf', class: "label" }, h("slot", { key: '408ea11afbdc9705cf7d972f6173ba5215f06bec', name: "label" }), h("duet-icon", { key: 'eba692bfd3ada8bbfdbe9eb6e51a01054f6f919a', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '13c263ac376bd1b412ba8c57aec55504da08557d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '746111498d9301b53d6a7d835296ab60e149eaae' })))));
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("slot", { key: 'f582b50dca9e8127b6c4f0b6f9507f74f337ce7d' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -67,6 +81,7 @@ export class DuetSlideoutPanelDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -87,12 +102,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +122,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -127,12 +142,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -147,7 +162,6 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-spacer/duet-spacer.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: block;
   width: 12px;

package/lib/collection/components/duet-spacer/duet-spacer.js

@@ -4,8 +4,18 @@
 import { h, Host } from "@stencil/core";
 export class DuetSpacer {
     constructor() {
+        /**
+         * Size variation of the spacer. Can be any of the spacing tokens.
+         */
         this.size = "medium";
+        /**
+         * Direction of the space added.
+         */
         this.direction = "vertical";
+        /**
+         * Adjusts the breakpoint where the spacer is shown in. The functionality
+         * follows 1:1 the media queries defined in design tokens.
+         */
         this.breakpoint = "";
     }
     /**
@@ -13,7 +23,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2aa5669c773f8841ad33637ee24c845c7eeb5dd2', class: {
+        return (h(Host, { key: '6765403ee0beffd36f0e97c767260714c18bdc19', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",
@@ -42,6 +52,7 @@ export class DuetSpacer {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSpacerSize",
@@ -62,12 +73,12 @@ export class DuetSpacer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -88,12 +99,12 @@ export class DuetSpacer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"vertical\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSpacerBreakpoint",
@@ -114,7 +125,6 @@ export class DuetSpacer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/lib/collection/components/duet-spinner/duet-spinner.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -32,11 +32,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-spinner {
@@ -96,4 +96,7 @@
   100% {
     transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);
   }
+}
+:host(.duet-theme-turva2) .duet-spinner {
+  color: rgb(230, 23, 64) !important;
 }

package/lib/collection/components/duet-spinner/duet-spinner.js

@@ -1,14 +1,24 @@
-/*!
- * Built with Duet Design System
- */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
     constructor() {
-        this.accessibleLabel = undefined;
+        /**
+         * Color of the spinner, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary". This property can also be set to "currentColor"
+         * which forces the icon to use the CSS text color of parent element instead.
+         * Useful when you want to control the color in stylesheet instead.
+         */
         this.color = "gray-lightest";
+        /**
+         * Size variation of the spinner.
+         */
         this.size = "small";
+        /**
+         * Theme of the spinner. When used this will override the color setting and
+         * use "primary" or "primary-turva" as the color depending on which theme
+         * is chosen.
+         */
         this.theme = "";
     }
     /**
@@ -23,11 +33,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: 'f415bd43d421b7106fdbd90bd2c187879ff17c17', class: {
+        return (h(Host, { key: '02a74b72a4b22798ac1a768e41793ee920494ca0', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: '34b4c350a642f331b9776f5ce12e3c7a2990b3d7', class: {
+            } }, h("div", { key: 'e4d1b98fbcdc05241e8ea87fe91a944be89d1bff', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));
@@ -48,6 +58,7 @@ export class DuetSpinner {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -62,11 +73,11 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -87,12 +98,12 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"gray-lightest\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSpinnerSize",
@@ -113,12 +124,12 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -139,10 +150,10 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }
         };
     }
+    static get elementRef() { return "element"; }
 }