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

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

@@ -1,192 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { a as media_query_large } from './p-f6000a03.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './p-8354d1f1.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$3 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$2 } from './p-cd328521.js';
-
-const duetSubmenuBarCss = "*,*::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%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(240, 247, 250);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(198, 225, 238)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(240, 247, 250);border-bottom:1px solid rgb(181, 198, 208)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(181, 198, 208)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-submenu-bar.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.duet-theme-turva .items{background:rgb(245, 247, 250)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
-const DuetSubmenuBarStyle0 = duetSubmenuBarCss;
-
-const DuetSubmenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetSubmenuBar extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.previousYScroll = 0;
-        this.handleMobileView = () => {
-            if (this.mql[0].matches) {
-                this.mobile = false;
-                this.enableBodyScroll();
-            }
-            else {
-                this.mobile = true;
-                if (!this.bodyScroll) {
-                    this.disableBodyScroll();
-                }
-            }
-        };
-        this.onClick = () => {
-            this.open = !this.open;
-        };
-        this.enableBodyScroll = () => {
-            if (this.nav) {
-                enableBodyScroll(this.nav);
-            }
-            if (this.itemsContainer) {
-                enableBodyScroll(this.itemsContainer);
-            }
-        };
-        this.disableBodyScroll = () => {
-            if (this.nav) {
-                disableBodyScroll(this.nav, { reserveScrollBarGap: true });
-            }
-            if (this.itemsContainer) {
-                disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
-            }
-        };
-        this.checkIfHasItems = () => {
-            const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
-            const hasLinks = !!this.element.querySelector("duet-submenu-bar-link");
-            const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
-            return hasDropdownLinks || hasLinks || hasItems;
-        };
-        this.hidden = false;
-        this.mobile = true;
-        this.bodyScroll = true;
-        this.theme = "";
-        this.hideOnScroll = false;
-        this.open = false;
-        this.accessibleLabel = undefined;
-    }
-    watchOpenStateHandler(newValue) {
-        const open = newValue;
-        if (open) {
-            this.bodyScroll = false;
-            this.disableBodyScroll();
-        }
-        else {
-            this.enableBodyScroll();
-            this.bodyScroll = true;
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        this.nav = document.querySelector("duet-nav > [slot='mobile']");
-        this.hasItems = this.checkIfHasItems();
-        this.handleMobileView();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.handleMobileView.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 = [];
-        this.enableBodyScroll();
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        this.button.focus(options);
-    }
-    checkScroll() {
-        if (!this.hideOnScroll) {
-            return;
-        }
-        if (window.scrollY > this.previousYScroll) {
-            if (window.scrollY > 100) {
-                this.hidden = true;
-            }
-        }
-        else {
-            if (window.scrollY < 150) {
-                this.hidden = false;
-            }
-        }
-        this.previousYScroll = window.scrollY;
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '7a77f62cb36c92c38db357ef5fabe1e5c935cc9b' }, h("nav", { key: 'cdbf70223355009908f9d61da89245c37328b044', class: {
-                "duet-submenu-bar": true,
-                "duet-theme-turva": this.theme === "turva",
-                hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '3efbc8761447223494a0c0787a5625cd2797cb0b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-                active: this.open,
-            }, onClick: this.onClick }, h("span", { key: 'c9380b45a8b5d3cb499b88fea51726513c6dd37a', class: "label" }, h("slot", { key: '399042df2b0d6a34b3d110b6d54172b6d287926f', name: "label" }), h("duet-icon", { key: 'b45e07003987ddffd6f33ba63d9ab771b0d65479', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '8f0450f8e75fce5e3761c7328da207bdafe9587b', class: {
-                "menu-container": true,
-                hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'b1862765e933e4d898af65e31d697052219d47a4', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
-                items: true,
-                hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'a7dc8b551b252ddefd205f98675de931a9f95623', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'f6141dd74e409dcc2264efd7e0d3c2686b7cbd6a' }), h("div", { key: '79d986136735ee080a4d1ce27721d4fb83d140fd', class: "list-padding" }))), h("duet-overlay", { key: '8af59698847e9c1c404bf2645787ac5e79b92ad6', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "open": ["watchOpenStateHandler"]
-    }; }
-    static get style() { return DuetSubmenuBarStyle0; }
-}, [1, "duet-submenu-bar", {
-        "theme": [1025],
-        "hideOnScroll": [4, "hide-on-scroll"],
-        "open": [1540],
-        "accessibleLabel": [1, "accessible-label"],
-        "hidden": [32],
-        "mobile": [32],
-        "bodyScroll": [32],
-        "setFocus": [64]
-    }, [[9, "scroll", "checkScroll"]], {
-        "open": ["watchOpenStateHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-submenu-bar", "duet-icon", "duet-overlay"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-submenu-bar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetSubmenuBar$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-overlay":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetSubmenuBar = DuetSubmenuBar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetSubmenuBar, defineCustomElement };

package/lib/dist-custom-elements/duet-tab-group.d.ts

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

package/lib/dist-custom-elements/duet-tab-group.js

@@ -1,321 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { d as isTabKey, q as isShiftTabKey, s as subscribeTabbingChange, u as unsubscribeTabbingChange, j as isArrowLeftKey, f as isArrowUpKey, k as isArrowRightKey, g as isArrowDownKey } from './p-8db11326.js';
-import { a as getLanguage, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$7 } from './p-42c1fc90.js';
-import { d as defineCustomElement$6 } from './p-49b8ef8e.js';
-import { d as defineCustomElement$5 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$4 } from './p-0fb1efbc.js';
-import { d as defineCustomElement$3 } from './p-f8ba399b.js';
-import { d as defineCustomElement$2 } from './p-4f6ac36d.js';
-
-const duetTabGroupCss = "*,*::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;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid rgb(212, 223, 229)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:rgb(222, 224, 228)}.duet-tab-variation-checked .duet-tab-group-tabs{display:flex;gap:4px;padding-top:0;padding-right:12px;padding-left:12px;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-group-tabs{gap:8px;padding-right:16px;padding-left:16px;overflow:visible}}.duet-tab-plain-scrolling .duet-tab-group-tabs{display:flex;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-plain-scrolling .duet-tab-group-tabs{display:block;overflow:auto}}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper{}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper{position:relative;width:100%;overflow:hidden;border-radius:8px;}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay{display:contents}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background,.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border{position:absolute;width:100%;height:100%;pointer-events:none;border-radius:8px}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background{z-index:100;background:rgb(245, 248, 250)}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after{position:absolute;top:0;left:0;width:100%;height:100%;margin-block:1px;content:\"\";border-radius:8px;box-shadow:0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229)}.duet-theme-turva .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after{box-shadow:0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228)}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border{z-index:206;border:1px solid rgb(212, 223, 229)}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:inline-block;width:auto;padding:20px;margin-left:-2px;overflow:visible;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.1;text-align:left;text-decoration:none;cursor:pointer;border-right:2px solid rgb(212, 223, 229);border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-tab-group-stretch .duet-tab-button{flex:1 1 0;min-width:fit-content;text-align:center}.duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(247, 178, 40);box-shadow:0 0 0 1px #dea024}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(214, 28, 82);box-shadow:0 0 0 1px #c1194a}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-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-theme-turva .duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(247, 178, 40);box-shadow:0 0 0 1px #dea024}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(214, 28, 82);box-shadow:0 0 0 1px #c1194a}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button:hover{z-index:200;border-color:rgb(127, 150, 165)}.duet-theme-turva .duet-tab-button:hover{border-color:rgba(199, 202, 207, 0.8)}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:rgb(0, 119, 179);background:rgb(255, 255, 255);border-bottom:3px solid rgb(0, 119, 179);outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:rgb(198, 12, 48);border-color:rgb(222, 224, 228);border-bottom-color:rgb(198, 12, 48)}.duet-tab-button:focus{z-index:205;outline:0}:host(.user-is-tabbing) .duet-tab-button: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-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tab-variation-default .duet-tab-button{z-index:200;padding:11px 20px 13px 20px;overflow:hidden;font-size:0.875rem;color:rgb(62, 84, 102);background:rgb(245, 248, 250);border:1px solid rgb(212, 223, 229)}.duet-tab-variation-default .duet-tab-button.switch-large-at-always{padding:15px 28px 17px 28px;font-size:1rem}@media (min-width: 36em){.duet-tab-variation-default .duet-tab-button.switch-large-at-small{padding:15px 28px 17px 28px;font-size:1rem}}.duet-tab-variation-default .duet-tab-button.selected{color:rgb(8, 42, 77);background:rgb(255, 255, 255);transition:none}.duet-tab-variation-default .duet-tab-button.selected::before{position:absolute;right:-1px;bottom:0;z-index:300;display:block;width:calc(100% + 2px);height:2px;content:\"\";background-color:rgb(0, 119, 179)}.duet-tab-variation-default .duet-tab-button.selected:focus-visible{outline:2px solid rgba(0, 119, 179, 0.8);outline-offset:-5px;box-shadow:none !important}.duet-tab-variation-default .duet-tab-button.selected:focus-visible::before{height:0}.duet-tab-variation-default .duet-tab-button:not(.selected){box-shadow:0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229)}.duet-tab-variation-default .duet-tab-button:hover:not(.selected){color:rgb(30, 45, 59);background:rgb(228, 236, 239)}.duet-tab-variation-default .duet-tab-button:first-child{border-radius:8px 0 0 8px}.duet-tab-variation-default .duet-tab-button:last-child{border-radius:0 8px 8px 0}.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button{z-index:200}.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button:last-child{border-radius:0}.duet-theme-turva.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button::before{height:3px}.duet-theme-turva.duet-tab-variation-default .duet-tab-button{color:rgb(71, 78, 101)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected{color:rgb(23, 28, 58);background:rgb(255, 255, 255)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before{background-color:rgb(198, 12, 48)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected){z-index:200;box-shadow:0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:hover:not(.selected){z-index:200;color:rgb(45, 52, 79);background:rgb(234, 235, 239)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible{border-color:rgb(222, 224, 228);outline-color:rgba(199, 202, 207, 0.8)}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding:12px 0;margin-left:0;font-size:0.875rem;color:rgb(81, 105, 123);border-width:0;border-bottom:2px solid transparent;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button.switch-large-at-always{padding:20px 0;font-size:1rem}@media (min-width: 36em){.duet-tab-variation-plain .duet-tab-button.switch-large-at-small{padding:20px 0;font-size:1rem}}.duet-tab-variation-plain .duet-tab-button:hover{color:rgb(8, 42, 77);border-bottom:2px solid rgb(0, 119, 179)}.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(8, 42, 77);border-bottom:2px solid rgb(0, 119, 179)}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button{color:rgb(71, 78, 101)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover{color:rgb(45, 52, 79);border-bottom:2px solid rgb(198, 12, 48)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(23, 28, 58);border-bottom:2px solid rgb(198, 12, 48)}.duet-tab-variation-checked .duet-tab-button{position:relative;display:inline-block;flex-basis:0;flex-grow:1;width:200px;min-width:200px;padding:8px 4px;border-color:rgb(181, 198, 208);border-top:2px solid rgb(181, 198, 208);border-bottom-color:rgb(0, 119, 179);border-left:2px solid rgb(181, 198, 208);border-radius:4px 4px 0 0;transition:none}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button{border-color:rgb(181, 198, 208);border-bottom-color:rgb(113, 118, 132)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button{min-width:0;padding:16px}}.duet-tab-variation-checked .duet-tab-button.stackable-tab{min-width:0}.duet-tab-variation-checked .duet-tab-button:first-child{margin-left:auto}.duet-tab-variation-checked .duet-tab-button:last-child{margin-right:auto}.duet-tab-variation-checked .duet-tab-button:active{opacity:1;transition:none}.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(0, 119, 179);background:linear-gradient(180deg, rgb(240, 247, 250) 0%, rgb(255, 255, 255) 100%);border-color:rgb(0, 119, 179);border-bottom-color:#fff}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(23, 28, 58);background:linear-gradient(180deg, rgb(245, 247, 250) 0%, rgb(255, 255, 255) 100%);border-color:rgb(113, 118, 132);border-bottom-color:#fff}.duet-tab-variation-checked .duet-tab-button .checked-tab-content{display:flex;flex-direction:row;justify-content:space-between}.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:column;height:100%}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:row}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description{display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:center}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:left}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{margin-top:4px;font-size:0.875rem;font-weight:400;color:rgb(98, 121, 138)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{font-size:1rem;text-align:left}}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{color:rgb(113, 118, 132)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(113, 118, 132)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:-1;margin-top:8px;margin-bottom:8px}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:1}}.duet-tab-group-content{position:relative;width: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);text-align:left}.duet-tab-group-content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-tab-group-content:focus,.duet-tab-group-content:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-group-content.checked-group-content{padding:28px 0 28px 0}.duet-tab-group-content.checked-group-content::after{position:absolute;top:-2px;left:0;width:100%;height:2px;content:\" \";background-color:rgb(0, 119, 179)}.duet-theme-turva .duet-tab-group-content{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-theme-turva .duet-tab-group-content.checked-group-content::after{background-color:rgb(113, 118, 132)}";
-const DuetTabGroupStyle0 = duetTabGroupCss;
-
-const DuetTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetTabGroup extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetTabChange = createEvent(this, "duetTabChange", 7);
-        this.duetTabChangeRequested = createEvent(this, "duetTabChangeRequested", 7);
-        this.id = createID("DuetTabGroup");
-        /**
-         * Component event handling.
-         */
-        this.handleKeyDown = ev => {
-            let button;
-            if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
-                button = ev.target.previousElementSibling;
-            }
-            else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
-                button = ev.target.nextElementSibling;
-            }
-            if (isTabKey(ev) && !isShiftTabKey(ev)) {
-                ev.preventDefault();
-                this.element.querySelector(":scope > duet-tab[selected]").setFocus();
-            }
-            if (button) {
-                ev.preventDefault();
-                button.click();
-                button.focus();
-            }
-        };
-        this.onTabSelect = (tabIndex) => {
-            if (this.tabChangeConfirm) {
-                if (tabIndex !== this.selected) {
-                    const event = {
-                        value: tabIndex,
-                        component: "duet-tab-group",
-                    };
-                    this.duetTabChangeRequested.emit(event);
-                }
-            }
-            else {
-                this.openTab(tabIndex);
-            }
-        };
-        this.scrollToActive = () => {
-            setTimeout(() => {
-                const active = this.tabsContainer.querySelector(".selected");
-                if (active) {
-                    active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-                }
-            }, 50);
-        };
-        this.tabs = [];
-        this.selected = undefined;
-        this.theme = "";
-        this.scrolls = true;
-        this.collapses = false;
-        this.accessibleLabel = undefined;
-        this.variation = "default";
-        this.language = getLanguage();
-        this.labelDefaults = {
-            fi: "Valitse",
-            en: "Choose",
-            sv: "Välj",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = true;
-        this.identifier = this.id;
-        this.margin = "auto";
-        this.padding = "auto";
-        this.setTabIndex = true;
-        this.tabChangeConfirm = false;
-        this.switchLargeBreakpoint = "small";
-        this.fillSpace = false;
-        this.stretch = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    async connectedCallback() {
-        if (typeof MutationObserver !== "undefined") {
-            this.mutationO = new MutationObserver(() => {
-                this.updateTabs();
-            });
-            this.mutationO.observe(this.element, {
-                attributes: true,
-                attributeFilter: ["label"],
-                childList: true,
-                characterData: true,
-                subtree: true,
-            });
-        }
-        await this.updateTabs();
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-        unsubscribeTabbingChange(this);
-    }
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    componentDidLoad() {
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            if (entries.length > 0 && entries[0].isIntersecting) {
-                this.scrollToActive();
-                this.intersectionObserver.disconnect();
-            }
-        }, { root: null, threshold: 0 });
-        this.intersectionObserver.observe(this.element);
-    }
-    /**
-     * This method allows you to open any of the tabs by calling the method and
-     * passing the index of the tab. Please note that index starts from zero.
-     */
-    async openTab(tabIndex) {
-        if (tabIndex >= this.tabs.length) {
-            throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
-        }
-        this.selected = tabIndex;
-        this.tabs.forEach((tab, i) => {
-            tab.selected = i === tabIndex;
-        });
-        this.scrollToActive();
-        const event = {
-            value: tabIndex,
-            component: "duet-tab-group",
-        };
-        this.duetChange.emit(event);
-        this.duetTabChange.emit(event);
-    }
-    /**
-     * This method used to refresh the contents of the tab group
-     * but is now deprecated as this is done automatically.
-     * @deprecated
-     */
-    async refresh() {
-        console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
-    }
-    /**
-     * Local methods.
-     */
-    getTabs() {
-        const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-        const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-        if (localTabs.length === 0) {
-            throw new Error("[duet-tabs] Must have at least one tab");
-        }
-        // filter out any nested tabs
-        return localTabs;
-    }
-    getButtonId(index) {
-        return `${this.id}-button-${index}`;
-    }
-    getTabId(index) {
-        return `${this.id}-tab-${index}`;
-    }
-    getAccessibleDescription(index) {
-        const description = this.tabs[index].getAttribute("accessible-description") || null;
-        return description;
-    }
-    async updateTabs() {
-        this.selected = undefined;
-        this.tabs = this.getTabs();
-        this.tabs.forEach((tab, index) => {
-            tab.id = this.getTabId(index);
-            if (tab.selected) {
-                if (this.selected === undefined) {
-                    this.selected = index;
-                }
-                else {
-                    tab.selected = false;
-                }
-            }
-        });
-        if (this.selected === undefined) {
-            this.selected = 0;
-            this.tabs[0].selected = true;
-        }
-        return;
-    }
-    /**
-     * To support text-align: center;
-     */
-    isCentered() {
-        return window && window.getComputedStyle(this.element).textAlign == "center";
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        // TODO: get rid of plain-scrolling class, as we always scroll
-        const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
-        const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        const largeBreakpoint = `switch-large-at-${this.switchLargeBreakpoint ? this.switchLargeBreakpoint : "small"}`;
-        const buttons = this.tabs.map((element, index) => (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
-                "duet-p-0": this.padding === "none",
-                "duet-tab-button": true,
-                "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
-                selected: element.selected,
-                [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
-                [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
-            }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label))));
-        return (h("div", { key: '25bf0a556ce8bba2a4a332444083d2dfdea7129d', class: {
-                "duet-tab-group": true,
-                "duet-theme-turva": this.theme === "turva",
-                [variationClass]: true,
-                "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
-                "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eba04a26847884e7f63a921f35a876b1bda46338', role: "tablist", class: {
-                "duet-m-0": this.margin === "none" || this.variation === "checked",
-                "duet-tab-group-tabs": true,
-                "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
-                "duet-tab-group-fill-space": this.fillSpace && !this.stretch && this.variation === "default",
-                "duet-tab-group-stretch": this.stretch,
-            }, ref: el => {
-                this.tabsContainer = el;
-            } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
-                "duet-tab-group-scrollable-wrapper": true,
-                "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '67ad5b88361f5c802ba6fbff3f99e2482d6b4424', class: {
-                "duet-tab-group-content": true,
-                "duet-m-0": this.margin === "none",
-                "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'be2053ddbd1717caa7ae223df3c10c0f22adf84b' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetTabGroupStyle0; }
-}, [1, "duet-tab-group", {
-        "theme": [1025],
-        "scrolls": [4],
-        "collapses": [4],
-        "accessibleLabel": [1, "accessible-label"],
-        "variation": [1],
-        "language": [1025],
-        "labelDefaults": [1, "label-default"],
-        "label": [1],
-        "labelHidden": [4, "label-hidden"],
-        "identifier": [1],
-        "margin": [1],
-        "padding": [1],
-        "setTabIndex": [4, "set-tab-index"],
-        "tabChangeConfirm": [4, "tab-change-confirm"],
-        "switchLargeBreakpoint": [1, "switch-large-breakpoint"],
-        "fillSpace": [4, "fill-space"],
-        "stretch": [4],
-        "tabs": [32],
-        "selected": [32],
-        "openTab": [64],
-        "refresh": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-tab-group", "duet-button", "duet-checkmark", "duet-icon", "duet-scrollable", "duet-spinner", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-tab-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetTabGroup$1);
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-checkmark":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-scrollable":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetTabGroup = DuetTabGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetTabGroup, defineCustomElement };

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

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