@duetds/components 10.6.0 → 10.7.0

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

@@ -174,25 +174,25 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: 'fbd7429209de850f01c9de0266dc72f3b775b356' }, h("div", { key: '4557fd410088b0964d37d559659dc84775f91c25', class: {
+        return (h(Host, { key: 'e178d050a7d1b05d109805a292a393556fdc8185' }, h("div", { key: '6c79968641b06a29f67e2ee641f45ff9523fef0d', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: '7752c2550f1db28decc53457ffd25543326252cc', variation: "change" }), h("button", { key: 'ae2c1a996d362e9149fa4ca30ffdab94be68d401', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: '3a621eee3a9e3c82817f57fcaaf685f6697607d1', variation: "change" }), h("button", { key: 'e09accc15fcea78b7dfe5587e82991d0cff908e9', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'cbca67b1ec025b984b94bef89fadc9cc1da7d23f', class: "duet-slideout-icon" }, h("duet-icon", { key: 'b741ec1ced8ffb83a771d8d2594dc53fc03c0f6d', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'a1357fa71e1c4a68a9cc68fe44e0b583aa99e6b9', class: "label" }, h("span", { key: '74d6c5d655727bc16f27783ceb6bdb987f0db273', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '59649775a8186f71318b4eb15234c9ab653e4e0a', name: "label" })), h("duet-icon", { key: '4d04a7b2554356e55c9771f626f7ddec2c0d0b6c', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'a85b7f26f2c8742f9508fabc33a762814efe2c26', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'f0ad586caf516ba48ad9dc622717cd26963877ec', class: "duet-slideout-icon" }, h("duet-icon", { key: '0b215b49365a40d3ea430879b67ac194ecea6030', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'ee8744b33869fa9843cc2ee305b6e3044260adb5', class: "label" }, h("span", { key: '1bd04fd656e987c3805b01032d110fe6fc2caa29', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '93765e7360ebcf9109e6967b06adccfc2edac5b9', name: "label" })), h("duet-icon", { key: 'bfe90da7a1c9f29b695d3c5ffbea797903ca1ddb', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'fe3bf0c1c3af57d903d4e06f904dcdd531d4f703', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'd490bd8e05eba04f62fec39b3adc4a1eccbec6f2', moveFocusTo: this.closeButton }), h("div", { key: 'fe6122ebc2685c788677e117e1d4f5867187f00e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '4ef75f568f7dba81c6f83a78a3ec3d7bcd752d05', class: "top" }, h("button", { key: '279bc9fa5744a2fa5ca47ac96c668dde6e2b0191', 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: '379e1ff56a13ccc13d288a973907700cef490a18', moveFocusTo: this.closeButton }), h("div", { key: '39ac4d2d35871298e8c66c0601a063ea93842ce6', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '2efa0a702a7f820938802f843dbfb26290875184', class: "top" }, h("button", { key: '61fe6909d29eb82186b3330fa845902ddb4ef052', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: '75687b7eab0a837dd81ad953a94e140c841de384', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9e44d04288188dfc6d48daf73fa55db5a813800' }, this.label.innerHTML), h("button", { key: 'b545c269d0be2c72fd8b09dbda7774e867965077', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7953b1dc8766021775b78886a787f860a43d5a47', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '1a9ae12c349d77a5fa2431bc4ff4ef67ac7cfb17', class: "sticky-header" }, h("slot", { key: '83ff1bb883c4b4dc691fb66feb4d94d184deb0b1', name: "sticky-header" }))), h("div", { key: 'cfdbea08a5a492608a7c51a114584d225fb9463a', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '9d7aeca2c733cbf7493a6baa370734f5bea1d2e4', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'cc5ae783e309097773eba3215e89e77fbeeec5bf' }, this.label.innerHTML), h("button", { key: '664a157c39f96f3ff3a4be09d43165a9399c7e7d', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'e72d12534a4f2fdcbcd81cd611e581e36c47f921', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '16891dafb3ef15b8c555d7a20eb3a3737b6169a0', class: "sticky-header" }, h("slot", { key: 'b852b6aba1b4f0f617a1b58ca4986c3dcd0d1eca', name: "sticky-header" }))), h("div", { key: '1ff351ecda603ac948d65acceaff49feb3c850e2', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'add52c19cb2d07b884cf89221c7d274e8568a8b9' })), h(FocusGuard, { key: '5edef9782dbb6e21f309050ffde3aefe3fbacbea', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'f39b7e0202e0b6553dbb402be4678659161d749a' })), h(FocusGuard, { key: '7ea263ade3d868218bdfa507129b238c2caaf8a3', 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

@@ -52,18 +52,18 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd9d5a0fb10d7b741720abfb3a6d2c89d9ef8703c' }, h("div", { key: '28fbb84a7341bbb0eb2943f886ba4ef4f4c2b3f0', class: {
+        return (h(Host, { key: '6731d76d5bb4f77aec9aada9825967e260d0f041' }, h("div", { key: 'd746d29ae7d36c11330934d76cbabc3169bf5e61', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'eb769cad3c4b9c6cd6e55278a2a764ddfac78251', 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: '4660cdc322f09987348f760e910e0ae5ae9562e5', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'd78b626a5ff04513b4c5f706ffbc897a09d5c6d6', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '4462c0ff6f10990d7c7831038b2aa8216089ad1c', class: "label" }, h("slot", { key: '789471a218c9e6e78f3b6e17290ba28b9310992d', name: "label" }), h("duet-icon", { key: '58a41b48fe383657c7ec09139c31945c6b51d7b1', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'b6126db96949f78288a01e35d3b7b266fef58ce8', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '54984e4a5f9911c893403034cd705197b05e0a0a', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'e7c0afa8e83039615cd6541c8a96ac4d07227883', class: "label" }, h("slot", { key: '15b1c44212b96cfba8106d79484df27cb6b72d98', name: "label" }), h("duet-icon", { key: 'fdf3569a5ffc27ca16256dbb5ed697dabc6c6084', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'a33d7c18c02689a09b66f6b2ae626ff691a36d64', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: 'df9daef8ce3c9cb1b147c3d4797afce38b454d4a' })))));
+            } }, h("slot", { key: 'b187d077c28702f134241dd0d63ca52dedfec7b5' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,11 +85,11 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: '5ac9742af4e473a663ebf16a972686ae4f68f3a3', class: {
+        return (h(Host, { key: '2ed8b9396a6fc4051299df605b5293b4ad851f10', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
                 "duet-m-0": this.margin === "none",
-            } }, h("duet-icon", { key: 'b0dcc778049ee9d2877e6a27019f288de08693b9', icon: this.getIcon(), size: this.size, margin: "none" })));
+            } }, h("duet-icon", { key: '01f92fdcfbb79c7bb32ea0dae0251bfad3f8f867', icon: this.getIcon(), size: this.size, margin: "none" })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3ff35419759d1a9ad9b6bf47beadc27a1e9b4fd5' }, h("nav", { key: '0c4826d0281672c9c4cd38467846e87300693186', class: {
+        return (h(Host, { key: 'f4def1bd42afddbfd791262c81fa4cb6b53aa0bf' }, h("nav", { key: '0c99d3101944026ef30ecb17cc15036c7a49f69f', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '686fb5823190f88c99fb23ef6432ac1585f6ee45', 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: 'b06a70d212f178d944b069955af8d3c3eaf2dcd3', 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: '5f09108a31bcd0f1ddd63396fd305151549aed05', class: "label" }, h("slot", { key: '30e775986f716fbad49c5c6d8470d2fe67e600b4', name: "label" }), h("duet-icon", { key: 'a78cf4548c27b73fcf82844dca0157dbcbf13364', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '0194dee3ce095f88700eae27ff5a99868f9078c0', class: {
+            }, onClick: this.onClick }, h("span", { key: '7915c6c4efaaec0625dad9fc232fe7037bc136ff', class: "label" }, h("slot", { key: '3ba013e59bd0e392c3648611266ecbb405d4a831', name: "label" }), h("duet-icon", { key: '72d21eb9586a7a21b50db832903217462dc7b24d', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'f8e0d135231fc961dd80f795c1d82d9d7906da6e', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '8a79a253a3d22aa4f5f6d29888ce8ddc4481a495', 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: '6975ea468c45d4be064e96565773c0266b38e7ab', 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: 'abd6d1c3b5be7df89c5e315dda8a2a1261616f01', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '45f3b141e48cc834563d75f322a9233fb738e673' }), h("div", { key: '81a672a413497e5e2f5889f8bad070cb7bfd01b7', class: "list-padding" }))), h("duet-overlay", { key: '6a77a27276d5fa07e17f2ca21ec0d62fa1b252f8', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '0c037e643939277845dd75e4f98eb83c2ed41f99', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'c0d94264c8cd5824c1c45df63bf5eb67897e2700' }), h("div", { key: '64bcd133e88697445e17abbf4dabf2ea4ed40fd0', class: "list-padding" }))), h("duet-overlay", { key: 'dedf8c34bcca605bb8ba3895930d66c7bfaafe6a', "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

@@ -108,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9db89f3062b1138f1cbaaacd84a97026ff56c5ff', role: "listitem" }, h("div", { key: '0f9e619dc382e085278c5f36fc978241760b3e70', class: {
+        return (h(Host, { key: 'bcb3f683de71c0bc8b9c87f8c3bc7ef5600c6fa0', role: "listitem" }, h("div", { key: 'ec440dbd58f7aa8a152d1e6517801ffffb4795a6', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '1ecf4e3ee3775963e103647d5d76c7b4a59d0445', 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: 'f67b293a2fd28a3c0e3e062461de2890beb6f174', 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: 'a8f70f3768575a3bca672d8918ba83a1077e9603', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'a53417b0ca2642132cf89acfbb1022b593c1a28b', class: "label" }, h("span", { key: '45fca6c9e11c261e27861f263dc2f200e1dfe15a', class: "label-text" }, h("slot", { key: 'cbda020e4fac6600b839cb9c70309914eb80c5eb', name: "label" })), h("duet-icon", { key: 'f4276eaab67b32aec06ce3f1f3b88541ade918f4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '82c3d5e082beabeb0efc9d240c9d5d921f1b3f45', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '10bfe310933a9f989ae31ded0cbced2a0a14db8a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '3c53621e7555e4df6a62ac41cfacb19dbc2630b9', class: "label" }, h("span", { key: '60cd09a846746be5d50c9851d1a2d3d66a61682e', class: "label-text" }, h("slot", { key: '0a0ad898618514d5b4f510d6be7e3c0074a86af1', name: "label" })), h("duet-icon", { key: '69a6d28eba4f72b06c035cd529553ae16da14253', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f5889cb60d5f244d99e8e5cce9486388166e4034', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '77eaa9506cdf662ffb1d04163e20e1d55d59fec0' })))));
+            } }, h("slot", { key: '48c26d5ac4af48cc2a0811966278d49b315723f3' })))));
     }
     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

@@ -49,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1f3a52370b17848c34c4e5d67d2ea95e4d7c8132' }, h("a", { key: '5375c770391baab31637c149774f551bef8ebb72', class: {
+        return (h(Host, { key: '4576334bddababcad4705978843a1ae08e34e72d' }, h("a", { key: '8e115648050ee9bde7d9fffb9dc3b895b0c46cc3', 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: '33cdb0067f000f88f498f6f09e051a9e52a7f08c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '9f3eef8e19ff33804e27a02abac519eae7511670', class: "label-container" }, h("span", { key: '3d4ca78914093332e94dd1dbad77128afd5c9fa5', class: "label" }, h("slot", { key: 'ee23c1e008fa9921e6338e6970a320dca9153819' })), this.caret && h("duet-icon", { key: 'c584820003432e257e36b9ba412f9b4685503730', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '9e91428c0825aed310abae4214ee7f7fb3f77bf4', 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: '3cb691c70dea145bcd829655518d1e2da8ec4a48', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'd68d5f69f86de6ea467ea7acd2e6901950846c4c', class: "label-container" }, h("span", { key: '4d40b23d4ca997fa9261b19f36934c678f0f67d6', class: "label" }, h("slot", { key: 'adf85ab136a5ddbac43131933ebd5863274562e7' })), this.caret && h("duet-icon", { key: 'c766790219038e9fc9b8bfe3454f5641020965ac', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '75759a4e4dd6032b73cf12fa7630b33f995e7499', 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

@@ -80,7 +80,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'c675c500658117f8fa1fe3629f63caf42fa5cfc5', role: "listitem" }, h(TagName, { key: '444e618b383e220a1f564ae17479db6d34f2b195', 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: 'fd9700bf1c3d961a93743de0d869f484553b16bf', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '0f4c3625759850d77add064f64408d776f1f46a1', class: "label" }, h("span", { key: 'abda37eff9b40128fcf46e0c81120eaaa5b0e260', class: "label-text" }, h("slot", { key: '2669839ad630664e4c309a77845668a80b6b807d' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'fc997b7d0c63d208f6a5e492fea73e1b30c86706', class: {
+        return (h(Host, { key: 'de4d2352d792c0adffd35bc86e9450b970bf8b0b', role: "listitem" }, h(TagName, { key: 'd07f89e5b67f9898e7ad18385c29956226bbd875', 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: '0355e7d2be9da67841b162371e4c22bed4a58bf8', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'c6cb759071a39f0ef8d86fcc657aabc6c174f6a8', class: "label" }, h("span", { key: '35b683122ff7739979a3c10ea756df2e0becccfe', class: "label-text" }, h("slot", { key: '530d2eec823596ae1a6c9148684a500bd48ebfae' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '95d91c2031615a6960ae2d476a92034f37cd5e7f', 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

@@ -41,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cee1435399e91c4d88abe58e3172d8093bf58796', role: "listitem" }, h("a", { key: '094e7647704343b0511d58f7856eba9f5449ba0f', 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: '85b33b8d9609e1962cbac3e9fb57bc648042c4e6', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '22bc415cdb1cb8ba85aa0ed47367985443675de8', class: "label" }, h("slot", { key: '2a2a7bdb82c185690ae5b73df3d449716ed80e6c' })))));
+        return (h(Host, { key: 'f21f33d16d3f1e5435db17e9cd84b5c6be8b9a27', role: "listitem" }, h("a", { key: 'd0a5cbf0af61c71728e231fe37161b3771d32239', 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: '62d39b5711cb99bbe1e6a5116d365926cbb7a00e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '0c4fad2999da91f0c87910c43f30c028482581ca', class: "label" }, h("slot", { key: '9f803721b07edf060c3a0c3c65190f8205ab0422' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'df1d38a00ae486704755f845444bbb3d99c63017', ref: element => {
+        return (h("div", { key: '91c006415c8db98625168cc1509f085f9f25424e', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -119,7 +119,7 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '31ef9a143a4015fd0fe6eb0ce190dc4b5bbbd582' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'cbcb9eb3c000e67f2aa896af7159101672c5c8af' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '968bf1e9fea756e09fd9c3c26596fcf857ad8a61', class: {
+        return (h(Host, { key: '1dee35eb36b222e57e85e68f730b6460a8b9e63c', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,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: 'ccde2e16ca1aea0af30556faad3207a61a8219d0' })));
+            } }, h("slot", { key: '933771b95dbc033acc97acf8396d23e2fa5e7651' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,127 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: block;
+  width: auto;
+  container-type: inline-size;
+}
+
+.duet-teaser {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap,
+.duet-teaser .icon-wrap {
+  margin-bottom: 16px;
+}
+.duet-teaser .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap .duet-teaser-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+}
+.duet-teaser .icon-wrap .duet-teaser-icon {
+  display: block;
+  width: 30px;
+  width: 62px;
+  height: 30px;
+  height: 62px;
+}
+@container (width > 450px) {
+  .duet-teaser .icon-wrap .duet-teaser-icon {
+    width: 36px;
+    width: 76px;
+    height: 36px;
+    height: 76px;
+  }
+}
+.duet-teaser ::slotted(.teaser-heading) {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.duet-teaser ::slotted(.teaser-heading-h5) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.duet-teaser .duet-teaser-body {
+  display: flex;
+  flex-direction: column;
+}
+.duet-teaser .duet-teaser-body .duet-teaser-meta {
+  order: -1;
+  padding-top: 8px;
+}
+.duet-teaser.duet-teaser-link {
+  text-decoration: none;
+}
+.duet-teaser.duet-teaser-link:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-teaser.duet-teaser-link:focus, .duet-teaser.duet-teaser-link:focus.duet-theme-turva {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-teaser.duet-teaser-link .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+}
+.duet-teaser.duet-teaser-link .image-wrap img {
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(0, 75, 129);
+}
+.duet-teaser.duet-teaser-link:hover .teaser-heading {
+  color: rgb(0, 97, 155);
+}
+.duet-teaser.duet-teaser-link:hover .image-wrap img {
+  transform: scale(1.1);
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(0, 97, 155);
+  text-decoration: underline;
+}
+
+.duet-theme-turva.duet-teaser {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-theme-turva.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(140, 0, 30);
+}
+.duet-theme-turva.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(185, 3, 41);
+}