@duetds/components 10.0.0-alpha.1 → 10.0.0-alpha.3

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

@@ -158,7 +158,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '0c4038b005e7b453195addcd524b72d6ba2b3f86', role: "region", class: {
+        return (h("div", { key: 'e94f90e20a29e2d621f86ee213f6c2243d162445', 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: '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, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'd2805e8c50587b1d9429e1fb547cd6bd3c2f0caa', class: "background-area" }, h("div", { key: 'c9a3b0cf5625a51b6aa1e1f6ed724af21f849843', class: "background-container" }, h("div", { key: 'b8b95accc3dc9da76f14f281dc2ab4bc02313342', class: "background" }, h("img", { key: '41740e87fe1763274cc824723be0a18fde8f913d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '324aca6d2bb6f53c9fdba4b3f47d43f354a3db9e', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'b31b3eb18d3a11bfbe0460ed69b8744732850bcd', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '97fc7ad7186b000694d126a1cb3689224c662fac', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '34a2a34d6ae23cdd9ff7b58359d63277c752c1d7', class: { background: true, [this.layout]: true } }, h("div", { key: 'fcd72c89b529c5fee2e7e8028fa190c7a915e79f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'cca68e8548c8cd174cc7cc8b7e63b2e53afb8aeb', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'd76e7b9ae4edc17cfe4fad1e251b84d5c85ba57a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '183d07b9496cd97c0876f38952e5a00eb38bb027', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '109ae295f586d933c705f0fd68483683a1bf1952', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '01aa5b4d12e7da5eaa9fa2e15dcba0d5ed2ca690', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'e2f95e5602e26bd54c22573cf774a128121a9f86', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '1d19d92c16528ed5d12db36fe10f7def13671929', class: "background-area" }, h("div", { key: 'b1226899172307df0f7dfeaae3ce2c085e92c029', class: "background" }, h("div", { key: '441d8603995a0733a541e29ad09e972d0cb15ba6', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f25ad10e9820803be974b2bcab9ae47b4548fb1c', class: "brand-shape" }), h("div", { key: '67daae3aa88aa2c7688d40fb2a01a31569043c1d', class: "brand-shaped-image" }, h("div", { key: '20e1761bbdcb1a8de0bb7ad849d89bb79274de29', class: "brand-shaped-image-wrapper" }, h("div", { key: '175dddd394e91859ed9acb84069a5f663de45784', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'e52f7ce7723142caca1199d63054b05aeb46b487', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c3c5e67c1673454493b6f87022b58fab436af214', class: "duet-hero-image-mask" }, h("div", { key: 'ccc3fada5d524e9b40252a8b4ae2eaa8fc83b2b4', class: "duet-hero-image-wrapper" }, h("div", { key: '8260b76e2982ce1ced990c617ed3eecaf6ebc02b', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'db59a2dc4d31b5d96938f5fe3388674c0c8e23a0', class: "duet-hero-back" }, h("duet-button", { key: '17b285351662cedc0ab18fb9c917456360c07875', 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: '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.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'cd47afcdd3ad0b29ab77e4a6607d67912b7ad622', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '146703fafb1fc4dc9ea2f2d2fa046e9c5f6a83ca', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '2bac2c1aaefc60820bc76520f0b29b3b48436c75', 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: '8b6cad2e6fca42922483e23dfca68f42d7089f5c', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '06038a734f66a0155cae26f98da0b4fcf2f9401a', 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: '6e179e7350e2c2507c1ff603b45e0b268da217ba', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", { key: '260ebb7f3ba965307c42633d1de47996c63171f1' }, h("slot", { key: '907759e2d96ebbb092071621861990327d37a9c2', name: "subheading" })))), this.description && (h("duet-paragraph", { key: '40dbf2c1f5b744b8e296ed56ff7510c144fa5e95', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '94d5c36f4e16c448afb625cab0aa6528b95f5fda', 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: 'e63f1c64ddd9bc34028ff6a4453664b523332d20', 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: '07a78ea1daea8738a89cd4d238a094e7f073aafa' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8891d77fc3cd9d49d6b087b6ff6a6b08e5836187', 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: '004ab35e7ed914486fbcd85ec53efe7bdc2b98ce', class: "duet-hero-image", style: styles }), h("slot", { key: '63d9b82445adb55bb89618092ed1e4178d6b8755', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '660cc6236529deef09e28fda903d13b7b46a82be', class: "duet-hero-image", style: styles }), h("slot", { key: '545f334b84334546dd98f2d1fa53f32f16858912', 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: 'bcc69839a12f0f324283e2ac3fcdcc0bf9f62f97', class: {
+        return (h(Host, { key: 'a83fc64820f4d8e3fa899c0d87db806507109ca6', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '7b11a7a766f0b472bea854c1f39971d73a499b9b', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'aeb374aef989718fc1af3b6013b29f7a0ab238f9', "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: '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 }))));
+            } }, h("span", { key: 'ff774fd041bbe256dddbb84db5a568d1ab4e9c80', "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.css

@@ -1,3 +1,71 @@
+.duet-internal-label {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 12px !important;
+  position: relative;
+  z-index: 100;
+  display: inline-flex;
+  width: auto;
+  margin-top: 8px !important;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 600 !important;
+  line-height: 1.25;
+  line-height: 1.25;
+  color: rgb(8, 42, 77);
+  text-align: left;
+  word-break: break-word;
+  cursor: default;
+}
+.duet-internal-label.duet-p-0 {
+  padding: 0 !important;
+}
+.duet-internal-label.duet-m-0 {
+  margin: 0 !important;
+}
+.duet-internal-label span {
+  font-size: 1rem;
+  font-weight: 600 !important;
+  word-break: break-word;
+}
+.duet-internal-label.duet-m-0 {
+  margin-bottom: 0 !important;
+}
+.duet-internal-label.duet-small-margin {
+  margin-top: 8px !important;
+  margin-bottom: 4px !important;
+}
+.duet-internal-label.duet-has-tooltip {
+  padding-right: 48px;
+}
+@media (min-width: 48em) {
+  .duet-internal-label.duet-has-tooltip {
+    padding-right: 0;
+  }
+}
+.duet-internal-label.duet-internal-label-small {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-internal-label-small span {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-weight-normal {
+  font-weight: 400 !important;
+}
+.duet-internal-label.duet-weight-normal span {
+  font-weight: 400 !important;
+}
+.duet-internal-label.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";
+  color: rgb(23, 28, 58);
+}
+
 *,
 *::after,
 *::before {
@@ -11,6 +79,15 @@
   appearance: none;
 }
 
+:host {
+  margin-right: 16px !important;
+}
+
+:host(:last-child),
+:host(:last-of-type) {
+  margin-right: 0 !important;
+}
+
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -20,7 +97,6 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
   width: 100%;
@@ -29,9 +105,6 @@
   text-align: left;
   vertical-align: bottom;
 }
-:host:last-child, :host:last-of-type {
-  margin-right: 0 !important;
-}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -205,10 +278,10 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
-.has-error .duet-input {
+.has-error .duet-input, .has-error .duet-input[disabled] {
   border-color: rgb(214, 28, 82) !important;
 }
-.has-error .duet-input + .duet-input-icon {
+.has-error .duet-input + .duet-input-icon, .has-error .duet-input[disabled] + .duet-input-icon {
   color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-input {
@@ -361,7 +434,7 @@ duet-caption:not(:last-of-type) {
   color: rgb(214, 28, 82);
 }
 
-.duet-label-hidden duet-label {
+.duet-label-hidden label {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -5,6 +5,7 @@ import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
@@ -432,7 +433,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        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: {
+        return (h(Host, { key: '27157f0e0ef781231dc53f62242c93dd77416fe3', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '0950770844044af41ffeb7f505312cf68dbc2fa6', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '0487bdedb2b60c45282063b1d0c4effeb6b79829', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -446,7 +447,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, 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: {
+            } }, h("div", { key: '40e554a5592ea303807714f476945a51d4cd0302', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '82145a5b72cfa13cce38d0e8af3e8d0f8aa7fab7', 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: '74e0e7af69d8365d2066b542eba340291b76a9ec', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '5ccfc047cab7357c2e6e55808ccf9f111be22276', name: "tooltip" })), this.caption && (h("duet-caption", { key: '160a25f13bd945f574883cc89b5b829082a18008', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cab2e63b8540c1fdf2e91547b340e2bc6e9c4031', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'f57924871c11446e290fbaace72833a2de1dbe44', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '5f06062a838de900d4375ff88cb41d81e9b10cb1', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: 'b609360af202b5553aad22388d27d3373044a9d6', 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",
@@ -454,16 +455,16 @@ 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", { 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: {
+            }, 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: '5a464779c56b22fa5e47864b08645a6000b9e367', class: "duet-input-icon" }, h("duet-icon", { key: '07c479f447dbc3e7c0c49fdf2aa96635afb428e3', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '7fa36d6ad59a8b190d640412faf6d57f50b60c7f', 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", { 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
+            } }, h("button", { key: 'dfd9300e5066f5954a1d9c2064442d6bda1c55c4', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '555bcd3e91c25634dcff7e6fe5943f03911aa9ad', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '2b55687e10eccff71ee6a9352374bbe6580a31fb', class: "duet-input-icon" }, h("duet-icon", { key: 'e2c67768dfdaac05944a056a7ada779c597dd296', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '2f973344b0c97c66d9b4ec434c40cbe2b63f7fde', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'a357be477c11b6b966bb15109feaaa7bd9a6381b', 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", { key: '902ec5a2c111186ed9cda34dcd1ad0d6666b74c7' }, h("span", { key: '1c94535e903e542ff97a52cb871e91d4ab244646', "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: '23d4b1ae14b4a0c21c4fbde49023db0d6413ee73' }, h("span", { key: '9891ed43653dfa4c27457299fb1f3bbc3c248943', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : 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)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '55200ed3023d68f4f7fbd8acaa523e5b616221f9' })), h("span", { key: '5172ad8b5d0544b20e7fd5d2a9ba37c4a8eb6aa5', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '97f1f28f046074d7a450b1b56b1af793d41a734d', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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: '90f647eba78b36ab1d85e0a560b038ffc21303a2', class: {
+        return (h(Host, { key: 'c4699088f31020eb2b8ed7d4ecef65514bc3d28d', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '1431a32d05c84c241a2d8c7159e612e609e2824c', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '60671d632fc27c596bdfcc7d615a48dc21f8b9a8', class: {
+            } }, h("div", { key: '075e7f223d3dda19f6f5ac9f29494eda8ffc7ff9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'f3127c1c4f7fefdce569c2c30c77d990a1b9e11d', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '5550861a3548f488f5626097295495e42f1da21b', class: "duet-layout-top-wrapper" }, h("slot", { key: '50d4f55c8a796813d02274f30346110262213a88', name: "top" })))), h("div", { key: '1225a8d5b7023bc36962ce3ac6def89d972435d1', class: {
+            } }, h("div", { key: '4954d9c1c200c323bf2b4906e862ede88190c025', class: "duet-layout-top-wrapper" }, h("slot", { key: 'e176f01c9d6662ee1bcfb0b9c6a0bc73b258abd6', name: "top" })))), h("div", { key: '85c1e1219c0745d92be32716169f2097a1051ac8', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, 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: {
+            } }, h("main", { key: '7c70810abab73c6419db8ee5c1271ba34e877892', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'd60f45fe444f1de3089fb2207d169cc0bbfb1d5c', name: "page-heading" }), h("slot", { key: 'cf79d7bd693259864500a1b9285b3bbc84c42326', name: "main" })), this.hasSidebar && (h("aside", { key: '8c2c2c6e31a690aa01f72a03f2f62c0929902e09', class: "duet-sidebar" }, h("div", { key: '3b846f204a5b322134649c2b822d3c7bdb03447b', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '9dd5da1cca1abfb7f3946c2e9b254f76f4edf609', name: "sidebar" }))))))));
+            } }, h("slot", { key: 'ea597d8559fa042256c715339923f3fc885d8e50', 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;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
 .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;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .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: 'e7cb6ea76d92ed46bca6c328a17e50755ea4c750', class: {
+        return (h(Host, { key: '4daa11135671269c348f387b30b1252c5f12b2ee', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'c6c6d30ed3774822aeae25f20e0bd227f71b397b', href: this.url, class: {
+            } }, h(Tag, { key: '7e2c94f2a8695bd756e4efbb074f42614a342ca2', 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: '2494b68d174f2bed0ca129e8970a12ccf09d3532', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '966205c93097469e4b0e1c92aa7e7f264a235ae3' })));
+        return (h("dl", { key: '0f63ce12f7d83722524fecc8e803c455f636d277', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'd8dc331b6707093063ae55cb8024fa723b7adbca' })));
     }
     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: 'b6d3629f682ab9c7962c63213a42d93633b7b5ae', class: {
+        return (h(Host, { key: '95db1eb8cfa0c88dad6a34ca300fd710a8f2d773', 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: '6fd5bb285e0657c6669dcd1aa45983655ae96e44' }, h("slot", { key: '3042541fb55b198c4f183ddcbd5d3a318f20c0f6', name: "label" })), h("dd", { key: 'd925ef59c712ea7ea6308c65ff10e8e2293202bb' }, h("slot", { key: 'e38113683d53d0a1a23f80c900784c148ade05de', name: "value" }))));
+            } }, h("dt", { key: '27457dbebf1c7f29cd87199d1044d1830e00e1f9' }, h("slot", { key: '6760928d435314ff885b768ab2f74917a7891a46', name: "label" })), h("dd", { key: '97ae930888f789b056413956ee6bc8240252d9c6' }, h("slot", { key: '9a1daf78702df7b6b000e8d10aa8a848058f38ca', 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: '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: {
+        return (h(Host, { key: '755522a4d8a0d79b25a402de924b39757c3eff92', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '03328ec8c5569b1f4203846cbbdc3014028a36ea', 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

@@ -153,14 +153,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '7424032f4fe4cf9e7391b652faddecf381ffd039' }, h("nav", { key: '8c3201741b36da474a2241e8ba5b3e1dfb53a61e', class: {
+        return (h(Host, { key: '879fc36781875cd6dea48e11839a85a185085dc0' }, h("nav", { key: '2ea40e5fc7e651f516d4f9edae5ac2f71fd4fee9', 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: '343657eeb7bbc89db0881a7bb0fe485bfcd6cdd6', class: "top" }), h("div", { key: '7252aede6443560c0dd9d9b1da3be093312468aa', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '95c2d74cb086c7ae350a20b2f10555ac8a9ccf18' }, h("duet-logo", { key: '00d5ca62ce150e05e4015f1597692ed9122303e0', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'd11a1fe47483eaa847dd6e1b33fe3f022182056f', class: "list center", role: "list" }, h("div", { key: '70d5324316868d9eac48fcf6f6519fce58f08411', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '3565b69ae8c95cbe9dcda578b6870cfcb680fa3e', name: "center" }), h("div", { key: 'ea2d3738b94bcfec575da5cb1e2896e152780f2c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'bc825dee9988ee497c9df9ef96a94c76d58e0de9', class: "list right", role: "list" }, h("slot", { key: '3ebc272f053762d22d0fb80bc22093edf171fffa', name: "right" }))), h("div", { key: '6ee303d3e34ebda33fefbd13d0b13ea0d43fbfa6', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'ff8cc7d764c170ddd58d7ed93375961a95db7e20', class: "top" }), h("div", { key: 'f1a58089bfde393327f4602887e2c3bb850f2344', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'f3ef014e2ea267d5b52553854490be997f13cf25' }, h("duet-logo", { key: '063b69ae891ce4cb9bc6960aa0f0a9dbeca46cb8', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '241a7083365bb7b039787e4f8debcd9185092057', class: "list center", role: "list" }, h("div", { key: 'e91f65554fe261b6eac8f2e27b1a38a41f26ad11', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '54aca3809af67d932ccde820be7575dceb6c422c', name: "center" }), h("div", { key: '89998cee04eba79bb73de1a494b5a6b87790276b', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'e949ddcfac19ccaf615fdcbc2ce2faacbf7b9a91', class: "list right", role: "list" }, h("slot", { key: 'c29da062d16c0070f56c034008c6cc911f6570b2', name: "right" }))), h("div", { key: '02cca0e6a68888052ccc9721adc8d8692b6f2841', 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: '7ede8c9b9c82a2c6bcdcfc416f3794834ab77293', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '6910d36f8ae066a551ca0143b2f34ec38775dfdb', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '640df6e6807e77ded11a2793dac96c1783152ca6', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '1fb58e8bf4bc3c2b2d562f26527aa2e2ba048dcf', 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: '0e45ee09f68a3aac1f440e01ace151783be7c120', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '1a0b04b92ffc25cf50f594a50d02be255f24aeba' }))));
+            }, "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: '81483d7b24188277fff27a75241baa455429c396', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'fb62d6b302940eead24c6abcce7bd63018285701' }))));
     }
     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: '30ea5bdc409a19c4f606a08a851fc3a91f636e87', role: "listitem" }, h("div", { key: '60eacea3711c3398f19bb391127b0a3742f6c779', class: {
+        return (h(Host, { key: '8b40cdb860995adb53e2af728a887e9b4708691a', role: "listitem" }, h("div", { key: '2f82e317fa1e0047cf4c39cc95f108bfc44a8f39', 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: '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: {
+            } }, h("button", { key: '1224e23b4a0ff1f364096bea12eb4f865444d1d8', 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: '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: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '2a4af8378e45ded016940bfc47fa885ce2df9ce7', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '1f04992d67aaae7bff60adbffc1b44ce51888e89', class: "label" }, h("slot", { key: '80a68b5b749449101c198271ea76e59ba299d36a', name: "label" }), h("duet-icon", { key: 'c52a29144937f583f2acdd6fa295c22f66e9bda7', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'e3585849f0b032094ebe1121f8923a4c6fab798b', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c42c206ba4b3c97f6dcd92c72a1cffc13d57834c' })))));
+            } }, h("slot", { key: 'c73b647bb5890887f3de54d54a2858190c57e630' })))));
     }
     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: 'fe377ce2b21f3ec7de8c6db577d706ed4e9e8745' }, h("a", { key: '583c2614e636104b1b2ff40c597e127550be5f5e', class: {
+        return (h(Host, { key: 'c965e7903be45582dba26411b6dafa610efee277' }, h("a", { key: '548353a242840f57bf155fa2acef059db4b99037', 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: '147d4e4ca57001748a3adf41757770577efb3113', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '3b471e970dfa2dbb5054245bd0c459860a629c91' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'f67150954824158f3ddd8512ccbc759cac7eef98', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'd8f7e857839f68b0ed63d68d43093b42e8232a15' }))));
     }
     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: '9a4fa3850a59a9e92ed6453f83ba66510ba98eed', role: "listitem" }, h(TagName, { key: '89b1d29049ab6f5a5cde267a3ff6488c1fc9ee6f', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '76d2f9d042bc0e53b7cc18ec3392809ec28741ec', role: "listitem" }, h(TagName, { key: '610690beca56e7dad3a586a5e3dcfcd8371c8b97', 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: '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: {
+            }, 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: '0c6ff2c355336b6ec6047c0974ed85b608021ead', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '0172426db559c60d93da9fcc61dc9ac9f2d84c50' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '91dff051070148a6f4f70aca4dcffe59b0f8f19f', 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: '944fc042969f5fb1c958f2e2b3c3b90cf4ed09e8', role: "listitem" }, h("a", { key: '8a379484694ccdd6eac62c98606b3d0410fd012f', class: {
+        return (h(Host, { key: 'e2fe10eefaa50b8a12212c834d5f518c9ad14917', role: "listitem" }, h("a", { key: '929e202f5253e131b76f99ebeb2ceb65c597cef1', 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: '6cb57d184b32ccf2d88b480cf6e14febee77d8bd', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'be23134b984610bea7ed18384aad517712760e84' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4670f1ffd76084d038e8b17dfac26a13fb793667', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '18c4355e146e6e752116f7df05bf265967a0606f' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,18 +249,18 @@ export class DuetModal {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '0a05dbaf283737a1f77b62ab112c88b353464350', class: "duet-modal-close" }, h("duet-button", { key: '3a87f9968b872763efed783e1014d1117f1d375f', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        const closingButton = (h("div", { key: 'e3680a1a39e49c693a42fc7fb9759bc668d40db6', class: "duet-modal-close" }, h("duet-button", { key: 'f83e0f5cb99b5a95989e6c142c12dd4abdccd4c5', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { key: 'c93f95ce929ec3c82786932e3d6a0fe5d82d3173', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        return (h("div", { key: '958d3dcd432c8954835f6cb522b2fe09bccafaa4', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '874d509e0e869ace4ec126dc6c4316f1618ac0d9', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'fe13b5967653c95bb6fc6087d048de8b0dddae5c', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'fbc2fc13d50311db1c8a0a4f2cc2803129eafe58', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '8a07986bcfc3448a09fef42541dbe3cfada8bdcb', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +271,18 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '97db4dc604168bf16f732f70233bea7b08bc3269', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: 'a0b9f37bf6628afa8f99e12a917d57eaeec54583', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'e238c81f94ffdef58ced08126a52e121e010c1ba' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'e6c7fe686edbee8d767ceb94c6c355b9de5f2932', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '9168f67fd2f8ede394df502d619287153224558e' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9f08ea38b797e2f08e90b844af00bc7520f74524', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '503f1759d8da05b03424f7cd4dc4fcbc1475b750', class: "duet-modal-header" }, h("span", { key: '4da34d236160f41ebebcbedf021756e2e7f16e7a', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'a4ec96d9dbce295980f9310f4e346b7db2b2ae1c', name: "top" })), this.icon && h("duet-icon", { key: '189ce6c874db5b0c63f6a4f99832467967660c36', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '1ea245199b5d0824fc099b8efd3c0c78a5685c46', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'b6445a691a50ba8c5c675e400b5452ffc8076df5', class: "duet-modal-spinner" }, h("duet-spinner", { key: '5931daa7f184bfe4639353d28004a6c940b36854', size: "large", color: "primary" }))), h("div", { key: '3fb83728c1ecb7aa1c1c5cebfb426322e57065eb', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '34cade5d14c9b734a6c330b9648a2d3d33cbe878' })))))));
+            } }, h("div", { key: '46de5037af55d3b54aea4f8a133aa3ed573c0599', class: "duet-modal-header" }, h("span", { key: 'ce17770a8dd4f97629729ab7823f9f7da02e5234', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b347be9693d36ac02bd0bbfb004c84fbe2a27b2f', name: "top" })), this.icon && h("duet-icon", { key: '4e60fc0b0a51d95dcc67841be4e780c5e71538e0', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '3749e6adf5b669773e1ecf50e989b8dceac017bd', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'ec5d5a5d428cc6cd4cb86c1c7ba9e34f0725a4c0', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'c4459171ed652867da2bcc125dcab78ba11aca07', size: "large", color: "primary" }))), h("div", { key: '4aa8b636aca91d1178fc3749a905d467c102461e', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '47bb63f76e7bb4ae0a4c765bc4fbd4f26a8b47f9' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }