@duetds/components 9.4.2 → 9.5.1

package/lib/dist-custom-elements/{p-81287261.js → p-75e0f2c0.js}

@@ -1,6 +1,17 @@
 /*!
  * Built with Duet Design System
  */
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
+import { m as media_query_medium, a as media_query_large } from './p-f6000a03.js';
+import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
+import { c as createID } from './p-5e59e970.js';
+import { b as isEscapeKey } from './p-8db11326.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
+import { d as defineCustomElement$4 } from './p-49e93494.js';
+import { d as defineCustomElement$3 } from './p-629b86f6.js';
+import { d as defineCustomElement$2 } from './p-87b5d28b.js';
+import { d as defineCustomElement$1 } from './p-de88ebc9.js';
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1345,4 +1356,256 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-export { arrow as a, autoUpdate as b, computePosition as c, flip as f, offset as o, shift as s };
+const duetTooltipCss = "*.sc-duet-tooltip,*.sc-duet-tooltip::after,*.sc-duet-tooltip::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tooltip-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}duet-tooltip-button.sc-duet-tooltip{position:relative}duet-tooltip-popup.sc-duet-tooltip{position:absolute}";
+const DuetTooltipStyle0 = duetTooltipCss;
+
+const DuetTooltip = /*@__PURE__*/ proxyCustomElement(class DuetTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Own Properties.
+         */
+        this.mql = [
+            window.matchMedia(media_query_medium.replace(/'/g, "")),
+            window.matchMedia(media_query_large.replace(/'/g, "")),
+        ];
+        this.tooltipId = createID("DuetTooltip");
+        this.aboutString = {
+            fi: "aiheesta",
+            en: "about",
+            sv: "om",
+        };
+        /**
+         * Local methods
+         */
+        this.openTooltip = () => {
+            this.active = true;
+            setTimeout(() => {
+                this.contentEl.focus({ preventScroll: true });
+                this.buttonActive = true;
+            }, 200);
+        };
+        this.closeTooltip = (moveFocusToButton = false) => {
+            this.active = false;
+            if (moveFocusToButton) {
+                setTimeout(() => {
+                    this.buttonEl.setFocus({ preventScroll: true });
+                }, 200);
+            }
+            setTimeout(() => {
+                this.buttonActive = false;
+            });
+            setTimeout(() => {
+                this.updatePlacement();
+            }, 200);
+        };
+        this.toggleOpen = () => {
+            this.active ? this.closeTooltip() : this.openTooltip();
+        };
+        this.updatePlacement = async () => {
+            var _a, _b;
+            let preferRight = true;
+            if (this.breakpoint === "large" && !this.mql[1].matches) {
+                preferRight = false;
+            }
+            else if (this.breakpoint === "medium" && !this.mql[0].matches) {
+                preferRight = false;
+            }
+            let placement = preferRight ? "top-start" : "top-end";
+            if (this.direction === "left") {
+                placement = "top-end";
+            }
+            else if (this.direction === "right") {
+                placement = "top-start";
+            }
+            const position = await computePosition(this.buttonEl, this.popupElement, {
+                placement,
+                middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+            });
+            this.tooltipY = position.y;
+            this.tooltipX = position.x;
+            this.placement = position.placement;
+            this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
+            this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+        };
+        this.placement = "bottom";
+        this.tooltipY = undefined;
+        this.tooltipX = undefined;
+        this.arrowX = undefined;
+        this.arrowY = undefined;
+        this.buttonActive = undefined;
+        this.theme = "";
+        this.language = getLanguage();
+        this.accessibleLabelDefault = {
+            fi: "Näytä lisätietoja",
+            en: "Show more information",
+            sv: "Visa mer tilläggsuppgifter",
+        };
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        this.accessibleAboutLabel = undefined;
+        this.accessibleInputLabel = undefined;
+        this.accessibleCloseLabelDefault = {
+            fi: "Sulje lisätiedot",
+            en: "Close details",
+            sv: "Stäng tilläggsuppgifter",
+        };
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+        this.label = "";
+        this.breakpoint = "medium";
+        this.direction = "auto";
+        this.positionVertical = "0";
+        this.positionHorizontal = "0";
+        this.active = false;
+        this.negative = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.buttonActive = this.active;
+    }
+    async componentDidLoad() {
+        this.arrowEl = await this.popupElement.getArrowElement();
+        this.contentEl = await this.popupElement.getContentElement();
+        this.updatePlacement();
+        if (this.active) {
+            this.openTooltip();
+            await this.handleActiveChange(this.active);
+        }
+        this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
+        this.intersectionObserver.observe(this.element);
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, [
+            { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
+            { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefault" },
+        ]);
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
+    handleDocumentClick(e) {
+        if (!this.active) {
+            return;
+        }
+        const path = e.composedPath();
+        const isClickOutside = path.every(el => el !== this.element && el !== this.contentEl);
+        if (isClickOutside) {
+            this.closeTooltip();
+        }
+    }
+    handleKeyDown(e) {
+        if (this.active && isEscapeKey(e)) {
+            this.closeTooltip(true);
+        }
+    }
+    handlePopupClose() {
+        if (this.active) {
+            this.closeTooltip(true);
+        }
+    }
+    async handleActiveChange(newActiveValue) {
+        if (newActiveValue) {
+            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
+        }
+        else {
+            this.autoUpdateCleanup();
+        }
+    }
+    /**
+     * render() function.
+     * Always the last one in the class.
+     */
+    render() {
+        const tooltipStyles = {
+            transform: `translateY(${this.positionVertical}) translateX(${this.positionHorizontal})`,
+            // This is needed to that the active tooltip stacks on
+            // top of other tooltips and the header.
+            zIndex: this.active ? "201" : "",
+        };
+        const popupContainerStyles = {
+            position: "relative",
+            overflow: this.active ? "visible" : "hidden",
+        };
+        const positionStyles = {
+            top: `${this.tooltipY}px`,
+            left: `${this.tooltipX}px`,
+            display: "block",
+            "pointer-events": this.active ? "auto" : "none",
+        };
+        const arrowStyles = {
+            top: this.arrowY ? `${this.arrowY}px` : undefined,
+            left: this.arrowX ? `${this.arrowX}px` : undefined,
+        };
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
+                (this.accessibleAboutLabel &&
+                    `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
+                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "active": ["handleActiveChange"]
+    }; }
+    static get style() { return DuetTooltipStyle0; }
+}, [6, "duet-tooltip", {
+        "theme": [1025],
+        "language": [1025],
+        "accessibleLabelDefault": [1, "accessible-label-default"],
+        "accessibleLabel": [1025, "accessible-label"],
+        "accessibleAboutLabel": [1, "accessible-about-label"],
+        "accessibleInputLabel": [1, "accessible-input-label"],
+        "accessibleCloseLabelDefault": [1, "accessible-close-label-default"],
+        "accessibleCloseLabel": [1025, "accessible-close-label"],
+        "label": [1],
+        "breakpoint": [1],
+        "direction": [1],
+        "positionVertical": [513, "position-vertical"],
+        "positionHorizontal": [513, "position-horizontal"],
+        "active": [1540],
+        "negative": [4],
+        "placement": [32],
+        "tooltipY": [32],
+        "tooltipX": [32],
+        "arrowX": [32],
+        "arrowY": [32],
+        "buttonActive": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"], [4, "tooltipPopupClosed", "handlePopupClose"]], {
+        "active": ["handleActiveChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-tooltip", "duet-icon", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetTooltip);
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-tooltip-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-tooltip-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DuetTooltip as D, autoUpdate as a, computePosition as c, defineCustomElement as d, flip as f, offset as o, shift as s };

package/lib/dist-custom-elements/{p-8c206875.js → p-80b6a631.js}

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1a132b1a.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { d as debounce } from './p-9e371678.js';
 import { i as isKeyboardClick } from './p-8db11326.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
 import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-6e022235.js';
-import { d as defineCustomElement$2 } from './p-e40f6f72.js';
-import { d as defineCustomElement$1 } from './p-2218a02d.js';
+import { d as defineCustomElement$2 } from './p-49e93494.js';
+import { d as defineCustomElement$1 } from './p-de88ebc9.js';
 
 const duetActionButtonCss = "*,*::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-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(8, 42, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9ebee}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#dddee1 !important}.duet-action-button:disabled{color:rgb(127, 150, 165);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(143, 147, 158);background:rgb(245, 247, 250)}";
 const DuetActionButtonStyle0 = duetActionButtonCss;

package/lib/dist-custom-elements/{p-9d6b2f72.js → p-80d7e109.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
 import { i as sizeNavigation, j as sizeHeader } from './p-4c179c1e.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { d as debounce } from './p-9e371678.js';
@@ -102,7 +102,7 @@ const DuetTable = /*@__PURE__*/ proxyCustomElement(class DuetTable extends H {
         });
     }
     render() {
-        return (h(Host, { key: '26ab3b66d99bdff07554198125e8867b84051c9f', class: {
+        return (h(Host, { key: 'b3ed604b2b5f0b8e31f7b90abc64693662bfef3d', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -111,7 +111,7 @@ const DuetTable = /*@__PURE__*/ proxyCustomElement(class DuetTable extends H {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '1df61c45d1faa92385e24949ff773ec71852e0a5' })));
+            } }, h("slot", { key: '29df6d3c640fbf3a7fa51b73323c3628246d3095' })));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/{p-96198aec.js → p-87b5d28b.js}

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1a132b1a.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-ca3cb21e.js';
-import { d as defineCustomElement$2 } from './p-e40f6f72.js';
-import { d as defineCustomElement$1 } from './p-2218a02d.js';
+import { d as defineCustomElement$2 } from './p-49e93494.js';
+import { d as defineCustomElement$1 } from './p-de88ebc9.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;
@@ -56,11 +56,11 @@ const DuetTooltipPopup = /*@__PURE__*/ proxyCustomElement(class DuetTooltipPopup
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '5937d404a3288b6afe2b9c8e1d47147e96eef933' }, h("div", { key: 'bc2694a70963dabcaddce627d1abfe51dc36ebac', class: {
+        return (h(Host, { key: 'dcefd2a138b0d6599a09ff8a72f293ad6c7e891c' }, h("div", { key: 'e3ef1db922edbb62bb6164583422409cca33423b', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '461ee4e709c80fae34d04f2bba0fd60e6305f594', moveFocusTo: this.buttonEl }), h("div", { key: '47e8f609387722060e93fc37558a219c2bad2ed6', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '64350c3d73d2560711890254d8be979f07c27f1b' })), h("div", { key: '0544215577fd0b4e6be97eadcbad8f58114ffb38', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '1076a224b4a4f9d455271245e7bd879689a96bf4', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'bf275bd1c1597e42ab29ce57338a37e8ff534bfc', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'e06529abd6465f5e65f57f85ba2392c1df82d59f', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '43cabf152e52e237b886642e66a30875973fac6f' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '47ef9a81ce996efe8d52d06f36799c5a4f3b26cc', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'a69785a224b6d332ddef3b3a58a1de92180f0630', moveFocusTo: this.buttonEl }), h("div", { key: '6b9dc31cc5430f788a1a185750bf09135af9d12a', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '248ab704fdde7e7f1a9485df5fec73e4577ef454' })), h("div", { key: '47938f76464592121f5516b83e4efeda81b35cc7', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'd619ec83554676708f8d9bc56dfb7bfa9edaaa8d', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '2e6b1c12e407e9724d6fd14e8c17c6e1471cce7b', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'a32ec01897dc04fa3e70b1b2f0f46d59bf55f9b3', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'be53bde5da4a21dd4641a190587e0cb3f27bd7e6' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '7e378988bbb34cc60540a9c475346f0f2faf0544', moveFocusTo: this.contentEl }))));
     }
     get element() { return this; }
     static get style() { return DuetTooltipPopupStyle0; }

package/lib/dist-custom-elements/{p-fa1cdac3.js → p-8df0e44b.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 
 const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{display:inline-block;width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fdecc9}.duet-badge.danger{background:#f7d2dc}.duet-badge.danger.duet-theme-turva{background:#f7d2dc}.duet-badge.success{background:#d6e6e1}.duet-badge.success.duet-theme-turva{background:#d6e6e1}.duet-badge.subtle{color:rgb(98, 121, 138);background:none;outline:1px solid rgb(212, 223, 229);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(113, 118, 132);background:none;outline-color:rgb(222, 224, 228)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#f9c153}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.subtle{border-color:rgb(181, 198, 208);outline-color:rgb(8, 42, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(199, 202, 207);outline-color:rgb(23, 28, 58)}";
@@ -29,12 +29,12 @@ const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: '476d97ea43489404fd6d0a849a6ee02f83502fd9', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '28e5db061b847ada8068335166ff8ff1d86f24d1', class: {
+        return (h(Host, { key: 'cb78bbf707726afa6370adc12ad150bf355b6859', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '84a4bcb3eae5bad6cbb54c1196ecd7c601910b04', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: '0c934f9b98dcc493a7bf27588c22eb3f37795927' }))));
+            } }, h("slot", { key: '47192a702299c359b51b2b904363fc8a90fc50a5' }))));
     }
     get element() { return this; }
     static get style() { return DuetBadgeStyle0; }

package/lib/dist-custom-elements/{p-0ead9c70.js → p-8eb7fe43.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h } from './p-1a132b1a.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { w as watchForOptions } from './p-7d8a2628.js';
 
@@ -79,7 +79,7 @@ const DuetList = /*@__PURE__*/ proxyCustomElement(class DuetList extends H {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: 'fb75b5a512a993e8478f5c82e38b8b82a5e199cc', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'b8c6ed37ea89e194ef5a2f9fb603b60cd204ff69' })));
+        return (h("dl", { key: '7db97f4b853a8c566565c13d19c6699cb61aa0f1', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '9def9a838232a96dc345c2fdaa72ad1bf0cf773c' })));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/{p-84a16ba6.js → p-9baca56c.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { g as getColorByName } from './p-6e022235.js';
 

package/lib/dist-custom-elements/{p-792db7b0.js → p-9e44038b.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 
 const duetCaptionCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:flex;flex:0 0 100%;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(98, 121, 138);vertical-align:top}:host.duet-p-0{padding:0 !important}:host.duet-m-0{margin:0 !important}:host(.duet-caption-small){font-size:0.875rem;line-height:1.25}: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(143, 147, 158)}:host(.duet-caption-selected){color:rgb(0, 119, 179)}:host(.duet-caption-selected.duet-theme-turva){color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}";

package/lib/dist-custom-elements/{p-3e337443.js → p-b6c1319b.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1a132b1a.js';
 
 const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
 const DuetSpacerStyle0 = duetSpacerCss;
@@ -20,7 +20,7 @@ const DuetSpacer = /*@__PURE__*/ proxyCustomElement(class DuetSpacer extends H {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'aa2a7ac6bd334dc7d419d2dbe89da8b0961f64cf', class: {
+        return (h(Host, { key: '37319380d158f854c7b73b9fc3360a521c6660a3', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",