@duetds/components 7.0.3 → 7.0.4

package/lib/cjs/{teleport-04ad16c2.js → teleport-18e2b4b9.js}

@@ -12,6 +12,8 @@
  */
 class Teleport {
   constructor(element, target) {
+    this.isReact = this._isReact();
+    this.isActive = false;
     this.element = element;
     this.target = target || document.body;
     this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
@@ -20,6 +22,10 @@ class Teleport {
    * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
    */
   go(makeSiblingsInert = false) {
+    // Teleporting breaks modals in React
+    if (this.isReact && makeSiblingsInert) {
+      return;
+    }
     this.stub = document.createElement("div");
     this.element.insertAdjacentElement("afterend", this.stub);
     this.target.appendChild(this.element);
@@ -28,8 +34,13 @@ class Teleport {
     }
     this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
     this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
+    this.isActive = true;
   }
   resume(delay = 0) {
+    if (!this.isActive) {
+      return;
+    }
+    this.isActive = false;
     if (delay) {
       setTimeout(this._resume.bind(this), delay);
     }
@@ -83,6 +94,9 @@ class Teleport {
       }
     });
   }
+  _isReact() {
+    return !!Object.keys(document).find(key => key.includes("react"));
+  }
 }
 
 exports.Teleport = Teleport;

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

@@ -130,25 +130,25 @@
   transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
 }
-.duet-chip-container.duet-chip-filter-checked {
+.duet-chip-container.duet-chip-filter-checked, .duet-chip-container.duet-chip-radio-checked {
   background: rgb(230, 242, 248);
   border-color: rgb(230, 242, 248);
 }
-.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container {
+.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container, .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container {
   padding-right: 8px;
 }
-.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark) {
+.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark), .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark) {
   width: 0;
   overflow: hidden;
   transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
 }
