@duetds/components 6.10.3 → 6.11.0

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { a as media_query_large } from './tokens-f6b32339.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-61b5e9a4.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { c as cleanValue } from './input-utils-de45e099.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { f as isEscapeKey } from './keyboard-utils-d237bd5a.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { f as isEscapeKey } from './keyboard-utils-d237bd5a.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.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/esm/duet-toolbar.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.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/esm/duet-tooltip-popup.entry.js

@@ -0,0 +1,52 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23851de5.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+
+const duetTooltipPopupCss = "*.sc-duet-tooltip-popup,*.sc-duet-tooltip-popup::after,*.sc-duet-tooltip-popup::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tooltip-popup-h{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.sc-duet-tooltip-popup{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.sc-duet-tooltip-popup{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.sc-duet-tooltip-popup .arrow.sc-duet-tooltip-popup{position:absolute;width:22px;height:22px;pointer-events:none}.duet-tooltip.sc-duet-tooltip-popup .arrow.bottom.sc-duet-tooltip-popup,.duet-tooltip.sc-duet-tooltip-popup .arrow.bottom-start.sc-duet-tooltip-popup,.duet-tooltip.sc-duet-tooltip-popup .arrow.bottom-end.sc-duet-tooltip-popup{top:-20px}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.sc-duet-tooltip-popup{position:relative;width:100%;height:100%;pointer-events:none}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.sc-duet-tooltip-popup::after{position:absolute;z-index:200;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.sc-duet-tooltip-popup::before{position:absolute;z-index:100;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top.sc-duet-tooltip-popup::after,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-start.sc-duet-tooltip-popup::after,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-end.sc-duet-tooltip-popup::after{bottom:2px;left:2px;border:10px solid transparent;border-top:10px solid rgb(255, 255, 255)}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top.sc-duet-tooltip-popup::before,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-start.sc-duet-tooltip-popup::before,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-end.sc-duet-tooltip-popup::before{bottom:-1px;left:1px;border:11px solid transparent;border-top:11px solid rgb(225, 227, 230)}.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.top.sc-duet-tooltip-popup::before,.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-start.sc-duet-tooltip-popup::before,.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.top-end.sc-duet-tooltip-popup::before{border-top:11px solid rgb(228, 228, 230)}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom.sc-duet-tooltip-popup::after,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-start.sc-duet-tooltip-popup::after,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-end.sc-duet-tooltip-popup::after{bottom:1px;left:2px;border:10px solid transparent;border-bottom:10px solid rgb(255, 255, 255)}.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom.sc-duet-tooltip-popup::before,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-start.sc-duet-tooltip-popup::before,.duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-end.sc-duet-tooltip-popup::before{bottom:1px;left:1px;border:11px solid transparent;border-bottom:11px solid rgb(225, 227, 230)}.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom.sc-duet-tooltip-popup::before,.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-start.sc-duet-tooltip-popup::before,.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip.sc-duet-tooltip-popup .arrow-container.bottom-end.sc-duet-tooltip-popup::before{border-top:11px solid rgb(228, 228, 230)}.duet-tooltip.duet-tooltip-has-label.sc-duet-tooltip-popup{right:auto !important;left:0;width:282px !important;transform-origin:0 0 !important}.duet-tooltip.duet-tooltip-active.sc-duet-tooltip-popup{visibility:visible;opacity:1;transition-property:transform, opacity}.duet-tooltip-content-area.sc-duet-tooltip-popup{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.sc-duet-tooltip-popup:focus{outline:none}.user-is-tabbing.sc-duet-tooltip-popup-h .duet-tooltip-content-area.sc-duet-tooltip-popup:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}.user-is-tabbing.sc-duet-tooltip-popup-h .duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip-content-area.sc-duet-tooltip-popup: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.sc-duet-tooltip-popup::-webkit-scrollbar{width:4px}.duet-tooltip-content-area.sc-duet-tooltip-popup::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-content-area.sc-duet-tooltip-popup::-webkit-scrollbar-thumb{background:rgb(225, 227, 230);border-radius:4px}.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip-content-area.sc-duet-tooltip-popup::-webkit-scrollbar-thumb{background:rgb(228, 228, 230)}.duet-tooltip-close.sc-duet-tooltip-popup{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.sc-duet-tooltip-popup:focus{outline:none;box-shadow:0 0 0 2px rgb(0, 119, 179)}.duet-theme-turva.sc-duet-tooltip-popup .duet-tooltip-close.sc-duet-tooltip-popup:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px rgb(23, 28, 58)}";
+
+const DuetTooltipPopup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tooltipPopupClosed = createEvent(this, "tooltipPopupClosed", 7);
+    this.handleCloseClick = (evt) => {
+      this.tooltipPopupClosed.emit({
+        originalEvent: evt,
+        component: "duet-tooltip-popup",
+      });
+    };
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+    this.arrowStyles = undefined;
+    this.placement = undefined;
+    this.accessibleCloseLabel = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async getArrowElement() {
+    return this.arrowEl;
+  }
+  async getContentElement() {
+    return this.contentEl;
+  }
+  async setFocusOnContentElement() {
+    this.contentEl.focus();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "duet-tooltip": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-tooltip-active": this.active === true,
+      }, onClick: e => e.stopPropagation() }, h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+  }
+  get element() { return getElement(this); }
+};
+DuetTooltipPopup.style = duetTooltipPopupCss;
+
+export { DuetTooltipPopup as duet_tooltip_popup };

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23851de5.js';
 import { m as media_query_medium, a as media_query_large } from './tokens-f6b32339.js';
 import { c as computePosition, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm-37dc174a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
@@ -9,7 +9,7 @@ import { c as createID } from './create-id-981107da.js';
 import { g as getLanguage, a as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-6be16ff0.js';
 import './string-utils-5954f458.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{position:absolute;z-index:950;display:none;width:282px;min-height:48px;max-height:340px;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:-21px}.duet-tooltip .arrow-container{position:relative;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-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-scrollable{padding:20px !important;width:100%;max-height:250px;padding-right:25px !important;overflow-y:auto;-webkit-hyphens:auto;hyphens:auto;border-radius:4px;-webkit-overflow-scrolling:touch}.duet-tooltip-scrollable:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-scrollable: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-scrollable:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-tooltip-scrollable::-webkit-scrollbar{width:4px}.duet-tooltip-scrollable::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:rgb(225, 227, 230);border-radius:4px}.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:rgb(228, 228, 230)}.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\"}.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 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 DuetTooltip = class {
   constructor(hostRef) {
@@ -57,14 +57,11 @@ const DuetTooltip = class {
     };
     this.handleKeyDown = (e) => {
       const isEscapeKey = e.keyCode === 27;
-      const isTabbingOut = e.target === this.scrollableEl && e.shiftKey && e.keyCode === 9;
+      const isTabbingOut = e.target === this.popupElement && e.shiftKey && e.keyCode === 9;
       if (isEscapeKey || isTabbingOut) {
         this.closeTooltip(true);
       }
     };
-    this.handleCloseClick = () => {
-      this.closeTooltip(true);
-    };
     this.updatePlacement = async () => {
       var _a, _b;
       let preferRight = true;
@@ -81,10 +78,11 @@ const DuetTooltip = class {
       else if (this.direction === "right") {
         placement = "top-start";
       }
-      const position = await computePosition(this.buttonEl, this.tooltipEl, {
+      const position = await computePosition(this.buttonEl, this.popupElement, {
         placement,
         middleware: [flip(), shift({ padding: 5 }), 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;
@@ -132,7 +130,9 @@ const DuetTooltip = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
+  async componentDidLoad() {
+    this.arrowEl = await this.popupElement.getArrowElement();
+    this.contentEl = await this.popupElement.getContentElement();
     {
       this.updatePlacement();
     }
@@ -140,7 +140,14 @@ const DuetTooltip = class {
   componentDidUpdate() {
     switch (this.focusTarget) {
       case "tooltip":
-        this.scrollableEl.focus({ preventScroll: true });
+        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");
+        }
         break;
       case "trigger":
         this.buttonEl.focus({ preventScroll: true });
@@ -181,6 +188,9 @@ const DuetTooltip = class {
       this.closeTooltip();
     }
   }
+  handlePopupClose() {
+    this.closeTooltip(true);
+  }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
       this.updatePlacement();
@@ -215,12 +225,7 @@ const DuetTooltip = class {
         "duet-theme-turva": this.theme === "turva",
       } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, 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" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), 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 ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleInputLabel
       ? `${this.accessibleInputLabel}, ${this.accessibleLabel}`
-      : this.accessibleLabel))), h("div", { ref: element => (this.tooltipEl = element), style: positionStyles, class: {
-        "duet-tooltip": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-tooltip-has-label": !!this.label,
-        "duet-tooltip-active": this.active === true,
-      }, onClick: e => e.stopPropagation(), onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("div", { ref: element => (this.scrollableEl = element), class: "duet-tooltip-scrollable", tabindex: "0", id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+      : this.accessibleLabel))), 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 }, h("slot", null))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-dcb8c495.js';
-import { s as sizeHeader } from './tokens.module-ed773027.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-23851de5.js';
+import { s as sizeHeader } from './tokens.module-f436c2cd.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { g as getLanguage, a as getLocaleString } from './language-utils-6be16ff0.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host } from './index-23851de5.js';
 
 const DuetUploadAriaStatus = class {
   constructor(hostRef) {

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

@@ -0,0 +1,89 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h } from './index-23851de5.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+import { a as getLocaleString } from './language-utils-6be16ff0.js';
+import { a as getI18nError } from './errorcodes.utils-c0c33bce.js';
+import './string-utils-5954f458.js';
+
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+
+const DuetUploadItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fileUploadingInfo = {
+      fi: "Tiedosto latautuu",
+      sv: "Filen laddas upp",
+      en: "File is uploading",
+    };
+    this.onLinkClick = (event) => {
+      const { url, meta } = this.data;
+      if (!!this.linkClickEvent) {
+        event.preventDefault();
+        this.linkClickEvent.emit({
+          component: "duet-upload",
+          data: { name: this.data.item.name, url, meta },
+        });
+      }
+    };
+    this.theme = "";
+    this.data = undefined;
+    this.type = undefined;
+    this.showLinks = undefined;
+    this.actions = undefined;
+    this.label = undefined;
+    this.categoryLabel = undefined;
+    this.errorCodes = undefined;
+    this.showCategory = undefined;
+    this.linkClickEvent = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async focusActionButton() {
+    if (this.actionButton) {
+      await this.actionButton.setFocus();
+    }
+  }
+  getFileNameLine() {
+    const { item, size, uploaded, url, progress, error } = this.data;
+    const { name } = item;
+    const ContentName = (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+    const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } }, "(", formatBytes(size), ")"));
+    switch (this.type) {
+      case "inprogress":
+        return (h("span", { class: "duet-upload-item-name", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-visually-hidden", null, h("duet-paragraph", null, getLocaleString(this.fileUploadingInfo))), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+      case "failure":
+        return (h("span", { class: "duet-upload-item-error", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, this.errorCodes))));
+      default:
+        return uploaded && url && this.showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { onClick: this.onLinkClick, url: url, external: true }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
+    }
+  }
+  render() {
+    const { uid, meta } = 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(",") : ""} ${name}`;
+    return (h("div", { class: {
+        "upload-item-row": true,
+      } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { 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: false, ref: button => (this.actionButton = button) }));
+    }))));
+  }
+};
+
+export { DuetUploadItem as duet_upload_item };

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-dcb8c495.js';
+import { r as registerInstance, h, H as Host } from './index-23851de5.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}";