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

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

@@ -433,7 +433,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        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: {
+        return (h(Host, { key: '6c1d94f9d544b1fdec23f6993ea8856acb3ec25e', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '1c71f810fadfda464bf37499ef37dd373f610534', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '1aeff156d8453ad8315d3e42af92f095ca7f6328', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -447,7 +447,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, 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: {
+            } }, h("div", { key: 'a2a51d7bc74afa312058cabb51f94da42f54fc46', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7859061ce09bb88f1bee4b275a23b05c968b06fd', 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: '90608b6e873b5ccbda49563f4a04eef3e96ab48d', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'c77595ab15425b05c43c1bd4787f6088ef2e7499', name: "tooltip" })), this.caption && (h("duet-caption", { key: '07107c13f7f6269abdf11207be8ba7ce093c735b', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '711e8416c4f16e82aa3efcecf68f9d7fa1cbb384', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '4a0c67e4968b454c6cc339ae816d8c3eb2142861', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '5c6bc95cfc7149aba9245c5f58e558a6831081d8', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '3a70569af48c892b197d5dae77254074120bc185', 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",
@@ -455,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: '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: {
+            }, 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: '0377efc4c565c66f5c14cb741f8ccb3e2545221a', class: "duet-input-icon" }, h("duet-icon", { key: '862ec3d70162837ad3c72e1c648176c1dc771d36', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '4bbb87e3df3d533e086c2e5b0614e7a5fd1498df', 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: '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
+            } }, h("button", { key: '08ead94af1665bdbd5f5ef366b29bba89d7df0c6', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f7a0d73ec05dfd4f0b1bdbd097f6637b18f6c62f', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '555da51b2ccc71bfdc259ee3b80ef0cb550a2757', class: "duet-input-icon" }, h("duet-icon", { key: '4e61179d3006a21c36518b34a198f1ebbcd4ba65', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '1fa648c46fd4dd1929185f0a0216e91724dd234f', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'ba539f81b4de281f1f548f858144120a308b7f27', 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: '23d4b1ae14b4a0c21c4fbde49023db0d6413ee73' }, h("span", { key: '9891ed43653dfa4c27457299fb1f3bbc3c248943', "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: 'f2b57b97cb3de186e3e7cc8fcff5bff2aa0c50f7' }, h("span", { key: '44280ae6250bd248ef4bc32ee3fda8adafb0b922', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : 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)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '37f27ffb2c201fef8f4058dabf29734c1fb596c6' })), h("span", { key: '87b22ac00aca098cc5e076850ca390e29cc022c9', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '961a7bdca67b47c2d4f694095fb9fe6edde487f7', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -153,6 +153,20 @@ button {
 .block .block__icon {
   display: flex;
 }
+.block .block__icon duet-icon {
+  width: 16px;
+  height: 16px;
+}
+.block .block__icon duet-icon.icon-responsive {
+  width: 30px;
+  height: 30px;
+}
+@media (max-width: 22.5em) {
+  .block .block__icon duet-icon.icon-responsive {
+    width: 24px;
+    height: 24px;
+  }
+}
 .block .block__content {
   position: relative;
   bottom: 2px;
@@ -167,6 +181,22 @@ button {
   transform: translateX(4px);
 }
 
+.duet-link.button:not(.duet-link-has-icon-background) .icon-wrap duet-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.duet-link.button.duet-link-has-icon-background .icon-wrap duet-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 48em) {
+  .duet-link.button.duet-link-has-icon-background .icon-wrap duet-icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .duet-link.button,
 .duet-link.card {
   display: flex;
@@ -203,6 +233,18 @@ button {
   align-items: center;
   justify-content: center;
 }
+.duet-link.button .icon-wrap duet-icon,
+.duet-link.card .icon-wrap duet-icon {
+  width: 24px;
+  height: 24px;
+}
+@media (min-width: 48em) {
+  .duet-link.button .icon-wrap duet-icon,
+  .duet-link.card .icon-wrap duet-icon {
+    width: 30px;
+    height: 30px;
+  }
+}
 .duet-link.button.duet-link-has-icon-background,
 .duet-link.card.duet-link-has-icon-background {
   min-height: 60px;

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

@@ -10,7 +10,7 @@ import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "..
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { breakpointToToken, getColorByName } from "../../utils/token-utils";
+import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part duet-link-content - piercing selector for styling the link content wrapper
@@ -39,7 +39,6 @@ export class DuetLink {
         this.iconResponsive = false;
         this.margin = "auto";
         this.padding = "auto";
-        this.isSmallScreen = false;
         this.isMediumScreen = false;
     }
     /**
@@ -47,7 +46,6 @@ export class DuetLink {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.initMediaQuery();
         this.resolvedDownload = this.resolveDownload();
         // button variation renders a button element when no url is provided
         if (this.variation === "button" && this.url === "#") {
@@ -62,7 +60,6 @@ export class DuetLink {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        this.destroyMediaQuery();
     }
     /**
      * Sets focus on the specified `duet-link`. Use this method instead of the global
@@ -71,33 +68,6 @@ export class DuetLink {
     async setFocus(options) {
         this.nativeLink.focus(options);
     }
-    initMediaQuery() {
-        if (Build.isServer) {
-            return;
-        }
-        this.screenTestBound = this.screenTest.bind(this);
-        this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
-        this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
-        this.isSmallScreen = this.mediaQuerySmall.matches;
-        this.isMediumScreen = this.mediaQueryMedium.matches;
-        this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
-        this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
-    }
-    destroyMediaQuery() {
-        if (Build.isServer) {
-            return;
-        }
-        if (this.mediaQuerySmall) {
-            this.mediaQuerySmall.removeEventListener("change", this.screenTestBound);
-        }
-        if (this.mediaQueryMedium) {
-            this.mediaQueryMedium.removeEventListener("change", this.screenTestBound);
-        }
-    }
-    screenTest(event) {
-        this.isSmallScreen = event.matches;
-        this.isMediumScreen = event.matches;
-    }
     resolveDownload() {
         if (this.download === "") {
             return this.url.split("/").pop();
@@ -110,19 +80,13 @@ export class DuetLink {
         return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
             "background-color": getColorByName(this.iconBackground, this.theme),
         };
-        const iconSize = () => {
-            if (this.variation === "button") {
-                return this.iconBackground && this.isMediumScreen ? "medium" : "small";
-            }
-            return this.isMediumScreen ? "large" : "medium";
-        };
-        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: iconSize(), name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderContent() {
         switch (this.variation) {
@@ -142,10 +106,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '4daa11135671269c348f387b30b1252c5f12b2ee', class: {
+        return (h(Host, { key: 'abc49b84dd9a522c921d5447f1b2ec451a456f44', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '7e2c94f2a8695bd756e4efbb074f42614a342ca2', href: this.url, class: {
+            } }, h(Tag, { key: '24ecdb7c1b3bbb33f2cf612170574b06931574fc', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -671,7 +635,6 @@ export class DuetLink {
     }
     static get states() {
         return {
-            "isSmallScreen": {},
             "isMediumScreen": {}
         };
     }

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: '95db1eb8cfa0c88dad6a34ca300fd710a8f2d773', class: {
+        return (h(Host, { key: 'eb9ff2970967f44ffa2b7b6e2c5364d5e1ca9514', 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: '27457dbebf1c7f29cd87199d1044d1830e00e1f9' }, h("slot", { key: '6760928d435314ff885b768ab2f74917a7891a46', name: "label" })), h("dd", { key: '97ae930888f789b056413956ee6bc8240252d9c6' }, h("slot", { key: '9a1daf78702df7b6b000e8d10aa8a848058f38ca', name: "value" }))));
+            } }, h("dt", { key: 'ad7a453ca942b71da2961c6f369102c739bb1f5c' }, h("slot", { key: 'b697a80721b971d368b1a079f60dde00a821d236', name: "label" })), h("dd", { key: '2a7d656b698a301e35a9537587f4676302f101b5' }, h("slot", { key: '230ef1772d105ed50286c7dfbe2aac5f51ebffa6', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     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: '640df6e6807e77ded11a2793dac96c1783152ca6', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '1fb58e8bf4bc3c2b2d562f26527aa2e2ba048dcf', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: 'ea08eb1eddf43b131574bef0516845144bf00b7b', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'e156fc55985037a6ec644448c3f5c707c2aeac7e', 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: '81483d7b24188277fff27a75241baa455429c396', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'fb62d6b302940eead24c6abcce7bd63018285701' }))));
+            }, "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: 'afdafd0bbf7f48b10fe80db0ad1286b17ef60302', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '69d0a72d7e725db69165b4eed4e8f11de4a52429' }))));
     }
     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: '8b40cdb860995adb53e2af728a887e9b4708691a', role: "listitem" }, h("div", { key: '2f82e317fa1e0047cf4c39cc95f108bfc44a8f39', class: {
+        return (h(Host, { key: 'd71c83e01aa8580e0bd1eaabb91f3cca8734cc1b', role: "listitem" }, h("div", { key: '7d606d5d43394752e02f372c6c1bc2df44fbb977', 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: '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: {
+            } }, h("button", { key: '88715073efb8ef87d18ebcbd493eabf5f4b10da5', 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: '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: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'f70f97a8ba1769cc7eb214fa8c56f0fd526fd092', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4d2d51d01fa52e5ebeb1aebeedb80d32021938dd', class: "label" }, h("slot", { key: 'ca9b40f144b8a0480fc04c51b336a4df20e30e5d', name: "label" }), h("duet-icon", { key: 'bfca42219c5bd1c00604d68f6d3fe5b392e344ce', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '35cf265e22ea94935890b4029cfd757e6f2a70ff', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c73b647bb5890887f3de54d54a2858190c57e630' })))));
+            } }, h("slot", { key: '1aa83e543c586acb204c20e6762ffd98e6ad7d33' })))));
     }
     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: 'c965e7903be45582dba26411b6dafa610efee277' }, h("a", { key: '548353a242840f57bf155fa2acef059db4b99037', class: {
+        return (h(Host, { key: 'ed174973681522fe7f35b14edcf2e8782306e1bc' }, h("a", { key: '0be57e484e5dd38f3375d5387ed7ccfa5a88d0d2', 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: 'f67150954824158f3ddd8512ccbc759cac7eef98', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'd8f7e857839f68b0ed63d68d43093b42e8232a15' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '966909764e92b7255432320ae69566ec4373863f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '65e6a089fd9a1859ef86b3efc9487268c088b8dd' }))));
     }
     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: '76d2f9d042bc0e53b7cc18ec3392809ec28741ec', role: "listitem" }, h(TagName, { key: '610690beca56e7dad3a586a5e3dcfcd8371c8b97', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '8346b680f96a6c7fe3fca566391be07cdeede6cb', role: "listitem" }, h(TagName, { key: 'bbd5013aeca3b13a33853b090201f3680c1b4b5c', 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: '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: {
+            }, 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: '38d682ecc0709ecfd54ecb8d3e59beee23f76b65', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '0c6c8d102b7ef15a63b82d703f68688933791c8b' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'b5969ef13a137d3801d9f9fa1d6fd4cf4ac8a1b1', 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: 'e2fe10eefaa50b8a12212c834d5f518c9ad14917', role: "listitem" }, h("a", { key: '929e202f5253e131b76f99ebeb2ceb65c597cef1', class: {
+        return (h(Host, { key: '7b49e5fa6febb45032d34e0267d2c4f86fcdb929', role: "listitem" }, h("a", { key: '9a0bc708043462ecb37cddf3a332beb31a44f106', 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: '4670f1ffd76084d038e8b17dfac26a13fb793667', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '18c4355e146e6e752116f7df05bf265967a0606f' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '8d686c07c24a63b2effd37edcf12a283a2f303b8', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd17e247634ebfd380b813f7a4b520e925cf2e966' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '95a630a67e5b566bc05641ac7a676ed3ac63f5ee' }, h("div", { key: 'abcbac50ff4631707152e35779d9519a845a38b8', class: { container: true, sticky: this.sticky } }, h("slot", { key: '5f39c9e47f3897bd0c2911e40c71e6944aef19d6' }), h("slot", { key: 'd1c4f88457d7db9695701abbc982b1f589909871', name: "mobile" }), h("slot", { key: '810fa9cf8b03c900cd4923d2b8a3fc89f8c872af', name: "desktop" }))));
+        return (h(Host, { key: '94fa159d4668798827aae4cf880b4e201233cd5a' }, h("div", { key: '986b4d35264824461ed8d5eae8c758d85de958cc', class: { container: true, sticky: this.sticky } }, h("slot", { key: '808bb9c1d6b973959c0224e6b684a2cd32395b8c' }), h("slot", { key: '21d7bd71a8f482748d5edbea809896fa9f0d8ad6', name: "mobile" }), h("slot", { key: 'da07e3716e651f37be80fc1cc9d579cd3660f664', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '98ec72c6cce7947b7263eeb3f46e33e22a990877', role: "listitem", class: {
+        return (h("div", { key: '81e1a7dba20e71dd78f7cda67af1b134f8243a0d', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '3736a06027a73aa7ba30e0c4b8a120c6772c0c6f', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'ba330229b218d4e4b58d2078e62ef7fb8dd84755', class: "duet-notification-container" }, h("div", { key: 'b3e977745d175b1df1b238399d72822511cdbc2c', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '7899dd2e03bc72ff907719a515064f96c5a85a1f', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '120a6ec03a1e30297fb74201aec8842a95544cd6' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'a9cefa6b12b79148d75b238395613eb03b1cbdb8', class: "duet-notification-content" }, h("slot", { key: '227250fa90780100b094ef165074f2699daf3fee' })), h("div", { key: '8f8e56cf0596df33ebbb471fa7dc4297acd660aa', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'a11fdf578bb85562ad56774479b25b67e6d674cb', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'ffaec64c316d8b207e8981f3255eb19f256e6567', class: "duet-notification-container" }, h("div", { key: 'b9b9574f9349d045f6d6d2c7dfd1f81ae625cff7', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '1159695ff9d59ce3650e2e8c3cb7f897fa623a14', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '0d35c87007f9fab37c0680e701ed813c8d488c79' }, this.accessibleLabelUnread, ":")))), h("div", { key: '0514c0144473abb2de036c2d1e265bf7be71d490', class: "duet-notification-content" }, h("slot", { key: '936452a25c6eebd842e7cbe32ff2c7a7c3951462' })), h("div", { key: '633f3707f138963432acb2b330a9fe97bcbbc990', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,12 +35,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '9effa4b9be0ae8f00bf5d788432fda116d34b81d', class: {
+        return (h("div", { key: 'b53c67717148c6f485f7d48dc14f8d39ebbda285', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'c33fc9a029847d3625137fb1173cab7b55c1fdf4', class: "background" }, this.theme === "turva" && h("div", { key: '304c53b99ade8cb534bc65d5b7a2579584e3c185', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '632793449d119b5462f43410f643ffe62a9c01d0', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '58aed705c28aca08e7fcdf9edbd6a9281ca73c09', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '3b736388304bf35620ad364ddc957f500c0f097e', class: "brand-shaped-icon" }, h("duet-icon", { key: '3040e3c7deaba2c0c9670a6ec4c83b34d297f8ab', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'a7bd8c26779cfada416fc8f14db5c12ea8af90a0', class: "heading" }, h("slot", { key: 'd681185baeb0f2b731c3d89668862a20dae5ba6f', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '79e742c4b910b78046f2a3fec20cde71e1a652da' }, h("duet-spacer", { key: '12e3d41455301f3fdf04f432a1754c10112e4b33', size: "large" }), h("div", { key: '52cd3a295ebab421be2e543455af743f7040970f', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: 'd03242a40268ceda1ff92bbe42b312c91af0a42c', class: "background" }, this.theme === "turva" && h("div", { key: 'e669b810ab7a753605d49eb75128d612f99beef8', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '92231ecc80fba9f23adfd96d829f12f3b0c2d359', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '70ab0d49b94d16e51b438641ca442d3f2947b4c6', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '68333b604fe8d86e0cb17743116dcd49cc9cd0a6', class: "brand-shaped-icon" }, h("duet-icon", { key: 'f7c56b3f8301e2a4a8c04e3a3d1cac58ebdab555', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'd3615460a3616369013b7fbdea7420b53168d23e', class: "heading" }, h("slot", { key: '3aa89e5b3d7fd99df1effb42e6c314e3ae27cf85', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '4e7618ea83cb004ec62756e80365bde4038b99ea' }, h("duet-spacer", { key: '4b56573a6b1d7defa3acd2bd6aff10adea36e9f3', size: "large" }), h("div", { key: '4c3662b9c0f90bf4e09ba42e6b2ead138f5c6492', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -277,14 +277,14 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '28c5e0e22a1dbbf5ee9bf81e54b75ca0c7749eae' }, h("div", { key: '0317bf8bda1b57bd2bf509bb54b34209d81f79da', ref: element => {
+        return (h(Host, { key: 'c5d59c4859a8b66d3fdc725163b4163599c70a6f' }, h("div", { key: '376869b621cf3f1899ef6d1e9c1e913bb47fc83f', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '483a49bb29aac53e169c9b14432b8135c0e50b9d' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '7a5793c36e4103077f1e8165478b410a5068e4a0' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '9cbbef0f84fc9ea0995f4efc404887a3d7fcb2b7', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '9dd49ad5394f7da06b48728c697953383359411d', class: {
+        return (h(Host, { key: 'cf84dae7441eb54639e24b8cecefaed8387f60c4', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '76e71f258c2a4f15b26cb2954e6c48eb93e1bfeb', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'c2b5c8a5e4ef259545158bac573a4c8886b42bf4', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'c4454d6d77a763e9b218ef80e36612106b8f445e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '29407ebb77fb8476c8d809f4e79a3b1f358cf351', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'ac5d2e4aaef3010cf71bda6e27042f61fccb3729', class: "pre-heading" }, h("slot", { key: '33dead9d00d09fd214d33b3ee9f6845f56ca33d9', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8236efa41a9c1d6f467bb203cb26b6d49b7ea6a9', class: "heading" }, h("duet-heading", { key: 'fa5e03a97c417d2949e8733bf47922b855795e49', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'dd4ced53071aef1ff71c5f1fac916bf69626c45d' }, h("slot", { key: 'a0137eac1c27d9571776388d2dc119a9ac17e994', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '75b0fd24b1399ac5b24bbb8bcf4a9de3366c578a', class: "description" }, h("duet-paragraph", { key: 'cc88387c1d90099543510e6340dbac160cb55a49', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '02328a4e2f140346c6acbdb616fc3cfb6c06b7d7' }, h("slot", { key: '0f693c364072b59acb520ef2eeae2fcda3801415', name: "description" }))))), this.hasActionSlot && (h("div", { key: '66dd94ac45bd090224ce22454abfb822bca0c057', class: "action" }, h("slot", { key: 'b9906bef566f51030ef45a227f468139d67f8e5e', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'a621b3f1b8f675a0c7643b80268a1a1fae44634e', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'f81167006440e7d2849bca5b6998f56aef84270c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '0f57e628e3de81ba03a435591bb79f23765f3e0c', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '004cb19ae4521948a4f3c92efd7749fa2daa65a1', class: "pre-heading" }, h("slot", { key: '891ce96361f3291e64af70299a30cacaa6658305', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '32103b0e907ae34c0f79c49aa4f5a01a15ac622b', class: "heading" }, h("duet-heading", { key: '4d464e8fcfff685c8cff29b09d8b966f7060bc86', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'e75ab8c05ecaa5f16dce99bd818738385315cf5b' }, h("slot", { key: '0f21589923a3be27f2b9e7cd08ff10b87bdcbcbd', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '97bedc93d874049ff15560abac99d4de3617de6c', class: "description" }, h("duet-paragraph", { key: '869c2b82f2915641778bdb2c5f894d7069ac4600', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '55d9c3b34a7c538f6abaaf64268666f3d2fab6d9' }, h("slot", { key: '18fd004f6a5a6d7cd1410a5365de315027b8872d', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2f1dcdd2f0d8a45795c2ca89eedbde7803d27de8', class: "action" }, h("slot", { key: '0f123542154cd285f35d66b4a2ee5b19eaad98ef', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class DuetRadioGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3a6b38dcbedc3d7de4f597f08f5a1d2edb58a1d4', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: 'd0dbe02e0ea371acaa38f790f1d2e3e9dc0b196f', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'a34345c14c27c8700ea94229d874ab8e33338529', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '69c039a5f7cc4fcb98c5f7e625326bebbc10f75e', name: "tooltip" }), h("div", { key: '48e785f3dcf8e2ed2fc5b77847cc351dc0d3fcc6', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '4c2428af487971b847ca3e704a878719629003a4' })))));
+        return (h(Host, { key: '58915e6da750001fd46c97b2101776c6631fc02f', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '8b454dcd733beeea8c9cfb065fc3ea538d628882', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'c2a46c8277ab66b0e5c114465cfe12d4d2b9e8b3', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '3518ff371ea67b21be7abe499770fd0f1e0c7751', name: "tooltip" }), h("div", { key: '797c9eb9ed9fbfc2aeed8387737988edd97196e3', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'ee43ef03fa86da26eff0ee82ae7f828b4b486a88' })))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,6 +76,21 @@
   overflow: hidden;
   visibility: hidden;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
+  position: absolute;
+  top: 0;
+  z-index: 202;
+  width: auto;
+  height: 100%;
+  padding: 0 16px;
+  background-color: rgb(255, 255, 255);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left {
+  left: -10px;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right {
+  right: -10px;
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
   position: absolute;
   display: flex;
@@ -104,13 +119,35 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom {
   align-items: flex-end;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute {
+  padding: 0 7px;
+  border: 1px solid rgb(212, 223, 229);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left {
+  border-radius: 8px 0 0 8px;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right {
+  border-radius: 0 8px 8px 0;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(0, 119, 179);
+  border-width: 2px;
+  /* stylelint-disable */
+  /* too deep nesting */
+  /* stylelint-enable */
+}
+.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden] {
   display: none !important;
 }
+:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
-  gap: 20px;
   padding-right: 10px;
   padding-left: 10px;
   margin: 0 -10px;
@@ -139,6 +176,12 @@
 :host .duet-scrollable-items .duet-scrollable-list.collapsed {
   flex-wrap: wrap;
 }
+:host .duet-scrollable-items .duet-scrollable-list.gap-none {
+  gap: 0;
+}
+:host .duet-scrollable-items .duet-scrollable-list.gap-large {
+  gap: 20px;
+}
 :host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small {
   padding-top: 4px;
   padding-bottom: 4px;