@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/esm/duet-tooltip-button_2.entry.js

@@ -1,24 +1,20 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { F as FocusGuard } from './focus-utils-7bc146cd.js';
-import { T as Teleport } from './teleport-546f382d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-BhYt_2Vd.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { F as FocusGuard } from './focus-utils-Do5KtPgs.js';
+import { T as Teleport } from './teleport-CooAqTCj.js';
 
-const duetTooltipButtonCss = "*,*::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}.duet-tooltip-button{z-index:100;display:inline-block;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 !important;margin-right:-12px;line-height:normal !important;color:rgb(0, 119, 179);white-space:nowrap;cursor:pointer;background:transparent !important;border-radius:4px}.duet-tooltip-button.duet-theme-turva{color:rgb(198, 12, 48)}.duet-tooltip-button.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:hover{color:rgb(0, 75, 129)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-tooltip-button:hover.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:focus{background:transparent !important;outline:0}:host(.user-is-tabbing) .duet-tooltip-button:focus{background:transparent !important;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tooltip-button svg{width:20px;height:20px;pointer-events:none}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-label{position:relative;z-index:100;display:inline-block;max-width:calc(100% - 30px);margin-left:12px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;text-align:left;white-space:normal;vertical-align:top}.duet-theme-turva .duet-tooltip-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}";
-const DuetTooltipButtonStyle0 = duetTooltipButtonCss;
+const duetTooltipButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.duet-tooltip-button{z-index:100;display:inline-block;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 !important;margin-right:-12px;line-height:normal !important;color:rgb(0, 119, 179);white-space:nowrap;cursor:pointer;background:transparent !important;border-radius:4px}.duet-tooltip-button:focus{outline:0}:host(.user-is-tabbing) .duet-tooltip-button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus,:host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-button:focus,:host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-tooltip-button.duet-theme-turva{color:rgb(198, 12, 48)}.duet-tooltip-button.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:hover{color:rgb(0, 75, 129)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-tooltip-button:hover.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:focus,:host(.user-is-tabbing) .duet-tooltip-button:focus{background:transparent !important}.duet-tooltip-button svg{width:20px;height:20px;pointer-events:none}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-label{position:relative;z-index:100;display:inline-block;max-width:calc(100% - 30px);margin-left:12px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;vertical-align:top;text-align:left;white-space:normal}.duet-theme-turva .duet-tooltip-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva{color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva:hover{color:rgb(230, 23, 64)}";
 
 const DuetTooltipButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.label = "";
-        this.accessibleLabel = undefined;
         this.theme = "";
         this.negative = false;
-        this.active = undefined;
-        this.tooltipId = undefined;
     }
     /**
      * Component lifecycle events.
@@ -42,33 +38,31 @@ const DuetTooltipButton = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fee44c3df69a6434affa9f49039575913c1764fa' }, h("button", { key: '11fbd81dfecf41f3540c8f09854aa148383ddb08', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        const visuallyHidden = h("duet-visually-hidden", { key: 'bf8e82beb39bca3f67c6ffcdbaf684671f551ffa' }, this.accessibleLabel);
+        return (h(Host, { key: 'c014d004ab6a355f122447e806b5c12f62aba277' }, h("button", { key: 'eda0bd6c55287d8ac393c2af3f65cbb910cd8c50', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-button-negative": this.negative,
-            } }, h("svg", { key: '1f833d69a947244a10790730de2e591ca8b36ba6', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '38acc8ec9e2956e937a84e8ebb738a77c9111370', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: 'ef35c73e4fe6b717decd80b2352f9ed8b8aa8f7f', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'a394f6560c8387da8a307f5c9623ec7d33d0c2c6', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+            } }, h("svg", { key: 'f6d4082627cb5a653bdd3668cc899bb885d204a1', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '21df01e868e6f304a33a50d4ac2442d6f43376aa', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: 'ba4e4c5cb1bf9f5e91e5ab8746485ca140b9a597', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0a3e24ec139b2442be22ebc85c663c891a050c08', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label, visuallyHidden)) : (visuallyHidden))));
     }
     get element() { return getElement(this); }
 };
-DuetTooltipButton.style = DuetTooltipButtonStyle0;
+DuetTooltipButton.style = duetTooltipButtonCss;
 
-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 duetTooltipPopupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:absolute;z-index:950}.duet-tooltip{position:relative;visibility:hidden;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);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;transform-origin:100% 100%;transition:300ms ease}.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:0}:host(.user-is-tabbing) .duet-tooltip-content-area:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-content-area:focus,:host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-content-area:focus,:host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.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);-webkit-appearance:none;appearance:none;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%}.duet-tooltip-close:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-tooltip-close:focus,.duet-tooltip-close:focus.duet-theme-turva,.duet-theme-turva2 .duet-tooltip-close:focus,.duet-tooltip-close:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva .duet-tooltip-close{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-tooltip{color:rgb(23, 42, 59);border-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-tooltip.duet-theme-turva{color:rgb(23, 42, 59);border-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top::before,:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-start::before,:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-end::before{border-top:11px solid rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom::before,:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-start::before,:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-end::before{border-bottom:11px solid rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-tooltip-close{color:rgb(23, 42, 59)}";
 
 const DuetTooltipPopup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tooltipPopupClosed = createEvent(this, "tooltipPopupClosed", 7);
+        /**
+         * Theme of the tooltip.
+         */
+        this.theme = "";
         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.
@@ -81,9 +75,11 @@ const DuetTooltipPopup = class {
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
     }
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
@@ -98,14 +94,17 @@ const DuetTooltipPopup = class {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '6475bd5406c8a14d70944a1b316e38dbfb3f4e0d' }, h("div", { key: 'ed169b7de58051fb1893fd4033471c39df8b8339', class: {
+        return (h(Host, { key: '63f303082985a668ae51759122ae462ae25404e0' }, h("div", { key: 'e3da6a6995872c70fb5d690ea87cf240240a2d0d', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '9a6f8e75996a8b00c09ecf552e39b01d231297bf', moveFocusTo: this.buttonEl }), h("div", { key: '0a003b54b91c3d687f6793fe1e84602ccf4acfcf', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'fdcddea1210c716a8e1d35f94ca9a166805776c8' })), h("div", { key: 'fcd50c973fb3f7d0d8280f22c6a78a853ac6d566', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '10d19ae7d0d66bbefa00aa7a2d8b3e1f426331e8', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '6b94899472ae322f2324344f9c8d12a423e05110', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '55db60a2ebbfb3bed86dc7960993d2e2d0b8e4f4', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'fd240f6c644ea25ab3554ed44719056485c24d9b' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '386b99183b08c179b9da7c811c4331ca6c3877ea', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '428ef9ad1157017747e93d3b0f6b45e6dd4d8854', moveFocusTo: this.buttonEl }), h("div", { key: 'cf4af07ba0054be6658c5724c7552854b3471472', ref: element => (this.contentEl = element), class: {
+                "duet-tooltip-content-area": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '3d21605221e8f16c59a2a62790dfce1a9cd15ea5' })), h("div", { key: 'e2e7ae6376f8dd497ef19ff673f22b699f8a55e6', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '0bd6b8b42c5e1b2b6eaf89c19a5ad2a968f3e541', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '1b7be53d18b09050af7fc192f65c2e9e01ec62a8', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '91636953a64d83fc88e888dab06b1ca482f47dd4', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '487a4c4b37a1891f07f203bb5cf22f8dc999c8e5' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'cd18c3c009967eca235de7d7d5e9f7208692bb56', moveFocusTo: this.contentEl }))));
     }
     get element() { return getElement(this); }
 };