-.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark {
+.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark, .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark {
   width: auto;
   transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(1);
 }
-.duet-chip-container.duet-chip-filter-checked.duet-theme-turva {
+.duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
   background: rgb(245, 245, 247);
   border-color: rgb(245, 245, 247);
 }

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

@@ -95,6 +95,15 @@ export class DuetChip {
       this.checked = !this.checked;
       this.emitChange(evt);
     };
+    /**
+     * Change checked state and emit duetChange event.
+     */
+    this.onRadioChange = (evt) => {
+      const input = this.focusableElement;
+      const inputChecked = input.checked;
+      this.checked = inputChecked;
+      this.emitChange(evt);
+    };
     /**
      * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
      */
@@ -125,6 +134,16 @@ export class DuetChip {
     this.name = undefined;
     this.checked = false;
   }
+  clearOtherRadioButtons() {
+    if (this.variation === "radio" && this.checked) {
+      const chips = document.querySelectorAll(`duet-chip[variation="radio"][name="${this.name}"]`);
+      chips.forEach(chip => {
+        if (chip !== this.element) {
+          chip.checked = false;
+        }
+      });
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -148,6 +167,7 @@ export class DuetChip {
       "duet-chip-has-icon": !!this.icon,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+      "duet-chip-radio-checked": this.variation === "radio" && this.checked,
       "duet-chip-filter-popup-open": this.popupOpen,
     };
     const focusHandlers = {
@@ -155,7 +175,7 @@ export class DuetChip {
       onBlur: this.onBlur,
       ref: el => (this.focusableElement = el),
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" }))))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
   }
   static get is() { return "duet-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -193,7 +213,7 @@ export class DuetChip {
         "mutable": false,
         "complexType": {
           "original": "DuetChipVariation",
-          "resolved": "\"button\" | \"filter\" | \"input\"",
+          "resolved": "\"button\" | \"filter\" | \"input\" | \"radio\"",
           "references": {
             "DuetChipVariation": {
               "location": "local",
@@ -205,7 +225,7 @@ export class DuetChip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nWARNING: Input variation is still work-in-progress and subject to change."
+          "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nRadio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.\nWARNING: Input variation is still work-in-progress and subject to change."
         },
         "attribute": "variation",
         "reflect": false,
@@ -425,4 +445,10 @@ export class DuetChip {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "clearOtherRadioButtons"
+      }];
+  }
 }

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

@@ -50,6 +50,13 @@
 .duet-promo-card.duet-m-0 {
   margin: 0 !important;
 }
+.duet-promo-card .content-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: inherit;
+  text-decoration: none;
+}
 .duet-promo-card .image {
   position: relative;
   width: 100%;

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

@@ -12,6 +12,7 @@ export class DuetPromoCard {
     this.textColor = "secondary";
     this.image = "";
     this.headingLevel = "h3";
+    this.url = undefined;
   }
   /**
    * Component lifecycle events.
@@ -32,11 +33,12 @@ export class DuetPromoCard {
     const bannerStyles = {
       backgroundColor: backgroundColor ? backgroundColor : "none",
     };
+    const TagName = this.url ? "a" : "div";
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("aside", { class: {
         "duet-promo-card": true,
         "duet-theme-turva": this.theme === "turva",
         "no-bg-color": !this.backgroundColor,
-      }, style: bannerStyles }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("slot", { name: "heading" })))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("slot", { name: "description" })))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
+      }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper" }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("slot", { name: "heading" })))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("slot", { name: "description" })))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
   }
   static get is() { return "duet-promo-card"; }
   static get encapsulation() { return "shadow"; }
@@ -184,6 +186,23 @@ export class DuetPromoCard {
         "attribute": "heading-level",
         "reflect": false,
         "defaultValue": "\"h3\""
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A destination to link to, rendered in the href attribute of a link."
+        },
+        "attribute": "url",
+        "reflect": false
       }
     };
   }

package/lib/collection/utils/teleport.js

@@ -10,6 +10,8 @@
  */
 export class Teleport {
   constructor(element, target) {
+    this.isReact = this._isReact();
+    this.isActive = false;
     this.element = element;
     this.target = target || document.body;
     this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
@@ -18,6 +20,10 @@ export class Teleport {
    * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
    */
   go(makeSiblingsInert = false) {
+    // Teleporting breaks modals in React
+    if (this.isReact && makeSiblingsInert) {
+      return;
+    }
     this.stub = document.createElement("div");
     this.element.insertAdjacentElement("afterend", this.stub);
     this.target.appendChild(this.element);
@@ -26,8 +32,13 @@ export class Teleport {
     }
     this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
     this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
+    this.isActive = true;
   }
   resume(delay = 0) {
+    if (!this.isActive) {
+      return;
+    }
+    this.isActive = false;
     if (delay) {
       setTimeout(this._resume.bind(this), delay);
     }
@@ -81,4 +92,7 @@ export class Teleport {
       }
     });
   }
+  _isReact() {
+    return !!Object.keys(document).find(key => key.includes("react"));
+  }
 }

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-781b7543.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-97227973.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-8d1bc112.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-a058928f.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getColorByName } from './p-de68431d.js';
-import { d as defineCustomElement$4 } from './p-17d6c361.js';
-import { d as defineCustomElement$3 } from './p-56964577.js';
-import { d as defineCustomElement$2 } from './p-354db269.js';
+import { d as defineCustomElement$4 } from './p-bb04fe7f.js';
+import { d as defineCustomElement$3 } from './p-42c5573b.js';
+import { d as defineCustomElement$2 } from './p-71d31bcd.js';
 
 const duetBannerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-56964577.js';
+import { d as defineCustomElement$2 } from './p-42c5573b.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}";
 

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-03baceb5.js';
-import { d as defineCustomElement$2 } from './p-56964577.js';
+import { d as defineCustomElement$2 } from './p-42c5573b.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-50541198.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-9284aee2.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-56964577.js';
-import { d as defineCustomElement$2 } from './p-354db269.js';
+import { d as defineCustomElement$3 } from './p-42c5573b.js';
+import { d as defineCustomElement$2 } from './p-71d31bcd.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 

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

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

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-de68431d.js';
-import { d as defineCustomElement$3 } from './p-56964577.js';
-import { d as defineCustomElement$2 } from './p-bed00554.js';
+import { d as defineCustomElement$3 } from './p-42c5573b.js';
+import { d as defineCustomElement$2 } from './p-2007bad3.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

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

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

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

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

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
-import { d as defineCustomElement$2 } from './p-56964577.js';
+import { d as defineCustomElement$2 } from './p-42c5573b.js';
 
-const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease, padding 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-chip-container.duet-theme-turva:hover button,.duet-chip-container.duet-theme-turva:hover label{color:rgb(23, 28, 58) !important}.duet-chip-container:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-chip-container:hover button,.duet-chip-container:hover label{color:rgb(0, 119, 179) !important}.duet-chip-container:hover.duet-theme-turva button,.duet-chip-container:hover.duet-theme-turva label{color:rgb(198, 12, 48) !important}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:7px 16px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container button:hover,.duet-chip-container label:hover{color:rgb(0, 119, 179) !important}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:8px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container{padding-right:8px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container div.duet-chip-popup-disclosure{padding-left:8px}.duet-chip-container div.duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
+const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease, padding 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-chip-container.duet-theme-turva:hover button,.duet-chip-container.duet-theme-turva:hover label{color:rgb(23, 28, 58) !important}.duet-chip-container:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-chip-container:hover button,.duet-chip-container:hover label{color:rgb(0, 119, 179) !important}.duet-chip-container:hover.duet-theme-turva button,.duet-chip-container:hover.duet-theme-turva label{color:rgb(198, 12, 48) !important}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:7px 16px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container button:hover,.duet-chip-container label:hover{color:rgb(0, 119, 179) !important}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:8px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:8px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container div.duet-chip-popup-disclosure{padding-left:8px}.duet-chip-container div.duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
 
 const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
@@ -105,6 +105,15 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       this.checked = !this.checked;
       this.emitChange(evt);
     };
+    /**
+     * Change checked state and emit duetChange event.
+     */
+    this.onRadioChange = (evt) => {
+      const input = this.focusableElement;
+      const inputChecked = input.checked;
+      this.checked = inputChecked;
+      this.emitChange(evt);
+    };
     /**
      * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
      */
@@ -135,6 +144,16 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.name = undefined;
     this.checked = false;
   }
+  clearOtherRadioButtons() {
+    if (this.variation === "radio" && this.checked) {
+      const chips = document.querySelectorAll(`duet-chip[variation="radio"][name="${this.name}"]`);
+      chips.forEach(chip => {
+        if (chip !== this.element) {
+          chip.checked = false;
+        }
+      });
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -158,6 +177,7 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       "duet-chip-has-icon": !!this.icon,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+      "duet-chip-radio-checked": this.variation === "radio" && this.checked,
       "duet-chip-filter-popup-open": this.popupOpen,
     };
     const focusHandlers = {
@@ -165,9 +185,12 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       onBlur: this.onBlur,
       ref: el => (this.focusableElement = el),
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" }))))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
   }
   get element() { return this; }
+  static get watchers() { return {
+    "checked": ["clearOtherRadioButtons"]
+  }; }
   static get style() { return duetChipCss; }
 }, [1, "duet-chip", {
     "accessibleLabel": [1, "accessible-label"],

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$8 } from './p-f51043ac.js';
-import { d as defineCustomElement$7 } from './p-4ae08034.js';
-import { d as defineCustomElement$6 } from './p-56964577.js';
-import { d as defineCustomElement$5 } from './p-94169381.js';
-import { d as defineCustomElement$4 } from './p-09eb437f.js';
-import { d as defineCustomElement$3 } from './p-c9bfb590.js';
-import { d as defineCustomElement$2 } from './p-f6227b28.js';
+import { d as defineCustomElement$8 } from './p-b267cbea.js';
+import { d as defineCustomElement$7 } from './p-77f70890.js';
+import { d as defineCustomElement$6 } from './p-42c5573b.js';
+import { d as defineCustomElement$5 } from './p-cfb28a0c.js';
+import { d as defineCustomElement$4 } from './p-1aff20dc.js';
+import { d as defineCustomElement$3 } from './p-5c3bcf22.js';
+import { d as defineCustomElement$2 } from './p-2f34816f.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-57a42162.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { h as hasSlot } from './p-9d915d45.js';
 import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
@@ -9,10 +9,10 @@ import { c as createID } from './p-c1325e35.js';
 import { F as FocusGuard } from './p-061830ef.js';
 import { i as isKeyboardClick, a as isQuestionKey, b as isEscapeKey } from './p-d8549efe.js';
 import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-03baceb5.js';
-import { d as defineCustomElement$5 } from './p-f51043ac.js';
-import { d as defineCustomElement$4 } from './p-56964577.js';
-import { d as defineCustomElement$3 } from './p-bed00554.js';
-import { d as defineCustomElement$2 } from './p-f6227b28.js';
+import { d as defineCustomElement$5 } from './p-b267cbea.js';
+import { d as defineCustomElement$4 } from './p-42c5573b.js';
+import { d as defineCustomElement$3 } from './p-2007bad3.js';
+import { d as defineCustomElement$2 } from './p-2f34816f.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-bccea015.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-57a42162.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
 import { f as font_size_medium, t as tokens } from './p-b519ac77.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
@@ -9,7 +9,7 @@ import { h as hasSlot } from './p-9d915d45.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
-import { d as defineCustomElement$2 } from './p-56964577.js';
+import { d as defineCustomElement$2 } from './p-42c5573b.js';
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(0, 41, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";