@duetds/components 8.0.6 → 8.1.0

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

@@ -5,429 +5,429 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const slotQuery = require('./slot-query-b7555763.js');
-const commonStrings = require('./common-strings-86913e94.js');
-const createId = require('./create-id-167cd350.js');
-const focusUtils = require('./focus-utils-aea9f4e1.js');
+const index = require('./index-ce232ed8.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const slotQuery = require('./slot-query-3259af5b.js');
+const commonStrings = require('./common-strings-22c70ef0.js');
+const createId = require('./create-id-1f8c438f.js');
+const focusUtils = require('./focus-utils-9b549956.js');
 const keyboardUtils = require('./keyboard-utils-02441bc5.js');
-const languageUtils = require('./language-utils-dc19e8b6.js');
-require('./string-utils-51a2f59f.js');
+const languageUtils = require('./language-utils-e8a527e5.js');
+require('./string-utils-053749ff.js');
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
 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}";
 
 const DuetChoice = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetChoiceReady = index.createEvent(this, "duetChoiceReady", 7);
-    this.duetChoiceRemove = index.createEvent(this, "duetChoiceRemove", 7);
-    this.duetChange = index.createEvent(this, "duetChange", 7);
-    this.duetFocus = index.createEvent(this, "duetFocus", 7);
-    this.duetBlur = index.createEvent(this, "duetBlur", 7);
-    this.hasHeader = false;
-    this.choiceId = createId.createID("DuetChoice");
-    this.expandId = createId.createID("DuetChoiceExpand");
-    this.headerId = createId.createID("DuetChoiceHeader");
-    this.infoButtonId = createId.createID("DuetChoiceInfoButton");
-    this.onMouseEnter = () => {
-      this.isHovering = true;
-    };
-    this.onMouseLeave = () => {
-      this.isHovering = false;
-    };
-    this.onClick = (ev) => {
-      this.toggleChecked(ev);
-    };
-    this.handleKeyDown = (ev) => {
-      if (keyboardUtils.isKeyboardClick(ev)) {
-        this.toggleChecked(ev);
-      }
-      if (keyboardUtils.isQuestionKey(ev) && this.hasInfo) {
-        this.toggleInfo();
-      }
-    };
-    this.onChange = () => {
-      this.checked = this.nativeInput.checked || false;
-      this.duetChange.emit({
-        checked: this.checked,
-        value: this.value,
-        component: "duet-choice",
-      });
-    };
-    this.onBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        checked: this.checked,
-        value: this.value,
-        component: "duet-choice",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.duetFocus.emit({
-        originalEvent: ev,
-        checked: this.checked,
-        value: this.value,
-        component: "duet-choice",
-      });
-    };
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.duetChoiceReady = index.createEvent(this, "duetChoiceReady", 7);
+        this.duetChoiceRemove = index.createEvent(this, "duetChoiceRemove", 7);
+        this.duetChange = index.createEvent(this, "duetChange", 7);
+        this.duetFocus = index.createEvent(this, "duetFocus", 7);
+        this.duetBlur = index.createEvent(this, "duetBlur", 7);
+        this.hasHeader = false;
+        this.choiceId = createId.createID("DuetChoice");
+        this.expandId = createId.createID("DuetChoiceExpand");
+        this.headerId = createId.createID("DuetChoiceHeader");
+        this.infoButtonId = createId.createID("DuetChoiceInfoButton");
+        this.onMouseEnter = () => {
+            this.isHovering = true;
+        };
+        this.onMouseLeave = () => {
+            this.isHovering = false;
+        };
+        this.onClick = (ev) => {
+            this.toggleChecked(ev);
+        };
+        this.handleKeyDown = (ev) => {
+            if (keyboardUtils.isKeyboardClick(ev)) {
+                this.toggleChecked(ev);
+            }
+            if (keyboardUtils.isQuestionKey(ev) && this.hasInfo) {
+                this.toggleInfo();
+            }
+        };
+        this.onChange = () => {
+            this.checked = this.nativeInput.checked || false;
+            this.duetChange.emit({
+                checked: this.checked,
+                value: this.value,
+                component: "duet-choice",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.duetBlur.emit({
+                originalEvent: ev,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-choice",
+            });
+        };
+        this.onFocus = (ev) => {
+            this.duetFocus.emit({
+                originalEvent: ev,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-choice",
+            });
+        };
+        /**
+         * Local methods
+         */
+        this.toggleChecked = ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            if (this.getDisabled()) {
+                return;
+            }
+            this.isInfoOpen = false;
+            // if it's a radio button, and it's already checked
+            // we shouldn't fire an event, so exit early
+            if (this.type === "radio" && this.checked) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.duetChange.emit({
+                originalEvent: ev,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-choice",
+            });
+        };
+        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;
+        this.isBlurred = false;
+        this.theme = "";
+        this.label = "label";
+        this.accessibleLabelInfoButtonDefaults = commonStrings.DuetStringsExternalDefaults;
+        this.accessibleLabelInfoButton = languageUtils.getLocaleString(this.accessibleLabelInfoButtonDefaults);
+        this.accessibleActiveDescendant = undefined;
+        this.accessibleControls = undefined;
+        this.accessibleOwns = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescription = undefined;
+        this.caption = "";
+        this.value = undefined;
+        this.type = "checkbox";
+        this.name = undefined;
+        this.checked = false;
+        this.collapsible = false;
+        this.collapsibleForceExpanded = false;
+        this.margin = "auto";
+        this.icon = "";
+        this.expand = false;
+        this.padding = "auto";
+        this.identifier = undefined;
+        this.groupDirection = undefined;
+        this.groupDisabled = undefined;
+        this.groupResponsive = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.infoLabelDefaults = {
+            fi: "Lisätietoja vaihtoehdosta",
+            en: "More information about",
+            sv: "Mera information om",
+        };
+        this.infoLabel = languageUtils.getLocaleString(this.infoLabelDefaults, languageUtils.getLanguage());
+        this.collapsibleNotificationDefaults = {
+            fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+            en: "This choice has additional information opened below",
+            sv: "Det här val har mer information som öppnades nedan",
+        };
+        this.collapsibleNotification = languageUtils.getLocaleString(this.collapsibleNotificationDefaults, languageUtils.getLanguage());
+    }
     /**
-     * Local methods
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        this.hasInfo = slotQuery.hasSlot(this.element, "info");
+        this.hasHeader = slotQuery.hasSlot(this.element, "header");
+        this.hasAdditional = slotQuery.hasSlot(this.element, "additional");
+        this.hasLabel = slotQuery.hasSlot(this.element, "label");
+        this.hasBeforeText = slotQuery.hasSlot(this.element, "before-text");
+        this.duetChoiceReady.emit();
+    }
+    connectedCallback() {
+        languageUtils.connectLanguageChangeObserver(this, [
+            { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
+            { prop: "infoLabel", defaults: "infoLabelDefaults" },
+            { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
+        ]);
+        this.duetChoiceReady.emit();
+    }
+    disconnectedCallback() {
+        languageUtils.disconnectLanguageChangeObserver(this);
+        this.duetChoiceRemove.emit();
+    }
+    /**
+     * Component event handling.
+     */
+    handleHostBlur(ev) {
+        /**
+         * When moving away from a choice, collapse the info bar to assist visually impared people on focusing
+         */
+        if (this.hasInfo && this.isInfoOpen && this.isKeyDown) {
+            // @ts-ignore
+            const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
+            if (!isTargetContainedInHost) {
+                this.toggleInfo();
+            }
+        }
+    }
+    handleHostKeyDown() {
+        this.isKeyDown = true;
+    }
+    handleHostKeyUp(ev) {
+        this.isKeyDown = false;
+        if (keyboardUtils.isEscapeKey(ev) && this.isInfoOpen) {
+            this.toggleInfo();
+        }
+    }
+    /**
+     * Sets focus on the specified `duet-choice`. Use this method instead of the global
+     * `input.focus()`.
      */