-DuetTooltipPopup.style = DuetTooltipPopupStyle0;
+DuetTooltipPopup.style = duetTooltipPopupCss;
 
 export { DuetTooltipButton as duet_tooltip_button, DuetTooltipPopup as duet_tooltip_popup };

package/lib/esm/duet-tooltip.entry.js

@@ -1,18 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { m as media_query_medium, a as media_query_large } from './tokens-84fb2357.js';
-import { c as computePosition, f as flip, s as shift, a as arrow, b as autoUpdate } from './floating-ui.dom.esm-ebc91b33.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-8a9d5323.js';
-import { a as cloneDefaultSlotContent } from './slot-utils-bf214ae5.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
+import { m as media_query_medium, a as media_query_large } from './tokens-DOuLHrH5.js';
+import { M, z, f as flip, s as shift, a as arrow } from './floating-ui.dom.browser.min-B_NkY9T0.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-D2jecvOr.js';
+import { b as cloneDefaultSlotContent } from './slot-utils-nDLvv_4O.js';
+import './string-utils-C6E9F6QT.js';
 
-const duetTooltipCss = "*,*::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;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}duet-tooltip-button{position:relative}duet-tooltip-popup{position:absolute}";
-const DuetTooltipStyle0 = duetTooltipCss;
+const duetTooltipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}duet-tooltip-button{position:relative}duet-tooltip-popup{position:absolute}";
 
 const DuetTooltip = class {
     constructor(hostRef) {
@@ -31,6 +30,84 @@ const DuetTooltip = class {
             en: "about",
             sv: "om",
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.placement = "bottom";
+        /**
+         * Theme of the tooltip.
+         */
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Default language strings for the accessibleLabel
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabelDefault = {
+            fi: "Näytä lisätietoja",
+            en: "Show more information",
+            sv: "Visa mer tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the info icon that is only shown for screen
+         * readers. This property is always required to create an accessible interface!
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        /**
+         * Default language strings for the accessibleCloseLabel
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabelDefault = {
+            fi: "Sulje lisätiedot",
+            en: "Close details",
+            sv: "Stäng tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+        /**
+         * Label of the tooltip.
+         */
+        this.label = "";
+        /**
+         * Adjust the responsive breakpoint where tooltip starts opening towards left.
+         */
+        this.breakpoint = "medium";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.direction = "auto";
+        /**
+         * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionVertical = "0";
+        /**
+         * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionHorizontal = "0";
+        /**
+         * Toggle whether the tooltip is initially visible or not. This property should
+         * not be used in production in most cases.
+         */
+        this.active = false;
+        /**
+         * Negative variation for tooltip button on dark background
+         */
+        this.negative = false;
         /**
          * Local methods
          */
@@ -74,7 +151,13 @@ const DuetTooltip = class {
             else if (this.direction === "right") {
                 placement = "top-start";
             }
-            const position = await computePosition(this.buttonEl, this.popupElement, {
+            // Especially if button is in collapsible choice, it may become hidden with popup still open, as
+            // click event propagation is stopped
+            if (this.active && !this.buttonEl.offsetParent) {
+                // Not closing via this.closeTooltip() as it calls this.updatePlacement() causing an infinite loop
+                this.active = false;
+            }
+            const position = await M(this.buttonEl, this.popupElement, {
                 placement,
                 middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
             });
@@ -84,35 +167,6 @@ const DuetTooltip = class {
             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.
@@ -179,7 +233,7 @@ const DuetTooltip = class {
     }
     async handleActiveChange(newActiveValue) {
         if (newActiveValue) {
-            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
+            this.autoUpdateCleanup = z(this.buttonEl, this.popupElement, this.updatePlacement);
         }
         else {
             this.autoUpdateCleanup();
@@ -220,6 +274,6 @@ const DuetTooltip = class {
         "active": ["handleActiveChange"]
     }; }
 };
-DuetTooltip.style = DuetTooltipStyle0;
+DuetTooltip.style = duetTooltipCss;
 
 export { DuetTooltip as duet_tooltip };

package/lib/esm/duet-tray.entry.js

@@ -1,16 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-1a6cee61.js';
-import { s as sizeHeader } from './tokens.module-2d02f5ff.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-8a9d5323.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-BhYt_2Vd.js';
+import { s as sizeHeader } from './tokens.module-BDAqOMlM.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-D2jecvOr.js';
+import './string-utils-C6E9F6QT.js';
 
-const duetTrayCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);visibility:hidden;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray.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);background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tray-expandable-content{border-color:rgb(222, 224, 228)}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:rgb(8, 42, 77);text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:rgb(23, 28, 58)}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
-const DuetTrayStyle0 = duetTrayCss;
+const duetTrayCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;visibility:hidden;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transform:translateY(-4rem);transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-tray:focus,:host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-tray:focus,:host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray.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);background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;visibility:hidden;width:calc(100% + 46px);max-height:0;overflow-y:auto;scrollbar-width:none;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{visibility:visible;max-height:500px;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tray-expandable-content{border-color:rgb(222, 224, 228)}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:rgb(8, 42, 77);text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-tray-button:focus,:host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-tray-button:focus,:host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:rgb(23, 28, 58)}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:active{box-shadow:none;opacity:0.75}:host(.duet-theme-turva2) .duet-tray.duet-theme-turva{color:rgb(23, 42, 59);background:rgb(253, 247, 242);border-color:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-theme-turva .duet-tray-expandable-content{border-color:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-theme-turva .duet-tray-button{color:rgb(23, 42, 59)}";
 
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 const DuetTray = class {
@@ -21,36 +20,78 @@ const DuetTray = class {
          */
         this.isTicking = false;
         this.expandableId = createID("DuetTray");
+        this.expanded = false;
         /**
-         * Local methods.
+         * The state of the info panel.
          */
-        this.animationLoop = () => {
-            this.hiddenState = window.pageYOffset < topOffset;
-            this.isTicking = false;
-        };
-        this.toggleExpandable = ev => {
-            ev.preventDefault();
-            this.expanded = !this.expanded;
-        };
-        this.expanded = false;
         this.hiddenState = false;
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Defaults for accessibleCloseLabel
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabelDefaults = {
             fi: "Sulje",
             en: "Close",
             sv: "Stäng",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * close toggle. Not visible for normal users.
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * Defaults for accessibleOpenLabel
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabelDefaults = {
             fi: "Avaa",
             en: "Open",
             sv: "Öppna",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * open toggle. Not visible for normal users.
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
+        /**
+         * Theme of the info panel.
+         */
         this.theme = "";
+        /**
+         * Toggle whether the info panel is visible or not. You can use this
+         * property e.g. when pricing information is revealed to the user.
+         */
         this.active = false;
+        /**
+         * Hide the info panel when user scrolls back to the top of the viewport.
+         */
         this.autoHide = true;
+        /**
+         * Enable or disable the automatic responsive behaviour which
+         * makes the info panel hide on larger viewports. Settings this to
+         * "false" means that the header panel is visible on all device sizes.
+         */
         this.responsive = true;
+        /**
+         * Local methods.
+         */
+        this.animationLoop = () => {
+            this.hiddenState = window.pageYOffset < topOffset;
+            this.isTicking = false;
+        };
+        this.toggleExpandable = ev => {
+            ev.preventDefault();
+            this.expanded = !this.expanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -89,17 +130,17 @@ const DuetTray = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '2a28dbe50c5347e6b109da091550d42998d3ea66', class: {
+        return (h("div", { key: 'f214ce1bc33434f910d47ad3eb6c32f9def079a6', class: {
                 "duet-tray": true,
                 "duet-tray-is-active": this.active,
                 "duet-tray-is-hidden": this.hiddenState,
                 "duet-tray-is-responsive": this.responsive,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: '26c9c3e75ad004e521ab31b2d8ba1b048546c6e9', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'c17b7e16c92f0d12b35857d35ba59a709fb9a2ae' })), this.hasAdditionalContent && (h(Fragment, { key: 'd6e7d2ffe0a1f7860bad5b50d420c90e7223fd11' }, h("button", { key: '3694b88cdf1c3f9ae783160da5941ef344fa259b', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '1776e12e6f1b8bc01040cf1673c36c3fc092cd72', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '2e297573e5671cbfe8eadec345623d4a4d710a74' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'dff0cd7c16e992deeb15383694707dc951c3a901', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'b2db67fffb12fc7fb2d06368158ce47c175b8df6', class: "duet-tray-expandable-content" }, h("slot", { key: '55a9e5ddfa5bda9ac52e720ca43ab972ea1360b3', name: "additional" })))))));
+            } }, h("div", { key: '4b233933831bb971fdfcbcfeb1a45a24376c9334', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'dd4e32bc8ac1287203ae396fe8c21184971ed452' })), this.hasAdditionalContent && (h(Fragment, { key: '978f4eac8618d6e6806c2b949e61555881739314' }, h("button", { key: '733c5973d36830c6c93d80e74d943f89d6cc02ea', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '84843a2d3b1481545f27f6dd15854e7382f712ea', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'c071fa18c128c620dd838dd8a0d6fce553bb60aa' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '85ae38a4a6b17d8acec9bbd7948eba44ed6bf28c', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '3cf4e3889f982c47287b962430c62596aad7f81c', class: "duet-tray-expandable-content" }, h("slot", { key: 'ea85e6c58ed79bc61d885f859d296ec9a6a590d3', name: "additional" })))))));
     }
     get element() { return getElement(this); }
 };
-DuetTray.style = DuetTrayStyle0;
+DuetTray.style = duetTrayCss;
 
 export { DuetTray as duet_tray };

package/lib/esm/duet-upload-aria-status.entry.js

@@ -1,11 +1,39 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BhYt_2Vd.js';
 
 const DuetUploadAriaStatus = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * State() variables
+         */
+        this.statusMessage = null;
+        /**
+         * Status labels used in the component
+         */
+        this.statusMessageLabel = null;
+        /**
+         * Adds accessible label that is read aloud
+         */
+        this.accessibleAriaLive = "polite";
+        /**
+         * valid file amount
+         */
+        this.valid = undefined;
+        /**
+         * total files
+         */
+        this.total = undefined;
+        /**
+         * invalid file amount
+         */
+        this.invalid = undefined;
+        /**
+         * valid file amount
+         */
+        this.inprogress = undefined;
         /**
          * Private functions
          */
@@ -44,13 +72,6 @@ const DuetUploadAriaStatus = class {
             }
             return;
         };
-        this.statusMessage = null;
-        this.statusMessageLabel = null;
-        this.accessibleAriaLive = "polite";
-        this.valid = undefined;
-        this.total = undefined;
-        this.invalid = undefined;
-        this.inprogress = undefined;
     }
     watchHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -62,7 +83,7 @@ const DuetUploadAriaStatus = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9ef075b90505bbba4b77395f4be84f896519b61a', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '57a5279dd6e2db63beb2d5d7912b29dce1ba547d' }, this.statusMessage)));
