@duetds/components 10.0.0-alpha.30 → 10.0.0-alpha.31

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

@@ -70,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'dc2cca9861a1e0c15b93ea6f29247986eb98d268', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b0bf8b66f35c1edc6a61dbea64f18e3617ec2a11', class: {
+        return (h(Host, { key: '6d2ebadbdc4716a50f44a6805ec97f2915476f4e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '12c8b32f7a486ababadb37b0cb125337a4b548f5', 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: '5b04a4485c4cdbeebe345e811fed2f5d5d6cfd78', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '28e164288916d963c8531ce34e627efe0f8524be', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a2a51c2dfacdce6538b6e2c18167ec484cb6edf4', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'dccea674aa8af48ce2f6060579e9db2aa347c51c', class: "pre-heading" }, h("slot", { key: 'da7abc9ecdc0efffbe018759dd2f3cf9ade1ad49', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '65d14398e1f2dcb619b37d6a53d3af908532d1fd', class: "heading" }, h("duet-heading", { key: 'c8ef1c5e164dd0c2dfc2acd71eda724fdc35da47', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'a8bfb0a868c401aa697926f7312be6ab9d22b0fb' }, h("slot", { key: '7bb6e377adeea6912b18347369ebc4fc34a33b10', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'b1107d6d1e10090c013deb373e19968de1246141', class: "description" }, h("duet-paragraph", { key: 'cbf6175a7fa66ed210f74a172943f78737344880', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '76bef436fa234317ba71fa8609e28f3d17149afc' }, h("slot", { key: 'a18d73d7d084a5094272716c2030aeb38e92c075', name: "description" }))))), this.hasActionSlot && (h("div", { key: '5536658b8273ddfbe3ecbeec94ece54b56f9a706', class: "action" }, h("slot", { key: 'b642ea21fafd203ddbfa9dfebeb386491d09c3d2', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'caef7b4cd0f222eb2039602c241438ecdd77d7ad', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '59e3b0877935a3ea2de4010312571a89ac32851b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: 'c27c8862d34045213fb6982cbc790c0d88d5da70', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '9ea892228de3f899f5e1031247b17d095e25e1de', class: "pre-heading" }, h("slot", { key: '4174b492f22e704b0354be13d0a178b9ef02a5eb', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8d21d1464f81c9745c91791a8857fcbe28788dce', class: "heading" }, h("duet-heading", { key: '7716f9540e3fc2638bea8ba30ce266d9f1c13390', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2ec91a5bdc861f6f228f6e662b347c8c8b06410' }, h("slot", { key: '9d423ea6373cada2b93d47c80a897efd38d97013', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '739454e12666bfb262d6a2243d61c658189410f5', class: "description" }, h("duet-paragraph", { key: '6592dd6a78e64e89ec88a06ce89120a011c2885e', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '599855764a99fba164a1500616f5a766be168b4b' }, h("slot", { key: 'deb8f54c39068fd0a313080a14e5dfdfb072ac14', name: "description" }))))), this.hasActionSlot && (h("div", { key: '32d5c8f68c70b99cd039254054130ea149a436c3', class: "action" }, h("slot", { key: '4185c9a0f8a624e3992481fba39852335746ddbb', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +215,25 @@ export class DuetPromoCard {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "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,
+                "reflect": false
+            },
             "headingLevel": {
                 "type": "string",
                 "attribute": "heading-level",

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

@@ -99,6 +99,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

@@ -109,6 +109,9 @@
 :host(:not(.duet-m-0)):last-child, :host(:not(.duet-m-0)):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(:not(.duet-m-0)):last-of-type {
+  margin-right: 16px !important;
+}
 
 @media (min-width: 36em) {
   :host(.duet-expand) {

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

@@ -188,11 +188,11 @@ export class DuetSlideoutPanel {
             }, style: styles }, h(FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', 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: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'e2a19bcf68d13caeec8cd0d03e79d8f347436f84', class: { "close": true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '5e410d780eed931181591dd44c6d5d6281096edc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e798417e14455bde09f3ad7e27d204990b2b6d17', class: "sticky-header" }, h("slot", { key: 'bdafb4122d5c49b37933244930f66b1a171d9641', name: "sticky-header" }))), h("div", { key: '807f98f59416699cda295c7e2939faa6241e87bd', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'f4edf9a9df667475a3c00b214e134bce7d9d7ae9', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '548ed5fadb9216137fcdc0762b35454ceb21c8d4', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '923603a20dbab28d51a376a9c252c35e33803880', class: "sticky-header" }, h("slot", { key: '07e15709effbee9950d36f03dd91e73b7e9ab336', name: "sticky-header" }))), h("div", { key: '7e63e1cd014106736bb712c20023f62245e43486', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'a4239425381aff3fe79c099a7a0d471377cfc475' })), h(FocusGuard, { key: '7861bde566dea39216e74ae0a7b37e13d92562c3', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fa18b91a1114433c57ecd566934f505e9fc62cf5' })), h(FocusGuard, { key: '7251452b17bbdfd8978f302bfde0e33991b39465', 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

@@ -3,28 +3,20 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
     constructor() {
-        /**
-         * Color of the spinner, as a design token entered in camelCase or kebab-case.
-         * Example: "color-primary". This property can also be set to "currentColor"
-         * which forces the icon to use the CSS text color of parent element instead.
-         * Useful when you want to control the color in stylesheet instead.
-         */
-        this.color = "gray-lightest";
         /**
          * Size variation of the spinner.
          */
         this.size = "small";
-        /**
-         * Theme of the spinner. When used this will override the color setting and
-         * use "primary" or "primary-turva" as the color depending on which theme
-         * is chosen.
-         */
-        this.theme = "";
     }
     /**
      * 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);
     }
     /**
@@ -32,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: '02a74b72a4b22798ac1a768e41793ee920494ca0', 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: 'e4d1b98fbcdc05241e8ea87fe91a944be89d1bff', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        return (h(Host, { key: '0d9ba3a785f72e0bd9318f4b38bc5b5459075704' }, h("div", { key: '5fed4253f83731359bfdf0a5b266b2352354b1cc', 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"; }
@@ -78,7 +67,7 @@ export class DuetSpinner {
             "color": {
                 "type": "string",
                 "attribute": "color",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
                     "resolved": "string",
@@ -94,12 +83,11 @@ 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,
-                "reflect": false,
-                "defaultValue": "\"gray-lightest\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -146,12 +134,11 @@ 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,
-                "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

@@ -98,6 +98,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

@@ -100,6 +100,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

@@ -36,11 +36,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'fe9cc8e718b52ddc3152c84ffc1ab5d4460935ba' }, h("nav", { key: 'a790b620e9b15d3546f88a9d7216d57269a05a6c', class: {
+        return (h(Host, { key: '2434866ef0b95d7b07a2248edc89a4f473d9ecc6' }, h("nav", { key: '9938a3cd11e5230013027cb613c8aa81f95e5bf7', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd1074c8c4ab3245f11ad5364c91cb1a3c193b833', class: "container" }, h("div", { key: 'ca7672dd9a66e35aa4acc360fc2221633c75cea4', class: "list", role: "list" }, h("slot", { key: '6c88cdcfca3282db04370a377a106ed7b69f115b', name: "left" })), h("div", { key: 'c67d455a9e59976bea3405b30ccdbc8823d7976f', class: "list", role: "list" }, h("slot", { key: 'd430749d17f22d1fb24c72c74eb27f5ceb31a5ae', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '9c915e9ffe872ec9b253bf9c7b7ca58ac5c39bee', class: "container" }, h("div", { key: '7a1ce3f543e9b908638de889a1b6b8270f73d830', class: "list", role: "list" }, h("slot", { key: '396f255c2694dbff16ae2f2584be49e4f5d4fdf5', name: "left" })), h("div", { key: '975122519f64947d2fc01d8a5c9fa63c3052097a', class: "list", role: "list" }, h("slot", { key: '8d070c2c7e5a168d7c426df35a4b742a95696383', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'eb26d2d4b6bca30e6ca4f6badc1235aba9bceba5', role: "listitem" }, this.badge && h("duet-indicator", { key: '06e7cc4489109e59e3a86c4ba511ca82c92c81ac', variation: "change" }), h(TagName, { key: '294b46d5c03f9e4468a109de050f6f5d5e6db5ae', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'f36d0228f8546f61bd7f1a21fc94bbfacb229270', role: "listitem" }, this.badge && h("duet-indicator", { key: 'a46dc8ea7f76a4f8c76664dc4e1ad56941028a10', variation: "change" }), h(TagName, { key: 'e488df937c34dadf25be1f2beacfe29161ba73cf', 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: 'cfb375b91d12501eb3bb14c0d8dab4898c225b1b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '2d4505d93051cc291345aaa8f7fd75254e0f9f13', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '6d4deb63928fa9484fd2d36bb3b63bc31ca09de0', class: "duet-toolbar-badge" }))), h("slot", { key: '487e4a04766617cac63c99949c3900049358fec9' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'bf9cb805c54b16cb6fa0f0c4d79af8214efcdbb7', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'ea4fb89649c146496bbc68c383483851fa9ea171', 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: 'fb792acb4d635caf2dbe6d6b34eb7ca0257c6425', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7aeb14377fab6bbba397bdcb85942bc7f9026f99', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'f2a6ed7704a7d21782c32fe02f1d768203a0e543', class: "duet-toolbar-badge" }))), h("slot", { key: 'c5f8d0d4644d68d9ae8bae97f3b26d9cb7ff2693' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '1258c07b9515853adcc3461d186240ba86fdc491', class: "duet-toolbar-icon" }, h("duet-icon", { key: '3472d1724fb3d148dd2ac58a964db4ab2ae7908e', 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: '6faf269ca79bd58c526ec509fad3fad42791c660', 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: 'df9aa0697ed176678be4f45596c3276da1218a33', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }