@duetds/components 6.0.0 → 6.0.2

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

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-fed98b6a.js');
+const focusUtils = require('./focus-utils-8089a1a8.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 require('./string-utils-5cadd058.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

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

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-134e0318.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const watchOptions = require('./watch-options-d88afac0.js');

package/lib/cjs/duet-range-slider.cjs.entry.js

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

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const createId = require('./create-id-c3b984b1.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

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

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

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

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

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

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

package/lib/cjs/duet.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

package/lib/cjs/{focus-utils-fed98b6a.js → focus-utils-8089a1a8.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/cjs/{index-b5a163e2.js → index-9d0e33db.js}

@@ -24,7 +24,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.0"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.2"};
 
 let scopeId;
 let contentRef;

package/lib/cjs/loader.cjs.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b5a163e2.js');
+const index = require('./index-9d0e33db.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

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

@@ -3,9 +3,11 @@
  */
 import { Component, Event, h, Host, Prop, State } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { createID } from "../../utils/create-id";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetAlert {
   constructor() {
+    this.descriptiveId = createID("DuetAlert");
     /**
      * Theme of the card.
      */
@@ -85,7 +87,7 @@ export class DuetAlert {
   render() {
     const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
     const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
-    return (h(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined },
+    return (h(Host, { class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined },
       h("div", { class: {
           "duet-alert": true,
           "duet-alert-has-icon": !!this.icon,
@@ -98,10 +100,10 @@ export class DuetAlert {
         h("div", { class: "duet-alert-container" },
           this.icon && (h("div", { class: "duet-alert-icon" },
             h("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))),
-          h("span", null,
+          h("span", { id: this.descriptiveId },
             h("slot", null))),
         this.dismissible && (h("div", { class: "duet-alert-dismiss" },
-          h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+          h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
   static get is() { return "duet-alert"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice/duet-choice.css

@@ -124,6 +124,11 @@
   border-radius: 4px;
   transition: background-color 150ms ease;
 }
+.duet-choice-label.has-before-text .duet-choice-card-icon,
+.duet-choice-label.has-before-text .duet-choice-card-text {
+  align-self: flex-start;
+  margin-top: 0.25rem;
+}
 .duet-choice-label > div:last-child {
   flex: 1;
   align-self: flex-start;

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

@@ -11,6 +11,8 @@ import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboar
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @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.
+ * @slot label - Label content.
+ * @slot before-text - Content before text can be for example icons or images.
  * @slot info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
  * @slot collapsible_header - header that is only added to collapsible element, this header should be used when the components collapsible area contains additional interactive elements (such as form items) and should be user for a short description of the content below it, it is mandatory for good accessibility to use this - and aria-decribe-by will point to it. If you use the collapsible area with simple text - describe-by will point to this area
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
@@ -205,6 +207,8 @@ export class DuetChoice {
     this.hasInfo = !!this.element.querySelector("[slot='info']");
     this.hasHeader = !!this.element.querySelector('[slot="header"]');
     this.hasAdditional = !!this.element.querySelector("[slot='additional']");
+    this.hasLabel = !!this.element.querySelector("[slot='label']");
+    this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
   }
   /**
    * Component event handling.
@@ -300,11 +304,12 @@ export class DuetChoice {
             "duet-p-0": this.padding === "none",
           } },
           h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
-          h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick },
+          h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick },
+            this.hasBeforeText && h("slot", { name: "before-text" }),
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
-            h("div", null,
-              h("div", null, this.label),
+            h("div", { class: "duet-choice-card-text" },
+              h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label),
               this.caption && (h("div", null,
                 h("duet-spacer", { size: "xx-small" }),
                 h("duet-caption", { margin: "none", selected: this.checked }, this.caption))),

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -4,6 +4,7 @@
 import { Build, Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
+const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice)";
 export class DuetChoiceGroup {
   constructor() {
     /**
@@ -49,6 +50,9 @@ export class DuetChoiceGroup {
      * makes sure that contents are stacked vertically on mobile.
      */
     this.responsive = false;
+    this.getChoices = () => {
+      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
+    };
     /**
      * Component event handling.
      */
@@ -74,7 +78,7 @@ export class DuetChoiceGroup {
     }
     const el = this.element;
     if (this.value === undefined) {
-      const choice = findCheckedOption(el, ":scope > duet-choice");
+      const choice = findCheckedOption(el, duetChoiceSelector);
       if (choice !== undefined) {
         await choice.componentOnReady();
         if (this.value === undefined) {
@@ -82,10 +86,13 @@ export class DuetChoiceGroup {
         }
       }
     }
-    this.mutationO = watchForOptions(el, ":scope > duet-choice", newOption => {
+    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
       if (newOption !== undefined) {
         newOption.componentOnReady().then(() => {
-          this.value = newOption.value;
+          const choices = this.getChoices();
+          if (choices.includes(newOption)) {
+            this.value = newOption.value;
+          }
         });
       }
       else {
@@ -114,7 +121,7 @@ export class DuetChoiceGroup {
      * Make sure we get all choices first so values are up to date prior
      * to caching the choice group value
      */
-    const choices = Array.from(this.element.querySelectorAll(":scope > duet-choice, :scope .duet-choice-group > duet-choice"));
+    const choices = this.getChoices();
     const { value } = this;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins

package/lib/custom-elements-bundle/index.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.0"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.2"};
 
 let scopeId;
 let contentRef;
@@ -2485,6 +2485,7 @@ const DuetAlert$1 = class extends H {
     this.__registerHost();
     this.__attachShadow();
     this.duetDismiss = createEvent$2(this, "duetDismiss", 7);
+    this.descriptiveId = createID("DuetAlert");
     /**
      * Theme of the card.
      */
@@ -2564,7 +2565,7 @@ const DuetAlert$1 = class extends H {
   render() {
     const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
     const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
-    return (h$1(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, h$1("div", { class: {
+    return (h$1(Host, { class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, h$1("div", { class: {
         "duet-alert": true,
         "duet-alert-has-icon": !!this.icon,
         "duet-alert-is-dismissible": this.dismissible,
@@ -2572,7 +2573,7 @@ const DuetAlert$1 = class extends H {
         "duet-m-0": this.margin === "none",
         [this.variation]: true,
         "duet-theme-turva": this.theme === "turva",
-      } }, h$1("div", { class: "duet-alert-container" }, this.icon && (h$1("div", { class: "duet-alert-icon" }, h$1("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), h$1("span", null, h$1("slot", null))), this.dismissible && (h$1("div", { class: "duet-alert-dismiss" }, h$1("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+      } }, h$1("div", { class: "duet-alert-container" }, this.icon && (h$1("div", { class: "duet-alert-icon" }, h$1("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), h$1("span", { id: this.descriptiveId }, h$1("slot", null))), this.dismissible && (h$1("div", { class: "duet-alert-dismiss" }, h$1("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
   static get style() { return duetAlertCss; }
 };
@@ -3426,7 +3427,7 @@ const FocusGuard = ({ moveFocusTo }) => {
   return h("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}.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:#00294d !important;text-align:left;background:white;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:#171c3a !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 #e1e3e6;border-radius:4px;transition:background-color 150ms ease}.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:#e4e4e6}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#909599}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#747475}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#0077b3 !important;background:#f3f9fc;border-color:#0077b3 !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#0077b3}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#171c3a !important;background:#f5f5f7;border-color:#171c3a !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:#c60c30}.checked.collapsible.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}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:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#e1e3e6 !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#657787 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#747475 !important;background:#f5f5f7 !important;border-color:#e4e4e6 !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:#747475 !important}.checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e1e3e6 !important;border-color:#e1e3e6 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-checkmark-container.sc-duet-choice{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid #909599;border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#747475}.checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#0077b3;border-color:#0077b3;transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#171c3a;border-color:#171c3a !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:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfcfd1 !important}.checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfd2d4 !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:#cfcfd1 !important}.duet-checkmark.sc-duet-choice{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid white;border-right:2px solid white;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:28px !important;position:relative;z-index:200;width:100%;font-weight:400;color:#00294d;border:2px solid #e1e3e6;border-top:0;border-radius:0 0 4px 4px}.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:#171c3a;border-color:#171c3a}.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:white;border:2px solid #0077b3;border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:white;border-color:#171c3a}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:#f5f8fa;border-color:#e1e3e6}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:#f5f8fa;transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.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:white;border:2px solid #e1e3e6;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:#f5f8fa;border-bottom-color:transparent;border-bottom-right-radius:0}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:#f5f8fa !important;border-color:#e1e3e6 !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#909599 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#747475 !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}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#909599}.checked.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#0077b3 !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:#0077b3}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#c60c30}.duet-choice-input.sc-duet-choice{position:absolute !important;width:auto;height:auto;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);color:transparent}";
+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}.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:#00294d !important;text-align:left;background:white;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:#171c3a !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 #e1e3e6;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:#e4e4e6}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#909599}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#747475}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#0077b3 !important;background:#f3f9fc;border-color:#0077b3 !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#0077b3}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#171c3a !important;background:#f5f5f7;border-color:#171c3a !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:#c60c30}.checked.collapsible.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}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:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#e1e3e6 !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#657787 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#747475 !important;background:#f5f5f7 !important;border-color:#e4e4e6 !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:#747475 !important}.checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e1e3e6 !important;border-color:#e1e3e6 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-checkmark-container.sc-duet-choice{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid #909599;border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#747475}.checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#0077b3;border-color:#0077b3;transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#171c3a;border-color:#171c3a !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:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfcfd1 !important}.checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfd2d4 !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:#cfcfd1 !important}.duet-checkmark.sc-duet-choice{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid white;border-right:2px solid white;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:28px !important;position:relative;z-index:200;width:100%;font-weight:400;color:#00294d;border:2px solid #e1e3e6;border-top:0;border-radius:0 0 4px 4px}.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:#171c3a;border-color:#171c3a}.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:white;border:2px solid #0077b3;border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:white;border-color:#171c3a}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:#f5f8fa;border-color:#e1e3e6}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:#f5f8fa;transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.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:white;border:2px solid #e1e3e6;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:#f5f8fa;border-bottom-color:transparent;border-bottom-right-radius:0}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:#f5f8fa !important;border-color:#e1e3e6 !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#909599 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#747475 !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}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#909599}.checked.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#0077b3 !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:#0077b3}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#c60c30}.duet-choice-input.sc-duet-choice{position:absolute !important;width:auto;height:auto;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);color:transparent}";
 
 const DuetChoice$1 = class extends H {
   constructor() {
@@ -3623,6 +3624,8 @@ const DuetChoice$1 = class extends H {
     this.hasInfo = !!this.element.querySelector("[slot='info']");
     this.hasHeader = !!this.element.querySelector('[slot="header"]');
     this.hasAdditional = !!this.element.querySelector("[slot='additional']");
+    this.hasLabel = !!this.element.querySelector("[slot='label']");
+    this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
   }
   /**
    * Component event handling.
@@ -3714,7 +3717,7 @@ const DuetChoice$1 = class extends H {
         info: this.isInfoOpen,
         collapsible: this.collapsible,
         "duet-p-0": this.padding === "none",
-      } }, h$1("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h$1("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick }, this.icon && (h$1("div", { class: "duet-choice-card-icon" }, h$1("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h$1("div", null, h$1("div", null, this.label), this.caption && (h$1("div", null, h$1("duet-spacer", { size: "xx-small" }), h$1("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h$1("div", null, h$1("duet-spacer", { size: "xx-small" }), h$1("slot", { name: "additional" })))), h$1("div", null, h$1("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h$1("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h$1("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+      } }, h$1("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h$1("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h$1("slot", { name: "before-text" }), this.icon && (h$1("div", { class: "duet-choice-card-icon" }, h$1("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h$1("div", { class: "duet-choice-card-text" }, h$1("div", null, this.hasLabel ? h$1("slot", { name: "label" }) : this.label), this.caption && (h$1("div", null, h$1("duet-spacer", { size: "xx-small" }), h$1("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h$1("div", null, h$1("duet-spacer", { size: "xx-small" }), h$1("slot", { name: "additional" })))), h$1("div", null, h$1("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h$1("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h$1("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
       }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "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" }, h$1("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h$1("div", { class: "duet-choice-info-icon" }, h$1("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h$1("div", { class: this.getClassNames(), id: this.expandId }, h$1("span", { class: {
@@ -3781,6 +3784,7 @@ const findCheckedOption = (el, tagName) => {
 
 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}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{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)";
 const DuetChoiceGroup$1 = class extends H {
   constructor() {
     super();
@@ -3828,6 +3832,9 @@ const DuetChoiceGroup$1 = class extends H {
      * makes sure that contents are stacked vertically on mobile.
      */
     this.responsive = false;
+    this.getChoices = () => {
+      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
+    };
     /**
      * Component event handling.
      */
@@ -3850,7 +3857,7 @@ const DuetChoiceGroup$1 = class extends H {
   async connectedCallback() {
     const el = this.element;
     if (this.value === undefined) {
-      const choice = findCheckedOption(el, ":scope > duet-choice");
+      const choice = findCheckedOption(el, duetChoiceSelector);
       if (choice !== undefined) {
         await choice.componentOnReady();
         if (this.value === undefined) {
@@ -3858,10 +3865,13 @@ const DuetChoiceGroup$1 = class extends H {
         }
       }
     }
-    this.mutationO = watchForOptions(el, ":scope > duet-choice", newOption => {
+    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
       if (newOption !== undefined) {
         newOption.componentOnReady().then(() => {
-          this.value = newOption.value;
+          const choices = this.getChoices();
+          if (choices.includes(newOption)) {
+            this.value = newOption.value;
+          }
         });
       }
       else {
@@ -3887,7 +3897,7 @@ const DuetChoiceGroup$1 = class extends H {
      * Make sure we get all choices first so values are up to date prior
      * to caching the choice group value
      */
-    const choices = Array.from(this.element.querySelectorAll(":scope > duet-choice, :scope .duet-choice-group > duet-choice"));
+    const choices = this.getChoices();
     const { value } = this;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins