@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/dist-custom-elements/duet-show-more.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetShowMore$1, d as defineCustomElement$1 } from './p-77fe0881.js';
-
-const DuetShowMore = DuetShowMore$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetShowMore, defineCustomElement };

package/lib/dist-custom-elements/duet-slideout-lang.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetSlideoutLang extends Components.DuetSlideoutLang, HTMLElement {}
-export const DuetSlideoutLang: {
-    prototype: DuetSlideoutLang;
-    new (): DuetSlideoutLang;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-slideout-lang.js

@@ -1,76 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1080a6c7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$2 } from './p-d07ce35f.js';
-
-const duetSlideoutLangCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-16px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}";
-const DuetSlideoutLangStyle0 = duetSlideoutLangCss;
-
-const DuetSlideoutLang$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutLang extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Own Properties.
-         */
-        this.chooseLangObject = {
-            en: "Choose language",
-            fi: "Valitse kieli",
-            sv: "Välj språk",
-        };
-        this.language = getLanguage();
-        this.theme = "";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'd9ace6f9e80f6ed42422394dbd1a6f1b1434c1f2' }, h("div", { key: '691f14871cc0e319654d149844b61ab81a631316', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '2b2fce67063ee945debe8fb8c603941ab4386a3c', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '333d0f86d5b0dabb5af4df4024e479dfaed27cb5' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSlideoutLangStyle0; }
-}, [1, "duet-slideout-lang", {
-        "theme": [1025],
-        "language": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-slideout-lang", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-slideout-lang":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSlideoutLang$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSlideoutLang = DuetSlideoutLang$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSlideoutLang, defineCustomElement };

package/lib/dist-custom-elements/duet-slideout-link.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetSlideoutLink extends Components.DuetSlideoutLink, HTMLElement {}
-export const DuetSlideoutLink: {
-    prototype: DuetSlideoutLink;
-    new (): DuetSlideoutLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-slideout-link.js

@@ -1,79 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1080a6c7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-d07ce35f.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 span::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:0.5rem;align-items:center;justify-content:space-between;width:100%}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 DuetSlideoutLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.accessibleLabel = undefined;
-        this.theme = "";
-        this.targetLanguage = undefined;
-        this.active = false;
-        this.href = "#";
-        this.icon = undefined;
-        this.size = "inherit";
-        this.caret = false;
-        this.menuItem = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'e845f429f7644089a2978b9bd817213fdffa0783' }, h("a", { key: '4096768d844d0c63b1b904fa29ed278826dd49bb', 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.accessibleLabel }, this.icon && (h("duet-icon", { key: 'c5b164759b0d168d217f6c10788922964a04dd00', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'c72e2c8e4cd322d1e8282518b711659e7476d4cd', class: "label" }, h("span", { key: '64394d630468c468fdab67b98476d911a784b20e' }, h("slot", { key: 'a01215f4a8237339fa76151f85a52407afd7a2a0' }), h("slot", { key: '6f53012e7292d5c2db2a8be6bfb44437f61e7149', name: "description" })), this.caret && (h("duet-icon", { key: '47bb848e67d9c74aba3e666448eb651e5e3a214b', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSlideoutLinkStyle0; }
-}, [1, "duet-slideout-link", {
-        "accessibleLabel": [1, "accessible-label"],
-        "theme": [1025],
-        "targetLanguage": [1, "target-language"],
-        "active": [1028],
-        "href": [1025],
-        "icon": [1537],
-        "size": [1537],
-        "caret": [1028],
-        "menuItem": [4, "menu-item"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-slideout-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-slideout-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSlideoutLink$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSlideoutLink = DuetSlideoutLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSlideoutLink, defineCustomElement };

package/lib/dist-custom-elements/duet-slideout-panel-dropdown.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetSlideoutPanelDropdown extends Components.DuetSlideoutPanelDropdown, HTMLElement {}
-export const DuetSlideoutPanelDropdown: {
-    prototype: DuetSlideoutPanelDropdown;
-    new (): DuetSlideoutPanelDropdown;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-slideout-panel-dropdown.js

@@ -1,93 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1080a6c7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-d07ce35f.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 DuetSlideoutPanelDropdown$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutPanelDropdown extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.onClick = () => {
-            this.open = !this.open;
-        };
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
-    }
-    handleFocus(e) {
-        const isClickOutside = e.composedPath().every(node => node !== this.element);
-        if (isClickOutside) {
-            this.open = false;
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        const links = this.element.querySelectorAll("duet-slideout-link");
-        links.forEach(link => {
-            link.menuItem = true;
-        });
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        this.button.focus(options);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '63e1ecfad4b3a99359297c7b4057cdcc8161a832' }, h("div", { key: '461506ece0bb6e079c7cea22bc8ecfcbce9769aa', class: {
-                "duet-slideout-panel-dropdown": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.open,
-            } }, h("button", { key: 'db9dd82a1a4f2bd4c58d13ca3b7223333acf8fe1', 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: 'a425d896cbba6af3d669ad764406dbd2949396ee', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'f0c2a72a77ac42db0e38cd3605a1e5478bf65ea9', class: "label" }, h("slot", { key: 'eb835a8dc87c277628dead143ccaf2ffa698af4d', name: "label" }), h("duet-icon", { key: '8f05a36f715ba855fc222f3a84bc5d8831786789', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'f96a0657d877b6c12fdb4c019bb2401674f8e5b4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-                hidden: !this.open,
-            } }, h("slot", { key: '1510098d5bf5a1378f6a6f0b0fb4f8914db5802b' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSlideoutPanelDropdownStyle0; }
-}, [1, "duet-slideout-panel-dropdown", {
-        "theme": [1025],
-        "active": [1540],
-        "open": [1540],
-        "icon": [1537],
-        "setFocus": [64]
-    }, [[8, "click", "handleFocus"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-slideout-panel-dropdown", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-slideout-panel-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSlideoutPanelDropdown$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSlideoutPanelDropdown = DuetSlideoutPanelDropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSlideoutPanelDropdown, defineCustomElement };

package/lib/dist-custom-elements/duet-slideout-panel.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetSlideoutPanel extends Components.DuetSlideoutPanel, HTMLElement {}
-export const DuetSlideoutPanel: {
-    prototype: DuetSlideoutPanel;
-    new (): DuetSlideoutPanel;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-slideout-panel.js

@@ -1,224 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1080a6c7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './p-fc09c464.js';
-import { F as FocusGuard } from './p-e30dc66d.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { h as hasSlot } from './p-ad615991.js';
-import { g as getColorByName } from './p-0562173d.js';
-import { d as defineCustomElement$2 } from './p-d07ce35f.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 DuetSlideoutPanel$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutPanel extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.exitLangObject = {
-            en: "Exit the menu",
-            fi: "Poistu valikosta",
-            sv: "Avsluta menyn",
-        };
-        this.backLangObject = {
-            en: "Back to main menu",
-            fi: "Takaisin päävalikkoon",
-            sv: "Tillbaka till huvudmenyn",
-        };
-        this.hasStickyHeaderSlot = false;
-        this.updateLabel = () => {
-            const labelSlotElement = this.element.querySelector("[slot='label']");
-            this.label = labelSlotElement;
-        };
-        this.toggleMenu = () => {
-            this.open = !this.open;
-        };
-        this.onClick = () => {
-            this.toggleMenu();
-        };
-        this.onCloseClick = e => {
-            e.stopPropagation();
-            const parentElement = this.element.parentElement;
-            if (parentElement.tagName === "DUET-SLIDEOUT") {
-                const slideout = this.element.parentElement;
-                enableBodyScroll(this.dialog);
-                this.bodyScrollLocked = false;
-                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.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.updateLabel();
-        this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-        this.mutationObserver = new MutationObserver(() => {
-            const parentElement = this.element.parentElement;
-            if (parentElement.tagName === "DUET-SLIDEOUT") {
-                const slideout = this.element.parentElement;
-                if (slideout.open && this.open && !this.bodyScrollLocked) {
-                    this.bodyScrollLocked = true;
-                    disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
-                }
-                else if (!slideout.open && this.bodyScrollLocked) {
-                    this.bodyScrollLocked = false;
-                    enableBodyScroll(this.dialog);
-                }
-            }
-        });
-        this.mutationObserver.observe(this.element.parentElement, {
-            childList: false,
-            attributeFilter: ["open"],
-            subtree: false,
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        if (this.dialog) {
-            enableBodyScroll(this.dialog);
-            this.bodyScrollLocked = false;
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-    }
-    handleOpenChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (this.open && !oldValue) {
-            setTimeout(() => {
-                const siblings = Array.from(this.element.parentElement.children);
-                siblings.forEach(sibling => {
-                    if (sibling !== this.element) {
-                        sibling.inert = true;
-                    }
-                });
-                if (!this.bodyScrollLocked) {
-                    disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
-                    this.bodyScrollLocked = true;
-                }
-                this.closeButton.focus();
-            }, 200);
-        }
-        else if (!this.open && oldValue) {
-            setTimeout(() => {
-                const siblings = Array.from(this.element.parentElement.children);
-                siblings.forEach(sibling => {
-                    sibling.inert = false;
-                });
-                this.openButton.focus();
-                enableBodyScroll(this.dialog);
-                this.bodyScrollLocked = false;
-            }, 200);
-        }
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        if (this.open) {
-            setTimeout(() => {
-                this.closeButton.focus(options);
-            }, 200);
-        }
-        else {
-            setTimeout(() => {
-                this.openButton.focus(options);
-            }, 200);
-        }
-    }
-    /**
-     * render() function
-     * 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),
-        };
-        const exitTranslation = getLocaleString(this.exitLangObject);
-        const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '32c6f6ea4eeac3499498244624a0aaf3f896f1a4' }, h("div", { key: 'e6563dd635d4f9896633b8a76f697239ce10fda1', class: {
-                "duet-slideout-panel": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.open,
-            } }, h("button", { key: '3689db100799eb081f0c070c0fd8e1701d83c092', 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: 'f9eadbe5b58655629aa22fe774b502183e92ddb1', class: "duet-slideout-icon" }, h("duet-icon", { key: 'f84d1fcd2d420ebb76265242c2d8ef01e5356313', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '3317aef4eb6b10856b0e8e3dbee6db72697f8732', class: "duet-slideout-badge" }))), h("span", { key: '2490ffd21816ef2903f1cea69c2885917aba5016', class: "label" }, h("span", { key: '09f27658cd8d89c87a43ec93ebc38da5c5f94c83', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'fb9e8343be8f8d0169c64509f451027e8d2a6b6b', name: "label" })), h("duet-icon", { key: 'd124572f81f6a5c913fa8368f435db597933c30e', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '2c5ae6d73798fe116493c0813f5f367d9a614341', ref: element => (this.dialog = element), class: {
-                dialog: true,
-                hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '3871236cfaca8944dea857fe4ab87642fbf1a98d', moveFocusTo: this.closeButton }), h("div", { key: 'dc789469f6b408a5909c4032a0d5c19bb36a1cb4', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '729e23f6d5279439445cb25981fa4a48316c0dec', class: "top" }, h("button", { key: '7c810b9edc27f5ea8a7928f7163631850ab45e0f', 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: '7db3cd52fec2f81cabda72ca55bb6375dc852e5a', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '81906fdecddd9f53c7c7a97c9f134a8ca34768c5' }, this.label.innerHTML), h("button", { key: 'c20b49d22a939f99eb926b46b62860a7b6622a3d', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'ca2f8682f77f2e4e272b86922b724e3c54c8e2e6', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'eb36eaa974c19690abc3abf59309cd22e07ff52e', class: "sticky-header" }, h("slot", { key: 'e974aeec3fb2cbe118572c4ca35ead87a1c5861d', name: "sticky-header" }))), h("div", { key: '7fa7812d1ac9fe82f7781ae98bb31065498d0667', tabindex: "-1", role: "menu",
-            //TODO: slideout menu fades out, needs to be instant
-            id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-            } }, h("slot", { key: 'fc31455ee1078696b7677b636bbfe8a80ce6fd51' })), h(FocusGuard, { key: '6045674ecaf7f7db881af487368014f3723238de', moveFocusTo: this.closeButton })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return DuetSlideoutPanelStyle0; }
-}, [1, "duet-slideout-panel", {
-        "theme": [1025],
-        "active": [1540],
-        "open": [1540],
-        "icon": [1537],
-        "labelSize": [1537, "label-size"],
-        "backgroundColor": [1537, "background-color"],
-        "badge": [4],
-        "label": [32],
-        "language": [32],
-        "bodyScrollLocked": [32],
-        "setFocus": [64]
-    }, undefined, {
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-slideout-panel", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-slideout-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSlideoutPanel$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSlideoutPanel = DuetSlideoutPanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSlideoutPanel, defineCustomElement };

package/lib/dist-custom-elements/duet-slideout.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetSlideout extends Components.DuetSlideout, HTMLElement {}
-export const DuetSlideout: {
-    prototype: DuetSlideout;
-    new (): DuetSlideout;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;