@duetds/components 7.0.13 → 7.1.1

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

@@ -1,8 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { n as nudge } from './nudge-560904c3.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}";
 
@@ -20,6 +21,9 @@ const DuetCallout = class {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, F as Fragment } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { s as sanitizeString } from './string-utils-5954f458.js';
-import { g as getColorByName } from './token-utils-2d3af0db.js';
+import { r as registerInstance, h, H as Host, g as getElement, F as Fragment } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { n as nudge } from './nudge-560904c3.js';
+import { s as sanitizeString } from './string-utils-59ad4cb2.js';
+import { g as getColorByName, a as breakpointToToken } from './token-utils-46c8fe31.js';
 import { a as actionArrowRight } from './action-arrow-right-f7d56681.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
-import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9d850f6c.js';
+import { D as DuetStringsExternalDefaults } from './common-strings-71f2aabd.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';
 import './tokens.module-c7944140.js';
 
 const duetCaptionCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:flex;flex:0 0 100%;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(101, 119, 135);vertical-align:top}:host.duet-p-0{padding:0 !important}:host.duet-m-0{margin:0 !important}:host(.duet-caption-small){font-size:0.875rem;line-height:1.25}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(116, 116, 117)}:host(.duet-caption-selected){color:rgb(0, 119, 179)}:host(.duet-caption-selected.duet-theme-turva){color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}";
@@ -27,6 +28,9 @@ const DuetCaption = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -40,6 +44,7 @@ const DuetCaption = class {
         "duet-m-0": this.margin === "none",
       } }, h("slot", null)));
   }
+  get element() { return getElement(this); }
 };
 DuetCaption.style = duetCaptionCss;
 
@@ -63,6 +68,9 @@ const DuetHeading = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -86,7 +94,7 @@ const DuetHeading = class {
 };
 DuetHeading.style = duetHeadingCss;
 
-const duetLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}:host(.duet-link-block){display:block}.duet-link{display:inline;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;font-weight:400;color:rgb(0, 119, 179);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-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(198, 12, 48)}.duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-link:active{opacity:0.75;transition:none}.duet-link-is-external.duet-link:not(.block){text-decoration:none}.duet-link-is-external.duet-link:not(.block) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block) .duet-link-external{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__content{position:relative;bottom:2px}.block .block__chevron-icon{transition:300ms ease}.block:hover .block__chevron-icon{transform:translateX(4px)}";
+const duetLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline}:host(.duet-link-block){display:block}.duet-link{display:inline;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;font-weight:400;color:rgb(0, 119, 179);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-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(198, 12, 48)}.duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-link:active{opacity:0.75;transition:none}.duet-link-is-external.duet-link:not(.block){text-decoration:none}.duet-link-is-external.duet-link:not(.block) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block) .duet-link-external{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:hover .block__chevron-icon{transform:translateX(4px)}";
 
 const DuetLink = class {
   constructor(hostRef) {
@@ -102,13 +110,20 @@ const DuetLink = class {
     this.external = false;
     this.tabToLink = false;
     this.icon = undefined;
+    this.iconColor = "currentColor";
+    this.iconResponsive = false;
     this.padding = "auto";
+    this.isSmallScreen = false;
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.initMediaQuery();
+  }
+  componentDidLoad() {
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
@@ -118,6 +133,7 @@ const DuetLink = class {
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
+    this.destroyMediaQuery();
   }
   /**
    * Sets focus on the specified `duet-link`. Use this method instead of the global
@@ -126,11 +142,23 @@ const DuetLink = class {
   async setFocus(options) {
     this.nativeLink.focus(options);
   }
+  initMediaQuery() {
+    this.screenTestBound = this.screenTest.bind(this);
+    this.mediaQuery = window.matchMedia(breakpointToToken["xx-small"]);
+    this.isSmallScreen = this.mediaQuery.matches;
+    this.mediaQuery.addEventListener("change", this.screenTestBound);
+  }
+  destroyMediaQuery() {
+    this.mediaQuery.removeEventListener("change", this.screenTestBound);
+  }
+  screenTest(event) {
+    this.isSmallScreen = event.matches;
+  }
   renderContent() {
     return (h(Fragment, null, h("span", { class: "duet-link-content" }, h("slot", null)), this.external && (h(Fragment, null, h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })), h("duet-visually-hidden", null, this.accessibleLabelExternal)))));
   }
   renderGrid() {
-    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
   }
   /**
    * render() function
@@ -153,6 +181,7 @@ const DuetLink = class {
       }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
   }
   static get delegatesFocus() { return true; }
+  get element() { return getElement(this); }
 };
 DuetLink.style = duetLinkCss;
 
@@ -174,6 +203,9 @@ const DuetParagraph = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -1,12 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { c as createID } from './create-id-981107da.js';
-import { i as isKeyboardClick } from './keyboard-utils-d237bd5a.js';
-import { s as sanitizeString } from './string-utils-5954f458.js';
-import { g as getColorByName } from './token-utils-2d3af0db.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { i as isKeyboardClick } from './keyboard-utils-5746e126.js';
+import { n as nudge } from './nudge-560904c3.js';
+import { s as sanitizeString } from './string-utils-59ad4cb2.js';
+import { g as getColorByName } from './token-utils-46c8fe31.js';
 import './tokens.module-c7944140.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
@@ -62,6 +63,9 @@ const DuetCard = class {
     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/esm/duet-checkbox.entry.js

@@ -1,9 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { c as createID } from './create-id-981107da.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { n as nudge } from './nudge-560904c3.js';
 
 const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{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;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-child:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{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-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(0, 41, 77);border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(23, 28, 58)}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(0, 41, 77);border:1px solid rgb(0, 41, 77)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:rgb(101, 119, 135)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:rgb(116, 116, 117)}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(207, 210, 212)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(207, 207, 209)}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(101, 119, 135);border:1px solid rgb(101, 119, 135)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(116, 116, 117);border-color:rgb(116, 116, 117)}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
@@ -75,6 +76,9 @@ const DuetCheckbox = class {
       this.value = this.identifier;
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
    * `input.focus()`.

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+import { r as registerInstance, h, H as Host } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
 const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(144, 149, 153);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(116, 116, 117)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(207, 210, 212) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(207, 207, 209) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(207, 210, 212) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(207, 207, 209) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}";
 

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

@@ -1,9 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { c as createID } from './create-id-981107da.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { n as nudge } from './nudge-560904c3.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}";
 
@@ -18,12 +19,11 @@ const DuetChip = class {
      */
     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";
@@ -43,13 +43,13 @@ const DuetChip = class {
             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;
             }
@@ -58,8 +58,8 @@ const DuetChip = class {
             // 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();
               }
             });
           });
@@ -120,10 +120,10 @@ const DuetChip = class {
         evt.preventDefault();
         return;
       }
-      if (this.popup) {
+      if (this.popupElement) {
         evt.stopPropagation();
         evt.preventDefault();
-        this.popup.toggle();
+        this.popupElement.toggle();
       }
     };
     /**
@@ -135,10 +135,11 @@ const DuetChip = class {
       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;
@@ -164,6 +165,9 @@ const DuetChip = class {
     inheritGlobalTheme(this);
     this.popupSetUp();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -178,7 +182,7 @@ const DuetChip = class {
       [`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,
@@ -190,7 +194,7 @@ const DuetChip = class {
       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 getElement(this); }
   static get watchers() { return {

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

@@ -1,16 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { h as hasSlot } from './slot-query-8c7dce21.js';
-import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
-import { c as createID } from './create-id-981107da.js';
-import { F as FocusGuard } from './focus-utils-e26ba3b3.js';
-import { i as isKeyboardClick, h as isQuestionKey, f as isEscapeKey } from './keyboard-utils-d237bd5a.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9d850f6c.js';
-import { f as findCheckedOption, w as watchForOptions } from './watch-options-dd55bce8.js';
-import './string-utils-5954f458.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { h as hasSlot } from './slot-query-7877f18f.js';
+import { D as DuetStringsExternalDefaults } from './common-strings-71f2aabd.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { F as FocusGuard } from './focus-utils-d927e096.js';
+import { i as isKeyboardClick, h as isQuestionKey, f as isEscapeKey } from './keyboard-utils-5746e126.js';
+import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';
+import { n as nudge } from './nudge-560904c3.js';
+import { f as findCheckedOption, w as watchForOptions } from './watch-options-f189118b.js';
+import './string-utils-59ad4cb2.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
@@ -143,6 +144,9 @@ const DuetChoice = class {
     this.hasLabel = hasSlot(this.element, "label");
     this.hasBeforeText = hasSlot(this.element, "before-text");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
@@ -354,6 +358,9 @@ const DuetChoiceGroup = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Local methods
    */

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

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c1a17a4c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb518df4.js';
 import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
 import { f as font_size_medium, t as tokens } from './tokens-e6b6db9b.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { h as hasSlot } from './slot-query-8c7dce21.js';
