@duetds/components 10.3.0 → 10.4.0

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.css

@@ -64,6 +64,6 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -44,15 +44,15 @@ export class DuetBreadcrumb {
      */
     render() {
         const Tag = this.href ? "a" : "span";
-        return (h(Host, { key: '941cfe85ceb3fa1921b6afe71d2885f36a071966', role: "listitem" }, h("div", { key: '30ae1fd0a1a013d6fc7e2c318248c1c6eec5bbe5', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '074eaae1ca2fa2797b8eba7a1354b0d815b1936d', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: 'a69cd43b3f81311c55e245d1e292315cf885a972', class: {
+        return (h(Host, { key: 'bee5edcaaa257aef537393e9620b269c242dff1d', role: "listitem" }, h("div", { key: 'fe46fa6ccf1f40968db1b82d27b11c5a5a450594', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '0f01a2a92376855fc341815886b031498a5085fd', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: 'cffeeca1d48de91945115a38bfcb1ae5efe702db', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
                 "icon-only": this.icon && !this.hasSlottedContent,
             }, href: this.href || undefined, "aria-label": this.accessibleLabel || this.element.textContent, "aria-current": this.href ? undefined : "page" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: 'bb4d4379b6b38d5f5a8a8852a3e8ae320b72a48a', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: '72e99845589045f22bfd119623a79c3f0206b812', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '3190e7c4331c2856b71b54a5bdf6232b332dfa00' })))));
+            h("duet-icon", { key: 'ee27c63d28c4c9187a8242a811532322749f94fd', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: 'e0a220aa059a782dc8716f9fcda3e945bc048f40', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: '86454db36ecfe921c4b1719f1d9b7807da79a272' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,11 +62,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'c98b2354a647046cdf36b9fc042a825d59f69016' }, h("nav", { key: 'e5b3ab730c684343f6f7b551e3a90e4f804c33e4', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '36f67b82a722d5c4017bb4cec37fd7149572d264' }, h("nav", { key: 'f8fe3f4e521969a60d9428a354a88152171613ec', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: 'f31d96c0db9cd1c376cb303d8ecf24327d9c530e', class: "container" }, h("div", { key: '94307d00ca67a2caf0783be3dfd2ebe7568dc21f', role: "list", class: "list", style: { color } }, h("slot", { key: '1a5f46b90a2b35c16992b4af7766bcbd4d7925f2' })), h("div", { key: '15d920594f56343f362d726da3a4a8d87edb10d7', class: "bottom-border bottom-border--container" })), h("div", { key: '7bc1ccc417e8d621909d06bf2933ddd97ee6dbcc', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '78f711e9262e47c989705552d2ab75e65ae17fbe', class: "container" }, h("div", { key: 'bfc70b5d984cc57ef2591f4a3ecf452db9ae0ed6', role: "list", class: "list", style: { color } }, h("slot", { key: '96e85ea897f84aef0111f41d1e91ac2a263e8d66' })), h("div", { key: 'b99f56d5dba834d934872b86fcb8e46205ae3084', class: "bottom-border bottom-border--container" })), h("div", { key: '1d96cf880260a6fa1fb39cbc0e76e7b5df8f208c', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -157,7 +157,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -308,11 +308,11 @@
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-button.secondary.duet-button-negative, .duet-button.input-button-secondary.duet-button-negative, .duet-button.input-button-left-secondary.duet-button-negative, .duet-button.input-button-embedded.duet-button-negative {
   color: rgb(212, 223, 229) !important;
@@ -429,8 +429,8 @@
 }
 .duet-button.duet-button.input-button-primary, .duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-embedded {
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
   border-bottom-left-radius: 0;
 }
 .duet-button.duet-button.input-button-primary .duet-button-icon.left.large,
@@ -451,14 +451,17 @@
   border-left-width: 0;
 }
 .duet-button.duet-button.input-button-left-primary, .duet-button.duet-button.input-button-left-secondary {
-  border-top-left-radius: 4px;
+  border-top-left-radius: 4px !important;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px !important;
 }
 .duet-button.duet-button.input-button-left-primary .duet-button-contents, .duet-button.duet-button.input-button-left-secondary .duet-button-contents {
   position: static;
 }
+.duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-left-secondary {
+  border-color: rgb(127, 150, 165);
+}
 .duet-button.square {
   width: 52px;
   min-width: auto !important;
@@ -584,6 +587,9 @@
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.duet-theme-turva .duet-button.duet-button.input-button-secondary, .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+  border-color: rgb(120, 145, 164);
+}
 .duet-theme-turva .duet-button.negative {
   color: rgb(23, 42, 59) !important;
 }

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

@@ -257,12 +257,27 @@ export class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
+        const getSpinnerColor = () => {
+            if (this.disabled) {
+                return "primary";
+            }
+            if (this.variation === "destructive-secondary") {
+                return "color-status-foreground-danger-primary";
+            }
+            if (this.variation === "default" || this.variation.includes("secondary")) {
+                return "primary";
+            }
+            if (this.variation.includes("destructive")) {
+                return "gray-lightest";
+            }
+            return "currentColor";
+        };
+        const commonChildren = (h("span", { class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
+            } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { class: "duet-button-contents-slot" }, h("slot", null))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -297,7 +312,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
+        return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -305,13 +320,13 @@ export class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
+            } }, h("span", { onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
+            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { color: getSpinnerColor() })), h("slot", { name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,11 +37,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: 'b082df5828c66c540240a355c2143bdc97cdeda2' }, h("div", { key: '318c40bc242a649eb1e74191703e77ef9f567dac', class: {
+        return (h(Host, { key: 'e0a035450d6e7305b25de43ed55f4ffe7a15a0e3' }, h("div", { key: '6c5d998d494deab47f1384005e7d2dfb95246c7b', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '4c7ff23d3c646e8e37452488aba5b9a28344625f', class: "container" }, h("duet-icon", { key: 'd5234359ce6513b20a552366603498b7dc5729f5', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '67ab9a0d89f6abff523b8ca16a20c2a67865b86a' }, h("slot", { key: 'fc4670a439f114411b42ce3dcd8ef7f365fa650c' })), this.hasAuthorSlot && (h("figcaption", { key: '9d1b92d3229bef3447e7b5590efc766d4efb2ad6', class: "author" }, h("span", { key: '5310ad556c87706338d0a75058107d2e4d1fe241' }, "\u2014 "), h("slot", { key: 'f7281f1633a536bd242831e952ca1bc240b98b1c', name: "author" })))))));
+            } }, h("figure", { key: '48c6d6f720cd951a3e80e953265a1c79174c0dd6', class: "container" }, h("duet-icon", { key: 'f25c2dbb92d9a7f05b11512f9ef73052585916a7', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'e01e4dcdc7992709803169f5fb85183134f7608f' }, h("slot", { key: '7d23fc2421ababa106e834cbb1681d7b94137574' })), this.hasAuthorSlot && (h("figcaption", { key: 'ccd723ba6d25df159a5826a0ab652cde0556659d', class: "author" }, h("span", { key: '0daa1d1540484278f462a1f6ea258dd292f5548c' }, "\u2014 "), h("slot", { key: '47f2ade5a9f6e081482c243fa52942de8fa523e8', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,13 +33,13 @@ export class DuetCaption {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6536dfff2137c85741a34401a550ecd205ba897a', class: {
+        return (h(Host, { key: 'f0006c630adf5dfdffecf1694f5f132b6bbfc285', class: {
                 "duet-caption": true,
                 "duet-caption-selected": this.selected,
                 "duet-caption-small": this.size === "small",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("slot", { key: '61789c613b54670e42ca147df64c22c5896d7cec' })));
+            } }, h("slot", { key: '6d6fcee0296c8e2c445b048b3cde5a6fdee74f66' })));
     }
     static get is() { return "duet-caption"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@
   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-turva .duet-card:focus, .duet-card:focus.duet-theme-turva {
+.duet-theme-turva .duet-card:focus, .duet-card:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -276,7 +276,7 @@
   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-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-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 {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {

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

@@ -151,10 +151,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: 'd92cd6fb922f1165e1d341221ac3f5433252606c', class: {
+        return (h(Host, { key: '526da1b920f1be4a18d200ab81bc1951649cf3b2', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '7f870fc5061cd48c3464bd19ecd780fbb33f3e78', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '1cfae581c87423ea9d466fd39084b28505b01a77', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -164,7 +164,7 @@ export class DuetCard {
                 "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: '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" })))))));
+            } }, this.image && (h("div", { key: 'e310f18c792507a78333290fc56a3866efe302ca', class: "duet-card-image-mask" }, h("img", { key: '84eaf59d2df2a9dd85cf0703b9b1641dff78c473', 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: 'ef549d1a5f7efeb35a2fd0ca6ab2c22566955029', class: "duet-card-content", id: this.cardId }, h("slot", { key: '746a25475887db3e0ba914e273eb32571accbb56' }), this.hasFooter && (h("div", { key: 'd30c96b12ae73fc4bdfbfd22f25b862287b8fce5', class: "duet-card-footer" }, h("slot", { key: '887615186784331005c099562f296bdd3d216c98', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva, .duet-theme-turva .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva {
+.duet-theme-turva .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-checkbox[aria-invalid=true] + label::before {

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

@@ -150,11 +150,11 @@ export class DuetCheckbox {
      */
     render() {
         const identifier = this.identifier || this.checkboxId;
-        return (h(Host, { key: '89b58639dd5439529654ebe6791968205c6a0dcc', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '4fbfc9f9546310625a3767dae94b2ae517b3f7d8', class: {
+        return (h(Host, { key: '969fef83a2c19f8bde9bbe4244282e8baf694dee', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '7dec18303e2eb5f1d03efcd8913ee16aac4279a5', class: {
                 "duet-checkbox-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("input", { key: 'ddd0f55c22714aa512410996c1dbe3236e9583c4', ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-invalid": this.error ? "true" : "false", "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.getAriaDetails(), "aria-description": this.accessibleDescription, "aria-selected": this.accessibleSelected, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { key: '7944e807c4a8fcaafc9eff276db3966aa9c40c2b', class: "duet-label", htmlFor: identifier }, h("span", { key: 'b47a404400a92048a27be9d518269e1df8fb6aa3' }, this.label)), this.hasAfterLabelSlot && (h("div", { key: 'f8b66b9f123f4fad021e7474d0587115e807e97f', class: "duet-after-label", id: this.afterLabelId }, h("slot", { key: 'e2424cb45277142133511fa60e69ad5a4cf89d14', name: "after-label" }))), h("div", { key: 'ce4dec7557b9f9285cb36719aab3859bf9379d38', class: "duet-checkbox-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '77cc196c88e363c84f40d324d8270521a78db5d3' }, this.error)))));
+            } }, h("input", { key: 'd48062c10d7b99b4f41e36dc84f293d3217c1112', ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-invalid": this.error ? "true" : "false", "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.getAriaDetails(), "aria-description": this.accessibleDescription, "aria-selected": this.accessibleSelected, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { key: '16993274e2fc393f0975638cb9b086985e8a7824', class: "duet-label", htmlFor: identifier }, h("span", { key: 'e23f56d12d28ac8b2365a10d42af3a2da0e22c4f' }, this.label)), this.hasAfterLabelSlot && (h("div", { key: '70c7eb127b99fecd261cce9532fe29b52dd6b06a', class: "duet-after-label", id: this.afterLabelId }, h("slot", { key: '1ff432b9f19edecef2d61fef39807731f23b887d', name: "after-label" }))), h("div", { key: '3684cba399c53315f800893f2865543385fc0160', class: "duet-checkbox-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'a6ef45046d9857c1a546796fc1be69bb63e5b714' }, this.error)))));
     }
     static get is() { return "duet-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -252,9 +252,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,
-.duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
-:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva,
+.duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,
 .duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -89,7 +89,9 @@ export class DuetChip {
             radioInput.ariaDisabled = this.disabled ? "true" : undefined;
             radioInput.id = this.identifier || this.chipId;
             radioInput.type = "radio";
-            radioInput.name = this.name;
+            if (radioInput.name !== this.name) {
+                radioInput.name = this.name;
+            }
             radioInput.value = this.value;
             radioInput.checked = this.checked;
             radioInput.ariaLabel = this.element.textContent;
@@ -332,7 +334,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'e26aa34e15b03e670a0f3f0e0d4cc24a237434bd', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '9f57e595caa81d8d4b84394b3a4a49fbdf19da48', class: classes }, h("button", Object.assign({ key: 'd68d62140116bf1fbb975b9b6b0453ff209e02c1', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'ddf0a95c86a07ebed9110017d6a0bd77e47a3e95', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'd6adb6765da92cb43ed0c408ecd8bea4221047a8', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'ce3208e6913557213ca536866493c7765bc2cb77' })))), this.variation === "input" && (h("span", { key: '75ec4e277b428b7e34bd5366b9a487c16c886ae9', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '92de738c0bd52efb610ecc97056827f0af9a1252', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'ff2ae73783f77320559096261e367a6d5496c9fb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'f8ac9cb89ed8e949a37944938652b62008fc19c7', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'aaf69ef9eb8e5b3f48a68e4a01a70b2272d469ae' })), h("button", { key: 'fe3a6dcce274c4f812c58da61c30f97707ef5767', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: 'e548beece645e839b0b43bfcd131764db993bf9f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'e5fd9ed10732bda6ab5ce6a44297a923c251badb', class: classes }, h("input", Object.assign({ key: '86e4c71d067982fef1537d4ab02e9c28d20696b3', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'd7f775b63603946790ea8e4412cde73865c49683', htmlFor: identifier }, this.icon && (h("span", { key: '274d90f5406d6dd2d7d7386b1b4bdec927781a5c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '5425392636f14e79e52edb733baec19b330be1b4', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '34eadef6cfac6361f4069f673efd04df0c6de0cc', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '6f33a83d88ab32af90c49a61aa55459c1c6a4e27' }), this.popupElement && (h("span", { key: 'efccfca32d5aefd8c0f6d8da8c39941f93fafa73', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '49d87cd5a7e0b1249c9b484ab6ffb949b32a9d0a', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '34755198707218679008f8d3f1345f378a9f1be8', class: classes }, h("slot", { key: 'c2fec1770e3e9916e9a456519bdb73461d00e32c', name: "input" }), h("label", { key: '34286b6515f0c2f96d8ebb84f8c99a9ecdca76c2', htmlFor: identifier }, this.icon && (h("span", { key: '5fbfe0a0c184a04844eccc440c042fae5f5321be', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'c0ada34d07c59029ef1961d0d60f9e801e8e38cc', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '4b2626e45a9078b5ea6993183f57c5a0bfdc38c8', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'a4b9352bda8b5f9e9ce1912d07159c77844a4580' }))))));
+        return (h(Host, { key: 'a02dfd14dbc6adb2b4603f1032071f973ed2ccde', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'f6f837561846f06857082a732a01dc00be276bab', class: classes }, h("button", Object.assign({ key: '614901de9dce1a3613e710f2144dd9cd8f3e635a', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'f0bbf7f4631fb86dc23a381c25c03cabe947cc3e', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '6a7c79b76c0fd5d06b4b4d3f6640459cd6d6298d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '397dbf6b64587f75b1fc3f3d3f0bf12a0e4df881' })))), this.variation === "input" && (h("span", { key: '5ee6a9d0856e2879420676696e360c78205041cc', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '4bbbbdece24e710ce9933ff9f91a9c800b3e58fe', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'd1aef801dcf90532b29fc97c01b7456d8487f44a', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'a63f98e142a1a3b23fc95d5fc1da841d377e10ce', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '11f084e182d0c9d6aa3662bcce61235e8ec76fcf' })), h("button", { key: '777701d86d7a3c4dc31e94d11e3e127ed7d2e1fd', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '856fed5273e55797d4824c153cf2cb3278e9a2b4', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '679cda39bb299541877fe34081bc414119d49455', class: classes }, h("input", Object.assign({ key: '7ccb0cad55edef64e3d261416384871b5474908e', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'c0bc9afaac898ec41d39ae2fd4908389b3ac065a', htmlFor: identifier }, this.icon && (h("span", { key: '15038fc3a98b2486a950d1b64d2b54ee6e479393', class: "duet-chip-icon-container" }, h("duet-icon", { key: '592062e0add70bea207fef298935a3c2d0a6fdb4', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'e55ffd29e3d14b71be6c15f59bc36395d5868269', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '5aab1d1c1dfae62c0801d8b726cd78ce24fb8c2d' }), this.popupElement && (h("span", { key: '8ce9e5d7685346af76deb8d9561e149033b723c5', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'a6a23f49aa4b6a182edd3b135b695a42089b8c5a', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '6d61938382d8ff58e4a817cce31928d191cf5abb', class: classes }, h("slot", { key: '72b0c769e2bee8de5fc6f834232aae55555e7835', name: "input" }), h("label", { key: '3ad924385c4d43e905cc42efaa016fd90e3854b5', htmlFor: identifier }, this.icon && (h("span", { key: 'e5d698e18b0bf9e37db7b13fc4a96124736be144', class: "duet-chip-icon-container" }, h("duet-icon", { key: '3101dbabb443a5b23cc7c94ad5bbdb0fbbcc930b', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '0084200969cb3a17c048869ba10fdefd28dbc7ed', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'e43b1bdf08e27bf2dcc164a45bf088451b742e88' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '77d8d9cfa205def19022cd899ab98eb36007d2e2', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b93b32d626ceca01d12390209e700eef8665fd8b', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'fa4d7323cf416248275604e05b261bc1f542ea6e', class: {
+        return (h(Host, { key: '9f320db3e8549d7d12de134f013789c1f412b947', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'a8fe605a230fd34d9714bd5194c281b87394bd24', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '91fabdc145a023efc8317ef543296d4e5e2509d9', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'd2a988ecdd6f5d41ce318365966515ff92c252c6', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '9a418c3b3cd7c451f52003eb5efe16e90a4d5841', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -254,7 +254,7 @@ input:focus {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .focus.duet-choice-label, .focus.duet-choice-label.duet-theme-turva, .duet-theme-turva .focus.duet-choice-label, .focus.duet-choice-label.duet-theme-turva {
+.duet-theme-turva .focus.duet-choice-label, .focus.duet-choice-label.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -423,7 +423,7 @@ label.disabled .duet-checkmark-container {
   outline-color: rgba(0, 119, 179, 0.8);
   display: block;
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -471,7 +471,7 @@ label.disabled .duet-checkmark-container {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-choice-info-toggle[aria-expanded=true] {

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

@@ -176,7 +176,9 @@ export class DuetChoice {
             input.disabled = this.getDisabled();
             input.id = this.identifier || this.choiceId;
             input.type = this.type;
-            input.name = this.name;
+            if (input.name !== this.name) {
+                input.name = this.name;
+            }
             input.value = this.value;
             input.checked = this.checked;
             input.required = this.required;
@@ -422,7 +424,7 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '583ef635169af9972811ec71576988fa12c1ad9a', class: {
+        return (h(Host, { key: 'c4b3a5c501d38245acc5af3e2b9f544bd0bf7072', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
                 "vertical-stretch": this.groupDirection === "horizontal",
@@ -431,10 +433,10 @@ export class DuetChoice {
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: 'ca64fbe3bb8291ad36305267c7e1ea02355ebc5c', class: {
+            } }, h("div", { key: '795598769dac455ce019fafc78a0da012fab367e', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'cad7111f70511cf2f1dbe0e9db6c00c0f2e038ad', class: {
+            } }, h("div", { key: '7c2d292a71e2c29410fe1b25b23f21d2331a2441', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -443,16 +445,16 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("slot", { key: 'bb7405107756f726503cf0e17278761d9f68386e', name: "choiceinput" }), h("label", { key: '0ae8fc10a14a1b68cf78e7fe65164cc4ac4471f4', class: {
+            } }, h("slot", { key: '7c8737f5f56691e6d91b1ef6aa88d4d429a91853', name: "choiceinput" }), h("label", { key: '956d1a8a3e617e20822cb45e16510552377c689a', class: {
                 "duet-choice-label": true,
                 "has-before-text": this.hasBeforeText,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '174aa0372dd6cce4bc695425fc0f4f9b9ef51e89', name: "before-text" }), this.icon && (h("div", { key: '1d8c96fbbb225864342228a15026d56c2288ba7c', class: "duet-choice-card-icon" }, h("duet-icon", { key: '737fc607c29c5178a62c6981571c1624e3a7d993', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: 'e97966ca1b32ac47460f193997509eda09904469', class: "duet-choice-card-text" }, h("div", { key: 'df684a3bf298011052b12e8a8a781f537403a1a0' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: 'eb703567d8b2d2a3d940af79c3e36e339b16358e' }, h("duet-spacer", { key: '2a260bd1fa121622e21c8e64952c14a8fdf7e40f', size: "xx-small" }), h("duet-caption", { key: 'ca97833b65e235dc4316249086e099f33cbea465', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: 'bce4fd584082e0a2d2b6e72ba5ffb32487c55564' }, h("duet-spacer", { key: '40efa3cc50c5636c85cfab0e4ba9e96aafad8f79', size: "xx-small" }), h("slot", { key: 'db4d24e43aa875de213391981ed2b841137337aa', name: "additional" })))), h("div", { key: '496255f50229c21cf645b9b2a0a3c10db73cee12' }, h("div", { key: '90180fd834fc6a1f39cc6dcea6a61133961cbdaf', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: '1d6455f6915d00399fdb586aca6b0ee2a622d2da', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '8897ce9328e49c68fef9b9901e8e6f271cd484d9', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '8e06e00faf592c2217bcdf4125de0a3fbe688226', name: "before-text" }), this.icon && (h("div", { key: 'a03eb510213a5dacea0ea1a8fba5c59e3f7b5adf', class: "duet-choice-card-icon" }, h("duet-icon", { key: '6f1da454489ebc91e044c73bcaa72e4dc0cbc434', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '7ae5d20c3621b1ea86a08e01752a1501f4c6141f', class: "duet-choice-card-text" }, h("div", { key: '48924d49aa8990d06b898d5e859d3259340424f3' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '159e947250b2e752ede4b9e1cc239a17beb56e4a' }, h("duet-spacer", { key: '841d4ceb579eafb87c381f78c4a62d6943480702', size: "xx-small" }), h("duet-caption", { key: 'da80efff2d5db1ac58bcba1074d2acd8ebe49fc4', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '990e772b8ed9d22a20f5a6718d5884d49135b6b1' }, h("duet-spacer", { key: '691495c8aeb63a55951a36c28f15bcb049c9d36e', size: "xx-small" }), h("slot", { key: 'ba5ca5f8c750aa685ae9560f482401e315e1700b', name: "additional" })))), h("div", { key: 'a5a27faf19b806f0cbe5d78c751acbc05cd70a4e' }, h("div", { key: '5191f1bc54972485f2850139cf7dedb0c66e0f69', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'abe835c0eb8f2917a1e1e87b883d9a43c8883ae6', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '232418bd6f978e77039ebea2bdea0388efeae571', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'cd0cc7ea1a4d1f7dfaf0a0cc0f2296c71d3b5d43', class: "duet-choice-info-icon" }, h("duet-icon", { key: '62c25ce3534a78c7f7b5cf5c7cdc53caaf42435a', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'efa969656f43120c9b8670160671c1c0c9630714', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'cd5726ddd6b87acb1c4a8b0661906c4555c8371a', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'd2d3d9bc3e7862c2f01ba3b2ad27dd7662c0a8a4', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'eab4a0209ba1f4fe2bb7a4be8971f843a67b77e6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
             } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
@@ -1316,32 +1318,3 @@ export class DuetChoice {
     }
     static get elementRef() { return "element"; }
 }
-/*
-
-{this.type === "checkbox" && (
-              <input
-                class="duet-choice-input"
-                type={this.type}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onChange={this.onChange}
-                disabled={this.getDisabled()}
-                required={this.required}
-                id={identifier}
-                name={this.name}
-                value={this.value}
-                checked={this.checked}
-                aria-label={this.getLabel()}
-                aria-controls={this.accessibleControls}
-                aria-activedescendant={this.accessibleActiveDescendant}
-                aria-labelledby={this.accessibleLabelledBy}
-                aria-details={this.accessibleDetails}
-                aria-description={this.accessibleDescription}
-                aria-owns={this.accessibleOwns}
-                aria-describedby={this.getAriaDescribedby()}
-                onKeyDown={this.handleKeyDown}
-                ref={input => (this.focusableElement = input)}
-              ></input>
-            )}
-
-*/

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

@@ -183,14 +183,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '91ad25e9ae34e334eb8c94c39477915350324fe4', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: '39267534dcf19f7f942ef44d869d302552ad8463', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '8be987ee15a23906a771c28b844ae283ca5df13c', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'fb25c9c926cc1e47bf9147112634d1c2f792dfb5', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9236736c2872c5ab10bccad8c12ee2819bf41270', name: "tooltip" }), h("div", { key: '5cb0b64392398f6535d947c142ae27a794820dec', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'eddef456160e825d9a44fcade7482e854de79824' })))));
+            } }, h("duet-fieldset", { key: '1e292babf2206d42d58c46f88bed02959e595dc1', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '435735b34c7f437aba23bda2eebd7fa78aa30f3d', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '390312b35af123116ec5919b31f61d9499559813', name: "tooltip", slot: "tooltip" }), h("div", { key: 'fb68426f6c7feac6c767511bcaccfb6585515e3e', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '5b26fd1d7d1239fdcdcb6d736445a6366995c3bc' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-collapsible-heading.full-width {

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

@@ -177,7 +177,7 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingTags.includes(this.headingLevel) ? this.headingLevel : "div";
-        return (h(Host, { key: 'fd4435676c3862734ae74dc5a3f87b8eab2f70f4', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'a8cebd440d7d71ec114617e5fb99929f577c4519' }, h("button", { key: '20835d6fa2e0dd36cc25d5400f31d29f00123c08', class: {
+        return (h(Host, { key: 'b19b694f6710f4338d26580dea95463eefaa30d4', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '47062fe8e280b4c2489ebe9ba784e6211ecac9e3' }, h("button", { key: '5e635b36739a5ab604c5d523435522b83bddcd56', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
@@ -185,7 +185,7 @@ export class DuetCollapsible {
                 "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '5efe212565a40b4805d565c6856ef080f3b0b696', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '09dde2b49aa4b3aee5ae10e6cd6ffee6bdd75faa', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '6bc4d5b4d62dcd39c6b03a37f0879d19d9b56f14', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'cc07686af44301b10a541149bffc8df833a294f3', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: '83f79853695547594c25a1b017c0653d4e4edc7d', part: "duet-collapsible-after-heading" }, h("slot", { key: '47dd2ce6d896f75c6814594899604aa15e9a98cd', name: "after-heading" })))), this.caption && (h("div", { key: 'ebd4561054092f312999f98f8e859bd193cb9613', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'f620061ec26eed524ee27e417d6fb1e828fc04e8', size: "small", margin: "none" }, this.caption))))), h("div", { key: '4a2de882c742fbd31fb4c1ce959e9c081cf1a15d', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '7efd617c6d79dba957e02d3a7ea4677629c64ef7' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '9d49b16d4375ea5c4700c3142b920e3e76924443', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '6b45ae151d90d269a466c782eed5c7ed29ecdbee', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '99eac9e54f5bbf71068e9b5dc3557ee347d2cd5b', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '732d6cf225d17864487046efc9c3cb26e19b9dc8', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: 'ecb0414b87ff8340967c2a65d5715986b8c11c01', part: "duet-collapsible-after-heading" }, h("slot", { key: '85b150c18dd43fbe21041bd4a8258d6412a350f0', name: "after-heading" })))), this.caption && (h("div", { key: '6d3aa5e7917e2db228251eab60ee888ec51d3944', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '52aa682a75aa4a7bfef36ad34cbf900b41fb46ba', size: "small", margin: "none" }, this.caption))))), h("div", { key: '815c138b748356c749954d2a99564edd608e8b41', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '5f5ccef4fa9e4cba89278e034ae23a68c29add51' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }