@pie-element/mc-populated-blank 0.1.0 → 0.2.1

package/dist/delivery/index.js

@@ -122,14 +122,6 @@ var STALE_REACTION = new class StaleReactionError extends Error {
 	}
 }();
 var IS_XHTML = !!globalThis.document?.contentType && /* @__PURE__ */ globalThis.document.contentType.includes("xml");
-/**
-* `%name%(...)` can only be used during component initialisation
-* @param {string} name
-* @returns {never}
-*/
-function lifecycle_outside_component(name) {
-	throw new Error(`https://svelte.dev/e/lifecycle_outside_component`);
-}
 //#endregion
 //#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/internal/client/errors.js
 /**
@@ -187,6 +179,14 @@ function hydration_failed() {
 	throw new Error(`https://svelte.dev/e/hydration_failed`);
 }
 /**
+* Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+* @param {string} key
+* @returns {never}
+*/
+function props_invalid_value(key) {
+	throw new Error(`https://svelte.dev/e/props_invalid_value`);
+}
+/**
 * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
 * @returns {never}
 */
@@ -495,6 +495,29 @@ function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
 * schedule effects if the update takes place inside a `$:` effect
 */
 var legacy_is_updating_store = false;
+/**
+* Whether or not the prop currently being read is a store binding, as in
+* `<Child bind:x={$y} />`. If it is, we treat the prop as mutable even in
+* runes mode, and skip `binding_property_non_reactive` validation
+*/
+var is_store_binding = false;
+/**
+* Returns a tuple that indicates whether `fn()` reads a prop that is a store binding.
+* Used to prevent `binding_property_non_reactive` validation false positives and
+* ensure that these props are treated as mutable even in runes mode
+* @template T
+* @param {() => T} fn
+* @returns {[T, boolean]}
+*/
+function capture_store_binding(fn) {
+	var previous_is_store_binding = is_store_binding;
+	try {
+		is_store_binding = false;
+		return [fn(), is_store_binding];
+	} finally {
+		is_store_binding = previous_is_store_binding;
+	}
+}
 //#endregion
 //#region \0@oxc-project+runtime@0.120.0/helpers/checkPrivateRedeclaration.js
 function _checkPrivateRedeclaration(e, t) {
@@ -3078,63 +3101,6 @@ var event_symbol = Symbol("events");
 var all_registered_events = /* @__PURE__ */ new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = /* @__PURE__ */ new Set();
-/**
-* @param {string} event_name
-* @param {EventTarget} dom
-* @param {EventListener} [handler]
-* @param {AddEventListenerOptions} [options]
-*/
-function create_event(event_name, dom, handler, options = {}) {
-	/**
-	* @this {EventTarget}
-	*/
-	function target_handler(event) {
-		if (!options.capture) handle_event_propagation.call(dom, event);
-		if (!event.cancelBubble) return without_reactive_context(() => {
-			return handler?.call(this, event);
-		});
-	}
-	if (event_name.startsWith("pointer") || event_name.startsWith("touch") || event_name === "wheel") queue_micro_task(() => {
-		dom.addEventListener(event_name, target_handler, options);
-	});
-	else dom.addEventListener(event_name, target_handler, options);
-	return target_handler;
-}
-/**
-* @param {string} event_name
-* @param {Element} dom
-* @param {EventListener} [handler]
-* @param {boolean} [capture]
-* @param {boolean} [passive]
-* @returns {void}
-*/
-function event(event_name, dom, handler, capture, passive) {
-	var options = {
-		capture,
-		passive
-	};
-	var target_handler = create_event(event_name, dom, handler, options);
-	if (dom === document.body || dom === window || dom === document || dom instanceof HTMLMediaElement) teardown(() => {
-		dom.removeEventListener(event_name, target_handler, options);
-	});
-}
-/**
-* @param {string} event_name
-* @param {Element} element
-* @param {EventListener} [handler]
-* @returns {void}
-*/
-function delegated(event_name, element, handler) {
-	(element[event_symbol] ?? (element[event_symbol] = {}))[event_name] = handler;
-}
-/**
-* @param {Array<string>} events
-* @returns {void}
-*/
-function delegate(events) {
-	for (var i = 0; i < events.length; i++) all_registered_events.add(events[i]);
-	for (var fn of root_event_handles) fn(events);
-}
 var last_propagated_event = null;
 /**
 * @this {EventTarget}
@@ -3632,53 +3598,6 @@ var BranchManager = class {
 		}
 	}
 };
-/**
-* `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
-* Unlike `$effect`, the provided function only runs once.
-*
-* It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
-* it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
-* it will be called when the component is unmounted.
-*
-* `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).
-*
-* @template T
-* @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
-* @returns {void}
-*/
-function onMount(fn) {
-	if (component_context === null) lifecycle_outside_component("onMount");
-	if (legacy_mode_flag && component_context.l !== null) init_update_callbacks(component_context).m.push(fn);
-	else user_effect(() => {
-		const cleanup = untrack(fn);
-		if (typeof cleanup === "function") return cleanup;
-	});
-}
-/**
-* Schedules a callback to run immediately before the component is unmounted.
-*
-* Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
-* only one that runs inside a server-side component.
-*
-* @param {() => any} fn
-* @returns {void}
-*/
-function onDestroy(fn) {
-	if (component_context === null) lifecycle_outside_component("onDestroy");
-	onMount(() => () => untrack(fn));
-}
-/**
-* Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
-* @param {ComponentContext} context
-*/
-function init_update_callbacks(context) {
-	var l = context.l;
-	return l.u ?? (l.u = {
-		a: [],
-		b: [],
-		m: []
-	});
-}
 //#endregion
 //#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/internal/client/dom/blocks/if.js
 /** @import { TemplateNode } from '#client' */
@@ -4589,6 +4508,94 @@ function bind_this(element_or_component = {}, update, get_value, get_parts) {
 	return element_or_component;
 }
 //#endregion
+//#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/internal/client/reactivity/props.js
+/** @import { Effect, Source } from './types.js' */
+/**
+* This function is responsible for synchronizing a possibly bound prop with the inner component state.
+* It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
+* @template V
+* @param {Record<string, unknown>} props
+* @param {string} key
+* @param {number} flags
+* @param {V | (() => V)} [fallback]
+* @returns {(() => V | ((arg: V) => V) | ((arg: V, mutation: boolean) => V))}
+*/
+function prop(props, key, flags, fallback) {
+	var runes = !legacy_mode_flag || (flags & 2) !== 0;
+	var bindable = (flags & 8) !== 0;
+	var lazy = (flags & 16) !== 0;
+	var fallback_value = fallback;
+	var fallback_dirty = true;
+	var get_fallback = () => {
+		if (fallback_dirty) {
+			fallback_dirty = false;
+			fallback_value = lazy ? untrack(fallback) : fallback;
+		}
+		return fallback_value;
+	};
+	/** @type {((v: V) => void) | undefined} */
+	let setter;
+	if (bindable) {
+		var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+		setter = get_descriptor(props, key)?.set ?? (is_entry_props && key in props ? (v) => props[key] = v : void 0);
+	}
+	/** @type {V} */
+	var initial_value;
+	var is_store_sub = false;
+	if (bindable) [initial_value, is_store_sub] = capture_store_binding(() => props[key]);
+	else initial_value = props[key];
+	if (initial_value === void 0 && fallback !== void 0) {
+		initial_value = get_fallback();
+		if (setter) {
+			if (runes) props_invalid_value(key);
+			setter(initial_value);
+		}
+	}
+	/** @type {() => V} */
+	var getter;
+	if (runes) getter = () => {
+		var value = props[key];
+		if (value === void 0) return get_fallback();
+		fallback_dirty = true;
+		return value;
+	};
+	else getter = () => {
+		var value = props[key];
+		if (value !== void 0) fallback_value = void 0;
+		return value === void 0 ? fallback_value : value;
+	};
+	if (runes && (flags & 4) === 0) return getter;
+	if (setter) {
+		var legacy_parent = props.$$legacy;
+		return (function(value, mutation) {
+			if (arguments.length > 0) {
+				if (!runes || !mutation || legacy_parent || is_store_sub)
+ /** @type {Function} */ setter(mutation ? getter() : value);
+				return value;
+			}
+			return getter();
+		});
+	}
+	var overridden = false;
+	var d = ((flags & 1) !== 0 ? derived : derived_safe_equal)(() => {
+		overridden = false;
+		return getter();
+	});
+	if (bindable) get(d);
+	var parent_effect = active_effect;
+	return (function(value, mutation) {
+		if (arguments.length > 0) {
+			const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
+			set(d, new_value);
+			overridden = true;
+			if (fallback_value !== void 0) fallback_value = new_value;
+			return value;
+		}
+		if (is_destroying_effect && overridden || (parent_effect.f & 16384) !== 0) return d.v;
+		return get(d);
+	});
+}
+//#endregion
 //#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/legacy/legacy-client.js
 /** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
 /**
@@ -4993,73 +5000,204 @@ function create_custom_element(Component, props_definition, slots, exports, shad
 }
 //#endregion
 //#region src/delivery/McPopulatedBlank.svelte
-var root_1 = /* @__PURE__ */ from_html(`<div class="mb-4 prose"></div>`);
-var root_3 = /* @__PURE__ */ from_html(`<audio class="sr-only svelte-6wlbb4" preload="metadata" aria-hidden="true" tabindex="-1"></audio> <button class="listen-button rli-feature-audio svelte-6wlbb4" type="button"><img alt="" aria-hidden="true"/> <img alt="" aria-hidden="true"/></button>`, 1);
-var root_5 = /* @__PURE__ */ from_html(`<button class="mt-2 text-sm underline" type="button"> </button>`);
-var root_4 = /* @__PURE__ */ from_html(`<audio controls="" class="w-full max-w-md" preload="metadata"><track kind="captions"/></audio> <!>`, 1);
-var root_6 = /* @__PURE__ */ from_html(`<button class="listen-button rli-feature-audio svelte-6wlbb4" type="button"><img alt="" aria-hidden="true"/> <img alt="" aria-hidden="true"/></button>`);
-var root_7 = /* @__PURE__ */ from_html(`<p> </p>`);
-var root_2 = /* @__PURE__ */ from_html(`<div class="mb-4 audio-container svelte-6wlbb4"><!> <!></div>`);
-var root_8 = /* @__PURE__ */ from_html(`<div class="mb-4 teacher-instructions svelte-6wlbb4"><h4 class="teacher-instructions-title svelte-6wlbb4"> </h4> <div class="prose teacher-instructions-content"></div></div>`);
-var root_9 = /* @__PURE__ */ from_html(`<div class="mb-3 prose prose-p:my-1 sentence-line svelte-6wlbb4"></div>`);
-var root_11 = /* @__PURE__ */ from_html(`<img class="max-h-16 w-auto object-contain"/>`);
-var root_12 = /* @__PURE__ */ from_html(`<span class="blank-inner choice-label svelte-6wlbb4"></span>`);
-var root_13 = /* @__PURE__ */ from_html(`<span class="blank-inner-empty svelte-6wlbb4" aria-hidden="true">&nbsp;</span>`);
-var root_10 = /* @__PURE__ */ from_html(`<div class="mb-4 template-line svelte-6wlbb4"><!> <span role="status" aria-live="polite" aria-atomic="true"><!></span> <!></div>`);
-var root_14 = /* @__PURE__ */ from_html(`<button type="button" class="mb-3 flex items-center gap-2 cursor-pointer select-none"><span class="text-sm hover:underline"> </span></button>`);
-var root_15 = /* @__PURE__ */ from_html(`<p class="sr-only svelte-6wlbb4" role="status" aria-live="polite"> </p>`);
-var root_18 = /* @__PURE__ */ from_html(`<img class="max-h-20 object-contain mx-auto"/>`);
-var root_19 = /* @__PURE__ */ from_html(`<span class="choice-label svelte-6wlbb4"></span>`);
-var root_17 = /* @__PURE__ */ from_html(`<label class="cursor-pointer choice-tile text-center svelte-6wlbb4"><span class="choice-tile-content svelte-6wlbb4"><!></span> <input type="radio" class="choice-radio-bottom svelte-6wlbb4"/></label>`);
-var root_21 = /* @__PURE__ */ from_html(`<img class="max-h-20 object-contain"/>`);
-var root_22 = /* @__PURE__ */ from_html(`<span class="choice-label svelte-6wlbb4"></span>`);
-var root_20 = /* @__PURE__ */ from_html(`<input type="radio" class="mt-1"/> <label class="cursor-pointer flex-1"><!></label>`, 1);
-var root_24 = /* @__PURE__ */ from_html(`<span class="text-green-600 text-sm font-medium" aria-hidden="true">✓</span>`);
-var root_25 = /* @__PURE__ */ from_html(`<span class="text-red-600 text-sm font-medium" aria-hidden="true">✗</span>`);
-var root_16 = /* @__PURE__ */ from_html(`<div><!> <!></div>`);
-var root = /* @__PURE__ */ from_html(`<div><!> <!> <!> <!> <!> <!> <!> <fieldset class="border-0 p-0 m-0 svelte-6wlbb4"><legend class="sr-only svelte-6wlbb4"> </legend> <div role="radiogroup" tabindex="-1"></div></fieldset></div>`);
+var root_1 = /* @__PURE__ */ from_html(`<div class="mb-4 prose pie-prompt"></div>`);
+var root_3 = /* @__PURE__ */ from_html(`<audio class="sr-only pie-audio-player svelte-6wlbb4" preload="metadata" aria-hidden="true" tabindex="-1"></audio> <button class="listen-button pie-listen-button rli-feature-audio svelte-6wlbb4" type="button"><img alt="" aria-hidden="true"/> <img alt="" aria-hidden="true"/></button>`, 1);
+var root_5 = /* @__PURE__ */ from_html(`<button class="mt-2 text-sm underline pie-audio-autoplay-enable" type="button"> </button>`);
+var root_4 = /* @__PURE__ */ from_html(`<audio controls="" class="w-full max-w-md pie-audio-player" preload="metadata"><track kind="captions"/></audio> <!>`, 1);
+var root_6 = /* @__PURE__ */ from_html(`<p class="text-sm text-red-700 pie-audio-error" role="alert"> </p>`);
+var root_7 = /* @__PURE__ */ from_html(`<p><strong> </strong> </p>`);
+var root_2 = /* @__PURE__ */ from_html(`<div class="mb-4 audio-container pie-audio-container svelte-6wlbb4"><!> <!></div>`);
+var root_8 = /* @__PURE__ */ from_html(`<div class="mb-3 prose prose-p:my-1 sentence-line pie-sentence-line svelte-6wlbb4"></div>`);
+var root_10 = /* @__PURE__ */ from_html(`<img class="w-auto object-contain pie-blank-image" style="max-height:var(--mpb-selected-image-max-height, 4rem);"/>`);
+var root_11 = /* @__PURE__ */ from_html(`<span class="blank-inner choice-label pie-blank-value svelte-6wlbb4"></span>`);
+var root_12 = /* @__PURE__ */ from_html(`<span class="blank-inner-empty svelte-6wlbb4" aria-hidden="true">&nbsp;</span>`);
+var root_9 = /* @__PURE__ */ from_html(`<div class="mb-4 template-line pie-template-line svelte-6wlbb4"><!> <span role="status" aria-live="polite" aria-atomic="true"><!></span> <!></div>`);
+var root_13 = /* @__PURE__ */ from_html(`<button type="button" class="mb-3 flex items-center cursor-pointer select-none pie-toggle-correct-answer" style="gap:var(--mpb-toggle-button-gap, 0.5rem);"><span class="text-sm hover:underline"> </span></button>`);
+var root_14 = /* @__PURE__ */ from_html(`<p class="sr-only pie-result-feedback svelte-6wlbb4" role="status" aria-live="polite"> </p>`);
+var root_17 = /* @__PURE__ */ from_html(`<img class="object-contain mx-auto pie-choice-image" style="max-height:var(--mpb-choice-image-max-height, 5rem);"/>`);
+var root_18 = /* @__PURE__ */ from_html(`<span class="choice-label pie-choice-label svelte-6wlbb4"></span>`);
+var root_16 = /* @__PURE__ */ from_html(`<label class="cursor-pointer choice-tile text-center pie-choice-tile svelte-6wlbb4"><span class="choice-tile-content pie-choice-tile-content svelte-6wlbb4"><!></span> <input type="radio" class="choice-radio-bottom pie-choice-radio pie-choice-radio-bottom svelte-6wlbb4"/></label>`);
+var root_20 = /* @__PURE__ */ from_html(`<img class="object-contain pie-choice-image" style="max-height:var(--mpb-choice-image-max-height, 5rem);"/>`);
+var root_21 = /* @__PURE__ */ from_html(`<span class="choice-label pie-choice-label svelte-6wlbb4"></span>`);
+var root_19 = /* @__PURE__ */ from_html(`<input type="radio" class="choice-radio-inline pie-choice-radio pie-choice-radio-inline svelte-6wlbb4"/> <label class="cursor-pointer flex-1 pie-choice-label-wrap"><!></label>`, 1);
+var root_23 = /* @__PURE__ */ from_html(`<span class="text-green-600 text-sm font-medium pie-choice-feedback-correct" aria-hidden="true">✓</span>`);
+var root_24 = /* @__PURE__ */ from_html(`<span class="text-red-600 text-sm font-medium pie-choice-feedback-incorrect" aria-hidden="true">✗</span>`);
+var root_15 = /* @__PURE__ */ from_html(`<div style="gap:var(--mpb-choice-row-gap, 0.5rem);"><!> <!></div>`);
+var root = /* @__PURE__ */ from_html(`<div><!> <!> <!> <!> <!> <!> <fieldset class="border-0 p-0 m-0 pie-choices-fieldset svelte-6wlbb4"><legend class="sr-only pie-choices-legend svelte-6wlbb4"> </legend> <div style="gap:var(--mpb-choice-group-gap, 0.5rem);" role="radiogroup" tabindex="-1"></div></fieldset></div>`);
 var $$css = {
 	hash: "svelte-6wlbb4",
-	code: ".sr-only.svelte-6wlbb4 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.mc-populated-blank-root.svelte-6wlbb4 .prose {max-width:none;}.blank-slot.svelte-6wlbb4:focus-within {outline:2px solid var(--pie-focus, #2563eb);outline-offset:2px;}.blank-slot.svelte-6wlbb4 {display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:baseline;}.template-line.svelte-6wlbb4 {white-space:pre-wrap;}.template-line.svelte-6wlbb4 p {margin:0;}.blank-inner-empty.svelte-6wlbb4 {display:inline-block;min-width:4ch;}.blank-slot-standalone.svelte-6wlbb4 {width:7rem;}.listen-button.svelte-6wlbb4 {width:128px;height:128px;border:0;padding:0;background-color:transparent;cursor:pointer;z-index:1;}.listen-button.svelte-6wlbb4:hover {background-color:#e2f1fe;}.listen-feature-icon.svelte-6wlbb4 {width:128px;height:128px;object-fit:contain;display:none;}.listen-feature-icon.listen-active.svelte-6wlbb4 {display:block;}.choice-row-horizontal.svelte-6wlbb4 {flex-direction:column;align-items:center;width:min(170px, 30vw);gap:0;}.choice-tile.svelte-6wlbb4 {display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;min-height:11rem;padding:0.8rem 0.65rem 0.5rem;border-radius:8px;background:transparent;transition:background-color 120ms ease-in-out;}.choice-tile-content.svelte-6wlbb4 {width:100%;display:flex;align-items:center;justify-content:center;min-height:7.5rem;}.choice-row-horizontal.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4) {background:#f2f2f2;}.choice-row-horizontal.is-selected.svelte-6wlbb4 .choice-tile:where(.svelte-6wlbb4) {background:#fcfcd3;}.choice-row-horizontal.is-selected.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4) {background:#fcfcd3;}.choice-row.svelte-6wlbb4:not(.choice-row-horizontal):hover {background:#f2f2f2;border-radius:6px;}.choice-row.is-selected.svelte-6wlbb4:not(.choice-row-horizontal) {background:#fcfcd3;border-radius:6px;}.access-contrast-3 .choice-row-horizontal.svelte-6wlbb4,\n  .access-contrast-6 .choice-row-horizontal.svelte-6wlbb4 {border-bottom-width:4px;border-bottom-style:solid;padding-bottom:10px;}.access-contrast-3 .choice-row.svelte-6wlbb4:not(.choice-row-horizontal),\n  .access-contrast-6 .choice-row.svelte-6wlbb4:not(.choice-row-horizontal) {border-left-width:4px;border-left-style:solid;padding-left:0.35rem;}.access-contrast-3 .choice-row-horizontal.svelte-6wlbb4,\n  .access-contrast-3 .choice-row.svelte-6wlbb4:not(.choice-row-horizontal) {border-color:#2d4e84;}.access-contrast-6 .choice-row-horizontal.svelte-6wlbb4,\n  .access-contrast-6 .choice-row.svelte-6wlbb4:not(.choice-row-horizontal) {border-color:#000;}.access-contrast-3 .choice-row.svelte-6wlbb4:hover,\n  .access-contrast-6 .choice-row.svelte-6wlbb4:hover {border-radius:0;}.access-contrast-3 .choice-row.svelte-6wlbb4:hover {border-color:#fff25d;color:#fff25d;}.access-contrast-6 .choice-row.svelte-6wlbb4:hover {border-color:#fff;color:#fff;}.access-contrast-3 .choice-row.svelte-6wlbb4:hover:not(.is-selected):not(.choice-row-horizontal),\n  .access-contrast-6 .choice-row.svelte-6wlbb4:hover:not(.is-selected):not(.choice-row-horizontal) {background:inherit;}.access-contrast-3 .choice-row-horizontal.svelte-6wlbb4:hover:not(.is-selected) .choice-tile:where(.svelte-6wlbb4),\n  .access-contrast-6 .choice-row-horizontal.svelte-6wlbb4:hover:not(.is-selected) .choice-tile:where(.svelte-6wlbb4) {background:inherit;}.access-contrast-3 .choice-row.is-selected.svelte-6wlbb4:hover,\n  .access-contrast-6 .choice-row.is-selected.svelte-6wlbb4:hover {color:#000;}.access-contrast-3 .choice-row-horizontal.is-selected.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4),\n  .access-contrast-6 .choice-row-horizontal.is-selected.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4) {background:#fcfcd3;}.choice-row-horizontal.svelte-6wlbb4 p {margin:0;text-align:center;}.choice-label.svelte-6wlbb4 p,\n  .blank-inner.svelte-6wlbb4 p {margin:0;}.teacher-instructions.svelte-6wlbb4 {border-left:4px solid #60a5fa;background:#eff6ff;padding:0.5rem 0.75rem;border-radius:4px;}.teacher-instructions-title.svelte-6wlbb4 {margin:0 0 0.3rem;font-size:0.9rem;font-weight:600;}.vic-family-layout.svelte-6wlbb4 {margin-left:auto;margin-right:auto;max-width:800px;}.vic-family-layout.svelte-6wlbb4 .choice-row:where(.svelte-6wlbb4) {user-select:none;margin-right:10px;}.sel-vic-family-layout.svelte-6wlbb4 {font-size:1.5em;}.blank-inner.svelte-6wlbb4 {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}.choice-radio-bottom.svelte-6wlbb4 {margin-top:0.5rem;}.layout-audio_blank_only.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {display:flex;justify-content:flex-end;}.layout-audio_blank_only.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {text-align:center;margin:0.8rem 0 1.8rem;}.layout-audio_blank_only.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4) {width:10rem;border-bottom-width:4px;}.layout-stimulus_image_blank.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(210px, 1fr) auto;grid-template-areas:'sentence audio'\n      '. template'\n      'choices choices';column-gap:2rem;row-gap:0.7rem;align-items:start;}.layout-stimulus_image_blank.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;}.layout-stimulus_image_blank.svelte-6wlbb4 .sentence-line:where(.svelte-6wlbb4) {grid-area:sentence;margin:0.2rem 0 0;}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0;text-align:center;justify-self:center;}.layout-stimulus_image_blank.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:0.9rem;}.layout-token_sequence.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(260px, 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:1.5rem;row-gap:0.8rem;align-items:start;}.layout-token_sequence.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;justify-self:end;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0.6rem 0 0;justify-self:center;text-align:center;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) span + span {margin-left:0.35rem;}.layout-token_sequence.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4) {width:7rem;border-bottom-width:4px;margin-left:0.35rem;}.layout-token_sequence.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:0.2rem;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(260px, 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:1.5rem;row-gap:0.65rem;align-items:start;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;justify-self:end;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0.45rem 0 0;text-align:center;justify-self:center;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:0.25rem;}"
+	code: ".sr-only.svelte-6wlbb4 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.mc-populated-blank-root.svelte-6wlbb4 .prose {max-width:none;}.blank-slot.svelte-6wlbb4:focus-within {outline:2px solid var(--pie-focus, #2563eb);outline-offset:2px;}.blank-slot.svelte-6wlbb4 {display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:baseline;}.template-line.svelte-6wlbb4 {white-space:pre-wrap;}.template-line.svelte-6wlbb4 p {margin:0;}.blank-inner-empty.svelte-6wlbb4 {display:inline-block;min-width:4ch;}.blank-slot-standalone.svelte-6wlbb4 {width:var(--mpb-blank-standalone-width, 7rem);}.listen-button.svelte-6wlbb4 {width:var(--mpb-listen-button-size, 128px);height:var(--mpb-listen-button-size, 128px);border:0;padding:0;background-color:transparent;cursor:pointer;z-index:1;}.listen-button.svelte-6wlbb4:hover {background-color:#e2f1fe;}.listen-feature-icon.svelte-6wlbb4 {width:var(--mpb-listen-button-size, 128px);height:var(--mpb-listen-button-size, 128px);object-fit:contain;display:none;}.listen-feature-icon.listen-active.svelte-6wlbb4 {display:block;}.choice-row-horizontal.svelte-6wlbb4 {flex-direction:column;align-items:center;width:min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));gap:0;}.choice-tile.svelte-6wlbb4 {display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;min-height:var(--mpb-choice-tile-min-height, 11rem);padding:0.8rem 0.65rem 0.5rem;border-radius:8px;background:transparent;transition:background-color 120ms ease-in-out;}.choice-tile-content.svelte-6wlbb4 {width:100%;display:flex;align-items:center;justify-content:center;min-height:var(--mpb-choice-content-min-height, 7.5rem);}.choice-row-horizontal.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4) {background:#ececec;}.choice-row-horizontal.is-selected.svelte-6wlbb4 .choice-tile:where(.svelte-6wlbb4) {background:#eceabf;}.choice-row-horizontal.is-selected.svelte-6wlbb4:hover .choice-tile:where(.svelte-6wlbb4) {background:#eceabf;}.choice-row-horizontal.svelte-6wlbb4 p {margin:0;text-align:center;}.choice-label.svelte-6wlbb4 p,\n  .blank-inner.svelte-6wlbb4 p {margin:0;}.blank-inner.svelte-6wlbb4 {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}.choice-radio-bottom.svelte-6wlbb4 {margin-top:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem);}.choice-radio-inline.svelte-6wlbb4 {margin-top:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem);}.layout-audio_blank_only.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {display:flex;width:min(100%, var(--mpb-audio-instructions-max-width, 875px));margin-left:auto;margin-right:auto;justify-content:flex-end;}.layout-audio_blank_only.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {text-align:center;margin:var(--mpb-audio-blank-template-margin-top, 0.8rem) 0\n      var(--mpb-audio-blank-template-margin-bottom, 1.8rem);}.layout-audio_blank_only.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4) {width:var(--mpb-blank-wide-width, 10rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 4px);}.layout-stimulus_image_blank.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-stimulus-min-column, 210px), 1fr) auto;grid-template-areas:'sentence audio'\n      '. template'\n      'choices choices';column-gap:var(--mpb-stimulus-grid-column-gap, 2rem);row-gap:var(--mpb-stimulus-grid-row-gap, 0.7rem);align-items:start;}.layout-stimulus_image_blank.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;}.layout-stimulus_image_blank.svelte-6wlbb4 .sentence-line:where(.svelte-6wlbb4) {grid-area:sentence;margin:var(--mpb-stimulus-sentence-margin-top, 0.2rem) 0 0;}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0;text-align:center;justify-self:center;}.layout-stimulus_image_blank.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-stimulus-choices-margin-top, 0.9rem);}.layout-token_sequence.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-text-min-column, 260px), 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:var(--mpb-token-grid-column-gap, 1.5rem);row-gap:var(--mpb-token-grid-row-gap, 0.8rem);align-items:start;}.layout-token_sequence.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;justify-self:end;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-token-template-margin-top, 0.6rem) 0 0;justify-self:center;text-align:center;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) span + span {margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 .blank-slot:where(.svelte-6wlbb4) {width:var(--mpb-blank-standalone-width, 7rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 4px);margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-token-choices-margin-top, 0.2rem);}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-text-min-column, 260px), 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:var(--mpb-inline-grid-column-gap, 1.5rem);row-gap:var(--mpb-inline-grid-row-gap, 0.65rem);align-items:start;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {grid-area:audio;margin:0;justify-self:end;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-inline-template-margin-top, 0.45rem) 0 0;text-align:center;justify-self:center;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-inline-choices-margin-top, 0.25rem);}\n\n  /* Match Learnosity responsive behavior for CQT audio-blank layouts:\n     at smaller widths, audio control shifts left and answer tiles stack. */\n  @media (max-width: 760px) {.layout-audio_blank_only.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4),\n    .layout-stimulus_image_blank.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .audio-container:where(.svelte-6wlbb4) {width:100%;margin-left:0;margin-right:0;justify-content:flex-start;justify-self:start;}.layout-audio_blank_only.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-stimulus_image_blank.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4) {flex-direction:column;align-items:flex-start;justify-content:flex-start;}.layout-audio_blank_only.svelte-6wlbb4 .choice-row-horizontal:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .choice-row-horizontal:where(.svelte-6wlbb4),\n    .layout-stimulus_image_blank.svelte-6wlbb4 .choice-row-horizontal:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .choice-row-horizontal:where(.svelte-6wlbb4) {width:min(100%, var(--mpb-narrow-choice-max-width, 230px));align-items:flex-start;}\n  }"
 };
 function McPopulatedBlank($$anchor, $$props) {
 	push($$props, true);
 	append_styles$1($$anchor, $$css);
 	/** Must match controller `BLANK_TOKEN` (kept local to avoid pulling controller into delivery). */
 	const BLANK_TOKEN = "{{blank}}";
+	const DEFAULT_LAYOUT_LIMITS = {
+		blankStandaloneWidthRem: 7,
+		blankWideWidthRem: 10,
+		blankUnderlineWidthPx: 2,
+		blankUnderlineWideWidthPx: 4,
+		horizontalChoiceWidthPx: 170,
+		horizontalChoiceWidthVw: 30,
+		horizontalChoiceTileMinHeightRem: 11,
+		horizontalChoiceContentMinHeightRem: 7.5,
+		selectedImageMaxHeightRem: 4,
+		choiceImageMaxHeightRem: 5,
+		listenButtonSizePx: 128,
+		stimulusMinColumnPx: 210,
+		textMinColumnPx: 260,
+		legendMaxChars: 120,
+		choiceGroupGapRem: .5,
+		choiceRowGapRem: .5,
+		toggleButtonGapRem: .5,
+		horizontalChoiceRadioTopMarginRem: .5,
+		audioBlankTemplateMarginTopRem: .8,
+		audioBlankTemplateMarginBottomRem: 1.8,
+		audioInstructionsMaxWidthPx: 875,
+		narrowHorizontalChoiceMaxWidthPx: 230,
+		stimulusGridColumnGapRem: 2,
+		stimulusGridRowGapRem: .7,
+		stimulusSentenceMarginTopRem: .2,
+		stimulusChoicesMarginTopRem: .9,
+		tokenGridColumnGapRem: 1.5,
+		tokenGridRowGapRem: .8,
+		tokenTemplateMarginTopRem: .6,
+		tokenInlineTokenGapRem: .35,
+		tokenChoicesMarginTopRem: .2,
+		inlineGridColumnGapRem: 1.5,
+		inlineGridRowGapRem: .65,
+		inlineTemplateMarginTopRem: .45,
+		inlineChoicesMarginTopRem: .25
+	};
+	const DEFAULT_LAYOUT_PROFILE_PRESETS = {
+		audio_blank_only: {
+			blankWideWidthRem: 10,
+			blankUnderlineWideWidthPx: 4
+		},
+		stimulus_image_blank: {
+			blankWideWidthRem: 10,
+			blankUnderlineWideWidthPx: 4
+		},
+		token_sequence: {
+			blankStandaloneWidthRem: 7,
+			blankUnderlineWideWidthPx: 4
+		}
+	};
+	const DEFAULT_AUDIO_BUTTON_SKINS = {
+		default: {
+			silentUrl: "https://assets.learnosity.com/organisations/844/0c9f2aa3-3cd5-4de7-93ef-541c24ca35da.svg",
+			playingUrl: "https://assets.learnosity.com/organisations/844/231dfdc2-c113-4be5-91fb-e75a0ca5994b.svg"
+		},
+		es: {
+			silentUrl: "https://assets.learnosity.com/organisations/844/27a9d5b5-d873-4bd5-b9ba-22748782d8ba.svg",
+			playingUrl: "https://assets.learnosity.com/organisations/844/120f216d-96b7-4560-94b8-1d90710216b7.svg"
+		}
+	};
+	const DEFAULT_UI_TEXT = {
+		answerChoices: "Answer choices",
+		selectedAnswerInSentence: "Selected answer in sentence",
+		showCorrectAnswer: "Show correct answer",
+		hideCorrectAnswer: "Hide correct answer",
+		clickToEnableAutoplay: "Click to enable audio autoplay",
+		audioResourceUnavailable: "Audio is enabled but no playable audio URL is configured.",
+		transcriptLabel: "Transcript",
+		listenLabelEn: "Listen",
+		listenLabelEs: "Escuchar"
+	};
+	let model = prop($$props, "model", 7), session = prop($$props, "session", 7), options = prop($$props, "options", 7);
 	let audioEl = /* @__PURE__ */ state(null);
-	let activeUtterance = /* @__PURE__ */ state(null);
-	let isSynthSpeaking = /* @__PURE__ */ state(false);
 	let isMediaPlaying = /* @__PURE__ */ state(false);
 	let localChoiceId = /* @__PURE__ */ state("");
 	let autoPlayPromptOpen = /* @__PURE__ */ state(false);
 	let autoplayAttempted = /* @__PURE__ */ state(false);
+	let featureAudioButtonEl = /* @__PURE__ */ state(null);
+	let autoplayEnableButtonEl = /* @__PURE__ */ state(null);
+	let toggleCorrectAnswerButtonEl = /* @__PURE__ */ state(null);
+	let choicesGroupEl = /* @__PURE__ */ state(null);
 	const instanceId = `mc-populated-blank-${Math.random().toString(36).slice(2, 10)}`;
-	const isEvaluateMode = /* @__PURE__ */ user_derived(() => $$props?.model?.mode === "evaluate");
-	const correctness = /* @__PURE__ */ user_derived(() => $$props?.model?.correctness);
+	const isEvaluateMode = /* @__PURE__ */ user_derived(() => model()?.env?.mode === "evaluate");
+	const correctness = /* @__PURE__ */ user_derived(() => model()?.correctness);
 	const isCorrect = /* @__PURE__ */ user_derived(() => get(correctness) === "correct");
 	const isIncorrect = /* @__PURE__ */ user_derived(() => get(correctness) === "incorrect");
-	const isAudioOnlyMode = /* @__PURE__ */ user_derived(() => $$props?.model?.interactionMode === "audio_mc_only");
+	const isAudioOnlyMode = /* @__PURE__ */ user_derived(() => model()?.interactionMode === "audio_mc_only");
 	const isBlankOnlyTemplate = /* @__PURE__ */ user_derived(() => {
-		const t = $$props?.model?.template || "";
+		const t = model()?.template || "";
 		if (!t) return false;
 		return t.replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").trim() === BLANK_TOKEN;
 	});
-	const layoutProfile = /* @__PURE__ */ user_derived(() => $$props?.model?.layoutProfile || "");
-	const choiceLayout = /* @__PURE__ */ user_derived(() => $$props?.model?.choiceLayout || (get(isAudioOnlyMode) || get(isBlankOnlyTemplate) ? "horizontal" : "vertical"));
+	const layoutProfile = /* @__PURE__ */ user_derived(() => model()?.layoutProfile || "");
+	const choiceLayout = /* @__PURE__ */ user_derived(() => model()?.choiceLayout || (get(isAudioOnlyMode) || get(isBlankOnlyTemplate) ? "horizontal" : "vertical"));
 	const isHorizontalChoices = /* @__PURE__ */ user_derived(() => get(choiceLayout) === "horizontal");
-	const isVicFamilyLayout = /* @__PURE__ */ user_derived(() => get(layoutProfile) === "inline_sentence" && !get(isHorizontalChoices));
-	const isSelVicFamilyLayout = /* @__PURE__ */ user_derived(() => get(isVicFamilyLayout) && !!$$props?.model?.hasAudio);
-	const showVisibleTranscript = /* @__PURE__ */ user_derived(() => !!$$props?.model?.showVisibleTranscript);
-	const hasPlayableAudio = /* @__PURE__ */ user_derived(() => !!$$props?.model?.hasAudio && !!$$props?.model?.audioUrl);
-	const hasTranscriptOnlyAudio = /* @__PURE__ */ user_derived(() => !!$$props?.model?.hasAudio && !$$props?.model?.audioUrl && !!$$props?.model?.audioTranscript);
-	const hasInlineSentenceAudioLayout = /* @__PURE__ */ user_derived(() => get(layoutProfile) === "inline_sentence" && !!$$props?.model?.hasAudio);
+	const showVisibleTranscript = /* @__PURE__ */ user_derived(() => !!model()?.showVisibleTranscript);
+	const hasPlayableAudio = /* @__PURE__ */ user_derived(() => !!model()?.hasAudio && !!model()?.audioUrl);
+	const hasAudioButMissingResource = /* @__PURE__ */ user_derived(() => !!model()?.hasAudio && !model()?.audioUrl);
+	const hasInlineSentenceAudioLayout = /* @__PURE__ */ user_derived(() => get(layoutProfile) === "inline_sentence" && !!model()?.hasAudio);
+	const uiText = /* @__PURE__ */ user_derived(() => ({
+		...DEFAULT_UI_TEXT,
+		...model()?.uiText || {}
+	}));
+	const profilePresetLimits = /* @__PURE__ */ user_derived(() => {
+		const profile = String(get(layoutProfile) || "");
+		const defaults = DEFAULT_LAYOUT_PROFILE_PRESETS[profile] || {};
+		const customPresets = model()?.layoutProfilePresets && typeof model().layoutProfilePresets === "object" ? model().layoutProfilePresets : {};
+		const custom = customPresets[profile] && typeof customPresets[profile] === "object" ? customPresets[profile] : {};
+		return {
+			...defaults,
+			...custom
+		};
+	});
+	const layoutLimits = /* @__PURE__ */ user_derived(() => {
+		const configured = model()?.layoutLimits && typeof model().layoutLimits === "object" ? model().layoutLimits : {};
+		return {
+			...DEFAULT_LAYOUT_LIMITS,
+			...get(profilePresetLimits),
+			...configured
+		};
+	});
+	const rootStyle = /* @__PURE__ */ user_derived(() => [
+		`--mpb-listen-button-size:${get(layoutLimits).listenButtonSizePx}px`,
+		`--mpb-blank-standalone-width:${get(layoutLimits).blankStandaloneWidthRem}rem`,
+		`--mpb-blank-wide-width:${get(layoutLimits).blankWideWidthRem}rem`,
+		`--mpb-blank-underline-width:${get(layoutLimits).blankUnderlineWidthPx}px`,
+		`--mpb-blank-underline-wide-width:${get(layoutLimits).blankUnderlineWideWidthPx}px`,
+		`--mpb-selected-image-max-height:${get(layoutLimits).selectedImageMaxHeightRem}rem`,
+		`--mpb-choice-image-max-height:${get(layoutLimits).choiceImageMaxHeightRem}rem`,
+		`--mpb-choice-width-px:${get(layoutLimits).horizontalChoiceWidthPx}px`,
+		`--mpb-choice-width-vw:${get(layoutLimits).horizontalChoiceWidthVw}vw`,
+		`--mpb-choice-tile-min-height:${get(layoutLimits).horizontalChoiceTileMinHeightRem}rem`,
+		`--mpb-choice-content-min-height:${get(layoutLimits).horizontalChoiceContentMinHeightRem}rem`,
+		`--mpb-stimulus-min-column:${get(layoutLimits).stimulusMinColumnPx}px`,
+		`--mpb-text-min-column:${get(layoutLimits).textMinColumnPx}px`,
+		`--mpb-choice-group-gap:${get(layoutLimits).choiceGroupGapRem}rem`,
+		`--mpb-choice-row-gap:${get(layoutLimits).choiceRowGapRem}rem`,
+		`--mpb-toggle-button-gap:${get(layoutLimits).toggleButtonGapRem}rem`,
+		`--mpb-horizontal-choice-radio-top-margin:${get(layoutLimits).horizontalChoiceRadioTopMarginRem}rem`,
+		`--mpb-audio-blank-template-margin-top:${get(layoutLimits).audioBlankTemplateMarginTopRem}rem`,
+		`--mpb-audio-blank-template-margin-bottom:${get(layoutLimits).audioBlankTemplateMarginBottomRem}rem`,
+		`--mpb-audio-instructions-max-width:${get(layoutLimits).audioInstructionsMaxWidthPx}px`,
+		`--mpb-narrow-choice-max-width:${get(layoutLimits).narrowHorizontalChoiceMaxWidthPx}px`,
+		`--mpb-stimulus-grid-column-gap:${get(layoutLimits).stimulusGridColumnGapRem}rem`,
+		`--mpb-stimulus-grid-row-gap:${get(layoutLimits).stimulusGridRowGapRem}rem`,
+		`--mpb-stimulus-sentence-margin-top:${get(layoutLimits).stimulusSentenceMarginTopRem}rem`,
+		`--mpb-stimulus-choices-margin-top:${get(layoutLimits).stimulusChoicesMarginTopRem}rem`,
+		`--mpb-token-grid-column-gap:${get(layoutLimits).tokenGridColumnGapRem}rem`,
+		`--mpb-token-grid-row-gap:${get(layoutLimits).tokenGridRowGapRem}rem`,
+		`--mpb-token-template-margin-top:${get(layoutLimits).tokenTemplateMarginTopRem}rem`,
+		`--mpb-token-inline-token-gap:${get(layoutLimits).tokenInlineTokenGapRem}rem`,
+		`--mpb-token-choices-margin-top:${get(layoutLimits).tokenChoicesMarginTopRem}rem`,
+		`--mpb-inline-grid-column-gap:${get(layoutLimits).inlineGridColumnGapRem}rem`,
+		`--mpb-inline-grid-row-gap:${get(layoutLimits).inlineGridRowGapRem}rem`,
+		`--mpb-inline-template-margin-top:${get(layoutLimits).inlineTemplateMarginTopRem}rem`,
+		`--mpb-inline-choices-margin-top:${get(layoutLimits).inlineChoicesMarginTopRem}rem`
+	].join(";"));
 	const useFeatureButtonAudio = /* @__PURE__ */ user_derived(() => {
+		if (typeof model()?.useFeatureButtonAudio === "boolean") return !!model().useFeatureButtonAudio;
 		const profile = get(layoutProfile) || "";
-		return !!$$props?.model?.hasAudio && (profile === "audio_blank_only" || profile === "stimulus_image_blank" || profile === "token_sequence");
+		return !!model()?.hasAudio && (profile === "audio_blank_only" || profile === "stimulus_image_blank" || profile === "token_sequence");
 	});
 	const templateParts = /* @__PURE__ */ user_derived(() => {
-		const t = $$props?.model?.template || "";
+		const t = model()?.template || "";
 		const idx = t.indexOf(BLANK_TOKEN);
 		if (idx < 0) return {
 			before: t,
@@ -5070,113 +5208,72 @@ function McPopulatedBlank($$anchor, $$props) {
 			after: t.slice(idx + 9)
 		};
 	});
-	function plainTextFromHtml(value = "") {
-		return value.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim();
-	}
 	const blankWidth = /* @__PURE__ */ user_derived(() => {
-		if (get(layoutProfile) === "audio_blank_only" || get(layoutProfile) === "stimulus_image_blank") return "10rem";
-		if (get(isBlankOnlyTemplate)) return "7rem";
-		if (get(choiceMode) === "text") {
-			const longestChoiceChars = (Array.isArray($$props?.model?.choices) ? $$props.model.choices : []).reduce((max, choice) => {
-				const textLength = plainTextFromHtml(choice?.labelHtml || "").length;
-				return Math.max(max, textLength);
-			}, 0);
-			if (longestChoiceChars > 0) return `${Math.min(24, Math.max(7, longestChoiceChars + 1))}ch`;
-		}
+		if (get(layoutProfile) === "audio_blank_only" || get(layoutProfile) === "stimulus_image_blank") return `${get(layoutLimits).blankWideWidthRem}rem`;
+		if (get(isBlankOnlyTemplate)) return `${get(layoutLimits).blankStandaloneWidthRem}rem`;
 		return "auto";
 	});
 	const blankBorderWidth = /* @__PURE__ */ user_derived(() => {
-		if (get(layoutProfile) === "audio_blank_only" || get(layoutProfile) === "stimulus_image_blank") return "4px";
-		return "2px";
+		if (get(layoutProfile) === "audio_blank_only" || get(layoutProfile) === "stimulus_image_blank") return `${get(layoutLimits).blankUnderlineWideWidthPx}px`;
+		return `${get(layoutLimits).blankUnderlineWidthPx}px`;
 	});
-	const choices = /* @__PURE__ */ user_derived(() => Array.isArray($$props?.model?.choices) ? $$props.model.choices : []);
-	const shouldShuffleChoices = /* @__PURE__ */ user_derived(() => {
-		const modelShuffle = !!$$props?.model?.shuffle;
-		const optionsShuffle = !!$$props?.options?.shuffle;
-		const lockChoiceOrder = !!$$props?.model?.lockChoiceOrder || !!$$props?.options?.lockChoiceOrder;
-		return (modelShuffle || optionsShuffle) && !lockChoiceOrder;
-	});
-	const shuffleSeed = /* @__PURE__ */ user_derived(() => `${$$props?.session?.id || $$props?.model?.id || instanceId}:${get(choices).map((c) => c.id).join("|")}`);
-	function hashString(value) {
-		let hash = 2166136261;
-		for (let i = 0; i < value.length; i++) {
-			hash ^= value.charCodeAt(i);
-			hash = Math.imul(hash, 16777619);
-		}
-		return hash >>> 0;
-	}
-	function deterministicShuffle(items, seed) {
-		return [...items].map((item, index) => ({
-			item,
-			key: hashString(`${seed}:${item?.id || index}:${index}`)
-		})).sort((a, b) => a.key - b.key).map((entry) => entry.item);
-	}
-	const renderedChoices = /* @__PURE__ */ user_derived(() => get(shouldShuffleChoices) ? deterministicShuffle(get(choices), get(shuffleSeed)) : get(choices));
-	const choiceMode = /* @__PURE__ */ user_derived(() => $$props?.model?.choiceMode || "text");
-	const selectedId = /* @__PURE__ */ user_derived(() => $$props?.session?.choiceId || get(localChoiceId) || "");
-	const radioGroupName = /* @__PURE__ */ user_derived(() => `${instanceId}-choice-group-${$$props?.model?.id || "1"}`);
+	const choices = /* @__PURE__ */ user_derived(() => Array.isArray(model()?.choices) ? model().choices : []);
+	const choiceMode = /* @__PURE__ */ user_derived(() => model()?.choiceMode || "text");
+	const selectedId = /* @__PURE__ */ user_derived(() => session()?.choiceId || get(localChoiceId) || "");
+	const radioGroupName = /* @__PURE__ */ user_derived(() => `${instanceId}-choice-group-${model()?.id || "1"}`);
 	let showCorrectAnswer = /* @__PURE__ */ state(false);
 	const displayChoiceId = /* @__PURE__ */ user_derived(() => {
-		if (get(isEvaluateMode) && get(showCorrectAnswer) && $$props?.model?.correctChoiceId) return $$props.model.correctChoiceId;
+		if (get(isEvaluateMode) && get(showCorrectAnswer) && model()?.correctChoiceId) return model().correctChoiceId;
 		return get(selectedId);
 	});
-	const displayChoice = /* @__PURE__ */ user_derived(() => get(renderedChoices).find((c) => c.id === get(displayChoiceId)));
+	const displayChoice = /* @__PURE__ */ user_derived(() => get(choices).find((c) => c.id === get(displayChoiceId)));
 	const legendText = /* @__PURE__ */ user_derived(() => {
-		const plain = plainTextFromHtml($$props?.model?.prompt || "");
-		return plain.length > 120 ? `${plain.slice(0, 117)}…` : plain || t("answerChoices");
+		const plain = (model()?.prompt || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+		const maxChars = Math.max(8, Number(get(layoutLimits).legendMaxChars) || DEFAULT_LAYOUT_LIMITS.legendMaxChars);
+		return plain.length > maxChars ? `${plain.slice(0, Math.max(1, maxChars - 1))}…` : plain || get(uiText).answerChoices;
 	});
 	const promptId = /* @__PURE__ */ user_derived(() => `${instanceId}-prompt`);
 	const transcriptId = /* @__PURE__ */ user_derived(() => `${instanceId}-transcript`);
 	const legendId = /* @__PURE__ */ user_derived(() => `${instanceId}-choices-legend`);
 	const resultId = /* @__PURE__ */ user_derived(() => `${instanceId}-result`);
-	const choicesGroupLabelledBy = /* @__PURE__ */ user_derived(() => $$props?.model?.prompt ? get(promptId) : get(legendId));
+	const choicesGroupLabelledBy = /* @__PURE__ */ user_derived(() => model()?.prompt ? get(promptId) : void 0);
+	const choicesGroupAriaLabel = /* @__PURE__ */ user_derived(() => {
+		if (model()?.prompt) return void 0;
+		const explicit = String(model()?.choiceGroupLabel || "").trim();
+		if (explicit) return explicit;
+		return get(legendText);
+	});
 	const templateDescribedBy = /* @__PURE__ */ user_derived(() => {
 		const ids = [];
-		if ($$props?.model?.prompt) ids.push(get(promptId));
-		if ($$props?.model?.hasAudio && $$props?.model?.audioTranscript) ids.push(get(transcriptId));
+		if (model()?.prompt) ids.push(get(promptId));
+		if (model()?.hasAudio && model()?.audioTranscript) ids.push(get(transcriptId));
 		return ids.length ? ids.join(" ") : void 0;
 	});
 	const lang = /* @__PURE__ */ user_derived(() => {
-		const locale = $$props?.model?.locale || "";
+		const locale = model()?.locale || "";
 		return locale ? locale.slice(0, 2) : "en";
 	});
-	const uiStrings = {
-		en: {
-			answerChoices: "Answer choices",
-			correctSelected: "Correct answer selected",
-			incorrectSelected: "Incorrect answer selected",
-			selectedAnswerInSentence: "Selected answer in sentence",
-			selectedAnswerImage: "Selected answer image",
-			showCorrect: "Show correct answer",
-			hideCorrect: "Hide correct answer",
-			enableAutoplay: "Click to enable audio autoplay",
-			listen: "Listen",
-			teacherInstructions: "Teacher instructions"
-		},
-		es: {
-			answerChoices: "Opciones de respuesta",
-			correctSelected: "Respuesta correcta seleccionada",
-			incorrectSelected: "Respuesta incorrecta seleccionada",
-			selectedAnswerInSentence: "Respuesta seleccionada en la oración",
-			selectedAnswerImage: "Imagen de la respuesta seleccionada",
-			showCorrect: "Mostrar respuesta correcta",
-			hideCorrect: "Ocultar respuesta correcta",
-			enableAutoplay: "Haga clic para habilitar la reproducción automática de audio",
-			listen: "Escuchar",
-			teacherInstructions: "Instrucciones para el docente"
-		}
-	};
-	function t(key) {
-		return (get(lang) === "es" ? uiStrings.es[key] : uiStrings.en[key]) || uiStrings.en[key];
-	}
+	const audioErrorMessage = /* @__PURE__ */ user_derived(() => get(hasAudioButMissingResource) ? get(uiText).audioResourceUnavailable : "");
 	const resultText = /* @__PURE__ */ user_derived(() => {
 		if (!get(isEvaluateMode) || get(showCorrectAnswer)) return "";
-		if (get(isCorrect)) return t("correctSelected");
-		if (get(isIncorrect) && get(selectedId)) return t("incorrectSelected");
+		if (get(isCorrect)) return "Correct answer selected";
+		if (get(isIncorrect) && get(selectedId)) return "Incorrect answer selected";
 		return "";
 	});
-	function emitSession(updatedSession) {
-		$$props?.onSessionChange?.(updatedSession);
+	function emitSession(updatedSession, sourceEl) {
+		const host = getHostElement(sourceEl);
+		if (host?.onSessionChange) {
+			host.onSessionChange(updatedSession);
+			return;
+		}
+		host?.dispatchEvent(new CustomEvent("session-changed", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				complete: !!updatedSession?.choiceId,
+				component: "mc-populated-blank"
+			}
+		}));
 	}
 	function onRadioChange(e) {
 		const input = e.target;
@@ -5184,17 +5281,17 @@ function McPopulatedBlank($$anchor, $$props) {
 		const choiceId = input.value;
 		set(localChoiceId, choiceId, true);
 		emitSession({
-			...$$props.session,
-			id: $$props.session?.id || $$props.model?.id || "1",
+			...session(),
+			id: session()?.id || model()?.id || "1",
 			element: "mc-populated-blank",
 			choiceId
-		});
+		}, input);
 	}
 	function toggleCorrectAnswer() {
 		set(showCorrectAnswer, !get(showCorrectAnswer));
 	}
 	function onRadioGroupKeydown(e) {
-		if ($$props?.model?.disabled) return;
+		if (model()?.disabled) return;
 		const key = e.key;
 		if (![
 			"ArrowDown",
@@ -5215,97 +5312,144 @@ function McPopulatedBlank($$anchor, $$props) {
 		next.focus();
 	}
 	function handleEnableAutoplayClick() {
-		if (get(hasPlayableAudio) && get(audioEl)) {
-			get(audioEl).play().finally(() => {
-				set(autoPlayPromptOpen, false);
-			});
-			return;
-		}
-		if (get(hasTranscriptOnlyAudio)) {
-			speakTranscript();
+		if (get(hasPlayableAudio) && get(audioEl)) get(audioEl).play().finally(() => {
 			set(autoPlayPromptOpen, false);
-		}
+		});
 	}
-	function onAudioPlaying() {
+	function onAudioPlaying(e) {
+		const host = getHostElement(e.currentTarget);
 		set(isMediaPlaying, true);
-		$$props?.onAudioStarted?.();
+		host?.onAudioStarted?.();
 		set(autoPlayPromptOpen, false);
 	}
-	function onAudioEnded() {
+	function onAudioEnded(e) {
+		const host = getHostElement(e.currentTarget);
 		set(isMediaPlaying, false);
-		$$props?.onAudioEnded?.();
+		host?.onAudioEnded?.();
+	}
+	function getHostElement(sourceEl) {
+		let cursor = sourceEl;
+		while (cursor) {
+			const maybeHost = cursor;
+			if (typeof maybeHost?.onSessionChange === "function" || typeof maybeHost?.onAudioStarted === "function" || typeof maybeHost?.onAudioEnded === "function") return maybeHost;
+			cursor = cursor.parentElement;
+		}
+		return document.querySelector("mc-populated-blank") || null;
 	}
-	function speechButtonLabel() {
-		return t("listen");
+	function speechButtonLabel(locale = "") {
+		return locale.toLowerCase().startsWith("es") ? get(uiText).listenLabelEs : get(uiText).listenLabelEn;
 	}
 	const featureAudioSkin = /* @__PURE__ */ user_derived(() => {
-		if (String($$props?.model?.locale || "").toLowerCase().startsWith("es")) return {
-			silentUrl: "https://assets.learnosity.com/organisations/844/27a9d5b5-d873-4bd5-b9ba-22748782d8ba.svg",
-			playingUrl: "https://assets.learnosity.com/organisations/844/120f216d-96b7-4560-94b8-1d90710216b7.svg"
-		};
-		return {
-			silentUrl: "https://assets.learnosity.com/organisations/844/0c9f2aa3-3cd5-4de7-93ef-541c24ca35da.svg",
-			playingUrl: "https://assets.learnosity.com/organisations/844/231dfdc2-c113-4be5-91fb-e75a0ca5994b.svg"
-		};
+		const locale = String(model()?.locale || "").toLowerCase();
+		const lang = locale.slice(0, 2);
+		const byLocale = model()?.audioButtonSkinsByLocale && typeof model().audioButtonSkinsByLocale === "object" ? model().audioButtonSkinsByLocale : {};
+		const customSingle = model()?.audioButtonSkin && typeof model().audioButtonSkin === "object" ? model().audioButtonSkin : null;
+		const defaultSkin = locale.startsWith("es") ? DEFAULT_AUDIO_BUTTON_SKINS.es : DEFAULT_AUDIO_BUTTON_SKINS.default;
+		return byLocale[locale] || byLocale[lang] || byLocale.default || customSingle || defaultSkin;
 	});
 	function playFeatureAudio() {
-		if (get(hasPlayableAudio) && get(audioEl)) {
-			get(audioEl).play().catch(() => {});
-			return;
-		}
-		speakTranscript();
-	}
-	function speakTranscript() {
-		const transcript = ($$props?.model?.audioTranscript || "").trim();
-		if (!transcript || !window?.speechSynthesis) return;
-		window.speechSynthesis.cancel();
-		const utterance = new SpeechSynthesisUtterance(transcript);
-		utterance.lang = $$props?.model?.locale || "en-US";
-		utterance.onstart = () => {
-			set(isSynthSpeaking, true);
-			$$props?.onAudioStarted?.();
+		if (get(hasPlayableAudio) && get(audioEl)) get(audioEl).play().catch(() => {});
+	}
+	user_effect(() => {
+		if (session()?.choiceId) set(localChoiceId, session().choiceId, true);
+	});
+	user_effect(() => {
+		const el = get(audioEl);
+		if (!el) return;
+		const handlePlaying = (e) => onAudioPlaying(e);
+		const handleEnded = (e) => onAudioEnded(e);
+		el.addEventListener("playing", handlePlaying);
+		el.addEventListener("ended", handleEnded);
+		return () => {
+			el.removeEventListener("playing", handlePlaying);
+			el.removeEventListener("ended", handleEnded);
 		};
-		utterance.onend = () => {
-			set(isSynthSpeaking, false);
-			set(activeUtterance, null);
-			$$props?.onAudioEnded?.();
+	});
+	user_effect(() => {
+		const btn = get(featureAudioButtonEl);
+		if (!btn) return;
+		const handleClick = () => playFeatureAudio();
+		btn.addEventListener("click", handleClick);
+		return () => {
+			btn.removeEventListener("click", handleClick);
 		};
-		utterance.onerror = () => {
-			set(isSynthSpeaking, false);
-			set(activeUtterance, null);
+	});
+	user_effect(() => {
+		const btn = get(autoplayEnableButtonEl);
+		if (!btn) return;
+		const handleClick = () => handleEnableAutoplayClick();
+		btn.addEventListener("click", handleClick);
+		return () => {
+			btn.removeEventListener("click", handleClick);
+		};
+	});
+	user_effect(() => {
+		const btn = get(toggleCorrectAnswerButtonEl);
+		if (!btn) return;
+		const handleClick = () => toggleCorrectAnswer();
+		btn.addEventListener("click", handleClick);
+		return () => {
+			btn.removeEventListener("click", handleClick);
 		};
-		set(activeUtterance, utterance, true);
-		window.speechSynthesis.speak(utterance);
-	}
-	onDestroy(() => {
-		if (get(activeUtterance) && window?.speechSynthesis) window.speechSynthesis.cancel();
 	});
 	user_effect(() => {
-		if ($$props?.session?.choiceId) set(localChoiceId, $$props.session.choiceId, true);
+		const group = get(choicesGroupEl);
+		if (!group) return;
+		const handleChange = (e) => {
+			const target = e.target;
+			if (!target || target.type !== "radio") return;
+			onRadioChange(e);
+		};
+		const handleKeydown = (e) => onRadioGroupKeydown(e);
+		group.addEventListener("change", handleChange);
+		group.addEventListener("keydown", handleKeydown);
+		return () => {
+			group.removeEventListener("change", handleChange);
+			group.removeEventListener("keydown", handleKeydown);
+		};
 	});
 	user_effect(() => {
-		if (!$$props?.model?.hasAudio || !$$props?.model?.autoplayAudioEnabled) return;
+		if (!model()?.hasAudio || !model()?.autoplayAudioEnabled) return;
 		if (get(autoplayAttempted)) return;
 		set(autoplayAttempted, true);
-		if (get(audioEl) && $$props?.model?.audioUrl) {
-			get(audioEl).play().catch(() => {
-				set(autoPlayPromptOpen, true);
-			});
-			return;
-		}
-		if ($$props?.model?.audioTranscript) set(autoPlayPromptOpen, true);
+		if (get(audioEl) && model()?.audioUrl) get(audioEl).play().catch(() => {
+			set(autoPlayPromptOpen, true);
+		});
 	});
+	var $$exports = {
+		get model() {
+			return model();
+		},
+		set model($$value) {
+			model($$value);
+			flushSync();
+		},
+		get session() {
+			return session();
+		},
+		set session($$value) {
+			session($$value);
+			flushSync();
+		},
+		get options() {
+			return options();
+		},
+		set options($$value) {
+			options($$value);
+			flushSync();
+		}
+	};
 	var div = root();
 	var node = child(div);
 	var consequent = ($$anchor) => {
 		var div_1 = root_1();
-		html(div_1, () => $$props.model.prompt, true);
+		html(div_1, () => model().prompt, true);
 		reset(div_1);
 		template_effect(() => set_attribute(div_1, "id", get(promptId)));
 		append($$anchor, div_1);
 	};
 	if_block(node, ($$render) => {
-		if ($$props?.model?.prompt) $$render(consequent);
+		if (model()?.prompt) $$render(consequent);
 	});
 	var node_1 = sibling(node, 2);
 	var consequent_6 = ($$anchor) => {
@@ -5319,17 +5463,15 @@ function McPopulatedBlank($$anchor, $$props) {
 			var img = child(button);
 			var img_1 = sibling(img, 2);
 			reset(button);
+			bind_this(button, ($$value) => set(featureAudioButtonEl, $$value), () => get(featureAudioButtonEl));
 			template_effect(($0) => {
-				set_attribute(audio, "src", $$props.model.audioUrl);
+				set_attribute(audio, "src", model().audioUrl);
 				set_attribute(button, "aria-label", $0);
-				set_class(img, 1, `listen-feature-icon rli-feature-listen ${get(isMediaPlaying) || get(isSynthSpeaking) ? "" : "listen-active"}`, "svelte-6wlbb4");
+				set_class(img, 1, `listen-feature-icon pie-listen-icon rli-feature-listen ${get(isMediaPlaying) ? "" : "listen-active"}`, "svelte-6wlbb4");
 				set_attribute(img, "src", get(featureAudioSkin).silentUrl);
-				set_class(img_1, 1, `listen-feature-icon rli-feature-listen ${get(isMediaPlaying) || get(isSynthSpeaking) ? "listen-active" : ""}`, "svelte-6wlbb4");
+				set_class(img_1, 1, `listen-feature-icon pie-listen-icon rli-feature-listen ${get(isMediaPlaying) ? "listen-active" : ""}`, "svelte-6wlbb4");
 				set_attribute(img_1, "src", get(featureAudioSkin).playingUrl);
-			}, [() => speechButtonLabel()]);
-			event("playing", audio, onAudioPlaying);
-			event("ended", audio, onAudioEnded);
-			delegated("click", button, playFeatureAudio);
+			}, [() => speechButtonLabel(model()?.locale)]);
 			append($$anchor, fragment);
 		};
 		var consequent_3 = ($$anchor) => {
@@ -5341,191 +5483,169 @@ function McPopulatedBlank($$anchor, $$props) {
 				var button_1 = root_5();
 				var text = child(button_1, true);
 				reset(button_1);
-				template_effect(($0) => set_text(text, $0), [() => t("enableAutoplay")]);
-				delegated("click", button_1, handleEnableAutoplayClick);
+				bind_this(button_1, ($$value) => set(autoplayEnableButtonEl, $$value), () => get(autoplayEnableButtonEl));
+				template_effect(() => set_text(text, get(uiText).clickToEnableAutoplay));
 				append($$anchor, button_1);
 			};
 			if_block(node_3, ($$render) => {
 				if (get(autoPlayPromptOpen)) $$render(consequent_2);
 			});
 			template_effect(() => {
-				set_attribute(audio_1, "src", $$props.model.audioUrl);
-				set_attribute(audio_1, "aria-describedby", $$props?.model?.audioTranscript ? get(transcriptId) : void 0);
+				set_attribute(audio_1, "src", model().audioUrl);
+				set_attribute(audio_1, "aria-describedby", model()?.audioTranscript ? get(transcriptId) : void 0);
 			});
-			event("playing", audio_1, onAudioPlaying);
-			event("ended", audio_1, onAudioEnded);
 			append($$anchor, fragment_1);
 		};
 		var consequent_4 = ($$anchor) => {
-			var button_2 = root_6();
-			var img_2 = child(button_2);
-			var img_3 = sibling(img_2, 2);
-			reset(button_2);
-			template_effect(($0) => {
-				set_attribute(button_2, "aria-label", $0);
-				set_class(img_2, 1, `listen-feature-icon rli-feature-listen ${get(isMediaPlaying) || get(isSynthSpeaking) ? "" : "listen-active"}`, "svelte-6wlbb4");
-				set_attribute(img_2, "src", get(featureAudioSkin).silentUrl);
-				set_class(img_3, 1, `listen-feature-icon rli-feature-listen ${get(isMediaPlaying) || get(isSynthSpeaking) ? "listen-active" : ""}`, "svelte-6wlbb4");
-				set_attribute(img_3, "src", get(featureAudioSkin).playingUrl);
-			}, [() => speechButtonLabel()]);
-			delegated("click", button_2, playFeatureAudio);
-			append($$anchor, button_2);
+			var p = root_6();
+			var text_1 = child(p, true);
+			reset(p);
+			template_effect(() => set_text(text_1, get(audioErrorMessage)));
+			append($$anchor, p);
 		};
 		if_block(node_2, ($$render) => {
 			if (get(hasPlayableAudio) && get(useFeatureButtonAudio)) $$render(consequent_1);
 			else if (get(hasPlayableAudio)) $$render(consequent_3, 1);
-			else if (get(hasTranscriptOnlyAudio)) $$render(consequent_4, 2);
+			else if (get(hasAudioButMissingResource)) $$render(consequent_4, 2);
 		});
 		var node_4 = sibling(node_2, 2);
 		var consequent_5 = ($$anchor) => {
-			var p = root_7();
-			var text_1 = child(p, true);
-			reset(p);
+			var p_1 = root_7();
+			var strong = child(p_1);
+			var text_2 = child(strong);
+			reset(strong);
+			var text_3 = sibling(strong);
+			reset(p_1);
 			template_effect(() => {
-				set_class(p, 1, `text-sm mt-2 text-gray-700 ${get(showVisibleTranscript) ? "" : "sr-only"}`, "svelte-6wlbb4");
-				set_attribute(p, "id", get(transcriptId));
-				set_text(text_1, $$props.model.audioTranscript);
+				set_class(p_1, 1, `text-sm mt-2 text-gray-700 pie-audio-transcript ${get(showVisibleTranscript) ? "" : "sr-only"}`, "svelte-6wlbb4");
+				set_attribute(p_1, "id", get(transcriptId));
+				set_text(text_2, `${get(uiText).transcriptLabel ?? ""}:`);
+				set_text(text_3, ` ${model().audioTranscript ?? ""}`);
 			});
-			append($$anchor, p);
+			append($$anchor, p_1);
 		};
 		if_block(node_4, ($$render) => {
-			if ($$props?.model?.audioTranscript) $$render(consequent_5);
+			if (model()?.audioTranscript) $$render(consequent_5);
 		});
 		reset(div_2);
 		append($$anchor, div_2);
 	};
 	if_block(node_1, ($$render) => {
-		if ($$props?.model?.hasAudio) $$render(consequent_6);
+		if (model()?.hasAudio) $$render(consequent_6);
 	});
 	var node_5 = sibling(node_1, 2);
 	var consequent_7 = ($$anchor) => {
 		var div_3 = root_8();
-		var h4 = child(div_3);
-		var text_2 = child(h4, true);
-		reset(h4);
-		var div_4 = sibling(h4, 2);
-		html(div_4, () => $$props.model.teacherInstructions, true);
-		reset(div_4);
+		html(div_3, () => model().sentenceHtml, true);
 		reset(div_3);
-		template_effect(($0) => set_text(text_2, $0), [() => t("teacherInstructions")]);
+		template_effect(() => set_attribute(div_3, "aria-describedby", get(templateDescribedBy)));
 		append($$anchor, div_3);
 	};
 	if_block(node_5, ($$render) => {
-		if ($$props?.model?.teacherInstructions) $$render(consequent_7);
+		if (model()?.sentenceHtml) $$render(consequent_7);
 	});
 	var node_6 = sibling(node_5, 2);
-	var consequent_8 = ($$anchor) => {
-		var div_5 = root_9();
-		html(div_5, () => $$props.model.sentenceHtml, true);
-		reset(div_5);
-		template_effect(() => set_attribute(div_5, "aria-describedby", get(templateDescribedBy)));
-		append($$anchor, div_5);
-	};
-	if_block(node_6, ($$render) => {
-		if ($$props?.model?.sentenceHtml) $$render(consequent_8);
-	});
-	var node_7 = sibling(node_6, 2);
-	var consequent_11 = ($$anchor) => {
-		var div_6 = root_10();
-		var node_8 = child(div_6);
-		html(node_8, () => get(templateParts).before);
-		var span = sibling(node_8, 2);
-		var node_9 = child(span);
-		var consequent_9 = ($$anchor) => {
-			var img_4 = root_11();
-			template_effect(($0) => {
-				set_attribute(img_4, "src", get(displayChoice).imageUrl);
-				set_attribute(img_4, "alt", $0);
-			}, [() => get(displayChoice).imageAlt || t("selectedAnswerImage")]);
-			append($$anchor, img_4);
+	var consequent_10 = ($$anchor) => {
+		var div_4 = root_9();
+		var node_7 = child(div_4);
+		html(node_7, () => get(templateParts).before);
+		var span = sibling(node_7, 2);
+		var node_8 = child(span);
+		var consequent_8 = ($$anchor) => {
+			var img_2 = root_10();
+			template_effect(() => {
+				set_attribute(img_2, "src", get(displayChoice).imageUrl);
+				set_attribute(img_2, "alt", get(displayChoice).imageAlt || "Selected answer image");
+			});
+			append($$anchor, img_2);
 		};
-		var consequent_10 = ($$anchor) => {
-			var span_1 = root_12();
+		var consequent_9 = ($$anchor) => {
+			var span_1 = root_11();
 			html(span_1, () => get(displayChoice).labelHtml, true);
 			reset(span_1);
 			append($$anchor, span_1);
 		};
 		var alternate = ($$anchor) => {
-			append($$anchor, root_13());
+			append($$anchor, root_12());
 		};
-		if_block(node_9, ($$render) => {
-			if (get(choiceMode) === "image" && get(displayChoice)?.imageUrl) $$render(consequent_9);
-			else if (get(displayChoice)?.labelHtml) $$render(consequent_10, 1);
+		if_block(node_8, ($$render) => {
+			if (get(choiceMode) === "image" && get(displayChoice)?.imageUrl) $$render(consequent_8);
+			else if (get(displayChoice)?.labelHtml) $$render(consequent_9, 1);
 			else $$render(alternate, -1);
 		});
 		reset(span);
 		html(sibling(span, 2), () => get(templateParts).after);
-		reset(div_6);
-		template_effect(($0) => {
-			set_attribute(div_6, "aria-describedby", get(templateDescribedBy));
-			set_class(span, 1, `inline-flex items-center min-h-[1.5em] px-2 mx-1 border-b-2 border-gray-500 align-baseline blank-slot ${get(isBlankOnlyTemplate) ? "blank-slot-standalone" : ""}`, "svelte-6wlbb4");
+		reset(div_4);
+		template_effect(() => {
+			set_attribute(div_4, "aria-describedby", get(templateDescribedBy));
+			set_class(span, 1, `inline-flex items-center min-h-[1.5em] px-2 mx-1 border-b-2 border-gray-500 align-baseline blank-slot pie-blank-slot ${get(isBlankOnlyTemplate) ? "blank-slot-standalone pie-blank-slot-standalone" : ""}`, "svelte-6wlbb4");
 			set_style(span, `width:${get(blankWidth)};border-bottom-width:${get(blankBorderWidth)};`);
-			set_attribute(span, "aria-label", $0);
-		}, [() => t("selectedAnswerInSentence")]);
-		append($$anchor, div_6);
+			set_attribute(span, "aria-label", get(uiText).selectedAnswerInSentence);
+		});
+		append($$anchor, div_4);
 	};
-	if_block(node_7, ($$render) => {
-		if (!get(isAudioOnlyMode)) $$render(consequent_11);
+	if_block(node_6, ($$render) => {
+		if (!get(isAudioOnlyMode)) $$render(consequent_10);
 	});
-	var node_11 = sibling(node_7, 2);
-	var consequent_12 = ($$anchor) => {
-		var button_3 = root_14();
-		var span_3 = child(button_3);
-		var text_3 = child(span_3, true);
+	var node_10 = sibling(node_6, 2);
+	var consequent_11 = ($$anchor) => {
+		var button_2 = root_13();
+		var span_3 = child(button_2);
+		var text_4 = child(span_3, true);
 		reset(span_3);
-		reset(button_3);
-		template_effect(($0) => {
-			set_attribute(button_3, "aria-pressed", get(showCorrectAnswer));
-			set_text(text_3, $0);
-		}, [() => get(showCorrectAnswer) ? t("hideCorrect") : t("showCorrect")]);
-		delegated("click", button_3, toggleCorrectAnswer);
-		append($$anchor, button_3);
+		reset(button_2);
+		bind_this(button_2, ($$value) => set(toggleCorrectAnswerButtonEl, $$value), () => get(toggleCorrectAnswerButtonEl));
+		template_effect(() => {
+			set_attribute(button_2, "aria-pressed", get(showCorrectAnswer));
+			set_text(text_4, get(showCorrectAnswer) ? get(uiText).hideCorrectAnswer : get(uiText).showCorrectAnswer);
+		});
+		append($$anchor, button_2);
 	};
-	if_block(node_11, ($$render) => {
-		if (get(isEvaluateMode) && get(isIncorrect)) $$render(consequent_12);
+	if_block(node_10, ($$render) => {
+		if (get(isEvaluateMode) && get(isIncorrect)) $$render(consequent_11);
 	});
-	var node_12 = sibling(node_11, 2);
-	var consequent_13 = ($$anchor) => {
-		var p_1 = root_15();
-		var text_4 = child(p_1, true);
-		reset(p_1);
+	var node_11 = sibling(node_10, 2);
+	var consequent_12 = ($$anchor) => {
+		var p_2 = root_14();
+		var text_5 = child(p_2, true);
+		reset(p_2);
 		template_effect(() => {
-			set_attribute(p_1, "id", get(resultId));
-			set_text(text_4, get(resultText));
+			set_attribute(p_2, "id", get(resultId));
+			set_text(text_5, get(resultText));
 		});
-		append($$anchor, p_1);
+		append($$anchor, p_2);
 	};
-	if_block(node_12, ($$render) => {
-		if (get(resultText)) $$render(consequent_13);
+	if_block(node_11, ($$render) => {
+		if (get(resultText)) $$render(consequent_12);
 	});
-	var fieldset = sibling(node_12, 2);
+	var fieldset = sibling(node_11, 2);
 	var legend = child(fieldset);
-	var text_5 = child(legend, true);
+	var text_6 = child(legend, true);
 	reset(legend);
-	var div_7 = sibling(legend, 2);
-	each(div_7, 21, () => get(renderedChoices), (c) => c.id, ($$anchor, c) => {
-		var div_8 = root_16();
-		var node_13 = child(div_8);
-		var consequent_15 = ($$anchor) => {
-			var label = root_17();
+	var div_5 = sibling(legend, 2);
+	each(div_5, 21, () => get(choices), (c) => c.id, ($$anchor, c) => {
+		var div_6 = root_15();
+		var node_12 = child(div_6);
+		var consequent_14 = ($$anchor) => {
+			var label = root_16();
 			var span_4 = child(label);
-			var node_14 = child(span_4);
-			var consequent_14 = ($$anchor) => {
-				var img_5 = root_18();
+			var node_13 = child(span_4);
+			var consequent_13 = ($$anchor) => {
+				var img_3 = root_17();
 				template_effect(() => {
-					set_attribute(img_5, "src", get(c).imageUrl);
-					set_attribute(img_5, "alt", get(c).imageAlt || `Choice ${get(c).id}`);
+					set_attribute(img_3, "src", get(c).imageUrl);
+					set_attribute(img_3, "alt", get(c).imageAlt || `Choice ${get(c).id}`);
 				});
-				append($$anchor, img_5);
+				append($$anchor, img_3);
 			};
 			var alternate_1 = ($$anchor) => {
-				var span_5 = root_19();
+				var span_5 = root_18();
 				html(span_5, () => get(c).labelHtml || "", true);
 				reset(span_5);
 				append($$anchor, span_5);
 			};
-			if_block(node_14, ($$render) => {
-				if (get(choiceMode) === "image" && get(c).imageUrl) $$render(consequent_14);
+			if_block(node_13, ($$render) => {
+				if (get(choiceMode) === "image" && get(c).imageUrl) $$render(consequent_13);
 				else $$render(alternate_1, -1);
 			});
 			reset(span_4);
@@ -5537,34 +5657,33 @@ function McPopulatedBlank($$anchor, $$props) {
 				set_attribute(input_1, "name", get(radioGroupName));
 				set_attribute(input_1, "id", `${instanceId}-opt-${get(c).id}`);
 				set_value(input_1, get(c).id);
-				set_checked(input_1, (get(showCorrectAnswer) && get(isEvaluateMode) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id);
-				input_1.disabled = $$props?.model?.disabled;
+				set_checked(input_1, (get(showCorrectAnswer) && get(isEvaluateMode) ? model()?.correctChoiceId : get(selectedId)) === get(c).id);
+				input_1.disabled = model()?.disabled;
 			});
-			delegated("change", input_1, onRadioChange);
 			append($$anchor, label);
 		};
 		var alternate_3 = ($$anchor) => {
-			var fragment_2 = root_20();
+			var fragment_2 = root_19();
 			var input_2 = first_child(fragment_2);
 			remove_input_defaults(input_2);
 			var label_1 = sibling(input_2, 2);
-			var node_15 = child(label_1);
-			var consequent_16 = ($$anchor) => {
-				var img_6 = root_21();
+			var node_14 = child(label_1);
+			var consequent_15 = ($$anchor) => {
+				var img_4 = root_20();
 				template_effect(() => {
-					set_attribute(img_6, "src", get(c).imageUrl);
-					set_attribute(img_6, "alt", get(c).imageAlt || `Choice ${get(c).id}`);
+					set_attribute(img_4, "src", get(c).imageUrl);
+					set_attribute(img_4, "alt", get(c).imageAlt || `Choice ${get(c).id}`);
 				});
-				append($$anchor, img_6);
+				append($$anchor, img_4);
 			};
 			var alternate_2 = ($$anchor) => {
-				var span_6 = root_22();
+				var span_6 = root_21();
 				html(span_6, () => get(c).labelHtml || "", true);
 				reset(span_6);
 				append($$anchor, span_6);
 			};
-			if_block(node_15, ($$render) => {
-				if (get(choiceMode) === "image" && get(c).imageUrl) $$render(consequent_16);
+			if_block(node_14, ($$render) => {
+				if (get(choiceMode) === "image" && get(c).imageUrl) $$render(consequent_15);
 				else $$render(alternate_2, -1);
 			});
 			reset(label_1);
@@ -5572,70 +5691,63 @@ function McPopulatedBlank($$anchor, $$props) {
 				set_attribute(input_2, "name", get(radioGroupName));
 				set_attribute(input_2, "id", `${instanceId}-opt-${get(c).id}`);
 				set_value(input_2, get(c).id);
-				set_checked(input_2, (get(showCorrectAnswer) && get(isEvaluateMode) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id);
-				input_2.disabled = $$props?.model?.disabled;
+				set_checked(input_2, (get(showCorrectAnswer) && get(isEvaluateMode) ? model()?.correctChoiceId : get(selectedId)) === get(c).id);
+				input_2.disabled = model()?.disabled;
 				set_attribute(label_1, "for", `${instanceId}-opt-${get(c).id}`);
 			});
-			delegated("change", input_2, onRadioChange);
 			append($$anchor, fragment_2);
 		};
-		if_block(node_13, ($$render) => {
-			if (get(isHorizontalChoices)) $$render(consequent_15);
+		if_block(node_12, ($$render) => {
+			if (get(isHorizontalChoices)) $$render(consequent_14);
 			else $$render(alternate_3, -1);
 		});
-		var node_16 = sibling(node_13, 2);
-		var consequent_19 = ($$anchor) => {
+		var node_15 = sibling(node_12, 2);
+		var consequent_18 = ($$anchor) => {
 			var fragment_3 = comment();
-			var node_17 = first_child(fragment_3);
+			var node_16 = first_child(fragment_3);
+			var consequent_16 = ($$anchor) => {
+				append($$anchor, root_23());
+			};
 			var consequent_17 = ($$anchor) => {
 				append($$anchor, root_24());
 			};
-			var consequent_18 = ($$anchor) => {
-				append($$anchor, root_25());
-			};
-			if_block(node_17, ($$render) => {
-				if (get(selectedId) === get(c).id && get(isCorrect)) $$render(consequent_17);
-				else if (get(selectedId) === get(c).id && get(isIncorrect)) $$render(consequent_18, 1);
+			if_block(node_16, ($$render) => {
+				if (get(selectedId) === get(c).id && get(isCorrect)) $$render(consequent_16);
+				else if (get(selectedId) === get(c).id && get(isIncorrect)) $$render(consequent_17, 1);
 			});
 			append($$anchor, fragment_3);
 		};
-		if_block(node_16, ($$render) => {
-			if (get(isEvaluateMode) && !get(showCorrectAnswer)) $$render(consequent_19);
+		if_block(node_15, ($$render) => {
+			if (get(isEvaluateMode) && !get(showCorrectAnswer)) $$render(consequent_18);
 		});
-		reset(div_8);
-		template_effect(() => set_class(div_8, 1, `flex items-start gap-2 choice-row ${get(isHorizontalChoices) ? "choice-row-horizontal" : ""} ${(get(showCorrectAnswer) && get(isEvaluateMode) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id ? "is-selected" : ""}`, "svelte-6wlbb4"));
-		append($$anchor, div_8);
+		reset(div_6);
+		template_effect(() => set_class(div_6, 1, `flex items-start choice-row pie-choice ${get(isHorizontalChoices) ? "choice-row-horizontal pie-choice-horizontal" : ""} ${(get(showCorrectAnswer) && get(isEvaluateMode) ? model()?.correctChoiceId : get(selectedId)) === get(c).id ? "is-selected pie-choice-selected" : ""}`, "svelte-6wlbb4"));
+		append($$anchor, div_6);
 	});
-	reset(div_7);
+	reset(div_5);
+	bind_this(div_5, ($$value) => set(choicesGroupEl, $$value), () => get(choicesGroupEl));
 	reset(fieldset);
 	reset(div);
 	template_effect(() => {
-		set_class(div, 1, `p-4 mc-populated-blank-root layout-${get(layoutProfile)} ${get(hasInlineSentenceAudioLayout) ? "has-inline-audio" : ""} ${get(isVicFamilyLayout) ? "vic-family-layout" : ""} ${get(isSelVicFamilyLayout) ? "sel-vic-family-layout" : ""}`, "svelte-6wlbb4");
+		set_class(div, 1, `p-4 mc-populated-blank-root pie-element pie-element-mc-populated-blank pie-delivery-root layout-${get(layoutProfile)} ${get(hasInlineSentenceAudioLayout) ? "has-inline-audio" : ""}`, "svelte-6wlbb4");
 		set_attribute(div, "lang", get(lang));
-		fieldset.disabled = $$props?.model?.disabled;
+		set_style(div, get(rootStyle));
+		fieldset.disabled = model()?.disabled;
 		set_attribute(legend, "id", get(legendId));
-		set_text(text_5, get(legendText));
-		set_class(div_7, 1, `gap-2 ${get(isHorizontalChoices) ? "flex flex-row flex-wrap items-start justify-center" : "flex flex-col"}`, "svelte-6wlbb4");
-		set_attribute(div_7, "aria-labelledby", get(choicesGroupLabelledBy));
-		set_attribute(div_7, "aria-describedby", get(resultText) ? get(resultId) : void 0);
+		set_text(text_6, get(legendText));
+		set_class(div_5, 1, `pie-choices ${get(isHorizontalChoices) ? "flex flex-row flex-wrap items-start justify-center" : "flex flex-col"}`, "svelte-6wlbb4");
+		set_attribute(div_5, "aria-labelledby", get(choicesGroupLabelledBy));
+		set_attribute(div_5, "aria-label", get(choicesGroupAriaLabel));
+		set_attribute(div_5, "aria-describedby", get(resultText) ? get(resultId) : void 0);
 	});
-	delegated("keydown", div_7, onRadioGroupKeydown);
 	append($$anchor, div);
-	pop();
-}
-delegate([
-	"click",
-	"keydown",
-	"change"
-]);
-create_custom_element(McPopulatedBlank, {
+	return pop($$exports);
+}
+customElements.define("mc-populated-blank", create_custom_element(McPopulatedBlank, {
 	model: { type: "Object" },
 	session: { type: "Object" },
-	options: { type: "Object" },
-	onSessionChange: { type: "Object" },
-	onAudioStarted: { type: "Object" },
-	onAudioEnded: { type: "Object" }
-}, [], []);
+	options: { type: "Object" }
+}, [], []));
 //#endregion
 //#region src/controller/index.ts
 var isComplete = (question, session, audioComplete = false) => {