@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { DuetStatusLabels } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
 /**
@@ -15,44 +15,101 @@ export class DuetAlert {
     constructor() {
         this.descriptiveId = createID("DuetAlert");
         this.hasShowMoreSlot = false;
-        this.iconVariationMap = {
-            default: "messaging-info",
-            success: "messaging-success",
-            warning: "messaging-alert",
-            danger: "messaging-danger-alert",
-        };
-        this.handleDismiss = (ev) => {
-            this.handleHide();
-            this.duetDismiss.emit({
-                component: "duet-alert",
-                originalEvent: ev,
-            });
-        };
-        this.handleShow = () => {
-            this.isDismissed = false;
-        };
-        this.handleHide = () => {
-            this.isDismissed = true;
-            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
-        };
+        /**
+         * Theme of the card.
+         */
         this.theme = "";
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.isDismissed = false;
-        this.timeoutID = undefined;
+        this.isExpanded = false;
+        /**
+         * Property to change languageDefaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabel when needed
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabelDefaults = {
             fi: "Painike viestin sulkemiseen",
             sv: "Knapp för att stänga meddelandet",
             en: "Button to close the message",
         };
+        /**
+         * Adds accessible label for the dismissible alert close button.
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually
+         * should be set to false, so that it is not read out first.
+         */
         this.announcements = true;
+        /**
+         * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,
+         * use of this property is discouraged, and it is being considered for deprication.
+         */
         this.icon = "";
-        this.autoDismiss = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Status variation of the alert. "danger" and "warning" will render the alert with role "alert" (unless announcements
+         * has been set to false). Other variations will have role "status". Use "danger" only when something serious has happened
+         * or the user must take immediate action. Use "warning" for unexpected situations that are potentially harmful, but
+         * don't require immediate action.
+         */
         this.variation = "default";
+        /**
+         * Allows for styling of the alert based on its position in the layout.
+         * "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation.
+         */
         this.position = "content";
+        /**
+         * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used.
+         */
         this.dismissible = false;
+        /**
+         * @deprecated - if you need to set focus, use a focusable element inside
+         * Make alert focusable.
+         */
         this.focusable = false;
+        /**
+         * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a
+         * toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible.
+         */
+        this.expandingTitle = "";
+        this.handleDismiss = (ev) => {
+            this.handleHide();
+            this.duetDismiss.emit({
+                component: "duet-alert",
+                originalEvent: ev,
+            });
+        };
+        this.handleShow = () => {
+            this.isDismissed = false;
+        };
+        this.handleHide = () => {
+            this.isDismissed = true;
+            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
+        };
+        this.handleExpandToggle = () => {
+            this.isExpanded = !this.isExpanded;
+        };
+        this.getRole = () => {
+            if (!this.announcements) {
+                return undefined;
+            }
+            if (["warning", "danger"].includes(this.variation)) {
+                return "alert";
+            }
+            return "status";
+        };
     }
     /**
      * Component lifecycle events.
@@ -68,14 +125,12 @@ export class DuetAlert {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
-        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.timeoutID) {
             clearTimeout(this.timeoutID);
         }
         disconnectLanguageChangeObserver(this);
-        unsubscribeTabbingChange(this);
     }
     /**
      * Show.
@@ -90,10 +145,7 @@ export class DuetAlert {
         this.handleHide();
     }
     /**
-     * Sets focus on the specified `duet-alert`.
-     * Works only when focusable property is set to true.
-     * Use this method instead of the global
-     * `button.focus()`.
+     * @deprecated - if you need to set focus, use a focusable element inside
      */
     async setFocus(options) {
         this.alertContainer.focus(options);
@@ -108,29 +160,37 @@ export class DuetAlert {
      * Always the last one in the class.
      */
     render() {
-        const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-        return (h(Host, { key: 'd3c53bc46ae4d9f94d286a8ca55a1891afaec2d1', class: {
+        const variation = ["default", "success", "danger", "warning"].includes(this.variation)
+            ? this.variation
+            : "default";
+        const position = ["below-nav", "content"].includes(this.position) ? this.position : "content";
+        const variationLabel = getLocaleString(DuetStatusLabels[variation]);
+        return (h(Host, { key: '2109619995f37428591a949f512aa0ac686c982b', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.announcements ? "alert" : undefined }, h("div", { key: '9b7c2ede2a81e5459214b3262c08f5a096251f50', class: {
+                "duet-m-0": this.margin === "none",
+                [position]: true,
+            }, role: this.getRole() }, h("div", { key: '257ab7f14f6a5268294071a23b0c12f5a022309d', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
-                [this.variation]: true,
-                [this.position]: true,
+                [variation]: true,
+                [position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'c372501af01265a0e962d41b0aeefa1b0803dc7a', class: {
+            } }, h("div", { key: '977d8df541e19898da0720d1e736d92a38d4130b', class: {
                 "duet-alert": true,
+                "duet-alert-expandable": !!this.expandingTitle,
+                "duet-alert-expanded": this.isExpanded,
                 "duet-alert-has-icon": !!this.icon || this.position === "below-nav",
                 "duet-alert-has-show-more": this.hasShowMoreSlot,
                 "duet-alert-is-dismissible": this.dismissible,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
-                [this.variation]: true,
+                [variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '6a00f96245f482fa280c5618d1ab3e3d61ae57bf', class: "duet-alert-container", ref: element => {
+            } }, h("div", { key: 'cfa93e8c4dc427917c1d52ba284118aa155b5712', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (h("div", { key: '3993720ebce31589b986f5441c9f8f48719f6c97', class: "duet-alert-icon" }, h("duet-icon", { key: 'fc93bdce332702991e0dedf6eba0276c5d9c3e6d', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (h("div", { key: 'e469d1feb00ce1b223b7977a1b87228933556823', class: "duet-alert-icon below-nav" }, h("duet-icon", { key: '8e3407af6309c0107a6e78107c965cf28cadbec3', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), h("span", { key: 'e4e8494c19f24f7da051b98cef3c3efcdeb47031', id: this.descriptiveId }, h("slot", { key: '1ce9a6e6c13e76f6fbf1317fa867d5400c79f41e' }))), this.hasShowMoreSlot && (h("duet-show-more", { key: '2106929166ce1b954dff45ed25b218ddce15f4d9', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '331aa9d74f0b995b55b6b119e569411a07673c3e', name: "show-more" }))), this.dismissible && (h("div", { key: '9cfd9e835660d246540ca7452de22bcd324d4682', class: "duet-alert-dismiss" }, h("duet-button", { key: 'fe950cf6c3d775160bd97b34e88ca71603a47d19', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "-1" : undefined }, this.position !== "below-nav" && (h("div", { key: '4a0168b309a8ef1272e6f12be44c80652931a5ab', class: "duet-alert-icon" }, (this.icon && h("duet-icon", { key: 'fca5d1ff9cf99a67201633cf8e0b50c476013852', size: "auto", name: this.icon, color: "currentColor" })) || (h("duet-status-icon", { key: 'abaa7cbf1fe14233c60a2779c766a6c6db566d94', strong: true, variation: variation, margin: "none", size: "auto" })))), this.position === "below-nav" && (h("div", { key: '56a891f39f8e9589ff366b749abcdb8639fc01d2', class: "duet-alert-icon below-nav" }, h("duet-status-icon", { key: '498e8f7e8066d855d8940d059e146ed9a652ab4b', strong: true, variation: variation, margin: "none", size: "auto" }))), h("div", { key: 'e43b70480ee5614bc16b192f62d36dbaec12e10e', class: "duet-alert-content", id: this.descriptiveId }, this.expandingTitle && (h("button", { key: '0a2317792653626ce9831cb3aa434f1a46168e5a', "aria-expanded": this.isExpanded.toString(), "aria-controls": `${this.descriptiveId}-content`, class: "duet-alert-expander", onClick: this.handleExpandToggle }, h("span", { key: 'c0627b9f13e9817de725d69a0ad959f9acd6ac3f', class: "expanding-title" }, this.expandingTitle), h("duet-icon", { key: '6169ae4f7e2991d1f30bebca584f521df4eef3aa', name: "action-arrow-down", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, margin: "none", size: "x-small" }))), (!this.expandingTitle || this.isExpanded) && (h("div", { key: '18ce1b94424a25bfcc8f64a7ef386b21b636f554', id: `${this.descriptiveId}-content` }, h("duet-visually-hidden", { key: '162f07a2cf9aa618f1d315c1fc329b8bcdc97348' }, variationLabel), h("slot", { key: 'e10a5858d7d7b91035c923b33a9d429f3d17ea0e' }))))), this.hasShowMoreSlot && (h("duet-show-more", { key: 'fdb3a2b5ca4acc3242c18f485a685a1639ccae8c', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '4eba1551558f1992c2a9786c8cb8c427d934574f', name: "show-more" }))), this.dismissible && !this.expandingTitle && (h("div", { key: '66f7aea60774b4501839104d3f4e8b9b1b3cc345', class: "duet-alert-dismiss" }, h("duet-button", { key: '859f33946e1affe4d8ee57318fc30ae7f44c9a91', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     static get is() { return "duet-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +208,7 @@ export class DuetAlert {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -168,12 +229,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -197,12 +258,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Painike viestin sulkemiseen\",\n    sv: \"Knapp f\u00F6r att st\u00E4nga meddelandet\",\n    en: \"Button to close the message\",\n  }"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -220,12 +281,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
             },
             "announcements": {
                 "type": "boolean",
+                "attribute": "announcements",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -236,16 +297,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable or disabled announcements by assistive technologies."
+                    "text": "Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually\nshould be set to false, so that it is not read out first."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "announcements",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -262,16 +323,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon to display to the left of the content."
+                    "text": "Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,\nuse of this property is discouraged, and it is being considered for deprication."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "autoDismiss": {
                 "type": "number",
+                "attribute": "auto-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -286,11 +347,11 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-dismiss",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -311,12 +372,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -337,12 +398,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus",
@@ -359,16 +420,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Style variation of the alert."
+                    "text": "Status variation of the alert. \"danger\" and \"warning\" will render the alert with role \"alert\" (unless announcements\nhas been set to false). Other variations will have role \"status\". Use \"danger\" only when something serious has happened\nor the user must take immediate action. Use \"warning\" for unexpected situations that are potentially harmful, but\ndon't require immediate action."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"below-nav\" | \"content\"",
@@ -383,12 +444,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"content\""
             },
             "dismissible": {
                 "type": "boolean",
+                "attribute": "dismissible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -399,16 +460,16 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should a button be rendered to dismiss the alert?"
+                    "text": "Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
+                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -418,20 +479,43 @@ export class DuetAlert {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Should it be possible to focus on alert?"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- if you need to set focus, use a focusable element inside\nMake alert focusable."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "expandingTitle": {
+                "type": "string",
+                "attribute": "expanding-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a\ntoggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
     static get states() {
         return {
             "isDismissed": {},
+            "isExpanded": {},
             "timeoutID": {}
         };
     }
@@ -531,8 +615,11 @@ export class DuetAlert {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the specified `duet-alert`.\nWorks only when focusable property is set to true.\nUse this method instead of the global\n`button.focus()`.",
-                    "tags": []
+                    "text": "",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- if you need to set focus, use a focusable element inside"
+                        }]
                 }
             }
         };

package/lib/collection/components/duet-badge/duet-badge.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;
   margin-right: 4px !important;
   margin-bottom: 2px !important;
   display: inline-block;
@@ -29,6 +29,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 4px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -43,10 +46,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: middle;
   color: rgb(8, 42, 77);
   text-align: center;
   word-break: break-word;
-  vertical-align: middle;
   background: #d9ebf4;
   border-radius: 20rem;
 }
@@ -83,14 +86,14 @@
 }
 .duet-badge.subtle {
   color: rgb(98, 121, 138);
-  background: none;
   outline: 1px solid rgb(212, 223, 229);
   outline-offset: -1px;
+  background: none;
 }
 .duet-badge.subtle.duet-theme-turva {
   color: rgb(113, 118, 132);
-  background: none;
   outline-color: rgb(222, 224, 228);
+  background: none;
 }
 .duet-badge.background-strong.default {
   color: rgb(255, 255, 255);
@@ -123,10 +126,22 @@
   background: rgb(48, 131, 105);
 }
 .duet-badge.background-strong.subtle {
-  border-color: rgb(181, 198, 208);
   outline-color: rgb(8, 42, 77);
+  border-color: rgb(181, 198, 208);
 }
 .duet-badge.background-strong.subtle.duet-theme-turva {
-  border-color: rgb(199, 202, 207);
   outline-color: rgb(23, 28, 58);
+  border-color: rgb(199, 202, 207);
+}
+
+:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default {
+  color: rgb(23, 42, 59);
+  background: #e8eaeb;
+}
+:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default {
+  color: rgb(255, 255, 255);
+  background: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle {
+  outline-color: rgb(23, 42, 59);
 }

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

@@ -2,13 +2,37 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { DuetStatusLabels } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getLocaleString } from "../../utils/language-utils";
 export class DuetBadge {
     constructor() {
+        /**
+         * Theme of the badge.
+         */
         this.theme = "";
+        /**
+         * Style variation of the badge.
+         */
         this.variation = "default";
+        /**
+         * Variation of the background. "strong" results in a more prominent background color.
+         * @default "normal"
+         */
         this.background = "normal";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        this.getVariationLabel = () => {
+            if (this.variation === "subtle") {
+                return "";
+            }
+            const variation = ["default", "success", "danger", "warning"].includes(this.variation)
+                ? this.variation
+                : "default";
+            return getLocaleString(DuetStatusLabels[variation]);
+        };
     }
     /**
      * Component lifecycle events.
@@ -22,12 +46,12 @@ export class DuetBadge {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: '2dba3e832143d9faee9ecf2c5655fbd537ed334d', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '40e82bba7a8f3657ee18ac180213e7d6d30ab1c2', class: {
+        return (h(Host, { key: '446fcb8a0becb11a4043774efb1611dd9d89d82d', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '56ca2601a6f378068ce6d1c695089c0d131e9b7d', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: '2aa7fa9c5b605a9dee5c24ac62b0ac673bb75ce8' }))));
+            } }, h("duet-visually-hidden", { key: 'b1105a9f4a43ee6f9379cb8c02a06328830bbaa6' }, this.getVariationLabel()), h("slot", { key: '2922cf32e24472ae3c8685a1ea90a27c0112b740' }))));
     }
     static get is() { return "duet-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +69,7 @@ export class DuetBadge {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -65,12 +90,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus | \"subtle\"",
@@ -91,12 +116,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "\"normal\" | \"strong\"",
@@ -114,12 +139,12 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"normal\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -140,7 +165,6 @@ export class DuetBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }