npm - @duetds/components - Versions diffs - 7.1.3 → 8.0.0 - Mend

@duetds/components 7.1.3 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (680) hide show

package/hydrate/index.js CHANGED Viewed

@@ -6138,6 +6138,15 @@ const disconnectLanguageChangeObserver = (component) => {
   languageChangeTargets.delete(component);
 };
+/**
+ * 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
+ */
+function nudge(_component) {
+  // eslint-disable-next-line
+  setTimeout(() => { }, 10);
+}
 const colorWarning = "rgb(247, 178, 40)";
 const colorGrayDarker = "rgb(101, 119, 135)";
 const colorGrayLighter = "rgb(245, 248, 250)";
@@ -6657,6 +6666,7 @@ class DuetActionButton {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelsDefaults" });
@@ -6802,6 +6812,7 @@ class DuetAlert {
     if (this.autoDismiss) {
       this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
     }
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
@@ -6906,6 +6917,7 @@ class DuetBadge {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -6963,6 +6975,7 @@ class DuetBanner {
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -7028,6 +7041,7 @@ class DuetBreadcrumb {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -7203,6 +7217,7 @@ class DuetButton {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.proxyButton = document.createElement("button");
@@ -7388,6 +7403,7 @@ class DuetCallout {
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -7436,6 +7452,7 @@ class DuetCaption {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -7525,6 +7542,7 @@ class DuetCard {
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
   componentDidLoad() {
+    nudge();
   }
   renderHeading() {
     const safeHeadingLevel = sanitizeString$1(this.headingLevel);
@@ -7674,6 +7692,7 @@ class DuetCheckbox {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
@@ -7929,6 +7948,7 @@ class DuetChip {
     this.popupSetUp();
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus. Use this method instead of the global focus().
@@ -8002,7 +8022,7 @@ const FocusGuard = ({ moveFocusTo }) => {
   return hAsync("div", { class: "duet-focus-guard", "aria-hidden": "true", tabIndex: 0, onFocus: () => focusElement(moveFocusTo) });
 };
-const duetChoiceCss = "*.sc-duet-choice,*.sc-duet-choice::after,*.sc-duet-choice::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;flex-direction:column;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-choice-h:last-child,.sc-duet-choice-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){.sc-duet-choice-h{width:100%}}.duet-expand.sc-duet-choice-h{width:100% !important}.duet-m-0.sc-duet-choice-h{margin:0 !important}.duet-fixed.sc-duet-choice-h{width:auto !important}.vertical.sc-duet-choice-h{margin-right:0 !important}@media (min-width: 48em){.horizontal.sc-duet-choice-h{margin-bottom:0 !important}}@media (min-width: 48em){.horizontal-responsive.sc-duet-choice-h{margin-bottom:0 !important;margin-right:16px !important}.horizontal-responsive.sc-duet-choice-h:last-child,.horizontal-responsive.sc-duet-choice-h:last-of-type{margin-right:0 !important}}.sc-duet-choice-h:last-child:not(:only-child){margin-right:0 !important}.duet-choice-card.sc-duet-choice{position:relative;display:block;width:100%;min-width:8rem;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:left;background:rgb(255, 255, 255);border-width:2px}.duet-choice-card.duet-p-0.sc-duet-choice{padding:0 !important}.duet-choice-card.duet-m-0.sc-duet-choice{margin:0 !important}.duet-theme-turva.sc-duet-choice .duet-choice-card.sc-duet-choice{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) !important}.duet-choice-card-flextainer.sc-duet-choice{display:flex}.duet-choice-label.sc-duet-choice{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;gap:1rem;align-items:center;justify-content:flex-start;width:100%;height:100%;min-height:3.875rem;padding:1rem;font-size:1rem;font-weight:600;text-decoration:none;word-break:break-word;cursor:pointer;border:2px solid rgb(225, 227, 230);border-radius:4px;transition:background-color 150ms ease}.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-icon.sc-duet-choice,.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-text.sc-duet-choice{align-self:flex-start;margin-top:0.25rem}.duet-choice-label.sc-duet-choice>div.sc-duet-choice:last-child{flex:1;align-self:flex-start;justify-self:flex-end;margin-top:0.25rem}.has-info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-top-right-radius:0;border-bottom-right-radius:0}.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice{color:rgb(0, 119, 179) !important;background:rgb(243, 249, 252);border-color:rgb(0, 119, 179) !important}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(0, 119, 179)}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice{color:rgb(23, 28, 58) !important;background:rgb(245, 245, 247);border-color:rgb(23, 28, 58) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(198, 12, 48)}.checked.collapsible.sc-duet-choice>.duet-choice-label.sc-duet-choice,.collapsible-force-expanded.collapsible.sc-duet-choice>.duet-choice-label.sc-duet-choice{padding-bottom:calc(1rem + 2px);border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(144, 149, 153)}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked) .duet-checkmark-container.sc-duet-choice{border-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked) .duet-checkmark-container.sc-duet-choice{border-color:rgb(116, 116, 117)}.duet-theme-turva .info .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}input.sc-duet-choice:focus{outline:0}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3)}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2)}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:rgb(101, 119, 135) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(225, 227, 230) !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:rgb(101, 119, 135) !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:hover,input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:active,input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:focus{box-shadow:none !important;opacity:1 !important;transition:none !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247) !important;border-color:rgb(228, 228, 230) !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:rgb(116, 116, 117) !important}.checked.sc-duet-choice>input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:rgb(225, 227, 230) !important;border-color:rgb(225, 227, 230) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:rgb(228, 228, 230) !important;border-color:rgb(228, 228, 230) !important}.duet-checkmark-container.sc-duet-choice{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(144, 149, 153);border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(116, 116, 117)}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio.sc-duet-choice{border-radius:50%}[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(207, 210, 212) !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(207, 207, 209) !important}.checked.sc-duet-choice>[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(207, 210, 212) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(207, 207, 209) !important}.duet-checkmark.sc-duet-choice{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}}.duet-choice-card-icon.sc-duet-choice{position:relative}.duet-choice-card-icon.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-section-hidden.sc-duet-choice{display:none}.duet-choice-card-info.duet-choice-card-collapsed.sc-duet-choice,.duet-choice-card-collapsed.duet-choice-card-collapsible.sc-duet-choice{position:relative;width:auto;padding:0 !important;background:unset !important;border:0;border-radius:0}.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:20px !important;position:relative;width:100%;font-weight:400;color:rgb(0, 41, 77);border:2px solid rgb(225, 227, 230);border-top:0;border-radius:0 0 4px 4px}@media (min-width: 36em){.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:28px !important}}.duet-theme-turva.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.duet-theme-turva.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{color:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.checked.sc-duet-choice>.duet-choice-card-info.sc-duet-choice,.checked.sc-duet-choice>.duet-choice-card-collapsible.sc-duet-choice{display:block}.duet-choice-card-info-expanded.sc-duet-choice,.duet-choice-card-collapsible-expanded.sc-duet-choice{display:block}.duet-choice-card-collapsible.sc-duet-choice{background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:rgb(255, 255, 255);border-color:rgb(228, 228, 230)}.duet-choice-card-collapsible.checked.sc-duet-choice{border-color:rgb(0, 119, 179)}.duet-choice-card-collapsible.checked.duet-theme-turva.sc-duet-choice{border-color:rgb(23, 28, 58)}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:rgb(245, 248, 250);border-color:rgb(225, 227, 230)}.duet-choice-card-collapsible-disabled.checked.sc-duet-choice{border-color:rgb(225, 227, 230)}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247);border-color:rgb(228, 228, 230)}.duet-choice-card-collapsible-disabled.duet-theme-turva.checked.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:rgb(245, 248, 250);transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247);border-color:rgb(228, 228, 230)}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-collapsible.sc-duet-choice:not(.checked){border-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-collapsible.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}.duet-choice-info-toggle.sc-duet-choice{display:flex;flex-shrink:0;align-items:flex-start;justify-content:center;width:57.6px;padding-top:1.25rem;cursor:pointer;background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-appearance:none;appearance:none}.duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:rgb(245, 248, 250);border-bottom-color:transparent;border-bottom-right-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:rgb(245, 245, 247)}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:rgb(245, 248, 250) !important;border-color:rgb(225, 227, 230) !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(144, 149, 153) !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247) !important;border-color:rgb(228, 228, 230) !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(116, 116, 117) !important}.duet-choice-info-toggle.sc-duet-choice:focus{outline:none}.user-is-tabbing.sc-duet-choice-h .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.sc-duet-choice-h .duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.checked.sc-duet-choice+.duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(0, 119, 179) !important}.duet-choice-info-toggle.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(0, 119, 179)}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(198, 12, 48)}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(116, 116, 117)}.duet-choice-input.sc-duet-choice{position:absolute !important;width:100%;height:100%;opacity:0}";
+const duetChoiceCss = "*.sc-duet-choice,*.sc-duet-choice::after,*.sc-duet-choice::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;flex-direction:column;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-choice-h:last-child,.sc-duet-choice-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){.sc-duet-choice-h{width:100%}}.duet-expand.sc-duet-choice-h{width:100% !important}.duet-m-0.sc-duet-choice-h{margin:0 !important}.duet-fixed.sc-duet-choice-h{width:auto !important}.vertical.sc-duet-choice-h{margin-right:0 !important}@media (min-width: 48em){.horizontal.sc-duet-choice-h{margin-bottom:0 !important}}@media (min-width: 48em){.horizontal-responsive.sc-duet-choice-h{margin-bottom:0 !important;margin-right:16px !important}.horizontal-responsive.sc-duet-choice-h:last-child,.horizontal-responsive.sc-duet-choice-h:last-of-type{margin-right:0 !important}}.sc-duet-choice-h:last-child:not(:only-child){margin-right:0 !important}.duet-choice-card.sc-duet-choice{position:relative;display:block;width:100%;min-width:8rem;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:left;background:rgb(255, 255, 255);border-width:2px}.duet-choice-card.duet-p-0.sc-duet-choice{padding:0 !important}.duet-choice-card.duet-m-0.sc-duet-choice{margin:0 !important}.duet-theme-turva.sc-duet-choice .duet-choice-card.sc-duet-choice{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) !important}.duet-choice-card-flextainer.sc-duet-choice{display:flex}.duet-choice-label.sc-duet-choice{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;gap:1rem;align-items:center;justify-content:flex-start;width:100%;height:100%;min-height:3.875rem;padding:1rem;font-size:1rem;font-weight:600;text-decoration:none;word-break:break-word;cursor:pointer;border:2px solid rgb(225, 227, 230);border-radius:4px;transition:background-color 150ms ease}.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-icon.sc-duet-choice,.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-text.sc-duet-choice{align-self:flex-start;margin-top:0.25rem}.duet-choice-label.sc-duet-choice>div.sc-duet-choice:last-child{flex:1;align-self:flex-start;justify-self:flex-end;margin-top:0.25rem}.has-info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-top-right-radius:0;border-bottom-right-radius:0}.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice{color:rgb(0, 119, 179) !important;background:rgb(243, 249, 252);border-color:rgb(0, 119, 179) !important}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(0, 119, 179)}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice{color:rgb(23, 28, 58) !important;background:rgb(245, 245, 247);border-color:rgb(23, 28, 58) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(198, 12, 48)}.checked.collapsible.sc-duet-choice>.duet-choice-label.sc-duet-choice,.collapsible-force-expanded.collapsible.sc-duet-choice>.duet-choice-label.sc-duet-choice{padding-bottom:calc(1rem + 2px);border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(144, 149, 153)}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked) .duet-checkmark-container.sc-duet-choice{border-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked) .duet-checkmark-container.sc-duet-choice{border-color:rgb(116, 116, 117)}.duet-theme-turva .info .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}input.sc-duet-choice:focus{outline:0}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3)}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2)}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:rgb(101, 119, 135) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(225, 227, 230) !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:rgb(101, 119, 135) !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:hover,input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:active,input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice:focus{box-shadow:none !important;opacity:1 !important;transition:none !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247) !important;border-color:rgb(228, 228, 230) !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:rgb(116, 116, 117) !important}.checked.sc-duet-choice>input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:rgb(225, 227, 230) !important;border-color:rgb(225, 227, 230) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:rgb(228, 228, 230) !important;border-color:rgb(228, 228, 230) !important}.duet-checkmark-container.sc-duet-choice{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(144, 149, 153);border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(116, 116, 117)}.checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>.duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio.sc-duet-choice{border-radius:50%}[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(207, 210, 212) !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:rgb(207, 207, 209) !important}.checked.sc-duet-choice>[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(207, 210, 212) !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice>[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:rgb(207, 207, 209) !important}.duet-checkmark.sc-duet-choice{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}}.duet-choice-card-icon.sc-duet-choice{position:relative}.duet-choice-card-icon.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-section-hidden.sc-duet-choice{display:none}.duet-choice-card-info.duet-choice-card-collapsed.sc-duet-choice,.duet-choice-card-collapsed.duet-choice-card-collapsible.sc-duet-choice{position:relative;width:auto;padding:0 !important;background:unset !important;border:0;border-radius:0}.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:20px !important;position:relative;width:100%;font-weight:400;color:rgb(0, 41, 77);border:2px solid rgb(225, 227, 230);border-top:0;border-radius:0 0 4px 4px}@media (min-width: 36em){.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:28px !important}}.duet-theme-turva.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.duet-theme-turva.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{color:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.checked.sc-duet-choice>.duet-choice-card-info.sc-duet-choice,.checked.sc-duet-choice>.duet-choice-card-collapsible.sc-duet-choice{display:block}.duet-choice-card-info-expanded.sc-duet-choice,.duet-choice-card-collapsible-expanded.sc-duet-choice{display:block}.duet-choice-card-collapsible.sc-duet-choice{background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:rgb(255, 255, 255);border-color:rgb(228, 228, 230)}.duet-choice-card-collapsible.checked.sc-duet-choice{border-color:rgb(0, 119, 179)}.duet-choice-card-collapsible.checked.duet-theme-turva.sc-duet-choice{border-color:rgb(23, 28, 58)}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:rgb(245, 248, 250);border-color:rgb(225, 227, 230)}.duet-choice-card-collapsible-disabled.checked.sc-duet-choice{border-color:rgb(225, 227, 230)}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247);border-color:rgb(228, 228, 230)}.duet-choice-card-collapsible-disabled.duet-theme-turva.checked.sc-duet-choice{border-color:rgb(228, 228, 230)}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:rgb(245, 248, 250);transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247);border-color:rgb(228, 228, 230)}.duet-choice-card-info.sc-duet-choice .duet-choice-info-container.sc-duet-choice:focus{outline:none}.duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container.sc-duet-choice-s>*,.duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container .sc-duet-choice-s>*{display:none}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-collapsible.sc-duet-choice:not(.checked){border-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-collapsible.sc-duet-choice:not(.checked){border-color:rgb(116, 116, 117)}.duet-choice-info-toggle.sc-duet-choice{display:flex;flex-shrink:0;align-items:flex-start;justify-content:center;width:57.6px;padding-top:1.25rem;cursor:pointer;background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-appearance:none;appearance:none}.duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:rgb(245, 248, 250);border-bottom-color:transparent;border-bottom-right-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:rgb(245, 245, 247)}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:rgb(245, 248, 250) !important;border-color:rgb(225, 227, 230) !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(144, 149, 153) !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:rgb(245, 245, 247) !important;border-color:rgb(228, 228, 230) !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(116, 116, 117) !important}.duet-choice-info-toggle.sc-duet-choice:focus{outline:none}.user-is-tabbing.sc-duet-choice-h .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.sc-duet-choice-h .duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.checked.sc-duet-choice+.duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(0, 119, 179) !important}.duet-choice-info-toggle.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(0, 119, 179)}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:rgb(198, 12, 48)}.sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(144, 149, 153)}.duet-theme-turva .sc-duet-choice-h:not(.no-hover):not(.disabled):hover>.duet-choice-card-flextainer.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:rgb(116, 116, 117)}.duet-choice-input.sc-duet-choice{position:absolute !important;width:100%;height:100%;opacity:0}";
 /**
  * @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.
@@ -8015,6 +8035,8 @@ const duetChoiceCss = "*.sc-duet-choice,*.sc-duet-choice::after,*.sc-duet-choice
 class DuetChoice {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.duetChoiceReady = createEvent$2(this, "duetChoiceReady", 7);
+    this.duetChoiceRemove = createEvent$2(this, "duetChoiceRemove", 7);
     this.duetChange = createEvent$2(this, "duetChange", 7);
     this.duetFocus = createEvent$2(this, "duetFocus", 7);
     this.duetBlur = createEvent$2(this, "duetBlur", 7);
@@ -8089,6 +8111,12 @@ class DuetChoice {
     };
     this.toggleInfo = () => {
       this.isInfoOpen = !this.isInfoOpen;
+      if (this.isInfoOpen) {
+        setTimeout(() => {
+          var _a;
+          (_a = this.infoContainer) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+      }
     };
     this.isHovering = false;
     this.isInfoOpen = false;
@@ -8138,8 +8166,10 @@ class DuetChoice {
     this.hasAdditional = hasSlot(this.element, "additional");
     this.hasLabel = hasSlot(this.element, "label");
     this.hasBeforeText = hasSlot(this.element, "before-text");
+    this.duetChoiceReady.emit();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
@@ -8149,6 +8179,7 @@ class DuetChoice {
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
+    this.duetChoiceRemove.emit();
   }
   /**
    * Component event handling.
@@ -8266,7 +8297,7 @@ class DuetChoice {
       }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, hAsync("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), hAsync("div", { class: "duet-choice-info-icon" }, hAsync("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (hAsync("div", { class: this.getClassNames(), id: this.expandId }, hAsync("span", { class: {
         "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
         "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-      } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", null, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
+      } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   get element() { return getElement(this); }
   static get style() { return duetChoiceCss; }
@@ -8316,72 +8347,13 @@ class DuetChoice {
   }; }
 }
-const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
-  childList: true,
-  subtree: true,
-}) => {
-  let mutation;
-  if (typeof MutationObserver !== "undefined") {
-    mutation = new MutationObserver(mutationList => {
-      onChange(changeHandler(mutationList, tagName));
-    });
-    mutation.observe(containerEl, options);
-  }
-  return mutation;
-};
-const watchForOptions = (containerEl, tagName, onChange) => {
-  return watchFor(containerEl, tagName, onChange, getSelectedOption);
-};
-const watchForElement = (containerEl, tagName, onChange) => {
-  return watchFor(containerEl, tagName, onChange, getElementItem, {
-    childList: true,
-    subtree: true,
-  });
-};
-const getElementItem = (mutationList) => {
-  let addedNode = false;
-  let removedNode = false;
-  mutationList.forEach(mut => {
-    if (mut.addedNodes.length) {
-      addedNode = true;
-    }
-    if (mut.removedNodes.length) {
-      removedNode = true;
-    }
-  });
-  return { addedNode, removedNode, mutationList };
-};
-const getSelectedOption = (mutationList, tagName) => {
-  let newOption;
-  mutationList.forEach(mut => {
-    // tslint:disable-next-line: prefer-for-of
-    for (let i = 0; i < mut.addedNodes.length; i++) {
-      newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
-    }
-  });
-  return newOption;
-};
-const findCheckedOption = (el, tagName) => {
-  if (el.nodeType !== 1) {
-    return undefined;
-  }
-  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
-  return options.find((o) => o.checked === true);
-};
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
-const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 class DuetChoiceGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.choiceGroupName = "duet-choice-group";
-    this.getChoices = () => {
-      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
-    };
-    this.isMyChoice = (choice) => {
-      return this.getChoices().includes(choice);
-    };
+    this.choices = new Set();
     /**
      * Component event handling.
      */
@@ -8390,12 +8362,21 @@ class DuetChoiceGroup {
         return;
       }
       const selectedChoice = ev.target;
-      if (selectedChoice && this.isMyChoice(selectedChoice)) {
+      if (selectedChoice && this.choices.has(selectedChoice)) {
         this.value = selectedChoice.value;
       }
-      // Prevent events from bubbling up the DOM tree in case
-      // this group is a sub-group of another choice group.
-      ev.cancelBubble = true;
+    };
+    this.onChoiceReady = (ev) => {
+      const choice = ev.target;
+      if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
+        this.choices.add(choice);
+        this.updateChoices();
+      }
+    };
+    this.onChoiceRemove = (ev) => {
+      const choice = ev.target;
+      this.choices.delete(choice);
+      this.updateChoices();
     };
     this.direction = "vertical";
     this.margin = "auto";
@@ -8429,21 +8410,17 @@ class DuetChoiceGroup {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Local methods
    */
   async updateChoices() {
     var _a;
-    /**
-     * Make sure we get all choices first so values are up to date prior
-     * to caching the choice group value
-     */
-    const choices = this.getChoices();
-    const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.element.getAttribute("value");
+    const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins
-    for (const choice of choices) {
+    for (const choice of this.choices) {
       choice.name = this.name;
       choice.groupDisabled = this.disabled;
       choice.groupDirection = this.direction;
@@ -8453,6 +8430,9 @@ class DuetChoiceGroup {
         // and we haven't found a checked yet
         hasChecked = true;
         choice.checked = true;
+        if (typeof this.value === "undefined") {
+          this.value = value;
+        }
       }
       else {
         // This choice doesn't have the correct value or the choice group has been already checked
@@ -8469,7 +8449,7 @@ class DuetChoiceGroup {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, { onDuetChange: this.onSelect, class: {
+    return (hAsync(Host, { onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
         horizontal: this.direction === "horizontal",
         "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
         "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
@@ -9077,6 +9057,7 @@ class DuetCollapsible {
     this.hasAfterHeading = hasSlot(this.element, "after-heading");
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
@@ -9558,6 +9539,7 @@ class DuetContactCard {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -9631,6 +9613,7 @@ class DuetCookieConsent {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function.
@@ -10216,6 +10199,7 @@ class DuetDatePicker {
     this.updateInternalValue();
   }
   componentDidLoad() {
+    nudge();
   }
   componentDidUpdate() {
     // we want to run this code _after_ render
@@ -10555,6 +10539,7 @@ class DuetEditableTable {
     this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -10697,6 +10682,7 @@ class DuetEmptyState {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -10758,6 +10744,7 @@ class DuetFieldset {
     this.checkHasTooltip();
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -10893,6 +10880,7 @@ class DuetFooter {
       ;
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
@@ -10966,6 +10954,59 @@ class DuetFooter {
   }; }
 }
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
+  let mutation;
+  if (typeof MutationObserver !== "undefined") {
+    mutation = new MutationObserver(mutationList => {
+      onChange(changeHandler(mutationList, tagName));
+    });
+    mutation.observe(containerEl, options);
+  }
+  return mutation;
+};
+const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
+const getSelectedOption = (mutationList, tagName) => {
+  let newOption;
+  mutationList.forEach(mut => {
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < mut.addedNodes.length; i++) {
+      newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
+    }
+  });
+  return newOption;
+};
+const findCheckedOption = (el, tagName) => {
+  if (el.nodeType !== 1) {
+    return undefined;
+  }
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
+  return options.find((o) => o.checked === true);
+};
 const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-grid-variation-flex.sc-duet-grid-h{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}@media (max-width: 22.5em){.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}.duet-grid-variation-flex.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-grid-variation-flex.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-variation-flex.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-variation-flex.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-variation-flex.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-variation-flex.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-variation-flex.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-variation-flex.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}.duet-grid-variation-grid.sc-duet-grid-h{display:grid;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;align-items:flex-start;justify-content:center;margin:0 20px}@media (min-width: 36em){.duet-grid-variation-grid.sc-duet-grid-h{gap:24px;margin:0 40px}}@media (min-width: 48em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(8, 55px);gap:24px 32px;margin:0 auto}}@media (min-width: 62em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, minmax(0, 1fr));margin:0 64px}}@media (min-width: 76.25em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, 55px);gap:40px;margin:0 auto}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:3/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:2/span 10}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 12}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:9/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:5/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:7/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:9/span 4}}";
 function isGridItem(element) {
@@ -11685,6 +11726,7 @@ class DuetHeader {
     this.refresh();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     for (let i = 0; i < this.mql.length; i++) {
@@ -12034,6 +12076,7 @@ class DuetHeading {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -12147,6 +12190,7 @@ class DuetHero {
     this.refresh();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
@@ -12339,6 +12383,7 @@ class DuetIcon {
     this.loadIcon();
   }
   componentDidLoad() {
+    nudge();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -12698,6 +12743,7 @@ class DuetInput {
         this.isPasswordRevealed = false;
       });
     }
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -12878,6 +12924,7 @@ class DuetLabel {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -13027,6 +13074,7 @@ class DuetLink {
     this.initMediaQuery();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
@@ -13548,6 +13596,7 @@ class DuetMenuBarButton {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.changeIconSize();
@@ -13666,6 +13715,7 @@ class DuetMenuBarDropdown {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.changeIconSize();
@@ -13763,6 +13813,7 @@ class DuetMenuBarDropdownLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   handleEscape(e) {
     if (isEscapeKey(e)) {
@@ -13831,6 +13882,7 @@ class DuetMenuBarLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.changeIconSize();
@@ -14087,6 +14139,7 @@ class DuetModal {
       this.open = true;
       this.modalEl.classList.add("duet-disable-transitions");
     }
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
@@ -14369,6 +14422,7 @@ class DuetMultiselect {
     this.refresh();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -14516,6 +14570,7 @@ class DuetNotification {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
@@ -14605,6 +14660,7 @@ class DuetNotificationDrawer {
     this.updateNotificationState();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.observer = new MutationObserver(this.updateNotificationState);
@@ -15003,6 +15059,7 @@ class DuetNumberInput {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
@@ -15124,6 +15181,7 @@ class DuetPageHeading {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -15302,6 +15360,7 @@ class DuetPagination {
   }
   componentDidLoad() {
     this.firstRenderDone = true;
+    nudge();
   }
   componentWillRender() {
     if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
@@ -15566,6 +15625,7 @@ class DuetParagraph {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -17062,6 +17122,7 @@ class DuetPopupMenuItem {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus. Use this method instead of the global focus().
@@ -17142,6 +17203,7 @@ class DuetProgress {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
@@ -17212,6 +17274,7 @@ class DuetPromoCard {
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -17453,6 +17516,7 @@ class DuetRadioGroup {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Local methods.
@@ -17604,6 +17668,7 @@ class DuetRangeSlider {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
@@ -17760,6 +17825,7 @@ class DuetRangeStepper {
   }
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "ariaLabels", defaults: "ariaLabelsDefaults" });
@@ -17914,6 +17980,7 @@ class DuetScrollable {
   }
   componentDidLoad() {
     this.resizeObserver.observe(this.tabListElement);
+    nudge();
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
@@ -18197,6 +18264,7 @@ class DuetSelect {
     this.refresh();
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-select`. Use this method instead of the global
@@ -18410,6 +18478,7 @@ class DuetShowMore {
     this.buttonAriaOpen = this.open;
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
@@ -18481,16 +18550,18 @@ class DuetSlideout {
       }
     };
     this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.openButton.setAttribute("aria-expanded", this.open.toString());
+      this.open = !this.open;
+      if (this.openButton) {
+        this.openButton.accessibleExpanded = this.open;
+      }
       this.duetSlideoutEvent.emit({
         originalEvent: e,
         data: { element: this.element, open: this.open },
         component: "duet-slideout",
       });
-      if (toggle) {
+      if (this.open) {
         const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        this.teleport.go(true);
         if (openPanel) {
           openPanel.setFocus();
           this.handleBodyScrolling();
@@ -18504,8 +18575,10 @@ class DuetSlideout {
       }
       else {
         setTimeout(() => {
-          this.openButton.setFocus();
+          var _a;
+          (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.setFocus();
           this.handleBodyScrolling();
+          this.teleport.resume();
         }, 200);
       }
     };
@@ -18516,6 +18589,7 @@ class DuetSlideout {
     this.displaying = false;
     this.theme = "";
     this.open = false;
+    this.opener = undefined;
     this.backgroundColor = "gray-lightest";
   }
   /**
@@ -18528,27 +18602,49 @@ class DuetSlideout {
       this.closeButton.focus();
     }, 200);
   }
+  /**
+   * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
+   * the slideout so that focus can be moved back to this specific element when
+   * the slideout dialog is closed.
+   */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    const button = document.activeElement;
+    if (button) {
+      button.accessiblePopup = "true";
+      this.openButton = button;
+    }
+    this.toggleMenu(new CustomEvent("toggle"));
+  }
+  /**
+   * Hides the slideout dialog and puts focus back to the original element
+   * that triggered the slideout (if we’re still in the same view).
+   */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggleMenu(new CustomEvent("toggle"));
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    {
-      const toggles = Array.from(this.element.children).filter(el => el.matches("[slot='toggle']"));
-      if (toggles.length > 0) {
-        this.openButton = toggles[0];
-      }
-    }
-    if (this.openButton) {
-      this.openButton.accessiblePopup = "true";
-      this.openButton.accessibleExpanded = false;
-      this.openButton.addEventListener("click", e => {
+    const button = this.opener && document.getElementById(this.opener);
+    if (button) {
+      button.accessiblePopup = "true";
+      button.accessibleExpanded = false;
+      button.addEventListener("click", e => {
         e.stopPropagation();
         e.preventDefault();
+        this.openButton = button;
         this.onClick(e);
       });
-      this.openButton = this.openButton;
     }
+    this.teleport = new Teleport(this.element);
   }
   async componentDidLoad() {
     {
@@ -18578,7 +18674,8 @@ class DuetSlideout {
    * Sets focus. Use this method instead of the global focus().
    */
   async setFocus(options) {
-    this.openButton.focus(options);
+    var _a;
+    (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /**
    * render() function
@@ -18589,7 +18686,7 @@ class DuetSlideout {
       background: getColorByName(this.backgroundColor, this.theme),
     };
     const exitTranslation = getLocaleString(this.exitLangObject);
-    return (hAsync(Host, null, hAsync("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, hAsync("slot", { name: "toggle" }), hAsync("div", { class: {
+    return (hAsync(Host, null, hAsync("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, hAsync("div", { class: {
         "desktop-bg": true,
         hidden: !this.open,
       }, onClick: () => {
@@ -18612,10 +18709,13 @@ class DuetSlideout {
     "$members$": {
       "theme": [1025],
       "open": [1540],
+      "opener": [1],
       "backgroundColor": [1537, "background-color"],
       "language": [32],
       "displaying": [32],
       "toggle": [64],
+      "show": [64],
+      "hide": [64],
       "setFocus": [64]
     },
     "$listeners$": [[8, "keyup", "handleKeyUp"]],
@@ -18647,6 +18747,7 @@ class DuetSlideoutLang {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -18699,6 +18800,7 @@ class DuetSlideoutLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -18792,6 +18894,7 @@ class DuetSlideoutPanel {
     this.updateLabel();
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -18897,6 +19000,7 @@ class DuetSlideoutPanelDropdown {
     });
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus. Use this method instead of the global focus().
@@ -19075,6 +19179,7 @@ class DuetStep {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Programmatically shift focus to the step's heading.
@@ -19183,6 +19288,7 @@ class DuetStepper {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   async connectedCallback() {
     this.updateStepState();
@@ -19326,6 +19432,7 @@ class DuetSubmenuBar {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
@@ -19448,6 +19555,7 @@ class DuetSubmenuBarDropdown {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.checkIsDesktop();
@@ -19544,6 +19652,7 @@ class DuetSubmenuBarDropdownLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   handleEscape(e) {
     if (isEscapeKey(e)) {
@@ -19614,6 +19723,7 @@ class DuetSubmenuBarLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     this.changeIconSize();
@@ -19685,6 +19795,7 @@ class DuetTab {
    * Component lifecycle events.
    */
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
@@ -19834,6 +19945,7 @@ class DuetTabGroup {
   }
   componentDidLoad() {
     this.scrollToActive();
+    nudge();
   }
   /**
    * This method allows you to open any of the tabs by calling the method and
@@ -20225,6 +20337,7 @@ class DuetTextarea {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-textarea`. Use this method instead of the global
@@ -20355,6 +20468,7 @@ class DuetToggle {
     }
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * Sets focus on the specified `duet-toggle`. Use this method instead of the global
@@ -20491,6 +20605,7 @@ class DuetToolbarDropdown {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   handleEscape(e) {
     if (isEscapeKey(e)) {
@@ -20563,6 +20678,7 @@ class DuetToolbarDropdownLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   handleEscape(e) {
     if (isEscapeKey(e)) {
@@ -20619,6 +20735,7 @@ class DuetToolbarLink {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -20744,6 +20861,7 @@ class DuetTooltip {
     }
     this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
     this.intersectionObserver.observe(this.element);
+    nudge();
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -20891,6 +21009,7 @@ class DuetTooltipButton {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   async setFocus(options) {
     if (this.buttonElement) {
@@ -20963,6 +21082,7 @@ class DuetTooltipPopup {
     this.teleport = new Teleport(this.element);
   }
   componentDidLoad() {
+    nudge();
   }
   async getArrowElement() {
     return this.arrowEl;
@@ -21059,6 +21179,7 @@ class DuetTray {
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
   componentDidLoad() {
+    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
@@ -22123,6 +22244,7 @@ class DuetUpload {
     this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
   }
   componentDidLoad() {
+    nudge();
   }
   componentWillRender() {
     // listen to the events from the component
@@ -22476,6 +22598,7 @@ class DuetUploadAriaStatus {
    * Component lifecycle events.
    */
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function
@@ -22558,6 +22681,7 @@ class DuetUploadItem {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * focusActionButton.
@@ -22625,6 +22749,7 @@ class DuetVisuallyHidden {
     registerInstance(this, hostRef);
   }
   componentDidLoad() {
+    nudge();
   }
   /**
    * render() function