@duetds/components 10.0.0-alpha.9 → 10.1.0

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

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

package/lib/dist-custom-elements/duet-stepper.js

@@ -1,151 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-196352e6.js';
-
-function groupBy(prop, items) {
-    const result = {};
-    items.forEach(item => {
-        const value = item[prop];
-        if (!result[value]) {
-            result[value] = [];
-        }
-        result[value].push(item);
-    });
-    return result;
-}
-
-const duetStepperCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}.duet-stepper{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-stepper{padding:28px !important;padding-top:36px !important;padding-bottom:36px !important;background:rgb(255, 255, 255);border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}}";
-const DuetStepperStyle0 = duetStepperCss;
-
-const DuetStepper$1 = /*@__PURE__*/ proxyCustomElement(class DuetStepper extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetStepChange = createEvent(this, "duetStepChange", 7);
-        this.theme = "";
-        this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
-        this.margin = "auto";
-        this.backDisabled = false;
-        this.selected = 0;
-    }
-    currentStepChanged(nextStep) {
-        if (isNaN(nextStep)) {
-            throw new Error(`step must be a number. got: ${nextStep}`);
-        }
-        if (nextStep < 0) {
-            throw new Error(`step must be not be less than zero. got: ${nextStep}`);
-        }
-        if (nextStep > this.getSteps().length) {
-            throw new Error(`step must not exceed total number of steps`);
-        }
-        this.updateStepState();
-        // Shifting focus would occasionally fail if done immediately.
-        // This may be due to re-render happening at the same time.
-        // So we defer shifting focus, to ensure it always works.
-        setTimeout(() => this.setStepFocus(), 50);
-    }
-    currentStepInvokedDisable() {
-        this.updateStepState();
-    }
-    onDuetStepClick(e) {
-        this.duetStepChange.emit({
-            fromStep: this.selected,
-            toStep: e.detail.stepIndex,
-            component: "duet-stepper",
-        });
-    }
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    async connectedCallback() {
-        this.updateStepState();
-    }
-    getSteps() {
-        return Array.from(this.element.querySelectorAll("duet-step"));
-    }
-    setStepFocus() {
-        const steps = this.getSteps();
-        const step = steps[this.selected];
-        step.setFocus();
-    }
-    updateStepState() {
-        const steps = this.getSteps();
-        steps.forEach((step, index) => {
-            let state;
-            if (index < this.selected) {
-                state = this.backDisabled ? "disabled" : "complete";
-            }
-            else if (index > this.selected) {
-                state = "incomplete";
-            }
-            else {
-                state = "current";
-            }
-            step.theme = this.theme;
-            step.state = state;
-            step.stepIndex = index;
-        });
-        const stepsByState = groupBy("state", steps);
-        Object.values(stepsByState).forEach(steps => {
-            steps.forEach((step, i) => {
-                step.roundedTop = i === 0;
-                step.roundedBottom = i === steps.length - 1;
-            });
-        });
-    }
-    formatAnnouncement() {
-        const steps = this.getSteps();
-        const current = (this.selected + 1).toString(10);
-        const total = steps.length.toString(10);
-        return this.accessibleLive.replace("{current}", current).replace("{total}", total);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '52c2d87726509e40615a19b3eea7c78622cec07a', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'b2f275d436eb7db9dda96c97147d8225a604b527', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'b639ea4862b8547f0a92c711008ff55ab9935d7f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '081d088375f8343f6484e992ae437daf6ccc9234' }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "selected": ["currentStepChanged"],
-        "backDisabled": ["currentStepInvokedDisable"]
-    }; }
-    static get style() { return DuetStepperStyle0; }
-}, [1, "duet-stepper", {
-        "theme": [1025],
-        "accessibleLive": [1, "accessible-live"],
-        "margin": [1],
-        "backDisabled": [4, "back-disabled"],
-        "selected": [1538]
-    }, [[0, "duetStepClick", "onDuetStepClick"]], {
-        "selected": ["currentStepChanged"],
-        "backDisabled": ["currentStepInvokedDisable"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-stepper", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-stepper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetStepper$1);
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetStepper = DuetStepper$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetStepper, defineCustomElement };

package/lib/dist-custom-elements/duet-submenu-bar-dropdown-link.d.ts

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

package/lib/dist-custom-elements/duet-submenu-bar-dropdown-link.js

@@ -1,81 +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 { b as isEscapeKey } from './p-8db11326.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const duetSubmenuBarDropdownLinkCss = "*,*::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-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-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-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display:none}.duet-submenu-bar-dropdown-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\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}";
-const DuetSubmenuBarDropdownLinkStyle0 = duetSubmenuBarDropdownLinkCss;
-
-const DuetSubmenuBarDropdownLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetSubmenuBarDropdownLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.active = false;
-        this.href = "#";
-        this.icon = undefined;
-        this.caret = false;
-        this.highlight = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            const dropdown = this.element.closest("duet-submenu-bar-dropdown");
-            dropdown.open = false;
-            dropdown.setFocus();
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'df8e2cce51cd8663e22e083e3aecff5cd19f698f' }, h("a", { key: 'f8c5abbcf4c71a27a70d2ed3ec2970b0a74a8fd1', class: {
-                "duet-submenu-bar-dropdown-link": true,
-                "duet-theme-turva": this.theme === "turva",
-                highlight: this.highlight,
-                active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '1e5a4a47052cf2b062b3b8d10085422b60407c5d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ca88f89ae807c0217a8921a1ad14261a9da98abc', class: "label-container" }, h("span", { key: 'e32914f41e511de24aba0e22fb3703818b795acd', class: "label" }, h("slot", { key: '59920cb56fb89f6ac10d94e9e61392dc0724dbdb' })), this.caret && h("duet-icon", { key: '603991182270c3942a6f4850fd5d6fb6af18b105', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'ce869a1d9c2edfd036031a730fd6826347bcce8c', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSubmenuBarDropdownLinkStyle0; }
-}, [1, "duet-submenu-bar-dropdown-link", {
-        "theme": [1025],
-        "active": [1028],
-        "href": [1025],
-        "icon": [1537],
-        "caret": [1028],
-        "highlight": [1028]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-submenu-bar-dropdown-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-submenu-bar-dropdown-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSubmenuBarDropdownLink$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSubmenuBarDropdownLink = DuetSubmenuBarDropdownLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSubmenuBarDropdownLink, defineCustomElement };

package/lib/dist-custom-elements/duet-submenu-bar-dropdown.d.ts

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

package/lib/dist-custom-elements/duet-submenu-bar-dropdown.js

@@ -1,152 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { a as media_query_large } from './p-f6000a03.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { b as isEscapeKey } from './p-8db11326.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const duetSubmenuBarDropdownCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 75, 129)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(228, 241, 247)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(8, 42, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:16px;height:16px}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:93%;z-index:600;min-width:320px;padding:8px;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-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)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(126, 2, 35)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(222, 224, 228)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
-const DuetSubmenuBarDropdownStyle0 = duetSubmenuBarDropdownCss;
-
-const DuetSubmenuBarDropdown$1 = /*@__PURE__*/ proxyCustomElement(class DuetSubmenuBarDropdown extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Own Properties.
-         */
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.checkIsDesktop = () => {
-            if (this.mql[0].matches) {
-                this.isDesktop = true;
-            }
-            else {
-                this.isDesktop = false;
-            }
-        };
-        this.onClick = () => {
-            const open = this.open;
-            if (!this.isDesktop) {
-                const dropdowns = Array.from(this.element.parentElement.querySelectorAll("duet-submenu-bar-dropdown"));
-                for (const dropdown of dropdowns) {
-                    dropdown.open = false;
-                }
-            }
-            if (open) {
-                this.open = false;
-            }
-            else {
-                this.open = true;
-            }
-        };
-        this.isDesktop = false;
-        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.isDesktop) {
-            this.open = false;
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        this.checkIsDesktop();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.checkIsDesktop.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            if (this.open) {
-                this.open = false;
-            }
-            else {
-                const dropdown = this.element.closest("duet-submenu-bar");
-                dropdown.open = false;
-                dropdown.setFocus();
-            }
-        }
-    }
-    /**
-     * 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: 'fc9fd551cd7be45b0c727e03c27a76625c983d41', role: "listitem" }, h("div", { key: '939b988a67b1f3d481fc32a2e89dba58bc25b53a', class: {
-                "duet-submenu-bar-dropdown": true,
-                "duet-theme-turva": this.theme === "turva",
-                open: this.open,
-                active: this.active,
-            } }, h("button", { key: 'c9be9c700d763082e4353b433868969d6ebaaea8', 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: {
-                open: this.open,
-                active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '74d49bbb0f3ca8143654d9cbcdaee4d6ffe4bf8f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f2416c123b2c0112e9569de33db0d291e1ad3d4a', class: "label" }, h("span", { key: 'c5db63f1dac7bc2a0fa55d5beee9c85ad4cfb4ee', class: "label-text" }, h("slot", { key: '0036b819c74ba5367ab40605ff199fe69d3a7231', name: "label" })), h("duet-icon", { key: '8ad850e0dbcfa9e277ee32336e164f942ef11dff', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '8a36bcfda8ed30579703bdb9fc783d83981212d3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-                hidden: !this.open,
-            } }, h("slot", { key: '67bf3b51da2fa18ec2662094cebbb039ec117523' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSubmenuBarDropdownStyle0; }
-}, [1, "duet-submenu-bar-dropdown", {
-        "theme": [1025],
-        "active": [1028],
-        "open": [1540],
-        "icon": [1537],
-        "isDesktop": [32],
-        "setFocus": [64]
-    }, [[8, "click", "handleFocus"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-submenu-bar-dropdown", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-submenu-bar-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSubmenuBarDropdown$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSubmenuBarDropdown = DuetSubmenuBarDropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSubmenuBarDropdown, defineCustomElement };

package/lib/dist-custom-elements/duet-submenu-bar-item.d.ts

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

package/lib/dist-custom-elements/duet-submenu-bar-item.js

@@ -1,113 +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 { b as isEscapeKey } from './p-8db11326.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 duetSubmenuBarItemCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-item .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:16px;height:16px}}.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-submenu-bar-item .external-icon{width:10px;height:10px}.duet-submenu-bar-item .trailing-icon{position:absolute;right:12px}.duet-submenu-bar-item[aria-expanded=true]{background:rgb(228, 241, 247)}.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-submenu-bar-item.active{color:rgb(0, 119, 179)}.duet-submenu-bar-item.active.duet-theme-turva{color:rgb(126, 2, 35)}.duet-submenu-bar-item.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-submenu-bar-item.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}";
-const DuetSubmenuBarItemStyle0 = duetSubmenuBarItemCss;
-
-const DuetSubmenuBarItem$1 = /*@__PURE__*/ proxyCustomElement(class DuetSubmenuBarItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.active = false;
-        this.url = undefined;
-        this.leadingIcon = undefined;
-        this.trailingIcon = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "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);
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            const dropdown = this.element.closest("duet-submenu-bar");
-            dropdown.open = false;
-            dropdown.setFocus();
-        }
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        setTimeout(() => this.itemElement.focus(options), 200);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const TagName = this.url ? "a" : "button";
-        const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'ad3a2fa9bbd134e4bfa1ced12278dabaf0206fc5', role: "listitem" }, h(TagName, { key: '5a36cd09f5b34ca0031e1f6fd98b6d4e7d085024', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '093405d3733611c349635aa71e3bf8179eba4153', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '0399adb8e4cd01b6fa66b37a91869813efaf3942', class: "label" }, h("span", { key: '50e11f94b21a9379d77ece6e8ab2437b6cf016d0', class: "label-text" }, h("slot", { key: '05204a743cb4c3f29f478908e2b91782827da04b' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'a62b60af0e3f2e1508d33547241081633c30a5aa', class: {
-                "trailing-icon": !!this.trailingIcon,
-                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
-                "external-icon": !!this.external,
-                rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? actionNewWindowSmall.title : "", margin: "none", size: "auto", color: "currentColor" }))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSubmenuBarItemStyle0; }
-}, [1, "duet-submenu-bar-item", {
-        "theme": [1025],
-        "active": [1028],
-        "url": [1],
-        "leadingIcon": [1, "leading-icon"],
-        "trailingIcon": [1, "trailing-icon"],
-        "accessibleLabel": [1, "accessible-label"],
-        "accessibleExpanded": [1540, "accessible-expanded"],
-        "accessiblePopup": [1537, "accessible-popup"],
-        "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-        "accessibleLabelExternal": [1025, "accessible-label-external"],
-        "external": [4],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-submenu-bar-item", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-submenu-bar-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSubmenuBarItem$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSubmenuBarItem = DuetSubmenuBarItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSubmenuBarItem, defineCustomElement };

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

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

package/lib/dist-custom-elements/duet-submenu-bar-link.js

@@ -1,72 +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 { b as isEscapeKey } from './p-8db11326.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const duetSubmenuBarLinkCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-submenu-bar-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-submenu-bar-link:focus,.duet-submenu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-link .submenu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-link .submenu-bar-link-icon{width:16px;height:16px}}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 75, 129)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-submenu-bar-link.active.duet-theme-turva{color:rgb(126, 2, 35)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.duet-submenu-bar-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\";color:rgb(23, 28, 58)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-link:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}}";
-const DuetSubmenuBarLinkStyle0 = duetSubmenuBarLinkCss;
-
-const DuetSubmenuBarLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetSubmenuBarLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.active = false;
-        this.href = "#";
-        this.icon = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            const dropdown = this.element.closest("duet-submenu-bar");
-            dropdown.open = false;
-            dropdown.setFocus();
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '95bd440eb341f40b70442bd2f07924faa50a3609', role: "listitem" }, h("a", { key: 'ced3b3049af05cbb6aaa9d3d1f4a9e08e042e7ad', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'e29e59a548c810f6fb6366616d3457e004835185', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '115b0e90e10474d448a3aceab05462d92c7b2e06', class: "label" }, h("slot", { key: '97e8e72b55c7e62ffc91a5f86fa44591150c62e8' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetSubmenuBarLinkStyle0; }
-}, [1, "duet-submenu-bar-link", {
-        "theme": [1025],
-        "active": [1028],
-        "href": [1025],
-        "icon": [1537]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-submenu-bar-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-submenu-bar-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSubmenuBarLink$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSubmenuBarLink = DuetSubmenuBarLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSubmenuBarLink, defineCustomElement };