@duetds/components 9.3.2 → 9.4.0

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

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'aa07296629d813134f481a3e1ebfb6d31951bc48' }, h("a", { key: '56ae85701570dfa3ae4cae8f15fb395f9199776a', class: {
+        return (h(Host, { key: '397e43c602bd3d9926d0649d5df37f30abc8e122' }, h("a", { key: 'ea5609a4fd536e03d6563b21c05d9d15f024f996', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4872989601ff5a2c3ff458b53345292f358956a9', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '71fe6a89063381d1ec5d4a8d6960954660374bc0', class: "label" }, h("span", { key: 'b9e2aca6c05cc945917f87d74b3f4c611814e8cb' }, h("slot", { key: 'b917c1d51c62a2ab229c396f7afb3468c0b240e6' }), h("slot", { key: '775dbc1e31d128b448b72e876f0f53609358c709', name: "description" })), this.caret && (h("duet-icon", { key: '47c65d4e0cc5745e120730849beb97dcee30cb74', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'cd2858752a02bceda1dc86741a5a7588f4c04fc5', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'c0e8b4c5f08ff88b02749475f88ea49699c9f32e', class: "label" }, h("span", { key: '6f32f8b54e0c9927ef11ea6feb0e9f41239f5826' }, h("slot", { key: 'aa5b10e8ed48b56c94a4b92b8f4a4c04fd8751cd' }), h("slot", { key: '3ccb1b5c03782d3df88ce40121c3848abbb7ed21', name: "description" })), this.caret && (h("duet-icon", { key: '7761639943a89d708a9cdc554e8b464538154ab5', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -159,23 +159,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '4f6b906ea71b580ba0caff7862d79e685515e872' }, h("div", { key: '5b9938129529e0abdbf3d61ca38814fef9cf5cf4', class: {
+        return (h(Host, { key: '67ac4db2da51c270872cadbf5219233a9ff49cc4' }, h("div", { key: '7d35e8a8d56f4508b42b4c9e49f891de410b25e5', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'bd4e836d9da0174031251e74c5d34db39f3f17c1', 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: {
+            } }, h("button", { key: '632d47f161dee0f8454fbce8615efca79e6d2dff', 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: '5a365effdcebd66bbc8d75eeb39e1ee0191beeb4', class: "duet-slideout-icon" }, h("duet-icon", { key: '29aba3ddbefd3d672a5363f7aab60c3991774dba', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '077cac4c7174dc6447fc47119aa490452761c496', class: "duet-slideout-badge" }))), h("span", { key: '0e93520908b67a9e847ca2ab7423981677333d2c', class: "label" }, h("span", { key: '39442d5e839c85757a0432fe11f969e578071a63', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '8d98e276788faa2763ba3fc54465330ee20b8ef7', name: "label" })), h("duet-icon", { key: 'af4c4882cb21ce8308f00cb0092eabb3c5504ca9', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '71e6a873aebc6b069ed3b662f60e2836e88c0768', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '5b588bebc956c3f46b518419c6b9fd93fe213449', class: "duet-slideout-icon" }, h("duet-icon", { key: '1c49b187b6e353af06e65edacac5c316b1fead11', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '1588137970e42a8fbe9144b56362777a655bf9ee', class: "duet-slideout-badge" }))), h("span", { key: 'd1ebea539372c1e0721da0c98d47cd754ce9d112', class: "label" }, h("span", { key: 'ebcd5893f37c3afd09acc0ea3f97b820ff698b89', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '6a87678f0894ca4c4fb7a93637574d97996f4f2e', name: "label" })), h("duet-icon", { key: '08db52555e06b25a4fa86f2edec885fca3daef6a', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '572076d218ff5a3fb537618c6f8d1683b310254f', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'e569bb2925b05d5efb54f7b989866db66e7ffb18', moveFocusTo: this.closeButton }), h("div", { key: 'aa65fd87af6069abde6bc75704d81908bd029711', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '575ac5a4587e6da02b5e2e25b0e20bb33682b146', class: "top" }, h("button", { key: '4295a54970f66eafff8c3e4387601de695f42be4', 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: 'b99c2c59baf028a14b46ace0840415246c59f0e0', moveFocusTo: this.closeButton }), h("div", { key: '396411a19f66abbc40d87c6b9931359667bf81dd', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '9e0dacf6865a2f4f1f629bd8da4d8d23755a1b80', class: "top" }, h("button", { key: '90bc7c889a1bf16041e3ef77f7bb5da7c412553c', 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: 'c3f91ef9423ba10b7ac4d2629c5fb64cd5e08bd2', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '52032aa97cc19a95f91552a930cd889fe1b62b4d' }, this.label.innerHTML), h("button", { key: 'b379d71da45ca0bd9fb9a314e3b9840309aec919', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'ffc2b05a5a751e180b6d8a214cfb1f35fc5a5870', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'f92511246cc63b6e8a66d5c3ea0ad967666a340c', class: "sticky-header" }, h("slot", { key: 'bf6a0326ae3c93476614fe52837cfac964e4d46e', name: "sticky-header" }))), h("div", { key: 'e95ca842f9bd2a732f74659b40f17c6afda7929f', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'b1e6ab3413e1547ea61bed770d8c1658b4026781', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '5ecc199ecd47e4f73837a0b259a4322fdaacde7a' }, this.label.innerHTML), h("button", { key: '22ebfee56701b85b67709264e8106eb28ad57395', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '2ff8febe05142b416fee52661fc38cacc36f349c', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3607f16e1cb18fcee43c049c30aba6a43da7a170', class: "sticky-header" }, h("slot", { key: 'e68a32e67f1ea06768c77caa82e6e9176d15872a', name: "sticky-header" }))), h("div", { key: '3c38a1b360d2a753a440a65d9db6d05589220eab', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'b37c65c7a43d6bcac92a2a183f4edf85883cbecf' })), h(FocusGuard, { key: '1e6c58673a5953e5a75571909130bdebdc5a6de2', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '965461798b3a5abff5f298310af54746973d5c31' })), h(FocusGuard, { key: '058d1fc766894b3778f2133b494a6f6b1dfe30be', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '15a51ee1392b5cfaf0faf892381a354e9c2ad7a8' }, h("div", { key: '7a65752a7969698e0a6b9994dcc4c0d3eea60ede', class: {
+        return (h(Host, { key: '3aeb0f6518e111df8282802e65d6c74348cd2367' }, h("div", { key: '27a2c32674a4a98fad156142a9c5f07aaa47cab0', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '35ce652834bb7c5dfbf2b6211cfbfd2130c2e588', 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: '9bade63cdca5e3cfbd83e984db86bda5e094008e', 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: '963ee3c6c6d7ecc6c94a08afe16d3f5f9dafaa66', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'd4e56a5ba15d2d6cbe9dc2cd005b09d538fff5a1', class: "label" }, h("slot", { key: '0264c8d9575e402e1bb0042a5d4603d7da816156', name: "label" }), h("duet-icon", { key: 'd406ceffdb866733a623fd3000f88eed53984cef', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '28cf7810dd58248178981e491e918138cf3d2d58', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'a1257b1aadd2f1011526e05231fb994cbaf9ff44', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'ecadae30af9fdfe3397e3bbada78b23f9759f124', class: "label" }, h("slot", { key: 'b1faf455a33bf5ad1fec780460f55c83b77d62d7', name: "label" }), h("duet-icon", { key: '11597586080089822d868c152b6aae9155045b94', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'ffd5653ffd46ef59cceb9e61cd5ba59b6c2d54d0', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '9c02645c7b1732774cfe05087e819acf382733e0' })))));
+            } }, h("slot", { key: '46d294db4305ddf9f57bec16fb419eedae4898a0' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2c46d1a310dd476d040392ebcda6643f1981d624', class: {
+        return (h(Host, { key: 'aa2a7ac6bd334dc7d419d2dbe89da8b0961f64cf', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

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

@@ -23,11 +23,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '16af92c8d2b1991913980843b6d2a8dcb8646d67', class: {
+        return (h(Host, { key: '5d31dde5f546428f75226d820ca714fe74855a54', 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: 'e381215186c28e547272b8692f541cea84e0679f', class: {
+            } }, h("div", { key: '99cefb1d1a1f4d2d6abc9c935e791036279c9911', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));

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

@@ -0,0 +1,182 @@
+/*!
+ * Built with Duet Design System
+ */
+import * as tokens from "@duetds/tokens/lib/tokens.json";
+import { h, Host } from "@stencil/core";
+export class DuetStatusIcon {
+    constructor() {
+        this.bg = {
+            default: {
+                default: "color_lt_blue_100",
+                success: "color_success_200",
+                warning: "color_warning_200",
+                danger: "color_danger_100",
+            },
+            strong: {
+                default: "color_lt_blue_600",
+                success: "color_success_700",
+                warning: "color_warning_500",
+                danger: "color_danger_600",
+            },
+        };
+        this.color = {
+            default: {
+                default: "color_lt_blue_700",
+                success: "color_success_800",
+                warning: "color_warning_800",
+                danger: "color_danger_700",
+            },
+            strong: {
+                default: "color_lt_blue_100",
+                success: "color_gray_lightest",
+                warning: "color_warning_900",
+                danger: "color_gray_lightest",
+            },
+        };
+        this.variation = "default";
+        this.size = "medium";
+        this.margin = "auto";
+        this.strong = false;
+    }
+    getBg() {
+        return tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getColor() {
+        return tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getIcon() {
+        switch (this.variation) {
+            case "default":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z"/>
+          <circle fill="${this.getColor()}" cx="11.625" cy="7.125" r="1.125"/>
+          </svg>`;
+            case "success":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M9.325 17.916a1.79 1.79 0 0 1-1.498-.799l-2.44-3.462a.75.75 0 0 1 1.227-.864l2.45 3.477a.306.306 0 0 0 .261.148.294.294 0 0 0 .236-.119l7.852-9.935a.75.75 0 1 1 1.175.93l-7.843 9.923a1.781 1.781 0 0 1-.423.396 1.78 1.78 0 0 1-.997.305z"/>
+          </svg>`;
+            case "warning":
+            case "danger":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <path fill="${this.getBg()}" d="M1.27,23.767C1.58,23.919 1.926,24 2.273,24L21.73,24C22.336,24 22.906,23.764 23.334,23.336C23.764,22.908 24.001,22.337 24.001,21.73C24.001,21.383 23.92,21.037 23.768,20.727L14.295,1.429C13.862,0.547 12.981,0 11.997,0C11.605,0 11.227,0.088 10.873,0.262C10.369,0.51 9.954,0.924 9.706,1.429L0.234,20.728C-0.034,21.271 -0.073,21.888 0.123,22.462C0.319,23.036 0.727,23.5 1.27,23.767Z"/>
+          <rect fill="${this.getColor()}" x="11.1" y="7.2" width="1.8" height="8.4" rx="0.9"/>
+          <rect fill="${this.getColor()}" x="10.8" y="18" width="2.4" height="2.4" rx="1.2"/>
+          </svg>`;
+        }
+    }
+    render() {
+        return (h(Host, { key: '513b3e143bc34d530eccc8a15767fa2badbbd9f6', class: {
+                [`duet-status-icon-${this.variation}`]: true,
+                "duet-strong-bg": this.strong,
+            } }, h("duet-icon", { key: 'bdb984f064a33652090f67faf98f420d103fc960', icon: this.getIcon(), size: this.size, margin: this.margin })));
+    }
+    static get is() { return "duet-status-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetStatus",
+                    "resolved": "\"danger\" | \"default\" | \"success\" | \"warning\"",
+                    "references": {
+                        "DuetStatus": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status the icon indicates"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconSize",
+                    "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+                    "references": {
+                        "DuetIconSize": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size. Entered as one of the icon size design tokens."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "\"medium\""
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "strong": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use strong background color when the icon would not otherwise stand out from the surrounding background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "strong",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -88,7 +88,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9cd2e878ee57bb71fe5fbd410f88af372dc31cde', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'f97a9e7f94f0968bb70ed9def756541279783bc7', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'c6bc42ab6164ea260b6860c4c8350f8fecc83a2f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'fa2a987f757693d3f287fc0707466d751d7fb8ba' }))));
+        return (h(Host, { key: '22b196db710cbed3e8ad8b4dd0650c115a3f88d5', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'a0285f6474768b1dd10b9ed222a69f1d3bdcba88', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'bf50d57a713aa062329cc40685b7441e31dc892c', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'fb7bb222787bd590d30cce8f5619cc8c30c1f4b4' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -122,19 +122,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5a56d3033586978e79fc650f948ee3e654c74288' }, h("nav", { key: 'f95152df380577251c94868a2b1a03b493482a77', class: {
+        return (h(Host, { key: '36733ff35a676602cb5664783353722ac32a3f23' }, h("nav", { key: '6c79e18ca14402ba9becc0611cad56215ee0d54d', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '5cfc4bfc97b1c462e6a504735808925e66d42018', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '54db29b81a8fd888ddf9094b92ad72d453c30270', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: 'aaf7e9216f796c05bcd44131869c241ed6791dea', class: "label" }, h("slot", { key: 'd98b04e45e3be67aac0d0ffdceb13f214ad24052', name: "label" }), h("duet-icon", { key: 'd680597442edb82e4fbc8615a818684cbbc19488', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '3caf8786684e484dff8b20fbb4c273f33bfc7cbf', class: {
+            }, onClick: this.onClick }, h("span", { key: 'fd6fbc391f58b209fb675d1038043ab291ea8765', class: "label" }, h("slot", { key: '26efb16331d21d400c0416df1c54c98fec07fd9c', name: "label" }), h("duet-icon", { key: 'f383299770b09f13b0fc9c89c72b5a2ad495931d', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '71b7b2aefc7c9dbfb546df751e2ef5c5f420e440', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '8b582ed198b49ed593b8dce4ab7ca5f1c7824d29', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '3680be7bd688b8448d76f25ed074cb26f00f1bf0', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'e34b873658de23e4164810509a93ce533f6eb094', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '8f46f67375fad075efc56a28794c4706d85da4e1' }), h("div", { key: 'af6a6337b995853fbc04e8f50d7248c1d0878e4e', class: "list-padding" }))), h("duet-overlay", { key: 'ec26b0420f1eb4a93fa019cc24d22d3f160e7788', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'd3c022573601ad29c14074a42129b0fec8f8e7e7', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'ff8f80314ddf742307286285008a7b7b87e0311a' }), h("div", { key: '4724caa14d11b92502ca9bbf81d83a1f169e0514', class: "list-padding" }))), h("duet-overlay", { key: '96982d748408a3fc7db02df17eb9261732cae2f3', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '27c7987ace491bb1c392d343e7fb77964a8e01e6', role: "listitem" }, h("div", { key: 'c81d2ea06dd9d7be974b8ce0afb38aec268083f2', class: {
+        return (h(Host, { key: '6b5d2434a5a7d5afdfaf40e2134d1f02d2f8e222', role: "listitem" }, h("div", { key: 'efe625a31b8e3fa67d845250f6802633a3e970d3', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'e5aa57571f004c86e1da8f35b31be84f85c9b795', 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: '7b631206096ecd24fd7018850656a6ab3cf3f89b', 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: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '28d03b6fd216ea81b1510b5c0af41df61b69610e', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '388a6679345cd44d696d41dc027ec479ae0db473', class: "label" }, h("span", { key: '88e6ce4a33c009e72e1258d35f1eddabbacc3654', class: "label-text" }, h("slot", { key: '246e8f4033aa438782153691904e29a76450734c', name: "label" })), h("duet-icon", { key: '932079ae3e397891f203e7e876afbc83bb1258de', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '2353d72ac49a26b83fe262e30dd443819169bc1d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '3c9030513cf42a8633d8359be8003179bd5913b6', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '66fc2c66e8e27bee53464ce406797f4c32ca3b5c', class: "label" }, h("span", { key: 'a073565bff14d28d8cf5167eec655716e3e0e61e', class: "label-text" }, h("slot", { key: '14f7ef42fc76a1363bb5e0eacf4eac6bbb080490', name: "label" })), h("duet-icon", { key: '66884d73e81fa44ca37f1b3fe6d5d5dd02114ac6', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '16f20eb6a5a4f169b34bf32c8dbe1e3f401a97b9', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c21a441648636df186c7440b2c12f248712aecae' })))));
+            } }, h("slot", { key: '39e9087f187e2ed824ae75f02eea9894648c4bba' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js

@@ -31,12 +31,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '60141679d4da6a7724aa40a2445f9453b89493f1' }, h("a", { key: '7bcc708536db8a5bae64318ea75be58e8814a9ee', class: {
+        return (h(Host, { key: '2e7a0b63fabe8ee0f29cd63e339241722cb0b915' }, h("a", { key: 'c128f0afb1378b9587ee76a62d89bec957d0544b', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '3154b1713b8ee0ecb9dde907cc87b59193051c67', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'b7e0771fb6af597db0aeab77c26b6f10ad5fd37f', class: "label-container" }, h("span", { key: 'a2356f448e5634bc9a3e0151cb71adf812cc4135', class: "label" }, h("slot", { key: '01ede3bc095dbb8c37a7d0d7506b59b844f005d2' })), this.caret && h("duet-icon", { key: '57d6d0dee133a2a16ea63ee8dfe6707beb4a5231', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '1601244392f22c8232aba7daa7a473b711b695d4', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '88e38d32863145821247bc1d66e48fdb304c64db', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'c2d61e88b734363598485cac9e84636edaa485d9', class: "label-container" }, h("span", { key: 'c15270a7dc528c31fe81b0ac1c0730d1712aa273', class: "label" }, h("slot", { key: 'd3dfc2c82e310183f2b613f55506ae8e661427af' })), this.caret && h("duet-icon", { key: '7f4c469fb9066822bf2bf9d3086cc08734a84a4a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '90c5be1db9e0fb6684d0b8032326b9fd57547a72', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.js

@@ -57,7 +57,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '422b60d03cfc581066bf2a651c455d9ef443b176', role: "listitem" }, h(TagName, { key: '50b6aeb9f94871750adabb74239ea642f0667bc8', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '383cc30c4a1255e7f644a4f8274b238c06e59d34', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4a8d38ffde015d48649c9bfd6167c69e3b964146', class: "label" }, h("span", { key: '713811bc3a97ccaccaceda79f199c53ae9fa33f5', class: "label-text" }, h("slot", { key: '140d7d6c6bce716719347aa37b031c17ae3fb6d2' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '692f1e1e6582473a9c738f878be4a9dd58ce2d13', class: {
+        return (h(Host, { key: '4d177e3c8fab0bac22778d0bb67cb96b3f16a04c', role: "listitem" }, h(TagName, { key: 'b32f2c34e132612cfa2e2507478f514b83585c5e', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'afa64cadf036d77b203ba09462da022116620c39', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '5163f1bbf922e02e2805a3270e3b25d987bc56c3', class: "label" }, h("span", { key: 'd6da532a7b7d70b375e1be84446fb1dd7ba4c607', class: "label-text" }, h("slot", { key: '2cde0560e036111ed9665d9186bf0d15b7132c78' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'f4f83f5ea741b517a630271ee5bf1ea10840f985', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/collection/components/duet-submenu-bar-link/duet-submenu-bar-link.js

@@ -29,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9e08c272ab8cc2dd9aafbdc95544134a516910fc', role: "listitem" }, h("a", { key: '8db55a81215eb0842ea3f90d224cffb3edf37ddb', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'd9189db67ff4c5a2b9d80c6ec4939f6628481bac', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'bad512b87073b3f25cb22f9b72dee43d1a76b28c', class: "label" }, h("slot", { key: '3afcf14180bccbbacf368d368673d863a9fdfc61' })))));
+        return (h(Host, { key: '7a7d10e6e2c4118a911623476d672630f006784a', role: "listitem" }, h("a", { key: '027009d3d9de4ce94d88b521e399c59538a56753', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'da3c19c52745c356f2917b5796b79bbef53f8df5', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'a325291a240a537079b1103e06e6ee130bd76e8d', class: "label" }, h("slot", { key: '83d70266ae54f9bc2acfffc07a43f45c40010e66' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -224,12 +224,23 @@
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tab-variation-default .duet-tab-button {
-  padding: 15px 28px 17px 28px;
+  padding: 11px 20px 13px 20px;
   overflow: hidden;
+  font-size: 0.875rem;
   color: rgb(81, 105, 123);
   background: rgb(245, 248, 250);
   border: 1px solid rgb(212, 223, 229);
 }
+.duet-tab-variation-default .duet-tab-button.switch-large-at-always {
+  padding: 15px 28px 17px 28px;
+  font-size: 1rem;
+}
+@media (min-width: 36em) {
+  .duet-tab-variation-default .duet-tab-button.switch-large-at-small {
+    padding: 15px 28px 17px 28px;
+    font-size: 1rem;
+  }
+}
 .duet-tab-variation-default .duet-tab-button.selected {
   color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
@@ -278,14 +289,24 @@
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
-  padding-right: 0;
-  padding-left: 0;
+  padding: 12px 0;
   margin-left: 0;
+  font-size: 0.875rem;
   color: rgb(98, 121, 138);
   border-width: 0;
   border-radius: 0;
   transition: none;
 }
+.duet-tab-variation-plain .duet-tab-button.switch-large-at-always {
+  padding: 20px 0;
+  font-size: 1rem;
+}
+@media (min-width: 36em) {
+  .duet-tab-variation-plain .duet-tab-button.switch-large-at-small {
+    padding: 20px 0;
+    font-size: 1rem;
+  }
+}
 .duet-tab-variation-plain .duet-tab-button:hover {
   color: rgb(8, 42, 77);
 }

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -26,7 +26,7 @@ export class DuetTabGroup {
             }
             if (isTabKey(ev) && !isShiftTabKey(ev)) {
                 ev.preventDefault();
-                this.element.querySelector("duet-tab[selected]").setFocus();
+                this.element.querySelector(":scope > duet-tab[selected]").setFocus();
             }
             if (button) {
                 ev.preventDefault();
@@ -76,6 +76,7 @@ export class DuetTabGroup {
         this.padding = "auto";
         this.setTabIndex = true;
         this.tabChangeConfirm = false;
+        this.switchLargeBreakpoint = "small";
     }
     /**
      * Component lifecycle events.
@@ -193,30 +194,32 @@ export class DuetTabGroup {
         // TODO: get rid of plain-scrolling class, as we always scroll
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
+        const largeBreakpoint = `switch-large-at-${this.switchLargeBreakpoint ? this.switchLargeBreakpoint : "small"}`;
         const buttons = this.tabs.map((element, index) => (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
                 "duet-p-0": this.padding === "none",
                 "duet-tab-button": true,
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
                 [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
+                [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label))));
-        return (h("div", { key: 'd44a264bf004343e9f82164c4901341d85dd77dc', class: {
+        return (h("div", { key: '207a82ac69bc1e0dc240a920b5cc2c7a8ba9ab62', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b96d7b205e288a166ab6a3be7eec9b4606270ad1', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '71e4268271d5193a1b9c7a8878ca9a3895f2d2d2', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.variation === "checked" ? (buttons) : (h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: this.variation === "default" ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center" }, buttons))), h("div", { key: 'df29ecb045edeb7954209cbaf9ee5433e69a3881', class: {
+            } }, this.variation === "checked" ? (buttons) : (h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center" }, buttons))), h("div", { key: 'd0671945a27f612e16f322d4b0a50e1f29ee50af', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'f917ae4a86513650ae87f9c7f1093bdaba852712' }))));
+            } }, h("slot", { key: '90483c74164e3e6a6c9119dffbf9be6cfbd85853' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -568,6 +571,26 @@ export class DuetTabGroup {
                 "attribute": "tab-change-confirm",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "switchLargeBreakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"never\" | \"always\"",
+                    "resolved": "\"always\" | \"never\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default switches to larger size from small breakpoint.\nNever disables switching to larger size and always forces it."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "switch-large-breakpoint",
+                "reflect": false,
+                "defaultValue": "\"small\""
             }
         };
     }

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'e378254253a226b9edcee4bd3a64283ad15673b2', class: {
+        return (h(Host, { key: '26ab3b66d99bdff07554198125e8867b84051c9f', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: 'b338423743800018d8f1b19ae20ca8c0a4bd5c36' })));
+            } }, h("slot", { key: '1df61c45d1faa92385e24949ff773ec71852e0a5' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '73a1a1a48a93a92a6f133b3e314538594905f0b3' }, h("nav", { key: '1d5c122d89e33742f392eade29e07fba67a0c94d', class: {
+        return (h(Host, { key: '562a3b82275cd77dc7f90d6c53776923965415e0' }, h("nav", { key: '074728e56d1f75a560331c1a4a8f12cea3343aa8', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '009d685a22843ea975f1390f30c0e0f0d2b86cdc', class: "container" }, h("div", { key: '38d682f6662b41dec2fd29e6a6ef58beff217d5f', class: "list", role: "list" }, h("slot", { key: '490ffd492b38a3a3f61a7b0d5022edc90ca60cbd', name: "left" })), h("div", { key: 'cd6a3ec4a6f8fcd6a88575893a58e4cc98d62728', class: "list", role: "list" }, h("slot", { key: '2a02055c44765e717c1cba43c7c41d82f6ef6ea2', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f2379c6e218e998c32f8b8a808d3ba1a9fc0602c', class: "container" }, h("div", { key: '6a7a09168fc5ad7f0b8fac5019fca192d800a4dc', class: "list", role: "list" }, h("slot", { key: '45621a40c7ecdb2e834ea94b6e72eeb434113b8f', name: "left" })), h("div", { key: '32c6e4b3e88e5a5226d9d6a33d93dfe16079335c', class: "list", role: "list" }, h("slot", { key: '75e255dcc244d524f02921fc033d9e07789f8e00', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }