@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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-28c85b1c.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-f2c2f3d2.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-7b6a89e9.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: '81d1f6d9e2c6d9f6dd8b5218608be304ffde350f' }, h("div", { key: '26b3a9e6224f4a53c13998466b62f5430c1d944e', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '4fd6ea04d3f884ee1a58979d4d7bb74151aa3331', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'ea0b580bbccc19ab497e06b4e668cf4825af3307' }))));
-    }
-    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,98 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { a as actionNewWindowSmall } from './p-f11208c3.js';
-import { D as DuetStringsExternalDefaults } from './p-9df4cfa4.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { g as getAccessibleLinkLabel } from './p-afb6f7fb.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { d as defineCustomElement$2 } from './p-7b6a89e9.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 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;
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.external = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "accessibleLabelExternal",
-            defaults: "accessibleLabelExternalDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'b10e39b4c103edf993040842ca1d3c5bd2947309' }, h("a", { key: 'd02c6217e0adcf138405342a30d92531d7f3092a', 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: 'f3ffdad987835f9fe725488811516df41ebc1804', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '15e073801cc1649271724ce8ba557fc6a0595f5e', class: "label" }, h("span", { key: '54b7d1a19b38f4fc75363f35b761972e8591f121' }, h("span", { key: '727d4e01ef993eea033f9f6aabf055c142847f0a', class: "label-container" }, h("span", { key: 'ccedbbd2c4c2222335a448d7a7282bf475def69c', class: "label-content" }, h("slot", { key: '23a61b0a7cba001323c158b2ba476555948dc0c1' })), this.external && (h("duet-icon", { key: 'c026a8a54f2ba4ef095d4e581c44bdbb64037869', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '148bed5c517070f08c819790debfff17f8e6b61a', name: "description" })), this.caret && (h("duet-icon", { key: '1028cc2f997369cc2e0eddc6221ac78b0c30c584', 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"],
-        "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-        "accessibleLabelExternal": [1025, "accessible-label-external"],
-        "external": [4]
-    }]);
-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-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-7b6a89e9.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: 'ab2fb8ed37ca46adc9817852fb83eafe507a59dc' }, h("div", { key: '280c92d9bd0abe3b60c229207a6c6ccb48c485e9', class: {
-                "duet-slideout-panel-dropdown": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.open,
-            } }, h("button", { key: 'e6772eb5237776b11a952582abb425295451a6e0', 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: '2f964bc5915bd7ef297d26649ce08c34ee0b9839', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '1c60593c6cd70eb2d1a088573f156bb3e9c74f0a', class: "label" }, h("slot", { key: '4108636046644f87e1cc9c7dd63f67af26705061', name: "label" }), h("duet-icon", { key: 'aef84319ce001579f0d616eed817a35ea0ef2e58', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '5e9852b7e56b05ad347c63deeea0b6e0043d708f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-                hidden: !this.open,
-            } }, h("slot", { key: 'f8d087bfa9da070cb47cb6797e81f8259d54c80b' })))));
-    }
-    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-f2c2f3d2.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-7b6a89e9.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: '856a3c28f69371f9863319381ba48c8405b85403' }, h("div", { key: 'f735dbda0ac874c43051bd1c447dbbf9a03ca433', class: {
-                "duet-slideout-panel": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.open,
-            } }, h("button", { key: 'f50326b2238fdb0a7125680c6f69b0f56bf0e934', 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: 'f2d2f6cdc62f73b881c776a0d3bf092ccaa772eb', class: "duet-slideout-icon" }, h("duet-icon", { key: '443b1d6d94c4aae294778b8f5955891bb2a97ce8', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '44b1ca70447f6bb60a6f46102e67f333db652e44', class: "duet-slideout-badge" }))), h("span", { key: '8fbc117daa4a781ecbf670e062b68207e0ef5343', class: "label" }, h("span", { key: 'ab39a93c3c74b3b76aa0b3c90d185bfdc9dd86ca', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '45b890262469efe9b02656921d421777e8bdc57d', name: "label" })), h("duet-icon", { key: '059783af433a31f4ab3f1c68849c804251800cef', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'de567359a310f1677a485c4bdface6e8268bbff0', ref: element => (this.dialog = element), class: {
-                dialog: true,
-                hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'b0e6eefb79b61d9b84d9e8b8a2be5b23d8975b66', moveFocusTo: this.closeButton }), h("div", { key: 'c388f06159034df8600c1bd91bc6cf874650a91a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '7cbb9d38f3a3fa287257184c9c9849e4d3e34ded', class: "top" }, h("button", { key: 'fc3d908b932b7210f65ffdcafb8708ab0084977c', 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: 'd0940ecd67c9db3eff30cc4ef4472e69a517ce14', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '922ee0e0256014693e614ff2af701380ede3d801' }, this.label.innerHTML), h("button", { key: '1a0edf1eb5d33b8fb39880c56fa38a325e32e3ae', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7ba128ad0a1baae2e60460dd1bea08f126261770', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '885f062bf863f93627bc69adf47f8b1aa5497cb2', class: "sticky-header" }, h("slot", { key: '0a03e76ed75ae40af294be6bdd147b0b753ededa', name: "sticky-header" }))), h("div", { key: '129bdf60417ccdd47d197a130ab35fac219052fe', tabindex: "-1", role: "menu",
-            //TODO: slideout menu fades out, needs to be instant
-            id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-            } }, h("slot", { key: '4af5b5b2c46331a5929922371cfb464d1340edff' })), h(FocusGuard, { key: '1bb13f60085d50f72727261352cd96d5c375cc5c', 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;