@duetds/components 9.5.2 → 9.7.0

package/lib/dist-custom-elements/{p-673093b5.js → p-1dd720f0.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-81505f0b.js';
 import { f as formSearch } from './p-d004da5f.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
@@ -9,15 +9,15 @@ import { c as cleanValue, r as resetCursor } from './p-df7874f9.js';
 import { b as isEscapeKey, c as isEnterKey, h as isBackspaceKey, j as isArrowLeftKey, k as isArrowRightKey } from './p-8db11326.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
 import { c as checkNamedSlotElement } from './p-f21662ea.js';
-import { d as defineCustomElement$9 } from './p-accb4fa9.js';
-import { d as defineCustomElement$8 } from './p-b54dea97.js';
-import { d as defineCustomElement$7 } from './p-136dc3af.js';
-import { d as defineCustomElement$6 } from './p-dbea5087.js';
-import { d as defineCustomElement$5 } from './p-320da2a2.js';
-import { d as defineCustomElement$4 } from './p-6f36f4f3.js';
-import { d as defineCustomElement$3 } from './p-ef2dcc5a.js';
-import { d as defineCustomElement$2 } from './p-9126e8a2.js';
-import { d as defineCustomElement$1 } from './p-6646e07d.js';
+import { d as defineCustomElement$9 } from './p-9091f589.js';
+import { d as defineCustomElement$8 } from './p-78076fd7.js';
+import { d as defineCustomElement$7 } from './p-8c022d66.js';
+import { d as defineCustomElement$6 } from './p-f5c940d5.js';
+import { d as defineCustomElement$5 } from './p-c6b96452.js';
+import { d as defineCustomElement$4 } from './p-55d85326.js';
+import { d as defineCustomElement$3 } from './p-d6ce295d.js';
+import { d as defineCustomElement$2 } from './p-bda6f3f9.js';
+import { d as defineCustomElement$1 } from './p-cf873d23.js';
 
 var formEmail={"title":"form-email","tags":"form email","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 23.999c-3.205 0-6.218-1.248-8.484-3.514S.001 15.206.001 12.001s1.248-6.218 3.514-8.485C5.782 1.25 8.795.001 12 .001s6.218 1.248 8.485 3.514A11.92 11.92 0 0 1 24 12v2.25A3.754 3.754 0 0 1 20.25 18a3.77 3.77 0 0 1-3.48-2.365A6.009 6.009 0 0 1 12 18c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6v2.25c0 1.241 1.009 2.25 2.25 2.25s2.25-1.009 2.25-2.25V12c0-2.804-1.092-5.441-3.075-7.424A10.433 10.433 0 0 0 12 1.501c-2.804 0-5.441 1.092-7.424 3.075S1.501 9.196 1.501 12c0 2.805 1.092 5.441 3.075 7.424s4.619 3.074 7.423 3.074c2.257 0 4.494-.746 6.299-2.1a.749.749 0 1 1 .9 1.199A12.049 12.049 0 0 1 12 23.999zM12 7.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z\"/></svg>"};
 
@@ -270,6 +270,12 @@ const DuetInput = /*@__PURE__*/ proxyCustomElement(class DuetInput extends H {
             this.timeoutId = setTimeout(emitEvent, this.debounce);
         }
     }
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity() {
+        return this.nativeInput.validity;
+    }
     /**
      * Component lifecycle events.
      */
@@ -529,6 +535,7 @@ const DuetInput = /*@__PURE__*/ proxyCustomElement(class DuetInput extends H {
         "autoComplete": [1, "auto-complete"],
         "disallowPattern": [1, "disallow-pattern"],
         "value": [1025],
+        "validity": [2064],
         "tooltip": [1],
         "tooltipDirection": [1, "tooltip-direction"],
         "language": [32],

package/lib/dist-custom-elements/{p-ce7d290f.js → p-1f125fa8.js}

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { h as hasSlot, a as getElementsFromDefaultSlot } from './p-f21662ea.js';
-import { d as defineCustomElement$4 } from './p-accb4fa9.js';
-import { d as defineCustomElement$3 } from './p-136dc3af.js';
-import { d as defineCustomElement$2 } from './p-320da2a2.js';
-import { d as defineCustomElement$1 } from './p-6646e07d.js';
+import { d as defineCustomElement$4 } from './p-9091f589.js';
+import { d as defineCustomElement$3 } from './p-8c022d66.js';
+import { d as defineCustomElement$2 } from './p-c6b96452.js';
+import { d as defineCustomElement$1 } from './p-cf873d23.js';
 
-const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{position:relative;display:flex}:host .duet-scrollable-items.buttons .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute{position:absolute;top:0;z-index:202;width:auto;height:100%;padding:0 16px;background-color:rgb(255, 255, 255)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left{left:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right{right:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button{position:absolute;display:flex;flex:0 0 auto;flex-basis:40px;align-items:center;height:100%;cursor:pointer;transition:transform 300ms ease}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon{transition:transform 300ms ease;transform:scale(0.8)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left{left:0;padding:10px 10px 10px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--right{right:0;padding:10px 0 10px 10px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--top{align-items:flex-start}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom{align-items:flex-end}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute{padding:0 7px;border:1px solid rgb(212, 223, 229)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left{border-radius:8px 0 0 8px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right{border-radius:0 8px 8px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(0, 119, 179);border-width:2px;}.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden]{display:none !important}:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;padding-inline:10px;margin-inline:-10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);-webkit-mask-size:50% 100%, 50% 100%;-webkit-mask-position:left, right;-webkit-mask-repeat:no-repeat;mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);mask-size:50% 100%, 50% 100%;mask-position:left, right;mask-repeat:no-repeat;}:host .duet-scrollable-items .duet-scrollable-list--absolute{padding-right:0;padding-left:2px;margin-inline:0;-webkit-mask:none !important;mask:none !important}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items .duet-scrollable-list.gap-none{gap:0}:host .duet-scrollable-items .duet-scrollable-list.gap-large{gap:20px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small{padding-top:4px;padding-bottom:4px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--x-small{padding-top:8px;padding-bottom:8px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--small{padding-top:12px;padding-bottom:12px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--medium{padding-top:16px;padding-bottom:16px}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
+const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{position:relative;display:flex}:host .duet-scrollable-items.buttons .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute{position:absolute;top:0;z-index:210;width:auto;height:100%;padding:0 16px;background-color:rgb(255, 255, 255)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left{left:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right{right:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button{position:absolute;display:flex;flex:0 0 auto;flex-basis:40px;align-items:center;height:100%;cursor:pointer;transition:transform 300ms ease}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon{transition:transform 300ms ease;transform:scale(0.8)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left{left:0;padding:10px 10px 10px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--right{right:0;padding:10px 0 10px 10px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--top{align-items:flex-start}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom{align-items:flex-end}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute{padding:0 7px;border:1px solid rgb(212, 223, 229)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left{border-radius:8px 0 0 8px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right{border-radius:0 8px 8px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(0, 119, 179);border-width:2px;}.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden]{display:none !important}:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;padding-inline:10px;margin-inline:-10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);-webkit-mask-size:50% 100%, 50% 100%;-webkit-mask-position:left, right;-webkit-mask-repeat:no-repeat;mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);mask-size:50% 100%, 50% 100%;mask-position:left, right;mask-repeat:no-repeat;}:host .duet-scrollable-items .duet-scrollable-list--absolute{padding-right:0;padding-left:2px;margin-inline:0;-webkit-mask:none !important;mask:none !important}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items .duet-scrollable-list.gap-none{gap:0}:host .duet-scrollable-items .duet-scrollable-list.gap-large{gap:20px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small{padding-top:4px;padding-bottom:4px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--x-small{padding-top:8px;padding-bottom:8px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--small{padding-top:12px;padding-bottom:12px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--medium{padding-top:16px;padding-bottom:16px}:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch{width:100%}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
 const DuetScrollableStyle0 = duetScrollableCss;
 
 const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable extends H {
@@ -50,6 +50,7 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
         this.padding = "none";
         this.gap = "large";
         this.selected = 0;
+        this.stretch = false;
     }
     watchPropHandler(newValue) {
         this.scrollToElement(newValue, "center");
@@ -148,12 +149,10 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
         else if (container.scrollLeft > 0) {
             this.scrollPaneAtStart = false;
         }
-        if (container.clientWidth + container.scrollLeft + this.getOverlayWidth() >= container.scrollWidth) {
-            this.scrollPaneAtEnd = true;
-        }
-        else if (container.clientWidth + container.scrollLeft + this.getOverlayWidth() < container.scrollWidth) {
-            this.scrollPaneAtEnd = false;
-        }
+        // Round both values to handle sub-pixel precision issues
+        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const totalContentWidth = Math.round(container.scrollWidth);
+        this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
     scrollToElement(index = this.currentIndex, inline) {
         const elements = this.getScrollPaneElements();
@@ -200,12 +199,7 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
         this.scrollToElement(last + 1, "center");
     }
     getOverlayWidth() {
-        // This is a hot-fix for the duet-tab-group component not
-        // working properly with turva theme. This should be properly fixed in the future.
-        if (this.buttonPosition === "absolute") {
-            return this.theme === "turva" ? 1 : 0;
-        }
-        return 10;
+        return this.buttonPosition === "absolute" ? 0 : 10;
     }
     renderButton(direction) {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
@@ -241,25 +235,26 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '73d85963b8e4016fe3d891925fe817e0a7cd9cb5', class: {
+        return (h(Host, { key: '13b04f9678d2d876b3813ff3be4400c6d3cb8706', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'c34006e80ca8d106b496b124d73fc23063fa6e3e', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '5459a8a656904d8cf5930623b0590b533055be36', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'cd7768e824f0d392c78fbc0b6dc5cb01e48e3402', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '0c5978598a028065857e7f68f68eb1f6069eb006', name: "collapse-button-label" })))), h("div", { key: '769b377acbb2108d336d00ded087feffa8b65792', class: {
+            } }, h("duet-button", { key: '0e1a7e9dd6e442d653ce8dbdc19831b3299d47c5', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '8c534bbeea9b0f15915958ae3947ca479a141a07', name: "collapse-button-label" })))), h("div", { key: '333736ff3035d3ba6e12b6f73c38fad12af6ec6a', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '36d1d94c465dcc3a2759bbfb7dfa092528824e9d', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '78c52fc83f55f4e9ab7bd9a3d12ec2c7a88f2e3f', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '4ce1914b23bc31c920b3ddffc064b323a2d66002' })), this.buttons && this.renderButton("right"))));
+                "duet-scrollable-stretch": this.stretch,
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '95205e7b789573b3f5bfa2e542d81e2068968e93' })), this.buttons && this.renderButton("right"))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -277,6 +272,7 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
         "padding": [1],
         "gap": [1],
         "selected": [1026],
+        "stretch": [4],
         "scrollPaneAtStart": [32],
         "needsScrolling": [32],
         "scrollPaneAtEnd": [32],

package/lib/dist-custom-elements/{p-c3d01088.js → p-233b4c3c.js}

@@ -1,24 +1,24 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-81505f0b.js';
 import { s as spaceXSmall } from './p-4c179c1e.js';
-import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, d as defineCustomElement$4 } from './p-6f36f4f3.js';
+import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, d as defineCustomElement$4 } from './p-55d85326.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { f as focusElement } from './p-e30dc66d.js';
 import { g as isArrowDownKey, b as isEscapeKey, f as isArrowUpKey, d as isTabKey } from './p-8db11326.js';
 import { a as getLanguage } from './p-35375593.js';
-import { T as Teleport } from './p-ca3cb21e.js';
-import { d as defineCustomElement$b } from './p-accb4fa9.js';
-import { d as defineCustomElement$a } from './p-b54dea97.js';
-import { d as defineCustomElement$9 } from './p-136dc3af.js';
-import { d as defineCustomElement$8 } from './p-673093b5.js';
-import { d as defineCustomElement$7 } from './p-dbea5087.js';
-import { d as defineCustomElement$6 } from './p-2bb0877f.js';
-import { d as defineCustomElement$5 } from './p-320da2a2.js';
-import { d as defineCustomElement$3 } from './p-ef2dcc5a.js';
-import { d as defineCustomElement$2 } from './p-9126e8a2.js';
-import { d as defineCustomElement$1 } from './p-6646e07d.js';
+import { T as Teleport } from './p-8cb0e6bd.js';
+import { d as defineCustomElement$b } from './p-9091f589.js';
+import { d as defineCustomElement$a } from './p-78076fd7.js';
+import { d as defineCustomElement$9 } from './p-8c022d66.js';
+import { d as defineCustomElement$8 } from './p-1dd720f0.js';
+import { d as defineCustomElement$7 } from './p-f5c940d5.js';
+import { d as defineCustomElement$6 } from './p-9760ce0e.js';
+import { d as defineCustomElement$5 } from './p-c6b96452.js';
+import { d as defineCustomElement$3 } from './p-d6ce295d.js';
+import { d as defineCustomElement$2 } from './p-bda6f3f9.js';
+import { d as defineCustomElement$1 } from './p-cf873d23.js';
 
 const duetPopupMenuCss = "*,*::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}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
 const DuetPopupMenuStyle0 = duetPopupMenuCss;
@@ -34,6 +34,11 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             fi: "Suodata valikkoa",
             sv: "Filtrera meny",
         };
+        this.filterResultCountLabel = {
+            en: "items match filter",
+            fi: "kohtaa vastaa suodatinta",
+            sv: "menyalternativ matchar filtret",
+        };
         this.setOpenButton = (element) => {
             if (!element) {
                 return;
@@ -77,13 +82,15 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
             const items = this.itemElements;
             items.forEach(item => {
+                var _a;
                 item.style.display =
                     !filterText ||
                         item.textContent.toLowerCase().includes(filterText) ||
-                        item.value.toLowerCase().includes(filterText)
+                        ((_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText))
                         ? ""
                         : "none";
             });
+            this.filterResultCount = items.filter(i => i.style.display !== "none").length;
         };
         this.handleKeyDownOnFilter = (ev) => {
             var _a;
@@ -94,6 +101,7 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         this.open = false;
         this.menuY = undefined;
         this.menuX = undefined;
+        this.filterResultCount = undefined;
         this.language = getLanguage();
         this.accessibleLabel = undefined;
         this.accessibleRole = "menu";
@@ -334,14 +342,17 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '245da481a4c3ac550648005777f7f7724c8e7806' }, h("div", { key: '17069b93e411e4f951dcf4f591aacf90a0fcf7ec', ref: element => {
+        return (h(Host, { key: '4f4ca864cfb97bc6556bf03328bf67aebe9e87e8' }, h("div", { key: 'e9b910938c461f74532f3bcf0c70ace1334dfeb2', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '24e126dbabf9089b5d3bed8d20c4a2d727531a0e' }, h("duet-input", { key: '719101f79b6678a0e7b28694e2c630e902f58bb2', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-spacer", { key: 'c49e9178d065230acbc63f163b9b31dfa53a56ae', size: "xx-small" }))), h("slot", { key: 'd6e2cbd68cd5f5961d5c486a974b72083f2cbae0' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '6c501ae153f306bad04eadbc02917c07f7beed3d' }, h("duet-input", { key: '427f1ab729a887ca89925bbbf2aeb3e803c92428', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '726ba29261adca2c956588370b1c41b79cd6fb68' }, h("span", { key: '1ede14ac5d046b1d5b1a30e3ab58c3d3f19c09e4', role: "status" }, `
+                  ${this.filterResultCount}/${this.itemElements.length}
+                  ${this.filterResultCountLabel[this.language]}
+                `)), h("duet-spacer", { key: '1c1cfce92b76b59e5c5be5bb625da22768c979ec', size: "xx-small" }))), h("slot", { key: '8490807b5f19ca1bb49f1e5432b20b3be5924844' }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -367,6 +378,7 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         "open": [32],
         "menuY": [32],
         "menuX": [32],
+        "filterResultCount": [32],
         "language": [32],
         "isOpen": [64],
         "show": [64],

package/lib/dist-custom-elements/{p-a571ab43.js → p-25c3394c.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 
 const duetBadgeCss = "*,*::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:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{display:inline-block;width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fdecc9}.duet-badge.danger{background:#f7d2dc}.duet-badge.danger.duet-theme-turva{background:#f7d2dc}.duet-badge.success{background:#d6e6e1}.duet-badge.success.duet-theme-turva{background:#d6e6e1}.duet-badge.subtle{color:rgb(98, 121, 138);background:none;outline:1px solid rgb(212, 223, 229);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(113, 118, 132);background:none;outline-color:rgb(222, 224, 228)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#f9c153}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.subtle{border-color:rgb(181, 198, 208);outline-color:rgb(8, 42, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(199, 202, 207);outline-color:rgb(23, 28, 58)}";
@@ -29,12 +29,12 @@ const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
      */
     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' }))));
     }
     get element() { return this; }
     static get style() { return DuetBadgeStyle0; }

package/lib/dist-custom-elements/{p-a317fac9.js → p-25ea4fbc.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { w as watchForOptions } from './p-7d8a2628.js';
 
@@ -79,7 +79,7 @@ const DuetList = /*@__PURE__*/ proxyCustomElement(class DuetList extends H {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '7db97f4b853a8c566565c13d19c6699cb61aa0f1', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '9def9a838232a96dc345c2fdaa72ad1bf0cf773c' })));
+        return (h("dl", { key: '9e004e8a4752dd9ebcb4faf2881a2520823e231b', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'c7678a8d8ad217e33c8c69398cdbe18f23f5fa1d' })));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/{p-8882b67b.js → p-2a7ecb51.js}

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { h as hasSlot } from './p-f21662ea.js';
-import { d as defineCustomElement$1 } from './p-b54dea97.js';
+import { d as defineCustomElement$1 } from './p-78076fd7.js';
 
 const duetFieldsetCss = "*,*::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-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display:block;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\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-theme-turva .duet-legend-wrapper{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-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{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:0.875rem;font-weight:400;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{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(214, 28, 82)}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 const DuetFieldsetStyle0 = duetFieldsetCss;
@@ -43,20 +43,20 @@ const DuetFieldset = /*@__PURE__*/ proxyCustomElement(class DuetFieldset extends
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b168d38f9adb462f0f44e4e5d2f4696ca4d7bc10', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '7800fa169b7871195421414bf75c0d919d12bf9b', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '689308ad380f1776b68044eececf0a1b6a970a26', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '154a0abb50c3f8e73f18743ebb0df6561f0cc545', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '5f1926deca424959efcff40befe8779d2077998f', id: this.labelId }, h(this.labelHeadingLevel, { key: '19d831a69931e0b557efff7f2653b23a017c136a' }, this.label), this.caption && h("span", { key: '03daf2a72c3a0bd7d8d52f428c2d26ed3d008bed' }, this.caption)), h("div", { key: '790d7c7ac6f3141415cbe4cfe3a1e5196c354a32', class: {
+            } }, h("legend", { key: 'e179e8a70e0e2ec56fa5c03fbf61c80d93f2ee39', id: this.labelId }, h(this.labelHeadingLevel, { key: '345404d0d1633085c69e7b4eb8a91a0968d855e5' }, this.label), this.caption && h("span", { key: '68ea692153d49a86d5dc7ef6a1025010bd300562' }, this.caption)), h("div", { key: '14abd8ce6ae960076ca6c1f1cd4784331ace1cd9', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'cde80fe36abae43beaea46abe5f9995f16c04c7c', class: "duet-fieldset-label" }, h("span", { key: '9e67d598f47389ec90534d7899d399dc0558e24e', "aria-hidden": "true" }, this.label), h("slot", { key: '2d427290dc70d8d4f2ab05f03e283bf1cb9cd637', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '4ebecc5ab46bf1b48c6f3b981cfeb3c64de15393', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '9281fb9d06e5e5c359504ca84f1e5f4c4a2f136f', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'e3afdf3b06e81f9eb49ad8a16c5792a3fef7dc86' }), h("span", { key: '97ada7026bc7d9d5c659be4eab71eaa416edab4f', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '35ecd3fbb5810c1e374ebe8d104a28ae475effa3' }, this.error)))));
+            } }, h("div", { key: 'a449833d46bf641a644477fa2e3f5a1994dabdda', class: "duet-fieldset-label" }, h("span", { key: '8fd39462a54b101788bd32d0300e5a1fc5218170', "aria-hidden": "true" }, this.label), h("slot", { key: '801025782345d17a110ef0c6f950ca6390d4b26a', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5748cd9834d5bff9eca0f4ae738adb570610b309', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'dc6d8bf5191b312be93a94cdfa1546041f9faeec', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'cf69ca768a09d44ff8a64b2bf0e30e300034306d' }), h("span", { key: '0a7d9b4619f2f712ad87224bf2c89690b64e151c', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'd593737a2a9c22e9a0c2c22911e9a22ec892cbab' }, this.error)))));
     }
     get element() { return this; }
     static get style() { return DuetFieldsetStyle0; }

package/lib/dist-custom-elements/{p-6dd74d76.js → p-3132451c.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
 import { k as colorGrayLightest, l as colorBrandGrayTurva, n as colorPrimaryTurva, o as colorPrimary } from './p-4c179c1e.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
@@ -86,7 +86,7 @@ const DuetLogo = /*@__PURE__*/ proxyCustomElement(class DuetLogo extends H {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'cd8e66cfc274e3f41172ef96b07880d49099714b', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '4440c702c9c89c8ff2f94146c02849f04f5e055f', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '8028936edab2ebf0d354511650b7fee94fd47a1a', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'dab66b31a829a45902377e958bda7fc5de27bdf2', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

package/lib/dist-custom-elements/{p-ec26aeea.js → p-3a9b4b57.js}

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, e as enableUserIsTabbing } from './p-8db11326.js';
 import { g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$1 } from './p-136dc3af.js';
+import { d as defineCustomElement$1 } from './p-8c022d66.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:8px !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}:host(.input){margin-top:6px !important;margin-right:0 !important;margin-bottom:6px !important;margin-left:4px !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(8, 42, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(181, 198, 208);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 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(199, 202, 207)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(98, 121, 138) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;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;line-height:1rem;color:rgb(8, 42, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.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:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility: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{padding:0 !important;background:rgb(228, 241, 247);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(198, 225, 238)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.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;visibility: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;visibility:visible;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, 247, 250);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(222, 224, 228)}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(240, 247, 250);border-color:rgb(240, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input:hover{padding:1px !important;border-color:rgb(181, 198, 208);border-width:1px}.duet-chip-container.duet-chip-input.duet-chip-hover,.duet-chip-container.duet-chip-input.duet-chip-selected{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-input.duet-chip-hover .duet-chip-remove-button,.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button{right:0;width:34px;height:34px;background:transparent}.duet-chip-container.duet-chip-input.duet-chip-delete-focus{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input .duet-chip-input-button{margin-right:22px}.duet-chip-container.duet-chip-input .duet-chip-remove-button{position:absolute;top:-1px;right:-1px;width:36px;height:36px;padding-left:10px;border:3px solid transparent;border-radius:8px}.duet-chip-container.duet-chip-input .duet-chip-remove-button:hover{background:rgb(217, 236, 245);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-chip-selected{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input.duet-chip-selected.duet-chip-hover{background:rgb(217, 236, 245)}.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(198, 225, 238);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva:hover{border-color:rgb(199, 202, 207)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-hover{border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-input.duet-theme-turva .duet-chip-remove-button:hover{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected.duet-chip-hover{background:rgb(255, 213, 215);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(255, 185, 190);background-clip:padding-box}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;margin:0;cursor:pointer;border-width:2px;border-radius:8px;opacity:0;appearance:none}*::slotted([slot=input]:not([aria-disabled=true])){z-index:1}";
 const DuetChipStyle0 = duetChipCss;
@@ -315,7 +315,7 @@ const DuetChip = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
             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' }))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/{p-495fa25d.js → p-52e36342.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-81505f0b.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 

package/lib/dist-custom-elements/{p-6f36f4f3.js → p-55d85326.js}

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b7f952f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
 import { m as media_query_medium, a as media_query_large } from './p-f6000a03.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { b as isEscapeKey } from './p-8db11326.js';
 import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { d as defineCustomElement$4 } from './p-136dc3af.js';
-import { d as defineCustomElement$3 } from './p-ef2dcc5a.js';
-import { d as defineCustomElement$2 } from './p-9126e8a2.js';
-import { d as defineCustomElement$1 } from './p-6646e07d.js';
+import { d as defineCustomElement$4 } from './p-8c022d66.js';
+import { d as defineCustomElement$3 } from './p-d6ce295d.js';
+import { d as defineCustomElement$2 } from './p-bda6f3f9.js';
+import { d as defineCustomElement$1 } from './p-cf873d23.js';
 
 /**
  * Custom positioning reference element.

package/lib/dist-custom-elements/p-59f0edd5.js

@@ -0,0 +1,108 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-81505f0b.js';
+import { t as tokens } from './p-f6000a03.js';
+import { d as defineCustomElement$1 } from './p-8c022d66.js';
+
+const DuetStatusIcon = /*@__PURE__*/ proxyCustomElement(class DuetStatusIcon extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bg = {
+            default: {
+                default: "color_lt_blue_200",
+                success: "color_success_200",
+                warning: "color_warning_200",
+                danger: "color_danger_200",
+            },
+            strong: {
+                default: "color_lt_blue_700",
+                success: "color_success_700",
+                warning: "color_warning_500",
+                danger: "color_danger_600",
+            },
+        };
+        this.color = {
+            default: {
+                default: "color_lt_blue_800",
+                success: "color_success_800",
+                warning: "color_warning_800",
+                danger: "color_danger_800",
+            },
+            strong: {
+                default: "color_lt_blue_100",
+                success: "color_gray_lightest",
+                warning: "color_warning_900",
+                danger: "color_gray_lightest",
+            },
+        };
+        this.variation = "default";
+        this.size = "medium";
+        this.margin = "auto";
+        this.strong = false;
+    }
+    getBg() {
+        return tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getColor() {
+        return tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getIcon() {
+        switch (this.variation) {
+            case "default":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" 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 fill="${this.getColor()}" cx="11.625" cy="7.125" r="1.125"/>
+          </svg>`;
+            case "success":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M9.325 17.916a1.79 1.79 0 0 1-1.498-.799l-2.44-3.462a.75.75 0 0 1 1.227-.864l2.45 3.477a.306.306 0 0 0 .261.148.294.294 0 0 0 .236-.119l7.852-9.935a.75.75 0 1 1 1.175.93l-7.843 9.923a1.781 1.781 0 0 1-.423.396 1.78 1.78 0 0 1-.997.305z"/>
+          </svg>`;
+            case "warning":
+            case "danger":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <path fill="${this.getBg()}" d="M1.27,23.767C1.58,23.919 1.926,24 2.273,24L21.73,24C22.336,24 22.906,23.764 23.334,23.336C23.764,22.908 24.001,22.337 24.001,21.73C24.001,21.383 23.92,21.037 23.768,20.727L14.295,1.429C13.862,0.547 12.981,0 11.997,0C11.605,0 11.227,0.088 10.873,0.262C10.369,0.51 9.954,0.924 9.706,1.429L0.234,20.728C-0.034,21.271 -0.073,21.888 0.123,22.462C0.319,23.036 0.727,23.5 1.27,23.767Z"/>
+          <rect fill="${this.getColor()}" x="11.1" y="7.2" width="1.8" height="8.4" rx="0.9"/>
+          <rect fill="${this.getColor()}" x="10.8" y="18" width="2.4" height="2.4" rx="1.2"/>
+          </svg>`;
+        }
+    }
+    render() {
+        return (h(Host, { key: '62f4a599636b2d283b9f41c94c9b6a1425e2c1a4', class: {
+                [`duet-status-icon-${this.variation}`]: true,
+                "duet-strong-bg": this.strong,
+            } }, h("duet-icon", { key: '8223a11f889eeb219bd27b1c70601904bca84ade', icon: this.getIcon(), size: this.size, margin: this.margin })));
+    }
+}, [1, "duet-status-icon", {
+        "variation": [1],
+        "size": [513],
+        "margin": [1],
+        "strong": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-status-icon", "duet-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-status-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetStatusIcon);
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DuetStatusIcon as D, defineCustomElement as d };