-import { c as createID } from './create-id-981107da.js';
-import { i as isKeyboardClick } from './keyboard-utils-d237bd5a.js';
-import { s as sanitizeString } from './string-utils-5954f458.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { h as hasSlot } from './slot-query-7877f18f.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { i as isKeyboardClick } from './keyboard-utils-5746e126.js';
+import { n as nudge } from './nudge-560904c3.js';
+import { s as sanitizeString } from './string-utils-59ad4cb2.js';
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;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.5;color:rgb(0, 41, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.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)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;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.5;color:rgb(0, 41, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.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-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(0, 41, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";
 
@@ -81,6 +82,9 @@ const DuetCollapsible = class {
     inheritGlobalTheme(this);
     this.hasAfterHeading = hasSlot(this.element, "after-heading");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
    * `collapsible.focus()`.

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { d as debounce } from './js-utils-fa98b8cd.js';
-import { j as isEnterKey, f as isEscapeKey, o as isTabKey, b as isArrowUpKey, c as isArrowDownKey } from './keyboard-utils-d237bd5a.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9d850f6c.js';
-import { p as parsePossibleJSON } from './string-utils-5954f458.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { d as debounce } from './js-utils-a35dcc8c.js';
+import { j as isEnterKey, f as isEscapeKey, o as isTabKey, b as isArrowUpKey, c as isArrowDownKey } from './keyboard-utils-5746e126.js';
+import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';
+import { p as parsePossibleJSON } from './string-utils-59ad4cb2.js';
 
 const SelectSingle = ({ item, search = "", selected }) => {
   const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;

package/lib/esm/duet-contact-card.entry.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9d850f6c.js';
-import './string-utils-5954f458.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';
+import { n as nudge } from './nudge-560904c3.js';
+import './string-utils-59ad4cb2.js';
 
 const duetContactCardCss = "*,*::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-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}.duet-contact-card.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)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;word-break:break-all}";
 
@@ -37,6 +38,9 @@ const DuetContactCard = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

package/lib/esm/duet-cookie-consent.entry.js

@@ -1,8 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { n as nudge } from './nudge-560904c3.js';
 
 const duetCookieConsentCss = "*,*::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:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:not(.descendant-focused):focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;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;color:rgb(255, 255, 255) !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.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\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:rgb(255, 255, 255) !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 
@@ -33,6 +34,9 @@ const DuetCookieConsent = class {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function.
    * Always the last one in the class.

package/lib/esm/duet-date-picker.entry.js

@@ -1,12 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { c as createID } from './create-id-981107da.js';
-import { F as FocusGuard } from './focus-utils-e26ba3b3.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9d850f6c.js';
-import './string-utils-5954f458.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { c as createID } from './create-id-2b0cd46d.js';
+import { F as FocusGuard } from './focus-utils-d927e096.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';
+import { n as nudge } from './nudge-560904c3.js';
+import './string-utils-59ad4cb2.js';
 
 const formatOptionsShort = { day: "numeric", month: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
@@ -569,6 +570,9 @@ const DuetDatePicker = class {
     this.determineValidity(parseISODate(this.value));
     this.updateInternalValue();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   componentDidUpdate() {
     // we want to run this code _after_ render
     // to ensure all elements are visible (and thus focusable)

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-c1a17a4c.js';
-import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
-import { g as getColorByName } from './token-utils-2d3af0db.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-bb518df4.js';
+import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
+import { g as getColorByName } from './token-utils-46c8fe31.js';
 import './tokens.module-c7944140.js';
 
 const duetDividerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:rgb(225, 227, 230)}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:rgb(228, 228, 230)}";