@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -1,328 +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 { e as enableBodyScroll, d as disableBodyScroll } from './p-fc09c464.js';
-import { f as focusElement, F as FocusGuard } from './p-e30dc66d.js';
-import { b as isEscapeKey } from './p-8db11326.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 { T as Teleport } from './p-ca3cb21e.js';
-import { g as getColorByName } from './p-0562173d.js';
-import { d as defineCustomElement$3 } from './p-77667998.js';
-import { d as defineCustomElement$2 } from './p-df2458b1.js';
-
-const duetSlideoutCss = "*,*::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;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;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)}.duet-slideout.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)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .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 .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.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.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
-const DuetSlideoutStyle0 = duetSlideoutCss;
-
-const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetSlideoutEvent = createEvent(this, "duetSlideoutEvent", 7);
-        this.exitLangObject = {
-            en: "Exit the menu",
-            fi: "Poistu valikosta",
-            sv: "Avsluta menyn",
-        };
-        this.topLevelOpenMenuBarLangObject = {
-            en: "Exit this menu to find top level items",
-            fi: "Poistu tästä valikosta löytääksesi ylätason kohteet",
-            sv: "Stäng den här menyn för att hitta objekt på toppnivå",
-        };
-        this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
-        this.hasStickyHeaderSlot = false;
-        this.disconnectController = new AbortController();
-        this.eventListenerController = new AbortController();
-        this.setOpenButton = (element, addClickListener = false) => {
-            if (this.eventListenerController) {
-                this.eventListenerController.abort();
-            }
-            if (!element) {
-                this.openButton = undefined;
-                return;
-            }
-            try {
-                const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
-                this.openButton = button;
-                if (addClickListener && !this.disconnectController.signal.aborted) {
-                    this.eventListenerController = new AbortController();
-                    this.openButton.addEventListener("click", this.openButtonEventListener, {
-                        signal: this.eventListenerController.signal,
-                    });
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-        };
-        this.setStickHeaderStyleMutations = (clean = false) => {
-            const stickyHeaderTabGroups = this.element.querySelectorAll('[slot="sticky-header"] duet-tab-group');
-            stickyHeaderTabGroups.forEach(tabGroup => {
-                tabGroup.style.position = clean ? null : "relative";
-                tabGroup.style.top = clean ? null : "1px";
-                tabGroup.switchLargeBreakpoint = "always";
-            });
-        };
-        this.openButtonEventListener = (e) => {
-            this.onClick(e);
-        };
-        this.getOpenPanel = () => {
-            return this.element.querySelector("duet-slideout-panel[open]");
-        };
-        this.toggleMenu = (e) => {
-            this.open = !this.open;
-            this.duetSlideoutEvent.emit({
-                originalEvent: e,
-                data: { element: this.element, open: this.open },
-                component: "duet-slideout",
-            });
-        };
-        this.onClick = (e) => {
-            this.toggleMenu(e);
-        };
-        this.language = getLanguage();
-        this.displaying = false;
-        this.openPanel = false;
-        this.theme = "";
-        this.accessibleRole = "menubar";
-        this.open = false;
-        this.backgroundColor = "gray-lightest";
-        this.modal = true;
-    }
-    /**
-     * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
-     * the component automatically sets the click event listener to open the slideout.
-     */
-    get opener() {
-        return this._opener;
-    }
-    set opener(value) {
-        const isString = typeof value === "string";
-        const element = isString ? document.getElementById(value) : value;
-        if (this.openButton !== element) {
-            this._opener = value;
-            this.setOpenButton(element, isString);
-        }
-    }
-    /**
-     * Alias for property opener.
-     */
-    get controller() {
-        return this._opener;
-    }
-    set controller(value) {
-        this.opener = value;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-        if (this.disconnectController && this.disconnectController.signal.aborted) {
-            this.disconnectController = new AbortController();
-        }
-        if (!this.teleport) {
-            this.teleport = new Teleport(this.element);
-        }
-        if (this.teleport) {
-            this.teleport.activate();
-        }
-        this.setStickHeaderStyleMutations();
-        if (!this.mutationObserver) {
-            this.mutationObserver = new MutationObserver(() => {
-                this.openPanel = !!this.getOpenPanel();
-            });
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
-        }
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        if (this.dialog && this.modal) {
-            enableBodyScroll(this.dialog);
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-        if (this.disconnectController) {
-            this.disconnectController.abort();
-        }
-        this.setOpenButton(undefined);
-        this.setStickHeaderStyleMutations(true);
-    }
-    handleOpenChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (this.open && !oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
-            const openPanel = this.getOpenPanel();
-            this.teleport.makeSiblingsInert();
-            if (this.modal) {
-                disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
-            }
-            if (openPanel) {
-                openPanel.setFocus();
-            }
-            else {
-                setTimeout(() => {
-                    this.closeButton.focus();
-                }, 200);
-            }
-        }
-        else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
-            setTimeout(() => {
-                focusElement(this.openButton);
-                if (this.modal) {
-                    enableBodyScroll(this.dialog);
-                }
-                this.teleport.removeInertFromSiblings();
-            }, 200);
-        }
-    }
-    /**
-     * Component event handling.
-     */
-    handleKeyUp(ev) {
-        // When Esc is pressed
-        if (isEscapeKey(ev)) {
-            if (this.open) {
-                this.toggleMenu(ev);
-            }
-        }
-    }
-    handleDocumentClick(ev) {
-        if (!this.open) {
-            return;
-        }
-        const path = ev.composedPath();
-        if (!path.includes(this.dialog) && !path.includes(this.openButton)) {
-            this.toggleMenu(ev);
-        }
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        var _a;
-        (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.focus(options);
-    }
-    /**
-     * Toggles the slideout.
-     */
-    async toggle() {
-        const event = new CustomEvent("toggle");
-        this.toggleMenu(event);
-        setTimeout(() => {
-            this.closeButton.focus();
-        }, 200);
-    }
-    /**
-     * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
-     * the slideout so that focus can be moved back to this specific element when
-     * the slideout dialog is closed.
-     */
-    async show() {
-        if (this.open) {
-            return;
-        }
-        this.setOpenButton(document.activeElement);
-        this.toggleMenu(new CustomEvent("toggle"));
-    }
-    /**
-     * Hides the slideout dialog and puts focus back to the original element
-     * that triggered the slideout (if we’re still in the same view).
-     */
-    async hide() {
-        if (!this.open) {
-            return;
-        }
-        this.toggleMenu(new CustomEvent("toggle"));
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const styles = {
-            background: getColorByName(this.backgroundColor, this.theme),
-        };
-        const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
-        const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'c299a850fff6c11bcca6e85576c04bf74e367619' }, h("div", { key: '76b69d00087367d0cfcf5de14d4023180b4fa42d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6daa912479f25ecd3e5527ab40861590fc36f150', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '9dc84e8113b5243b44224407df8d4c89eafdf2b7', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
-                dialog: true,
-                hidden: !this.open,
-                modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '132b28a73aa0dc07ee1f159c59c0f6ca5c7c5e09', moveFocusTo: this.closeButton }), h("div", { key: 'cb528ca9e0ee385299a9e042d8f1a42d422d7a1a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'b9e5deae2f2cf48c3d652e885002f30cc434660d', class: "top" }, h("button", { key: 'fc5ab74ac6519c2c503131d21fc9239ddf3a1bf8', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
-                "slideout-close": true,
-                active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '2c2217a591e73c3121d123a9e3f6062e8d243d9a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '1bf96970d244ee1941f3db97c89cac30c4d71f9e', class: "sticky-header" }, h("slot", { key: '1d6dca6fc160b198115c7d1469576c6bc4f863ac', name: "sticky-header" }))), h("div", { key: '514f42edc0e6477bf154e0de2fdaa9bbe7c3ffea', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
-                items: true,
-            } }, h("slot", { key: '982778a16720e0b741c702729b87aa3f805da499' })), h(FocusGuard, { key: 'ee76635f5ccb38cc512e1d8a862fc9fd85f72666', moveFocusTo: this.closeButton })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return DuetSlideoutStyle0; }
-}, [1, "duet-slideout", {
-        "theme": [1025],
-        "accessibleRole": [1, "accessible-role"],
-        "open": [1540],
-        "opener": [6145],
-        "controller": [6145],
-        "backgroundColor": [1537, "background-color"],
-        "modal": [4],
-        "language": [32],
-        "displaying": [32],
-        "openPanel": [32],
-        "setFocus": [64],
-        "toggle": [64],
-        "show": [64],
-        "hide": [64]
-    }, [[8, "keyup", "handleKeyUp"], [4, "click", "handleDocumentClick"]], {
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-slideout", "duet-icon", "duet-overlay"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-slideout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSlideout$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-overlay":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSlideout = DuetSlideout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSlideout, defineCustomElement };

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

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

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

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

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

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

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

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

package/lib/dist-custom-elements/duet-status-icon.d.ts

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

package/lib/dist-custom-elements/duet-status-icon.js

@@ -1,111 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { t as tokens } from './p-f6000a03.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const DuetStatusIcon$1 = /*@__PURE__*/ proxyCustomElement(class DuetStatusIcon extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.bg = {
-            default: {
-                default: "color_lt_blue_100",
-                success: "color_success_200",
-                warning: "color_warning_200",
-                danger: "color_danger_100",
-            },
-            strong: {
-                default: "color_lt_blue_600",
-                success: "color_success_700",
-                warning: "color_warning_500",
-                danger: "color_danger_600",
-            },
-        };
-        this.color = {
-            default: {
-                default: "color_lt_blue_700",
-                success: "color_success_800",
-                warning: "color_warning_800",
-                danger: "color_danger_700",
-            },
-            strong: {
-                default: "color_lt_blue_100",
-                success: "color_gray_lightest",
-                warning: "color_warning_900",
-                danger: "color_gray_lightest",
-            },
-        };
-        this.variation = "default";
-        this.size = "medium";
-        this.margin = "auto";
-        this.strong = false;
-    }
-    getBg() {
-        return tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
-    }
-    getColor() {
-        return tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
-    }
-    getIcon() {
-        switch (this.variation) {
-            case "default":
-                return `
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
-          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
-          <path fill="${this.getColor()}" d="M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z"/>
-          <circle fill="${this.getColor()}" cx="11.625" cy="7.125" r="1.125"/>
-          </svg>`;
-            case "success":
-                return `
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
-          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
-          <path fill="${this.getColor()}" d="M9.325 17.916a1.79 1.79 0 0 1-1.498-.799l-2.44-3.462a.75.75 0 0 1 1.227-.864l2.45 3.477a.306.306 0 0 0 .261.148.294.294 0 0 0 .236-.119l7.852-9.935a.75.75 0 1 1 1.175.93l-7.843 9.923a1.781 1.781 0 0 1-.423.396 1.78 1.78 0 0 1-.997.305z"/>
-          </svg>`;
-            case "warning":
-            case "danger":
-                return `
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
-          <path fill="${this.getBg()}" d="M1.27,23.767C1.58,23.919 1.926,24 2.273,24L21.73,24C22.336,24 22.906,23.764 23.334,23.336C23.764,22.908 24.001,22.337 24.001,21.73C24.001,21.383 23.92,21.037 23.768,20.727L14.295,1.429C13.862,0.547 12.981,0 11.997,0C11.605,0 11.227,0.088 10.873,0.262C10.369,0.51 9.954,0.924 9.706,1.429L0.234,20.728C-0.034,21.271 -0.073,21.888 0.123,22.462C0.319,23.036 0.727,23.5 1.27,23.767Z"/>
-          <rect fill="${this.getColor()}" x="11.1" y="7.2" width="1.8" height="8.4" rx="0.9"/>
-          <rect fill="${this.getColor()}" x="10.8" y="18" width="2.4" height="2.4" rx="1.2"/>
-          </svg>`;
-        }
-    }
-    render() {
-        return (h(Host, { key: '8389c107ccded337d2e5121703d5221e70edcb42', class: {
-                [`duet-status-icon-${this.variation}`]: true,
-                "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'c05e3c223a16541133d3be5cb74f39760cc46ba1', icon: this.getIcon(), size: this.size, margin: this.margin })));
-    }
-}, [1, "duet-status-icon", {
-        "variation": [1],
-        "size": [513],
-        "margin": [1],
-        "strong": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-status-icon", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-status-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetStatusIcon$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetStatusIcon = DuetStatusIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetStatusIcon, defineCustomElement };

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

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

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

@@ -1,147 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { d as defineCustomElement$4 } from './p-081025d8.js';
-import { d as defineCustomElement$3 } from './p-77667998.js';
-import { d as defineCustomElement$2 } from './p-0871ccd4.js';
-
-var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
-
-const duetStepCss = "*,*::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;display:block}.duet-step{padding:20px !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;background:rgb(255, 255, 255);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)}.duet-step.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\";box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 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)}.duet-step.rounded-top{border-top-left-radius:4px;border-top-right-radius:4px}.duet-step.rounded-bottom{margin-bottom:20px !important;border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-step.rounded-bottom{margin-bottom:0 !important}}@media (min-width: 36em){.duet-step{padding:0 20px 0 0 !important;margin:0 !important;font-size:1.25rem;box-shadow:none !important}}.duet-step-heading{display:flex;align-items:center;border-radius:4px}.duet-step-heading[aria-disabled=false]{cursor:pointer}.duet-step-heading:focus{outline:0}.duet-step-heading:active{opacity:0.75}:host(.user-is-tabbing) .duet-step-heading:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-step-heading:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.is-complete .duet-step-heading:hover .duet-step-counter,.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#005f8f}.duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#9e0a26}.is-current .duet-step-heading{margin-bottom:20px}@media (min-width: 36em){.duet-step-heading{margin-top:8px;margin-bottom:8px !important}:host(:first-of-type) .duet-step-heading{margin-top:0}:host(:last-of-type) .duet-step-heading{margin-bottom:0 !important}}.duet-step-counter{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:30px;color:rgb(255, 255, 255);text-align:center;border-radius:50%;transition:background-color 300ms ease}@media (min-width: 36em){.duet-step-counter{width:40px;height:40px;line-height:40px}}.is-complete .duet-step-counter,.is-current .duet-step-counter,.is-disabled .duet-step-counter{background-color:rgb(0, 119, 179)}.duet-theme-turva.is-complete .duet-step-counter,.duet-theme-turva.is-current .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-counter{background-color:rgb(198, 12, 48)}.is-incomplete .duet-step-counter{background-color:rgb(98, 121, 138)}.duet-theme-turva.is-incomplete .duet-step-counter{background-color:rgb(143, 147, 158)}.duet-step-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 36em){.duet-step-icon{width:20px;height:20px}}.duet-step-icon duet-icon{width:16px;height:16px}@media (min-width: 36em){.duet-step-icon duet-icon{width:20px;height:20px}}@media (min-width: 36em){.duet-step-content-wrapper{min-height:20px;padding-left:40px;margin-left:19px;border-left:2px solid rgb(212, 223, 229)}.duet-theme-turva .duet-step-content-wrapper{border-color:rgb(222, 224, 228)}:host(:last-of-type) .duet-step-content-wrapper{min-height:0;border:transparent}}.duet-step-content{display:none;padding-bottom:16px}@media (min-width: 36em){.duet-step-content{padding-bottom:28px}}.is-current .duet-step-content{display:block}.duet-step-heading-slot{display:none;margin-top:2px}@media (min-width: 48em){.duet-step-heading-slot{display:block}}";
-const DuetStepStyle0 = duetStepCss;
-
-const DuetStep$1 = /*@__PURE__*/ proxyCustomElement(class DuetStep extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetStepClick = createEvent(this, "duetStepClick", 7);
-        this.buttonId = createID("DuetStepButton");
-        this.contentId = createID("DuetStepContent");
-        this.handleKeyDown = (e) => {
-            if (this.isClickDisabled()) {
-                return;
-            }
-            if (isKeyboardClick(e)) {
-                e.preventDefault();
-                this.handleStepClick(e);
-            }
-        };
-        this.handleClick = (e) => {
-            if (this.isClickDisabled()) {
-                return;
-            }
-            this.handleStepClick(e);
-        };
-        this.theme = "";
-        this.heading = undefined;
-        this.headingLevel = undefined;
-        this.stepIndex = undefined;
-        this.state = undefined;
-        this.roundedTop = false;
-        this.roundedBottom = false;
-    }
-    handleStepClick(e) {
-        this.duetStepClick.emit({
-            originalEvent: e,
-            component: "duet-step",
-            stepIndex: this.stepIndex,
-        });
-    }
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    /**
-     * Programmatically shift focus to the step's heading.
-     */
-    async setFocus(options = { preventScroll: true }) {
-        this.buttonElement.focus(options);
-    }
-    isClickDisabled() {
-        return this.state !== "complete";
-    }
-    headingColor() {
-        if (this.state !== "incomplete") {
-            return "";
-        }
-        if (this.theme !== "turva") {
-            return "gray-darker";
-        }
-        else {
-            return "gray-dark-turva";
-        }
-    }
-    renderStepCounter() {
-        if (this.state === "complete" || this.state === "disabled") {
-            return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: actionEdit2.svg })));
-        }
-        return `${this.stepIndex + 1} `;
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h("div", { key: '2be03e57885747f4abcf887167a50be41f202172', class: {
-                "duet-step": true,
-                [`is-${this.state}`]: true,
-                "rounded-top": this.roundedTop,
-                "rounded-bottom": this.roundedBottom,
-                "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '13a6b9a9d5a8b5e11441d344768333afbd0006bc', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '4cdf824131a34f5a722ff75b5865c6968c946b84', "aria-hidden": "true" }, h("div", { key: '697c430716ee8b1d61161fbb6cfbfdb347754170', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '0df10d7cd8c8033debe7e429f052ba3e785c68fd', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'f8be9274607789f07981bb288d19516f222e613b', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: 'bc8046dd49578c57e41ff6c301b57711dbf47db8' }, h("duet-heading", { key: '841be21a0beabe2000a75341302462ecd0cd3cd6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '992fc197dcc5b85f6d95e016e0736e1b65d0c3de', direction: "horizontal", size: "large" }), h("div", { key: '8040a9695f6d0e297b7e0887814a3723e511b8ec', class: "duet-step-heading-slot" }, h("slot", { key: 'e7d76c7f8b978934cf234bd29e4e600504f42164', name: "heading-content" }))), h("div", { key: '14a1a0370d7443a3181b82b5d0531e9b208ecc1e', class: "duet-step-content-wrapper" }, h("div", { key: '19dad47c5c9e09671dbf4318b40f5a5fe4ad852b', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'e51e6b4b82722a271c2eba19b54d6bcea10ab5a5' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetStepStyle0; }
-}, [1, "duet-step", {
-        "theme": [1025],
-        "heading": [1],
-        "headingLevel": [1, "heading-level"],
-        "stepIndex": [2, "step-index"],
-        "state": [1],
-        "roundedTop": [4, "rounded-top"],
-        "roundedBottom": [4, "rounded-bottom"],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-step", "duet-heading", "duet-icon", "duet-spacer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-step":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetStep$1);
-            }
-            break;
-        case "duet-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetStep = DuetStep$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetStep, defineCustomElement };