@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/esm/duet-slideout-link.entry.js

@@ -1,32 +1,67 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
-import { D as DuetStringsExternalDefaults } from './common-strings-af765cad.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getAccessibleLinkLabel } from './a11y-utils-c3a7fd7e.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-8a9d5323.js';
-import './slot-utils-bf214ae5.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
+import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
+import { a as DuetStringsExternalDefaults } from './common-strings-CVPfl9fc.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { g as getAccessibleLinkLabel } from './a11y-utils-BuWx2D09.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-D2jecvOr.js';
+import './_commonjsHelpers-DvwKrUS6.js';
+import './slot-utils-nDLvv_4O.js';
+import './string-utils-C6E9F6QT.js';
 
-const duetSlideoutLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-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-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
-const DuetSlideoutLinkStyle0 = duetSlideoutLinkCss;
+const duetSlideoutLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1rem;font-weight:600}.duet-slideout-link.large{font-size:1.25rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) slot[name=description]::slotted(*){color:rgb(23, 42, 59)}";
 
 const DuetSlideoutLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
+         */
         this.size = "inherit";
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * @internal
+         * Indicates the component is used where aria-role menuitem is expected
+         */
         this.menuItem = false;
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -49,15 +84,15 @@ const DuetSlideoutLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '121e34853f26e00de78952097a9274c4686c8544' }, h("a", { key: 'd763e1596026eae24a9c92b2e5a44fdfaacac07d', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: 'eca2104ff848dfd3c52bab08c4377d19e374d13d' }, h("a", { key: '9915adbb807d80081d2d791f36926a5b8a6b2a3e', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '22db6ed1bb56b9882e83734253a359d9c59fb18a', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '8c7c3459c06993a8318d092423dc512f60a0da06', class: "label" }, h("span", { key: 'af54ceb2cf36fb115fca5c250aaa6ed2b14f083d' }, h("span", { key: '799c0aa7fb41c06556242d822c4a817bc3cff780', class: "label-container" }, h("span", { key: '1e16cdb23d22bfe2d090eb026c17bcca4b109234', class: "label-content" }, h("slot", { key: '285a99e5f9837bdb6fc39f3bd06e1902fd66da1a' })), this.external && (h("duet-icon", { key: '786e1f369d8f5f23b359d4f61528d5f614efd411', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '23100e60c7e0f616021ea001b8aa5095af48bbde', name: "description" })), this.caret && (h("duet-icon", { key: 'fbdd722ae15f64f8879142371b6eaa79cd0faa43', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'eabe8fda17546094fafc6fa4a253e05c63fc1938', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '98d30980e7ac325c36be8bb86b788d60cd36831d', class: "label" }, h("span", { key: '7f96584e0ee24069a7cc9afc2649d3a0a7fe8758' }, h("span", { key: '2b844eb1ae6ff0f7215e7979776c673e6f1accfb', class: "label-container" }, h("span", { key: 'd6de09afc6dbb0cfd6855f98e34c6b7b0b2c6421', class: "label-content" }, h("slot", { key: 'ef0c11c80556e88596d115ef534f86cc044362f8' })), this.external && (h("duet-icon", { key: 'ffe4c9d8a90105199e4a79702847705f958adf00', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'd329594665a0964175ea0872747342f4e070227d', name: "description" })), this.caret && (h("duet-icon", { key: 'aafabb173724e1a6b736f289a7d76582f03f78c4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return getElement(this); }
 };
-DuetSlideoutLink.style = DuetSlideoutLinkStyle0;
+DuetSlideoutLink.style = duetSlideoutLinkCss;
 
 export { DuetSlideoutLink as duet_slideout_link };

package/lib/esm/duet-slideout-panel-dropdown.entry.js

@@ -1,22 +1,33 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
 
-const duetSlideoutPanelDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{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-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
-const DuetSlideoutPanelDropdownStyle0 = duetSlideoutPanelDropdownCss;
+const duetSlideoutPanelDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel-dropdown button:focus,.duet-slideout-panel-dropdown button:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel-dropdown button:focus,.duet-slideout-panel-dropdown button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;visibility:visible;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 36px;overflow-y:auto;scrollbar-width:none;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{visibility:hidden;max-height:0;padding:0;overflow:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{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-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) slot{color:rgb(23, 42, 59)}";
 
 const DuetSlideoutPanelDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -45,19 +56,21 @@ const DuetSlideoutPanelDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5b9beeeb80434ebb9fe59287777dd7b3ccf117f2' }, h("div", { key: '26d2b1524b8b4ba9cc9a43ce1ba69dad84fe3a6c', class: {
+        return (h(Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '4ddc07d35d571609edc8ac0f38013dcf1f7abd4e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '887b98839351d36434969447057013fd8e7614ed', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '90494d824d6eac5621d4a1e06de2a684fbdd8201', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'a7521f9a57a44fa8e5fb83f7ac08b6929b89b05e', class: "label" }, h("slot", { key: '9451cec580353060c2326a6ee3a7aa0b6e03ec69', name: "label" }), h("duet-icon", { key: '55d3a0e564dceb3bc2db017048d5a973272ecae5', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '90c7178107fcbf1765ba0a380e2a9dfc46efbcd5', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'a3d25c295dd87dd7d7427c08776e74f93ff06539', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'f5721ac3bf32dc5d3a02c06c3945169f5191b8bf', class: "label" }, h("slot", { key: '408ea11afbdc9705cf7d972f6173ba5215f06bec', name: "label" }), h("duet-icon", { key: 'eba692bfd3ada8bbfdbe9eb6e51a01054f6f919a', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '13c263ac376bd1b412ba8c57aec55504da08557d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'b6f315463f9acf6617c598a33605e1d80e155d74' })))));
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("slot", { key: 'f582b50dca9e8127b6c4f0b6f9507f74f337ce7d' })))));
     }
     get element() { return getElement(this); }
 };
-DuetSlideoutPanelDropdown.style = DuetSlideoutPanelDropdownStyle0;
+DuetSlideoutPanelDropdown.style = duetSlideoutPanelDropdownCss;
 
 export { DuetSlideoutPanelDropdown as duet_slideout_panel_dropdown };

package/lib/esm/duet-slideout-panel.entry.js

@@ -1,18 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-46854769.js';
-import { F as FocusGuard } from './focus-utils-7bc146cd.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-8a9d5323.js';
-import { h as hasSlot } from './slot-utils-bf214ae5.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-C6CAT054.js';
+import { F as FocusGuard } from './focus-utils-Do5KtPgs.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-D2jecvOr.js';
+import { h as hasSlot } from './slot-utils-nDLvv_4O.js';
+import { g as getColorByName } from './token-utils-Dks4GBDa.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-BDAqOMlM.js';
 
-const duetSlideoutPanelCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{position:absolute;top:0;left:16px;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{background:rgb(247, 178, 40)}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.duet-slideout-panel.duet-theme-turva .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(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}";
-const DuetSlideoutPanelStyle0 = duetSlideoutPanelCss;
+const duetSlideoutPanelCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel .link:focus,.duet-slideout-panel .link:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .link:focus,.duet-slideout-panel .link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.25rem;font-weight:800}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;right:0;z-index:600;visibility:visible;width:min(450px, 100%);height:100%;overflow-y:auto}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .back:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .back:focus.duet-theme-turva2,.duet-theme-turva .duet-slideout-panel .top .close:focus,.duet-slideout-panel .top .close:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .top .close:focus,.duet-slideout-panel .top .close:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{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.1rem;font-weight:700;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 20px;overflow-y:auto;color:rgb(8, 42, 77)}@media (min-width: 36em){.duet-slideout-panel .items{padding:16px 28px}}.duet-slideout-panel duet-indicator{top:4px}.duet-slideout-panel.duet-theme-turva .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(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(253, 247, 242);border-bottom-color:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) slot:not([name=label]){color:rgb(23, 42, 59)}";
 
 const DuetSlideoutPanel = class {
     constructor(hostRef) {
@@ -28,6 +27,36 @@ const DuetSlideoutPanel = class {
             sv: "Tillbaka till huvudmenyn",
         };
         this.hasStickyHeaderSlot = false;
+        this.language = getLanguage();
+        this.bodyScrollLocked = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
+        /**
+         * Size. Small, medium or large.
+         */
+        this.labelSize = "medium";
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
         this.updateLabel = () => {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
@@ -48,16 +77,6 @@ const DuetSlideoutPanel = class {
                 slideout.toggle();
             }
         };
-        this.label = undefined;
-        this.language = getLanguage();
-        this.bodyScrollLocked = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
-        this.labelSize = "medium";
-        this.backgroundColor = "primary-lightest";
-        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -150,39 +169,36 @@ const DuetSlideoutPanel = class {
      * Always the last one in the class.
      */
     render() {
-        const defaultBackgroundColor = this.backgroundColor === "primary-lightest"
-            ? this.theme === "turva"
-                ? "gray-lighter"
-                : this.backgroundColor
-            : this.backgroundColor;
         const styles = {
-            background: getColorByName(defaultBackgroundColor, this.theme),
+            background: getColorByName(this.backgroundColor, this.theme),
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '3e5b55f03542b4078ee41b1ff6f0a8d601239791' }, h("div", { key: '6220b1c96f0eefd971b0be2d3e64026ac5bfd467', class: {
+        return (h(Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '3d188176100a87926dabcdf167e7843d3c4c73a7', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: '86db5918e585201320c57a8770ab850356bda06b', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '5bda62a593954ce9401ac2e8957fd58913a4ff80', class: "duet-slideout-icon" }, h("duet-icon", { key: '1a82e4449db67bedd65f5299f6c7d5e38bf0064f', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: 'ca9518dd19dbffd4d7e12902d9a79fd3b6d0239f', class: "duet-slideout-badge" }))), h("span", { key: '4f3f26845dd7337944a31a6126114aaffade111d', class: "label" }, h("span", { key: '79f43f5fcb192dca6f278e44a812ccb18fed9930', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '0c676ffc9df3fd9f8cdc793aa0775d799f99cf0a', name: "label" })), h("duet-icon", { key: '09fd5d953aee5af50d1ad3096fa8ea5300ad38a1', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'a2d69000f5e72011f38094306607197da4c1be6d', ref: element => (this.dialog = element), class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '635addd38144863b546edd4d8792a26d4e8dd3c4', class: "duet-slideout-icon" }, h("duet-icon", { key: '3610a7e6ebcdf22fe198e4428538d559599c79c0', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '9b4d70cc570113c1e667ced944bccae1e4613398', class: "label" }, h("span", { key: '6f16630f451ef9ebd920462cd81df2cf92ab5312', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '80688a824da754215dcbfcd668ff8144880147d1', name: "label" })), h("duet-icon", { key: '205d74fef784d3db602fcccf61ba49dfb5995317', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '5be9dab7afdb48916100c5bfb8242eb061ba6c96', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '6a3e44b182bdb7f662e1e1445b5af239ae6d532f', moveFocusTo: this.closeButton }), h("div", { key: 'b43e59b1d4307053e6db415a2873b19f7455d4f2', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'cd3abce2e94d9170ee92c7fde98528f9d80347a2', class: "top" }, h("button", { key: 'c8db3e61bbc4c5e70f83a6ed219d925d7ed66624', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '0d633063603734ae6696a55f78b46d69f9a123ee', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '9b47722f8b18d8009370dd8dad1e3efd01549c19' }, this.label.innerHTML), h("button", { key: '8a03a8ec1baddd5b6c3cec3b82449c25baaf72be', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'c5b46e81e5e280b3d23fee48a9fe88fd3e291291', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '7f6f22a3a232ced9de34b211fbbab88d5292168d', class: "sticky-header" }, h("slot", { key: 'afed92ed2333e55b311eea33f10550ce7a39c776', name: "sticky-header" }))), h("div", { key: '95b7ac98ec07f7665815fe24b5bd156a27eaa6f1', tabindex: "-1", role: "menu",
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'f4edf9a9df667475a3c00b214e134bce7d9d7ae9', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '548ed5fadb9216137fcdc0762b35454ceb21c8d4', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '923603a20dbab28d51a376a9c252c35e33803880', class: "sticky-header" }, h("slot", { key: '07e15709effbee9950d36f03dd91e73b7e9ab336', name: "sticky-header" }))), h("div", { key: '7e63e1cd014106736bb712c20023f62245e43486', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '82b84a76815223e3c3e0478d5300fba75385d269' })), h(FocusGuard, { key: 'fbdc0a4eb86430546ecb7dd3e407fe5537b070c6', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fa18b91a1114433c57ecd566934f505e9fc62cf5' })), h(FocusGuard, { key: '7251452b17bbdfd8978f302bfde0e33991b39465', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
 };
-DuetSlideoutPanel.style = DuetSlideoutPanelStyle0;
+DuetSlideoutPanel.style = duetSlideoutPanelCss;
 
 export { DuetSlideoutPanel as duet_slideout_panel };

package/lib/esm/duet-slideout.entry.js

@@ -1,20 +1,20 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-46854769.js';
-import { f as focusElement, F as FocusGuard } from './focus-utils-7bc146cd.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-8a9d5323.js';
-import { h as hasSlot } from './slot-utils-bf214ae5.js';
-import { T as Teleport } from './teleport-546f382d.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-C6CAT054.js';
+import { s as setOpenerExpanded } from './a11y-utils-BuWx2D09.js';
+import { f as focusElement, F as FocusGuard } from './focus-utils-Do5KtPgs.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-D2jecvOr.js';
+import { h as hasSlot } from './slot-utils-nDLvv_4O.js';
+import { T as Teleport } from './teleport-CooAqTCj.js';
+import { g as getColorByName } from './token-utils-Dks4GBDa.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-BDAqOMlM.js';
 
-const duetSlideoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{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-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
-const DuetSlideoutStyle0 = duetSlideoutCss;
+const duetSlideoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:absolute;height:100%}::slotted(*){position:relative;visibility:hidden;width:100%;opacity:0;transition:opacity 300ms ease;transition-delay:300ms}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:600;width:min(450px, 100%);padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;transition:bottom 300ms ease;transition-delay:0s}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(255, 255, 255)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px;opacity:1;transition:opacity 300ms ease}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout .dialog .top button:focus,.duet-slideout .dialog .top button:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout .dialog .top button:focus,.duet-slideout .dialog .top button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 20px 20px;margin-bottom:20px;background:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229)}@media (min-width: 36em){.duet-slideout .dialog .sticky-header{padding:0 28px 28px}}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:12px 20px;opacity:1;transition:padding 600ms ease, opacity 300ms ease;transition-delay:300ms}@media (min-width: 36em){.duet-slideout .dialog .items{padding:16px 28px}}.duet-slideout .dialog.hidden{bottom:100vh;visibility:hidden;pointer-events:none;transition:300ms ease}.duet-slideout .dialog.hidden .items{padding-top:28px;opacity:0}.duet-slideout .dialog.hidden .top{opacity:0}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{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-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{border-bottom:1px solid rgb(222, 224, 228)}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva{color:rgb(23, 42, 59)}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 42, 59)}}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active{color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{border-bottom-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) slot{color:rgb(23, 42, 59)}";
 
 const DuetSlideout = class {
     constructor(hostRef) {
@@ -34,7 +34,50 @@ const DuetSlideout = class {
         this.hasStickyHeaderSlot = false;
         this.disconnectController = new AbortController();
         this.eventListenerController = new AbortController();
-        this.setOpenButton = (element, addClickListener = false) => {
+        this.language = getLanguage();
+        this.displaying = false;
+        this.openPanel = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+         */
+        this.accessibleRole = "menubar";
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content.
+         * Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out
+         * could result in unexpected behavior.
+         */
+        this.modal = true;
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.opener === "string") {
+                    element = typeof this.opener === "string" ? document.getElementById(this.opener) : undefined;
+                }
+                else {
+                    element = this.opener;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
             if (this.eventListenerController) {
                 this.eventListenerController.abort();
             }
@@ -44,8 +87,7 @@ const DuetSlideout = class {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 this.openButton = button;
                 if (addClickListener && !this.disconnectController.signal.aborted) {
                     this.eventListenerController = new AbortController();
@@ -83,35 +125,12 @@ const DuetSlideout = class {
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
-        this.language = getLanguage();
-        this.displaying = false;
-        this.openPanel = false;
-        this.theme = "";
-        this.accessibleRole = "menubar";
-        this.open = false;
-        this.backgroundColor = "gray-lightest";
-        this.modal = true;
-    }
-    /**
-     * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
-     * the component automatically sets the click event listener to open the slideout.
-     */
-    get opener() {
-        return this._opener;
-    }
-    set opener(value) {
-        const isString = typeof value === "string";
-        const element = isString ? document.getElementById(value) : value;
-        if (this.openButton !== element) {
-            this._opener = value;
-            this.setOpenButton(element, isString);
-        }
     }
     /**
      * Alias for property opener.
      */
     get controller() {
-        return this._opener;
+        return this.opener;
     }
     set controller(value) {
         this.opener = value;
@@ -131,9 +150,11 @@ const DuetSlideout = class {
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         this.setStickHeaderStyleMutations();
         if (!this.mutationObserver) {
             this.mutationObserver = new MutationObserver(() => {
@@ -143,6 +164,7 @@ const DuetSlideout = class {
         if (this.mutationObserver) {
             this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
         }
+        this.setOpenButton();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -155,7 +177,7 @@ const DuetSlideout = class {
         if (this.disconnectController) {
             this.disconnectController.abort();
         }
-        this.setOpenButton(undefined);
+        this.setOpenButton(null);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -164,7 +186,7 @@ const DuetSlideout = class {
         }
         if (this.open && !oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
+                setOpenerExpanded(this.openButton, true);
             }
             const openPanel = this.getOpenPanel();
             this.teleport.makeSiblingsInert();
@@ -182,7 +204,7 @@ const DuetSlideout = class {
         }
         else if (!this.open && oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
+                setOpenerExpanded(this.openButton, false);
             }
             setTimeout(() => {
                 focusElement(this.openButton);
@@ -193,6 +215,17 @@ const DuetSlideout = class {
             }, 200);
         }
     }
+    handleOpenerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     /**
      * Component event handling.
      */
@@ -262,22 +295,24 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'c299a850fff6c11bcca6e85576c04bf74e367619' }, h("div", { key: '76b69d00087367d0cfcf5de14d4023180b4fa42d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6daa912479f25ecd3e5527ab40861590fc36f150', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '9dc84e8113b5243b44224407df8d4c89eafdf2b7', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'fc8b5893c7783b60a166c82acaac01ede594e43a' }, h("div", { key: '57b51e3b1224155ce14db9ecb22b2655cfecf63c', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '415b8638b3df2ded878996d2190f27c6e7405b6d', visible: this.open, zIndex: "600" }), h("div", { key: '7f7e122f27d2cf36ab6768543b6e311b4ef6dec4', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '132b28a73aa0dc07ee1f159c59c0f6ca5c7c5e09', moveFocusTo: this.closeButton }), h("div", { key: 'cb528ca9e0ee385299a9e042d8f1a42d422d7a1a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'b9e5deae2f2cf48c3d652e885002f30cc434660d', class: "top" }, h("button", { key: 'fc5ab74ac6519c2c503131d21fc9239ddf3a1bf8', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '1ca9f5168c94535babbd4438d532efe528edd02b', moveFocusTo: this.closeButton }), h("div", { key: '4c3f037a457ef9cb0443cd4c299c03b4a19f2370', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '9666004103f958a0ce43497706ca6dba3543c787', class: "top" }, h("button", { key: '5a68f86a03e7500d8685e48db89e8db791b63a9e', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '2c2217a591e73c3121d123a9e3f6062e8d243d9a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '1bf96970d244ee1941f3db97c89cac30c4d71f9e', class: "sticky-header" }, h("slot", { key: '1d6dca6fc160b198115c7d1469576c6bc4f863ac', name: "sticky-header" }))), h("div", { key: '514f42edc0e6477bf154e0de2fdaa9bbe7c3ffea', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'dad816041c74637f1939c86bf7b84713309476f9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '07c8ab3b5d1a02e457a8631934d9bb7348abba29', class: "sticky-header" }, h("slot", { key: 'baaa3a79e2626a3d484ceab504da10cf90c44ef6', name: "sticky-header" }))), h("div", { key: '4024ba5ad42da1d50c4964caa0c20c50e1fb0f10', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '982778a16720e0b741c702729b87aa3f805da499' })), h(FocusGuard, { key: 'ee76635f5ccb38cc512e1d8a862fc9fd85f72666', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fc3ed36022c9cee52f7f299fe28d223bc8c71544' })), h(FocusGuard, { key: '8055e66cb43e26f56174b1246630b4e75b927ddc', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "opener": ["handleOpenerChange"]
     }; }
 };
-DuetSlideout.style = DuetSlideoutStyle0;
+DuetSlideout.style = duetSlideoutCss;
 
 export { DuetSlideout as duet_slideout };