-    this.toggleChecked = ev => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      if (this.getDisabled()) {
-        return;
-      }
-      this.isInfoOpen = false;
-      // if it's a radio button, and it's already checked
-      // we shouldn't fire an event, so exit early
-      if (this.type === "radio" && this.checked) {
-        return;
-      }
-      this.checked = !this.checked;
-      this.duetChange.emit({
-        originalEvent: ev,
-        checked: this.checked,
-        value: this.value,
-        component: "duet-choice",
-      });
-    };
-    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;
-    this.isBlurred = false;
-    this.theme = "";
-    this.label = "label";
-    this.accessibleLabelInfoButtonDefaults = commonStrings.DuetStringsExternalDefaults;
-    this.accessibleLabelInfoButton = languageUtils.getLocaleString(this.accessibleLabelInfoButtonDefaults);
-    this.accessibleActiveDescendant = undefined;
-    this.accessibleControls = undefined;
-    this.accessibleOwns = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.caption = "";
-    this.value = undefined;
-    this.type = "checkbox";
-    this.name = undefined;
-    this.checked = false;
-    this.collapsible = false;
-    this.collapsibleForceExpanded = false;
-    this.margin = "auto";
-    this.icon = "";
-    this.expand = false;
-    this.padding = "auto";
-    this.identifier = undefined;
-    this.groupDirection = undefined;
-    this.groupDisabled = undefined;
-    this.groupResponsive = undefined;
-    this.disabled = false;
-    this.required = false;
-    this.infoLabelDefaults = {
-      fi: "Lisätietoja vaihtoehdosta",
-      en: "More information about",
-      sv: "Mera information om",
-    };
-    this.infoLabel = languageUtils.getLocaleString(this.infoLabelDefaults, languageUtils.getLanguage());
-    this.collapsibleNotificationDefaults = {
-      fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
-      en: "This choice has additional information opened below",
-      sv: "Det här val har mer information som öppnades nedan",
-    };
-    this.collapsibleNotification = languageUtils.getLocaleString(this.collapsibleNotificationDefaults, languageUtils.getLanguage());
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    this.hasInfo = slotQuery.hasSlot(this.element, "info");
-    this.hasHeader = slotQuery.hasSlot(this.element, "header");
-    this.hasAdditional = slotQuery.hasSlot(this.element, "additional");
-    this.hasLabel = slotQuery.hasSlot(this.element, "label");
-    this.hasBeforeText = slotQuery.hasSlot(this.element, "before-text");
-    this.duetChoiceReady.emit();
-  }
-  connectedCallback() {
-    languageUtils.connectLanguageChangeObserver(this, [
-      { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
-      { prop: "infoLabel", defaults: "infoLabelDefaults" },
-      { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
-    ]);
-    this.duetChoiceReady.emit();
-  }
-  disconnectedCallback() {
-    languageUtils.disconnectLanguageChangeObserver(this);
-    this.duetChoiceRemove.emit();
-  }
-  /**
-   * Component event handling.
-   */
-  handleHostBlur(ev) {
+    async setFocus(options) {
+        this.nativeInput.focus(options);
+    }
     /**
-     * When moving away from a choice, collapse the info bar to assist visually impared people on focusing
+     * This method toggles the info section.
      */
-    if (this.hasInfo && this.isInfoOpen && this.isKeyDown) {
-      // @ts-ignore
-      const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
-      if (!isTargetContainedInHost) {
-        this.toggleInfo();
-      }
+    async toggleInfoMethod() {
+        this.isInfoOpen = !this.isInfoOpen;
     }
-  }
-  handleHostKeyDown() {
-    this.isKeyDown = true;
-  }
-  handleHostKeyUp(ev) {
-    this.isKeyDown = false;
-    if (keyboardUtils.isEscapeKey(ev) && this.isInfoOpen) {
-      this.toggleInfo();
+    /**
+     * Should the collapsible content be announced by screen readers
+     */
+    isCollapsibleAnnounceable() {
+        if (!this.collapsible || !this.getExpanded()) {
+            return false;
+        }
+        const children = Array.from(this.element.querySelectorAll(`#${this.choiceId}-collapsible-content > *`) || []);
+        const announceableElements = ["duet-paragraph", "duet-heading", "duet-fieldset"];
+        return children.every(child => announceableElements.includes(child.tagName.toLowerCase()));
     }
-  }
-  /**
-   * Sets focus on the specified `duet-choice`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    this.nativeInput.focus(options);
-  }
-  /**
-   * This method toggles the info section.
-   */
-  async toggleInfoMethod() {
-    this.isInfoOpen = !this.isInfoOpen;
-  }
-  /**
-   * Should the collapsible content be announced by screen readers
-   */
-  isCollapsibleAnnounceable() {
-    if (!this.collapsible || !this.getExpanded()) {
-      return false;
+    getAriaDescribedby() {
+        if (this.accessibleDescribedBy) {
+            return this.accessibleDescribedBy;
+        }
+        if (this.collapsible || this.hasInfo) {
+            if (this.hasHeader) {
+                return this.headerId;
+            }
+            else if (this.isCollapsibleAnnounceable()) {
+                return this.expandId;
+            }
+            else {
+                return `${this.choiceId}-collapsible-notification`;
+            }
+        }
+        return null;
     }
-    const children = Array.from(this.element.querySelectorAll(`#${this.choiceId}-collapsible-content > *`) || []);
-    const announceableElements = ["duet-paragraph", "duet-heading", "duet-fieldset"];
-    return children.every(child => announceableElements.includes(child.tagName.toLowerCase()));
-  }
-  getAriaDescribedby() {
-    if (this.accessibleDescribedBy) {
-      return this.accessibleDescribedBy;
+    getDisabled() {
+        return this.disabled || this.groupDisabled;
     }
-    if (this.collapsible || this.hasInfo) {
-      if (this.hasHeader) {
-        return this.headerId;
-      }
-      else if (this.isCollapsibleAnnounceable()) {
-        return this.expandId;
-      }
-      else {
-        return `${this.choiceId}-collapsible-notification`;
-      }
+    getExpanded() {
+        return this.checked || this.collapsibleForceExpanded;
     }
-    return null;
-  }
-  getDisabled() {
-    return this.disabled || this.groupDisabled;
-  }
-  getExpanded() {
-    return this.checked || this.collapsibleForceExpanded;
-  }
-  getClassNames() {
-    if (this.hasInfo && !this.collapsible) {
-      return {
-        checked: this.checked,
-        "duet-choice-card-info": true,
-        "duet-choice-card-info-expanded": this.isInfoOpen,
-        "duet-choice-card-collapsed": !this.isInfoOpen,
-        "duet-theme-turva": this.theme === "turva",
-      };
+    getClassNames() {
+        if (this.hasInfo && !this.collapsible) {
+            return {
+                checked: this.checked,
+                "duet-choice-card-info": true,
+                "duet-choice-card-info-expanded": this.isInfoOpen,
+                "duet-choice-card-collapsed": !this.isInfoOpen,
+                "duet-theme-turva": this.theme === "turva",
+            };
+        }
+        if (!this.hasInfo && this.collapsible) {
+            return {
+                checked: this.checked,
+                "duet-choice-card-collapsible": true,
+                "duet-choice-card-collapsible-expanded": this.getExpanded(),
+                "duet-choice-card-collapsed": !this.getExpanded(),
+                "duet-choice-card-collapsible-disabled": this.getDisabled(),
+                "duet-theme-turva": this.theme === "turva",
+            };
+        }
+        return {
+            checked: this.checked,
+            "duet-choice-default-slot": true,
+        };
     }
-    if (!this.hasInfo && this.collapsible) {
-      return {
-        checked: this.checked,
-        "duet-choice-card-collapsible": true,
-        "duet-choice-card-collapsible-expanded": this.getExpanded(),
-        "duet-choice-card-collapsed": !this.getExpanded(),
-        "duet-choice-card-collapsible-disabled": this.getDisabled(),
-        "duet-theme-turva": this.theme === "turva",
-      };
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const choiceGroup = this.element.closest("duet-choice-group");
+        const choiceGroupLabel = choiceGroup ? choiceGroup.label : undefined;
+        const identifier = this.identifier || this.choiceId;
+        return (index.h(index.Host, { class: {
+                horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
+                "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
+                "duet-m-0": this.margin === "none",
+                "duet-expand": this.expand,
+                "duet-theme-turva": this.theme === "turva",
+                "no-hover": this.isHovering,
+                disabled: this.getDisabled(),
+            } }, index.h("div", { class: {
+                "duet-choice-card-flextainer": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, index.h("div", { class: {
+                "duet-choice-card": true,
+                "has-icon": !!this.icon,
+                "has-info": this.hasInfo,
+                checked: this.checked,
+                info: this.isInfoOpen,
+                collapsible: this.collapsible,
+                "collapsible-force-expanded": this.collapsibleForceExpanded,
+                "duet-p-0": this.padding === "none",
+            } }, index.h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), 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) }), index.h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && index.h("slot", { name: "before-text" }), this.icon && (index.h("div", { class: "duet-choice-card-icon" }, index.h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), index.h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && index.h("duet-visually-hidden", null, choiceGroupLabel, ", "), index.h("div", null, this.hasLabel ? index.h("slot", { name: "label" }) : this.label), this.caption && (index.h("div", null, index.h("duet-spacer", { size: "xx-small" }), index.h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (index.h("div", null, index.h("duet-spacer", { size: "xx-small" }), index.h("slot", { name: "additional" })))), index.h("div", null, index.h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && index.h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (index.h("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.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" }, index.h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), index.h("div", { class: "duet-choice-info-icon" }, index.h("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (index.h("span", { id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (index.h("div", { class: this.getClassNames(), id: this.expandId }, index.h("span", { class: {
+                "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
+                "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
+            } }, index.h("span", { id: this.headerId }, index.h("slot", { name: "header" })), this.hasInfo ? (index.h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, index.h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, index.h("slot", { name: "info" })), index.h("slot", null))) : (index.h("span", { id: `${this.choiceId}-collapsible-content` }, index.h("slot", null)))), this.isInfoOpen && index.h(focusUtils.FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
     }
-    return {
-      checked: this.checked,
-      "duet-choice-default-slot": true,
-    };
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const choiceGroup = this.element.closest("duet-choice-group");
-    const choiceGroupLabel = choiceGroup ? choiceGroup.label : undefined;
-    const identifier = this.identifier || this.choiceId;
-    return (index.h(index.Host, { class: {
-        horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
-        "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
-        "duet-m-0": this.margin === "none",
-        "duet-expand": this.expand,
-        "duet-theme-turva": this.theme === "turva",
-        "no-hover": this.isHovering,
-        disabled: this.getDisabled(),
-      } }, index.h("div", { class: {
-        "duet-choice-card-flextainer": true,
-        "duet-theme-turva": this.theme === "turva",
-      } }, index.h("div", { class: {
-        "duet-choice-card": true,
-        "has-icon": !!this.icon,
-        "has-info": this.hasInfo,
-        checked: this.checked,
-        info: this.isInfoOpen,
-        collapsible: this.collapsible,
-        "collapsible-force-expanded": this.collapsibleForceExpanded,
-        "duet-p-0": this.padding === "none",
-      } }, index.h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), 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) }), index.h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && index.h("slot", { name: "before-text" }), this.icon && (index.h("div", { class: "duet-choice-card-icon" }, index.h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), index.h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && index.h("duet-visually-hidden", null, choiceGroupLabel, ", "), index.h("div", null, this.hasLabel ? index.h("slot", { name: "label" }) : this.label), this.caption && (index.h("div", null, index.h("duet-spacer", { size: "xx-small" }), index.h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (index.h("div", null, index.h("duet-spacer", { size: "xx-small" }), index.h("slot", { name: "additional" })))), index.h("div", null, index.h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && index.h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (index.h("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.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" }, index.h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), index.h("div", { class: "duet-choice-info-icon" }, index.h("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (index.h("span", { id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (index.h("div", { class: this.getClassNames(), id: this.expandId }, index.h("span", { class: {
-        "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
-        "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-      } }, index.h("span", { id: this.headerId }, index.h("slot", { name: "header" })), this.hasInfo ? (index.h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, index.h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, index.h("slot", { name: "info" })), index.h("slot", null))) : (index.h("span", { id: `${this.choiceId}-collapsible-content` }, index.h("slot", null)))), this.isInfoOpen && index.h(focusUtils.FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
-  }
-  get element() { return index.getElement(this); }
+    get element() { return index.getElement(this); }
 };
 DuetChoice.style = duetChoiceCss;
 
 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 DuetChoiceGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.choiceGroupName = "duet-choice-group";
-    this.choices = new Set();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.choiceGroupName = "duet-choice-group";
+        this.choices = new Set();
+        /**
+         * Component event handling.
+         */
+        this.onSelect = (ev) => {
+            if (ev.detail.component !== "duet-choice") {
+                return;
+            }
+            const selectedChoice = ev.target;
+            if (selectedChoice && this.choices.has(selectedChoice)) {
+                this.value = selectedChoice.value;
+            }
+        };
+        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";
+        this.theme = "";
+        this.error = "";
+        this.name = undefined;
+        this.label = "Label";
+        this.labelHidden = false;
+        this.caption = undefined;
+        this.tooltip = undefined;
+        this.tooltipDirection = "auto";
+        this.responsive = false;
+        this.breakpoint = "small";
+        this.value = undefined;
+        this.disabled = undefined;
+        this.required = false;
+        this.accessibleLiveError = "polite";
+    }
     /**
-     * Component event handling.
+     * Component lifecycle events.
      */
-    this.onSelect = (ev) => {
-      if (ev.detail.component !== "duet-choice") {
-        return;
-      }
-      const selectedChoice = ev.target;
-      if (selectedChoice && this.choices.has(selectedChoice)) {
-        this.value = selectedChoice.value;
-      }
-    };
-    this.onChoiceReady = (ev) => {
-      const choice = ev.target;
-      if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
-        this.choices.add(choice);
+    async connectedCallback() {
+        this.initialValue = this.value;
         this.updateChoices();
-      }
-    };
-    this.onChoiceRemove = (ev) => {
-      const choice = ev.target;
-      this.choices.delete(choice);
-      this.updateChoices();
-    };
-    this.direction = "vertical";
-    this.margin = "auto";
-    this.theme = "";
-    this.error = "";
-    this.name = undefined;
-    this.label = "Label";
-    this.labelHidden = false;
-    this.caption = undefined;
-    this.tooltip = undefined;
-    this.tooltipDirection = "auto";
-    this.responsive = false;
-    this.breakpoint = "small";
-    this.value = undefined;
-    this.disabled = undefined;
-    this.required = false;
-    this.accessibleLiveError = "polite";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  async connectedCallback() {
-    this.initialValue = this.value;
-    this.updateChoices();
-  }
-  disconnectedCallback() {
-    if (this.mutationO) {
-      this.mutationO.disconnect();
-      this.mutationO = undefined;
     }
-  }
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-  }
-  /**
-   * Local methods
-   */
-  async updateChoices() {
-    var _a;
-    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 this.choices) {
-      choice.name = this.name;
-      choice.required = this.required;
-      choice.groupDisabled = this.disabled;
-      choice.groupDirection = this.direction;
-      choice.groupResponsive = this.responsive;
-      if (!hasChecked && choice.value === value) {
-        // Correct value for this choice, but this choice isn't checked yet
-        // and we haven't found a checked yet
-        hasChecked = true;
-        choice.checked = true;
-        if (typeof this.value === "undefined") {
-          this.value = value;
+    disconnectedCallback() {
+        if (this.mutationO) {
+            this.mutationO.disconnect();
+            this.mutationO = undefined;
         }
-      }
-      else {
-        // This choice doesn't have the correct value or the choice group has been already checked
-        choice.checked = false;
-      }
     }
-    // Reset value if
-    if (!hasChecked) {
-      this.value = undefined;
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+    }
+    /**
+     * Local methods
+     */
+    async updateChoices() {
+        var _a;
+        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 Array.from(this.choices)) {
+            choice.name = this.name;
+            choice.required = this.required;
+            choice.groupDisabled = this.disabled;
+            choice.groupDirection = this.direction;
+            choice.groupResponsive = this.responsive;
+            if (!hasChecked && choice.value === value) {
+                // Correct value for this choice, but this choice isn't checked yet
+                // 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
+                choice.checked = false;
+            }
+        }
+        // Reset value if
+        if (!hasChecked) {
+            this.value = undefined;
+        }
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h(index.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",
+                "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
+                "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
+                "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
+            } }, index.h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (index.h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), index.h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, index.h("slot", null)))));
     }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h(index.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",
-        "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
-        "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
-        "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-      } }, index.h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (index.h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), index.h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, index.h("slot", null)))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["updateChoices"],
-    "disabled": ["updateChoices"],
-    "name": ["updateChoices"],
-    "direction": ["updateChoices"],
-    "responsive": ["updateChoices"]
-  }; }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["updateChoices"],
+        "disabled": ["updateChoices"],
+        "name": ["updateChoices"],
+        "direction": ["updateChoices"],
+        "responsive": ["updateChoices"]
+    }; }
 };
 DuetChoiceGroup.style = duetChoiceGroupCss;