@luzmo/lucero 1.0.3-alpha.8 → 2.0.0

package/components/question-box-9F6Ppakl.js

@@ -0,0 +1,1171 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-CkCg3wfh.js";
+import { n } from "./sized-mixin-DzQTebN-.js";
+import { t as r } from "./roving-tabindex-pomAn3z-.js";
+import "./icon-DB1DRieA.js";
+import "./action-button-cULkUUi6.js";
+import "./badge-Dnkh-mfN.js";
+import "./button-BtWr5Lag.js";
+import { t as i } from "./language-resolution-DR30FsWE.js";
+import "./checkbox-6YzkdHR4.js";
+import "./field-group/index.js";
+import "./text-field-C2MHZbTp.js";
+import "./radio-DRI4on-W.js";
+import { html as a, nothing as o, unsafeCSS as s } from "lit";
+import { property as c, query as l, state as u } from "lit/decorators.js";
+import { luzmoAngleLeft as d, luzmoAngleRight as f, luzmoPencil as p } from "@luzmo/icons";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { repeat as h } from "lit/directives/repeat.js";
+//#region src/components/question-box/question-box.module.scss?inline
+var g = ":host{font-family:var(--question-box-font-family);font-size:var(--question-box-font-size);color:var(--highcontrast-question-box-color,var(--question-box-color));box-sizing:border-box;inline-size:100%;max-inline-size:var(--luzmo-question-box-max-inline-size,var(--question-box-max-inline-size));display:block}:host([disabled]){pointer-events:none}.card{gap:var(--question-box-gap);padding:var(--question-box-padding);box-sizing:border-box;border-width:var(--question-box-border-width);border-style:solid;border-color:var(--highcontrast-question-box-border-color,var(--question-box-border-color));border-radius:var(--question-box-border-radius);background-color:var(--highcontrast-question-box-background-color,var(--question-box-background-color));flex-direction:column;display:flex}.header{justify-content:space-between;align-items:flex-start;gap:var(--question-box-header-gap);display:flex}.header-actions,.step-navigation{align-items:center;display:flex}.header-actions{gap:var(--question-box-header-actions-gap);min-block-size:0;block-size:max(var(--question-box-title-font-size) * var(--question-box-title-line-height), var(--question-box-header-control-size) - 2 * (var(--question-box-padding) - var(--question-box-header-actions-inset)));flex-shrink:0;margin-inline-start:auto;overflow:visible}.step-navigation{gap:var(--question-box-copy-gap)}.heading{gap:var(--question-box-heading-copy-gap);flex-direction:column;min-inline-size:0;display:flex}.progress{font-size:var(--question-box-progress-font-size);color:var(--question-box-muted-color);margin:0}.title{font-size:var(--question-box-title-font-size);font-weight:var(--luzmo-font-weight-bold);line-height:var(--question-box-title-line-height);margin:0}.title:focus,.summary-heading:focus{outline:none}.title:focus-visible,.summary-heading:focus-visible{-webkit-text-decoration-color:var(--question-box-focus-ring-color);text-decoration-color:var(--question-box-focus-ring-color);text-decoration-line:underline;text-decoration-thickness:var(--question-box-focus-ring-width);text-underline-offset:var(--question-box-focus-ring-gap);outline:none}.description{color:var(--question-box-muted-color);font-size:inherit;margin:0;margin-block-start:var(--question-box-heading-copy-offset);line-height:1.4}.close{flex-shrink:0}.body{gap:var(--question-box-option-gap);max-block-size:var(--luzmo-question-box-body-max-block-size,var(--question-box-body-max-block-size));padding-block:var(--question-box-body-focus-inset);margin-block:calc(var(--question-box-body-focus-inset) * -1);flex-direction:column;display:flex;overflow:hidden auto}.body::-webkit-scrollbar{width:var(--luzmo-question-box-scrollbar-width,var(--question-box-scrollbar-width));height:var(--luzmo-question-box-scrollbar-width,var(--question-box-scrollbar-width))}.body::-webkit-scrollbar-track{background:var(--luzmo-question-box-scrollbar-track-background,var(--question-box-scrollbar-track-background));border-radius:var(--luzmo-question-box-scrollbar-track-border-radius,var(--question-box-scrollbar-track-border-radius))}.body::-webkit-scrollbar-thumb{background:var(--luzmo-question-box-scrollbar-thumb-background,var(--question-box-scrollbar-thumb-background));border-radius:var(--luzmo-question-box-scrollbar-thumb-border-radius,var(--question-box-scrollbar-thumb-border-radius))}.body::-webkit-scrollbar-thumb:hover{background:var(--luzmo-question-box-scrollbar-thumb-hover-background,var(--question-box-scrollbar-thumb-hover-background))}.body{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-question-box-scrollbar-thumb-background,var(--question-box-scrollbar-thumb-background)) var(--luzmo-question-box-scrollbar-track-background,var(--question-box-scrollbar-track-background))}.options{box-sizing:border-box;flex-direction:column;inline-size:100%;min-inline-size:0;display:flex}.options--descriptive luzmo-radio,.options--descriptive luzmo-checkbox,.options--descriptive .other-option-answer{padding-block:var(--luzmo-question-box-descriptive-option-padding-block,var(--question-box-descriptive-option-padding-block))}.body:has(.options--descriptive){margin-block:calc(var(--question-box-option-padding-block) - var(--question-box-body-focus-inset) - var(--luzmo-question-box-descriptive-option-padding-block,var(--question-box-descriptive-option-padding-block)))}luzmo-radio,luzmo-checkbox{box-sizing:border-box;inline-size:100%;min-block-size:var(--question-box-option-min-block-size);padding-block:var(--question-box-option-padding-block);padding-inline:var(--question-box-option-padding-inline);border-block-end-width:var(--luzmo-question-box-divider-width,var(--question-box-divider-width));border-block-end-style:solid;border-block-end-color:var(--luzmo-question-box-divider-color,var(--question-box-divider-color));border-radius:var(--luzmo-border-radius-s);align-items:center;display:flex}luzmo-radio:hover,luzmo-checkbox:hover{background-color:var(--question-box-option-hover-background)}.other-option-row{align-items:center;gap:var(--question-box-option-gap);box-sizing:border-box;border-block-end-width:var(--luzmo-question-box-divider-width,var(--question-box-divider-width));border-block-end-style:solid;border-block-end-color:var(--luzmo-question-box-divider-color,var(--question-box-divider-color));inline-size:100%;max-inline-size:100%;display:flex}.other-option-answer{align-items:center;gap:var(--question-box-option-gap);box-sizing:border-box;min-inline-size:0;min-block-size:var(--question-box-option-min-block-size);padding-block:var(--question-box-option-padding-block);padding-inline:var(--question-box-option-padding-inline);border-radius:var(--luzmo-border-radius-s);flex:1;display:flex}.other-option-answer:hover{background-color:var(--question-box-option-hover-background)}luzmo-radio.other-option,luzmo-checkbox.other-option{border:0;flex:none;min-block-size:auto;inline-size:auto;padding:0}luzmo-radio.other-option{--luzmo-radio-button-top-to-control:0px}luzmo-radio.numbered-option{--luzmo-radio-button-control-size:0px;--luzmo-radio-button-top-to-control:0px;--luzmo-radio-text-to-control:0px;--luzmo-radio-border-width:0px;--luzmo-radio-focus-indicator-width:0px}luzmo-checkbox.numbered-option{--luzmo-checkbox-control-size:0px;--luzmo-checkbox-text-to-control:0px;--luzmo-checkbox-top-to-text:0px;--luzmo-checkbox-border-width:0px;--luzmo-checkbox-selected-border-width:0px;--luzmo-checkbox-focus-indicator-width:0px}luzmo-radio.numbered-option::part(control),luzmo-checkbox.numbered-option::part(control){display:none}luzmo-radio.other-option:hover,luzmo-checkbox.other-option:hover{background-color:#0000}.other-field{inline-size:auto;min-inline-size:0;max-inline-size:100%;min-block-size:var(--question-box-other-field-min-block-size);font-size:var(--question-box-other-field-font-size);--luzmo-text-field-width:100%;--luzmo-text-field-height:var(--question-box-other-field-min-block-size);--luzmo-text-field-background-color:transparent;--luzmo-text-field-background-color-disabled:transparent;--luzmo-text-field-placeholder-font-size:var(--question-box-other-field-font-size);--luzmo-text-field-border-width:0px;--luzmo-text-field-spacing-inline:0px;--luzmo-text-field-spacing-block-start:0px;--luzmo-text-field-spacing-block-end:0px;flex:1;justify-content:center}.other-primary{flex:none}.other-actions{box-sizing:border-box;justify-content:flex-end;align-items:center;gap:var(--question-box-copy-gap-detailed);inline-size:100%;padding-inline:var(--question-box-option-padding-inline);margin-block-start:var(--question-box-copy-gap-detailed);display:flex}.selected-count{font-size:var(--luzmo-question-box-selected-count-font-size,var(--question-box-selected-count-font-size))}.other-actions .selected-count{min-inline-size:0;margin-inline-end:auto}.other-actions luzmo-button{flex:none}.status-error{--luzmo-helptext-font-size:var(--luzmo-question-box-selected-count-font-size,var(--question-box-selected-count-font-size));--luzmo-helptext-min-height:0;--luzmo-helptext-top-to-text:0;--luzmo-helptext-bottom-to-text:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.option-content{align-items:flex-start;gap:var(--question-box-option-gap);inline-size:100%;display:flex}.option-number{forced-color-adjust:none;inline-size:var(--question-box-option-number-size);block-size:var(--question-box-option-number-size);box-sizing:border-box;border:var(--luzmo-border-width) solid var(--highcontrast-question-box-option-number-border-color,var(--question-box-option-number-border-color));border-radius:var(--luzmo-border-radius);color:var(--highcontrast-question-box-option-number-color,var(--question-box-option-number-color));background-color:var(--highcontrast-question-box-option-number-background,var(--question-box-option-number-background));transition:color var(--luzmo-animation-duration) ease-in-out, border-color var(--luzmo-animation-duration) ease-in-out, background-color var(--luzmo-animation-duration) ease-in-out;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}luzmo-radio[checked] .option-number,luzmo-checkbox[checked] .option-number{color:var(--highcontrast-question-box-option-number-selected-color,var(--question-box-option-number-selected-color));border-color:var(--highcontrast-question-box-option-number-selected-background,var(--question-box-option-number-selected-background));background-color:var(--highcontrast-question-box-option-number-selected-background,var(--question-box-option-number-selected-background))}luzmo-radio[data-focus-visible] .option-number,luzmo-checkbox[data-focus-visible] .option-number,.option-number--focused{outline:var(--luzmo-question-box-focus-ring-width,var(--question-box-focus-ring-width)) solid var(--highcontrast-question-box-focus-ring-color,var(--luzmo-question-box-focus-ring-color,var(--question-box-focus-ring-color)));outline-offset:var(--luzmo-question-box-focus-ring-gap,var(--question-box-focus-ring-gap))}luzmo-radio[disabled] .option-number,luzmo-checkbox[disabled] .option-number{opacity:.5}.option-copy{gap:var(--question-box-copy-gap);flex-direction:column;flex:1;min-inline-size:0;display:flex}.option-edit luzmo-icon{color:inherit}.option-heading{align-items:center;gap:var(--question-box-recommended-gap);min-block-size:var(--question-box-option-number-size);flex-wrap:wrap;display:flex}.option-text{align-items:baseline;gap:var(--question-box-recommended-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.option-description{color:var(--question-box-muted-color);line-height:1.4}.option-hint{color:var(--question-box-muted-color);font-size:var(--luzmo-font-size-s)}.footer{justify-content:space-between;align-items:center;gap:var(--question-box-option-gap);flex-wrap:wrap;display:flex}.status{color:var(--question-box-muted-color);font-size:var(--luzmo-question-box-selected-count-font-size,var(--question-box-selected-count-font-size))}.actions{justify-content:flex-end;gap:var(--question-box-recommended-gap);flex-wrap:wrap;margin-inline-start:auto;display:flex}:host([dir=rtl]) .step-navigation luzmo-icon{transform:scaleX(-1)}.resolved{gap:var(--question-box-summary-gap)}.summary-actions{justify-content:flex-end;gap:var(--question-box-recommended-gap);flex-wrap:wrap;display:flex}.summary{gap:var(--question-box-option-gap);flex-direction:column;display:flex}.summary-heading{font-size:var(--question-box-title-font-size);line-height:var(--question-box-title-line-height);margin:0}.summary-row{gap:var(--question-box-copy-gap);flex-direction:column;display:flex}.summary-title{color:var(--question-box-muted-color);font-size:var(--luzmo-font-size-s)}.summary-answer{font-weight:var(--luzmo-font-weight-bold)}@media (prefers-reduced-motion:reduce){.option-number{transition-duration:0s}}@media (forced-colors:active){:host{--highcontrast-question-box-border-color:CanvasText;--highcontrast-question-box-background-color:Canvas;--highcontrast-question-box-color:CanvasText;--highcontrast-question-box-focus-ring-color:Highlight;--highcontrast-question-box-option-number-border-color:ButtonText;--highcontrast-question-box-option-number-color:ButtonText;--highcontrast-question-box-option-number-background:Canvas;--highcontrast-question-box-option-number-selected-background:Highlight;--highcontrast-question-box-option-number-selected-color:HighlightText}}:host{--question-box-font-family:var(--luzmo-font-family);--question-box-font-size:var(--luzmo-font-size-m);--question-box-color:var(--luzmo-font-color);--question-box-muted-color:color-mix(in srgb, var(--luzmo-font-color) 80%, var(--luzmo-background-color));--question-box-background-color:var(--luzmo-background-color);--question-box-border-color:var(--luzmo-border-color);--question-box-border-width:var(--luzmo-border-width);--question-box-border-radius:var(--luzmo-border-radius-l);--question-box-padding:var(--luzmo-spacing-5);--question-box-gap:var(--luzmo-spacing-4);--question-box-header-gap:var(--luzmo-spacing-3);--question-box-header-actions-gap:var(--luzmo-spacing-2);--question-box-header-actions-inset:var(--luzmo-spacing-2);--question-box-header-control-size:var(--luzmo-component-height);--question-box-max-inline-size:40rem;--question-box-body-max-block-size:24rem;--question-box-title-font-size:var(--question-box-font-size);--question-box-title-line-height:1.3;--question-box-progress-font-size:var(--luzmo-font-size-s);--question-box-selected-count-font-size:var(--luzmo-font-size-s);--question-box-option-min-block-size:var(--luzmo-component-height);--question-box-option-hover-background:var(--luzmo-background-color-hover);--question-box-option-number-size:var(--luzmo-component-height-xs);--question-box-descriptive-option-padding-block:var(--question-box-option-padding-block);--question-box-option-padding-block:var(--luzmo-spacing-1);--question-box-option-padding-inline:var(--luzmo-spacing-3);--question-box-option-gap:var(--luzmo-spacing-3);--question-box-heading-copy-gap:0px;--question-box-heading-copy-offset:calc(var(--question-box-font-size) * -.25);--question-box-copy-gap:var(--luzmo-spacing-1);--question-box-copy-gap-detailed:var(--luzmo-spacing-2);--question-box-recommended-gap:var(--luzmo-spacing-2);--question-box-summary-gap:var(--luzmo-spacing-4);--question-box-body-focus-inset:calc(var(--luzmo-indicator-gap) + var(--luzmo-indicator-width));--question-box-focus-ring-width:var(--luzmo-indicator-width);--question-box-focus-ring-gap:var(--luzmo-indicator-gap);--question-box-focus-ring-color:var(--luzmo-indicator-color);--question-box-divider-width:0px;--question-box-option-number-background:var(--luzmo-background-color);--question-box-option-number-border-color:var(--luzmo-border-color);--question-box-option-number-color:var(--luzmo-font-color);--question-box-option-number-selected-background:var(--luzmo-primary);--question-box-option-number-selected-color:var(--luzmo-primary-inverse-color);--question-box-other-field-min-block-size:var(--question-box-option-min-block-size);--question-box-other-field-font-size:var(--question-box-font-size);--question-box-divider-color:var(--luzmo-border-color);--question-box-scrollbar-width:var(--luzmo-scrollbar-size);--question-box-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--question-box-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--question-box-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--question-box-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--question-box-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background)}:host([size=s]){--question-box-padding:var(--luzmo-spacing-4);--question-box-font-size:var(--luzmo-font-size-s);--question-box-selected-count-font-size:var(--luzmo-font-size-xs);--question-box-title-font-size:var(--question-box-font-size);--question-box-header-control-size:var(--luzmo-component-height-s);--question-box-option-min-block-size:var(--luzmo-component-height-s);--question-box-option-number-size:var(--luzmo-component-height-xs);--question-box-other-field-min-block-size:var(--question-box-option-min-block-size);--question-box-other-field-font-size:var(--question-box-font-size)}:host([size=l]){--question-box-font-size:var(--luzmo-font-size-l);--question-box-selected-count-font-size:var(--luzmo-font-size-m);--question-box-title-font-size:var(--question-box-font-size);--question-box-header-control-size:var(--luzmo-component-height-l);--question-box-option-min-block-size:var(--luzmo-component-height-l);--question-box-option-number-size:var(--luzmo-component-height-s);--question-box-other-field-min-block-size:var(--question-box-option-min-block-size);--question-box-other-field-font-size:var(--question-box-font-size)}:host([size=xl]){--question-box-font-size:var(--luzmo-font-size-xl);--question-box-selected-count-font-size:var(--luzmo-font-size-l);--question-box-title-font-size:var(--question-box-font-size);--question-box-header-control-size:var(--luzmo-component-height-xl);--question-box-option-min-block-size:var(--luzmo-component-height-xl);--question-box-option-number-size:var(--luzmo-component-height);--question-box-other-field-min-block-size:var(--question-box-option-min-block-size);--question-box-other-field-font-size:var(--question-box-font-size)}", _ = "__other__", v = {
+	continue: "Next",
+	back: "Back",
+	submit: "Submit",
+	skip: "Skip",
+	change: "Change",
+	close: "Close",
+	other: "Something else",
+	otherPlaceholder: "Something else",
+	recommended: "Recommended",
+	answerTitle: "Answer",
+	answersTitle: "Answers",
+	progress: "{current} of {total}",
+	selectedCount: "{count} selected",
+	selectedCountOne: "{count} selected",
+	recommendedSuffix: "{label} ({recommended})",
+	answer: "{answer}",
+	requiredSelectionDescription: "Choose one or more options.",
+	selectionRangeDescription: "Choose between {min} and {max} options.",
+	minSelectedError: "Choose at least {min} options.",
+	maxSelectedError: "Choose at most {max} options.",
+	otherRequiredError: "Enter a value for this option."
+}, y = (e) => `${e}Other`, b = (e) => !!e.other || e.options.length === 0, x = (e) => typeof e.other == "object" && e.other ? e.other : {}, S = (e) => Object.fromEntries(Object.entries(e)), C = (e, t, n) => {
+	Object.defineProperty(e, t, {
+		configurable: !0,
+		enumerable: !0,
+		value: n,
+		writable: !0
+	});
+}, w = (e, t) => {
+	let n = /* @__PURE__ */ new Set([...Object.keys(e), ...Object.keys(t)]);
+	for (let r of n) {
+		let n = e[r], i = t[r];
+		if (Array.isArray(n) || Array.isArray(i)) {
+			if (!Array.isArray(n) || !Array.isArray(i) || n.length !== i.length || n.some((e, t) => e !== i[t])) return !1;
+		} else if (n !== i) return !1;
+	}
+	return !0;
+}, T = (e) => {
+	let t = /* @__PURE__ */ new Set(), n = [];
+	for (let r of e) t.has(r) || (t.add(r), n.push(r));
+	return n;
+}, E = (e) => {
+	let t = new Set(e.options.map((e) => e.value));
+	return b(e) && t.add(_), t;
+}, D = (e, t) => {
+	let n = t[e.id];
+	return e.type === "single" ? typeof n == "string" && n ? [n] : [] : Array.isArray(n) ? T(n) : [];
+}, O = (e, t) => D(e, t).includes(_), ee = (e) => {
+	let t = Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
+	return {
+		...v,
+		...t
+	};
+}, k = (e, t) => {
+	let n = e;
+	for (let [e, r] of Object.entries(t)) n = n.replaceAll(`{${e}}`, r);
+	return n;
+}, A = (e) => {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e) {
+		if (!n.id) throw TypeError("luzmo-question-box: every question needs an id.");
+		if (t.has(n.id)) throw TypeError(`luzmo-question-box: duplicate question id "${n.id}".`);
+		t.add(n.id);
+		let r = y(n.id);
+		if (e.some((e) => e.id === r)) throw TypeError(`luzmo-question-box: question id "${r}" collides with Other text for "${n.id}".`);
+		if (n.type !== "multiple" && (n.minSelected !== void 0 || n.maxSelected !== void 0)) throw TypeError(`luzmo-question-box: minSelected and maxSelected only apply to multiple-choice question "${n.id}".`);
+		for (let [e, t] of [["minSelected", n.minSelected], ["maxSelected", n.maxSelected]]) if (t !== void 0 && (!Number.isInteger(t) || t < 0)) throw TypeError(`luzmo-question-box: ${e} must be a non-negative integer on "${n.id}".`);
+		let i = n.minSelected ?? +!!n.required;
+		if (n.maxSelected !== void 0 && i > n.maxSelected) throw TypeError(`luzmo-question-box: minSelected cannot exceed maxSelected on "${n.id}".`);
+		let a = n.options.filter((e) => !e.disabled).length + +!!b(n);
+		if (n.type === "multiple" && i > a) throw TypeError(`luzmo-question-box: minSelected exceeds the available options on "${n.id}".`);
+		let o = /* @__PURE__ */ new Set();
+		for (let e of n.options) {
+			if (!e.value) throw TypeError(`luzmo-question-box: option values cannot be empty on "${n.id}".`);
+			if (e.value === "__other__") throw TypeError(`luzmo-question-box: "${_}" is reserved on "${n.id}".`);
+			if (o.has(e.value)) throw TypeError(`luzmo-question-box: duplicate option value "${e.value}" on "${n.id}".`);
+			o.add(e.value);
+		}
+	}
+}, j = (e, t) => {
+	let n = Object.fromEntries([]);
+	for (let r of e) {
+		let e = E(r), i = t[r.id], a = Object.hasOwn(t, r.id);
+		if (r.type === "single") typeof i == "string" && e.has(i) ? C(n, r.id, i) : !a && typeof r.default == "string" && (e.has(r.default) || r.options.length === 0) && C(n, r.id, r.options.length === 0 ? _ : r.default);
+		else {
+			let t = [...r.options.map((e) => e.value), ...b(r) ? [_] : []], o = T(Array.isArray(i) ? i.filter((t) => e.has(t)) : []);
+			if (o.length > 0) C(n, r.id, t.filter((e) => o.includes(e)));
+			else if (!a && Array.isArray(r.default)) {
+				let i = T(r.default.filter((t) => e.has(t)));
+				i.length > 0 && C(n, r.id, t.filter((e) => i.includes(e)));
+			}
+		}
+		let o = y(r.id), s = t[o];
+		typeof s == "string" ? C(n, o, s) : !a && r.options.length === 0 && typeof r.default == "string" && C(n, o, r.default);
+	}
+	return n;
+}, M = (e) => e.minSelected ?? +!!e.required, N = (e, t) => {
+	let n = M(e), r = e.maxSelected;
+	return n > 0 && r !== void 0 ? k(t.selectionRangeDescription, {
+		min: String(n),
+		max: String(r)
+	}) : n === 1 ? t.requiredSelectionDescription : n > 1 ? k(t.minSelectedError, { min: String(n) }) : r === void 0 ? void 0 : k(t.maxSelectedError, { max: String(r) });
+}, P = (e, t) => {
+	let n = D(e, t), r = M(e), i = e.maxSelected;
+	if (n.length < r) return r <= 1 ? "missing" : "minimum";
+	if (i !== void 0 && n.length > i) return "maximum";
+	if (O(e, t) && !String(t[y(e.id)] ?? "").trim()) return "otherText";
+}, te = (e, t) => P(e, t) !== void 0, ne = (e, t, n) => {
+	switch (P(e, t)) {
+		case "minimum": return k(n.minSelectedError, { min: String(M(e)) });
+		case "maximum": return k(n.maxSelectedError, { max: String(e.maxSelected) });
+		case "otherText": return n.otherRequiredError;
+		default: return;
+	}
+}, re = (e, t, n, r, i) => {
+	if (i || t.disabled) return !0;
+	if (e.type !== "multiple" || n) return !1;
+	let a = e.maxSelected;
+	return a !== void 0 && D(e, r).length >= a;
+}, ie = (e, t) => k(e === 1 ? t.selectedCountOne : t.selectedCount, { count: String(e) }), F, ae = (e, t) => {
+	try {
+		return F?.language !== t && (F = {
+			language: t,
+			formatter: new Intl.ListFormat(t, {
+				style: "narrow",
+				type: "conjunction"
+			})
+		}), F.formatter.format(e);
+	} catch {
+		return e.join(", ");
+	}
+}, oe = (e, t) => e.recommended ? k(t.recommendedSuffix, {
+	label: e.label,
+	recommended: t.recommended
+}) : e.label, se = (e) => {
+	let t = e.options.map((e) => ({
+		const: e.value,
+		title: e.label
+	}));
+	return b(e) && e.options.length > 0 && t.push({
+		const: _,
+		title: typeof e.other == "object" && e.other.label || v.other
+	}), t;
+}, ce = (e) => {
+	let t = { type: "string" };
+	return typeof e.other == "object" && e.other.label && (t.title = e.other.label), t;
+}, I = (e) => {
+	let t = [], n = [];
+	for (let r of e) {
+		if (r.options.length === 0) {
+			let e = { type: "string" };
+			r.title && (e.title = r.title), r.description && (e.description = r.description), typeof r.default == "string" && (e.default = r.default), t.push([r.id, e]), r.required && n.push(r.id);
+			continue;
+		}
+		let e = se(r);
+		if (r.type === "single") {
+			let n = {
+				type: "string",
+				oneOf: e
+			};
+			r.title && (n.title = r.title), r.description && (n.description = r.description), typeof r.default == "string" && r.options.some((e) => e.value === r.default) && (n.default = r.default), t.push([r.id, n]);
+		} else {
+			let n = {
+				type: "array",
+				items: { anyOf: e }
+			};
+			r.title && (n.title = r.title), r.description && (n.description = r.description);
+			let i = r.minSelected ?? (r.required ? 1 : void 0);
+			if (i !== void 0 && (n.minItems = i), r.maxSelected !== void 0 && (n.maxItems = r.maxSelected), Array.isArray(r.default)) {
+				let t = new Set(e.map((e) => e.const)), i = r.default.filter((e) => t.has(e));
+				i.length > 0 && (n.default = i);
+			}
+			t.push([r.id, n]);
+		}
+		r.required && n.push(r.id), b(r) && t.push([y(r.id), ce(r)]);
+	}
+	let r = Object.fromEntries(t);
+	return n.length > 0 ? {
+		type: "object",
+		properties: r,
+		required: n
+	} : {
+		type: "object",
+		properties: r
+	};
+}, L = (e, t) => String(t[y(e.id)] ?? "").trim(), R = (e, t) => {
+	let n = [];
+	for (let r of e) {
+		let e = L(r, t);
+		if (r.options.length === 0) {
+			e && n.push([r.id, e]);
+			continue;
+		}
+		let i = D(r, t);
+		r.type === "single" ? i[0] && n.push([r.id, i[0]]) : i.length > 0 && n.push([r.id, [...i]]), b(r) && O(r, t) && e && n.push([y(r.id), e]);
+	}
+	return Object.fromEntries(n);
+}, z = (e) => !!e && typeof e == "object" && !Array.isArray(e), B = (e) => z(e) ? e : {}, V = (e) => {
+	let t = e.oneOf ?? e.items?.anyOf;
+	if (Array.isArray(t)) {
+		let e = [], n = /* @__PURE__ */ new Set();
+		for (let r of t) !z(r) || typeof r.const != "string" || !r.const || n.has(r.const) || (n.add(r.const), e.push({
+			value: r.const,
+			label: typeof r.title == "string" && r.title ? r.title : r.const
+		}));
+		return {
+			declared: !0,
+			options: e
+		};
+	}
+	let n = e.enum ?? e.items?.enum;
+	if (Array.isArray(n)) {
+		let t = e.enumNames ?? e.items?.enumNames, r = /* @__PURE__ */ new Set(), i = [];
+		for (let [e, a] of n.entries()) {
+			if (typeof a != "string" || !a || r.has(a)) continue;
+			r.add(a);
+			let n = t?.[e];
+			i.push({
+				value: a,
+				label: typeof n == "string" && n ? n : a
+			});
+		}
+		return {
+			declared: !0,
+			options: i
+		};
+	}
+	return {
+		declared: !1,
+		options: []
+	};
+}, H = (e) => y(e), U = (e) => e.format !== void 0 || e.minLength !== void 0 || e.maxLength !== void 0 || e.pattern !== void 0, W = (e) => e.type === "string" && !V(e).declared && !U(e), le = (e) => {
+	if (e.type !== "object" || !e.properties) return [];
+	let t = e.properties, n = new Set(e.required ?? []), r = /* @__PURE__ */ new Set();
+	for (let e of Object.keys(t)) {
+		let n = H(e), i = V(B(t[e])), a = B(t[n]);
+		n in t && W(a) && i.options.some((e) => e.value === "__other__") && r.add(n);
+	}
+	let i = [];
+	for (let [e, a] of Object.entries(t)) {
+		if (r.has(e)) continue;
+		let o = B(a), s = V(o), c = s.options.some((e) => e.value === _), l = H(e);
+		if (c && !r.has(l)) continue;
+		let u = s.options.filter((e) => e.value !== _);
+		if (o.type === "number" || o.type === "integer" || o.type === "boolean" || o.type !== "string" && o.type !== "array" || s.declared && s.options.length === 0 || o.type === "array" && !s.declared || o.type === "string" && !s.declared && U(o)) continue;
+		let d = {
+			id: e,
+			type: o.type === "array" ? "multiple" : "single",
+			title: o.title || e,
+			options: u
+		};
+		if (o.description && (d.description = o.description), n.has(e) && (d.required = !0), o.type === "array" ? (o.minItems !== void 0 && (d.minSelected = o.minItems), o.maxItems !== void 0 && (d.maxSelected = o.maxItems), Array.isArray(o.default) && o.default.length > 0 && (d.default = o.default)) : typeof o.default == "string" && (d.default = o.default), c && l in t) {
+			let e = B(t[l]);
+			d.other = !e.title || { label: e.title };
+		}
+		i.push(d);
+	}
+	return i;
+};
+//#endregion
+//#region src/components/question-box/question-box-templates.ts
+function G(e) {
+	switch (e) {
+		case "s": return "xs";
+		case "m": return "s";
+		case "l": return "m";
+		default: return "l";
+	}
+}
+function K(e) {
+	switch (e) {
+		case "m": return "xs";
+		case "l": return "s";
+		case "xl":
+		case "xxl": return "m";
+		default: return "xxs";
+	}
+}
+function q(e) {
+	return e.step >= e.questions.length - 1;
+}
+function ue(e, t) {
+	let n = e.selectedValues(t);
+	return n.length === 0 ? "" : ae(n.map((n) => {
+		if (n === "__other__") return String(e.value[y(t.id)] ?? e.copy.other);
+		let r = t.options.find((e) => e.value === n);
+		return r ? oe(r, e.copy) : n;
+	}), e.language);
+}
+function de(e, t) {
+	let n = ue(e, t);
+	return a`<span class="summary-value">${e.copy.answer.split("{answer}").map((e, t) => a`${t > 0 ? a`<span class="summary-answer">${n}</span>` : o}${e}`)}</span>`;
+}
+function fe(e) {
+	let t = e.copy;
+	return a`
+    <div class="card resolved">
+      <div class="summary">
+        <h2 class="summary-heading" id="resolved-title" tabindex="-1">
+          ${e.questions.reduce((t, n) => t + e.selectedValues(n).length, 0) === 1 ? t.answerTitle : t.answersTitle}
+        </h2>
+        ${h(e.questions, (e) => e.id, (t) => a`
+            <div class="summary-row">
+              <span class="summary-title">${t.title}</span>
+              ${de(e, t)}
+            </div>
+          `)}
+      </div>
+      <div class="summary-actions">
+        ${!e.submitted || e.showChange ? a`
+                <luzmo-button
+                  id="change-button"
+                  dir=${e.dir}
+                  variant="primary"
+                  treatment=${e.submitted ? "fill" : "outline"}
+                  size=${e.size}
+                  ?disabled=${e.disabled}
+                  @click=${e.handlers.change}
+                  >${t.change}</luzmo-button
+                >
+              ` : o}
+        ${e.submitted ? o : a`
+                <luzmo-button
+                  id="review-submit-button"
+                  dir=${e.dir}
+                  variant="primary"
+                  size=${e.size}
+                  ?disabled=${e.disabled || e.readonly}
+                  @click=${e.handlers.primary}
+                  >${t.submit}</luzmo-button
+                >
+              `}
+      </div>
+    </div>
+  `;
+}
+function J(e, t, n) {
+	let r = e.optionIndicator === "letters" && n < 26 ? String.fromCharCode(65 + n) : String(n + 1);
+	return a`
+    <span
+      class=${t.description ? "option-content option-content--detailed" : "option-content"}
+    >
+      <span class="option-number" aria-hidden="true">${r}</span>
+      <span class="option-copy">
+        <span class="option-heading">
+          <span class="option-text">
+            <span class="option-label">${t.label}</span>
+            ${t.hint ? a`<span class="option-hint">${t.hint}</span>` : o}
+          </span>
+          ${t.recommended ? a`<luzmo-badge
+                  class="recommended-label"
+                  dir=${e.dir}
+                  variant="neutral"
+                  treatment="subtle"
+                  size=${G(e.size)}
+                  >${e.copy.recommended}</luzmo-badge
+                >` : o}
+        </span>
+        ${t.description ? a`<span class="option-description"
+                >${t.description}</span
+              >` : o}
+      </span>
+    </span>
+  `;
+}
+function Y(e, t) {
+	return e.disabledReason ? a`<span class="visually-hidden" id="option-reason-${t}"
+        >${e.disabledReason}</span
+      >` : o;
+}
+function pe(e, t) {
+	return t ? a`
+        <luzmo-help-text
+          id="question-error"
+          dir=${e.dir}
+          slot="negative-help-text"
+          >${t}</luzmo-help-text
+        >
+      ` : o;
+}
+function X(e, t) {
+	if (t.type !== "multiple") return o;
+	let n = e.showError ? e.questionError(t) : void 0;
+	return a`
+    <span class="selected-count" aria-live="polite"
+      >${n ? a`<luzmo-help-text
+              id="question-error"
+              class="status-error"
+              dir=${e.dir}
+              variant="negative"
+              >${n}</luzmo-help-text
+            >` : ie(e.selectedValues(t).length, e.copy)}</span
+    >
+  `;
+}
+function me(e, t) {
+	return a`
+    <div class="other-actions">
+      ${X(e, t)}
+      ${e.hideSkip ? o : a`
+              <luzmo-button
+                id="other-skip-button"
+                dir=${e.dir}
+                variant="primary"
+                size=${G(e.size)}
+                quiet
+                ?disabled=${e.disabled}
+                @click=${e.handlers.skip}
+                >${e.copy.skip}</luzmo-button
+              >
+            `}
+      <luzmo-button
+        id="other-primary-button"
+        dir=${e.dir}
+        class="other-primary"
+        variant="primary"
+        treatment="outline"
+        size=${G(e.size)}
+        ?disabled=${e.disabled || e.readonly || e.questionInvalid(t)}
+        @click=${e.handlers.primary}
+        >${q(e) ? e.copy.submit : e.copy.continue}</luzmo-button
+      >
+    </div>
+  `;
+}
+function he(e, t) {
+	return e.isOtherSelected(t) && String(e.value[y(t.id)] ?? "").trim().length > 0;
+}
+function Z(e, t) {
+	let n = x(t), r = y(t.id), i = e.isOtherSelected(t), o = e.optionDisabled(t, {
+		value: _,
+		label: n.label || e.copy.other
+	}, i), s = e.showError && i && !!e.questionError(t);
+	return a`
+    <luzmo-text-field
+      id="other-field"
+      dir=${e.dir}
+      class="other-field"
+      size=${e.size}
+      label=${n.label || e.copy.other}
+      placeholder=${n.placeholder || e.copy.otherPlaceholder}
+      border="none"
+      multiline
+      grows
+      rows="1"
+      .value=${String(e.value[r] ?? "")}
+      ?disabled=${o}
+      ?readonly=${e.readonly}
+      ?invalid=${s}
+      @keydown=${e.handlers.otherKeydown}
+      @input=${e.handlers.otherInput}
+      @change=${e.handlers.otherChange}
+    ></luzmo-text-field>
+  `;
+}
+function ge(e, t) {
+	let n = he(e, t);
+	return t.type === "multiple" || e.hideSkip && !n ? o : a`
+    <luzmo-button
+      id="other-row-action"
+      dir=${e.dir}
+      class="other-primary"
+      variant="primary"
+      treatment="outline"
+      size=${G(e.size)}
+      ?disabled=${n ? e.disabled || e.readonly || e.questionInvalid(t) : e.disabled}
+      @click=${n ? e.handlers.primary : e.handlers.skip}
+      >${n ? q(e) ? e.copy.submit : e.copy.continue : e.copy.skip}</luzmo-button
+    >
+  `;
+}
+function _e(e, t, n) {
+	let r = e.selectedValues(t)[0] ?? "", i = t.options.some((e) => e.description) ? "options options--descriptive" : "options";
+	return a`
+    <luzmo-radio-group
+      id="options"
+      dir=${e.dir}
+      class=${i}
+      vertical
+      label=${t.title}
+      manual-selection
+      aria-readonly=${m(e.readonly ? "true" : void 0)}
+      aria-required=${m(t.required ? "true" : void 0)}
+      .selected=${r}
+      ?invalid=${!!n}
+      @change=${e.handlers.radioChange}
+      @focusin=${e.handlers.focusIn}
+      @focusout=${e.handlers.focusOut}
+    >
+      ${h(t.options, (e) => e.value, (n, i) => a`
+          <luzmo-radio
+            class="numbered-option"
+            dir=${e.dir}
+            value=${n.value}
+            data-option-index=${i}
+            size=${e.size}
+            emphasized
+            ?disabled=${e.optionDisabled(t, n, n.value === r)}
+            ?readonly=${e.readonly}
+            aria-describedby=${m(n.disabledReason ? `option-reason-${i}` : void 0)}
+            @click=${e.handlers.radioClick}
+            @change=${e.handlers.radioChange}
+          >
+            ${J(e, n, i)}
+            ${Y(n, i)}
+          </luzmo-radio>
+        `)}
+      ${b(t) ? a`
+              <div class="other-option-row">
+                <div class="other-option-answer">
+                  <luzmo-radio
+                    class="numbered-option other-option"
+                    dir=${e.dir}
+                    value=${_}
+                    data-option-index=${t.options.length}
+                    size=${e.size}
+                    emphasized
+                    aria-label=${x(t).label || e.copy.other}
+                    ?disabled=${e.disabled}
+                    ?readonly=${e.readonly}
+                    @change=${e.handlers.radioChange}
+                  >
+                    <span class="option-number option-edit" aria-hidden="true">
+                      <luzmo-icon
+                        block
+                        dir=${e.dir}
+                        .size=${K(e.size)}
+                        .icon=${p}
+                      ></luzmo-icon>
+                    </span>
+                  </luzmo-radio>
+                  ${Z(e, t)}
+                </div>
+                ${ge(e, t)}
+              </div>
+            ` : o}
+      ${pe(e, n)}
+    </luzmo-radio-group>
+  `;
+}
+function Q(e, t, n) {
+	let r = new Set(e.selectedValues(t)), i = e.isOtherSelected(t), s = t.options.some((e) => e.description) ? "options options--descriptive" : "options", c = N(t, e.copy);
+	return a`
+    ${c ? a`<span class="visually-hidden" id="selection-requirement"
+            >${c}</span
+          >` : o}
+    <luzmo-field-group
+      id="options"
+      dir=${e.dir}
+      class=${s}
+      vertical
+      label=${t.title}
+      aria-describedby=${m(c ? "selection-requirement" : void 0)}
+      ?invalid=${!!n}
+      @focusin=${e.handlers.focusIn}
+      @focusout=${e.handlers.focusOut}
+    >
+      ${h(t.options, (e) => e.value, (n, i) => a`
+          <luzmo-checkbox
+            class="numbered-option"
+            dir=${e.dir}
+            data-value=${n.value}
+            data-option-index=${i}
+            size=${e.size}
+            emphasized
+            ?checked=${r.has(n.value)}
+            ?disabled=${e.optionDisabled(t, n, r.has(n.value))}
+            ?readonly=${e.readonly}
+            aria-describedby=${m(n.disabledReason ? `option-reason-${i}` : void 0)}
+            @change=${e.handlers.checkboxChange}
+          >
+            ${J(e, n, i)}
+            ${Y(n, i)}
+          </luzmo-checkbox>
+        `)}
+      ${b(t) ? a`
+              <div class="other-option-row other-option-row--multiple">
+                <div class="other-option-answer">
+                  <luzmo-checkbox
+                    class="numbered-option other-option"
+                    dir=${e.dir}
+                    data-value=${_}
+                    data-option-index=${t.options.length}
+                    size=${e.size}
+                    emphasized
+                    ?checked=${i}
+                    ?disabled=${e.optionDisabled(t, {
+		value: _,
+		label: e.copy.other
+	}, i)}
+                    ?readonly=${e.readonly}
+                    @change=${e.handlers.checkboxChange}
+                  >
+                    <span class="option-number option-edit" aria-hidden="true">
+                      <luzmo-icon
+                        block
+                        dir=${e.dir}
+                        .size=${K(e.size)}
+                        .icon=${p}
+                      ></luzmo-icon>
+                    </span>
+                    <span class="visually-hidden"
+                      >${x(t).label || e.copy.other}</span
+                    >
+                  </luzmo-checkbox>
+                  ${Z(e, t)}
+                </div>
+              </div>
+              ${me(e, t)}
+            ` : o}
+    </luzmo-field-group>
+  `;
+}
+function ve(e, t) {
+	let n = e.copy, r = k(n.progress, {
+		current: String(e.step + 1),
+		total: String(e.questions.length)
+	}), i = !e.questionInvalid(t);
+	return a`
+    <header class="header">
+      <div class="heading">
+        <h2 class="title" id="question-title" tabindex="-1">
+          ${t.title}
+        </h2>
+        ${t.description ? a`<p class="description" id="question-description">
+                ${t.description}
+              </p>` : o}
+      </div>
+      <div class="header-actions">
+        ${e.questions.length > 1 ? a`
+                <nav class="step-navigation" aria-label=${r}>
+                  <luzmo-action-button
+                    id="back-button"
+                    dir=${e.dir}
+                    quiet
+                    size=${G(e.size)}
+                    label=${n.back}
+                    ?disabled=${e.disabled || e.step === 0}
+                    @click=${e.handlers.back}
+                  >
+                    <div slot="icon">
+                      <luzmo-icon
+                        block
+                        dir=${e.dir}
+                        .size=${G(e.size)}
+                        .icon=${d}
+                      ></luzmo-icon>
+                    </div>
+                  </luzmo-action-button>
+                  <p class="progress" id="progress" aria-live="polite">
+                    ${r}
+                  </p>
+                  <luzmo-action-button
+                    id="continue-button"
+                    dir=${e.dir}
+                    quiet
+                    size=${G(e.size)}
+                    label=${n.continue}
+                    ?disabled=${e.disabled || e.readonly || q(e) || !i}
+                    @click=${e.handlers.primary}
+                  >
+                    <div slot="icon">
+                      <luzmo-icon
+                        block
+                        dir=${e.dir}
+                        .size=${G(e.size)}
+                        .icon=${f}
+                      ></luzmo-icon>
+                    </div>
+                  </luzmo-action-button>
+                </nav>
+              ` : o}
+        ${e.hideClose ? o : a`
+                <luzmo-close-button
+                  id="close-button"
+                  dir=${e.dir}
+                  class="close"
+                  label=${n.close}
+                  size=${e.size}
+                  ?disabled=${e.disabled}
+                  @click=${e.handlers.cancel}
+                ></luzmo-close-button>
+              `}
+      </div>
+    </header>
+  `;
+}
+function ye(e, t) {
+	let n = e.copy, r = !e.questionInvalid(t);
+	return a`
+    <footer class="footer">
+      <div class="status">${X(e, t)}</div>
+      <div class="actions">
+        ${e.hideSkip ? o : a`
+                <luzmo-button
+                  id="skip-button"
+                  dir=${e.dir}
+                  variant="primary"
+                  treatment="outline"
+                  size=${G(e.size)}
+                  ?disabled=${e.disabled}
+                  @click=${e.handlers.skip}
+                  >${n.skip}</luzmo-button
+                >
+              `}
+        ${q(e) && t.type === "multiple" ? a`
+                <luzmo-button
+                  id="submit-button"
+                  dir=${e.dir}
+                  variant="primary"
+                  treatment="outline"
+                  size=${G(e.size)}
+                  ?disabled=${e.disabled || e.readonly || !r}
+                  @click=${e.handlers.primary}
+                  >${n.submit}</luzmo-button
+                >
+              ` : o}
+      </div>
+    </footer>
+  `;
+}
+function be(e) {
+	if (e.questions.length === 0) return o;
+	if (e.resolved) return fe(e);
+	let t = e.questions[e.step];
+	if (!t) return o;
+	let n = e.showError ? e.questionError(t) : void 0, r = !b(t) && (t.type === "multiple" || !e.hideSkip), i = [
+		e.questions.length > 1 ? "progress" : "",
+		t.description ? "question-description" : "",
+		n ? "question-error" : ""
+	].filter(Boolean).join(" ") || void 0;
+	return a`
+    <div class="card" @click=${e.handlers.contentClick}>
+      ${ve(e, t)}
+      <div
+        class="body"
+        role="group"
+        aria-labelledby="question-title"
+        aria-describedby=${m(i)}
+      >
+        ${t.type === "single" ? _e(e, t, n) : Q(e, t, n)}
+      </div>
+      ${r ? ye(e, t) : o}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/question-box/question-box.ts
+var $ = class extends n(e, { validSizes: [
+	"s",
+	"m",
+	"l",
+	"xl"
+] }) {
+	constructor(...e) {
+		super(...e), this.questions = [], this.value = {}, this.labels = {}, this.dir = "ltr", this.disabled = !1, this.readonly = !1, this.hideClose = !1, this.hideSkip = !1, this.showChange = !1, this._optionIndicator = "numbers", this._step = 0, this._resolved = !1, this._submitted = !1, this._showError = !1, this.languageResolver = new i(this), this._radioChangeAdvanced = !1, this.multipleChoiceRoving = new r(this, {
+			direction: "vertical",
+			elements: () => [...this.shadowRoot?.querySelectorAll("luzmo-field-group#options luzmo-checkbox[data-option-index]") ?? []],
+			focusInIndex: (e) => {
+				let t = e.findIndex((e) => e.checked && !e.disabled);
+				return t === -1 ? e.findIndex((e) => !e.disabled) : t;
+			},
+			isFocusableElement: (e) => !e.disabled,
+			listenerScope: () => this.shadowRoot?.querySelector("luzmo-field-group#options")
+		}), this.handleKeydown = (e) => {
+			if (this.disabled) return;
+			let t = e.composedPath(), n = this.shadowRoot?.activeElement;
+			if (e.key !== "Escape" && this.otherField && (t.includes(this.otherField) || n === this.otherField)) return;
+			let r = this.focusedOptionForEvent(e), i = this.currentQuestion;
+			if (i?.type === "multiple" && r && this.multipleChoiceRoving.acceptsEventCode(e.code) && !e.defaultPrevented) {
+				let t = this.multipleChoiceRoving.elements.indexOf(r);
+				t !== -1 && (this.multipleChoiceRoving.currentIndex = t), this.multipleChoiceRoving.hostContainsFocus(), this.multipleChoiceRoving.handleKeydown(e);
+				return;
+			}
+			if (!this.readonly && e.code === "Space" && r && !r.hasAttribute("disabled")) {
+				e.preventDefault();
+				return;
+			}
+			let a = this.optionIndicator === "letters" && /^[a-z]$/i.test(e.key) ? e.key.toUpperCase().charCodeAt(0) - 65 : this.optionIndicator === "numbers" && /^[1-9]$/.test(e.key) ? Number(e.key) - 1 : -1, o = !this.readonly && r && !e.altKey && !e.ctrlKey && !e.metaKey && a >= 0 ? this.shadowRoot?.querySelector(`[data-option-index="${a}"]:not([disabled])`) : void 0;
+			if (o) {
+				e.preventDefault();
+				let t = o.getAttribute("value") ?? o.dataset.value;
+				if (i?.type === "single" && t !== "__other__" && this.selectedValues(i)[0] === t) {
+					this.advanceAfterSingleSelection();
+					return;
+				}
+				o.click();
+				return;
+			}
+			e.key === "Escape" && (e.preventDefault(), !this.disabled && this.cancel());
+		}, this.handleKeyup = (e) => {
+			if (this.disabled || this.readonly || e.code !== "Space") return;
+			let t = this.focusedOptionForEvent(e);
+			!t || t.hasAttribute("disabled") || (e.preventDefault(), t.click());
+		}, this.handleFocusIn = (e) => {
+			let t = this.focusedOptionForEvent(e);
+			this.markKeyboardFocus(t && this.optionShowsKeyboardFocus(t) ? t : void 0);
+		}, this.handleContentClick = (e) => {
+			this.disabled || e.composedPath().some((e) => e instanceof Element && e.matches("a[href], button, input, select, textarea, [contenteditable=\"true\"], [data-option-index], #other-field, luzmo-action-button, luzmo-button, luzmo-close-button")) || this.focusOptions();
+		}, this.handleFocusOut = () => {
+			requestAnimationFrame(() => {
+				let e = this.shadowRoot?.activeElement;
+				(!(e instanceof HTMLElement) || e.dataset.optionIndex === void 0) && this.markKeyboardFocus();
+			});
+		}, this.handleCancelClick = (e) => {
+			e.preventDefault(), this.cancel();
+		}, this.handleSkip = (e) => {
+			e.preventDefault(), !this.disabled && this.emitResult("decline");
+		}, this.handleBack = (e) => {
+			e.preventDefault(), !(this.disabled || this._step === 0) && (this._showError = !1, --this._step, this.updateComplete.then(() => this.moveFocus(this.questionTitle)));
+		}, this.handlePrimary = () => {
+			let e = this.currentQuestion;
+			if (!(!e || this.disabled || this.readonly)) {
+				if (this.questionInvalid(e)) {
+					this._showError = !0, this.focusOptions();
+					return;
+				}
+				if (this._showError = !1, this._step < this.questions.length - 1) {
+					this._step += 1, this.updateComplete.then(() => this.moveFocus(this.questionTitle));
+					return;
+				}
+				this.acceptFlow();
+			}
+		}, this.handleChange = () => {
+			this._resolved = !1, this._submitted = !1, this._showError = !1, this.updateComplete.then(() => this.focusOptions());
+		}, this.handleRadioChange = (e) => {
+			if (e.stopPropagation(), this.disabled || this.readonly) return;
+			let t = this.currentQuestion;
+			if (!t) return;
+			let n = e.target.value || e.currentTarget.selected;
+			if (n) {
+				if (n === "__other__" && !String(this.value[y(t.id)] ?? "").trim()) {
+					this.requestUpdate(), this.updateComplete.then(() => this.moveFocus(this.otherField));
+					return;
+				}
+				this.commitAnswer(t.id, n, !0), n !== "__other__" && (this._radioChangeAdvanced = !0, this.advanceAfterSingleSelection(), queueMicrotask(() => {
+					this._radioChangeAdvanced = !1;
+				}));
+			}
+		}, this.handleRadioClick = (e) => {
+			if (this._radioChangeAdvanced || this.disabled || this.readonly) return;
+			let t = this.currentQuestion, n = e.currentTarget;
+			t?.type === "single" && n.value !== "__other__" && this.selectedValues(t)[0] === n.value && this.advanceAfterSingleSelection();
+		}, this.handleCheckboxChange = (e) => {
+			if (e.stopPropagation(), this.disabled || this.readonly) return;
+			let t = this.currentQuestion;
+			if (!t) return;
+			let n = e.currentTarget, r = n.dataset.value;
+			if (!r) return;
+			let i = new Set(this.selectedValues(t));
+			if (r === "__other__" && n.checked && !String(this.value[y(t.id)] ?? "").trim()) {
+				n.checked = !1, this.moveFocus(this.otherField);
+				return;
+			}
+			n.checked ? i.add(r) : i.delete(r);
+			let a = [...t.options.map((e) => e.value), ...b(t) ? [_] : []].filter((e) => i.has(e));
+			this.commitAnswer(t.id, T(a), !0), r === "__other__" && n.checked && this.updateComplete.then(() => this.moveFocus(this.otherField));
+		}, this.handleOtherInput = (e) => {
+			if (e.stopPropagation(), this.disabled || this.readonly) return;
+			let t = this.currentQuestion;
+			if (!t) return;
+			let n = e.currentTarget;
+			this.commitOther(t, n.value, !1);
+		}, this.handleOtherChange = (e) => {
+			if (e.stopPropagation(), this.disabled || this.readonly) return;
+			let t = this.currentQuestion;
+			if (!t) return;
+			let n = e.currentTarget;
+			this.commitOther(t, n.value, !0);
+		}, this.handleOtherKeydown = (e) => {
+			if (e.key !== "Enter" || e.shiftKey || e.isComposing || this.disabled || this.readonly) return;
+			e.preventDefault();
+			let t = this.currentQuestion;
+			t && String(this.value[y(t.id)] ?? "").trim() && this.handlePrimary();
+		};
+	}
+	static get styles() {
+		let e = super.styles;
+		return [...Array.isArray(e) ? e : e ? [e] : [], s(g)];
+	}
+	get optionIndicator() {
+		return this._optionIndicator;
+	}
+	set optionIndicator(e) {
+		let t = this._optionIndicator;
+		this._optionIndicator = e === "letters" ? "letters" : "numbers", this.requestUpdate("optionIndicator", t);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("focusin", this.handleFocusIn);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "option-indicator" && n !== null && n !== "numbers" && n !== "letters") {
+			this.setAttribute("option-indicator", "numbers");
+			return;
+		}
+		super.attributeChangedCallback(e, t, n);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("keyup", this.handleKeyup), this.removeEventListener("focusin", this.handleFocusIn), super.disconnectedCallback();
+	}
+	focus() {
+		if (this._resolved) {
+			this.moveFocus(this.resolvedTitle);
+			return;
+		}
+		this.focusOptions();
+	}
+	checkValidity() {
+		return this.questions.every((e) => !this.questionInvalid(e));
+	}
+	submit() {
+		this.disabled || this.readonly || this._submitted || this.acceptFlow();
+	}
+	reset() {
+		this._resolved = !1, this._submitted = !1, this._showError = !1, this._step = 0, this.value = {};
+	}
+	cancel() {
+		this.emitResult("cancel");
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("questions") || e.has("value")) {
+			if (e.has("questions")) {
+				A(this.questions);
+				let t = (e.get("questions") ?? []).map((e) => e.id), n = this.questions.map((e) => e.id);
+				t.join("\0") !== n.join("\0") && (this._step = 0, this._resolved = !1, this._submitted = !1, this._showError = !1);
+			}
+			let t = j(this.questions, this.value);
+			w(t, this.value) || (this.value = t);
+		}
+		e.has("questions") && (this._step = Math.min(this._step, Math.max(0, this.questions.length - 1)));
+	}
+	updated(e) {
+		super.updated(e), (e.has("questions") || e.has("size") || e.has("disabled") || e.has("readonly") || e.has("_step") || e.has("_resolved")) && this.multipleChoiceRoving.clearElementCache();
+	}
+	render() {
+		return be(this.renderContext);
+	}
+	get renderContext() {
+		return {
+			questions: this.questions,
+			value: this.value,
+			copy: this.copy,
+			step: this._step,
+			resolved: this._resolved,
+			submitted: this._submitted,
+			showError: this._showError,
+			disabled: this.disabled,
+			readonly: this.readonly,
+			hideClose: this.hideClose,
+			hideSkip: this.hideSkip,
+			showChange: this.showChange,
+			optionIndicator: this.optionIndicator,
+			size: this.size,
+			dir: this.dir,
+			language: this.languageResolver.language,
+			selectedValues: (e) => this.selectedValues(e),
+			isOtherSelected: (e) => this.isOtherSelected(e),
+			questionError: (e) => this.questionError(e),
+			questionInvalid: (e) => this.questionInvalid(e),
+			optionDisabled: (e, t, n) => this.optionDisabled(e, t, n),
+			handlers: this.renderHandlers
+		};
+	}
+	get renderHandlers() {
+		return {
+			contentClick: this.handleContentClick,
+			back: this.handleBack,
+			primary: this.handlePrimary,
+			skip: this.handleSkip,
+			cancel: this.handleCancelClick,
+			change: this.handleChange,
+			radioChange: this.handleRadioChange,
+			radioClick: this.handleRadioClick,
+			checkboxChange: this.handleCheckboxChange,
+			otherInput: this.handleOtherInput,
+			otherChange: this.handleOtherChange,
+			otherKeydown: this.handleOtherKeydown,
+			focusIn: this.handleFocusIn,
+			focusOut: this.handleFocusOut
+		};
+	}
+	get copy() {
+		return ee(this.labels);
+	}
+	get currentQuestion() {
+		return this.questions[this._step];
+	}
+	optionShowsKeyboardFocus(e) {
+		let t = (e) => {
+			if (!e) return !1;
+			try {
+				return e.matches(":focus-visible") || e.matches(".focus-visible");
+			} catch {
+				return e.matches(".focus-visible");
+			}
+		};
+		return t(e) || t(e.shadowRoot?.activeElement) || this.hasVisibleFocusInTree();
+	}
+	markKeyboardFocus(e) {
+		this.shadowRoot?.querySelectorAll("[data-focus-visible]").forEach((e) => delete e.dataset.focusVisible), this.shadowRoot?.querySelectorAll(".option-number--focused").forEach((e) => e.classList.remove("option-number--focused")), e && (e.dataset.focusVisible = "", e.querySelector(".option-number")?.classList.add("option-number--focused"));
+	}
+	focusedOptionForEvent(e) {
+		let t = e.composedPath().find((e) => e instanceof HTMLElement && e.dataset.optionIndex !== void 0);
+		if (t) return t;
+		let n = this.shadowRoot?.activeElement;
+		return n instanceof HTMLElement && n.dataset.optionIndex !== void 0 ? n : void 0;
+	}
+	moveFocus(e) {
+		if (e) try {
+			e.focus();
+		} catch {
+			try {
+				HTMLElement.prototype.focus.call(e);
+			} catch {
+				return;
+			}
+		}
+	}
+	focusOptions() {
+		let e = this.optionsGroup;
+		if (!e) {
+			this.moveFocus(this.questionTitle);
+			return;
+		}
+		let t = this.currentQuestion, n = t?.type === "single" ? this.selectedValues(t)[0] : void 0, r = n ? e.querySelector(`luzmo-radio[value="${CSS.escape(n)}"]:not([disabled])`) : void 0, i = e.querySelector("[data-option-index]:not([disabled])");
+		this.moveFocus(r ?? i ?? e);
+	}
+	advanceAfterSingleSelection() {
+		if (this._step < this.questions.length - 1) {
+			this._step += 1, this.updateComplete.then(() => this.moveFocus(this.questionTitle));
+			return;
+		}
+		this._resolved = !0, this._submitted = !1, this.updateComplete.then(() => this.focus());
+	}
+	acceptFlow() {
+		let e = this.questions.findIndex((e) => this.questionInvalid(e));
+		if (e !== -1) {
+			this._step = e, this._showError = !0, this.updateComplete.then(() => this.focusOptions());
+			return;
+		}
+		this._showError = !1, this._resolved = !0, this._submitted = !0, this.emitResult("accept", R(this.questions, this.value)), this.updateComplete.then(() => this.focus());
+	}
+	commitAnswer(e, t, n) {
+		let r = S(this.value);
+		C(r, e, t), this.assignValue(r, n);
+	}
+	commitOther(e, t, n) {
+		let r = S(this.value);
+		C(r, y(e.id), t);
+		let i = t.trim().length > 0;
+		if (e.type === "single") i ? C(r, e.id, _) : r[e.id] === "__other__" && C(r, e.id, "");
+		else {
+			let t = new Set(this.selectedValues(e));
+			i ? t.add(_) : t.delete(_), C(r, e.id, [...e.options.map((e) => e.value), _].filter((e) => t.has(e)));
+		}
+		this.assignValue(r, n);
+	}
+	assignValue(e, t) {
+		w(e, this.value) || (this.value = e, this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}))), t && this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	emitResult(e, t) {
+		let n = e === "accept" ? {
+			action: e,
+			content: t
+		} : { action: e };
+		if (e === "accept") {
+			this.dispatchEvent(new CustomEvent("luzmo-submit", {
+				detail: n,
+				bubbles: !0,
+				composed: !0
+			}));
+			return;
+		}
+		if (e === "decline") {
+			this.dispatchEvent(new CustomEvent("luzmo-decline", {
+				detail: n,
+				bubbles: !0,
+				composed: !0
+			}));
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("luzmo-cancel", {
+			detail: n,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	selectedValues(e) {
+		return D(e, this.value);
+	}
+	isOtherSelected(e) {
+		return O(e, this.value);
+	}
+	questionError(e) {
+		return ne(e, this.value, this.copy);
+	}
+	questionInvalid(e) {
+		return te(e, this.value);
+	}
+	optionDisabled(e, t, n) {
+		return re(e, t, n, this.value, this.disabled);
+	}
+};
+//#endregion
+//#region src/components/question-box/index.ts
+t([c({ attribute: !1 })], $.prototype, "questions", void 0), t([c({ attribute: !1 })], $.prototype, "value", void 0), t([c({ attribute: !1 })], $.prototype, "labels", void 0), t([c({ reflect: !0 })], $.prototype, "dir", void 0), t([c({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "disabled", void 0), t([c({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "readonly", void 0), t([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-close"
+})], $.prototype, "hideClose", void 0), t([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-skip"
+})], $.prototype, "hideSkip", void 0), t([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "show-change"
+})], $.prototype, "showChange", void 0), t([c({
+	reflect: !0,
+	attribute: "option-indicator"
+})], $.prototype, "optionIndicator", null), t([u()], $.prototype, "_step", void 0), t([u()], $.prototype, "_resolved", void 0), t([u()], $.prototype, "_submitted", void 0), t([u()], $.prototype, "_showError", void 0), t([l("#question-title")], $.prototype, "questionTitle", void 0), t([l("#other-field")], $.prototype, "otherField", void 0), t([l("#options")], $.prototype, "optionsGroup", void 0), t([l("#resolved-title")], $.prototype, "resolvedTitle", void 0), typeof customElements < "u" && !customElements.get("luzmo-question-box") && customElements.define("luzmo-question-box", $);
+//#endregion
+export { v as a, R as i, I as n, _ as o, le as r, y as s, $ as t };