@duetds/components 9.18.0 → 9.19.1

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

@@ -5,16 +5,15 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, formatNumber, getLocaleString, } from "../../utils/language-utils";
+import { debounce } from "../../utils/js-utils";
+import { getLanguage, formatNumber } from "../../utils/language-utils";
 import { checkNamedSlotElement } from "../../utils/slot-utils";
-const CharacterCount = ({ value, maxlength, label, theme }) => {
+const CharacterCount = ({ value, maxlength, theme }) => {
     if (maxlength == null) {
         return;
     }
     const length = value.length;
-    const remainder = Math.max(maxlength - length, 0); // ensure we never have negative numbers
-    const isApproachingLimit = remainder / maxlength <= 0.1; // <= 10% chars remaining
-    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
+    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
 };
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -30,11 +29,13 @@ export class DuetTextarea {
         this.labelId = createID("DuetLabel");
         this.errorId = createID("DuetError");
         this.characterCountId = createID("DuetCharacterCount");
+        this.visuallyHiddenCounterDebounceMS = 1000;
         this.disallowPatternRegex = null;
-        this.counterLabelDefaults = {
-            fi: "merkkiä jäljellä",
-            en: "characters remaining",
-            sv: "tecken kvar",
+        this.charactersRemainingLabel = {
+            // The comma in Finnish is to prevent use of partitive case for remaining
+            fi: "{remaining}, merkkiä jäljellä {max}{postfix}.",
+            en: "{remaining} characters remaining out of {max}.",
+            sv: "{remaining} tecken kvar av {max}.",
         };
         /**
          * Component event handling.
@@ -67,15 +68,23 @@ export class DuetTextarea {
             });
         };
         this.handleFocus = (ev) => {
-            if (this.counter) {
-                this.hiddenCounterLabel.textContent = `${formatNumber(Math.max(this.maxlength - this.value.length, 0))}/${formatNumber(this.maxlength)} ${this.counterLabel}`;
-            }
             this.duetFocus.emit({
                 originalEvent: ev,
                 value: this.value,
                 component: "duet-textarea",
             });
         };
+        /**
+         * When the character limit has been reached and key is pressed, switch the
+         * visually hidden label temprorily to empty so it is re-read.
+         */
+        this.handleKeyDown = () => {
+            var _a;
+            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.maxlength) {
+                this.visuallyHiddenCounterText = "";
+                setTimeout(() => this.updateVisuallyHiddenCounterText(), 10);
+            }
+        };
         this.getDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -87,11 +96,13 @@ export class DuetTextarea {
             if (this.error) {
                 describedBy.push(this.errorId);
             }
-            if (this.counter) {
+            if (this.counter && this.maxlength) {
                 describedBy.push(this.characterCountId);
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
+        this.language = getLanguage();
+        this.visuallyHiddenCounterText = undefined;
         this.margin = "auto";
         this.accessibleActiveDescendant = undefined;
         this.accessibleAutocomplete = undefined;
@@ -124,7 +135,7 @@ export class DuetTextarea {
         this.value = "";
         this.disallowPattern = null;
         this.counter = false;
-        this.counterLabel = getLocaleString(this.counterLabelDefaults);
+        this.counterLabel = "";
     }
     /**
      * This is a proxy for the enclosed native textarea's validity
@@ -132,6 +143,11 @@ export class DuetTextarea {
     get validity() {
         return this.nativeInput.validity;
     }
+    valueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            debounce(() => this.updateVisuallyHiddenCounterText(), this.visuallyHiddenCounterDebounceMS)();
+        }
+    }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
     }
@@ -142,19 +158,22 @@ export class DuetTextarea {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        this.updateVisuallyHiddenCounterText();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
     }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "counterLabel",
-            defaults: "counterLabelDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
+    updateVisuallyHiddenCounterText() {
+        var _a;
+        const remaining = formatNumber(Math.max(this.maxlength - (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0), 0));
+        // postfix is used only in Finnish
+        // with "a" for full hundreds or numbers ending with 2, 3, 6, or 8; with "ä" otherwise
+        const postfix = this.maxlength % 100 === 0 || [2, 3, 6, 8].includes(this.maxlength % 10) ? ":sta" : ":stä";
+        this.visuallyHiddenCounterText = this.charactersRemainingLabel[this.language]
+            .replace("{remaining}", remaining)
+            .replace("{max}", formatNumber(this.maxlength))
+            .replace("{postfix}", postfix);
     }
     /**
      * Sets focus on the specified `duet-textarea`. Use this method instead of the global
@@ -182,9 +201,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, 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, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
-                this.hiddenCounterLabel = el;
-            } })))));
+            } }, 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)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -884,19 +901,25 @@ export class DuetTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "fi: \"merkki\u00E4 j\u00E4ljell\u00E4\", en: \"characters remaining\", sv: \"tecken kvar\""
+                            "name": "deprecated",
+                            "text": ", the visually hidden counter label is no longer changeable"
                         }],
-                    "text": "Accessible label for character counter."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "counter-label",
                 "reflect": false,
-                "defaultValue": "getLocaleString(this.counterLabelDefaults)"
+                "defaultValue": "\"\""
             }
         };
     }
+    static get states() {
+        return {
+            "language": {},
+            "visuallyHiddenCounterText": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "duetInput",
@@ -1016,6 +1039,9 @@ export class DuetTextarea {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "valueChange"
+            }, {
                 "propName": "disallowPattern",
                 "methodName": "disallowedPatternChange"
             }];

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

@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'ef985ffd5d6ace34e338b68d717e0ff4ddfba289' }, h("nav", { key: 'e7ca6e1aaa3342e2422c4ad43e6a52162f1b181e', class: {
+        return (h(Host, { key: '1f30018caa1ed9d7f4d378a051fd8bbe333bc53e' }, h("nav", { key: '3d6ddc1b3da13b175f0a057802a09f1032e6ac06', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '3c0c92fc2fdd0b5736bc9c61951d4269b24580f8', class: "container" }, h("div", { key: 'f9f17a0ed80a2c530caf8537857dfc76d51c4a50', class: "list", role: "list" }, h("slot", { key: '22cd0173e2588e554cbb8ef035da5d875b28927b', name: "left" })), h("div", { key: '28483b4d1a73201f840eb08fcbf5be41250142a1', class: "list", role: "list" }, h("slot", { key: '97e0bad5bdb1951d56d8c0bb30d031e1d0404d6c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '621615924df868e74fc8c182def1f137a779a4d3', class: "container" }, h("div", { key: 'ffd68df78a9a03424dec5e9a9b2b8b60d8ac9096', class: "list", role: "list" }, h("slot", { key: 'b91e3fe5fd8f937542d0427bb2f01e0d9feccd90', name: "left" })), h("div", { key: '5cac1ab6c57c2640caaa4ec05a85437be418948f', class: "list", role: "list" }, h("slot", { key: '7d063c0c0c5116cd732ded57ddb5209db74c4300', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '4a794a46e3a85399537b5d0e754c96023b8965bb', role: "listitem" }, this.badge && h("duet-indicator", { key: '2b7fcc59e1a6085d01e352f4588c8ec1cd9d77f6', variation: "change" }), h(TagName, { key: '75faf7f2cc4771e483596c42d4dc1618dd17ccf0', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '3a144bb5536e58f8e8b23f5dcb8541a9a31ea19e', role: "listitem" }, this.badge && h("duet-indicator", { key: '4e8f369971750968bf875910d08a0ab048a369cf', variation: "change" }), h(TagName, { key: 'da2534aec8f4332bec906a8f11373b97e669a300', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, 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("div", { key: 'bcebd3cdca6ac2bd138ae887c0282bdb3a079313', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'b1fa628989fa3fe411e832a64b4db44fdebc9bca', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'cbbaa29928d65247ab5d5502e30939215845ebe3', class: "duet-toolbar-badge" }))), h("slot", { key: '584f63205dd40d32c2dec8ffcbc1c9395f7c1a7f' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'a5ebf0393700731a0962b7d7086f38253fd7af1b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '5336b5e76fd461dfa557864f105814f92451b6e9', 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("div", { key: '29ce6cf6c5163bb81f12c05f0a29a15ff1cf6937', class: "duet-toolbar-icon" }, h("duet-icon", { key: '2059b3a3f7ea4ad1b9b0cf24a15c4dfff8e8a81c', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '1c8c0c6d3efce259d7ddccf8a2f31a427de4f384', class: "duet-toolbar-badge" }))), h("slot", { key: '143b21daa933d9e82a450e4c169241c80eb8835c' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'de6ed399d3b12a2506684908dd72e4bd9034eb4a', class: "duet-toolbar-icon" }, h("duet-icon", { key: '85c8e5646ce7823eeb494953889efd205119f9f2', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'fe044a52349d31c7dfad3937841f29b50f90f282', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '4954069c44b11c22e712ce3de525e321de83d5b5', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

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-d84ceb08.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-1385415a.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-dcc8afe8.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-2967d610.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-d4245e15.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-cb129f84.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-d4904a7c.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-f5035d0a.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-c224f527.js';
-import { d as defineCustomElement$3 } from './p-958e3489.js';
-import { d as defineCustomElement$2 } from './p-af586c7d.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';
 
 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\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: 8px;\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: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@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}";
+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 DuetBannerStyle0 = duetBannerCss;
 
 const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
@@ -58,7 +58,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
         this.getBackgroundColor = () => {
             if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
                 if (this.isTurva2()) {
-                    return "#fdf7f2"; // turva-nude-00 - not yet available as token
+                    return getColorByName("turva-nude-50", this.theme);
                 }
                 else {
                     return getColorByName("gray-lighter", this.theme);
@@ -75,6 +75,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
         this.textColor = "secondary";
         this.size = "large";
         this.image = "";
+        this.imageAlt = undefined;
         this.sources = undefined;
         this.icon = "";
         this.headingLevel = "h2";
@@ -110,17 +111,23 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
             backgroundColor,
         };
         const pictureSource = {
-            img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: "lazy",
+                class: "image",
+                role: this.imageAlt ? undefined : "presentation",
+            },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h$1(Host, { key: 'c8e3140dea20791061866feb62588c5a5491f277', class: { "duet-m-0": this.margin === "none" } }, h$1("aside", { key: '7e6834ed607505ee35d026a71d3406280644856b', class: {
+        return (h$1(Host, { key: '38f57d004daf85f022fb1e8289a00d63dbe78a31', class: { "duet-m-0": this.margin === "none" } }, h$1("aside", { key: '0667b2510bdf502f24178e226897239cc0905843', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h$1("div", { key: 'fc4dc8649243b6a63368328de6eb4e50ed176a6b', class: "visual" }, h$1("div", { key: '37384ee4753623f1be3281d984a0bb838ed73f58', class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({ key: '20843c2967598ea78d178de08e35e9ac6b913e2d' }, pictureSource))), 1 > 2  , h$1("div", { key: 'c7a8ea6e28e80f6b10f37d3d9ae649e72362d59b', style: bannerStyles, class: "brand-shape" })), h$1("div", { key: '1cf3029099015dd0ff396e9f9c94075c3eb5b70f', class: "content" }, this.hasHeadingSlot && (h$1("div", { key: 'bd471f924ebdcd3a08f9aed0ac669f46188a5452', class: "heading" }, h$1("duet-heading", { key: 'f8a595ae3eb8a76b5f2ffb245912d8dea6221873', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h$1("span", { key: 'cc6134c267fdc0401198afdff0a75776f091db58' }, h$1("slot", { key: 'bdfc9e47dfe979c9355b99379533e81e36d55ac3', name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { key: '38b1971548ed44d7b5c02c5eb6feb85625880f09', class: "description", style: { color } }, h$1("slot", { key: '2b8ed684179262322589d0e8702f3bd823e7614f', name: "description" }))), this.hasActionSlot && (h$1("div", { key: '75e5f3ba7ef02266554854f6963e4c471ca0fa4f', class: "action" }, h$1("slot", { key: '1c9affe286d41ac0266758465f0d574591e38b2c', name: "action" })))))));
+            }, style: bannerStyles }, h$1("div", { key: 'b7266d2d9986afecfc9fa233950090500ac811b4', class: "visual" }, h$1("div", { key: 'a3b71e01ad58dd30a19413c2daad81fc0e5f617d', class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({ key: '8f687c33222c1f483c4354506729bd508c784f0f' }, pictureSource))), 1 > 2  , h$1("div", { key: 'cab35290e96c82eaee8605e89646a239de7396b0', style: bannerStyles, class: "brand-shape" })), h$1("div", { key: 'b05d73b8fa653e30db6e5310c017b2890ba0d572', class: "content" }, this.hasHeadingSlot && (h$1("div", { key: 'b5cb84dbabf050477d224f323b18b25d26e65a42', class: "heading" }, h$1("duet-heading", { key: '581d34f383f4679e06407583eadeacc0e2f651b4', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h$1("span", { key: '285c1d82691487108eb3e52c8df65eb495b803dc' }, h$1("slot", { key: 'ba3c94dfe9dfc6900d41fe31ecd716e4c08bbaaa', name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { key: 'f9d06d854f0dab9e11c1945436eca5757696818d', class: "description", style: { color } }, h$1("slot", { key: '72d05e038ee1a75f3c2ff6d353c0cc7891f00e06', name: "description" }))), this.hasActionSlot && (h$1("div", { key: '6f27c979244fd9093fbe55d3fb375f7b6c18711c', class: "action" }, h$1("slot", { key: '82532736b2e53a5020afc769526a0b824716cd66', name: "action" })))))));
     }
     get element() { return this; }
     static get style() { return DuetBannerStyle0; }
@@ -133,6 +140,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
         "textColor": [1, "text-color"],
         "size": [1025],
         "image": [1],
+        "imageAlt": [1, "image-alt"],
         "sources": [1],
         "icon": [1],
         "headingLevel": [1, "heading-level"],

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-d4904a7c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f5035d0a.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-af586c7d.js';
-import { d as defineCustomElement$2 } from './p-b21352e2.js';
+import { d as defineCustomElement$3 } from './p-9dd5b1ab.js';
+import { d as defineCustomElement$2 } from './p-cee4b98f.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,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d4904a7c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f5035d0a.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { g as getLocaleString } from './p-d9b2e80e.js';
-import { g as getColorByName } from './p-c224f527.js';
+import { g as getColorByName } from './p-856c21c2.js';
 
 const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;width:100%}::slotted(*){font-weight:400}::slotted(:last-child){font-weight:600}:host([variation=plain]) ::slotted(:last-child){font-weight:400}.duet-breadcrumbs{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px 0 20px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;align-items:center;justify-content:flex-start;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 75, 129)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(212, 223, 229)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(8, 42, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-breadcrumbs.plain .container{max-width:none;min-height:auto;margin:0}.duet-breadcrumbs.plain .list{padding:0}.duet-breadcrumbs.plain .bottom-border{display:none}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header{color:rgb(23, 42, 59);background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer{background:rgb(230, 23, 64)}";
 const DuetBreadcrumbsStyle0 = duetBreadcrumbsCss;

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-4343b5a1.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-f7d27c78.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d4904a7c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f5035d0a.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-fe478fac.js';
-import { d as defineCustomElement$2 } from './p-af586c7d.js';
+import { d as defineCustomElement$2 } from './p-9dd5b1ab.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}:host(.duet-theme-turva2) .duet-callout.duet-theme-turva .author,:host(.duet-theme-turva2) .duet-callout.duet-theme-turva blockquote{color:rgb(23, 42, 59)}";
 const DuetCalloutStyle0 = duetCalloutCss;

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

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

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

@@ -1,22 +1,22 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-d4904a7c.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-f5035d0a.js';
 import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
 import { g as getElementsFromNamedSlot } from './p-fe478fac.js';
 import { s as sanitizeString } from './p-9c3c64b9.js';
-import { g as getColorByName } from './p-c224f527.js';
-import { d as defineCustomElement$3 } from './p-af586c7d.js';
-import { d as defineCustomElement$2 } from './p-b21352e2.js';
+import { g as getColorByName } from './p-856c21c2.js';
+import { d as defineCustomElement$3 } from './p-9dd5b1ab.js';
+import { d as defineCustomElement$2 } from './p-cee4b98f.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 
-const duetCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}:host{--duet-card-border-radius:12px}@media (min-width: 36em){:host{--duet-card-border-radius:16px}}.duet-card{padding:20px !important;position:relative;display:flex;flex-direction:column;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-decoration:none;border-radius:var(--duet-card-border-radius);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-card.duet-p-0{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.duet-card:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-card:focus,.duet-card:focus.duet-theme-turva,.duet-theme-turva2 .duet-card:focus,.duet-card:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}@media (max-width: 20.5em){.duet-card.shadow-xxx-small{box-shadow:none}}@media (max-width: 22.5em){.duet-card.shadow-xx-small{box-shadow:none}}@media (max-width: 35.9375em){.duet-card.shadow-x-small{box-shadow:none}}@media (min-width: 36em){.duet-card.shadow-small{box-shadow:none}}@media (min-width: 48em){.duet-card.shadow-medium{box-shadow:none}}@media (min-width: 62em){.duet-card.shadow-large{box-shadow:none}}@media (min-width: 64.0625em){.duet-card.shadow-x-large{box-shadow:none}}@media (min-width: 76.25em){.duet-card.shadow-xx-large{box-shadow:none}}@media (min-width: 106.25em){.duet-card.shadow-xxx-large{box-shadow:none}}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){.duet-card.xx-small{padding:12px !important}}@media (min-width: 36em){.duet-card.x-small{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(4, 81, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){.duet-card-secondary-heading--inline{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;color:rgb(8, 42, 77);border-bottom:1px solid rgb(212, 223, 229);border-radius:var(--duet-card-border-radius) var(--duet-card-border-radius) 0 0}@media (min-width: 36em){.duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}.none .duet-card-heading{padding:0 !important;margin:0}}.duet-card-image-mask+.duet-card-heading{border-radius:0}.duet-card-heading.duet-card-heading--collapsible{cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button{width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button:focus{outline:0}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus,:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus,:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus{border-radius:var(--duet-card-border-radius)}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(222, 224, 228)}@media (min-width: 36em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 48em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 36em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0;margin:0}.duet-card-footer{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:rgb(245, 248, 250);border-bottom-right-radius:4px;border-bottom-left-radius:4px}.duet-theme-turva .duet-card-footer{background:rgb(245, 247, 250)}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.xx-small .duet-card-footer{padding:10px 20px 11px !important;padding-left:12px !important;margin:12px -12px -12px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:0;margin:0}.duet-card-content{flex:1 1 auto;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.small .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;padding:0;margin:0}.duet-card-image{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transform:scale(1.0001);transition:transform 300ms ease}a.duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}a.duet-card:hover .duet-card-image{transform:scale(1.024)}.duet-theme-turva a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}a.duet-card:active{transform:translateY(1px);transition:none}:host(.duet-theme-turva2) .duet-card.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-card.duet-theme-turva.info{background:rgb(253, 247, 242) !important}:host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-heading{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-footer{background:rgb(251, 225, 209)}";
+const duetCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}:host{--duet-card-border-radius:12px}@media (min-width: 36em){:host{--duet-card-border-radius:16px}}.duet-card{padding:20px !important;position:relative;display:flex;flex-direction:column;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-decoration:none;border-radius:var(--duet-card-border-radius);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-card.duet-p-0{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.duet-card:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-card:focus,.duet-card:focus.duet-theme-turva,.duet-theme-turva2 .duet-card:focus,.duet-card:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}@media (max-width: 20.5em){.duet-card.shadow-xxx-small{box-shadow:none}}@media (max-width: 22.5em){.duet-card.shadow-xx-small{box-shadow:none}}@media (max-width: 35.9375em){.duet-card.shadow-x-small{box-shadow:none}}@media (min-width: 36em){.duet-card.shadow-small{box-shadow:none}}@media (min-width: 48em){.duet-card.shadow-medium{box-shadow:none}}@media (min-width: 62em){.duet-card.shadow-large{box-shadow:none}}@media (min-width: 64.0625em){.duet-card.shadow-x-large{box-shadow:none}}@media (min-width: 76.25em){.duet-card.shadow-xx-large{box-shadow:none}}@media (min-width: 106.25em){.duet-card.shadow-xxx-large{box-shadow:none}}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){.duet-card.xx-small{padding:12px !important}}@media (min-width: 36em){.duet-card.x-small{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(4, 81, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){.duet-card-secondary-heading--inline{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;color:rgb(8, 42, 77);border-bottom:1px solid rgb(212, 223, 229);border-radius:var(--duet-card-border-radius) var(--duet-card-border-radius) 0 0}@media (min-width: 36em){.duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}.none .duet-card-heading{padding:0 !important;margin:0}}.duet-card-collapsed .duet-card-heading{border-radius:var(--duet-card-border-radius)}.duet-card-image-mask+.duet-card-heading{border-radius:0}.duet-card-heading.duet-card-heading--collapsible{cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button{width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button:focus{outline:0}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus,:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus,:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus{border-radius:var(--duet-card-border-radius)}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(222, 224, 228)}@media (min-width: 36em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 48em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 36em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0;margin:0}.duet-card-footer{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:rgb(245, 248, 250);border-bottom-right-radius:4px;border-bottom-left-radius:4px}.duet-theme-turva .duet-card-footer{background:rgb(245, 247, 250)}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.xx-small .duet-card-footer{padding:10px 20px 11px !important;padding-left:12px !important;margin:12px -12px -12px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:0;margin:0}.duet-card-content{flex:1 1 auto;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.small .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;padding:0;margin:0}.duet-card-image{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transform:scale(1.0001);transition:transform 300ms ease}a.duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}a.duet-card:hover .duet-card-image{transform:scale(1.024)}.duet-theme-turva a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}a.duet-card:active{transform:translateY(1px);transition:none}:host(.duet-theme-turva2) .duet-card.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-card.duet-theme-turva.info{background:rgb(253, 247, 242) !important}:host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-heading{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-card.duet-theme-turva .duet-card-footer{background:rgb(245, 246, 247)}";
 const DuetCardStyle0 = duetCardCss;
 
 const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
@@ -53,6 +53,7 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
         this.icon = undefined;
         this.iconColor = "currentColor";
         this.image = undefined;
+        this.imageAlt = undefined;
         this.background = "gray-lightest";
         this.padding = "small";
         this.margin = "auto";
@@ -111,10 +112,10 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '0df974f46d041de1e662425099375c3a7d1a4930', class: {
+        return (h(Host, { key: 'd92cd6fb922f1165e1d341221ac3f5433252606c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '0a128da0eff230a20db8b3842e8a5d86e6735701', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '7f870fc5061cd48c3464bd19ecd780fbb33f3e78', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -124,7 +125,7 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '1a6a47b88fb600849eaa9cc8d5108a41bd24b9ce', class: "duet-card-image-mask" }, h("img", { key: '3010252456dd0e210f11f32341a28c87ac872f4c', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'e5a1a24dfdb0d8d6d247333361f0f7bcccb05b0e', class: "duet-card-content", id: this.cardId }, h("slot", { key: '59044d033fc2b54dde397f5f18a424331208e54e' }), this.hasFooter && (h("div", { key: 'd9019dd209622eb7efbe267a7f7acf607956a3fa', class: "duet-card-footer" }, h("slot", { key: 'de1adb73d91026f80345564e24784df9c3fc3ee0', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'fd6822d5747d2882842c9c2392b28d8b7a2693f2', class: "duet-card-image-mask" }, h("img", { key: 'a1952cf1f82a4f8593130d9990ef27a2a982e5d8', src: this.image, class: "duet-card-image", loading: "lazy", alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a11237f14582fad87aaab15e4dccad5c6ffd7b0b', class: "duet-card-content", id: this.cardId }, h("slot", { key: '80d250aa9dbb0f39a7683c6d2a1e1cdaca75cdd8' }), this.hasFooter && (h("div", { key: '87b27d7c69e3d5f3ab7bdb75cc76a1a11900ef0f', class: "duet-card-footer" }, h("slot", { key: '1212e0d9a33349cf68c7b667069077e02ee30197', name: "footer" })))))));
     }
     get element() { return this; }
     static get style() { return DuetCardStyle0; }
@@ -140,6 +141,7 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
         "icon": [1],
         "iconColor": [513, "icon-color"],
         "image": [1],
+        "imageAlt": [1, "image-alt"],
         "background": [1],
         "padding": [1],
         "margin": [1],

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-7645b4d2.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-3caafb9d.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;