+        return (h(Host, { key: 'dfba0ccef69bd34b3c4f8980caa95375ed480f83', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '20bd47d50fbc2097aae0656ffb367299284ff441' }, this.statusMessage)));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/lib/esm/duet-upload-item.entry.js

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getLocaleString } from './language-utils-8a9d5323.js';
-import { a as getI18nError } from './errorcodes.utils-416994cc.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, g as getElement } from './index-BhYt_2Vd.js';
+import { i as inheritGlobalTheme } from './themeable-component-C0nhBgYw.js';
+import { g as getLocaleString } from './language-utils-D2jecvOr.js';
+import { g as getI18nError } from './errorcodes.utils-CjUqHglR.js';
+import './string-utils-C6E9F6QT.js';
 
 const formatBytes = (bytes, decimals = 2) => {
     if (bytes === 0) {
@@ -19,11 +19,14 @@ const formatBytes = (bytes, decimals = 2) => {
 };
 
 const duetUploadItemCss = ".file-link::part(duet-link){text-decoration:none}";
-const DuetUploadItemStyle0 = duetUploadItemCss;
 
 const DuetUploadItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * theme.
+         */
+        this.theme = "";
         this.fileUploadingInfo = {
             fi: "Tiedosto latautuu",
             sv: "Filen laddas upp",
@@ -39,17 +42,6 @@ const DuetUploadItem = class {
                 });
             }
         };
