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

package/lib/dist-custom-elements/duet-visually-hidden.d.ts

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

package/lib/dist-custom-elements/duet-visually-hidden.js

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

package/lib/dist-custom-elements/index.d.ts

@@ -1,33 +0,0 @@
-/**
- * Get the base path to where the assets can be found. Use "setAssetPath(path)"
- * if the path needs to be customized.
- */
-export declare const getAssetPath: (path: string) => string;
-
-/**
- * Used to manually set the base path where assets can be found.
- * If the script is used as "module", it's recommended to use "import.meta.url",
- * such as "setAssetPath(import.meta.url)". Other options include
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
- * But do note that this configuration depends on how your script is bundled, or lack of
- * bundling, and where your assets can be loaded from. Additionally custom bundling
- * will have to ensure the static assets are copied to its build directory.
- */
-export declare const setAssetPath: (path: string) => void;
-
-/**
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare const setNonce: (nonce: string) => void
-
-export interface SetPlatformOptions {
-  raf?: (c: FrameRequestCallback) => number;
-  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-}
-export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/lib/dist-custom-elements/index.js

@@ -1,29 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import './p-993aea39.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-f2c2f3d2.js';
-
-const setupLoggers = () => {
-    {
-        globalThis.ds = {
-            log: () => {
-                return;
-            },
-            warn: () => {
-                return;
-            },
-            info: () => {
-                return;
-            },
-        };
-    }
-};
-
-const appGlobalScript = () => {
-    setupLoggers();
-};
-
-const globalScripts = appGlobalScript;
-
-globalScripts();

package/lib/dist-custom-elements/p-0cd28b7b.js

@@ -1,102 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { F as FocusGuard } from './p-e30dc66d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { T as Teleport } from './p-8cb0e6bd.js';
-import { d as defineCustomElement$2 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$1 } from './p-4f6ac36d.js';
-
-const duetTooltipPopupCss = "*,*::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;z-index:950}.duet-tooltip{position:relative;width:282px;min-height:48px;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);visibility:hidden;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:300ms ease;transform-origin:100% 100%}.duet-tooltip.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);border-color:rgb(222, 224, 228);box-shadow:0 2px 10px 0 rgba(117, 117, 117, 0.13)}.duet-tooltip .arrow{position:absolute;width:22px;height:22px;pointer-events:none}.duet-tooltip .arrow.bottom,.duet-tooltip .arrow.bottom-start,.duet-tooltip .arrow.bottom-end{top:-20px}.duet-tooltip .arrow-container{position:relative;left:4px;width:100%;height:100%;pointer-events:none}.duet-tooltip .arrow-container::after{position:absolute;z-index:200;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip .arrow-container::before{position:absolute;z-index:100;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip .arrow-container.top::after,.duet-tooltip .arrow-container.top-start::after,.duet-tooltip .arrow-container.top-end::after{bottom:2px;left:2px;border:10px solid transparent;border-top:10px solid rgb(255, 255, 255)}.duet-tooltip .arrow-container.top::before,.duet-tooltip .arrow-container.top-start::before,.duet-tooltip .arrow-container.top-end::before{bottom:-1px;left:1px;border:11px solid transparent;border-top:11px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tooltip .arrow-container.top::before,.duet-theme-turva .duet-tooltip .arrow-container.top-start::before,.duet-theme-turva .duet-tooltip .arrow-container.top-end::before{border-top:11px solid rgb(222, 224, 228)}.duet-tooltip .arrow-container.bottom::after,.duet-tooltip .arrow-container.bottom-start::after,.duet-tooltip .arrow-container.bottom-end::after{bottom:1px;left:2px;border:10px solid transparent;border-bottom:10px solid rgb(255, 255, 255)}.duet-tooltip .arrow-container.bottom::before,.duet-tooltip .arrow-container.bottom-start::before,.duet-tooltip .arrow-container.bottom-end::before{bottom:1px;left:1px;border:11px solid transparent;border-bottom:11px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tooltip .arrow-container.bottom::before,.duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before,.duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before{border-top:11px solid rgb(222, 224, 228)}.duet-tooltip.duet-tooltip-has-label{right:auto !important;left:0;width:282px !important;transform-origin:0 0 !important}.duet-tooltip.duet-tooltip-active{visibility:visible;opacity:1;transition-property:transform, opacity}.duet-tooltip-content-area{padding:20px !important;width:100%;padding-right:25px !important;overflow-y:auto;-webkit-hyphens:auto;hyphens:auto;border-radius:4px;-webkit-overflow-scrolling:touch}.duet-tooltip-content-area:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-content-area: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-tooltip-content-area:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tooltip-content-area::-webkit-scrollbar{width:4px}.duet-tooltip-content-area::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(212, 223, 229);border-radius:4px}.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(222, 224, 228)}.duet-tooltip-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:17px;height:17px;min-height:0 !important;padding:0 !important;margin:0 !important;line-height:normal;color:rgb(8, 42, 77);cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;-webkit-appearance:none;appearance:none}.duet-tooltip-close:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva .duet-tooltip-close:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}";
-const DuetTooltipPopupStyle0 = duetTooltipPopupCss;
-
-const DuetTooltipPopup = /*@__PURE__*/ proxyCustomElement(class DuetTooltipPopup extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tooltipPopupClosed = createEvent(this, "tooltipPopupClosed", 7);
-        this.handleCloseClick = () => {
-            this.tooltipPopupClosed.emit();
-        };
-        this.theme = "";
-        this.active = undefined;
-        this.tooltipId = undefined;
-        this.arrowStyles = undefined;
-        this.placement = undefined;
-        this.accessibleCloseLabel = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-        if (!this.teleport) {
-            this.teleport = new Teleport(this.element);
-        }
-        if (this.teleport) {
-            this.teleport.activate();
-        }
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    async getArrowElement() {
-        return this.arrowEl;
-    }
-    async getContentElement() {
-        return this.contentEl;
-    }
-    async setFocusOnContentElement() {
-        this.contentEl.focus();
-    }
-    render() {
-        return (h(Host, { key: '230347e6fbc48f428182901765f6cdee9c5d6b71' }, h("div", { key: 'b52c94eb9e8241f7ec43b5ad5057cc6979a65ab7', class: {
-                "duet-tooltip": true,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: 'cf20aefbd2573f69ecd7a497fb6e7015e69a33ca', moveFocusTo: this.buttonEl }), h("div", { key: '2f77788f5c9a679e63fe3923b4d1e1b4142ed45d', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '6c7ac1513024cc67c72f05b03a5e138b337289cd' })), h("div", { key: 'a8dd723ea6c4151aa2d5371b85f83ccff364d0c4', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '292745e4821b706148cb28a1eb515aeb9ddb5a0b', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '91f86862f6c024c9c13dcd84a0c47ff0cc925f79', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'acfcce3823241db8c3648c2ab20bae850997472b', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '16081fda331f5c290dc316663c28a4f306355f67' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'be700e8d270a0d4f4c053c44a30ae95b995bbcc6', moveFocusTo: this.contentEl }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetTooltipPopupStyle0; }
-}, [1, "duet-tooltip-popup", {
-        "theme": [1025],
-        "active": [4],
-        "tooltipId": [1, "tooltip-id"],
-        "arrowStyles": [16],
-        "placement": [1],
-        "accessibleCloseLabel": [1, "accessible-close-label"],
-        "getArrowElement": [64],
-        "getContentElement": [64],
-        "setFocusOnContentElement": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-tooltip-popup", "duet-icon", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetTooltipPopup);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetTooltipPopup as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-0fb1efbc.js

@@ -1,317 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h as hasSlot, b as getElementsFromDefaultSlot } from './p-ad615991.js';
-import { d as defineCustomElement$4 } from './p-42c1fc90.js';
-import { d as defineCustomElement$3 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$2 } from './p-f8ba399b.js';
-import { d as defineCustomElement$1 } from './p-4f6ac36d.js';
-
-const duetScrollableCss = "*,*::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}:host{position:relative !important}:host .duet-scrollable-items{position:relative;display:flex}:host .duet-scrollable-items.buttons .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute{position:absolute;top:0;z-index:210;width:auto;height:100%;padding:0 16px;background-color:rgb(255, 255, 255)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left{left:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right{right:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button{position:absolute;display:flex;flex:0 0 auto;flex-basis:40px;align-items:center;height:100%;cursor:pointer;transition:transform 300ms ease}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon{transition:transform 300ms ease;transform:scale(0.8)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left{left:0;padding:10px 10px 10px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--right{right:0;padding:10px 0 10px 10px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--top{align-items:flex-start}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom{align-items:flex-end}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute{padding:0 7px;border:1px solid rgb(212, 223, 229)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left{border-radius:8px 0 0 8px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right{border-radius:0 8px 8px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(0, 119, 179);border-width:2px;}.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden]{display:none !important}:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;padding-inline:10px;margin-inline:-10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);-webkit-mask-size:50% 100%, 50% 100%;-webkit-mask-position:left, right;-webkit-mask-repeat:no-repeat;mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);mask-size:50% 100%, 50% 100%;mask-position:left, right;mask-repeat:no-repeat;}:host .duet-scrollable-items .duet-scrollable-list--absolute{padding-right:0;padding-left:2px;margin-inline:0;-webkit-mask:none !important;mask:none !important}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items .duet-scrollable-list.gap-none{gap:0}:host .duet-scrollable-items .duet-scrollable-list.gap-large{gap:20px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small{padding-top:4px;padding-bottom:4px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--x-small{padding-top:8px;padding-bottom:8px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--small{padding-top:12px;padding-bottom:12px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--medium{padding-top:16px;padding-bottom:16px}:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch{width:100%}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
-const DuetScrollableStyle0 = duetScrollableCss;
-
-const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Private variables and constants index
-         */
-        this.currentIndex = 0;
-        this.scrollPaneElement = undefined;
-        this.hasCollapseButtonLabelSlot = false;
-        /**
-         * Observer to check if the scrollable content is wider than the scroll pane,
-         * and thus needs scrolling.
-         */
-        this.resizeObserver = new ResizeObserver(entries => {
-            if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                const threshold = this.getOverlayWidth();
-                this.checkScrollingNeeded(entries[0].target, threshold);
-            }
-        });
-        this.collapsedOnClick = () => {
-            this.collapsed = !this.collapsed;
-        };
-        this.scrollPaneAtStart = true;
-        this.needsScrolling = true;
-        this.scrollPaneAtEnd = false;
-        this.childrenData = {};
-        this.theme = "";
-        this.identifier = "";
-        this.collapsed = false;
-        this.buttons = true;
-        this.buttonAlignment = "center";
-        this.buttonPosition = "relative";
-        this.center = false;
-        this.padding = "none";
-        this.gap = "large";
-        this.selected = 0;
-        this.stretch = false;
-    }
-    watchPropHandler(newValue) {
-        this.scrollToElement(newValue, "center");
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasCollapseButtonLabelSlot = hasSlot(this.element, "collapse-button-label");
-    }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            if (this.scrollPaneElement) {
-                const threshold = this.buttonPosition === "absolute" ? 0 : 5;
-                this.checkScrollingNeeded(this.scrollPaneElement, threshold);
-                this.updateScrollButtons();
-                this.resizeObserver.observe(this.scrollPaneElement);
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.resizeObserver.disconnect();
-    }
-    /**
-     * Private methods.
-     */
-    getScrollPaneElements() {
-        return getElementsFromDefaultSlot(this.element);
-    }
-    /**
-     * Check if scrolling is needed.
-     *
-     * @param element - The element to check.
-     * @param threshold - The threshold to allow content to be slightly wider before showing buttons.
-     *                    Defaults to half of the overlay width, since gradient is 10px wide with 50/50 split.
-     */
-    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 5) {
-        var _a;
-        if (!element) {
-            return;
-        }
-        const parentWidth = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-        const contentWidth = element.scrollWidth;
-        const overlayWidth = this.getOverlayWidth() * 2;
-        this.needsScrolling = contentWidth - overlayWidth > parentWidth + threshold;
-        if (!this.needsScrolling) {
-            this.scrollPaneAtStart = true;
-            this.scrollPaneAtEnd = true;
-        }
-        else {
-            this.updateScrollButtons();
-        }
-    }
-    getLastVisibleElement() {
-        const element = this.getScrollPaneElements().find(el => el.getBoundingClientRect().x +
-            el.getBoundingClientRect().width -
-            this.scrollPaneElement.getBoundingClientRect().x >
-            this.scrollPaneElement.clientWidth);
-        const elementIndex = this.getScrollPaneElements().indexOf(element);
-        //if panel width is less than element width we still want to scroll to next element
-        if (element.clientWidth > this.scrollPaneElement.clientWidth) {
-            return elementIndex;
-        }
-        return elementIndex - 1;
-    }
-    getFirstVisibleElement() {
-        const scrollPaneElements = this.getScrollPaneElements();
-        const element = scrollPaneElements.find(el => el.getBoundingClientRect().x > this.scrollPaneElement.getBoundingClientRect().x);
-        const elementIndex = !element ? scrollPaneElements.length : scrollPaneElements.indexOf(element);
-        // if panel width is less than element width we still want to scroll to previous element
-        var currentElIndex = Math.max(elementIndex - 1, 0);
-        if (scrollPaneElements[currentElIndex].clientWidth > this.scrollPaneElement.clientWidth) {
-            return currentElIndex;
-        }
-        return elementIndex;
-    }
-    updateScrollButtons(element = null, container = this.scrollPaneElement) {
-        if (!this.buttons) {
-            return;
-        }
-        // handle case when element is wider than container
-        if (element && element.clientWidth > this.scrollPaneElement.clientWidth) {
-            const elementIndex = this.getScrollPaneElements().indexOf(element);
-            if (elementIndex == 0) {
-                this.scrollPaneAtStart = true;
-            }
-            if (elementIndex == this.getScrollPaneElements().length - 1) {
-                this.scrollPaneAtEnd = true;
-            }
-            return;
-        }
-        if (container.scrollLeft <= 0) {
-            this.scrollPaneAtStart = true;
-        }
-        else if (container.scrollLeft > 0) {
-            this.scrollPaneAtStart = false;
-        }
-        // Round both values to handle sub-pixel precision issues
-        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
-        const totalContentWidth = Math.round(container.scrollWidth);
-        this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
-    }
-    scrollToElement(index = this.currentIndex, inline) {
-        const elements = this.getScrollPaneElements();
-        if (!elements || elements.length === 0) {
-            return;
-        }
-        if (index + 1 >= elements.length) {
-            index = elements.length - 1;
-        }
-        if (index < 0) {
-            index = 0;
-        }
-        // store previous position
-        let prevPosition = elements[0].getBoundingClientRect().x;
-        // iterations to run
-        let ticksWhereScrollDidNotHappen = 5;
-        const getAnimationFrame = () => {
-            // if we get the same value enter the logic loop
-            if (elements[0].getBoundingClientRect().x === prevPosition) {
-                ticksWhereScrollDidNotHappen--;
-                // When iteration is not complete run the calculation again
-                if (ticksWhereScrollDidNotHappen !== 0) {
-                    window.requestAnimationFrame(getAnimationFrame);
-                    return;
-                }
-                this.updateScrollButtons(elements[index]);
-            }
-            else {
-                window.requestAnimationFrame(getAnimationFrame);
-                prevPosition = elements[0].getBoundingClientRect().x;
-            }
-        };
-        elements[index].scrollIntoView({ behavior: "smooth", block: "nearest", inline });
-        window.requestAnimationFrame(getAnimationFrame);
-    }
-    scrollLeft() {
-        this.scrollPaneAtEnd = false;
-        const first = this.getFirstVisibleElement();
-        this.scrollToElement(first - 1, "center");
-    }
-    scrollRight() {
-        this.scrollPaneAtStart = false;
-        const last = this.getLastVisibleElement();
-        this.scrollToElement(last + 1, "center");
-    }
-    getOverlayWidth() {
-        return this.buttonPosition === "absolute" ? 0 : 10;
-    }
-    renderButton(direction) {
-        const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
-        const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
-        const scrollTo = () => {
-            if (direction === "left") {
-                this.scrollLeft();
-            }
-            else {
-                this.scrollRight();
-            }
-        };
-        const scrollPaneLocation = direction === "left" ? this.scrollPaneAtStart : this.scrollPaneAtEnd;
-        return (h("div", { class: {
-                "duet-scrollable-button-container": true,
-                [`${direction}`]: true,
-                "duet-scrollable-button-container--occluded": !this.needsScrolling,
-                [`duet-scrollable-button-container--${this.buttonPosition}`]: true,
-            }, hidden: !this.buttons || (this.buttonPosition === "absolute" && scrollPaneLocation) }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
-                "duet-scrollable-button": true,
-                [`duet-scrollable-button--${this.buttonPosition}`]: true,
-                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
-                [`duet-scrollable-button--${direction}`]: true,
-            }, onClick: () => {
-                scrollTo();
-                if (document.activeElement) {
-                    document.activeElement.blur();
-                }
-            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: this.buttonPosition === "absolute" ? "x-small" : "small", margin: "none" }))));
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'dabca4939b3be30f3d3ecd1b9f68e52456269e0a', class: {
-                "duet-theme-turva": this.theme === "turva",
-                "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '2ff182f33a6de936878bb0c8fa90609b298b2e8f', class: {
-                collapse: true,
-                hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '7c7cfad3a7ca7252d6b5353eb8983d31d5fc6532', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '7e7ad479953be49eb8c6868e0afe130ef8f8e719', name: "collapse-button-label" })))), h("div", { key: '437ccb24c0eb10de320c28e54d1fbcaaba37ba43', class: {
-                "duet-scrollable-items": true,
-                buttons: this.buttons,
-                center: this.center,
-                "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '9f6b170c54152d4778e09e581199897ea6da96ad', class: {
-                "duet-scrollable-list": true,
-                [`duet-scrollable-list--${this.buttonPosition}`]: true,
-                [`gap-${this.gap}`]: true,
-                collapsed: this.collapsed,
-                [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
-                [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
-                "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'cb3852e8f2c7c5a3114a9c373f10d0ec878707e7' })), this.buttons && this.renderButton("right"))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "selected": ["watchPropHandler"]
-    }; }
-    static get style() { return DuetScrollableStyle0; }
-}, [1, "duet-scrollable", {
-        "theme": [1025],
-        "identifier": [1],
-        "collapsed": [1540],
-        "buttons": [4],
-        "buttonAlignment": [1, "button-alignment"],
-        "buttonPosition": [1, "button-position"],
-        "center": [516],
-        "padding": [1],
-        "gap": [1],
-        "selected": [1026],
-        "stretch": [4],
-        "scrollPaneAtStart": [32],
-        "needsScrolling": [32],
-        "scrollPaneAtEnd": [32],
-        "childrenData": [32]
-    }, undefined, {
-        "selected": ["watchPropHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-scrollable", "duet-button", "duet-icon", "duet-spinner", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-scrollable":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetScrollable);
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetScrollable as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-115c79b6.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-var actionArrowDownSmall={"title":"action-arrow-down-small","tags":"action arrow down small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 19.5a2.3 2.3 0 0 1-1.729-.78L.46 7.568a1.847 1.847 0 0 1 2.773-2.439l8.579 9.752a.25.25 0 0 0 .376 0l8.579-9.752a1.847 1.847 0 1 1 2.773 2.439l-9.808 11.148A2.31 2.31 0 0 1 12 19.5z\"/></svg>"};
-
-export { actionArrowDownSmall as a };

package/lib/dist-custom-elements/p-15809286.js

@@ -1,50 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-
-const duetListItemCss = "*,*::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;flex-direction:column;display:flex;width:100%;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77)}:host dt{padding-bottom:4px}:host dd{padding-top:0}:host dt,:host dd{flex-basis:100%}:host dt,:host dd{width:100%;margin-inline-start:0;-webkit-hyphens:auto;hyphens:auto;text-align:left;overflow-wrap:break-word}:host dt{font-weight:600}.duet-theme-turva :host dt{font-weight:700}:host dd{margin-left:auto}:host(.duet-list-striped) dt,:host(.duet-list-striped) dd{padding:16px}:host(.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-striped) dd{padding-top:0}:host(.duet-list-striped.duet-no-stacking) dt,:host(.duet-list-striped.duet-no-stacking) dd{padding:16px}:host(:not(.duet-list-striped)) dt,:host(:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(:not(.duet-list-striped)) dt{padding-bottom:4px}:host(:not(.duet-list-striped)) dd{padding-top:0}:host(:not(.duet-list-striped).duet-no-stacking) dt,:host(:not(.duet-list-striped).duet-no-stacking) dd{padding:8px;padding-inline:0}:host(.duet-p-0) dt,:host(.duet-p-0) dd{padding:0 !important}:host(.duet-list-mobile-center) dt,:host(.duet-list-mobile-center) dd{text-align:center}:host(.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)}:host(.duet-list-striped:nth-child(odd)) dt,:host(.duet-list-striped:nth-child(odd)) dd{background:rgb(245, 248, 250)}:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd{background:rgb(245, 247, 250)}:host(.duet-list-bordered){border-block-start:1px solid rgb(212, 223, 229)}:host(.duet-list-bordered:last-child){border-block-end:1px solid rgb(212, 223, 229)}:host(.duet-list-bordered.duet-theme-turva){border-block-start:1px solid rgb(222, 224, 228)}:host(.duet-list-bordered.duet-theme-turva:last-child){border-block-end:1px solid rgb(222, 224, 228)}:host(.duet-list-inner-bordered:not(:last-child)){border-block-end:1px solid rgb(212, 223, 229)}:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)){border-block-end:1px solid rgb(222, 224, 228)}:host(.duet-no-stacking){flex-direction:row}:host(.duet-list-mobile-center.duet-no-stacking) dt,:host(.duet-list-mobile-center.duet-no-stacking) dd{text-align:left}:host(.duet-no-stacking.duet-list-width-30) dt{flex-basis:33%}:host(.duet-no-stacking.duet-list-width-30) dd{flex-basis:67%}:host(.duet-no-stacking.duet-list-width-50) dt{flex-basis:47%}:host(.duet-no-stacking.duet-list-width-50) dd{flex-basis:53%}:host(.duet-no-stacking.duet-list-width-70) dt{flex-basis:65%}:host(.duet-no-stacking.duet-list-width-70) dd{flex-basis:35%}:host(.duet-list-item-breakpoint-x-small){flex-direction:row}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:35%}@media (max-width: 22.5em){:host(.duet-list-item-breakpoint-x-small){flex-direction:column}:host(.duet-list-item-breakpoint-x-small) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:center}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:100%}}@media (min-width: 36em){:host(.duet-list-item-breakpoint-small){flex-direction:row}:host(.duet-list-item-breakpoint-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 48em){:host(.duet-list-item-breakpoint-medium){flex-direction:row}:host(.duet-list-item-breakpoint-medium.duet-list-striped) dt,:host(.duet-list-item-breakpoint-medium.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-medium.duet-p-0) dt,:host(.duet-list-item-breakpoint-medium.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 62em){:host(.duet-list-item-breakpoint-large){flex-direction:row}:host(.duet-list-item-breakpoint-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 64.0625em){:host(.duet-list-item-breakpoint-x-large){flex-direction:row}:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dd{flex-basis:35%}}";
-const DuetListItemStyle0 = duetListItemCss;
-
-const DuetListItem = /*@__PURE__*/ proxyCustomElement(class DuetListItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.responsive = false;
-        this.breakpoint = "small";
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'ea57f0d2a2803d9f9f0f178c784b26532b94ff2e', class: {
-                "duet-no-stacking": !this.responsive,
-                "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
-                "duet-list-item-breakpoint-small": this.breakpoint === "small",
-                "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
-                "duet-list-item-breakpoint-large": this.breakpoint === "large",
-                "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '06fdc40c1a205aa3ff2cff0427e42f5d2df4296b' }, h("slot", { key: 'fa97ca272f09a94d00a0301c7fb56420b6939c90', name: "label" })), h("dd", { key: '464b077e52879084b3b5406e43e7dc449b0c2344' }, h("slot", { key: '9a6232fd2b40641c2a0a25f72df72072e4a2671b', name: "value" }))));
-    }
-    static get style() { return DuetListItemStyle0; }
-}, [1, "duet-list-item", {
-        "responsive": [4],
-        "breakpoint": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetListItem);
-            }
-            break;
-    } });
-}
-
-export { DuetListItem as D, defineCustomElement as d };