@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -1,146 +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 DuetInternalLabel } from './p-42619f94.js';
-import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { p as proxyInputToSlot } from './p-ad615991.js';
-
-const duetToggleCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;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 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::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;margin-right:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}duet-label{display:block !important;width:100% !important}.duet-side-label{display:flex;gap:12px;align-items:center}.duet-side-label duet-label{width:auto !important}.duet-reverse-label{flex-direction:row-reverse}.duet-switch{position:relative;display:block;width:48px;height:28px}.duet-switch input{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-switch input:checked+.duet-slider{background-color:rgb(0, 119, 179);box-shadow:none}.duet-theme-turva .duet-switch input:checked+.duet-slider{background-color:rgb(198, 12, 48)}.duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #004467;transform:translateX(20px)}.duet-theme-turva .duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #660619}.duet-switch input:disabled+.duet-slider{cursor:default}.duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-theme-turva .duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-switch input:disabled:not(:checked)+.duet-slider{background:#bfcbd2}.duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255);box-shadow:none}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider{background:#c7c9cf}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255)}.duet-switch input:disabled:checked+.duet-slider{background:#80bbd9}.duet-theme-turva .duet-switch input:disabled:checked+.duet-slider{background:#e38698}:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75)}:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75)}.duet-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:rgb(127, 150, 165);border-radius:24px;transition:background-color 300ms ease}.duet-slider::before{position:absolute;bottom:2px;left:2px;width:24px;height:24px;content:\"\";background-color:rgb(255, 255, 255);border-radius:50%;box-shadow:1px 0 2px 0 #5d6266;transition:300ms ease}.duet-theme-turva .duet-slider{background-color:rgb(143, 147, 158)}.duet-theme-turva .duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:1px 0 2px 0 #00334d}";
-const DuetToggleStyle0 = duetToggleCss;
-
-const DuetToggle$1 = /*@__PURE__*/ proxyCustomElement(class DuetToggle extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        /**
-         * Own Properties
-         */
-        this.toggleId = createID("DuetToggle");
-        this.proxyId = createID("DuetToggle");
-        /**
-         * Component event handling.
-         */
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.setFocus();
-            this.checked = !this.checked;
-        };
-        this.theme = "";
-        this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.labelPosition = "top";
-        this.required = false;
-        this.disabled = false;
-        this.checked = false;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.role = undefined;
-    }
-    checkedChanged(isChecked) {
-        this.duetChange.emit({
-            checked: isChecked,
-            value: this.value,
-            component: "duet-toggle",
-        });
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        if (this.value === undefined) {
-            this.value = this.identifier;
-        }
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    componentDidRender() {
-        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required, this.checked);
-    }
-    /**
-     * Sets focus on the specified `duet-toggle`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus(options) {
-        this.nativeInput.focus(options);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: 'c1edf3dfb5cbfb78c92aafd481e9c5bfec83b095', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'f5d071cde0463aab8f5ea4a1985b912c35b526e6', class: {
-                "duet-toggle": true,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-side-label": this.labelPosition !== "top",
-                "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: '7a8b09989ee8413b4ea78a863fb692f12fe58ebb', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '513ed78cb68458866b35d94f96163fe61cb6dcb1', class: "duet-switch" }, h("input", { key: '8f83040ad1ca990a02209381eac63b2eece87c0e', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'b7faad01c27eb015dde5051f7dba9dee1503398e', class: "duet-slider" })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "checked": ["checkedChanged"]
-    }; }
-    static get style() { return DuetToggleStyle0; }
-}, [1, "duet-toggle", {
-        "theme": [1025],
-        "margin": [1],
-        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-        "accessibleControls": [1, "accessible-controls"],
-        "accessibleOwns": [1, "accessible-owns"],
-        "accessibleDescribedBy": [1, "accessible-described-by"],
-        "accessibleDetails": [1, "accessible-details"],
-        "accessibleLabelledBy": [1, "accessible-labelled-by"],
-        "accessibleDescription": [1, "accessible-description"],
-        "label": [1],
-        "labelColor": [1025, "label-color"],
-        "labelWeight": [1025, "label-weight"],
-        "labelPosition": [1, "label-position"],
-        "required": [4],
-        "disabled": [516],
-        "checked": [1540],
-        "value": [1537],
-        "identifier": [1],
-        "name": [1],
-        "role": [1],
-        "setFocus": [64]
-    }, undefined, {
-        "checked": ["checkedChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toggle"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toggle":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToggle$1);
-            }
-            break;
-    } });
-}
-
-const DuetToggle = DuetToggle$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToggle, defineCustomElement };

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

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

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

@@ -1,80 +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 duetToolbarDropdownLinkCss = "*,*::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-toolbar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:0.5rem 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-toolbar-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-toolbar-dropdown-link:focus,.duet-toolbar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-dropdown-link .label{flex:1;text-align:left}.duet-toolbar-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-toolbar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-toolbar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-toolbar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-toolbar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}";
-const DuetToolbarDropdownLinkStyle0 = duetToolbarDropdownLinkCss;
-
-const DuetToolbarDropdownLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetToolbarDropdownLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.accessibleLabel = undefined;
-        this.theme = "";
-        this.targetLanguage = undefined;
-        this.href = "#";
-        this.icon = undefined;
-        this.active = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            const dropdown = this.element.closest("duet-toolbar-dropdown");
-            dropdown.open = false;
-            dropdown.setFocus();
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'c7578d87c6cc701110b2273867f9de679ce7675f' }, h("a", { key: '1f9b24bb8cd15ca161b0902ac695a73341d33f47', class: {
-                "duet-toolbar-dropdown-link": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '19566913fb85d69c28e44ac0d31c0eee45379051', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'edac55db2db896370c982e8783c027e9205b2235', class: "label" }, h("slot", { key: '9520108fc591d929db4216efcf5e5c823a5f90a8' })), this.active && (h("duet-icon", { key: '41b3c2604e5cd127d381cf0da0bfe2c43f494617', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetToolbarDropdownLinkStyle0; }
-}, [1, "duet-toolbar-dropdown-link", {
-        "accessibleLabel": [1, "accessible-label"],
-        "theme": [1025],
-        "targetLanguage": [1, "target-language"],
-        "href": [1025],
-        "icon": [1537],
-        "active": [1028]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toolbar-dropdown-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toolbar-dropdown-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToolbarDropdownLink$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetToolbarDropdownLink = DuetToolbarDropdownLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToolbarDropdownLink, defineCustomElement };

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

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

package/lib/dist-custom-elements/duet-toolbar-dropdown.js

@@ -1,107 +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 duetToolbarDropdownCss = "*,*::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%}.duet-toolbar-dropdown{position:relative;height:100%}.duet-toolbar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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:400;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;cursor:pointer}.duet-toolbar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-toolbar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-toolbar-dropdown button.open .caret{transform:rotate(180deg)}.duet-toolbar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-toolbar-dropdown button.active,.duet-toolbar-dropdown button.open{color:rgb(8, 42, 77)}.duet-toolbar-dropdown button.active::after,.duet-toolbar-dropdown button.open::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-toolbar-dropdown .items{position:absolute;top:93%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:175px;padding:8px;color:rgb(8, 42, 77);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)}.duet-toolbar-dropdown .items.hidden{display:none}.duet-toolbar-dropdown.right .items{right:auto;left:0%}.duet-toolbar-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-toolbar-dropdown.duet-theme-turva button:hover{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-toolbar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-dropdown.duet-theme-turva button.active,.duet-toolbar-dropdown.duet-theme-turva button.open{color:rgb(23, 28, 58)}.duet-toolbar-dropdown.duet-theme-turva button.active::after,.duet-toolbar-dropdown.duet-theme-turva button.open::after{background:rgb(198, 12, 48)}.duet-toolbar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}.duet-toolbar-dropdown.negative button{color:rgb(255, 255, 255)}.duet-toolbar-dropdown.negative button:hover{color:rgb(255, 255, 255);background:rgba(8, 42, 77, 0.2)}.duet-toolbar-dropdown.negative button.active{font-weight:600;color:rgb(255, 255, 255);background:rgba(8, 42, 77, 0.2)}.duet-toolbar-dropdown.negative button.open{color:rgb(255, 255, 255);background:rgba(8, 42, 77, 0.2)}.duet-toolbar-dropdown.negative button duet-icon{color:rgb(198, 225, 238)}.duet-toolbar-dropdown.duet-theme-turva.negative button{color:rgb(255, 255, 255)}.duet-toolbar-dropdown.duet-theme-turva.negative button:hover{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button.active{font-weight:600;color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button.open{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon{color:rgb(255, 185, 190)}";
-const DuetToolbarDropdownStyle0 = duetToolbarDropdownCss;
-
-const DuetToolbarDropdown$1 = /*@__PURE__*/ proxyCustomElement(class DuetToolbarDropdown extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.onClick = () => {
-            this.open = !this.open;
-        };
-        this.theme = "";
-        this.variation = "default";
-        this.accessibleLabel = undefined;
-        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);
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            this.open = false;
-            this.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() {
-        let itemsAlign = "right";
-        if (this.element && this.element.parentElement) {
-            itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
-        }
-        const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '293493435feefef5e3df0fedf5bce6506fb4ee15', role: "listitem" }, h("div", { key: 'c38df38acf0aebc018823ebbfe2cbf5ee9bc8f8d', class: {
-                "duet-toolbar-dropdown": true,
-                "duet-theme-turva": this.theme === "turva",
-                [itemsAlign]: true,
-                [variation]: true,
-            } }, h("button", { key: 'e502e36fda6d4e5e94312143d2f208be630d7e3b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
-                active: this.active,
-                open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '982df3536e15f8a4a0b17107cd025963826b47ea', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'c58be9183cc8949ad8380c435c92c2c144f443b8', class: "label" }, h("slot", { key: 'e69f9009757ba8711faba0832c9eb6bbc5ddb1b2', name: "label" }), h("duet-icon", { key: 'e267dbb94c717a8adc576335be6e5218aff054d4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'a1bfb389572b8ba7ed3d55be3f8a57dfddbff95c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-                items: true,
-                hidden: !this.open,
-            } }, h("slot", { key: 'ac48022ff0eba0852b50b21c187c9cbd4f8e4772' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetToolbarDropdownStyle0; }
-}, [1, "duet-toolbar-dropdown", {
-        "theme": [1025],
-        "variation": [1025],
-        "accessibleLabel": [1, "accessible-label"],
-        "active": [1540],
-        "open": [1540],
-        "icon": [1537],
-        "setFocus": [64]
-    }, [[8, "click", "handleFocus"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toolbar-dropdown", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toolbar-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToolbarDropdown$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetToolbarDropdown = DuetToolbarDropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToolbarDropdown, defineCustomElement };

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

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

package/lib/dist-custom-elements/duet-toolbar-item.js

@@ -1,120 +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 duetToolbarItemCss = "*,*::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%}.duet-toolbar-item{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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:400;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-toolbar-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-toolbar-item:focus,.duet-toolbar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-item:focus.primary{box-shadow:0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866}.duet-theme-turva .duet-toolbar-item:focus.primary,.duet-toolbar-item:focus.primary.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-item .duet-toolbar-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge{position:absolute;top:0;left:11px;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-toolbar-item .duet-toolbar-icon .duet-toolbar-badge{background:rgb(247, 178, 40)}.duet-toolbar-item .trailing-icon{width:16px;height:16px}.duet-toolbar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-toolbar-item .external-icon{width:10px;height:10px}.duet-toolbar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-toolbar-item.primary,.duet-toolbar-item.secondary{color:rgb(255, 255, 255)}.duet-toolbar-item.primary[aria-expanded=true],.duet-toolbar-item.secondary[aria-expanded=true]{background:rgba(8, 42, 77, 0.2)}.duet-toolbar-item.primary duet-icon,.duet-toolbar-item.secondary duet-icon{color:rgb(198, 225, 238)}.duet-toolbar-item.primary[aria-expanded=true]{background:rgba(8, 42, 77, 0.2)}.duet-toolbar-item.secondary[aria-expanded=true]{background:rgb(3, 56, 102)}.duet-toolbar-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-toolbar-item.duet-theme-turva.primary{color:rgb(255, 255, 255)}.duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true]{background:rgba(23, 28, 58, 0.2)}.duet-toolbar-item.duet-theme-turva.primary duet-icon{color:rgb(255, 185, 190)}.duet-toolbar-item:hover{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-toolbar-item:hover.primary,.duet-toolbar-item:hover.secondary{color:rgb(255, 255, 255)}.duet-toolbar-item:hover.primary{background:rgba(8, 42, 77, 0.2)}.duet-toolbar-item:hover.secondary{background:rgb(3, 56, 102)}.duet-toolbar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-toolbar-item:hover.duet-theme-turva.primary{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-item.active{color:rgb(8, 42, 77)}.duet-toolbar-item.active.primary,.duet-toolbar-item.active.secondary{font-weight:600;color:rgb(255, 255, 255)}.duet-toolbar-item.active.primary::after,.duet-toolbar-item.active.secondary::after{display:none}.duet-toolbar-item.active.primary{background:rgba(8, 42, 77, 0.2)}.duet-toolbar-item.active.secondary{background:rgb(3, 56, 102)}.duet-toolbar-item.active::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-toolbar-item.active::after.duet-theme-turva{background:rgb(198, 12, 48)}.duet-toolbar-item.active.duet-theme-turva{color:rgb(23, 28, 58)}.duet-toolbar-item.active.duet-theme-turva::after{background:rgb(198, 12, 48)}.duet-toolbar-item.active.duet-theme-turva.primary{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}";
-const DuetToolbarItemStyle0 = duetToolbarItemCss;
-
-const DuetToolbarItem$1 = /*@__PURE__*/ proxyCustomElement(class DuetToolbarItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.variation = "default";
-        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;
-        this.badge = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "accessibleLabelExternal",
-            defaults: "accessibleLabelExternalDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    /**
-     * 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 variation = this.variation === "primary" ||
-            this.variation === "negative" ||
-            (this.theme === "turva" && this.variation === "secondary")
-            ? "primary"
-            : this.variation === "secondary"
-                ? "secondary"
-                : "default";
-        return (h(Host, { key: '9b9d0dfa8199f89acfbe21f9132c66ac5d27f19d', role: "listitem" }, h(TagName, { key: '40f2142c0e777156f9e171213b08dc51737544b5', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
-                "duet-toolbar-item": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.active,
-                [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '028001dafa87b1c9b3827b169c6a0eebe9dc1cc5', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'a151a4bb04e949ffbdab6b65cfaf6444dab7bb9d', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '2f765f55f3a0d524fe3c97dd6570b0ab1f15a01e', class: "duet-toolbar-badge" }))), h("slot", { key: '4004ed2e53664041a6a1e8d020fa01bdd83f0e53' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'a2f27e67c6c38dbab06db879d79ffee7de1d5425', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'c48acfbf6301b8585d53f191c182751c4aca1442', class: {
-                "trailing-icon": !!this.trailingIcon,
-                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
-                "external-icon": !!(this.url && this.external),
-                rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? actionNewWindowSmall.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'c552f767cf28200fd01e2d0a4d123b58880eee10', class: "duet-toolbar-badge" }))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetToolbarItemStyle0; }
-}, [1, "duet-toolbar-item", {
-        "theme": [1025],
-        "variation": [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],
-        "badge": [4],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toolbar-item", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toolbar-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToolbarItem$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetToolbarItem = DuetToolbarItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToolbarItem, defineCustomElement };

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

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

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

@@ -1,74 +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 duetToolbarLinkCss = "*,*::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%}.duet-toolbar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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:400;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap}.duet-toolbar-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-toolbar-link:focus,.duet-toolbar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-link.negative{color:rgb(255, 255, 255)}.duet-toolbar-link.negative duet-icon{color:rgb(198, 225, 238)}.duet-toolbar-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-toolbar-link.duet-theme-turva.negative{color:rgb(255, 255, 255)}.duet-toolbar-link.duet-theme-turva.negative duet-icon{color:rgb(255, 185, 190)}.duet-toolbar-link:hover{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-toolbar-link:hover.negative{color:rgb(255, 255, 255);background:rgba(8, 42, 77, 0.2)}.duet-toolbar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-toolbar-link:hover.duet-theme-turva.negative{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-link.active{color:rgb(8, 42, 77)}.duet-toolbar-link.active.negative{font-weight:600;color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-link.active.negative::after{display:none}.duet-toolbar-link.active::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-toolbar-link.active::after.duet-theme-turva{background:rgb(198, 12, 48)}.duet-toolbar-link.active.duet-theme-turva{color:rgb(23, 28, 58)}.duet-toolbar-link.active.duet-theme-turva::after{background:rgb(198, 12, 48)}.duet-toolbar-link.active.duet-theme-turva.negative{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}";
-const DuetToolbarLinkStyle0 = duetToolbarLinkCss;
-
-const DuetToolbarLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetToolbarLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.variation = "default";
-        this.active = false;
-        this.href = "#";
-        this.icon = undefined;
-        this.accessibleLabel = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '3623e63f85f9fdb7fbd59112cc560e003a7ca568', role: "listitem" }, h("a", { key: 'b81d74dada0b3c634c92305881ad7f58a04157e0', class: {
-                "duet-toolbar-link": true,
-                "duet-theme-turva": this.theme === "turva",
-                active: this.active,
-                [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'e9388c724ba10f7290f7819f94f3b40d37857f2a', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '5c2564a4a153aa0d7595b40fb4588bacbd32bbdf' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetToolbarLinkStyle0; }
-}, [1, "duet-toolbar-link", {
-        "theme": [1025],
-        "variation": [1025],
-        "active": [1028],
-        "href": [1025],
-        "icon": [1537],
-        "accessibleLabel": [1, "accessible-label"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toolbar-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toolbar-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToolbarLink$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetToolbarLink = DuetToolbarLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToolbarLink, defineCustomElement };

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

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