@duetds/components 9.19.1 → 9.20.0

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

@@ -5,6 +5,7 @@ import { spaceXSmall } from "@duetds/tokens";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { getLanguage } from "../../utils/language-utils";
@@ -27,8 +28,7 @@ export class DuetPopupMenu {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 if (this.controllerIcon) {
                     button.setAttribute("trailing-icon", "action-arrow-down-small");
                 }
@@ -254,13 +254,13 @@ export class DuetPopupMenu {
         if (!!newValue === !!oldValue) {
             return;
         }
+        if (this.openButton) {
+            setOpenerExpanded(this.openButton, this.open);
+        }
         if (this.open && !oldValue) {
             const autoUpdateConfig = {
                 ancestorScroll: !this.forcePlacement,
             };
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
             if (this.accessibleRole !== "listbox") {
                 this.teleport.makeSiblingsInert();
             }
@@ -281,9 +281,6 @@ export class DuetPopupMenu {
             }, 200);
         }
         else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
             // Clean up autoUpdate when closed
             if (this.autoUpdateCleanup) {
                 this.autoUpdateCleanup();
@@ -355,17 +352,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '8162bd3dcf089f1fbd0890ba90752b8375845e02' }, h("div", { key: 'a960165406ca70e48975935be91407e196af3acb', ref: element => {
+        return (h(Host, { key: '4492ab7c249dc54ff4351d7307705dbda42197df' }, h("div", { key: '440058efaafdc50cf0e8dc6aff3b00ac4e446d1b', 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 }, this.showFilterInput && (h("div", { key: '41ff2d5c37e1b82432abe9ae940120c4f27c2de7' }, h("duet-input", { key: 'aeeebdf64aa13db39dc6bb49e9a33a9eddf71171', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '22bffb507bc56003ed6df5c58255bba01938e985' }, h("span", { key: '2720b44f182bd5590999b37d4ac9157bf3d72a1c', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '625ca4c7f0d8daaddfac0b399637af6604bd8744' }, h("duet-input", { key: 'd046c9db74fa05e4f753105b201f731c56846716', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'a7774edb80cd2e8ceb1ea422db22ef4253a8e3cc' }, h("span", { key: 'a83bd1d5d6468c2d93aef69c2b175a2c28722593', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: 'ab6b1d79410935e50a5c6a15fc5f66d141ee5590', size: "xx-small" }))), h("slot", { key: '6265f5a9f3cde710961b4e815da45501016f4056' }))));
+                `)), h("duet-spacer", { key: 'd60bc86becbbc4d00aef492cd84df10e820e80b5', size: "xx-small" }))), h("slot", { key: 'f8959e360869e9aa3c0c67227f851b8272faf5ca' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -472,17 +469,17 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",
@@ -510,17 +507,17 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",

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

@@ -67,6 +67,25 @@ export class DuetScrollable {
     disconnectedCallback() {
         this.resizeObserver.disconnect();
     }
+    /**
+     * Scrolls the scrollable so that the desired item is visible
+     * @param itemIndex The first item is 1
+     */
+    async scrollToItem(itemIndex) {
+        this.scrollToElement(itemIndex - 1, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the first item is visible
+     */
+    async scrollToStart() {
+        this.scrollToElement(0, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the last item is visible
+     */
+    async scrollToEnd() {
+        this.scrollToElement(this.getScrollPaneElements().length - 1, "center");
+    }
     /**
      * Private methods.
      */
@@ -142,7 +161,7 @@ export class DuetScrollable {
             this.scrollPaneAtStart = false;
         }
         // Round both values to handle sub-pixel precision issues
-        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const visibleContentWidth = Math.ceil(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
         const totalContentWidth = Math.round(container.scrollWidth);
         this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
@@ -228,18 +247,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3858f9356ec3ea38a7c475ce2d2fff6485827f82', class: {
+        return (h(Host, { key: '5dccde443367903cd786fcfddc57728395a7ea94', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'b142496c0e6686103983b537b53ccdc7e8cae7c0', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '1c6725c97fa1701963139257653a25377eace462', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '50d5f6266a0f0432cd1dd752a00260d5246890d3', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '5c05fd2e927df5ebd7b5c2cec3112013b58cec01', name: "collapse-button-label" })))), h("div", { key: '33f0efaf3fcc09241a9e75fa75b86ef093bc811f', class: {
+            } }, h("duet-button", { key: '848338c8377121539a2873ebb90b46e7d4929d4e', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '8792f3c6219b939e2a82bd04c01661c66cf58bc2', name: "collapse-button-label" })))), h("div", { key: '84dbb203e6d64d0ddc7b8359acc47125ef0407a1', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '6b0f1e40aa5c8406b448e93bcecb8343a0a883a3', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '313888e6a6a495b6b39feaafd17c437e82cb01a6', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -247,7 +266,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '77747e312df865dc66478dd32fcf87507bde8016' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '4a918b666f4c729953a1b2849cb05f9d6e2f9414' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -514,6 +533,68 @@ export class DuetScrollable {
             "childrenData": {}
         };
     }
+    static get methods() {
+        return {
+            "scrollToItem": {
+                "complexType": {
+                    "signature": "(itemIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemIndex",
+                            "type": "number",
+                            "docs": "The first item is 1"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the desired item is visible",
+                    "tags": [{
+                            "name": "param",
+                            "text": "itemIndex The first item is 1"
+                        }]
+                }
+            },
+            "scrollToStart": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the first item is visible",
+                    "tags": []
+                }
+            },
+            "scrollToEnd": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the last item is visible",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

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

@@ -36,9 +36,6 @@ export class DuetSelect {
         /**
          * Component event handling.
          */
-        this.onClick = (ev) => {
-            ev.stopPropagation();
-        };
         this.onChange = () => {
             this.value = this.nativeSelect.value;
             this.duetChange.emit({
@@ -153,7 +150,7 @@ export class DuetSelect {
             return;
         }
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { onClick: this.onClick, class: {
+        return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,

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

@@ -4,6 +4,7 @@
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
@@ -39,8 +40,7 @@ export class DuetSlideout {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 this.openButton = button;
                 if (addClickListener && !this.disconnectController.signal.aborted) {
                     this.eventListenerController = new AbortController();
@@ -162,7 +162,7 @@ export class DuetSlideout {
         }
         if (this.open && !oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
+                setOpenerExpanded(this.openButton, true);
             }
             const openPanel = this.getOpenPanel();
             this.teleport.makeSiblingsInert();
@@ -180,7 +180,7 @@ export class DuetSlideout {
         }
         else if (!this.open && oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
+                setOpenerExpanded(this.openButton, false);
             }
             setTimeout(() => {
                 focusElement(this.openButton);
@@ -260,17 +260,17 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '092ff7252a26d276ee0925def1cb985c4963f9f9' }, h("div", { key: '4798e60685324dc1d96b79ed05d847531821734e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6af2c640de7f635373f2f795e4adeebc4432fc87', visible: this.open, zIndex: "600" }), h("div", { key: '6613f55b6e61baa05833e225741427abc9c810bb', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'b6d5fbef33d10b2f6425a6e78f0a2de036e3f512' }, h("div", { key: '3428a6a963aa1ec4e80ce92d0e219147bcbb8089', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'e7c11ca4c68d822139264b42d42510f6af415dfb', visible: this.open, zIndex: "600" }), h("div", { key: 'c7c1e081b83239d39798ead2aa9ece13da5034dc', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: 'a3f4bdaa53dc0db03844bb7eb22ebf24bf13ca97', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '6c3bba7ea6a524a33602790a253c4599ee9ffe82', moveFocusTo: this.closeButton }), h("div", { key: 'e9a35def109c643bffbb6d7f7eee307a6471aa19', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e215b3ee0f16a373fac057cacbf54270167746d6', class: "top" }, h("button", { key: '5e507c3a17569d380d1661c3b99fc226aa605666', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '20b4c13d074068a108d641d35774379c8a0e09c0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e1b6159ff375a7e954c2a08c7b83012bd0584efd', class: "sticky-header" }, h("slot", { key: '8da80f3f654ad32fc3dbd60f973cfc67a3f05395', name: "sticky-header" }))), h("div", { key: '9b937ee229143cbed731694b1fdaee6f3d901569', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '608049a68f332f656bf3bcb29e290d4f19914a88', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '4ab80b5539930e5ff9fb3aa64a1089617470b767', class: "sticky-header" }, h("slot", { key: '09f2868153936e9a0a094d5a2b96c3573e9d664f', name: "sticky-header" }))), h("div", { key: '9876bf2bf543d5352f95d3c15075f88abe1950d4', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '1c039519309719e4a4b71d13355c719af6755a77' })), h(FocusGuard, { key: 'bd10152d30a0ae84320b6dda7cf18833abf1f1dc', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '19aeb5952ae545f8c48a9f4b028f5112a7174959' })), h(FocusGuard, { key: 'f20a711142adf31a1822e1db1b10b9c464dc24ea', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -356,8 +356,8 @@ export class DuetSlideout {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -390,8 +390,8 @@ export class DuetSlideout {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",

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

@@ -133,6 +133,9 @@ duet-tooltip,
 .duet-theme-turva.has-error .duet-textarea {
   border-color: rgb(214, 28, 82) !important;
 }
+.duet-textarea[rows] {
+  min-height: auto;
+}
 .duet-textarea::-webkit-input-placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;

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

@@ -126,6 +126,7 @@ export class DuetTextarea {
         this.placeholder = undefined;
         this.caption = undefined;
         this.echoPlaceholder = false;
+        this.rows = undefined;
         this.maxlength = undefined;
         this.minlength = undefined;
         this.error = "";
@@ -201,7 +202,7 @@ export class DuetTextarea {
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -684,6 +685,25 @@ export class DuetTextarea {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rows attribute for the contained native textarea element. If set, overrides the default style's minheight."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false
+            },
             "maxlength": {
                 "type": "number",
                 "mutable": false,

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -182,4 +182,10 @@
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active,
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
   background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  color: rgb(255, 255, 255);
 }

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

@@ -129,16 +129,34 @@
   color: rgb(23, 42, 59);
   background: transparent;
 }
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover {
   color: rgb(23, 42, 59);
   background: rgb(253, 247, 242);
 }
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva {
   color: rgb(23, 42, 59);
 }
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva::after {
   background: rgb(230, 23, 64);
 }

package/lib/collection/utils/a11y-utils.js

@@ -18,3 +18,23 @@ export function getAccessibleLinkLabel(component) {
     }
     return null;
 }
+/**
+ * An element that controls open/close state of a Duet component can itself be either a Duet component or an HTML element,
+ * this helper handles the setting of the relevant attributes accordingly.
+ *
+ * @param el Duet component or HTML element that is used for controlling the popup
+ * @param expanded is the controlled element open
+ * @param popup The type of the popup, defaults to "true" which equals to "menu"
+ */
+export function setOpenerExpanded(el, expanded, popup = "true") {
+    const isDuetComponent = el.tagName.toLowerCase().startsWith("duet-");
+    if (isDuetComponent) {
+        const comp = el;
+        comp.accessiblePopup = popup;
+        comp.accessibleExpanded = expanded;
+    }
+    else {
+        el.setAttribute("aria-haspopup", popup);
+        el.ariaExpanded = String(!!expanded);
+    }
+}

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-1385415a.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-9ff3d312.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-2967d610.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-05128e11.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-cb129f84.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-32b35eb2.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-f5035d0a.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-5a5372db.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { h } from './p-993aea39.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-fe478fac.js';
 import { p as parsePossibleJSON } from './p-9c3c64b9.js';
 import { g as getColorByName, p as postfixTheme } from './p-856c21c2.js';
-import { d as defineCustomElement$3 } from './p-b978a5e4.js';
-import { d as defineCustomElement$2 } from './p-9dd5b1ab.js';
+import { d as defineCustomElement$3 } from './p-575b998e.js';
+import { d as defineCustomElement$2 } from './p-515dedd9.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,
@@ -17,7 +17,7 @@ const DuetPicture = ({ img, sources }) => {
         h("img", Object.assign({}, img))));
 };
 
-const duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  margin-right: 36px !important;\n  margin-bottom: 36px !important;\n  display: flex;\n  justify-content: center;\n  width: auto;\n  container: duet-banner-container;\n  container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n  margin-right: 0 !important;\n}\n[alignment=form-distribute] > :host:last-of-type:not(:last-child) {\n  margin-right: 36px !important;\n}\n\n:host(.duet-m-0) {\n  margin: 0 !important;\n}\n\n.duet-banner {\n  display: grid;\n  grid-template-rows: min-content 1fr;\n  width: 100%;\n  height: 100%;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  text-align: left;\n  border-radius: 16px;\n}\n.duet-banner.duet-p-0 {\n  padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n  margin: 0 !important;\n}\n.duet-banner .visual {\n  position: relative;\n  display: none;\n  overflow: hidden;\n}\n@container duet-banner-container (min-width: 0) {\n  .duet-banner .visual {\n    display: block;\n  }\n}\n.duet-banner .visual .image-container {\n  position: relative;\n  aspect-ratio: 2/1;\n  overflow: hidden;\n}\n.duet-banner .visual .image {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n.duet-banner .visual .icon {\n  position: absolute;\n}\n.duet-banner .visual .brand-shape {\n  position: absolute;\n  top: 0;\n  left: 72%;\n  display: none;\n  width: 100%;\n  height: 100%;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n  transform: scale(101%);\n}\n.duet-banner .content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n  hyphens: auto;\n}\n.duet-banner .action {\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-top: 16px;\n}\n.duet-banner .visual {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n  width: 100%;\n  height: auto;\n  border-radius: 0;\n}\n.duet-banner .visual .icon {\n  bottom: 30px;\n  left: 15px;\n}\n.duet-banner.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n  mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-medium .visual, .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-medium .visual .image-container, .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .image, .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {\n    top: 36px;\n    left: 168px;\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-medium .content, .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 28px 28px 28px 0;\n  }\n  .duet-banner.size-medium .action, .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n@container duet-banner-container (min-width: 586px) {\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    left: 80%;\n  }\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner.size-large {\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .icon {\n    top: 40px;\n    bottom: auto;\n    left: 335px;\n  }\n  .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 48px 48px 48px 0;\n  }\n  .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n.duet-banner.no-image {\n  display: flex;\n  justify-content: center;\n  padding: 36px 20px;\n}\n.duet-banner.no-image .visual {\n  display: none;\n}\n.duet-banner.no-image .content {\n  width: 100%;\n  max-width: 720px;\n  padding: 0;\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n    padding: 48px;\n  }\n}\n\n:host(.duet-theme-turva2) .duet-banner {\n  border-radius: 12px;\n}\n:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A\");\n  mask-repeat: no-repeat;\n  mask-position: bottom;\n  mask-size: contain;\n}\n:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n@container duet-banner-container (min-width: 486px) {\n  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {\n    grid-template-columns: 1fr 1fr;\n    gap: 28px;\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {\n    padding: 20px;\n    padding-right: 0;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {\n    display: none;\n  }\n}";
+const duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  margin-right: 36px !important;\n  margin-bottom: 36px !important;\n  display: flex;\n  justify-content: center;\n  width: auto;\n  container: duet-banner-container;\n  container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n  margin-right: 0 !important;\n}\n[alignment=form-distribute] > :host:last-of-type:not(:last-child) {\n  margin-right: 36px !important;\n}\n\n:host(.duet-m-0) {\n  margin: 0 !important;\n}\n\n.duet-banner {\n  display: grid;\n  grid-template-rows: min-content 1fr;\n  width: 100%;\n  height: 100%;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  text-align: left;\n  border-radius: 16px;\n}\n.duet-banner.duet-p-0 {\n  padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n  margin: 0 !important;\n}\n.duet-banner .visual {\n  position: relative;\n  display: none;\n  overflow: hidden;\n}\n@container duet-banner-container (min-width: 0) {\n  .duet-banner .visual {\n    display: block;\n  }\n}\n.duet-banner .visual .image-container {\n  position: relative;\n  aspect-ratio: 2/1;\n  overflow: hidden;\n}\n.duet-banner .visual .image {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n.duet-banner .visual .icon {\n  position: absolute;\n}\n.duet-banner .visual .brand-shape {\n  position: absolute;\n  top: 0;\n  left: 72%;\n  display: none;\n  width: 100%;\n  height: 100%;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n  transform: scale(101%);\n}\n.duet-banner .content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n  hyphens: auto;\n}\n.duet-banner .action {\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-top: 16px;\n}\n.duet-banner .visual {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n  width: 100%;\n  height: auto;\n  border-radius: 0;\n}\n.duet-banner .visual .icon {\n  bottom: 30px;\n  left: 15px;\n}\n.duet-banner.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n  mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-medium .visual, .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-medium .visual .image-container, .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .image, .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {\n    top: 36px;\n    left: 168px;\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-medium .content, .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 28px 28px 28px 0;\n  }\n  .duet-banner.size-medium .action, .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n@container duet-banner-container (min-width: 586px) {\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    left: 80%;\n  }\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner.size-large {\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .icon {\n    top: 40px;\n    bottom: auto;\n    left: 335px;\n  }\n  .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 48px 48px 48px 0;\n  }\n  .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n.duet-banner.no-image {\n  display: flex;\n  justify-content: center;\n  padding: 36px 20px;\n}\n.duet-banner.no-image .visual {\n  display: none;\n}\n.duet-banner.no-image .content {\n  width: 100%;\n  max-width: 720px;\n  padding: 0;\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n    padding: 48px;\n  }\n}\n\n:host(.duet-theme-turva2) .duet-banner {\n  border-radius: 12px;\n}\n:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A\");\n  mask-repeat: no-repeat;\n  mask-position: bottom;\n  mask-size: contain;\n  scale: 101%;\n}\n:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n@container duet-banner-container (min-width: 486px) {\n  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {\n    grid-template-columns: 1fr 1fr;\n    gap: 28px;\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {\n    padding: 20px;\n    padding-right: 0;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {\n    display: none;\n  }\n}";
 const DuetBannerStyle0 = duetBannerCss;
 
 const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f5035d0a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-5a5372db.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { d as defineCustomElement$3 } from './p-9dd5b1ab.js';
-import { d as defineCustomElement$2 } from './p-cee4b98f.js';
+import { d as defineCustomElement$3 } from './p-515dedd9.js';
+import { d as defineCustomElement$2 } from './p-9cc4be6b.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f5035d0a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-5a5372db.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { g as getLocaleString } from './p-d9b2e80e.js';
 import { g as getColorByName } from './p-856c21c2.js';

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-f7d27c78.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-7fae118b.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;