@duetds/components 8.5.1 → 8.5.3

package/hydrate/index.js

@@ -6663,6 +6663,26 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
     /*hydrateAppClosure start*/
 
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
+}
+
 const NAMESPACE = 'duet';
 const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
@@ -8814,9 +8834,6 @@ class DuetBanner {
         this.hasActionSlot = hasSlot(this.element, "action");
         checkNamedSlotElement(this.element, "heading", "span");
         this.setButtonSize();
-        setTimeout(() => {
-            this.checkBannerSize();
-        }, 0);
     }
     connectedCallback() {
         window.addEventListener("resize", this.checkBannerSize);
@@ -8824,6 +8841,9 @@ class DuetBanner {
     disconnectedCallback() {
         window.removeEventListener("resize", this.checkBannerSize);
     }
+    componentDidRender() {
+        this.checkBannerSize();
+    }
     /**
      * render() function
      * Always the last one of the class.
@@ -11047,12 +11067,13 @@ class DuetCollapsible {
     }; }
 }
 
-const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-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\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{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-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);height:0;overflow:hidden;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block;height:auto;opacity:1}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-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\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{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-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;display:none;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{display:block}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
 
 class DuetCombobox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetChange = createEvent$2(this, "duetChange", 3);
+        this.listBoxId = createID("duet-combobox-list-element");
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b;
             // otherwise, something is wrong, expecting 1 element only
@@ -11175,6 +11196,7 @@ class DuetCombobox {
         if (this.openListOnClick) {
             this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
         }
+        this.input.accessibleExpanded = this.listOpen ? "true" : "false";
     }
     /**
      * Component lifecycle events.
@@ -11279,13 +11301,20 @@ class DuetCombobox {
             this.activeItem = undefined;
             this.value = item[0].value;
         }
-        if (isBlurred && this.selectedItems.size === 0) {
-            //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
-            if (this.force) {
-                this.inputValue = "";
-                this.input.value = "";
+        if (isBlurred) {
+            if (this.selectedItems.size === 0) {
+                this.activeItem = undefined;
+                if (this.force) {
+                    this.inputValue = "";
+                    this.input.value = "";
+                }
+            }
+            else if (this.force) {
+                const selectedValueIndex = [...this.selectedItems][0];
+                const selectedValueLabel = await this.formatItem(this.items[selectedValueIndex]);
+                this.inputValue = selectedValueLabel;
+                this.input.value = selectedValueLabel;
             }
-            this.activeItem = undefined;
         }
         this.listOpen = false;
     }
@@ -13984,7 +14013,7 @@ class DuetHero {
     }; }
 }
 
-const duetIconCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-icon,*.sc-duet-icon::after,*.sc-duet-icon::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-icon-h{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:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-outline)*/.duet-icon-has-outline.sc-duet-icon-h{margin-bottom:0 !important}}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-background)*/.duet-icon-has-background.sc-duet-icon-h{margin-bottom:0 !important}}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}}/*!@.duet-icon*/.duet-icon.sc-duet-icon{-webkit-user-select:none;user-select:none;display:block;width:100%;height:100%;transform-origin:top center}/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{padding:12px;border-style:solid;border-width:1px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{padding:16px;color:rgb(255, 255, 255)}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default*/.duet-icon.duet-icon-has-background.duet-theme-turva.sc-duet-icon,.duet-icon.duet-icon-has-background.duet-theme-default.sc-duet-icon{color:rgb(255, 255, 255)}/*!@.duet-icon.duet-icon-shape-circle*/.duet-icon.duet-icon-shape-circle.sc-duet-icon{border-radius:50%}/*!@.duet-icon.duet-icon-shape-brand*/.duet-icon.duet-icon-shape-brand.sc-duet-icon{border-radius:25%}/*!@.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-not-responsive*/.duet-icon.duet-icon-not-responsive.sc-duet-icon{transform:scale(1) !important}}/*!@.duet-icon.duet-theme-default*/.duet-icon.duet-theme-default.sc-duet-icon{color:rgb(0, 119, 179)}/*!@.duet-icon.duet-theme-turva*/.duet-icon.duet-theme-turva.sc-duet-icon{color:rgb(198, 12, 48)}/*!@.duet-icon.auto .duet-icon-svg*/.duet-icon.auto.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:100%;height:100%}/*!@.duet-icon.xxx-small .duet-icon-svg*/.duet-icon.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:7px;height:7px}/*!@.duet-icon.duet-icon-has-background.xxx-small*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon{padding:6px}/*!@.duet-icon.duet-icon-has-outline.xxx-small*/.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon{padding:4px}/*!@.duet-icon.xx-small .duet-icon-svg*/.duet-icon.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-has-outline.xx-small*/.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon{padding:7px}/*!@.duet-icon.x-small .duet-icon-svg*/.duet-icon.x-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@.duet-icon.duet-icon-has-outline.x-small*/.duet-icon.duet-icon-has-outline.x-small.sc-duet-icon{padding:10px}/*!@.duet-icon.duet-icon-has-background.x-small*/.duet-icon.duet-icon-has-background.x-small.sc-duet-icon{padding:12px}/*!@.duet-icon.small .duet-icon-svg*/.duet-icon.small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@.duet-icon.duet-icon-has-background.small*/.duet-icon.duet-icon-has-background.small.sc-duet-icon{padding:14px}/*!@.duet-icon.large .duet-icon-svg*/.duet-icon.large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@.duet-icon.x-large .duet-icon-svg*/.duet-icon.x-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@.duet-icon.xx-large .duet-icon-svg*/.duet-icon.xx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}@media (min-width: 48em){/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}}/*!@.duet-icon.duet-icon-shape-brand.rotated*/.duet-icon.duet-icon-shape-brand.rotated.sc-duet-icon{transform:rotate(20deg) scale(0.875);transform-origin:center}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.sc-duet-icon{display:flex;align-items:center;justify-content:center;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E\");mask-repeat:no-repeat}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.sc-duet-icon .duet-icon-svg.sc-duet-icon{min-width:auto}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-small*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-small.sc-duet-icon{width:18px;height:15px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-small*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-small.sc-duet-icon{width:32px;height:30px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.small*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.small.sc-duet-icon{width:36px;height:34px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.medium*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.medium.sc-duet-icon{width:48px;height:44px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.large*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.large.sc-duet-icon{width:62px;height:56px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-large*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-large.sc-duet-icon{width:76px;height:68px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-large*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-large.sc-duet-icon{width:95px;height:86px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva.xxx-large*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.xxx-large.sc-duet-icon{width:144px;height:130px;padding:0}/*!@.duet-icon.duet-icon-shape-brand.xxx-small*/.duet-icon.duet-icon-shape-brand.xxx-small.sc-duet-icon{padding:0}/*!@.duet-icon.duet-icon-shape-brand.xxx-small .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:0;height:0}/*!@.duet-icon.duet-icon-shape-brand.xx-small*/.duet-icon.duet-icon-shape-brand.xx-small.sc-duet-icon{padding:4px}/*!@.duet-icon.duet-icon-shape-brand.xx-small .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-shape-brand.x-small*/.duet-icon.duet-icon-shape-brand.x-small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-shape-brand.x-small .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.x-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@.duet-icon.duet-icon-shape-brand.small*/.duet-icon.duet-icon-shape-brand.small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-shape-brand.small .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@.duet-icon.duet-icon-shape-brand.medium*/.duet-icon.duet-icon-shape-brand.medium.sc-duet-icon{padding:12px}/*!@.duet-icon.duet-icon-shape-brand.medium .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.medium.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:24px;height:24px}/*!@.duet-icon.duet-icon-shape-brand.large*/.duet-icon.duet-icon-shape-brand.large.sc-duet-icon{padding:16px}/*!@.duet-icon.duet-icon-shape-brand.large .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@.duet-icon.duet-icon-shape-brand.x-large*/.duet-icon.duet-icon-shape-brand.x-large.sc-duet-icon{padding:20px}/*!@.duet-icon.duet-icon-shape-brand.x-large .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.x-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@.duet-icon.duet-icon-shape-brand.xx-large*/.duet-icon.duet-icon-shape-brand.xx-large.sc-duet-icon{padding:24px}/*!@.duet-icon.duet-icon-shape-brand.xx-large .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.xx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@.duet-icon.duet-icon-shape-brand.xxx-large*/.duet-icon.duet-icon-shape-brand.xxx-large.sc-duet-icon{padding:36px}/*!@.duet-icon.duet-icon-shape-brand.xxx-large .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}/*!@.duet-icon .duet-icon-svg*/.duet-icon.sc-duet-icon .duet-icon-svg.sc-duet-icon{display:block;width:24px;min-width:100%;height:24px;font-size:0}/*!@.duet-icon .duet-icon-svg.rotated*/.duet-icon.sc-duet-icon .duet-icon-svg.rotated.sc-duet-icon{transform:rotate(-20deg) scale(1.14)}/*!@.duet-icon svg*/.duet-icon.sc-duet-icon svg.sc-duet-icon{width:100%;min-width:100%;fill:currentColor}";
+const duetIconCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-icon,*.sc-duet-icon::after,*.sc-duet-icon::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-icon-h{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:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-outline)*/.duet-icon-has-outline.sc-duet-icon-h{margin-bottom:0 !important}}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-background)*/.duet-icon-has-background.sc-duet-icon-h{margin-bottom:0 !important}}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}}/*!@.duet-icon*/.duet-icon.sc-duet-icon{-webkit-user-select:none;user-select:none;display:block;width:100%;height:100%;transform-origin:top center}/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{padding:12px;border-style:solid;border-width:1px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{padding:16px;color:rgb(255, 255, 255)}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default*/.duet-icon.duet-icon-has-background.duet-theme-turva.sc-duet-icon,.duet-icon.duet-icon-has-background.duet-theme-default.sc-duet-icon{color:rgb(255, 255, 255)}/*!@.duet-icon.duet-icon-shape-circle*/.duet-icon.duet-icon-shape-circle.sc-duet-icon{border-radius:50%}/*!@.duet-icon.duet-icon-shape-brand*/.duet-icon.duet-icon-shape-brand.sc-duet-icon{border-radius:25%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-not-responsive*/.duet-icon.duet-icon-not-responsive.sc-duet-icon{transform:scale(1) !important}}/*!@.duet-icon.duet-theme-default*/.duet-icon.duet-theme-default.sc-duet-icon{color:rgb(0, 119, 179)}/*!@.duet-icon.duet-theme-turva*/.duet-icon.duet-theme-turva.sc-duet-icon{color:rgb(198, 12, 48)}/*!@.duet-icon.duet-icon-shape-brand.rotated*/.duet-icon.duet-icon-shape-brand.rotated.sc-duet-icon{transform:rotate(20deg) scale(0.875);transform-origin:center}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.sc-duet-icon{display:flex;align-items:center;justify-content:center;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E\");mask-repeat:no-repeat}/*!@.duet-icon.duet-icon-shape-brand.duet-theme-turva .duet-icon-svg*/.duet-icon.duet-icon-shape-brand.duet-theme-turva.sc-duet-icon .duet-icon-svg.sc-duet-icon{min-width:auto}/*!@.duet-icon .duet-icon-svg*/.duet-icon.sc-duet-icon .duet-icon-svg.sc-duet-icon{display:block;width:24px;min-width:100%;height:24px;font-size:0}/*!@.duet-icon .duet-icon-svg.rotated*/.duet-icon.sc-duet-icon .duet-icon-svg.rotated.sc-duet-icon{transform:rotate(-20deg) scale(1.14)}/*!@.duet-icon svg*/.duet-icon.sc-duet-icon svg.sc-duet-icon{width:100%;min-width:100%;overflow:clip;fill:currentColor;overflow-clip-margin:1px}/*!@:host([size=auto]) .duet-icon-svg*/[size=auto].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:100%;height:100%}/*!@:host([size=xxx-small]) .duet-icon-svg*/[size=xxx-small].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:7px;height:7px}/*!@:host([size=xxx-small]) .duet-icon-has-background*/[size=xxx-small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon{padding:6px}/*!@:host([size=xxx-small]) .duet-icon-has-outline*/[size=xxx-small].sc-duet-icon-h .duet-icon-has-outline.sc-duet-icon{padding:4px}/*!@:host([size=xxx-small]) .duet-icon-has-background .duet-icon-svg,\n:host([size=xxx-small]) .duet-icon-has-outline .duet-icon-svg*/[size=xxx-small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon .duet-icon-svg.sc-duet-icon,[size=xxx-small].sc-duet-icon-h .duet-icon-has-outline.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@:host([size=xxx-small]) .duet-icon-shape-brand*/[size=xxx-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:0}/*!@:host([size=xxx-small]) .duet-icon-shape-brand .duet-icon-svg*/[size=xxx-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:0;height:0}/*!@:host([size=xx-small]) .duet-icon-svg*/[size=xx-small].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@:host([size=xx-small]) .duet-icon-has-background*/[size=xx-small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon{padding:8px}/*!@:host([size=xx-small]) .duet-icon-has-outline*/[size=xx-small].sc-duet-icon-h .duet-icon-has-outline.sc-duet-icon{padding:7px}/*!@:host([size=xx-small]) .duet-icon-has-background .duet-icon-svg,\n:host([size=xx-small]) .duet-icon-has-outline .duet-icon-svg*/[size=xx-small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon .duet-icon-svg.sc-duet-icon,[size=xx-small].sc-duet-icon-h .duet-icon-has-outline.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@:host([size=xx-small]) .duet-icon-shape-brand*/[size=xx-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:4px}/*!@:host([size=xx-small]) .duet-icon-shape-brand .duet-icon-svg*/[size=xx-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@:host([size=xx-small]) .duet-theme-turva .duet-icon-shape-brand*/[size=xx-small].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:18px;height:15px;padding:0}/*!@:host([size=x-small]) .duet-icon-svg*/[size=x-small].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@:host([size=x-small]) .duet-icon-has-outline*/[size=x-small].sc-duet-icon-h .duet-icon-has-outline.sc-duet-icon{padding:10px}/*!@:host([size=x-small]) .duet-icon-has-background*/[size=x-small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon{padding:12px}/*!@:host([size=x-small]) .duet-icon-shape-brand*/[size=x-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:8px}/*!@:host([size=x-small]) .duet-icon-shape-brand .duet-icon-svg*/[size=x-small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@:host([size=x-small]) .duet-theme-turva .duet-icon-shape-brand*/[size=x-small].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:32px;height:30px;padding:0}/*!@:host([size=small]) .duet-icon-svg*/[size=small].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@:host([size=small]) .duet-icon-has-background*/[size=small].sc-duet-icon-h .duet-icon-has-background.sc-duet-icon{padding:14px}/*!@:host([size=small]) .duet-icon-shape-brand*/[size=small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:8px}/*!@:host([size=small]) .duet-icon-shape-brand .duet-icon-svg*/[size=small].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@:host([size=small]) .duet-theme-turva .duet-icon-shape-brand*/[size=small].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:36px;height:34px;padding:0}/*!@:host([size=medium]) .duet-icon-shape-brand*/[size=medium].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:12px}/*!@:host([size=medium]) .duet-icon-shape-brand .duet-icon-svg*/[size=medium].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:24px;height:24px}/*!@:host([size=medium]) .duet-theme-turva .duet-icon-shape-brand*/[size=medium].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:48px;height:44px;padding:0}/*!@:host([size=large]) .duet-icon-svg*/[size=large].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@:host([size=large]) .duet-icon-shape-brand*/[size=large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:16px}/*!@:host([size=large]) .duet-icon-shape-brand .duet-icon-svg*/[size=large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@:host([size=large]) .duet-theme-turva .duet-icon-shape-brand*/[size=large].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:62px;height:56px;padding:0}/*!@:host([size=x-large]) .duet-icon-svg*/[size=x-large].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@:host([size=x-large]) .duet-icon-shape-brand*/[size=x-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:20px}/*!@:host([size=x-large]) .duet-icon-shape-brand .duet-icon-svg*/[size=x-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@:host([size=x-large]) .duet-theme-turva .duet-icon-shape-brand*/[size=x-large].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:76px;height:68px;padding:0}/*!@:host([size=xx-large]) .duet-icon-svg*/[size=xx-large].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@:host([size=xx-large]) .duet-icon-shape-brand*/[size=xx-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:24px}/*!@:host([size=xx-large]) .duet-icon-shape-brand .duet-icon-svg*/[size=xx-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@:host([size=xx-large]) .duet-theme-turva .duet-icon-shape-brand*/[size=xx-large].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:95px;height:86px;padding:0}/*!@:host([size=xxx-large]) .duet-icon-svg*/[size=xxx-large].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:48px;height:48px}@media (min-width: 48em){/*!@:host([size=xxx-large]) .duet-icon-svg*/[size=xxx-large].sc-duet-icon-h .duet-icon-svg.sc-duet-icon{width:72px;height:72px}}/*!@:host([size=xxx-large]) .duet-icon-shape-brand*/[size=xxx-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon{padding:36px}/*!@:host([size=xxx-large]) .duet-icon-shape-brand .duet-icon-svg*/[size=xxx-large].sc-duet-icon-h .duet-icon-shape-brand.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}/*!@:host([size=xxx-large]) .duet-theme-turva .duet-icon-shape-brand*/[size=xxx-large].sc-duet-icon-h .duet-theme-turva.sc-duet-icon .duet-icon-shape-brand.sc-duet-icon{width:144px;height:130px;padding:0}";
 
 class DuetIcon {
     constructor(hostRef) {
@@ -14007,21 +14036,31 @@ class DuetIcon {
     /**
      * Component lifecycle events.
      */
-    componentWillLoad() {
+    async componentWillLoad() {
         inheritGlobalTheme(this);
         if (this.src && this.icon) {
             console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
         }
-        this.loadIcon();
+        await this.loadIcon(null, null);
     }
-    async loadIcon() {
+    async loadIcon(newValue, oldValue) {
         // static icon known at build-time, so we can set it synchronously
         if (this.icon) {
             this.svgContent = this.icon;
             return;
         }
-        // on server, don't make requests
+        // on server import icon from icons lib
         {
+            if (this.name) {
+                const iconPath = `@duetds/icons/lib/assets/${this.name}`;
+                try {
+                    const icon = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(iconPath)); });
+                    this.svgContent = icon.svg;
+                }
+                catch (e) {
+                    console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG ${iconPath} from local dependency.`, e);
+                }
+            }
             return;
         }
     }
@@ -14054,7 +14093,6 @@ class DuetIcon {
                 "duet-icon-has-background": !!this.background,
             } }, hAsync("span", { "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
-                [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
                 "duet-icon-has-outline": !!this.outline,
@@ -14062,7 +14100,7 @@ class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, hAsync("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, hAsync("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -14076,7 +14114,7 @@ class DuetIcon {
         "$tagName$": "duet-icon",
         "$members$": {
             "theme": [1025],
-            "icon": [1],
+            "icon": [513],
             "src": [1],
             "name": [1],
             "margin": [1],
@@ -14085,14 +14123,14 @@ class DuetIcon {
             "background": [1],
             "backgroundOpacity": [2, "background-opacity"],
             "backgroundRotation": [2, "background-rotation"],
-            "size": [1],
+            "size": [513],
             "outline": [1],
             "shape": [1],
             "svgContent": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["color", "color"]]
+        "$attrsToReflect$": [["icon", "icon"], ["color", "color"], ["size", "size"]]
     }; }
 }
 
@@ -14614,7 +14652,7 @@ class DuetLayout {
     }; }
 }
 
-const duetLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-link,*.sc-duet-link::after,*.sc-duet-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}/*!@:host(.duet-link-block)*/.duet-link-block.sc-duet-link-h{display:block}/*!@:host(.duet-link-button)*/.duet-link-button.sc-duet-link-h{margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}/*!@:host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type*/.duet-link-button.sc-duet-link-h:last-child,.duet-link-button.sc-duet-link-h:last-of-type{margin-right:0 !important}/*!@.duet-link*/.duet-link.sc-duet-link{display:inline;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;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}/*!@.duet-link:focus*/.duet-link.sc-duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-link .duet-link.sc-duet-link:focus,.duet-link.sc-duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-link.duet-theme-turva*/.duet-link.duet-theme-turva.sc-duet-link{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(173, 11, 43)}/*!@.duet-link:hover*/.duet-link.sc-duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}/*!@.duet-link:hover.duet-theme-turva*/.duet-link.sc-duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}/*!@.duet-link:active*/.duet-link.sc-duet-link:active{opacity:0.75;transition:none}/*!@button*/button.sc-duet-link{font-size:inherit;cursor:pointer}/*!@.duet-link-is-external.duet-link:not(.block, .button),\n.duet-link-is-download.duet-link:not(.block, .button)*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link{text-decoration:underline}/*!@.duet-link-is-external.duet-link:not(.block, .button):hover > .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button):hover > .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-icon-tail,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-icon-tail*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link{text-decoration:none;white-space:nowrap}/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}/*!@.duet-tab-to-link.duet-theme-turva*/.duet-tab-to-link.duet-theme-turva.sc-duet-link{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{margin-left:20px}}/*!@.duet-tab-to-link:focus*/.duet-tab-to-link.sc-duet-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}/*!@.block.duet-link*/.block.duet-link.sc-duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}/*!@.block.duet-link.duet-link-has-icon*/.block.duet-link.duet-link-has-icon.sc-duet-link{grid-template-columns:auto 1fr auto}/*!@.block.duet-link.none*/.block.duet-link.none.sc-duet-link{padding:0}/*!@.block .block__content*/.block.sc-duet-link .block__content.sc-duet-link{position:relative;bottom:2px}/*!@.block .block__chevron*/.block.sc-duet-link .block__chevron.sc-duet-link{align-self:center}/*!@.block .block__chevron-icon*/.block.sc-duet-link .block__chevron-icon.sc-duet-link{transition:300ms ease}/*!@.block:not(.duet-link-is-external):hover .block__chevron-icon*/.block.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}/*!@.duet-link.button*/.duet-link.button.sc-duet-link{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}/*!@.duet-link.button > **/.duet-link.button.sc-duet-link>*.sc-duet-link{flex-shrink:0}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}/*!@.duet-link.button .icon-wrap*/.duet-link.button.sc-duet-link .icon-wrap.sc-duet-link{display:flex;align-items:center;justify-content:center}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:60px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:36px;height:36px;border-radius:8px}/*!@.duet-link.button:hover*/.duet-link.button.sc-duet-link:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){/*!@.duet-link.button*/.duet-link.button.sc-duet-link{gap:16px;min-height:60px;border-radius:16px}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:72px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:48px;height:48px;border-radius:12px}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{font-size:1.1rem}}/*!@.duet-link.button.duet-theme-turva*/.duet-link.button.duet-theme-turva.sc-duet-link{border-color:rgb(207, 207, 209)}/*!@.duet-link.button.duet-theme-turva .duet-link-content*/.duet-link.button.duet-theme-turva.sc-duet-link .duet-link-content.sc-duet-link{color:rgb(23, 28, 58)}/*!@.duet-link.button.duet-theme-turva:hover*/.duet-link.button.duet-theme-turva.sc-duet-link:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}/*!@.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon*/.duet-link.button.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}";
+const duetLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-link,*.sc-duet-link::after,*.sc-duet-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}/*!@:host(.duet-link-block)*/.duet-link-block.sc-duet-link-h{display:block}/*!@:host(.duet-link-button)*/.duet-link-button.sc-duet-link-h{margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}/*!@:host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type*/.duet-link-button.sc-duet-link-h:last-child,.duet-link-button.sc-duet-link-h:last-of-type{margin-right:0 !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-link-h{margin:0 !important}/*!@.duet-link*/.duet-link.sc-duet-link{display:inline;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;font-weight:400;color:rgb(0, 98, 154);text-decoration:underline;border-radius:4px;transition:300ms ease}/*!@.duet-link:focus*/.duet-link.sc-duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-link .duet-link.sc-duet-link:focus,.duet-link.sc-duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-link.duet-theme-turva*/.duet-link.duet-theme-turva.sc-duet-link{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(173, 11, 43)}/*!@.duet-link:hover*/.duet-link.sc-duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}/*!@.duet-link:hover.duet-theme-turva*/.duet-link.sc-duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}/*!@.duet-link:active*/.duet-link.sc-duet-link:active{opacity:0.75;transition:none}/*!@button*/button.sc-duet-link{font-size:inherit;cursor:pointer}/*!@.duet-link-is-external.duet-link:not(.block, .button),\n.duet-link-is-download.duet-link:not(.block, .button)*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-content.sc-duet-link{text-decoration:underline}/*!@.duet-link-is-external.duet-link:not(.block, .button):hover > .duet-link-content,\n.duet-link-is-download.duet-link:not(.block, .button):hover > .duet-link-content*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link:hover>.duet-link-content.sc-duet-link{text-decoration:none}/*!@.duet-link-is-external.duet-link:not(.block, .button) .duet-link-icon-tail,\n.duet-link-is-download.duet-link:not(.block, .button) .duet-link-icon-tail*/.duet-link-is-external.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link,.duet-link-is-download.duet-link.sc-duet-link:not(.block,.button).sc-duet-link .duet-link-icon-tail.sc-duet-link{text-decoration:none;white-space:nowrap}/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}/*!@.duet-tab-to-link.duet-theme-turva*/.duet-tab-to-link.duet-theme-turva.sc-duet-link{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){/*!@.duet-tab-to-link*/.duet-tab-to-link.sc-duet-link{margin-left:20px}}/*!@.duet-tab-to-link:focus*/.duet-tab-to-link.sc-duet-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}/*!@.block.duet-link*/.block.duet-link.sc-duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}/*!@.block.duet-link.duet-link-has-icon*/.block.duet-link.duet-link-has-icon.sc-duet-link{grid-template-columns:auto 1fr auto}/*!@.block.duet-link.none*/.block.duet-link.none.sc-duet-link{padding:0}/*!@.block .block__content*/.block.sc-duet-link .block__content.sc-duet-link{position:relative;bottom:2px}/*!@.block .block__chevron*/.block.sc-duet-link .block__chevron.sc-duet-link{align-self:center}/*!@.block .block__chevron-icon*/.block.sc-duet-link .block__chevron-icon.sc-duet-link{transition:300ms ease}/*!@.block:not(.duet-link-is-external):hover .block__chevron-icon*/.block.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}/*!@.duet-link.button*/.duet-link.button.sc-duet-link{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px;padding-right:20px;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(207, 210, 212);border-radius:12px;outline:0 solid rgb(207, 210, 212);outline-offset:-2px;transition:all 300ms ease}/*!@.duet-link.button > **/.duet-link.button.sc-duet-link>*.sc-duet-link{flex-shrink:0}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(0, 41, 77);text-align:left}/*!@.duet-link.button .icon-wrap*/.duet-link.button.sc-duet-link .icon-wrap.sc-duet-link{display:flex;align-items:center;justify-content:center}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:60px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:36px;height:36px;border-radius:8px}/*!@.duet-link.button:hover*/.duet-link.button.sc-duet-link:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){/*!@.duet-link.button*/.duet-link.button.sc-duet-link{gap:16px;min-height:60px;border-radius:16px}/*!@.duet-link.button.duet-link-has-icon-background*/.duet-link.button.duet-link-has-icon-background.sc-duet-link{min-height:72px}/*!@.duet-link.button.duet-link-has-icon-background .icon-wrap*/.duet-link.button.duet-link-has-icon-background.sc-duet-link .icon-wrap.sc-duet-link{width:48px;height:48px;border-radius:12px}/*!@.duet-link.button .duet-link-content*/.duet-link.button.sc-duet-link .duet-link-content.sc-duet-link{font-size:1.1rem}}/*!@.duet-link.button.duet-theme-turva*/.duet-link.button.duet-theme-turva.sc-duet-link{border-color:rgb(207, 207, 209)}/*!@.duet-link.button.duet-theme-turva .duet-link-content*/.duet-link.button.duet-theme-turva.sc-duet-link .duet-link-content.sc-duet-link{color:rgb(23, 28, 58)}/*!@.duet-link.button.duet-theme-turva:hover*/.duet-link.button.duet-theme-turva.sc-duet-link:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}/*!@.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon*/.duet-link.button.sc-duet-link:not(.duet-link-is-external):hover .block__chevron-icon.sc-duet-link{transform:translateX(4px)}";
 
 /**
  * @part duet-link - piercing selector for styling the link
@@ -14641,6 +14679,7 @@ class DuetLink {
         this.iconColor = "currentColor";
         this.iconBackground = null;
         this.iconResponsive = false;
+        this.margin = "auto";
         this.padding = "auto";
         this.isSmallScreen = false;
         this.isMediumScreen = false;
@@ -14737,6 +14776,7 @@ class DuetLink {
         const Tag = !this.url ? "button" : "a";
         return (hAsync(Host, { class: {
                 [`duet-link-${this.variation}`]: true,
+                "duet-m-0": this.margin === "none",
             } }, hAsync(Tag, { href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
@@ -14774,6 +14814,7 @@ class DuetLink {
             "iconColor": [1, "icon-color"],
             "iconBackground": [1, "icon-background"],
             "iconResponsive": [4, "icon-responsive"],
+            "margin": [1],
             "padding": [1],
             "isSmallScreen": [32],
             "isMediumScreen": [32],
@@ -15451,22 +15492,11 @@ class DuetMenuBarDropdownLink {
     }; }
 }
 
-const duetMenuBarItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar-item,*.sc-duet-menu-bar-item::after,*.sc-duet-menu-bar-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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:inherit;font-weight:inherit;color:inherit;color:inherit;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}/*!@.duet-menu-bar-item:focus*/.duet-menu-bar-item.sc-duet-menu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-menu-bar-item .duet-menu-bar-item.sc-duet-menu-bar-item:focus,.duet-menu-bar-item.sc-duet-menu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-menu-bar-item[aria-expanded=true]*/.duet-menu-bar-item[aria-expanded=true].sc-duet-menu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item[aria-expanded=true] .trailing-icon.rotate*/.duet-menu-bar-item[aria-expanded=true].sc-duet-menu-bar-item .trailing-icon.rotate.sc-duet-menu-bar-item{transform:rotate(180deg)}/*!@.duet-menu-bar-item.duet-theme-turva*/.duet-menu-bar-item.duet-theme-turva.sc-duet-menu-bar-item{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}/*!@.duet-menu-bar-item.duet-theme-turva[aria-expanded=true]*/.duet-menu-bar-item.duet-theme-turva[aria-expanded=true].sc-duet-menu-bar-item{color:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{padding:0 16px}}@media (min-width: 76.25em){/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{padding:0 28px}}/*!@.duet-menu-bar-item.active*/.duet-menu-bar-item.active.sc-duet-menu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item.active::after*/.duet-menu-bar-item.active.sc-duet-menu-bar-item::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){/*!@.duet-menu-bar-item.active::after*/.duet-menu-bar-item.active.sc-duet-menu-bar-item::after{z-index:auto;height:2px}}/*!@.duet-menu-bar-item.active.duet-theme-turva*/.duet-menu-bar-item.active.duet-theme-turva.sc-duet-menu-bar-item{color:rgb(198, 12, 48)}/*!@.duet-menu-bar-item.active.duet-theme-turva::after*/.duet-menu-bar-item.active.duet-theme-turva.sc-duet-menu-bar-item::after{background:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-menu-bar-item:hover*/.duet-menu-bar-item.sc-duet-menu-bar-item:hover{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item:hover.duet-theme-turva*/.duet-menu-bar-item.sc-duet-menu-bar-item:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
+const duetMenuBarItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar-item,*.sc-duet-menu-bar-item::after,*.sc-duet-menu-bar-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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:inherit;font-weight:inherit;color:inherit;color:inherit;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}/*!@.duet-menu-bar-item:focus*/.duet-menu-bar-item.sc-duet-menu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-menu-bar-item .duet-menu-bar-item.sc-duet-menu-bar-item:focus,.duet-menu-bar-item.sc-duet-menu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-menu-bar-item .leading-icon,\n.duet-menu-bar-item .trailing-icon*/.duet-menu-bar-item.sc-duet-menu-bar-item .leading-icon.sc-duet-menu-bar-item,.duet-menu-bar-item.sc-duet-menu-bar-item .trailing-icon.sc-duet-menu-bar-item{width:20px;height:20px}@media (min-width: 62em){/*!@.duet-menu-bar-item .leading-icon,\n  .duet-menu-bar-item .trailing-icon*/.duet-menu-bar-item.sc-duet-menu-bar-item .leading-icon.sc-duet-menu-bar-item,.duet-menu-bar-item.sc-duet-menu-bar-item .trailing-icon.sc-duet-menu-bar-item{width:16px;height:16px}}/*!@.duet-menu-bar-item .trailing-icon.trailing-icon-arrow*/.duet-menu-bar-item.sc-duet-menu-bar-item .trailing-icon.trailing-icon-arrow.sc-duet-menu-bar-item{width:7px;height:7px}/*!@.duet-menu-bar-item[aria-expanded=true]*/.duet-menu-bar-item[aria-expanded=true].sc-duet-menu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item[aria-expanded=true] .trailing-icon.rotate*/.duet-menu-bar-item[aria-expanded=true].sc-duet-menu-bar-item .trailing-icon.rotate.sc-duet-menu-bar-item{transform:rotate(180deg)}/*!@.duet-menu-bar-item.duet-theme-turva*/.duet-menu-bar-item.duet-theme-turva.sc-duet-menu-bar-item{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}/*!@.duet-menu-bar-item.duet-theme-turva[aria-expanded=true]*/.duet-menu-bar-item.duet-theme-turva[aria-expanded=true].sc-duet-menu-bar-item{color:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{padding:0 16px}}@media (min-width: 76.25em){/*!@.duet-menu-bar-item*/.duet-menu-bar-item.sc-duet-menu-bar-item{padding:0 28px}}/*!@.duet-menu-bar-item.active*/.duet-menu-bar-item.active.sc-duet-menu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item.active::after*/.duet-menu-bar-item.active.sc-duet-menu-bar-item::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){/*!@.duet-menu-bar-item.active::after*/.duet-menu-bar-item.active.sc-duet-menu-bar-item::after{z-index:auto;height:2px}}/*!@.duet-menu-bar-item.active.duet-theme-turva*/.duet-menu-bar-item.active.duet-theme-turva.sc-duet-menu-bar-item{color:rgb(198, 12, 48)}/*!@.duet-menu-bar-item.active.duet-theme-turva::after*/.duet-menu-bar-item.active.duet-theme-turva.sc-duet-menu-bar-item::after{background:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-menu-bar-item:hover*/.duet-menu-bar-item.sc-duet-menu-bar-item:hover{color:rgb(0, 119, 179)}/*!@.duet-menu-bar-item:hover.duet-theme-turva*/.duet-menu-bar-item.sc-duet-menu-bar-item:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
 
 class DuetMenuBarItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "x-small";
         this.theme = "";
         this.active = false;
         this.url = undefined;
@@ -15482,26 +15512,6 @@ class DuetMenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -15518,10 +15528,11 @@ class DuetMenuBarItem {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (hAsync("duet-icon", { size: this.iconSize, name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), hAsync("slot", null), this.trailingIcon && (hAsync("duet-icon", { class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (hAsync("duet-icon", { class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), hAsync("slot", null), this.trailingIcon && (hAsync("duet-icon", { class: {
                 "trailing-icon": true,
+                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : this.iconSize, color: "currentColor" })))));
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: "auto", color: "currentColor" })))));
     }
     get element() { return getElement(this); }
     static get style() { return duetMenuBarItemCss; }
@@ -15537,7 +15548,6 @@ class DuetMenuBarItem {
             "accessibleLabel": [1, "accessible-label"],
             "accessibleExpanded": [1540, "accessible-expanded"],
             "accessiblePopup": [1537, "accessible-popup"],
-            "iconSize": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -15627,107 +15637,6 @@ class DuetMenuBarLink {
     }; }
 }
 
-/**
- * Teleport helps resolving z-index issues of overlapping popup elements.
- * Initiate it in your component's willLoad or didLoad lifecycle hook.
- * When you open the popup, call teleport.go() and move focus to the popup.
- * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
- * If your popup has closing animation, use the timeout parameter.
- */
-class Teleport {
-    constructor(element, target) {
-        this.isActive = false;
-        this.element = element;
-        this.target = target || document.body;
-        this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
-    }
-    /**
-     * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
-     */
-    go(makeSiblingsInert = false) {
-        const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport !== null && skipTeleport !== "false") {
-            return;
-        }
-        // React handles teleporting itself with portals
-        if (!this.element.dataset.reactPortal) {
-            this.stub = document.createElement("template");
-            this.element.insertAdjacentElement("afterend", this.stub);
-            this.target.appendChild(this.element);
-        }
-        if (makeSiblingsInert) {
-            this._makeSiblingsInert();
-        }
-        this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
-        this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
-        this.isActive = true;
-    }
-    resume(delay = 0) {
-        const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport !== null && skipTeleport !== "false") {
-            return;
-        }
-        if (!this.isActive) {
-            return;
-        }
-        this.isActive = false;
-        if (delay) {
-            setTimeout(this._resume.bind(this), delay);
-        }
-        else {
-            this._resume();
-        }
-    }
-    _resume() {
-        if (!this.element.dataset.reactPortal) {
-            this.stub.insertAdjacentElement("beforebegin", this.element);
-            this.stub.remove();
-        }
-        this._removeInertFromSiblings();
-        this.deletionObserver.disconnect();
-    }
-    _remove() {
-        var _a, _b;
-        (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = this.stub) === null || _b === void 0 ? void 0 : _b.remove();
-        this._removeInertFromSiblings();
-        this.deletionObserver.disconnect();
-    }
-    _makeSiblingsInert() {
-        const siblings = Array.from(this.target.children);
-        siblings.forEach(sibling => {
-            if (sibling !== this.element) {
-                sibling.dataset.duetTeleportId = (sibling.dataset.duetTeleportId || "") + this.teleportId;
-                sibling.inert = true;
-            }
-        });
-    }
-    _removeInertFromSiblings() {
-        const siblings = Array.from(this.target.children);
-        siblings.forEach(sibling => {
-            var _a;
-            if ((_a = sibling.dataset.duetTeleportId) === null || _a === void 0 ? void 0 : _a.includes(this.teleportId)) {
-                sibling.dataset.duetTeleportId = sibling.dataset.duetTeleportId.replace(this.teleportId, "");
-                if (sibling.dataset.duetTeleportId === "") {
-                    delete sibling.dataset.duetTeleportId;
-                    sibling.inert = false;
-                }
-            }
-        });
-    }
-    /**
-     * If the teleported element or its component (observed via stub) is removed from DOM, clean up the teleport.
-     */
-    _deletionObserverCallback(mutationList) {
-        mutationList.forEach(mutation => {
-            if (Array.from(mutation.removedNodes).includes(this.element) ||
-                Array.from(mutation.removedNodes).some(n => n.contains(this.stub))) {
-                this._remove();
-            }
-        });
-    }
-}
-
 const duetModalCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-modal,*.sc-duet-modal::after,*.sc-duet-modal::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-modal-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-modal-container*/.duet-modal-container.sc-duet-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;opacity:0;transition:300ms ease;transition-delay:200ms}/*!@.duet-modal-container.duet-modal-active*/.duet-modal-container.duet-modal-active.sc-duet-modal{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}/*!@.duet-modal-container.duet-disable-transitions*/.duet-modal-container.duet-disable-transitions.sc-duet-modal{transition:none}/*!@.duet-modal-container.duet-modal-slide-up*/.duet-modal-container.duet-modal-slide-up.sc-duet-modal{overflow:hidden}/*!@::slotted(img)*/.sc-duet-modal-s>img{width:100%}/*!@.duet-modal-inner*/.duet-modal-inner.sc-duet-modal{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){/*!@.duet-modal-inner*/.duet-modal-inner.sc-duet-modal{padding:48px 16px}}/*!@.duet-modal-inner.duet-modal-slide-up*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal{align-items:stretch;justify-content:center;height:100%;padding-top:48px;padding-bottom:0;overflow:hidden}/*!@.duet-modal-inner.duet-modal-slide-up::after*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal::after{position:absolute;bottom:0;z-index:300;display:block;width:100%;max-width:686px;height:48px;margin:auto;pointer-events:none;content:\"\";background:linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))}/*!@.duet-modal-inner.duet-modal-slide-up::after.small*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal::after.small{max-width:545px}/*!@.duet-modal-inner.duet-modal-slide-up::after.large*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal::after.large{max-width:100%}@media (min-width: 36em){/*!@.duet-modal-inner.duet-modal-slide-up::after.large*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal::after.large{max-width:1110px}}@media (max-width: 35.9375em){/*!@.duet-modal-inner.large*/.duet-modal-inner.large.sc-duet-modal{padding-right:0;padding-left:0}/*!@.duet-modal-inner.duet-modal-slide-up*/.duet-modal-inner.duet-modal-slide-up.sc-duet-modal{padding:0;padding-top:28px}}/*!@.duet-modal*/.duet-modal.sc-duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(0, 41, 77);background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}/*!@.duet-theme-turva .duet-modal*/.duet-theme-turva.sc-duet-modal .duet-modal.sc-duet-modal{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-modal-active .duet-modal*/.duet-modal-active.sc-duet-modal .duet-modal.sc-duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}/*!@.duet-modal-active .duet-modal.slide-up*/.duet-modal-active.sc-duet-modal .duet-modal.slide-up.sc-duet-modal{top:0;transition:top 600ms ease}/*!@.duet-modal.loader*/.duet-modal.loader.sc-duet-modal{text-align:center;background:transparent}/*!@.duet-modal.loader .duet-modal-close*/.duet-modal.loader.sc-duet-modal .duet-modal-close.sc-duet-modal{display:none}/*!@.duet-modal.loader .duet-modal-spinner*/.duet-modal.loader.sc-duet-modal .duet-modal-spinner.sc-duet-modal{position:relative;height:120px}/*!@.duet-modal.loader .duet-modal-inner-slot-default*/.duet-modal.loader.sc-duet-modal .duet-modal-inner-slot-default.sc-duet-modal{position:relative;backdrop-filter:blur(10px)}/*!@.duet-modal.loader duet-paragraph.duet-loader-message*/.duet-modal.loader.sc-duet-modal duet-paragraph.duet-loader-message.sc-duet-modal{position:absolute;opacity:0;transition:all 300ms ease;transform:scaleY(0);transform-origin:top}/*!@.duet-modal.loader duet-paragraph.duet-loader-message.show*/.duet-modal.loader.sc-duet-modal duet-paragraph.duet-loader-message.show.sc-duet-modal{opacity:1;transform:scaleY(1);transform-origin:bottom}/*!@.duet-modal.loader duet-paragraph.duet-loader-message.show::part(duet-paragraph)*/.duet-modal.loader.sc-duet-modal duet-paragraph.duet-loader-message.show.sc-duet-modal::part(duet-paragraph){backdrop-filter:blur(10px)}/*!@.duet-disable-transitions .duet-modal*/.duet-disable-transitions.sc-duet-modal .duet-modal.sc-duet-modal{transition:none}/*!@.duet-modal.small*/.duet-modal.small.sc-duet-modal{max-width:545px}/*!@.duet-modal.large*/.duet-modal.large.sc-duet-modal{max-width:100%}@media (min-width: 36em){/*!@.duet-modal.large*/.duet-modal.large.sc-duet-modal{max-width:1110px}}/*!@.duet-modal.slide-up*/.duet-modal.slide-up.sc-duet-modal{top:100vh;margin:0;border-radius:4px 4px 0 0;opacity:1;transition:top 600ms ease}@media (max-width: 35.9375em){/*!@.duet-modal.slide-up*/.duet-modal.slide-up.sc-duet-modal{border-radius:16px 16px 0 0}}/*!@.duet-modal.duet-modal-has-sticky-header*/.duet-modal.duet-modal-has-sticky-header.sc-duet-modal{height:100%;overflow:auto}/*!@.duet-modal:focus*/.duet-modal.sc-duet-modal:focus{outline:0}/*!@.duet-modal-body,\n.duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{width:100%;padding:36px 28px}/*!@.duet-modal-body.duet-modal-gutter-none,\n.duet-modal-sticky-header.duet-modal-gutter-none*/.duet-modal-body.duet-modal-gutter-none.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-none.sc-duet-modal{padding:0 !important}/*!@.duet-modal-body.duet-modal-gutter-small,\n.duet-modal-sticky-header.duet-modal-gutter-small*/.duet-modal-body.duet-modal-gutter-small.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-small.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large,\n.duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:48px 36px}@media (max-width: 22.5em){/*!@.duet-modal-body,\n  .duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large,\n  .duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:48px 28px}}@media (max-width: 35.9375em){/*!@.duet-modal-body,\n  .duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large,\n  .duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:48px 36px}}@media (min-width: 36em){/*!@.duet-modal-body,\n  .duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{padding:36px}/*!@.duet-modal-body.duet-modal-gutter-large,\n  .duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:28px 72px}}@media (min-width: 48em){/*!@.duet-modal-body,\n  .duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{padding:36px 72px}/*!@.duet-modal-body.duet-modal-gutter-large,\n  .duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:36px 72px}}@media (min-width: 76.25em){/*!@.duet-modal-body,\n  .duet-modal-sticky-header*/.duet-modal-body.sc-duet-modal,.duet-modal-sticky-header.sc-duet-modal{padding:36px 48px 48px}/*!@.duet-modal-body.duet-modal-gutter-large,\n  .duet-modal-sticky-header.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal,.duet-modal-sticky-header.duet-modal-gutter-large.sc-duet-modal{padding:48px 94px}/*!@.small .duet-modal-body,\n  .small .duet-modal-sticky-header*/.small.sc-duet-modal .duet-modal-body.sc-duet-modal,.small.sc-duet-modal .duet-modal-sticky-header.sc-duet-modal{padding:36px 48px}}/*!@.duet-modal-header*/.duet-modal-header.sc-duet-modal{text-align:center}/*!@.duet-modal-sticky-header*/.duet-modal-sticky-header.sc-duet-modal{position:sticky;top:0;z-index:200;display:block;padding-bottom:12px;text-align:left;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230)}/*!@.duet-theme-turva .duet-modal-sticky-header*/.duet-theme-turva.sc-duet-modal .duet-modal-sticky-header.sc-duet-modal{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}/*!@.duet-modal-close*/.duet-modal-close.sc-duet-modal{position:absolute;top:12px;right:12px}/*!@.duet-modal-heading*/.duet-modal-heading.sc-duet-modal{width:100%;padding-right:60px;overflow:hidden;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:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(0, 41, 77);text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}/*!@.duet-modal-heading.duet-p-0*/.duet-modal-heading.duet-p-0.sc-duet-modal{padding:0 !important}/*!@.duet-modal-heading.duet-m-0*/.duet-modal-heading.duet-m-0.sc-duet-modal{margin:0 !important}";
 
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
@@ -15745,11 +15654,6 @@ class DuetModal {
         this.duetClose = createEvent$2(this, "duetClose", 7);
         this.duetBeforeClose = createEvent$2(this, "duetBeforeClose", 7);
         var _a, _b;
-        /**
-         * Own Properties.
-         */
-        this.modalId = createID("DuetModal");
-        this.slotDefaultId = createID("DuetModal-default-slot");
         this.hasStickyHeader = false;
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
@@ -15801,7 +15705,7 @@ class DuetModal {
             }
             this.focusedElBeforeOpen = document.activeElement;
             disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             this.slotContainerEl.querySelectorAll(".duet-loader-message").forEach(el => el.remove());
             setTimeout(() => {
                 if (this.variation === "loader") {
@@ -15825,7 +15729,7 @@ class DuetModal {
             this.modalEl.classList.remove("duet-disable-transitions");
             enableBodyScroll(this.modalEl);
             this.duetClose.emit();
-            this.teleport.resume(TRANSITION_MS);
+            this.teleport.removeInertFromSiblings(TRANSITION_MS);
             setTimeout(() => {
                 focusElement(this.focusedElBeforeOpen);
             }, TRANSITION_MS);
@@ -15850,14 +15754,15 @@ class DuetModal {
         }
     }
     connectedCallback() {
-        connectLanguageChangeObserver(this, [
-            { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
-            { prop: "accessibleLoaderAnnouncement", defaults: "accessibleLoaderAnnouncementDefaults" },
-        ]);
+        {
+            return;
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        enableBodyScroll(this.modalEl);
+        if (this.modalEl) {
+            enableBodyScroll(this.modalEl);
+        }
     }
     /**
      * Component event handling.
@@ -15924,7 +15829,7 @@ class DuetModal {
      * Always the last one in the class.
      */
     render() {
-        var _a;
+        var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
         const closingButton = (hAsync("div", { class: "duet-modal-close" }, hAsync("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
@@ -15932,13 +15837,13 @@ class DuetModal {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (hAsync("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+        return (hAsync("div", { ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, hAsync(FocusGuard, { moveFocusTo: this.buttonEl }), hAsync("duet-overlay", { "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), hAsync("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, hAsync("duet-overlay", { "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), hAsync("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -15960,7 +15865,7 @@ class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, hAsync("div", { class: "duet-modal-header" }, hAsync("span", { class: "duet-modal-inner-slot-top" }, hAsync("slot", { name: "top" })), this.icon && hAsync("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (hAsync("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), this.variation === "loader" && (hAsync("div", { class: "duet-modal-spinner" }, hAsync("duet-spinner", { size: "large", color: "primary" }))), hAsync("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId, ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, hAsync("slot", null))))), hAsync(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, hAsync("div", { class: "duet-modal-header" }, hAsync("span", { class: "duet-modal-inner-slot-top" }, hAsync("slot", { name: "top" })), this.icon && hAsync("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (hAsync("duet-heading", { "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (hAsync("div", { class: "duet-modal-spinner" }, hAsync("duet-spinner", { size: "large", color: "primary" }))), hAsync("div", { class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, hAsync("slot", null)))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -16940,7 +16845,7 @@ class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, null, hAsync("div", { style: { zIndex: this.zIndex }, class: {
+        return (hAsync(Host, { "aria-hidden": "true" }, hAsync("div", { style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,
@@ -18719,6 +18624,74 @@ const platform = {
   isRTL: element => getComputedStyle$1(element).direction === 'rtl'
 };
 
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = true,
+    animationFrame = false
+  } = options;
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    // ignores Window, checks for [object VisualViewport]
+    const isVisualViewport = !isElement(ancestor) && ancestor.toString().includes('V');
+    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
+      ancestor.addEventListener('scroll', update, {
+        passive: true
+      });
+    }
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  let observer = null;
+  if (elementResize) {
+    observer = new ResizeObserver(() => {
+      update();
+    });
+    isElement(reference) && !animationFrame && observer.observe(reference);
+    if (!isElement(reference) && reference.contextElement && !animationFrame) {
+      observer.observe(reference.contextElement);
+    }
+    observer.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _observer;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    (_observer = observer) == null ? void 0 : _observer.disconnect();
+    observer = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a reference element when it is given a certain CSS positioning
@@ -18799,12 +18772,14 @@ class DuetPopupMenu {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.teleport = new Teleport(this.element);
     }
     componentDidLoad() {
     }
     connectedCallback() {
         this.handleControllerChange(this.controller, null);
+        {
+            return;
+        }
     }
     disconnectedCallback() {
         if (this.openButton) {
@@ -18913,7 +18888,7 @@ class DuetPopupMenu {
             if (this.openButton) {
                 this.openButton.accessibleExpanded = true;
             }
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             this.updatePlacement();
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
@@ -18931,7 +18906,7 @@ class DuetPopupMenu {
                     this.focusOpenButton();
                 }
                 this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                this.teleport.resume();
+                this.teleport.removeInertFromSiblings();
             }, 200);
         }
     }
@@ -20514,7 +20489,6 @@ class DuetSlideout {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
-        this.teleport = new Teleport(this.element);
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
@@ -20524,7 +20498,9 @@ class DuetSlideout {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        enableBodyScroll(this.dialog);
+        if (this.dialog) {
+            enableBodyScroll(this.dialog);
+        }
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
@@ -20542,7 +20518,7 @@ class DuetSlideout {
                 this.openButton.accessibleExpanded = true;
             }
             const openPanel = this.getOpenPanel();
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
             if (openPanel) {
                 openPanel.setFocus();
@@ -20560,7 +20536,7 @@ class DuetSlideout {
             setTimeout(() => {
                 focusElement(this.openButton);
                 enableBodyScroll(this.dialog);
-                this.teleport.resume();
+                this.teleport.removeInertFromSiblings();
             }, 200);
         }
     }
@@ -21638,22 +21614,11 @@ class DuetSubmenuBarDropdownLink {
     }; }
 }
 
-const duetSubmenuBarItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-item,*.sc-duet-submenu-bar-item::after,*.sc-duet-submenu-bar-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){/*!@:host*/.sc-duet-submenu-bar-item-h{width:auto}}/*!@.duet-submenu-bar-item*/.duet-submenu-bar-item.sc-duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;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:1.25;color:rgb(0, 77, 128);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}/*!@.duet-submenu-bar-item:focus*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-submenu-bar-item:focus, .duet-submenu-bar-item:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-submenu-bar-item .duet-submenu-bar-item.sc-duet-submenu-bar-item:focus,.duet-submenu-bar-item.sc-duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-submenu-bar-item .label*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .label.sc-duet-submenu-bar-item{display:flex;gap:5px;align-items:center;justify-content:center}/*!@.duet-submenu-bar-item .trailing-icon*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .trailing-icon.sc-duet-submenu-bar-item{position:absolute;right:12px}/*!@.duet-submenu-bar-item[aria-expanded=true]*/.duet-submenu-bar-item[aria-expanded=true].sc-duet-submenu-bar-item{background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate*/.duet-submenu-bar-item[aria-expanded=true].sc-duet-submenu-bar-item .trailing-icon.rotate.sc-duet-submenu-bar-item{transform:rotate(180deg)}/*!@.duet-submenu-bar-item.active*/.duet-submenu-bar-item.active.sc-duet-submenu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-submenu-bar-item.active.duet-theme-turva*/.duet-submenu-bar-item.active.duet-theme-turva.sc-duet-submenu-bar-item{color:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item.active::after*/.duet-submenu-bar-item.active.sc-duet-submenu-bar-item::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-submenu-bar-item.duet-theme-turva*/.duet-submenu-bar-item.duet-theme-turva.sc-duet-submenu-bar-item{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-submenu-bar-item.duet-theme-turva.active .label::after*/.duet-submenu-bar-item.duet-theme-turva.active.sc-duet-submenu-bar-item .label.sc-duet-submenu-bar-item::after{background:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item.duet-theme-turva.active::after*/.duet-submenu-bar-item.duet-theme-turva.active.sc-duet-submenu-bar-item::after{background:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item:hover*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-item:hover.duet-theme-turva*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(228, 228, 230)}/*!@.duet-submenu-bar-item:hover.duet-theme-turva.active*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(148, 9, 37)}";
+const duetSubmenuBarItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-item,*.sc-duet-submenu-bar-item::after,*.sc-duet-submenu-bar-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){/*!@:host*/.sc-duet-submenu-bar-item-h{width:auto}}/*!@.duet-submenu-bar-item*/.duet-submenu-bar-item.sc-duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;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:1.25;color:rgb(0, 77, 128);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}/*!@.duet-submenu-bar-item:focus*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-submenu-bar-item:focus, .duet-submenu-bar-item:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-submenu-bar-item .duet-submenu-bar-item.sc-duet-submenu-bar-item:focus,.duet-submenu-bar-item.sc-duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-submenu-bar-item .label*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .label.sc-duet-submenu-bar-item{display:flex;gap:5px;align-items:center;justify-content:center}/*!@.duet-submenu-bar-item .leading-icon,\n.duet-submenu-bar-item .trailing-icon*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .leading-icon.sc-duet-submenu-bar-item,.duet-submenu-bar-item.sc-duet-submenu-bar-item .trailing-icon.sc-duet-submenu-bar-item{width:20px;height:20px}@media (min-width: 62em){/*!@.duet-submenu-bar-item .leading-icon,\n  .duet-submenu-bar-item .trailing-icon*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .leading-icon.sc-duet-submenu-bar-item,.duet-submenu-bar-item.sc-duet-submenu-bar-item .trailing-icon.sc-duet-submenu-bar-item{width:16px;height:16px}}/*!@.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .trailing-icon.trailing-icon-arrow.sc-duet-submenu-bar-item{width:7px;height:7px}/*!@.duet-submenu-bar-item .trailing-icon*/.duet-submenu-bar-item.sc-duet-submenu-bar-item .trailing-icon.sc-duet-submenu-bar-item{position:absolute;right:12px}/*!@.duet-submenu-bar-item[aria-expanded=true]*/.duet-submenu-bar-item[aria-expanded=true].sc-duet-submenu-bar-item{background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate*/.duet-submenu-bar-item[aria-expanded=true].sc-duet-submenu-bar-item .trailing-icon.rotate.sc-duet-submenu-bar-item{transform:rotate(180deg)}/*!@.duet-submenu-bar-item.active*/.duet-submenu-bar-item.active.sc-duet-submenu-bar-item{color:rgb(0, 119, 179)}/*!@.duet-submenu-bar-item.active.duet-theme-turva*/.duet-submenu-bar-item.active.duet-theme-turva.sc-duet-submenu-bar-item{color:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item.active::after*/.duet-submenu-bar-item.active.sc-duet-submenu-bar-item::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-submenu-bar-item.duet-theme-turva*/.duet-submenu-bar-item.duet-theme-turva.sc-duet-submenu-bar-item{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-submenu-bar-item.duet-theme-turva.active .label::after*/.duet-submenu-bar-item.duet-theme-turva.active.sc-duet-submenu-bar-item .label.sc-duet-submenu-bar-item::after{background:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item.duet-theme-turva.active::after*/.duet-submenu-bar-item.duet-theme-turva.active.sc-duet-submenu-bar-item::after{background:rgb(148, 9, 37)}/*!@.duet-submenu-bar-item:hover*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-item:hover.duet-theme-turva*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(228, 228, 230)}/*!@.duet-submenu-bar-item:hover.duet-theme-turva.active*/.duet-submenu-bar-item.sc-duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(148, 9, 37)}";
 
 class DuetSubmenuBarItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "small";
         this.theme = "";
         this.active = false;
         this.url = undefined;
@@ -21669,26 +21634,6 @@ class DuetSubmenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     handleEscape(e) {
         if (isEscapeKey(e)) {
             const dropdown = this.element.closest("duet-submenu-bar");
@@ -21708,10 +21653,11 @@ class DuetSubmenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (hAsync(Host, null, hAsync(TagName, { ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (hAsync("duet-icon", { theme: this.theme, name: this.leadingIcon, size: this.iconSize, margin: "none", color: "currentColor" })), hAsync("div", { class: "label" }, hAsync("span", { class: "label-text" }, hAsync("slot", null)), this.trailingIcon && (hAsync("duet-icon", { class: {
+        return (hAsync(Host, null, hAsync(TagName, { ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (hAsync("duet-icon", { class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), hAsync("div", { class: "label" }, hAsync("span", { class: "label-text" }, hAsync("slot", null)), this.trailingIcon && (hAsync("duet-icon", { class: {
                 "trailing-icon": true,
+                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : this.iconSize, color: "currentColor" }))))));
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: "auto", color: "currentColor" }))))));
     }
     get element() { return getElement(this); }
     static get style() { return duetSubmenuBarItemCss; }
@@ -21727,7 +21673,6 @@ class DuetSubmenuBarItem {
             "accessibleLabel": [1, "accessible-label"],
             "accessibleExpanded": [1540, "accessible-expanded"],
             "accessiblePopup": [1537, "accessible-popup"],
-            "iconSize": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -23033,23 +22978,6 @@ class DuetTooltip {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
-    /**
-     * Component event handling.
-     */
-    onScroll() {
-        clearTimeout(this.scrollTimer);
-        this.scrollTimer = setTimeout(() => {
-            if (this.active) {
-                this.updatePlacement();
-            }
-        }, 100);
-    }
-    handleWindowResize() {
-        clearTimeout(this.resizeTimer);
-        this.resizeTimer = setTimeout(() => {
-            this.updatePlacement();
-        }, 100);
-    }
     handleDocumentClick(e) {
         if (!this.active) {
             return;
@@ -23072,10 +23000,10 @@ class DuetTooltip {
     }
     async handleActiveChange(newActiveValue) {
         if (newActiveValue) {
-            setTimeout(() => this.updatePlacement(), 10);
+            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
         }
         else {
-            setTimeout(() => this.updatePlacement(), 300);
+            this.autoUpdateCleanup();
         }
     }
     /**
@@ -23117,7 +23045,7 @@ class DuetTooltip {
             "arrowY": [32],
             "buttonActive": [32]
         },
-        "$listeners$": [[9, "scroll", "onScroll"], [9, "resize", "handleWindowResize"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"], [4, "tooltipPopupClosed", "handlePopupClose"]],
+        "$listeners$": [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"], [4, "tooltipPopupClosed", "handlePopupClose"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["positionVertical", "position-vertical"], ["positionHorizontal", "position-horizontal"], ["active", "active"]]
     }; }
@@ -23205,23 +23133,17 @@ class DuetTooltipPopup {
         this.placement = undefined;
         this.accessibleCloseLabel = undefined;
     }
-    handleActiveChange() {
-        if (this.active) {
-            this.teleport.go();
-        }
-        else {
-            this.teleport.resume(200);
-        }
-    }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.teleport = new Teleport(this.element);
     }
     connectedCallback() {
         subscribeTabbingChange(this);
+        {
+            return;
+        }
     }
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
@@ -23243,9 +23165,6 @@ class DuetTooltipPopup {
             } }, hAsync(FocusGuard, { moveFocusTo: this.buttonEl }), hAsync("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, hAsync("slot", null)), hAsync("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, hAsync("div", { class: { "arrow-container": true, [this.placement]: true } })), hAsync("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, hAsync("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), hAsync("duet-visually-hidden", null, this.accessibleCloseLabel)), hAsync(FocusGuard, { moveFocusTo: this.contentEl }))));
     }
     get element() { return getElement(this); }
-    static get watchers() { return {
-        "active": ["handleActiveChange"]
-    }; }
     static get style() { return duetTooltipPopupCss; }
     static get cmpMeta() { return {
         "$flags$": 9,