@duetds/components 9.5.2 → 9.7.0

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

@@ -15,12 +15,6 @@ export class DuetAlert {
     constructor() {
         this.descriptiveId = createID("DuetAlert");
         this.hasShowMoreSlot = false;
-        this.iconVariationMap = {
-            default: "messaging-info",
-            success: "messaging-success",
-            warning: "messaging-alert",
-            danger: "messaging-danger-alert",
-        };
         this.handleDismiss = (ev) => {
             this.handleHide();
             this.duetDismiss.emit({
@@ -35,8 +29,12 @@ export class DuetAlert {
             this.isDismissed = true;
             this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
         };
+        this.handleExpandToggle = () => {
+            this.isExpanded = !this.isExpanded;
+        };
         this.theme = "";
         this.isDismissed = false;
+        this.isExpanded = false;
         this.timeoutID = undefined;
         this.accessibleLabelDefaults = {
             fi: "Painike viestin sulkemiseen",
@@ -53,6 +51,7 @@ export class DuetAlert {
         this.position = "content";
         this.dismissible = false;
         this.focusable = false;
+        this.expandingTitle = "";
     }
     /**
      * Component lifecycle events.
@@ -108,19 +107,20 @@ export class DuetAlert {
      * Always the last one in the class.
      */
     render() {
-        const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-        return (h(Host, { key: 'd3c53bc46ae4d9f94d286a8ca55a1891afaec2d1', class: {
+        return (h(Host, { key: 'ae55751444a59a0630329e55f88711761506aa5f', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.announcements ? "alert" : undefined }, h("div", { key: '9b7c2ede2a81e5459214b3262c08f5a096251f50', class: {
+            }, role: this.announcements ? "alert" : undefined }, h("div", { key: '03074d2258592e0ffa63f933f291667050116d87', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 [this.position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'c372501af01265a0e962d41b0aeefa1b0803dc7a', class: {
+            } }, h("div", { key: '8a8ba0be00f76fc59c9e6f800ab5e7187c1708d9', class: {
                 "duet-alert": true,
+                "duet-alert-expandable": !!this.expandingTitle,
+                "duet-alert-expanded": this.isExpanded,
                 "duet-alert-has-icon": !!this.icon || this.position === "below-nav",
                 "duet-alert-has-show-more": this.hasShowMoreSlot,
                 "duet-alert-is-dismissible": this.dismissible,
@@ -128,9 +128,9 @@ export class DuetAlert {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '6a00f96245f482fa280c5618d1ab3e3d61ae57bf', class: "duet-alert-container", ref: element => {
+            } }, h("div", { key: '7ea557b2dbf25762a9382fb05a562dd92ba94a0d', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (h("div", { key: '3993720ebce31589b986f5441c9f8f48719f6c97', class: "duet-alert-icon" }, h("duet-icon", { key: 'fc93bdce332702991e0dedf6eba0276c5d9c3e6d', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (h("div", { key: 'e469d1feb00ce1b223b7977a1b87228933556823', class: "duet-alert-icon below-nav" }, h("duet-icon", { key: '8e3407af6309c0107a6e78107c965cf28cadbec3', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), h("span", { key: 'e4e8494c19f24f7da051b98cef3c3efcdeb47031', id: this.descriptiveId }, h("slot", { key: '1ce9a6e6c13e76f6fbf1317fa867d5400c79f41e' }))), this.hasShowMoreSlot && (h("duet-show-more", { key: '2106929166ce1b954dff45ed25b218ddce15f4d9', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '331aa9d74f0b995b55b6b119e569411a07673c3e', name: "show-more" }))), this.dismissible && (h("div", { key: '9cfd9e835660d246540ca7452de22bcd324d4682', class: "duet-alert-dismiss" }, h("duet-button", { key: 'fe950cf6c3d775160bd97b34e88ca71603a47d19', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "0" : undefined }, this.position !== "below-nav" && (h("div", { key: '8e1ffa6107c2cd63f831bdfa0d80fdc0565bdfc1', class: "duet-alert-icon" }, (this.icon && h("duet-icon", { key: '0e2cddc6680f121ac6837f426c135d94fec8fd4f', size: "auto", name: this.icon, color: "currentColor" })) || (h("duet-status-icon", { key: '22400d9ead5d0d2153077460773ac2dc3b60b0ec', strong: true, variation: this.variation, margin: "none", size: "auto" })))), this.position === "below-nav" && (h("div", { key: '5b40ce74518e3cd6d0bb90d925578b1b8118ca82', class: "duet-alert-icon below-nav" }, h("duet-status-icon", { key: '2be267d6749de5f4ba1694b82c2117b2553834e3', strong: true, variation: this.variation, margin: "none", size: "auto" }))), h("div", { key: 'b806ffa20525c37ea87b4e57b5354181fa4cb8ea', class: "duet-alert-content", id: this.descriptiveId }, this.expandingTitle && (h("button", { key: '04956e8168dbd2e3dc200b0c0a4ccd5da3290f2a', "aria-expanded": this.isExpanded.toString(), "aria-controls": `${this.descriptiveId}-content`, class: "duet-alert-expander", onClick: this.handleExpandToggle }, h("span", { key: '63ae4a87fbe7e728c81183def7afdf108588f83e', class: "expanding-title" }, this.expandingTitle), h("duet-icon", { key: 'fb34541b1a576e13e5505e38a944b03a4799a0cf', name: "action-arrow-down", color: this.variation === "default" ? "lt-blue-800" : `${this.variation}-800`, margin: "none", size: "x-small" }))), (!this.expandingTitle || this.isExpanded) && (h("div", { key: '05754aa30c0d0f9062047c766c0a1151b4599a26', id: `${this.descriptiveId}-content` }, h("slot", { key: '213940d0f233bd4762584448579ad48477d564dd' }))))), this.hasShowMoreSlot && (h("duet-show-more", { key: '328837aa4a239bdad2e1a63811ccf64d818863b1', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '6200788cc7facca8507701008dfdb22d5034a974', name: "show-more" }))), this.dismissible && !this.expandingTitle && (h("div", { key: '0302d1c6d386bdca47034e4e08f694d6dcd64149', class: "duet-alert-dismiss" }, h("duet-button", { key: '73c78cce1ec34e97b139d267d7efd56d231a8a95', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", color: this.variation === "default" ? "lt-blue-800" : `${this.variation}-800`, theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     static get is() { return "duet-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -236,7 +236,7 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable or disabled announcements by assistive technologies."
+                    "text": "Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually\nshould be set to false, so that it is not read out first."
                 },
                 "getter": false,
                 "setter": false,
@@ -262,7 +262,7 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon to display to the left of the content."
+                    "text": "Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,\nuse of this property is discouraged, and it is being considered for deprication."
                 },
                 "getter": false,
                 "setter": false,
@@ -399,7 +399,7 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should a button be rendered to dismiss the alert?"
+                    "text": "Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used."
                 },
                 "getter": false,
                 "setter": false,
@@ -419,19 +419,40 @@ export class DuetAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should it be possible to focus on alert?"
+                    "text": "Make alert focusable."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "expandingTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a\ntoggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanding-title",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
     static get states() {
         return {
             "isDismissed": {},
+            "isExpanded": {},
             "timeoutID": {}
         };
     }
@@ -452,7 +473,7 @@ export class DuetAlert {
                     "references": {
                         "DuetAlertEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-alert/duet-alert.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-alert/duet-alert.tsx",
                             "id": "src/components/duet-alert/duet-alert.tsx::DuetAlertEvent"
                         }
                     }

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

@@ -22,12 +22,12 @@ export class DuetBadge {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: 'cb78bbf707726afa6370adc12ad150bf355b6859', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '84a4bcb3eae5bad6cbb54c1196ecd7c601910b04', class: {
+        return (h(Host, { key: '9623fc33248326ca42a44f8ffd8d61ab48c21af5', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '639c1fcb5564297151bb401e3289344702c1f25e', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: '47192a702299c359b51b2b904363fc8a90fc50a5' }))));
+            } }, h("slot", { key: '7c6daca7a06dde1cd98dfd61c4eecdd59ee011e8' }))));
     }
     static get is() { return "duet-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,14 +91,14 @@ export class DuetBanner {
             img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'b8716b8067524ae7e4c29e56cdc37d6219c7743a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '7c4b420d5a203fa5066f4a71a801c9fc288e179c', class: {
+        return (h(Host, { key: '0af3739adf8f70478714148e8c932e6c26034be1', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '912afc7d42b05ef67242da0d0038e7b1892e420c', 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("div", { key: 'dd84b698336d0c159b692bde709c6f10bfe414bf', class: "visual" }, h("div", { key: 'c92d3fdabc120fa760c30ae44e90a29439817940', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: 'bab1712aa5f1ab77a6c96babc607a9a9d4359dd2' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '2497ae55ca516191073fad1f6425c962d23b9625', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: '411fc99b5c017a4b89f4aa375d6725e9e85314e6', style: bannerStyles, class: "brand-shape" })), h("div", { key: '6ba154b92216b98f00b33d740175760049157d14', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'ba3ab430999ab6f0823ab957b06bcc4077799c5a', class: "heading" }, h("duet-heading", { key: '256ed05f27e6c6c3ec987d4039d6a7caf713458b', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", { key: '197dbc447ca8910b13c8317cd00507e034e84e6f' }, h("slot", { key: 'cba3fcc030b0412d981e7cc94626e90aa628cb25', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'dbcc6142fe33db74bccac1d54a1fe2a8e8ccc064', class: "description", style: { color } }, h("slot", { key: '1806ab5f5be1ee076c3978f1fcb676cef6b62893', name: "description" }))), this.hasActionSlot && (h("div", { key: 'bf9fd56968048a53d15cc1849c2a3b4619851c49', class: "action" }, h("slot", { key: '367d2a86cb83fe2d2bdb91ae1e133453e35ce895', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: '4213a9062ef79c32430faf2230b896cdcf686fab', class: "visual" }, h("div", { key: '28cc855a769f28823c4501268ac578dc00d177be', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: 'ef1257956d87c2dd2e40a309d784cf92680ff193' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: 'e5ab5a791cd6199505005bbe11b43d7ebd0d7c9b', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'c21b74c5b8af201787e8c502cab1fe5e7c6f11d5', style: bannerStyles, class: "brand-shape" })), h("div", { key: '8f2a9fa44b18a35442b056f6d52d73a3804dc536', class: "content" }, this.hasHeadingSlot && (h("div", { key: '7003386020f8944006ea5c7f8479aef1908f4773', class: "heading" }, h("duet-heading", { key: '3bb18ccbae1989efaaf587de4985e01aa50db691', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", { key: 'b32d9f049c16b5521ad96d823c6d2325c6a80b98' }, h("slot", { key: '83c445eca1d63aa91847fbe090eb8afdaec130d7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '2a885bb4ddd277b9a56e00addc82784c469dcdfa', class: "description", style: { color } }, h("slot", { key: 'f79f7fdb5137692c0ffa3fa2dd6044f9f5a1f799', name: "description" }))), this.hasActionSlot && (h("div", { key: '21306ab0e66e7a6c5830df04387c89af2b01cfe8', class: "action" }, h("slot", { key: '7f9c1b80831ae7e2baa3e89ff91bd2802b4c4fb9', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -279,7 +279,7 @@ export class DuetBanner {
                     "references": {
                         "bannerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-banner/duet-banner.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-banner/duet-banner.tsx",
                             "id": "src/components/duet-banner/duet-banner.tsx::bannerSize"
                         }
                     }

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

@@ -42,14 +42,14 @@ export class DuetBreadcrumb {
      */
     render() {
         var _a;
-        return (h(Host, { key: '66c046e9fa4c9848802d8f5bb53973dd6293788a', role: "listitem" }, h("div", { key: '72d4f561b30cb93750f95f213a0396f76cc7c0ef', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '2dc69145e210dc28f273b72a0f6c531b9ea418e2', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: '507d426a12acfa7beb21650acbdc7a8d3a102fc4', class: {
+        return (h(Host, { key: 'fb8525d8da1761cf7ec289bf2ebcdab006edcbaa', role: "listitem" }, h("div", { key: 'a2a3cf5e15c5ccb962c0da35ae1c4b9efab68590', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'bbf4f84cae4467ae42f85af283947d23f8649a64', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'e89ba01440a8d69033de4710b1c943c211c07e5e', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: 'ca3474e64ab9fe1ba33f6e3e825bd2b6df38daad', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'cafb6bccd2f8aa1d5489d65ebeee6c50db0686f0', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '617a7e9bfce95a1f995c68fd2933dce4aad34973' })))));
+            h("duet-icon", { key: '93d11f8f8eb831623d0157b205ed0b0745804ccb', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: 'fe74c144a1765dd1fe1de6d463892fa7470651fe', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: '5ad471b0521af2799e4ac7a5934d02e77e6be8d5' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,11 +53,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'af63aa4363af2f3a95ce42be51b7859174bd5749' }, h("nav", { key: 'e94de5af502b5fe998b4a103485cbb71d3fd26c6', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: 'e40c7f2324bab83282f93d08c7543a6fbda0cd62' }, h("nav", { key: 'f399d4b1f69708cefacb29ea6360cd6dfabc0c28', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: 'd53aaf0bf7724611dc6e84bb661a37519f49d508', class: "container" }, h("div", { key: '9ac4ef431a68e3381a9a53d80f74f6fc5c59a55e', role: "list", class: "list", style: { color } }, h("slot", { key: '5c1e5f3c268febb8dd758afb21e0b1f24de6a0ed' })), h("div", { key: '72a790a58a1c75e5e3910604f32e9f257fb10d22', class: "bottom-border bottom-border--container" })), h("div", { key: '09bff8a4f622a575aa22a76a9442cd11a97bc819', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: 'ce6966271f4abef55194c0a47a3b4a0b7ceb652f', class: "container" }, h("div", { key: 'd6ddbc6527ff4de43ab048479a66959ce6a79f77', role: "list", class: "list", style: { color } }, h("slot", { key: '7e18d5f338e0313e997f6796208328fa841649f6' })), h("div", { key: 'c2cd24eb1795af2aad5b56a9497a579346b3e4c9', class: "bottom-border bottom-border--container" })), h("div", { key: '97fc1ae51d8e3d2063d79f07b875920725bb5e1e', 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.js

@@ -176,12 +176,12 @@ 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: '88051b53fd72f0b129657ef715640223f15481c2', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("span", { key: '98ef2cd4ace336d9deb8dab90ec991fc1d446178', "aria-hidden": "true", class: {
+        const commonChildren = (h("span", { key: '6df4a72f66f9fd4ae02883ad8ab231bf6b20f6a6', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("span", { key: '690ebfa2995cd90691f4fc4e2e5deb62f89b5e29', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: '91ac2ca8b67eefb2b9c0360844bb7c94e09afa08', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '5c8f78bef44b27553ab8afac09b879ee63ff44f9', class: "duet-button-contents-slot" }, h("slot", { key: '3e8dbdc10401d6398fd1d55a061347962afcc8c8' }))));
+            } }, h("duet-icon", { key: 'c6e2fc503c4a4f104a0b7d1508342ecac6f0db32', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: 'edbff7f759d1b849b74a736e6ef6a99294d44289', class: "duet-button-contents-slot" }, h("slot", { key: '4379b5ff8076f808776bcf763c59a39d51b7b569' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -216,7 +216,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: '3a911ded3c52428957f6616a4d1f997bd21f7146', class: {
+        return (h(Host, { key: '1d74b0a85872e849c86b8a3ffe589d4a443c72ca', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -224,13 +224,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: 'ba3598977b509fd5da178492f5b91ee98adc358a', onClick: this.handleClick, class: {
+            } }, h("span", { key: '744d6dacf5f2d588382d024d36d0cbc1b2236929', 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: 'd47a2c679ea68405e8cb22553467c00c3e7fdc94', color: "currentColor" })), h("slot", { key: 'a26510be5ca0ca17c82de03527f59b8468f7e4e5', 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", { key: '902914bbba7d1a08b8f028d8a6235dc84f9ae0f7', color: "currentColor" })), h("slot", { key: 'e5a8158694af4cebd82e33faf28e6214be2823de', name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }
@@ -488,7 +488,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
                         }
                     }
@@ -637,7 +637,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonTextCentering": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
                         }
                     }
@@ -663,7 +663,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonWrapping": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
                         }
                     }
@@ -1054,7 +1054,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonIconSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
                         }
                     }
@@ -1080,7 +1080,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
                         }
                     }

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

@@ -31,11 +31,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: '2c0e0547229b6ad6a7cdc410305fd4410b3e23c5' }, h("div", { key: 'e1ed12bbba8544b1dd2f80aef8d290f01b087a42', class: {
+        return (h(Host, { key: '6ff31c274248d365aca970c4e45121be580da7af' }, h("div", { key: '322bdf154b041ab1ec721021f668e52371fee91f', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '1c13c1e60d0eacf6130836b22e40820cd0bcc996', class: "container" }, h("duet-icon", { key: 'd510e6802cb67270d02ad5261719f3fb6c34ab68', 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: '035294078491273c88249b1577a037f28c24ca30' }, h("slot", { key: 'b516e727fc4d435fed30d422ba311099aff70605' })), this.hasAuthorSlot && (h("figcaption", { key: 'ad0b1b81c5dc8cc30136ec2779fb66c428d624ef', class: "author" }, h("span", { key: '4e2c5eb565f7e54f07900a691e2c01c73df22858' }, "\u2014 "), h("slot", { key: '00fcc97851122cdc95659800a0da4c35ffbfa7c1', name: "author" })))))));
+            } }, h("figure", { key: '40790b7c44b4ee3a34a71d6ef0beb37b6fd6a4d2', class: "container" }, h("duet-icon", { key: 'bb56fef27123e9067f797d2cda9efad69cbbceb5', 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: 'f8c76a1ea16947bafb7831897f8f07fb45112668' }, h("slot", { key: '513d3b47def761dfd445d5d0302266b8dbbeb0fd' })), this.hasAuthorSlot && (h("figcaption", { key: 'b10664d604f41b24b0665e4c408408b2bc55c3fc', class: "author" }, h("span", { key: '080d91a9e3496544dbcdec79aa4d5ea0f5736f32' }, "\u2014 "), h("slot", { key: 'b6f21e38600829d5cae75b6f1987796abb0dbd16', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,13 +21,13 @@ export class DuetCaption {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cefb662c677d5a45cc8e007a68ab67b0698ce2ee', class: {
+        return (h(Host, { key: '46c245b72ac2d6f4641a58e56dccecdce8421151', 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: '4a38bee52925d9c7db4473dd0e5bc92797b0b058' })));
+            } }, h("slot", { key: '56d458c5573dda5e0b8f6ec7d376a9eb327e0628' })));
     }
     static get is() { return "duet-caption"; }
     static get encapsulation() { return "shadow"; }
@@ -124,7 +124,7 @@ export class DuetCaption {
                     "references": {
                         "DuetCaptionSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-caption/duet-caption.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-caption/duet-caption.tsx",
                             "id": "src/components/duet-caption/duet-caption.tsx::DuetCaptionSize"
                         }
                     }

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

@@ -102,10 +102,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '81af7af276b2b67f13855aa9e11bd95e8abeaa2d', class: {
+        return (h(Host, { key: '00c59be2ab7c40755629602f9e85ea64ab612158', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '9c121ca16ed478f72e8c5976cc73499de2c48de2', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '8578ca3d024c5846a36cac0e767622b7eaabcb88', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -115,7 +115,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: '370ab67ee9e9e00267dfe6a034d9258fc41deb9c', class: "duet-card-image-mask" }, h("img", { key: 'f93b70812e33b71f9057b5a890baba36894012ea', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '64b6d8e1e2d02085fa6101f54cf95f15c6c4e3b8', class: "duet-card-content", id: this.cardId }, h("slot", { key: '9a20c3971a53038f5786c9321214cd2dc19bdcef' }), this.hasFooter && (h("div", { key: '5009d44d6ffb5c7d6774a0c22664979d84a12561', class: "duet-card-footer" }, h("slot", { key: 'e177a2f18a636b5e6c093150e52614e56ad56c68', name: "footer" })))))));
+            } }, this.image && (h("div", { key: '2609ba055ac602c074c2a545688284f99afc3105', class: "duet-card-image-mask" }, h("img", { key: '59572ec1bd938cb3fb54d511031d170980129026', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'ae06ad0ca9a5828a10dfcf8aa54aa44967acd203', class: "duet-card-content", id: this.cardId }, h("slot", { key: '751c8dd97e06452610214c242a67843d86e0e8f8' }), this.hasFooter && (h("div", { key: '5fc1bc24f217f51984ffa8fb82b05a8022a1bc13', class: "duet-card-footer" }, h("slot", { key: '3225e28c9fae8e9a7d712ec2f7edca2848c81bac', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -199,7 +199,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardVariation"
                         }
                     }
@@ -386,7 +386,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardPadding": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardPadding"
                         }
                     }
@@ -519,7 +519,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardToggleEvent"
                         }
                     }

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

@@ -579,7 +579,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -600,7 +600,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -621,7 +621,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }

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

@@ -303,7 +303,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'b1df7c5770002dd9425d26bf8fa17d3721f601d2', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'faa1626d1b3317a950205d14d078fbe0237d7415', class: classes }, h("button", Object.assign({ key: '10cc3c7ffd551371d87683ed1f77ac4e8f26a054', 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: '09730f09588f700c71c44b5a553e2d9f8697ba23', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '5c24873e683e50fe2638d484259298cda0e787e3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '4b3637344329df9466503eac30a67d349fa182df' })))), this.variation === "input" && (h("span", { key: '110a424cd1b0c929a93150e286aece0d225570c5', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '42b26053fda75b29e3c7cdfa659547142478635a', 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: '6363c8549b51dd39b76e8f72f57c23450b963923', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7431ce93955a8cebc8d2f38cee1e7e36ceaee7cf', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'd26a8c7e52b1c4c7f52f82943e8fb678a9350fc2' })), h("button", { key: '1cca88cfde7c8dba8f455140f17ee2aade08cde5', 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: '9a68ecb75fb3a364875dfd4d641f47c800d0582a', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'c3d47adc6647a5d70ffc49887a300faf937759c4', class: classes }, h("input", Object.assign({ key: 'c557b5098446b6e3cf9b44e6d55b1adb09a5be24', "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: '9dac1a2fca9e959933fda89eef2dd17434e71361', htmlFor: identifier }, this.icon && (h("span", { key: 'ae307754bbdd4907a829e31ee25082463b4f216b', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'cba0d0deff98f3900974e1aa583927ae7747102c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'be2dda983e43069160117f83d20ada5d003e19f8', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8efc83f4fa6c1960862f001737cc0a382f2e64e1' }), this.popupElement && (h("span", { key: '11d2f0c6552c34208db15624bdcbaa4fb2f4806b', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'fb05d3357ecb174ca39e77473ade54c7a771b5cc', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'b9788ff66787c6ad9f01e0430087cdaf8aaa7419', class: classes }, h("slot", { key: '52e3600944848b6a7fe4bd9b1afb5bb2dfe57909', name: "input" }), h("label", { key: '2f68754b97f21f763ffd59ae5081f661f831ee3a', htmlFor: identifier }, this.icon && (h("span", { key: '45bac9d17f7fd94c8214438175f1980d9f61bf8a', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'f0512358b9ff4ca4f70cf0af9d6b8a4e2c5997b1', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ccfc7316e3e366ba20a315bac570fd30f68b1bc0', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '0d715c904b0a004fa16467801c598b6b485aea70' }))))));
+        return (h(Host, { key: '7be8a97618afcc5aa95a73b6999cbd21a9efe66d', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '20a79f42019bb5456940c408f16cfe4398ce752b', class: classes }, h("button", Object.assign({ key: '0da848870e5d364e5a0c96286863abb8846f3b43', 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: '65963c49ac15e31be9e6c155d713895011247c75', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '6bdaf78c4129a2e195b2c8d8615fbc030892b35f', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '115c67252b400a3796064d80b48c940f5db630f6' })))), this.variation === "input" && (h("span", { key: 'f88e9e882256e176835645274c7f3ad5feeb43f4', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '8966730749b28a27a8d9c3ad0cc5384d7365a224', 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: '0c5090f2ae94e37ca202aecfdd26793617d96fcb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '296fc12572a339b123691ad64e5140187bc8ce6f', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '52de610f0eef8aaf1fc353e4832460823b3483b9' })), h("button", { key: '863d5afcb642ad16aea0567cf6043106231e7947', 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: 'bccf50bd40c6e81cb150f8667065b2951b592aa5', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'd4d7899b9a4398b11426408014e383041393a0cf', class: classes }, h("input", Object.assign({ key: 'b0ba6a4dbe7b1539188e433a26bfd8610619e4c5', "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: '8facc59cf10af72eec36071be9ae95556591d1cf', htmlFor: identifier }, this.icon && (h("span", { key: '91f1eac1be716140991470852ed8a0844f2b9cec', class: "duet-chip-icon-container" }, h("duet-icon", { key: '27053a7b32e80be22bcc07e6b59f224cd3c6cc6d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '912f00ad9abb15c939e0ab857b89ae94252335c7', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '549f86327697adc292e4ea26d3c5b582b5b19509' }), this.popupElement && (h("span", { key: 'e6f6c8d0996bbfa904d27deeec7e3c51ce2f4a6d', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'b0e8c8db27bb4f226c36d84c1cfe5b9d09da4b54', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'a7810754fc8da2acf0e7c1509202f358b5b01589', class: classes }, h("slot", { key: '282c8898695898de513270a8e885762aa0ddab6b', name: "input" }), h("label", { key: 'e5563a86a6e3f9d948a0edaded7230f2eb99410d', htmlFor: identifier }, this.icon && (h("span", { key: '606119672d3bcb9d2db6d7650ed4009a241588e7', class: "duet-chip-icon-container" }, h("duet-icon", { key: '1dfd234360874e73c5b7b6cdef3893909db3a529', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '81134c606d6e65e10af40eb97d708c4591f31ff6', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '2a3b27a04ab0e0d14a65cd3aef6ea4bcee9e5367' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -347,7 +347,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
                         }
                     }
@@ -373,7 +373,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipSize"
                         }
                     }
@@ -648,7 +648,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -669,7 +669,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -690,7 +690,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -711,7 +711,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }

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

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '55c7be96c4af72eca86ca4ac162d8a6437847188', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '63a3a765c707f7167a9ceb051aca670919d11b95', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'a6c403cbd2f31cb9accc560cc8e50c318ec0720b', class: {
+        return (h(Host, { key: '265d69c7fac47ab340e1bce60afeecacfad74b6a', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '450d7b7f3fcc4e48c25b138b2faa1c948a1c3bea', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'cbc25ccaf46a53ec786f3fa24eeed574666d93cc', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '33bbad5a921fc12b1c1cee9214d15b980c02548e', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '034ea9806dbba29937fdf57e3fba5f1ff5130160', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -206,7 +206,7 @@ export class DuetChoice {
         if (this.accessibleDescribedBy) {
             return this.accessibleDescribedBy;
         }
-        if (this.collapsible || this.hasInfo) {
+        if ((this.collapsible || this.hasInfo) && this.getExpanded()) {
             if (this.hasHeader) {
                 return this.headerId;
             }
@@ -1062,7 +1062,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1083,7 +1083,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1104,7 +1104,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }