@duetds/components 7.0.13 → 7.1.0

package/lib/collection/components/duet-tooltip/duet-tooltip-button.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { nudge } from "../../utils/nudge";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -21,6 +22,9 @@ export class DuetTooltipButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   async setFocus(options) {
     if (this.buttonElement) {
       this.buttonElement.focus(options);

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -4,6 +4,8 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
+import { nudge } from "../../utils/nudge";
+import { Teleport } from "../../utils/teleport";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -20,11 +22,23 @@ export class DuetTooltipPopup {
     this.placement = undefined;
     this.accessibleCloseLabel = undefined;
   }
+  handleActiveChange() {
+    if (this.active) {
+      this.teleport.go();
+    }
+    else {
+      this.teleport.resume(200);
+    }
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.teleport = new Teleport(this.element);
+  }
+  componentDidLoad() {
+    nudge(this);
   }
   async getArrowElement() {
     return this.arrowEl;
@@ -245,4 +259,10 @@ export class DuetTooltipPopup {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "handleActiveChange"
+      }];
+  }
 }

package/lib/collection/components/duet-tooltip/duet-tooltip.js

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { Teleport } from "../../utils/teleport";
+import { nudge } from "../../utils/nudge";
 export class DuetTooltip {
   constructor() {
     /**
@@ -25,7 +25,6 @@ export class DuetTooltip {
     this.openTooltip = () => {
       this.active = true;
       this.focusTarget = "tooltip";
-      this.teleport.go();
     };
     this.closeTooltip = (moveFocusToButton = false) => {
       this.active = false;
@@ -33,7 +32,6 @@ export class DuetTooltip {
         this.focusTarget = "trigger";
       }
       setTimeout(() => {
-        this.teleport.resume();
         this.updatePlacement();
       }, 200);
     };
@@ -102,7 +100,6 @@ export class DuetTooltip {
   async componentDidLoad() {
     this.arrowEl = await this.popupElement.getArrowElement();
     this.contentEl = await this.popupElement.getContentElement();
-    this.teleport = new Teleport(this.popupElement);
     if (!Build.isServer) {
       this.updatePlacement();
     }
@@ -111,6 +108,7 @@ export class DuetTooltip {
     }
     this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
     this.intersectionObserver.observe(this.element);
+    nudge(this);
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -173,7 +171,7 @@ export class DuetTooltip {
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
-      this.updatePlacement();
+      setTimeout(() => this.updatePlacement(), 10);
     }
     else {
       setTimeout(() => this.updatePlacement(), 300);

package/lib/collection/components/duet-tray/duet-tray.js

@@ -6,6 +6,7 @@ import { Fragment, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -56,6 +57,9 @@ export class DuetTray {
     inheritGlobalTheme(this);
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },

package/lib/collection/components/duet-upload/duet-upload.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import errorCodes from "./errorcodes.json";
 import { getI18nError } from "./errorcodes.utils";
 import { UploadItemHeader } from "./upload-item-header";
@@ -664,6 +665,9 @@ export class DuetUpload {
     this.onReady();
     this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   componentWillRender() {
     // listen to the events from the component
     this.verifyValidity();

package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetUploadAriaStatus {
   constructor() {
     /**
@@ -55,6 +56,12 @@ export class DuetUploadAriaStatus {
       this.getStatusMessage();
     }
   }
+  /**
+   * Component lifecycle events.
+   */
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -184,6 +191,7 @@ export class DuetUploadAriaStatus {
       "statusMessage": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "valid",

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getI18nError } from "../duet-upload/errorcodes.utils";
 import { formatBytes } from "../duet-upload/upload.helpers";
 export class DuetUploadItem {
@@ -40,6 +41,9 @@ export class DuetUploadItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * focusActionButton.
    */
@@ -300,4 +304,5 @@ export class DuetUploadItem {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -2,7 +2,11 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetVisuallyHidden {
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -22,4 +26,5 @@ export class DuetVisuallyHidden {
       "$": ["duet-visually-hidden.css"]
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/utils/nudge.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function is a workaround for a bug in Chromium-based browsers, where building the accessibility tree fails
+ * with nested shadow roots. See https://atlassian.lahitapiola.fi/jira/browse/DUET-780
+ */
+export function nudge(component) {
+  setTimeout(() => {
+    const el = document.createElement("template");
+    component.element.appendChild(el);
+    el.remove();
+  }, 10);
+}

package/lib/collection/utils/teleport.js

@@ -10,7 +10,6 @@
  */
 export class Teleport {
   constructor(element, target) {
-    this.isReact = this._isReact();
     this.isActive = false;
     this.element = element;
     this.target = target || document.body;
@@ -20,13 +19,12 @@ export class Teleport {
    * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
    */
   go(makeSiblingsInert = false) {
-    // Teleporting breaks modals in React
-    if (this.isReact && makeSiblingsInert) {
-      return;
+    // React handles teleporting itself with portals
+    if (!this.element.dataset.reactPortal) {
+      this.stub = document.createElement("template");
+      this.element.insertAdjacentElement("afterend", this.stub);
+      this.target.appendChild(this.element);
     }
-    this.stub = document.createElement("div");
-    this.element.insertAdjacentElement("afterend", this.stub);
-    this.target.appendChild(this.element);
     if (makeSiblingsInert) {
       this._makeSiblingsInert();
     }
@@ -47,8 +45,10 @@ export class Teleport {
     }
   }
   _resume() {
-    this.stub.insertAdjacentElement("beforebegin", this.element);
-    this.stub.remove();
+    if (!this.element.dataset.reactPortal) {
+      this.stub.insertAdjacentElement("beforebegin", this.element);
+      this.stub.remove();
+    }
     this._removeInertFromSiblings();
     this.deletionObserver.disconnect();
   }
@@ -92,7 +92,4 @@ export class Teleport {
       }
     });
   }
-  _isReact() {
-    return !!Object.keys(document).find(key => key.includes("react"));
-  }
 }

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-235639a0.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-479fa83d.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-9510958d.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-6816fd1b.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-811e436b.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-53fba128.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,12 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { n as nudge } from './p-3ae39071.js';
 import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$4 } from './p-457ad3b4.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-87ab6444.js';
+import { d as defineCustomElement$4 } from './p-99ec82e5.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-decdd69c.js';
 
 const duetBannerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.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\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 
@@ -35,6 +36,9 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one of the class.

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-03baceb5.js';
-import { d as defineCustomElement$2 } from './p-6658c850.js';
+import { n as nudge } from './p-3ae39071.js';
+import { d as defineCustomElement$2 } from './p-e611a3df.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 
@@ -32,6 +33,9 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-03baceb5.js';
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-e4de8f7b.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-6a66573f.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-87ab6444.js';
+import { n as nudge } from './p-3ae39071.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-decdd69c.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.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\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 
@@ -24,6 +25,9 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-7ccf98f1.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-72c9e944.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
+import { n as nudge } from './p-3ae39071.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-891cf00a.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-cedaa97e.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";
@@ -65,6 +66,9 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.hasHeadingSlot = !!this.element.querySelector(":scope > [slot='heading']");
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-216ee242.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-67b279fa.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-9ec763ef.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-c2533c03.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-chip.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-580110b9.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
-import { d as defineCustomElement$2 } from './p-6658c850.js';
+import { n as nudge } from './p-3ae39071.js';
+import { d as defineCustomElement$2 } from './p-e611a3df.js';
 
 const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(144, 149, 153);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:7px 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:600;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241);border-color:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked button,.duet-chip-container.duet-chip-filter-checked label,.duet-chip-container.duet-chip-radio-checked button,.duet-chip-container.duet-chip-radio-checked label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230);border-color:rgb(228, 228, 230)}.duet-chip-container div.duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container div.duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
 
@@ -21,12 +22,11 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
      */
     this.chipId = createID("DuetChip");
     this.popupSetUp = () => {
-      const popup = this.element.querySelector("duet-popup-menu");
+      const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
       if (popup) {
-        this.popup = popup;
+        this.popupElement = popup;
         popup.controller = this.element;
-        const labelSpan = this.element.querySelector("span");
-        const originalText = labelSpan.textContent;
+        const originalText = this.element.textContent;
         const originalValue = this.value;
         if (!popup.id) {
           popup.id = "popup-menu";
@@ -46,13 +46,13 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
             if (!item.active) {
               clearActive();
               item.active = true;
-              labelSpan.textContent = item.innerText;
+              this.element.textContent = item.innerText;
               this.value = value;
               this.checked = true;
             }
             else {
               clearActive();
-              labelSpan.textContent = originalText;
+              this.element.textContent = originalText;
               this.value = originalValue;
               this.checked = false;
             }
@@ -61,8 +61,8 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
             // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
             // open the popup again. Firefox does not have this behavior.
             setTimeout(() => {
-              if (this.popup.isOpen()) {
-                this.popup.hide();
+              if (this.popupElement.isOpen()) {
+                this.popupElement.hide();
               }
             });
           });
@@ -123,10 +123,10 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         evt.preventDefault();
         return;
       }
-      if (this.popup) {
+      if (this.popupElement) {
         evt.stopPropagation();
         evt.preventDefault();
-        this.popup.toggle();
+        this.popupElement.toggle();
       }
     };
     /**
@@ -138,10 +138,11 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       this.element.remove();
     };
     this.focus = false;
-    this.popup = undefined;
+    this.popupElement = undefined;
     this.popupOpen = undefined;
     this.accessibleLabel = undefined;
     this.variation = "button";
+    this.popup = undefined;
     this.icon = "";
     this.theme = "";
     this.identifier = undefined;
@@ -167,6 +168,9 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     inheritGlobalTheme(this);
     this.popupSetUp();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -181,7 +185,7 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       [`duet-chip-${this.variation}`]: true,
       "duet-chip-focus": this.focus,
       "duet-chip-has-icon": !!this.icon,
-      "duet-chip-has-popup": this.variation === "filter" && !!this.popup,
+      "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
       "duet-chip-radio-checked": this.variation === "radio" && this.checked,
@@ -193,7 +197,7 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       onBlur: this.onBlur,
       ref: el => (this.focusableElement = el),
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popupElement && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -203,6 +207,7 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
 }, [1, "duet-chip", {
     "accessibleLabel": [1, "accessible-label"],
     "variation": [1],
+    "popup": [1],
     "icon": [1],
     "theme": [1025],
     "identifier": [1],
@@ -211,7 +216,7 @@ const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     "checked": [1540],
     "disabled": [4],
     "focus": [32],
-    "popup": [32],
+    "popupElement": [32],
     "popupOpen": [32],
     "setFocus": [64]
   }]);