@duetds/components 9.2.8 → 10.0.0-alpha.0

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

@@ -116,15 +116,15 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '514247209eb02acf9209a70fdb7beef7f75c8949', class: {
+        return (h("footer", { key: '984434597100f2619e70f0fb78942e03971633ba', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '98bb195f0c73b7c6f0f9bdce45d7cf10b4ca1b04', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'c7d113f0b92c358c807d225d464f3ce9f568b18b', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '54916b84623acfa5541d9c4fd744405251657f4c', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '1750f3f4dfdc27ca09ad5aeb8109bda2bd05ec77', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '3257627994acdba16e60053240edc8f775b4be93', class: "footer-top-logo" }, h("duet-logo", { key: '0de1a784b81e1fbfe0e6ae8bcf74f9ec6152c4b2', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '5ee3ed9d9f6780743fe204b2de956962caa0be85', class: "footer-top-right-container" }, h("slot", { key: '46f7d76b522f5e4025425a83fd9494c18508e8a9', name: "info" }), h("div", { key: '685dd0d9e31d8d3b23546531c4468d531a38c393', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: 'bb9d1aca77e745616b992c4c298987db3c17aea7', class: "footer-top-logo" }, h("duet-logo", { key: '6e7b06875f6fbe9c37ee62e55e998ed3a21a8721', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '21c24e081d8345e51e292e294a185ad6823e2353', class: "footer-top-right-container" }, h("slot", { key: '5432347d10fd601d8d676c3228f0695370f96db6', name: "info" }), h("div", { key: '27d2b49fdac1ab15bebcce259432bc8d9827a02d', class: "footer-top-items" }, this.processedItems &&
             this.processedItems.map((item, index) => {
                 var _a, _b, _c, _d, _e, _f;
                 return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
@@ -134,7 +134,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: '64396f3d47a103a6078c17a3454b6bacf024b273', name: "extra" }), h("p", { key: '0f3ceed9e4b5d4ff8770d1cea375a0192bfcb147', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'e70206a0126b4fdeb093b173724331da4f4478b9', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '815c5b63ce56e73fca64e730aeb96a0f3fe35a39', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'be321e5f0666998b8f8701b945081429d3e28de8' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '6db7225376253b4d91407f59b43391249700510e', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '2d0660ceb4c7f5696d1dddd46506d84ea879ed19', name: "extra" }), h("p", { key: '0c6ad47b06a8db2a3668bcb26a48d8f5e5c0e460', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'e2540585ee767f554113a6f8d796b9ebdeed13ba', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '8fb63fa6bf02d4876aa2d8a555768a53bf168762', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '8a21168dfc250e46ca4e16cd302108ca43b51dc2' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: 'b0a1683053d60ace83a92a07b2800649d4b976f5', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { media_query_large, media_query_medium, media_query_small } from "@duetds/tokens/lib/tokens.json";
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { watchForElement, watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
     return element.tagName.toLowerCase() === "duet-grid-item";
@@ -119,10 +119,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
-        return (h(Host, { class: {
+        return (h(Host, { key: 'fd65566d78340fbb5446524cb7c18694f40f219e', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -149,7 +146,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'acc5ce23bb2454400755b6dac1f31db22d00877b' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetGridItem {
     constructor() {
@@ -26,10 +26,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
-        return (h(Host, { style: {
+        return (h(Host, { key: '89acf29883fafc4e79dcb26e288ae0b7540c43a1', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -46,7 +43,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", null)));
+            } }, h("slot", { key: '44bf045264a1cfe27bd16f2eab6881a2eb7850b6' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '54ef8666a3921667c4943b6572f9c063279efb2a', class: {
+        return (h(TagName, { key: 'f606e3e4de6cf69ec6743328d4e9e8bbce5fe66b', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -44,7 +44,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, style: { color }, part: "duet-heading" }, h("slot", { key: '8b663ccf47b427cbc32c82db7d82577e27a6c3f4' })));
+            }, style: { color }, part: "duet-heading" }, h("slot", { key: '57fe6321051376c1b8dd03ceb22130a79d916745' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,7 +158,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '34b0fa7657a0cefe2530145ba9994b3730fc1ba3', role: "region", class: {
+        return (h("div", { key: '0c4038b005e7b453195addcd524b72d6ba2b3f86', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +176,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'c437da23377411306d72658c060484616044b985', class: "background-area" }, h("div", { key: '9d1120b2e967da1b48547f390bb26b9e490a4c54', class: "background-container" }, h("div", { key: 'f22b317a346432a6fe82290cb87cd94a40faeb53', class: "background" }, h("img", { key: '6b1160054265f4f81b55b2c4de0f1b41daf84f0f', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '9e07390956ddb4121d9d7a14e61479910bb1fe24', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '5e9cc93331c61c35889273c717939d45e12358df', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'aa1c53e1d9671d3b3ed27bbfce89fc1b9a56c444', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '64a3c03241425c93b2b59a1cf7464885ed660547', class: { background: true, [this.layout]: true } }, h("div", { key: 'bb9c70d6aeeef4675a976aa834e65e2ff67bad6c', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'c7aa8d0057cd29e91fa03131ef8adf0983911033', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'b15b68de245df65d285c17e5a6404db37d39a123', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'f5ae87dc0273c14281d6fa52fb7f1723011b77f9', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'b95b9d9a52e6b37e06c121e979437280bb8690ac', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'e6b5f02129d8d12f23eaf3060002c386e9fc2abb', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '913cc8bac1e976031f8d83d9403a0bb278484385', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b9bcd7c9b5d47bea82677384dca48e87fc5ae66a', class: "background-area" }, h("div", { key: '003f7ecfe974206b97fc34f9d9e56b7ebab72481', class: "background" }, h("div", { key: '6df5dd4117ff337a2cd521da9413e0f786f6c5bc', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '1e883db2fbda4a817a2317a8eb7219e8efcdbd78', class: "brand-shape" }), h("div", { key: '9b66049c88f38bbbeac1437d00a76b15c744f2a9', class: "brand-shaped-image" }, h("div", { key: '95487680d6c06b661a1e35e5981b03ee1d1363da', class: "brand-shaped-image-wrapper" }, h("div", { key: 'ffb4648a4b9a61e872a3d9a56f9ea0ffa6f88679', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '23efe67a7de1b268da1ee8eb8f734831f39716aa', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'ef3a088c5dfcbb3d4b55394ca9e48a249b253dfd', class: "duet-hero-image-mask" }, h("div", { key: '2cf63fc6a5817eb94189b58ec8c4eae9e9438954', class: "duet-hero-image-wrapper" }, h("div", { key: '1b313a33272a5cffacd37c6941fe7dd3d9610adf', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'ebbf76facf59c1b0f41baef5c55f915317c95dd1', class: "duet-hero-back" }, h("duet-button", { key: '67ae43c074ee12903469ed5a5d17fbab0a4b9771', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '2cb744f9d21aae8900369096bffd08e271402053', class: "background-area" }, h("div", { key: '9a6c181bff667af0cc99f16896ff702761736e68', class: "background-container" }, h("div", { key: '9d96ddb71b6ff095622a709796aca2c64b30deb2', class: "background" }, h("img", { key: '5c7b3ac41baf0186fc4f63bd9970bf16c2dc74dc', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'eb4469222c17d13a1fa751cb60da7292dcdf5749', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '80278ce211fb2d3085d68ab1cb531d8ea7a01466', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '73d1a5d1e768ae43b2c118c0b8b18e6855a116ab', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'e65bbd5ad6ee10717273740a1cf5f4f9e55bb069', class: { background: true, [this.layout]: true } }, h("div", { key: '006f31a8ec8a628d32a7a910cfffe9058a314a54', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '655eb93298ed822cec744262497129f5470fdc52', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'fe646994943778c82b885c51ef0486aac015a99a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '685632469ce5465d35954d83b52463421bdfbf20', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '377041432c9d2ed89fb8d76f9930a5d754464869', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'c2adf4a16bdc21724bbdbb99353fbb494632ea08', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'fa66a3685808028cb23b95c6f509995469cbef1c', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '47590fda0e8e1d0342bdaa3f879e71b6d86c3873', class: "background-area" }, h("div", { key: '3a18024fff5df5404b8e8f4406dcbdbfcfc5017c', class: "background" }, h("div", { key: '159c2abcc696ca752a3d7657bd0714377dad40fa', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '3a56d7ab5ed83ec71182d607a79d4566953d8627', class: "brand-shape" }), h("div", { key: '4d0ee4bc1e28d66da1bcf2b0cb5cd47dcf1ae8b3', class: "brand-shaped-image" }, h("div", { key: '6e1345fbc0cf5e553df210e81c39de26e11c5714', class: "brand-shaped-image-wrapper" }, h("div", { key: '7ea88df1647ed0473e3c92b547118cd27c13e51e', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '7f01db8e264b2e73a20426055b5a270281def01a', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'cd6ee31a587dc5728f1086208e34609c4cb41576', class: "duet-hero-image-mask" }, h("div", { key: '240753cdf68d85b41903e1d6134e83627c36ea20', class: "duet-hero-image-wrapper" }, h("div", { key: '6cafe1f5e91d8ec09c6deac64d10a2e18dc7dfa0', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '42d227de39c2c3c2f363d6254ad0443447f14b5a', class: "duet-hero-back" }, h("duet-button", { key: '417c38fa04a95e3fa3c050d338cab9715949ee26', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'ee4e5b8dacc17aebca5413756a50441ddcc390b6', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '3b01acea1f50b9922f5aa6d71e774f4d7850b496', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'e79f23f635ad96606f5e19bded50a09944128711', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'c3f996d48967b90a96f57ce3bce1b67c872e4a4c', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'ea954ebf0bb7ca592dcdb8bcf94bdf605483750d', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'd004f6ef3e466ad2a15fd0675795c59abe78c2d7', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", { key: 'ba3e4f7b6c59f0afac59aab3519e743f16b06922' }, h("slot", { key: '3116a6ddc51566c87041fbf105fb85153847352d', name: "subheading" })))), this.description && (h("duet-paragraph", { key: 'df3a0f01f00bb5ecc5af0db0949f1f3374c3fefe', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '38f3c9a55245f6feec7a522e4dcdbc1b4db6275b', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '68e6d833454a48dec21a06682eacd2fe2dca89cd', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '2a756b3cb5209942776cf8ac0596ef9a75bbae01' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '67f20d365318b327a2ccc0f16aec91d0d24075ee', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '66063cd0b99415c605abe15352a9b71168037059', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '4a3fcc41f5daaf4d700068aa75197cd68a46bc11', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '62051b4ac62ec3a47501537478ee19e709d10166', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'ea902d83a964060c8597405b0b24e1679af35e98', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'd77ac46a19fa244d4dcb33a68b44a3ff7cba8e4f', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'c21c9d1e62d0eec3999fe1feaff0cec00179f5cc', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", { key: '9199c48d4fc9f198b7d8b9dee733b2f11eed776b' }, h("slot", { key: 'c42f417640ac4c491cfdc8365fa3e6b42e736777', name: "subheading" })))), this.description && (h("duet-paragraph", { key: '30dda4b5e866efe5078f4fe416b1e869cdd41d96', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'ed22cd538744a99e79f4f4114da63273bc87cd8f', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '3bc7ef7148147a5d45bd58da145ad45a1bc446d7', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'decca9d5a65846b314106812964952a4a31dd749' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '241e28061c2c805cb601a4f76298856359bfec12', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '83ac2407634045ce753debb18a3fe5e5c91ef065', class: "duet-hero-image", style: styles }), h("slot", { key: '241f94b8d985ce1a87f77d497beace9d29a80622', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '004ab35e7ed914486fbcd85ec53efe7bdc2b98ce', class: "duet-hero-image", style: styles }), h("slot", { key: '63d9b82445adb55bb89618092ed1e4178d6b8755', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,11 +97,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '395c9d34b58629802851652543d0351555440771', class: {
+        return (h(Host, { key: 'bcc69839a12f0f324283e2ac3fcdcc0bf9f62f97', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '98e755e1955298019ae340e039416ca5ed04fa6c', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '7b11a7a766f0b472bea854c1f39971d73a499b9b', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -110,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '1a5f2ff89504ee78d476800edc4cb9aeeb6927ae', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: 'e84a88efa8d6d8f3b04c288939d3a36b80095878', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,13 +3,13 @@
  */
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { checkNamedSlotElement } from "../../utils/slot-utils";
+import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 const icons = {
     search: searchIcon,
     email: emailIcon,
@@ -23,6 +23,7 @@ export class DuetInput {
          * Own Properties
          */
         this.inputId = createID("DuetInput");
+        this.proxyId = createID("DuetInput");
         this.clearId = createID("DuetInputClear");
         this.labelId = createID("DuetLabel");
         this.topCaptionId = createID("DuetCaptionTop");
@@ -274,6 +275,9 @@ export class DuetInput {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
+    componentDidRender() {
+        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
+    }
     /**
      * Sets focus on the specified `duet-input`. Use this method instead of the global
      * `input.focus()`.
@@ -306,7 +310,7 @@ export class DuetInput {
         }
     }
     getAllChips() {
-        return Array.from(this.element.querySelectorAll(".duet-input-relative duet-chip"));
+        return Array.from(this.element.shadowRoot.querySelectorAll(".duet-input-relative duet-chip"));
     }
     isChipSelected() {
         return this.getAllChips().some(chip => chip.selected);
@@ -369,7 +373,7 @@ export class DuetInput {
      * Add a chip to the input
      */
     async addChip(chip) {
-        const container = this.element.querySelector(".duet-input-relative");
+        const container = this.element.shadowRoot.querySelector(".duet-input-relative");
         const input = container.querySelector("input:not(duet-chip input)");
         chip.id = createID("DuetInputChip");
         container.insertBefore(chip, input);
@@ -400,9 +404,6 @@ export class DuetInput {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.inputId;
         const inputProps = {};
         if (this.numericKeyboard) {
@@ -431,7 +432,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
+        return (h(Host, { key: 'e4e873f95bf94f97147a15b2587cce826ffe328d', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '6c116b58cda98a99d0561e57f42478e6f95fe85b', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'dc417736dc38bf828bb78b5ef7c18b4fd0f55660', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -445,7 +446,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '3120dd57e859e1f11c7f871046ff93ca379f7d33', class: "duet-input-label-container" }, h("duet-label", { key: '1625fdf912a8f117979ac70414b749e5920d6697', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '3e8fb18bae9803bd617d98fc326ff4879113505b', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'f9e4dca121a806252b7d523be78ae0db191ab05a', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c3a0f5039b0a6a78600b26003cf742b6c100b715', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6df3e2e0abb79ce6bf5347c6e52e03be6ac374e1', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3f6dec06ad90dba4cb28b08ed008252423f6db74', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'a53cd8aa2761ac6ebd7b5d6ee329573595c9aacf', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '37decf03a973f6fa26a76961afc0598ab976b1e7', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -453,19 +454,19 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2b06ed113322c4e03fdcb04bf528cc9425307013', class: "duet-input-icon" }, h("duet-icon", { key: 'b5d41a945b099d2c5ade8c121738a9d387599c80', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f89624f414e9005f484f4d31b90edcf6ea81ca44', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: 'aeedec82776de92e930bef230fdaed43552002a6', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '92d15bab69bbfc0ea9b635c94b0edc5e5ddf4f3f', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'e16da8f6c4c252309cd6cf2fd9ad1d3f5ccdb547', class: "duet-input-icon" }, h("duet-icon", { key: 'ee55dc419577e1bd21eca218717c1ec7a64f38c2', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '104d0b90682cd0508d684bebc22b9d4893d7181e', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '838c0aef8ef924af565ad34a0004f4d5f187418f', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '902ec5a2c111186ed9cda34dcd1ad0d6666b74c7' }, h("span", { key: '1c94535e903e542ff97a52cb871e91d4ab244646', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '9e346bbb5e1d4a0e78fe8ff3b79401c7988a4e91' })), h("span", { key: '661e5d3ae11da4b71c4b024b6835b230008ddf42', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '66b313ab9b88db56592c542e1294012f6fbf3c10', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-input.scss"]

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '815cf46b505a58a4f1db64f0737eb2461fffe1b4', class: {
+        return (h(Host, { key: '90f647eba78b36ab1d85e0a560b038ffc21303a2', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '0db8d45f16f7bec516c0b831393cb05f962bfdb8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'b65a92ce153b41318cb757b3457dfc470c11c4c6', class: {
+            } }, h("div", { key: '1431a32d05c84c241a2d8c7159e612e609e2824c', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '60671d632fc27c596bdfcc7d615a48dc21f8b9a8', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '777fc5b75ff85428b7234d94739f7471f5dc8011', class: "duet-layout-top-wrapper" }, h("slot", { key: '513fa6d80b00980efc02c454889726f24b3af6a9', name: "top" })))), h("div", { key: '8d24cdd9f0a38cadf71cf74df0f44c547a9fb4f3', class: {
+            } }, h("div", { key: '5550861a3548f488f5626097295495e42f1da21b', class: "duet-layout-top-wrapper" }, h("slot", { key: '50d4f55c8a796813d02274f30346110262213a88', name: "top" })))), h("div", { key: '1225a8d5b7023bc36962ce3ac6def89d972435d1', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'e98b4d6704819e6a07f5ccc7b29227d6623e2bc2', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '642f458827bfce2732c708d5cff00b382180a202', name: "page-heading" }), h("slot", { key: '929847b72cf01ed5be66b9fdc6e0e204281d0eab', name: "main" })), this.hasSidebar && (h("aside", { key: '9cf127c89c37b47642d7d3234476c16d5c38fd11', class: "duet-sidebar" }, h("div", { key: '043863761695cf57b596ab6759e99ae32e09f432', class: {
+            } }, h("main", { key: '0e584acec6dc315e435bd00361e1ff3b374d04c0', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '301f7c76d42a45373c5bf769e9293ede7d38e05c', name: "page-heading" }), h("slot", { key: 'cc8b9f7018c621c98ebb261167a92cace2b8ab62', name: "main" })), this.hasSidebar && (h("aside", { key: '811455504b48787253def2101178f1aeb6f497fd', class: "duet-sidebar" }, h("div", { key: '6bd13075032951b5837f51e7ffec4ab0966b16da', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '772f164951137306ec8289a095a829fd2fc0a87b', name: "sidebar" }))))))));
+            } }, h("slot", { key: '9dd5da1cca1abfb7f3946c2e9b254f76f4edf609', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,10 +53,10 @@
 }
 .duet-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -142,10 +142,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '2025edd3774d559f0d6877498e0a806532fb310c', class: {
+        return (h(Host, { key: 'e7cb6ea76d92ed46bca6c328a17e50755ea4c750', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'ee013e25058fdfe22cf04784e06162181b9ff5a2', href: this.url, class: {
+            } }, h(Tag, { key: 'c6c6d30ed3774822aeae25f20e0bd227f71b397b', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: 'be789bab546df8b0ac070d09a5f5c47f5f428afe', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '645ee0c7c623eeed042e25ac2ea7aab51ef1a2bc' })));
+        return (h("dl", { key: '2494b68d174f2bed0ca129e8970a12ccf09d3532', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '966205c93097469e4b0e1c92aa7e7f264a235ae3' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -16,14 +16,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a7bcf9dc0ad8d27c83c7c94369d277906e23cc30', class: {
+        return (h(Host, { key: 'b6d3629f682ab9c7962c63213a42d93633b7b5ae', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '504987050e1628eafd91243247e7242148e1371b' }, h("slot", { key: '94fab56825730065ad5ff075922807ac03e9981a', name: "label" })), h("dd", { key: 'a3b2444a7764edfea66a0e6d63b3ac2f7666ce7c' }, h("slot", { key: '72c2d152465c9278622df1b5b8e947f714977a30', name: "value" }))));
+            } }, h("dt", { key: '6fd5bb285e0657c6669dcd1aa45983655ae96e44' }, h("slot", { key: '3042541fb55b198c4f183ddcbd5d3a318f20c0f6', name: "label" })), h("dd", { key: 'd925ef59c712ea7ea6308c65ff10e8e2293202bb' }, h("slot", { key: 'e38113683d53d0a1a23f80c900784c148ade05de', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'cd53d85f163bc76250be1e5514b00bf6769e7f54', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '8ec59c6823257e298b0e298a7d6eda2c40725d83', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'e0134b0c6453f025fbb84513f17ad1fe857841fd', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '5d97b1065c652c700fef53b4cdd3c92e3a49a82f', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -119,7 +119,6 @@ export class DuetMenuBar {
                 this.boundMqlFunctions[i] = bound;
             }
         }
-        this.checkCenterSlot();
     }
     disconnectedCallback() {
         for (let i = 0; i < this.mql.length; i++) {
@@ -153,14 +152,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'a65c23ad487b0568d090ce557e371efd6d9c327e' }, h("nav", { key: '21e9511d958e4399c027bd8c22f2fa5d55b787ea', class: {
+        return (h(Host, { key: 'e13a866fd4bd3ea3ae238bdfb4112afb068f0fab' }, h("nav", { key: 'db9045533c937a21efbc304286b5092f04243305', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eb917b1c926da1afdb46bd394dd8b9c8c8ffa61e', class: "top" }), h("div", { key: 'cf6bbcdfc49a0d74801a526cbc90adb45540845f', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '68e1850c9b52d150b6e4d62fefd5c6dcac8729cc' }, h("duet-logo", { key: '403fb778a1ab49bca29520ca8ed3e29a7608036c', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '66972c33fef9180083b6823f0eb2e6249df46a42', class: "list center", role: "list" }, h("div", { key: '5b141c33b3b4e7bf836bba115e06f6657e4d2d9e', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'a31a813255f7e37f17734297331b69db14d84ac2', name: "center" }), h("div", { key: '0380979146e17aa48f702e5b333465591b7a7d32', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '425ef8602860673db531601f0518859444eabe8b', class: "list right", role: "list" }, h("slot", { key: 'c9f71431b68616e5f53b695322da1918e64779de', name: "right" }))), h("div", { key: '2acd626dc57ba7286fc5112c54d1bb137bb8b700', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '576b5b70223b4d2a3c3fe0d51b6463381ed02fd0', class: "top" }), h("div", { key: '3ea0281105040d3c08cad1f21d6da1b8a5fdb414', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '9705c47b5abafad8fca9cda63fc6210a6aa3db8d' }, h("duet-logo", { key: '75eeb4e66ec2fa1474406b004082ef0397daface', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '2cd20b518c5f8ece27f1038a476d467b6a319563', class: "list center", role: "list" }, h("div", { key: '6306281ddee87b21b54998ceaa9d00452fdd207d', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '2bed6d063a3826b81a1f2e94562e4441ed26fa5c', name: "center" }), h("div", { key: '9ed25492a82ceafafca374e2466d86d3b6491acb', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b1cfd7cdd4cfd0450fe01ec99ede3e9860ac365c', class: "list right", role: "list" }, h("slot", { key: '6e9e1132485a765842ef8c99fc98dadf0b11bc63', name: "right" }))), h("div", { key: '168346a69638fbc80bcd180c0582aa167a84bb2e', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ffc0fed54b5acda7a76211091c8c502a8c888937', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '10bd0d58fcd801865270e6c4ad8afdd11b239ca8', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '7ede8c9b9c82a2c6bcdcfc416f3794834ab77293', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '6910d36f8ae066a551ca0143b2f34ec38775dfdb', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '0351584d8f7f2a8341daf1423e8f199af10ab67f', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '804d1535f44a67308422421bd17efd7c22dd5717' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '0e45ee09f68a3aac1f440e01ace151783be7c120', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '1a0b04b92ffc25cf50f594a50d02be255f24aeba' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a98baab0fb21943f681bd83c2040bdb1f5d5e464', role: "listitem" }, h("div", { key: '79f52e00b692d398484940f70bd44de78ee5a2a7', class: {
+        return (h(Host, { key: '30ea5bdc409a19c4f606a08a851fc3a91f636e87', role: "listitem" }, h("div", { key: '60eacea3711c3398f19bb391127b0a3742f6c779', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'fb48e17e2995b4f5e057583339d0fc0149b43375', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '87b94f39ed7bbbf01ec425ccadb044d64d797c59', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '5a91dcf8a6a2e2289b9b63680233bfa6dc4e0529', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4ddf5b0d1fd321a4fa02a73122bd28f88f47f527', class: "label" }, h("slot", { key: 'd79067be6dacc22b8b9e9515d4bb019721b6a2c8', name: "label" }), h("duet-icon", { key: '24396bac267909220e577ed663f8d34468919858', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '514af91b0f0396842a5ede32137ff76a9e31bf40', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '5d1abdaafbd7e5b1bb75e46863f7d178799ee757', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'a1d04c25159935646c9613c3f59d176af8a3ee3d', class: "label" }, h("slot", { key: '48e78d6657df24ad22b495d244702169de00cfda', name: "label" }), h("duet-icon", { key: '5577398b8bd80946812d5f3a816684707852337d', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '14071561dd61cdc2e5d918323587f4d30674d2dc', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'ecd8ef50dbbf9206540a5cb908a8b37e0e60f14a' })))));
+            } }, h("slot", { key: 'c42c206ba4b3c97f6dcd92c72a1cffc13d57834c' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dff3e65bfa27e226d174dbf7fdb57c067bcb24f2' }, h("a", { key: 'c90358c20ce27776461c970e68048427cc2503c8', class: {
+        return (h(Host, { key: 'fe377ce2b21f3ec7de8c6db577d706ed4e9e8745' }, h("a", { key: '583c2614e636104b1b2ff40c597e127550be5f5e', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '52930cb9d1151120fa0191844d65f06a8f5f6319', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '616f450950804fb9a72a010436eb1d7ec4ad02c2' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '147d4e4ca57001748a3adf41757770577efb3113', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '3b471e970dfa2dbb5054245bd0c459860a629c91' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '46e23a090bd69731fad23bb7d815fe07949961f1', role: "listitem" }, h(TagName, { key: 'fd2f0cd2b271a5030924b17a318d91ef5f375b26', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '9a4fa3850a59a9e92ed6453f83ba66510ba98eed', role: "listitem" }, h(TagName, { key: '89b1d29049ab6f5a5cde267a3ff6488c1fc9ee6f', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c5f65e90e67f40726dbd1ad1fcecc275b792fcea', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b9846826ebc0c12f36548a00d1e4156507136f91' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4d20597bf6e7a17b841c08f429ca64820a01198a', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '4c323e8083d3dabfa32c7ad10d5cef783c25b50e', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '2cdf47895c4330542078da87b401ca6e51467c6c' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'e0c912d7168f8ae6072f5329d3d451da30adf4db', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'efb7d0aed76d4f7da05e21e41d92c63465308df6', role: "listitem" }, h("a", { key: 'ed248ea08e7b2be2dafa2617b9b18935ff6aa583', class: {
+        return (h(Host, { key: '944fc042969f5fb1c958f2e2b3c3b90cf4ed09e8', role: "listitem" }, h("a", { key: '8a379484694ccdd6eac62c98606b3d0410fd012f', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'cb0bb182c2620d4dd5d0484731f8f7ecca86d7bc', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '686e67b70d05cadb8fa67ed044524dce04e841ff' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '6cb57d184b32ccf2d88b480cf6e14febee77d8bd', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'be23134b984610bea7ed18384aad517712760e84' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }