@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -1,303 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.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-b0925e24.js';
-import { d as defineCustomElement$3 } from './p-4da43fbc.js';
-import { d as defineCustomElement$2 } from './p-41dca9e4.js';
-import { d as defineCustomElement$1 } from './p-02f97b91.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 .duet-scrollable-fade-overlay{position:absolute;bottom:0;z-index:250;display:block;width:10px;height:100%;pointer-events:none;transition:transform 300ms ease}:host .duet-scrollable-items .duet-scrollable-fade-overlay--hidden{display:none}:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay{}:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.left{left:calc(0px - 10px);background-image:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))}:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.right{right:calc(0px - 10px);background-image:linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0))}:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.left{left:calc(40px - 10px);background-image:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))}:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.right{right:calc(40px - 10px);background-image:linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0))}: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 .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[hidden]{display:none !important}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-right:10px;padding-left:10px;margin:0 -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;}: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.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.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) {
-                this.checkScrollingNeeded(entries[0].target);
-            }
-        });
-        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.center = false;
-        this.padding = "none";
-        this.selected = 0;
-    }
-    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) {
-                this.checkScrollingNeeded();
-                this.updateScrollButtons();
-                this.resizeObserver.observe(this.scrollPaneElement);
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.resizeObserver.disconnect();
-    }
-    /**
-     * Private methods.
-     */
-    getScrollPaneElements() {
-        return getElementsFromDefaultSlot(this.element);
-    }
-    /**
-     * Check if scrolling is needed.
-     */
-    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 10) {
-        if (!element) {
-            return;
-        }
-        const scrollPaneWidth = element.getBoundingClientRect().width;
-        const totalContentWidth = element.scrollWidth;
-        this.needsScrolling = totalContentWidth > scrollPaneWidth + threshold;
-        // Update scroll buttons whenever we check if scrolling is needed
-        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;
-        }
-        if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-            this.scrollPaneAtEnd = true;
-        }
-        else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-            this.scrollPaneAtEnd = false;
-        }
-    }
-    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");
-    }
-    renderFadeOverlay(direction) {
-        return (h("div", { class: {
-                "duet-scrollable-fade-overlay": true,
-                "duet-scrollable-fade-overlay--hidden": !this.needsScrolling,
-                [`${direction}`]: true,
-            } }));
-    }
-    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,
-            } }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
-                "duet-scrollable-button": 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: "small", margin: "none" }))));
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'a615541856004f499ebf50d5e5608767efb8b93f', class: {
-                "duet-theme-turva": this.theme === "turva",
-                "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'f94e6cbc5b8e816e690081c52850d86da9e0c7e6', class: {
-                collapse: true,
-                hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '9bb20f2bf9d4cc10917024919804a036d69b28dc', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '02222171b679ea3ee4f6e931a37ba7ffb1670f09', name: "collapse-button-label" })))), h("div", { key: 'bfafba89bd0c00e36d3c71b7aea5a292f073316c', class: {
-                "duet-scrollable-items": true,
-                buttons: this.buttons,
-                center: this.center,
-            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: '8c8b72b33792da063fb60d24522ab10a242744f8', class: {
-                "duet-scrollable-list": true,
-                collapsed: this.collapsed,
-                [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '80ac0420e2b267216fcddfe290981cfcb4a42efb' })), this.renderFadeOverlay("right"), 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"],
-        "center": [4],
-        "padding": [1],
-        "selected": [1026],
-        "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-de4ee016.js

@@ -1,209 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-d77db171.js';
-import { a as actionNewWindowSmall } from './p-f11208c3.js';
-import { D as DuetStringsExternalDefaults, b as DuetStringsDownloadLinkDefaults } from './p-9df4cfa4.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { g as getAccessibleLinkLabel } from './p-afb6f7fb.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { b as breakpointToToken, g as getColorByName } from './p-1f4fbc7a.js';
-import { d as defineCustomElement$1 } from './p-4da43fbc.js';
-
-var actionArrowRight={"title":"action-arrow-right","tags":"action arrow right caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M5.499 24a.752.752 0 0 1-.53-1.281L15.689 12 4.969 1.28c-.142-.141-.22-.33-.22-.53s.078-.389.22-.53c.141-.142.33-.22.53-.22s.389.078.53.22l10.72 10.72a1.5 1.5 0 0 1 .001 2.119L6.029 23.78a.743.743 0 0 1-.53.22z\"/></svg>"};
-
-var actionDownloadSmall={"title":"action-download-small","tags":"action download arrow down small","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.193 1.7c0-.658-.542-1.2-1.2-1.2-.657 0-1.199.542-1.199 1.2v8.922l-2.778-2.6a1.2 1.2 0 0 0-1.64 1.751l4.797 4.498c.458.43 1.183.43 1.64 0l4.798-4.498c.242-.228.379-.544.379-.875a1.2 1.2 0 0 0-2.02-.876l-2.777 2.603V1.699Z\"/><path d=\"M1.5 13.544a1.5 1.5 0 0 1 1.498 1.5v1.498a1.61 1.61 0 0 0 .418 1.096h-.003c0-.002.036.032.13.082.39.194.818.305 1.254.321H19.19a3.085 3.085 0 0 0 1.255-.32c.096-.051.13-.085.13-.085.27-.3.42-.69.414-1.096v-1.5c0-.822.677-1.498 1.5-1.498.822 0 1.499.676 1.499 1.499v1.499c0 1.16-.43 2.293-1.224 3.142-.518.557-1.235.876-1.791 1.056a5.976 5.976 0 0 1-1.783.302H4.797a6.053 6.053 0 0 1-1.782-.302c-.556-.18-1.274-.5-1.792-1.056A4.613 4.613 0 0 1 0 16.542v-1.499a1.5 1.5 0 0 1 1.5-1.499Z\"/></svg>"};
-
-var actionNewWindow={"title":"action-new-window","tags":"arrow open new window tab external link square box rectangle action","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M10.25 2a.75.75 0 1 1 0 1.5h-6.5A2.252 2.252 0 0 0 1.5 5.75v14.5a2.252 2.252 0 0 0 2.25 2.25h14.5a2.252 2.252 0 0 0 2.25-2.25v-6.5a.75.75 0 0 1 1.5 0v6.5A3.754 3.754 0 0 1 18.25 24H3.75A3.754 3.754 0 0 1 0 20.25V5.75A3.754 3.754 0 0 1 3.75 2zm12.985-2c.1 0 .198.02.29.058l.025.011a.726.726 0 0 1 .15.091l.066.059a.755.755 0 0 1 .109.138l.051.1c.04.092.06.192.06.293l-.001 6.363c0 .2-.078.389-.22.53a.743.743 0 0 1-.53.22.743.743 0 0 1-.53-.22.743.743 0 0 1-.22-.53V2.559L15.28 9.764a.75.75 0 0 1-1.06-1.06l7.204-7.205h-4.553a.744.744 0 0 1-.75-.75c0-.2.078-.388.22-.53A.743.743 0 0 1 16.87 0z\"/></svg>"};
-
-const duetLinkCss = "*,*::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:inline}:host(.duet-link-block){display:block}:host(.duet-link-button){margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}:host(.duet-link-button):last-child,:host(.duet-link-button):last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 97, 155);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link: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-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(164, 4, 40)}.duet-link:hover{color:rgb(0, 75, 129);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-link:active{opacity:0.75;transition:none}button{font-size:inherit;cursor:pointer}.duet-link-is-external.duet-link:not(.block,.button,.card),.duet-link-is-download.duet-link:not(.block,.button,.card){text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button,.card) .duet-link-content,.duet-link-is-download.duet-link:not(.block,.button,.card) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block,.button,.card):hover>.duet-link-content,.duet-link-is-download.duet-link:not(.block,.button,.card):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button,.card) .duet-link-icon-tail,.duet-link-is-download.duet-link:not(.block,.button,.card) .duet-link-icon-tail{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(8, 42, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__icon{display:flex}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.button,.duet-link.card{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:14px 16px;line-height:1.25;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(181, 198, 208);border-radius:12px;outline:0 solid rgb(181, 198, 208);outline-offset:-2px;transition:all 300ms ease}.duet-link.button>*,.duet-link.card>*{flex-shrink:0}.duet-link.button .duet-link-content,.duet-link.card .duet-link-content{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(8, 42, 77);text-align:left}.duet-link.button .icon-wrap,.duet-link.card .icon-wrap{display:flex;align-items:center;justify-content:center}.duet-link.button.duet-link-has-icon-background,.duet-link.card.duet-link-has-icon-background{min-height:60px;padding:12px;padding-right:20px;line-height:1.5}.duet-link.button.duet-link-has-icon-background .icon-wrap,.duet-link.card.duet-link-has-icon-background .icon-wrap{width:36px;height:36px;border-radius:8px}.duet-link.button:hover,.duet-link.card:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){.duet-link.button,.duet-link.card{min-height:50px}.duet-link.button.duet-link-has-icon-background,.duet-link.card.duet-link-has-icon-background{gap:16px;min-height:72px;border-radius:16px}.duet-link.button.duet-link-has-icon-background .icon-wrap,.duet-link.card.duet-link-has-icon-background .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.button.duet-link-has-icon-background .duet-link-content,.duet-link.card.duet-link-has-icon-background .duet-link-content{font-size:1.1rem}}.duet-link.button.duet-theme-turva,.duet-link.card.duet-theme-turva{border-color:rgb(199, 202, 207)}.duet-link.button.duet-theme-turva .duet-link-content,.duet-link.card.duet-theme-turva .duet-link-content{color:rgb(23, 28, 58)}.duet-link.button.duet-theme-turva:hover,.duet-link.card.duet-theme-turva:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-link.button .block__chevron-icon,.duet-link.card .block__chevron-icon{transition:300ms ease}.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon,.duet-link.card:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.card{border-color:rgb(228, 236, 239);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-link.card.duet-theme-turva{border-color:rgb(234, 235, 239);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13)}.duet-link.card:not(.duet-link-has-icon){gap:12px;padding:16px}.duet-link.card .chevron-wrap{display:flex;align-items:center;height:100%}.duet-link.card.duet-link-has-icon{gap:12px;align-items:flex-start;padding:16px}.duet-link.card.duet-link-has-icon .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.card.duet-link-has-icon .chevron-wrap{height:48px}@media (min-width: 48em){.duet-link.card:not(.duet-link-has-icon){gap:20px;padding:24px}.duet-link.card.duet-link-has-icon{gap:20px;padding:24px}.duet-link.card.duet-link-has-icon .icon-wrap{width:62px;height:62px;border-radius:16px}.duet-link.card.duet-link-has-icon .chevron-wrap{height:62px}}";
-const DuetLinkStyle0 = duetLinkCss;
-
-const DuetLink = /*@__PURE__*/ proxyCustomElement(class DuetLink extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.variation = "default";
-        this.accessibleLabel = undefined;
-        this.language = getLanguage();
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
-        this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "false";
-        this.identifier = undefined;
-        this.theme = "";
-        this.url = "#";
-        this.external = false;
-        this.download = null;
-        this.tabToLink = false;
-        this.icon = undefined;
-        this.iconColor = "currentColor";
-        this.iconBackground = null;
-        this.iconResponsive = false;
-        this.margin = "auto";
-        this.padding = "auto";
-        this.isSmallScreen = false;
-        this.isMediumScreen = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.initMediaQuery();
-        this.resolvedDownload = this.resolveDownload();
-        // button variation renders a button element when no url is provided
-        if (this.variation === "button" && this.url === "#") {
-            this.url = undefined;
-        }
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "accessibleLabelExternal",
-            defaults: "accessibleLabelExternalDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        this.destroyMediaQuery();
-    }
-    /**
-     * Sets focus on the specified `duet-link`. Use this method instead of the global
-     * `link.focus()`.
-     */
-    async setFocus(options) {
-        this.nativeLink.focus(options);
-    }
-    initMediaQuery() {
-        this.screenTestBound = this.screenTest.bind(this);
-        this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
-        this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
-        this.isSmallScreen = this.mediaQuerySmall.matches;
-        this.isMediumScreen = this.mediaQueryMedium.matches;
-        this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
-        this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
-    }
-    destroyMediaQuery() {
-        if (this.mediaQuerySmall) {
-            this.mediaQuerySmall.removeEventListener("change", this.screenTestBound);
-        }
-        if (this.mediaQueryMedium) {
-            this.mediaQueryMedium.removeEventListener("change", this.screenTestBound);
-        }
-    }
-    screenTest(event) {
-        this.isSmallScreen = event.matches;
-        this.isMediumScreen = event.matches;
-    }
-    resolveDownload() {
-        if (this.download === "") {
-            return this.url.split("/").pop();
-        }
-        return this.download;
-    }
-    renderDefaultContent() {
-        // Notice that the external icon needs to be placed right after the last word of the link.
-        // This is why we use &nbps; to keep everything on the same line.
-        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? actionDownloadSmall.svg : actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
-    }
-    renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? actionNewWindow.svg : actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
-    }
-    renderButtonCardContent() {
-        const iconWrapStyle = {
-            "background-color": getColorByName(this.iconBackground, this.theme),
-        };
-        const iconSize = () => {
-            if (this.variation === "button") {
-                return this.iconBackground && this.isMediumScreen ? "medium" : "small";
-            }
-            return this.isMediumScreen ? "large" : "medium";
-        };
-        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: iconSize(), name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? actionNewWindow.svg : actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
-    }
-    renderContent() {
-        switch (this.variation) {
-            case "default":
-                return this.renderDefaultContent();
-            case "block":
-                return this.renderBlockContent();
-            case "button":
-            case "card":
-                return this.renderButtonCardContent();
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const Tag = !this.url ? "button" : "a";
-        const isButton = Tag === "button";
-        return (h(Host, { key: '4daa11135671269c348f387b30b1252c5f12b2ee', class: {
-                [`duet-link-${this.variation}`]: true,
-                "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '7e2c94f2a8695bd756e4efbb074f42614a342ca2', href: this.url, class: {
-                "duet-link": true,
-                "duet-link-is-external": this.external,
-                "duet-link-is-download": !!this.download,
-                "duet-link-has-icon": !!this.icon,
-                "duet-link-has-icon-background": !!this.iconBackground,
-                "duet-tab-to-link": this.tabToLink,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-p-0": this.padding === "none",
-                [this.padding]: true,
-                [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
-    }
-    static get delegatesFocus() { return true; }
-    get element() { return this; }
-    static get style() { return DuetLinkStyle0; }
-}, [17, "duet-link", {
-        "variation": [1],
-        "accessibleLabel": [1, "accessible-label"],
-        "language": [1537],
-        "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-        "accessibleLabelExternal": [1025, "accessible-label-external"],
-        "accessibleLabelDownloadDefaults": [1, "accessible-label-download-default"],
-        "accessibleLabelDownload": [1025, "accessible-label-download"],
-        "accessibleExpanded": [1540, "accessible-expanded"],
-        "accessiblePopup": [1537, "accessible-popup"],
-        "identifier": [1],
-        "theme": [1025],
-        "url": [1537],
-        "external": [4],
-        "download": [1],
-        "tabToLink": [4, "tab-to-link"],
-        "icon": [1],
-        "iconColor": [1, "icon-color"],
-        "iconBackground": [1, "icon-background"],
-        "iconResponsive": [4, "icon-responsive"],
-        "margin": [1],
-        "padding": [1],
-        "isSmallScreen": [32],
-        "isMediumScreen": [32],
-        "setFocus": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-link", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetLink);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetLink as D, defineCustomElement as d };

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

@@ -1,55 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-
-const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(143, 147, 158)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(181, 198, 208) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(199, 202, 207) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(181, 198, 208) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(199, 202, 207) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}";
-const DuetCheckmarkStyle0 = duetCheckmarkCss;
-
-const DuetCheckmark = /*@__PURE__*/ proxyCustomElement(class DuetCheckmark extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.theme = "";
-        this.checked = false;
-        this.presentationOnly = false;
-        this.center = false;
-        this.type = "checkbox";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    render() {
-        return (h(Host, { key: '3335002173407bc53f41ea2f00546e1bd2d7409a', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '425322a3f86e075e76d6d3bcd17580954b4e0b32', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'd4fe569278f4c88e090bbbafd65e5422027a0551', class: {
-                "duet-checkmark-container": true,
-                center: this.center,
-                "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'ad4abd3130942074b35869850cc3b386a8ae5dde', class: "duet-checkmark" })))));
-    }
-    static get style() { return DuetCheckmarkStyle0; }
-}, [0, "duet-checkmark", {
-        "theme": [1025],
-        "checked": [1028],
-        "presentationOnly": [4, "presentation-only"],
-        "center": [4],
-        "type": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-checkmark"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-checkmark":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCheckmark);
-            }
-            break;
-    } });
-}
-
-export { DuetCheckmark as D, defineCustomElement as d };