@duetds/components 6.11.0 → 6.11.2

package/lib/cjs/duet-slideout.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
-const focusUtils = require('./focus-utils-f19181d6.js');
+const focusUtils = require('./focus-utils-e486f272.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
 const tokenUtils = require('./token-utils-18a05118.js');

package/lib/cjs/duet-step_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-submenu-bar-dropdown-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 

package/lib/cjs/duet-submenu-bar-dropdown.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-submenu-bar-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const tokens = require('./tokens-30e7656b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-submenu-bar.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const tokens = require('./tokens-30e7656b.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
@@ -76,6 +76,7 @@ const DuetSubmenuBar = class {
       }
     }
     this.boundMqlFunctions = [];
+    bodyScrollLock_es6.enableBodyScroll(this.element);
   }
   /**
    * Sets focus. Use this method instead of the global focus().

package/lib/cjs/duet-textarea.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-b5e8f524.js');

package/lib/cjs/duet-toggle.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

package/lib/cjs/duet-toolbar-dropdown-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 

package/lib/cjs/duet-toolbar-dropdown.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 

package/lib/cjs/duet-toolbar-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetToolbarLinkCss = "*,*::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;height:100%}.duet-toolbar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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(0, 77, 128);text-align:center;text-decoration:none;white-space:nowrap}.duet-toolbar-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-toolbar-link:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}.duet-toolbar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-toolbar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}.duet-toolbar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-toolbar-link.active{color:rgb(0, 41, 77)}.duet-toolbar-link.active::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-toolbar-link.active::after.duet-theme-turva{background:rgb(198, 12, 48)}.duet-toolbar-link.active.duet-theme-turva{color:rgb(23, 28, 58)}.duet-toolbar-link.active.duet-theme-turva::after{background:rgb(198, 12, 48)}";

package/lib/cjs/duet-toolbar.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetToolbarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}.duet-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255)}.duet-toolbar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;height:36px;margin:0 28px;border-bottom:1px solid rgb(225, 227, 230)}.duet-toolbar .list{display:flex;align-items:center;justify-content:space-between;height:100%;list-style-type:none}.duet-toolbar ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-toolbar.duet-theme-turva{background:rgb(255, 255, 255)}.duet-toolbar.duet-theme-turva .container{border-bottom:1px solid rgb(228, 228, 230)}";

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

@@ -0,0 +1,92 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-04de4d35.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+const focusUtils = require('./focus-utils-e486f272.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:hover{color:rgb(0, 77, 128)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(148, 9, 37)}.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 rgb(0, 119, 179) !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 rgb(23, 28, 58) !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 DuetTooltipButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.accessibleLabel = undefined;
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  async setFocus(options) {
+    if (this.buttonElement) {
+      this.buttonElement.focus(options);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("button", { 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",
+      } }, index.h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { 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" }), index.h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), index.h("path", { 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 ? (index.h("span", { class: "duet-tooltip-label" }, this.label)) : (index.h("duet-visually-hidden", null, this.accessibleLabel)))));
+  }
+  get element() { return index.getElement(this); }
+};
+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(0, 41, 77);visibility:hidden;background:rgb(255, 255, 255);border:1px solid rgb(225, 227, 230);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(228, 228, 230);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(225, 227, 230)}.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(228, 228, 230)}.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(225, 227, 230)}.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(228, 228, 230)}.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 rgb(0, 119, 179)}: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 rgb(23, 28, 58)}.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(225, 227, 230);border-radius:4px}.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(228, 228, 230)}.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(0, 41, 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 rgb(0, 119, 179)}.duet-theme-turva .duet-tooltip-close:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px rgb(23, 28, 58)}";
+
+const DuetTooltipPopup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tooltipPopupClosed = index.createEvent(this, "tooltipPopupClosed", 7);
+    this.handleCloseClick = () => {
+      this.tooltipPopupClosed.emit();
+    };
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+    this.arrowStyles = undefined;
+    this.placement = undefined;
+    this.accessibleCloseLabel = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  async getArrowElement() {
+    return this.arrowEl;
+  }
+  async getContentElement() {
+    return this.contentEl;
+  }
+  async setFocusOnContentElement() {
+    this.contentEl.focus();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "duet-tooltip": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-tooltip-active": this.active === true,
+      } }, index.h(focusUtils.FocusGuard, { moveFocusTo: this.buttonEl }), index.h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, index.h("slot", null)), index.h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, index.h("div", { class: { "arrow-container": true, [this.placement]: true } })), index.h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, index.h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), index.h("duet-visually-hidden", null, this.accessibleCloseLabel)), index.h(focusUtils.FocusGuard, { moveFocusTo: this.contentEl }))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetTooltipPopup.style = duetTooltipPopupCss;
+
+exports.duet_tooltip_button = DuetTooltipButton;
+exports.duet_tooltip_popup = DuetTooltipPopup;

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

@@ -5,15 +5,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const tokens = require('./tokens-30e7656b.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-3801794e.js');
+const teleport = require('./teleport-d79735ca.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
+require('./tokens.module-d30fb52a.js');
 require('./string-utils-5cadd058.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;position:relative;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}.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:hover{color:rgb(0, 77, 128)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(148, 9, 37)}.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 rgb(0, 119, 179) !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 rgb(23, 28, 58) !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 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 DuetTooltip = class {
   constructor(hostRef) {
@@ -30,42 +32,23 @@ const DuetTooltip = class {
      * Local methods
      */
     this.openTooltip = () => {
-      this.focusTarget = "tooltip";
       this.active = true;
+      this.focusTarget = "tooltip";
+      this.teleport.go();
     };
     this.closeTooltip = (moveFocusToButton = false) => {
+      this.active = false;
       if (moveFocusToButton) {
         this.focusTarget = "trigger";
       }
-      this.active = false;
+      setTimeout(() => {
+        this.teleport.resume();
+        this.updatePlacement();
+      }, 200);
     };
     this.toggleOpen = () => {
       this.active ? this.closeTooltip() : this.openTooltip();
     };
-    this.handleFocusOut = (e) => {
-      if (!this.active) {
-        return;
-      }
-      const relatedTarget = e.relatedTarget;
-      if (
-      // if we don't know where focus went
-      relatedTarget == null ||
-        // if focus is within the tooltip itself
-        this.element.shadowRoot.contains(relatedTarget) ||
-        // if focus is within the tooltip light DOM
-        this.element.contains(relatedTarget)) {
-        // then we can skip closing
-        return;
-      }
-      this.closeTooltip();
-    };
-    this.handleKeyDown = (e) => {
-      const isEscapeKey = e.keyCode === 27;
-      const isTabbingOut = e.target === this.popupElement && e.shiftKey && e.keyCode === 9;
-      if (isEscapeKey || isTabbingOut) {
-        this.closeTooltip(true);
-      }
-    };
     this.updatePlacement = async () => {
       var _a, _b;
       let preferRight = true;
@@ -82,11 +65,10 @@ const DuetTooltip = class {
       else if (this.direction === "right") {
         placement = "top-start";
       }
-      const position = await floatingUi_dom_esm.computePosition(this.buttonEl, this.popupElement, {
+      const position = await teleport.computePosition(this.buttonEl, this.popupElement, {
         placement,
-        middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift({ padding: 5 }), floatingUi_dom_esm.arrow({ element: this.arrowEl })],
+        middleware: [teleport.flip(), teleport.shift({ padding: 5 }), teleport.arrow({ element: this.arrowEl })],
       });
-      // magic number adjustment for the tooltip position to cater for the arrow
       this.tooltipY = position.y;
       this.tooltipX = position.x;
       this.placement = position.placement;
@@ -137,24 +119,25 @@ const DuetTooltip = class {
   async componentDidLoad() {
     this.arrowEl = await this.popupElement.getArrowElement();
     this.contentEl = await this.popupElement.getContentElement();
+    this.teleport = new teleport.Teleport(this.popupElement);
     {
       this.updatePlacement();
     }
+    if (this.active) {
+      this.openTooltip();
+    }
+    this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
+    this.intersectionObserver.observe(this.element);
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
       case "tooltip":
-        this.contentEl.focus({ preventScroll: true });
-        // workaround for "user-is-tabbing" class not being applied inside shadow DOM
-        if (this.element.classList.contains("user-is-tabbing")) {
-          this.popupElement.classList.add("user-is-tabbing");
-        }
-        else {
-          this.popupElement.classList.remove("user-is-tabbing");
-        }
+        // delay focus so button is correctly announced as "expanded"
+        setTimeout(() => this.contentEl.focus({ preventScroll: true }));
         break;
       case "trigger":
-        this.buttonEl.focus({ preventScroll: true });
+        // delay focus so button is correctly announced as "collapsed"
+        setTimeout(() => this.buttonEl.setFocus({ preventScroll: true }));
         break;
     }
     this.focusTarget = null;
@@ -187,13 +170,20 @@ const DuetTooltip = class {
       return;
     }
     const path = e.composedPath();
-    const isClickOutside = path.every(el => el !== this.element);
+    const isClickOutside = path.every(el => el !== this.element && el !== this.contentEl);
     if (isClickOutside) {
       this.closeTooltip();
     }
   }
+  handleKeyDown(e) {
+    if (this.active && keyboardUtils.isEscapeKey(e)) {
+      this.closeTooltip(true);
+    }
+  }
   handlePopupClose() {
-    this.closeTooltip(true);
+    if (this.active) {
+      this.closeTooltip(true);
+    }
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
@@ -218,18 +208,13 @@ const DuetTooltip = class {
       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 (index.h(index.Host, { style: tooltipStyles }, index.h("button", { ref: element => (this.buttonEl = element), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", onClick: this.toggleOpen, type: "button", class: {
-        "duet-tooltip-button": true,
-        "duet-tooltip-button-has-label": !!this.label,
-        "duet-theme-turva": this.theme === "turva",
-      } }, index.h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { 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" }), index.h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), index.h("path", { 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 ? (index.h("span", { class: "duet-tooltip-label" }, this.label)) : (index.h("duet-visually-hidden", null, this.accessibleInputLabel
-      ? `${this.accessibleInputLabel}, ${this.accessibleLabel}`
-      : this.accessibleLabel))), index.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, onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, index.h("slot", null))));
+    return (index.h(index.Host, { style: tooltipStyles }, index.h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen }), index.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 }, index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const tokens_module = require('./tokens.module-d30fb52a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 
 const DuetUploadAriaStatus = class {
   constructor(hostRef) {

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-44df1d37.js');
 const errorcodes_utils = require('./errorcodes.utils-5deca818.js');

package/lib/cjs/duet-visually-hidden.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef0568d5.js');
+const index = require('./index-04de4d35.js');
 
 const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";