@duetds/components 9.18.0 → 9.19.0

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

@@ -18,6 +18,7 @@ export class DuetPromoCard {
         this.backgroundColor = "";
         this.textColor = "secondary";
         this.image = "";
+        this.imageAlt = undefined;
         this.headingLevel = "h3";
         this.url = undefined;
     }
@@ -53,12 +54,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '8f689b5d1894c5e0662f73aea0aed2b93d693d72', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0eddae7614061bf37233ab26b7c5ce7960961cc6', class: {
+        return (h(Host, { key: '5db726b68b809f97f14a3467450a2f49f843fc26', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'e6376438c48f2b524bfa7bf9d2bf70fc5b28704d', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'b2e8ca1f06923cab98d7336c7062c071bcfc261f', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '0a8ce33fc1051205cac9d8d2ac24bfa073848343', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '5cc34aee907a48571fef7d7702940c56a456f109', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'a832b2964afdbc503fe20c3b1cc9e06ad503639e', class: "pre-heading" }, h("slot", { key: 'cd32235d60380db53c044df70c45ae0fab54ab92', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '01d5f808a6d8df027cce500a243244a77f22d4bd', class: "heading" }, h("duet-heading", { key: '432e098ec916ea2cfb50f5c3b227ccbc79cb46ae', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'c21c360ec6e50de46c62b62e8719588296ce48bf' }, h("slot", { key: '8643c8b20cb1d3aa6bb48c0bcf79f4bcdf7626f9', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '8220fc6e3a21f9434d962321afc9ba95d6095de8', class: "description" }, h("duet-paragraph", { key: '3cfd920c2aaed2185d3869e0f22a5b8c79dcc830', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '83121871c669e008e8e66cfc3235b5e2a9bfa774' }, h("slot", { key: 'ace270926c69c31b27b91abae993671179aad975', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'de50b7e248230d0497635d62ca93c98a6bb25391', class: "action" }, h("slot", { key: '31ccf2f4a58b5b5cc025ca3c6598cebea6391947', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '7f304f15bebdfe79900852a6aba03a7e246db723', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '56f330a9a72f23f170988c716a5d067d76244b2b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: '9dd3fbc5a0c89814627f30c37ca69b93ca2eafa1', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'c379a463b221d9946a02a63ac6d59ac5901e1096', class: "pre-heading" }, h("slot", { key: 'c58f528aa6cc8ae1887aed1389f1e15e4f7ec9c1', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '9157351d7b73b65f1748d45b283a3131d37c2293', class: "heading" }, h("duet-heading", { key: '9ba42bb9bec713248092a02b9edd9a77a3851e55', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '5015aaefb8aa7a37f8ddcc418c4e629ddbdefed6' }, h("slot", { key: 'fc40e048fe10cf4203ee1b2ce94bf61c80452c26', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'a60704e5d49ac589d9c5523fc76229a96883629c', class: "description" }, h("duet-paragraph", { key: '7772d59bb44c93af12e75a3ee2f89585b759990c', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a13c4ba356631d7e2363f75edfe80f3341cf7947' }, h("slot", { key: '7fae60137c29d9e0e20a14c457f55af8af3cfbac', name: "description" }))))), this.hasActionSlot && (h("div", { key: '8184539fd2f9c23cad0224f170e9cc3a43d15a59', class: "action" }, h("slot", { key: '32a398ea1a2b09bde94a2dbb1d2a954ed62097c6', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -198,6 +199,25 @@ export class DuetPromoCard {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "image-alt",
+                "reflect": false
+            },
             "headingLevel": {
                 "type": "string",
                 "mutable": false,

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

@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 28px !important;
+}
 
 :host(.vertical) {
   margin-right: 0 !important;
@@ -52,6 +55,9 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type {
+    margin-right: 28px !important;
+  }
   :host(.horizontal-responsive) .duet-label .duet-label-content {
     max-width: 100%;
   }

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -31,6 +31,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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

@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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

@@ -84,7 +84,7 @@
   z-index: 200;
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .top {
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header {
   display: block;
@@ -118,11 +118,16 @@
 .duet-slideout .dialog .sticky-header {
   display: none;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 0 20px 20px;
   margin-bottom: 20px;
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
 }
+@media (min-width: 36em) {
+  .duet-slideout .dialog .sticky-header {
+    padding: 0 28px 28px;
+  }
+}
 .duet-slideout .dialog .items {
   display: flex;
   flex-direction: column;
@@ -168,11 +173,7 @@
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
-.duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: rgb(245, 247, 250);
-}
 .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
 
@@ -200,12 +201,8 @@ slot {
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: rgb(253, 247, 242);
-}
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: rgb(253, 247, 242);
-  border-bottom-color: rgb(251, 225, 209);
+  border-bottom-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) slot {
   color: rgb(23, 42, 59);

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

@@ -168,11 +168,11 @@ export class DuetSlideoutPanel {
             }, style: styles }, h(FocusGuard, { key: '84d9b40827aa1b8e5651febd8a9e0b7af206bd21', moveFocusTo: this.closeButton }), h("div", { key: 'fb989b818bcdccacda4bd975a71fabe74bf07e17', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'bdc79ef4c0ca28dd92ac8808ae32142beeb68e68', class: "top" }, h("button", { key: '247fed3b9148060448c542e038a64b45ecb229fa', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: 'c019deaf0645e494c2eb6c3348a804490a904ce1', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9248737a100ea05c07aae78f30c2e4f606eb85a' }, this.label.innerHTML), h("button", { key: '64f1f447c272650ae5d82c77a3f7d90f6a411cbd', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '3737094efd584ea8792fb742f1871984f099e761', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3fc932167f02adea970a4477eab2eea93e2c8db3', class: "sticky-header" }, h("slot", { key: '835722e1ea03d08dc53d674d2170844e582bb414', name: "sticky-header" }))), h("div", { key: '70131a1615c354acf6f46c6eca1116116960f8c6', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'c019deaf0645e494c2eb6c3348a804490a904ce1', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f9248737a100ea05c07aae78f30c2e4f606eb85a' }, this.label.innerHTML), h("button", { key: '4803d320826b236f69afd59725624bde8c1bcded', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7efc43fda5d8b57021311668b0826bc75cdd40b8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '277cc062b3554cd86e65b194a4b39b02aba5cc13', class: "sticky-header" }, h("slot", { key: '97a1bd11b146783916fd3b36fe3243e654ab4455', name: "sticky-header" }))), h("div", { key: '1e9156aa7213dc1b13d3739f7658f4249dc0b4a5', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '4a3b4ec54bbde2ec40c4184e2f8cbcb5030c507b' })), h(FocusGuard, { key: '5cb519614160903a84503fc21ab428518004f284', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'c6bd7aba4dd5ac41e8178ac9b82ecae39cd5ef36' })), h(FocusGuard, { key: '201924a978637ae1bb37fdd05cb7cb73479bba1c', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,18 +14,6 @@
   max-width: 100%;
 }
 
-:host(.duet-theme-default) .duet-spinner {
-  color: rgb(0, 119, 179) !important;
-}
-
-:host(.duet-theme-turva) .duet-spinner {
-  color: rgb(198, 12, 48) !important;
-}
-
-:host(.duet-custom-color) {
-  color: inherit;
-}
-
 *,
 *::after,
 *::before {
@@ -56,6 +44,9 @@
   transform-origin: 0% 0%;
   animation: duetRotate 0.6s linear infinite;
 }
+.duet-spinner.duet-theme-turva {
+  color: rgb(198, 12, 48);
+}
 .duet-spinner::after {
   position: absolute;
   top: 50%;
@@ -97,6 +88,6 @@
     transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);
   }
 }
-:host(.duet-theme-turva2) .duet-spinner {
-  color: rgb(230, 23, 64) !important;
+:host(.duet-theme-turva2) .duet-theme-turva.duet-spinner {
+  color: rgb(230, 23, 64);
 }

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

@@ -4,14 +4,19 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
     constructor() {
         this.accessibleLabel = undefined;
-        this.color = "gray-lightest";
+        this.color = undefined;
         this.size = "small";
-        this.theme = "";
+        this.theme = undefined;
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
+        // NOTE: for backward compatibility reasons, if no theme and no color is given, we default to "gray-lightest".
+        // Changing this would be a breaking change, and we do it only when we have other things to break too.
+        if (!this.color && !this.theme) {
+            this.color = "gray-lightest";
+        }
         inheritGlobalTheme(this);
     }
     /**
@@ -19,14 +24,11 @@ export class DuetSpinner {
      * Always the last one in the class.
      */
     render() {
-        const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: 'feb500dd4e62ad66f8d1caed2c882a89acddc938', class: {
-                "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
-                "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
-                "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: '9483e2ed54fc623f7ae129808bbd88607c0de1e2', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        return (h(Host, { key: 'f754e35f6f4360131372e47d282605930fad93dc' }, h("div", { key: 'da3035f70914e76c61b7c5671f44035fb3142d18', class: {
                 "duet-spinner": true,
                 [this.size]: true,
+                "duet-theme-turva": this.theme === "turva",
             }, style: { color }, "aria-label": this.accessibleLabel })));
     }
     static get is() { return "duet-spinner"; }
@@ -64,7 +66,7 @@ export class DuetSpinner {
             },
             "color": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
                     "resolved": "string",
@@ -80,13 +82,12 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead."
+                    "text": "Color of the spinner, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\". This property can also be set to \"currentColor\"\nwhich forces the icon to use the CSS text color of parent element instead.\nUseful when you want to control the color in stylesheet instead.\nNote that in earlier versions the color has defaulted to \"gray-lightest\", but\nin a future release it will change to undefined, so that the color will be\nthe theme's primary. If you have relied on not defining color to result in\nwhite, it is advisable to update your code to explicitly define it."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "color",
-                "reflect": false,
-                "defaultValue": "\"gray-lightest\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -132,13 +133,12 @@ export class DuetSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme of the spinner. When used this will override the color setting and\nuse \"primary\" or \"primary-turva\" as the color depending on which theme\nis chosen."
+                    "text": "Theme of the spinner."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "theme",
-                "reflect": false,
-                "defaultValue": "\"\""
+                "reflect": false
             }
         };
     }

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -305,10 +305,6 @@
   color: rgb(45, 52, 79);
   background: rgb(234, 235, 239);
 }
-.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  outline-color: rgba(199, 202, 207, 0.8);
-  border-color: rgb(222, 224, 228);
-}
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
@@ -507,13 +503,6 @@
   background-color: rgb(113, 118, 132);
 }
 
-:host(.duet-theme-turva2) {
-  /* Plain variation: divider nude, hover & active underlines red */
-  /* Base tab button mapping + selected underline red, outer borders nude */
-  /* Default variation selected underline (uses ::before) should be red */
-  /* Default variation focus-visible border stays nude */
-  /* Checked variation selected state */
-}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {
   border-bottom-color: rgb(251, 225, 209);
 }
@@ -528,12 +517,9 @@
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button.selected {
   color: rgb(23, 42, 59);
-  border-color: rgb(251, 225, 209);
+  border-color: rgb(212, 221, 226);
   border-bottom-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
   background-color: rgb(230, 23, 64);
-}
-:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: rgb(251, 225, 209);
 }

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

@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);

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 {
+  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-0ba28ed9.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-822a3658.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-67617261.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-370b0653.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 { d as defineCustomElement$3 } from './p-59668efb.js';
+import { d as defineCustomElement$2 } from './p-71176ae5.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 {\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-370b0653.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-71176ae5.js';
+import { d as defineCustomElement$2 } from './p-58dd40d8.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-d4904a7c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-370b0653.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';

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-e89676de.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-370b0653.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-71176ae5.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-6cc7b04f.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;