-        this.theme = "";
-        this.data = undefined;
-        this.type = undefined;
-        this.showLinks = undefined;
-        this.actions = undefined;
-        this.buttonTitles = undefined;
-        this.label = undefined;
-        this.categoryLabel = undefined;
-        this.errorCodes = undefined;
-        this.showCategory = undefined;
-        this.linkClickEvent = undefined;
     }
     /**
      * Component lifecycle events.
@@ -92,14 +84,14 @@ const DuetUploadItem = class {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
         const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
-        return (h("div", { key: 'e20eaab3688b577cbdc151f9e890e6ccb55e7795', class: {
+        return (h("div", { key: 'af4b480a7c50c90ebf35c2744a0c6d301c026ee9', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '136689969c8164e4a5e15015ded3533e24959c8e', class: "item-categories" }, h("duet-heading", { key: '02bb08e5a87bae34896dc2d21d90fce955044231', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'd93fae942698b2638a46ff9a3249884555472a37', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '244da72bd3771fcf6ee4481f3143c051bf272bc2', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '730db1e85ef0ba3f9f9d4d67f38270e38d6d7195', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '4717379f9f4b5848066dd29975972f19b46e2ca2', class: "item-categories" }, h("duet-heading", { key: '629de4c001a31d3ac9e509f4d8c4e48453b861bb', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '0bab4d7664d6f2032dac1ea95b2b608297ab4d2a', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '65d2a44a4b4b3353766658557242ad53c357236e', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '5e5cce5f36a34f4b24c21a1055874ba9bc59493b', class: "item-actions" }, this.actions.map(actionItem => {
             return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: this.getActionButtonTitle(actionItem), ref: button => (this.actionButton = button) }));
         }))));
     }
     get element() { return getElement(this); }
 };
-DuetUploadItem.style = DuetUploadItemStyle0;
+DuetUploadItem.style = duetUploadItemCss;
 
 export { DuetUploadItem as duet_upload_item };