@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -1,20 +1,22 @@
-/*!
- * 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;
-        this.color = "gray-lightest";
+        /**
+         * Size variation of the spinner.
+         */
         this.size = "small";
-        this.theme = "";
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
+        // NOTE: for backward compatibility reasons, if no theme and no color is given, we default to "gray-lightest".
+        // Changing this would be a breaking change, and we do it only when we have other things to break too.
+        if (!this.color && !this.theme) {
+            this.color = "gray-lightest";
+        }
         inheritGlobalTheme(this);
     }
     /**
@@ -22,14 +24,11 @@ export class DuetSpinner {
      * Always the last one in the class.
      */
     render() {
-        const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: 'f90db790b3bcceaf36452793649037f87f8b3afb', 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: '41396371d1421d5e44865fce2ea0697ccf099a86', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        return (h(Host, { key: '0d9ba3a785f72e0bd9318f4b38bc5b5459075704' }, h("div", { key: '5fed4253f83731359bfdf0a5b266b2352354b1cc', class: {
                 "duet-spinner": true,
                 [this.size]: true,
+                "duet-theme-turva": this.theme === "turva",
             }, style: { color }, "aria-label": this.accessibleLabel })));
     }
     static get is() { return "duet-spinner"; }
@@ -48,6 +47,7 @@ export class DuetSpinner {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -62,12 +62,12 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "color": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "color",
+                "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
                     "resolved": "string",
@@ -83,16 +83,15 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead."
+                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead.\nNote that in earlier versions the color has defaulted to \"gray-lightest\", but\nin a future release it will change to undefined, so that the color will be\nthe theme's primary. If you have relied on not defining color to result in\nwhite, it is advisable to update your code to explicitly define it."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
-                "reflect": false,
-                "defaultValue": "\"gray-lightest\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSpinnerSize",
@@ -113,12 +112,12 @@ export class DuetSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -135,14 +134,13 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme of the spinner. When used this will override the color setting and\nuse \"primary\" or \"primary-turva\" as the color depending on which theme\nis chosen."
+                    "text": "Theme of the spinner."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
-                "reflect": false,
-                "defaultValue": "\"\""
+                "reflect": false
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-status-icon/duet-status-icon.js

@@ -7,13 +7,13 @@ export class DuetStatusIcon {
     constructor() {
         this.bg = {
             default: {
-                default: "color_lt_blue_100",
+                default: "color_lt_blue_200",
                 success: "color_success_200",
                 warning: "color_warning_200",
-                danger: "color_danger_100",
+                danger: "color_danger_200",
             },
             strong: {
-                default: "color_lt_blue_600",
+                default: "color_lt_blue_700",
                 success: "color_success_700",
                 warning: "color_warning_500",
                 danger: "color_danger_600",
@@ -21,10 +21,10 @@ export class DuetStatusIcon {
         };
         this.color = {
             default: {
-                default: "color_lt_blue_700",
+                default: "color_lt_blue_800",
                 success: "color_success_800",
                 warning: "color_warning_800",
-                danger: "color_danger_700",
+                danger: "color_danger_800",
             },
             strong: {
                 default: "color_lt_blue_100",
@@ -33,19 +33,34 @@ export class DuetStatusIcon {
                 danger: "color_gray_lightest",
             },
         };
+        /**
+         * Status the icon indicates
+         */
         this.variation = "default";
+        /**
+         * Icon size. Entered as one of the icon size design tokens.
+         */
         this.size = "medium";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Use strong background color when the icon would not otherwise stand out from the surrounding background.
+         */
         this.strong = false;
     }
+    getVariation() {
+        return ["default", "success", "danger", "warning"].includes(this.variation) ? this.variation : "default";
+    }
     getBg() {
-        return tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
+        return tokens[this.bg[this.strong ? "strong" : "default"][this.getVariation()]];
     }
     getColor() {
-        return tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+        return tokens[this.color[this.strong ? "strong" : "default"][this.getVariation()]];
     }
     getIcon() {
-        switch (this.variation) {
+        switch (this.getVariation()) {
             case "default":
                 return `
           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
@@ -70,10 +85,10 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: 'ebbaba8fbedc1ac294e51f81876748b26a08687a', class: {
-                [`duet-status-icon-${this.variation}`]: true,
+        return (h(Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
+                [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: '246af4b88cf7a1fc72cbc60264c25a1574eea11a', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -81,6 +96,7 @@ export class DuetStatusIcon {
         return {
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus",
@@ -101,12 +117,12 @@ export class DuetStatusIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconSize",
@@ -127,12 +143,12 @@ export class DuetStatusIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "\"medium\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -153,12 +169,12 @@ export class DuetStatusIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "strong": {
                 "type": "boolean",
+                "attribute": "strong",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -173,7 +189,6 @@ export class DuetStatusIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "strong",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-step/duet-step.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;
   display: block;
 }
 
@@ -63,20 +63,22 @@
   align-items: center;
   border-radius: 4px;
 }
-.duet-step-heading[aria-disabled=false] {
-  cursor: pointer;
-}
 .duet-step-heading:focus {
   outline: 0;
 }
-.duet-step-heading:active {
-  opacity: 0.75;
-}
 :host(.user-is-tabbing) .duet-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-step-heading[aria-disabled=false] {
+  cursor: pointer;
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-step-heading:active {
+  opacity: 0.75;
 }
 .is-complete .duet-step-heading:hover .duet-step-counter, .is-disabled .duet-step-heading:hover .duet-step-counter {
   background-color: #005f8f;
@@ -195,4 +197,17 @@
   .duet-step-heading-slot {
     display: block;
   }
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-current .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-counter {
+  background-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter {
+  background-color: #b81233;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-step-content-wrapper {
+  border-color: rgb(251, 225, 209);
 }

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

@@ -14,6 +14,22 @@ export class DuetStep {
     constructor() {
         this.buttonId = createID("DuetStepButton");
         this.contentId = createID("DuetStepContent");
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * @internal
+         * Enable/disable rounded top corners (on mobile).
+         * This property is used internally by stepper, and should not be set by the developer.
+         */
+        this.roundedTop = false;
+        /**
+         * @internal
+         * Enable/disable rounded bottom corners (on mobile).
+         * This property is used internally by stepper, and should not be set by the developer.
+         */
+        this.roundedBottom = false;
         this.handleKeyDown = (e) => {
             if (this.isClickDisabled()) {
                 return;
@@ -29,13 +45,6 @@ export class DuetStep {
             }
             this.handleStepClick(e);
         };
-        this.theme = "";
-        this.heading = undefined;
-        this.headingLevel = undefined;
-        this.stepIndex = undefined;
-        this.state = undefined;
-        this.roundedTop = false;
-        this.roundedBottom = false;
     }
     handleStepClick(e) {
         this.duetStepClick.emit({
@@ -84,13 +93,13 @@ export class DuetStep {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'a8f9214b8d235673c0b324f966a5576ccbcd16e4', class: {
+        return (h("div", { key: '369f656f742589a178915ed4e72365d3dda7b907', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'fe6066ea863f9c11dd30b6b61dc9b36827dc3b38', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '500cee650ab3ab67ec9f7cbf3e9fa98f61079e54', "aria-hidden": "true" }, h("div", { key: '79c93ec35c9c02e3536487e5337bdd8ae653b537', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '2b6ad0facd7f5e405d297e3672af7d1a1867e33b', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: '4b26a145659e1f239687333a90fd5a976a34742c', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '670e5e9670bea92a93ebc1fad855721f99d58b88' }, h("duet-heading", { key: '815cd4427e3ceab15c5fb44b0dc27a9eae8df5f6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '22c24606e2dfa0cc2fa5d42d7e12139f3031ec5b', direction: "horizontal", size: "large" }), h("div", { key: '9db141db2e2ddc2ef398c440bddbce996d27c5e1', class: "duet-step-heading-slot" }, h("slot", { key: '3c35b0d2ba57df7f6af3c287b43fef66185f827b', name: "heading-content" }))), h("div", { key: '539aeedc2b198beb423c3bb4869405a2e1da1797', class: "duet-step-content-wrapper" }, h("div", { key: '7d376e57e92ccd478e417cc392aeebe7991d41e2', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '60f1a391efe9137ff048170995926a92abf687ae' })))));
+            } }, h("div", { key: '486a6f5b91cd3a6435bd02202b2191077469044d', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '80895fe6a9d2581b54ddeb9095f50ab2ae2c40ec', "aria-hidden": "true" }, h("div", { key: '8b38a04e831e7feb20bfbccaf56a017b0c52260d', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '2220531e141df3a5cd47dbcecdf5992265af1fff', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: '80ba3be5b395b09c02a15ddabc70319bdb710ec2', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7426ac138a49a07b9d914c7b92b24dde89fd2220' }, h("duet-heading", { key: '2cf9505b640081b6bc33bf726aa95fb8b49a100e', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '8888b2e5b45f4bc049454ef6166b97af508a09b6', direction: "horizontal", size: "large" }), h("div", { key: '2931ae9df30278381ee5634a45d3bb934ae34215', class: "duet-step-heading-slot" }, h("slot", { key: '0f4314f52c16ef8f3929cea2bf0b5e405168593e', name: "heading-content" }))), h("div", { key: '43264d21b4cb69938551d3e81d4378369c4b23b3', class: "duet-step-content-wrapper" }, h("div", { key: '4913f58605148bb81539d7a24b29b288210f2f3d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '7e7ce320adcd8b1dd456fdb63249c983b03a829e' })))));
     }
     static get is() { return "duet-step"; }
     static get encapsulation() { return "shadow"; }
@@ -108,6 +117,7 @@ export class DuetStep {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -128,12 +138,12 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,11 +158,11 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -173,11 +183,11 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false
             },
             "stepIndex": {
                 "type": "number",
+                "attribute": "step-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -195,11 +205,11 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step-index",
                 "reflect": false
             },
             "state": {
                 "type": "string",
+                "attribute": "state",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStepState",
@@ -223,11 +233,11 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "state",
                 "reflect": false
             },
             "roundedTop": {
                 "type": "boolean",
+                "attribute": "rounded-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -245,12 +255,12 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded-top",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "roundedBottom": {
                 "type": "boolean",
+                "attribute": "rounded-bottom",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -268,7 +278,6 @@ export class DuetStep {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded-bottom",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-stepper/duet-stepper.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;
   margin-bottom: 20px !important;
   display: block;
   width: 100%;
@@ -20,11 +20,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;
 }
 @media (min-width: 36em) {
   .duet-stepper {

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

@@ -1,15 +1,35 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
+import { DuetStringsListStepOfTotal } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
 export class DuetStepper {
     constructor() {
+        this.language = getLanguage();
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
-        this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
+        /**
+         * Format of message used to announce current step when navigating between steps.
+         * The string {current} is replaced with the current step number.
+         * The string {total} is replaced with the total number of steps.
+         */
+        this.accessibleLive = getLocaleString(DuetStringsListStepOfTotal, this.language);
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls whether navigation back to previous steps is allowed or not.
+         */
         this.backDisabled = false;
+        /**
+         * The index of the current step.
+         */
         this.selected = 0;
     }
     currentStepChanged(nextStep) {
@@ -42,8 +62,18 @@ export class DuetStepper {
         inheritGlobalTheme(this);
     }
     async connectedCallback() {
+        if (!Build.isServer) {
+            this.childObserver = new MutationObserver(this.updateStepState.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
         this.updateStepState();
     }
+    disconnectedCallback() {
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
+        }
+    }
     getSteps() {
         return Array.from(this.element.querySelectorAll("duet-step"));
     }
@@ -88,7 +118,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7ccc1ace3e8f07c10a099ef586f5828a86c673c4', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '819c9b955cd7e82825051eacd1f7dca8247da886', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'b35315da5f69ddcfd008d3e4071d49b954a905fd', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'babe00b87bff0c56a53c1a32d67acabd2725ba43' }))));
+        return (h(Host, { key: 'df89f1e452d33048371e02ceb399b3392e370b00', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '41faad40942a4fbc0bfec56801d76f6972f87eb4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '225714f663a988bfcca3ae1ff3846bf9bafa12fb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'e24151a3887c08c59be65fb9b9ab14be52db5fa7' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -106,6 +136,7 @@ export class DuetStepper {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -126,12 +157,12 @@ export class DuetStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLive": {
                 "type": "string",
+                "attribute": "accessible-live",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -142,16 +173,16 @@ export class DuetStepper {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Format of message used to announce current step when navigating between steps.\nThe string {current} is replaced with current the step number.\nThe string {total} is replaced with the total number of steps."
+                    "text": "Format of message used to announce current step when navigating between steps.\nThe string {current} is replaced with the current step number.\nThe string {total} is replaced with the total number of steps."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live",
                 "reflect": false,
-                "defaultValue": "\"Lista jossa {total} kohtaa. Olet kohdassa {current}.\""
+                "defaultValue": "getLocaleString(DuetStringsListStepOfTotal, this.language)"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -172,12 +203,12 @@ export class DuetStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "backDisabled": {
                 "type": "boolean",
+                "attribute": "back-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -192,12 +223,12 @@ export class DuetStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "number",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -212,12 +243,16 @@ export class DuetStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "0"
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "duetStepChange",