@duetds/components 10.0.0-alpha.9 → 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-ed6f3abc.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-548610a6.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-77667998.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: '82d609a07657275a896f954d42228e38dc7ca182' }, h("div", { key: '45d49c23924aa9683a2f9e98dab285adaa2ea875', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '66225e67ec928fa394d67bb50a932f629488014a', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '71c3a499a32c1ed8f398120a7ee4f7e8ce1613e4' }))));
-    }
-    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-548610a6.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-77667998.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: '121e34853f26e00de78952097a9274c4686c8544' }, h("a", { key: 'd763e1596026eae24a9c92b2e5a44fdfaacac07d', 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" }))))));
-    }
-    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-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-77667998.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: '5b9beeeb80434ebb9fe59287777dd7b3ccf117f2' }, h("div", { key: '26d2b1524b8b4ba9cc9a43ce1ba69dad84fe3a6c', 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: {
-                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: {
-                items: true,
-                hidden: !this.open,
-            } }, h("slot", { key: 'b6f315463f9acf6617c598a33605e1d80e155d74' })))));
-    }
-    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-548610a6.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-77667998.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: '3e5b55f03542b4078ee41b1ff6f0a8d601239791' }, h("div", { key: '6220b1c96f0eefd971b0be2d3e64026ac5bfd467', 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: {
-                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: {
-                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: {
-                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",
-            //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 })))));
-    }
-    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;