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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +9 -3
  2. package/dist/controller/defaults.d.ts +4 -0
  3. package/dist/controller/defaults.d.ts.map +1 -1
  4. package/dist/controller/index.d.ts.map +1 -1
  5. package/dist/controller/index.js +5 -4
  6. package/dist/controller/index.js.map +1 -1
  7. package/dist/delivery/index.js +284 -108
  8. package/dist/delivery/index.js.map +1 -1
  9. package/dist/index.iife.d.ts +2 -1
  10. package/dist/index.iife.d.ts.map +1 -1
  11. package/dist/index.iife.js +19 -5
  12. package/dist/index.js +284 -108
  13. package/dist/index.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/controller/defaults.ts +2 -0
  16. package/src/controller/index.ts +3 -4
  17. package/src/delivery/McPopulatedBlank.svelte +193 -78
  18. package/src/index.iife.ts +2 -8
package/dist/index.js CHANGED
@@ -179,6 +179,14 @@ function hydration_failed() {
179
179
  throw new Error(`https://svelte.dev/e/hydration_failed`);
180
180
  }
181
181
  /**
182
+ * Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
183
+ * @param {string} key
184
+ * @returns {never}
185
+ */
186
+ function props_invalid_value(key) {
187
+ throw new Error(`https://svelte.dev/e/props_invalid_value`);
188
+ }
189
+ /**
182
190
  * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
183
191
  * @returns {never}
184
192
  */
@@ -487,6 +495,29 @@ function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
487
495
  * schedule effects if the update takes place inside a `$:` effect
488
496
  */
489
497
  var legacy_is_updating_store = false;
498
+ /**
499
+ * Whether or not the prop currently being read is a store binding, as in
500
+ * `<Child bind:x={$y} />`. If it is, we treat the prop as mutable even in
501
+ * runes mode, and skip `binding_property_non_reactive` validation
502
+ */
503
+ var is_store_binding = false;
504
+ /**
505
+ * Returns a tuple that indicates whether `fn()` reads a prop that is a store binding.
506
+ * Used to prevent `binding_property_non_reactive` validation false positives and
507
+ * ensure that these props are treated as mutable even in runes mode
508
+ * @template T
509
+ * @param {() => T} fn
510
+ * @returns {[T, boolean]}
511
+ */
512
+ function capture_store_binding(fn) {
513
+ var previous_is_store_binding = is_store_binding;
514
+ try {
515
+ is_store_binding = false;
516
+ return [fn(), is_store_binding];
517
+ } finally {
518
+ is_store_binding = previous_is_store_binding;
519
+ }
520
+ }
490
521
  //#endregion
491
522
  //#region \0@oxc-project+runtime@0.120.0/helpers/checkPrivateRedeclaration.js
492
523
  function _checkPrivateRedeclaration(e, t) {
@@ -3070,46 +3101,6 @@ var event_symbol = Symbol("events");
3070
3101
  var all_registered_events = /* @__PURE__ */ new Set();
3071
3102
  /** @type {Set<(events: Array<string>) => void>} */
3072
3103
  var root_event_handles = /* @__PURE__ */ new Set();
3073
- /**
3074
- * @param {string} event_name
3075
- * @param {EventTarget} dom
3076
- * @param {EventListener} [handler]
3077
- * @param {AddEventListenerOptions} [options]
3078
- */
3079
- function create_event(event_name, dom, handler, options = {}) {
3080
- /**
3081
- * @this {EventTarget}
3082
- */
3083
- function target_handler(event) {
3084
- if (!options.capture) handle_event_propagation.call(dom, event);
3085
- if (!event.cancelBubble) return without_reactive_context(() => {
3086
- return handler?.call(this, event);
3087
- });
3088
- }
3089
- if (event_name.startsWith("pointer") || event_name.startsWith("touch") || event_name === "wheel") queue_micro_task(() => {
3090
- dom.addEventListener(event_name, target_handler, options);
3091
- });
3092
- else dom.addEventListener(event_name, target_handler, options);
3093
- return target_handler;
3094
- }
3095
- /**
3096
- * @param {string} event_name
3097
- * @param {Element} dom
3098
- * @param {EventListener} [handler]
3099
- * @param {boolean} [capture]
3100
- * @param {boolean} [passive]
3101
- * @returns {void}
3102
- */
3103
- function event(event_name, dom, handler, capture, passive) {
3104
- var options = {
3105
- capture,
3106
- passive
3107
- };
3108
- var target_handler = create_event(event_name, dom, handler, options);
3109
- if (dom === document.body || dom === window || dom === document || dom instanceof HTMLMediaElement) teardown(() => {
3110
- dom.removeEventListener(event_name, target_handler, options);
3111
- });
3112
- }
3113
3104
  var last_propagated_event = null;
3114
3105
  /**
3115
3106
  * @this {EventTarget}
@@ -4517,6 +4508,94 @@ function bind_this(element_or_component = {}, update, get_value, get_parts) {
4517
4508
  return element_or_component;
4518
4509
  }
4519
4510
  //#endregion
4511
+ //#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/internal/client/reactivity/props.js
4512
+ /** @import { Effect, Source } from './types.js' */
4513
+ /**
4514
+ * This function is responsible for synchronizing a possibly bound prop with the inner component state.
4515
+ * It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
4516
+ * @template V
4517
+ * @param {Record<string, unknown>} props
4518
+ * @param {string} key
4519
+ * @param {number} flags
4520
+ * @param {V | (() => V)} [fallback]
4521
+ * @returns {(() => V | ((arg: V) => V) | ((arg: V, mutation: boolean) => V))}
4522
+ */
4523
+ function prop(props, key, flags, fallback) {
4524
+ var runes = !legacy_mode_flag || (flags & 2) !== 0;
4525
+ var bindable = (flags & 8) !== 0;
4526
+ var lazy = (flags & 16) !== 0;
4527
+ var fallback_value = fallback;
4528
+ var fallback_dirty = true;
4529
+ var get_fallback = () => {
4530
+ if (fallback_dirty) {
4531
+ fallback_dirty = false;
4532
+ fallback_value = lazy ? untrack(fallback) : fallback;
4533
+ }
4534
+ return fallback_value;
4535
+ };
4536
+ /** @type {((v: V) => void) | undefined} */
4537
+ let setter;
4538
+ if (bindable) {
4539
+ var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
4540
+ setter = get_descriptor(props, key)?.set ?? (is_entry_props && key in props ? (v) => props[key] = v : void 0);
4541
+ }
4542
+ /** @type {V} */
4543
+ var initial_value;
4544
+ var is_store_sub = false;
4545
+ if (bindable) [initial_value, is_store_sub] = capture_store_binding(() => props[key]);
4546
+ else initial_value = props[key];
4547
+ if (initial_value === void 0 && fallback !== void 0) {
4548
+ initial_value = get_fallback();
4549
+ if (setter) {
4550
+ if (runes) props_invalid_value(key);
4551
+ setter(initial_value);
4552
+ }
4553
+ }
4554
+ /** @type {() => V} */
4555
+ var getter;
4556
+ if (runes) getter = () => {
4557
+ var value = props[key];
4558
+ if (value === void 0) return get_fallback();
4559
+ fallback_dirty = true;
4560
+ return value;
4561
+ };
4562
+ else getter = () => {
4563
+ var value = props[key];
4564
+ if (value !== void 0) fallback_value = void 0;
4565
+ return value === void 0 ? fallback_value : value;
4566
+ };
4567
+ if (runes && (flags & 4) === 0) return getter;
4568
+ if (setter) {
4569
+ var legacy_parent = props.$$legacy;
4570
+ return (function(value, mutation) {
4571
+ if (arguments.length > 0) {
4572
+ if (!runes || !mutation || legacy_parent || is_store_sub)
4573
+ /** @type {Function} */ setter(mutation ? getter() : value);
4574
+ return value;
4575
+ }
4576
+ return getter();
4577
+ });
4578
+ }
4579
+ var overridden = false;
4580
+ var d = ((flags & 1) !== 0 ? derived : derived_safe_equal)(() => {
4581
+ overridden = false;
4582
+ return getter();
4583
+ });
4584
+ if (bindable) get(d);
4585
+ var parent_effect = active_effect;
4586
+ return (function(value, mutation) {
4587
+ if (arguments.length > 0) {
4588
+ const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
4589
+ set(d, new_value);
4590
+ overridden = true;
4591
+ if (fallback_value !== void 0) fallback_value = new_value;
4592
+ return value;
4593
+ }
4594
+ if (is_destroying_effect && overridden || (parent_effect.f & 16384) !== 0) return d.v;
4595
+ return get(d);
4596
+ });
4597
+ }
4598
+ //#endregion
4520
4599
  //#region ../../../node_modules/.bun/svelte@5.55.1/node_modules/svelte/src/legacy/legacy-client.js
4521
4600
  /** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
4522
4601
  /**
@@ -4947,7 +5026,7 @@ var root_15 = /* @__PURE__ */ from_html(`<div style="gap:var(--mpb-choice-row-ga
4947
5026
  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>`);
4948
5027
  var $$css = {
4949
5028
  hash: "svelte-6wlbb4",
4950
- 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;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);}"
5029
+ 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 }"
4951
5030
  };
4952
5031
  function McPopulatedBlank($$anchor, $$props) {
4953
5032
  push($$props, true);
@@ -4975,6 +5054,8 @@ function McPopulatedBlank($$anchor, $$props) {
4975
5054
  horizontalChoiceRadioTopMarginRem: .5,
4976
5055
  audioBlankTemplateMarginTopRem: .8,
4977
5056
  audioBlankTemplateMarginBottomRem: 1.8,
5057
+ audioInstructionsMaxWidthPx: 875,
5058
+ narrowHorizontalChoiceMaxWidthPx: 230,
4978
5059
  stimulusGridColumnGapRem: 2,
4979
5060
  stimulusGridRowGapRem: .7,
4980
5061
  stimulusSentenceMarginTopRem: .2,
@@ -5024,37 +5105,42 @@ function McPopulatedBlank($$anchor, $$props) {
5024
5105
  listenLabelEn: "Listen",
5025
5106
  listenLabelEs: "Escuchar"
5026
5107
  };
5108
+ let model = prop($$props, "model", 7), session = prop($$props, "session", 7), options = prop($$props, "options", 7);
5027
5109
  let audioEl = /* @__PURE__ */ state(null);
5028
5110
  let isMediaPlaying = /* @__PURE__ */ state(false);
5029
5111
  let localChoiceId = /* @__PURE__ */ state("");
5030
5112
  let autoPlayPromptOpen = /* @__PURE__ */ state(false);
5031
5113
  let autoplayAttempted = /* @__PURE__ */ state(false);
5114
+ let featureAudioButtonEl = /* @__PURE__ */ state(null);
5115
+ let autoplayEnableButtonEl = /* @__PURE__ */ state(null);
5116
+ let toggleCorrectAnswerButtonEl = /* @__PURE__ */ state(null);
5117
+ let choicesGroupEl = /* @__PURE__ */ state(null);
5032
5118
  const instanceId = `mc-populated-blank-${Math.random().toString(36).slice(2, 10)}`;
5033
- const isEvaluateMode = /* @__PURE__ */ user_derived(() => $$props?.model?.env?.mode === "evaluate");
5034
- const correctness = /* @__PURE__ */ user_derived(() => $$props?.model?.correctness);
5119
+ const isEvaluateMode = /* @__PURE__ */ user_derived(() => model()?.env?.mode === "evaluate");
5120
+ const correctness = /* @__PURE__ */ user_derived(() => model()?.correctness);
5035
5121
  const isCorrect = /* @__PURE__ */ user_derived(() => get(correctness) === "correct");
5036
5122
  const isIncorrect = /* @__PURE__ */ user_derived(() => get(correctness) === "incorrect");
5037
- const isAudioOnlyMode = /* @__PURE__ */ user_derived(() => $$props?.model?.interactionMode === "audio_mc_only");
5123
+ const isAudioOnlyMode = /* @__PURE__ */ user_derived(() => model()?.interactionMode === "audio_mc_only");
5038
5124
  const isBlankOnlyTemplate = /* @__PURE__ */ user_derived(() => {
5039
- const t = $$props?.model?.template || "";
5125
+ const t = model()?.template || "";
5040
5126
  if (!t) return false;
5041
5127
  return t.replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").trim() === BLANK_TOKEN;
5042
5128
  });
5043
- const layoutProfile = /* @__PURE__ */ user_derived(() => $$props?.model?.layoutProfile || "");
5044
- const choiceLayout = /* @__PURE__ */ user_derived(() => $$props?.model?.choiceLayout || (get(isAudioOnlyMode) || get(isBlankOnlyTemplate) ? "horizontal" : "vertical"));
5129
+ const layoutProfile = /* @__PURE__ */ user_derived(() => model()?.layoutProfile || "");
5130
+ const choiceLayout = /* @__PURE__ */ user_derived(() => model()?.choiceLayout || (get(isAudioOnlyMode) || get(isBlankOnlyTemplate) ? "horizontal" : "vertical"));
5045
5131
  const isHorizontalChoices = /* @__PURE__ */ user_derived(() => get(choiceLayout) === "horizontal");
5046
- const showVisibleTranscript = /* @__PURE__ */ user_derived(() => !!$$props?.model?.showVisibleTranscript);
5047
- const hasPlayableAudio = /* @__PURE__ */ user_derived(() => !!$$props?.model?.hasAudio && !!$$props?.model?.audioUrl);
5048
- const hasAudioButMissingResource = /* @__PURE__ */ user_derived(() => !!$$props?.model?.hasAudio && !$$props?.model?.audioUrl);
5049
- const hasInlineSentenceAudioLayout = /* @__PURE__ */ user_derived(() => get(layoutProfile) === "inline_sentence" && !!$$props?.model?.hasAudio);
5132
+ const showVisibleTranscript = /* @__PURE__ */ user_derived(() => !!model()?.showVisibleTranscript);
5133
+ const hasPlayableAudio = /* @__PURE__ */ user_derived(() => !!model()?.hasAudio && !!model()?.audioUrl);
5134
+ const hasAudioButMissingResource = /* @__PURE__ */ user_derived(() => !!model()?.hasAudio && !model()?.audioUrl);
5135
+ const hasInlineSentenceAudioLayout = /* @__PURE__ */ user_derived(() => get(layoutProfile) === "inline_sentence" && !!model()?.hasAudio);
5050
5136
  const uiText = /* @__PURE__ */ user_derived(() => ({
5051
5137
  ...DEFAULT_UI_TEXT,
5052
- ...$$props?.model?.uiText || {}
5138
+ ...model()?.uiText || {}
5053
5139
  }));
5054
5140
  const profilePresetLimits = /* @__PURE__ */ user_derived(() => {
5055
5141
  const profile = String(get(layoutProfile) || "");
5056
5142
  const defaults = DEFAULT_LAYOUT_PROFILE_PRESETS[profile] || {};
5057
- const customPresets = $$props?.model?.layoutProfilePresets && typeof $$props.model.layoutProfilePresets === "object" ? $$props.model.layoutProfilePresets : {};
5143
+ const customPresets = model()?.layoutProfilePresets && typeof model().layoutProfilePresets === "object" ? model().layoutProfilePresets : {};
5058
5144
  const custom = customPresets[profile] && typeof customPresets[profile] === "object" ? customPresets[profile] : {};
5059
5145
  return {
5060
5146
  ...defaults,
@@ -5062,7 +5148,7 @@ function McPopulatedBlank($$anchor, $$props) {
5062
5148
  };
5063
5149
  });
5064
5150
  const layoutLimits = /* @__PURE__ */ user_derived(() => {
5065
- const configured = $$props?.model?.layoutLimits && typeof $$props.model.layoutLimits === "object" ? $$props.model.layoutLimits : {};
5151
+ const configured = model()?.layoutLimits && typeof model().layoutLimits === "object" ? model().layoutLimits : {};
5066
5152
  return {
5067
5153
  ...DEFAULT_LAYOUT_LIMITS,
5068
5154
  ...get(profilePresetLimits),
@@ -5089,6 +5175,8 @@ function McPopulatedBlank($$anchor, $$props) {
5089
5175
  `--mpb-horizontal-choice-radio-top-margin:${get(layoutLimits).horizontalChoiceRadioTopMarginRem}rem`,
5090
5176
  `--mpb-audio-blank-template-margin-top:${get(layoutLimits).audioBlankTemplateMarginTopRem}rem`,
5091
5177
  `--mpb-audio-blank-template-margin-bottom:${get(layoutLimits).audioBlankTemplateMarginBottomRem}rem`,
5178
+ `--mpb-audio-instructions-max-width:${get(layoutLimits).audioInstructionsMaxWidthPx}px`,
5179
+ `--mpb-narrow-choice-max-width:${get(layoutLimits).narrowHorizontalChoiceMaxWidthPx}px`,
5092
5180
  `--mpb-stimulus-grid-column-gap:${get(layoutLimits).stimulusGridColumnGapRem}rem`,
5093
5181
  `--mpb-stimulus-grid-row-gap:${get(layoutLimits).stimulusGridRowGapRem}rem`,
5094
5182
  `--mpb-stimulus-sentence-margin-top:${get(layoutLimits).stimulusSentenceMarginTopRem}rem`,
@@ -5104,12 +5192,12 @@ function McPopulatedBlank($$anchor, $$props) {
5104
5192
  `--mpb-inline-choices-margin-top:${get(layoutLimits).inlineChoicesMarginTopRem}rem`
5105
5193
  ].join(";"));
5106
5194
  const useFeatureButtonAudio = /* @__PURE__ */ user_derived(() => {
5107
- if (typeof $$props?.model?.useFeatureButtonAudio === "boolean") return !!$$props.model.useFeatureButtonAudio;
5195
+ if (typeof model()?.useFeatureButtonAudio === "boolean") return !!model().useFeatureButtonAudio;
5108
5196
  const profile = get(layoutProfile) || "";
5109
- return !!$$props?.model?.hasAudio && (profile === "audio_blank_only" || profile === "stimulus_image_blank" || profile === "token_sequence");
5197
+ return !!model()?.hasAudio && (profile === "audio_blank_only" || profile === "stimulus_image_blank" || profile === "token_sequence");
5110
5198
  });
5111
5199
  const templateParts = /* @__PURE__ */ user_derived(() => {
5112
- const t = $$props?.model?.template || "";
5200
+ const t = model()?.template || "";
5113
5201
  const idx = t.indexOf(BLANK_TOKEN);
5114
5202
  if (idx < 0) return {
5115
5203
  before: t,
@@ -5129,18 +5217,18 @@ function McPopulatedBlank($$anchor, $$props) {
5129
5217
  if (get(layoutProfile) === "audio_blank_only" || get(layoutProfile) === "stimulus_image_blank") return `${get(layoutLimits).blankUnderlineWideWidthPx}px`;
5130
5218
  return `${get(layoutLimits).blankUnderlineWidthPx}px`;
5131
5219
  });
5132
- const choices = /* @__PURE__ */ user_derived(() => Array.isArray($$props?.model?.choices) ? $$props.model.choices : []);
5133
- const choiceMode = /* @__PURE__ */ user_derived(() => $$props?.model?.choiceMode || "text");
5134
- const selectedId = /* @__PURE__ */ user_derived(() => $$props?.session?.choiceId || get(localChoiceId) || "");
5135
- const radioGroupName = /* @__PURE__ */ user_derived(() => `${instanceId}-choice-group-${$$props?.model?.id || "1"}`);
5220
+ const choices = /* @__PURE__ */ user_derived(() => Array.isArray(model()?.choices) ? model().choices : []);
5221
+ const choiceMode = /* @__PURE__ */ user_derived(() => model()?.choiceMode || "text");
5222
+ const selectedId = /* @__PURE__ */ user_derived(() => session()?.choiceId || get(localChoiceId) || "");
5223
+ const radioGroupName = /* @__PURE__ */ user_derived(() => `${instanceId}-choice-group-${model()?.id || "1"}`);
5136
5224
  let showCorrectAnswer = /* @__PURE__ */ state(false);
5137
5225
  const displayChoiceId = /* @__PURE__ */ user_derived(() => {
5138
- if (get(isEvaluateMode) && get(showCorrectAnswer) && $$props?.model?.correctChoiceId) return $$props.model.correctChoiceId;
5226
+ if (get(isEvaluateMode) && get(showCorrectAnswer) && model()?.correctChoiceId) return model().correctChoiceId;
5139
5227
  return get(selectedId);
5140
5228
  });
5141
5229
  const displayChoice = /* @__PURE__ */ user_derived(() => get(choices).find((c) => c.id === get(displayChoiceId)));
5142
5230
  const legendText = /* @__PURE__ */ user_derived(() => {
5143
- const plain = ($$props?.model?.prompt || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
5231
+ const plain = (model()?.prompt || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
5144
5232
  const maxChars = Math.max(8, Number(get(layoutLimits).legendMaxChars) || DEFAULT_LAYOUT_LIMITS.legendMaxChars);
5145
5233
  return plain.length > maxChars ? `${plain.slice(0, Math.max(1, maxChars - 1))}…` : plain || get(uiText).answerChoices;
5146
5234
  });
@@ -5148,15 +5236,21 @@ function McPopulatedBlank($$anchor, $$props) {
5148
5236
  const transcriptId = /* @__PURE__ */ user_derived(() => `${instanceId}-transcript`);
5149
5237
  const legendId = /* @__PURE__ */ user_derived(() => `${instanceId}-choices-legend`);
5150
5238
  const resultId = /* @__PURE__ */ user_derived(() => `${instanceId}-result`);
5151
- const choicesGroupLabelledBy = /* @__PURE__ */ user_derived(() => $$props?.model?.prompt ? get(promptId) : get(legendId));
5239
+ const choicesGroupLabelledBy = /* @__PURE__ */ user_derived(() => model()?.prompt ? get(promptId) : void 0);
5240
+ const choicesGroupAriaLabel = /* @__PURE__ */ user_derived(() => {
5241
+ if (model()?.prompt) return void 0;
5242
+ const explicit = String(model()?.choiceGroupLabel || "").trim();
5243
+ if (explicit) return explicit;
5244
+ return get(legendText);
5245
+ });
5152
5246
  const templateDescribedBy = /* @__PURE__ */ user_derived(() => {
5153
5247
  const ids = [];
5154
- if ($$props?.model?.prompt) ids.push(get(promptId));
5155
- if ($$props?.model?.hasAudio && $$props?.model?.audioTranscript) ids.push(get(transcriptId));
5248
+ if (model()?.prompt) ids.push(get(promptId));
5249
+ if (model()?.hasAudio && model()?.audioTranscript) ids.push(get(transcriptId));
5156
5250
  return ids.length ? ids.join(" ") : void 0;
5157
5251
  });
5158
5252
  const lang = /* @__PURE__ */ user_derived(() => {
5159
- const locale = $$props?.model?.locale || "";
5253
+ const locale = model()?.locale || "";
5160
5254
  return locale ? locale.slice(0, 2) : "en";
5161
5255
  });
5162
5256
  const audioErrorMessage = /* @__PURE__ */ user_derived(() => get(hasAudioButMissingResource) ? get(uiText).audioResourceUnavailable : "");
@@ -5167,7 +5261,7 @@ function McPopulatedBlank($$anchor, $$props) {
5167
5261
  return "";
5168
5262
  });
5169
5263
  function emitSession(updatedSession, sourceEl) {
5170
- const host = sourceEl?.closest?.("mc-populated-blank-element") || document.querySelector("mc-populated-blank-element");
5264
+ const host = getHostElement(sourceEl);
5171
5265
  if (host?.onSessionChange) {
5172
5266
  host.onSessionChange(updatedSession);
5173
5267
  return;
@@ -5187,8 +5281,8 @@ function McPopulatedBlank($$anchor, $$props) {
5187
5281
  const choiceId = input.value;
5188
5282
  set(localChoiceId, choiceId, true);
5189
5283
  emitSession({
5190
- ...$$props.session,
5191
- id: $$props.session?.id || $$props.model?.id || "1",
5284
+ ...session(),
5285
+ id: session()?.id || model()?.id || "1",
5192
5286
  element: "mc-populated-blank",
5193
5287
  choiceId
5194
5288
  }, input);
@@ -5197,7 +5291,7 @@ function McPopulatedBlank($$anchor, $$props) {
5197
5291
  set(showCorrectAnswer, !get(showCorrectAnswer));
5198
5292
  }
5199
5293
  function onRadioGroupKeydown(e) {
5200
- if ($$props?.model?.disabled) return;
5294
+ if (model()?.disabled) return;
5201
5295
  const key = e.key;
5202
5296
  if (![
5203
5297
  "ArrowDown",
@@ -5223,24 +5317,33 @@ function McPopulatedBlank($$anchor, $$props) {
5223
5317
  });
5224
5318
  }
5225
5319
  function onAudioPlaying(e) {
5226
- const host = e.currentTarget?.closest("mc-populated-blank-element");
5320
+ const host = getHostElement(e.currentTarget);
5227
5321
  set(isMediaPlaying, true);
5228
5322
  host?.onAudioStarted?.();
5229
5323
  set(autoPlayPromptOpen, false);
5230
5324
  }
5231
5325
  function onAudioEnded(e) {
5232
- const host = e.currentTarget?.closest("mc-populated-blank-element");
5326
+ const host = getHostElement(e.currentTarget);
5233
5327
  set(isMediaPlaying, false);
5234
5328
  host?.onAudioEnded?.();
5235
5329
  }
5330
+ function getHostElement(sourceEl) {
5331
+ let cursor = sourceEl;
5332
+ while (cursor) {
5333
+ const maybeHost = cursor;
5334
+ if (typeof maybeHost?.onSessionChange === "function" || typeof maybeHost?.onAudioStarted === "function" || typeof maybeHost?.onAudioEnded === "function") return maybeHost;
5335
+ cursor = cursor.parentElement;
5336
+ }
5337
+ return document.querySelector("mc-populated-blank") || null;
5338
+ }
5236
5339
  function speechButtonLabel(locale = "") {
5237
5340
  return locale.toLowerCase().startsWith("es") ? get(uiText).listenLabelEs : get(uiText).listenLabelEn;
5238
5341
  }
5239
5342
  const featureAudioSkin = /* @__PURE__ */ user_derived(() => {
5240
- const locale = String($$props?.model?.locale || "").toLowerCase();
5343
+ const locale = String(model()?.locale || "").toLowerCase();
5241
5344
  const lang = locale.slice(0, 2);
5242
- const byLocale = $$props?.model?.audioButtonSkinsByLocale && typeof $$props.model.audioButtonSkinsByLocale === "object" ? $$props.model.audioButtonSkinsByLocale : {};
5243
- const customSingle = $$props?.model?.audioButtonSkin && typeof $$props.model.audioButtonSkin === "object" ? $$props.model.audioButtonSkin : null;
5345
+ const byLocale = model()?.audioButtonSkinsByLocale && typeof model().audioButtonSkinsByLocale === "object" ? model().audioButtonSkinsByLocale : {};
5346
+ const customSingle = model()?.audioButtonSkin && typeof model().audioButtonSkin === "object" ? model().audioButtonSkin : null;
5244
5347
  const defaultSkin = locale.startsWith("es") ? DEFAULT_AUDIO_BUTTON_SKINS.es : DEFAULT_AUDIO_BUTTON_SKINS.default;
5245
5348
  return byLocale[locale] || byLocale[lang] || byLocale.default || customSingle || defaultSkin;
5246
5349
  });
@@ -5248,27 +5351,105 @@ function McPopulatedBlank($$anchor, $$props) {
5248
5351
  if (get(hasPlayableAudio) && get(audioEl)) get(audioEl).play().catch(() => {});
5249
5352
  }
5250
5353
  user_effect(() => {
5251
- if ($$props?.session?.choiceId) set(localChoiceId, $$props.session.choiceId, true);
5354
+ if (session()?.choiceId) set(localChoiceId, session().choiceId, true);
5355
+ });
5356
+ user_effect(() => {
5357
+ const el = get(audioEl);
5358
+ if (!el) return;
5359
+ const handlePlaying = (e) => onAudioPlaying(e);
5360
+ const handleEnded = (e) => onAudioEnded(e);
5361
+ el.addEventListener("playing", handlePlaying);
5362
+ el.addEventListener("ended", handleEnded);
5363
+ return () => {
5364
+ el.removeEventListener("playing", handlePlaying);
5365
+ el.removeEventListener("ended", handleEnded);
5366
+ };
5367
+ });
5368
+ user_effect(() => {
5369
+ const btn = get(featureAudioButtonEl);
5370
+ if (!btn) return;
5371
+ const handleClick = () => playFeatureAudio();
5372
+ btn.addEventListener("click", handleClick);
5373
+ return () => {
5374
+ btn.removeEventListener("click", handleClick);
5375
+ };
5376
+ });
5377
+ user_effect(() => {
5378
+ const btn = get(autoplayEnableButtonEl);
5379
+ if (!btn) return;
5380
+ const handleClick = () => handleEnableAutoplayClick();
5381
+ btn.addEventListener("click", handleClick);
5382
+ return () => {
5383
+ btn.removeEventListener("click", handleClick);
5384
+ };
5385
+ });
5386
+ user_effect(() => {
5387
+ const btn = get(toggleCorrectAnswerButtonEl);
5388
+ if (!btn) return;
5389
+ const handleClick = () => toggleCorrectAnswer();
5390
+ btn.addEventListener("click", handleClick);
5391
+ return () => {
5392
+ btn.removeEventListener("click", handleClick);
5393
+ };
5394
+ });
5395
+ user_effect(() => {
5396
+ const group = get(choicesGroupEl);
5397
+ if (!group) return;
5398
+ const handleChange = (e) => {
5399
+ const target = e.target;
5400
+ if (!target || target.type !== "radio") return;
5401
+ onRadioChange(e);
5402
+ };
5403
+ const handleKeydown = (e) => onRadioGroupKeydown(e);
5404
+ group.addEventListener("change", handleChange);
5405
+ group.addEventListener("keydown", handleKeydown);
5406
+ return () => {
5407
+ group.removeEventListener("change", handleChange);
5408
+ group.removeEventListener("keydown", handleKeydown);
5409
+ };
5252
5410
  });
5253
5411
  user_effect(() => {
5254
- if (!$$props?.model?.hasAudio || !$$props?.model?.autoplayAudioEnabled) return;
5412
+ if (!model()?.hasAudio || !model()?.autoplayAudioEnabled) return;
5255
5413
  if (get(autoplayAttempted)) return;
5256
5414
  set(autoplayAttempted, true);
5257
- if (get(audioEl) && $$props?.model?.audioUrl) get(audioEl).play().catch(() => {
5415
+ if (get(audioEl) && model()?.audioUrl) get(audioEl).play().catch(() => {
5258
5416
  set(autoPlayPromptOpen, true);
5259
5417
  });
5260
5418
  });
5419
+ var $$exports = {
5420
+ get model() {
5421
+ return model();
5422
+ },
5423
+ set model($$value) {
5424
+ model($$value);
5425
+ flushSync();
5426
+ },
5427
+ get session() {
5428
+ return session();
5429
+ },
5430
+ set session($$value) {
5431
+ session($$value);
5432
+ flushSync();
5433
+ },
5434
+ get options() {
5435
+ return options();
5436
+ },
5437
+ set options($$value) {
5438
+ options($$value);
5439
+ flushSync();
5440
+ }
5441
+ };
5261
5442
  var div = root();
5262
5443
  var node = child(div);
5263
5444
  var consequent = ($$anchor) => {
5264
5445
  var div_1 = root_1();
5265
- html(div_1, () => $$props.model.prompt, true);
5446
+ html(div_1, () => model().prompt, true);
5266
5447
  reset(div_1);
5267
5448
  template_effect(() => set_attribute(div_1, "id", get(promptId)));
5268
5449
  append($$anchor, div_1);
5269
5450
  };
5270
5451
  if_block(node, ($$render) => {
5271
- if ($$props?.model?.prompt) $$render(consequent);
5452
+ if (model()?.prompt) $$render(consequent);
5272
5453
  });
5273
5454
  var node_1 = sibling(node, 2);
5274
5455
  var consequent_6 = ($$anchor) => {
@@ -5282,17 +5463,15 @@ function McPopulatedBlank($$anchor, $$props) {
5282
5463
  var img = child(button);
5283
5464
  var img_1 = sibling(img, 2);
5284
5465
  reset(button);
5466
+ bind_this(button, ($$value) => set(featureAudioButtonEl, $$value), () => get(featureAudioButtonEl));
5285
5467
  template_effect(($0) => {
5286
- set_attribute(audio, "src", $$props.model.audioUrl);
5468
+ set_attribute(audio, "src", model().audioUrl);
5287
5469
  set_attribute(button, "aria-label", $0);
5288
5470
  set_class(img, 1, `listen-feature-icon pie-listen-icon rli-feature-listen ${get(isMediaPlaying) ? "" : "listen-active"}`, "svelte-6wlbb4");
5289
5471
  set_attribute(img, "src", get(featureAudioSkin).silentUrl);
5290
5472
  set_class(img_1, 1, `listen-feature-icon pie-listen-icon rli-feature-listen ${get(isMediaPlaying) ? "listen-active" : ""}`, "svelte-6wlbb4");
5291
5473
  set_attribute(img_1, "src", get(featureAudioSkin).playingUrl);
5292
- }, [() => speechButtonLabel($$props?.model?.locale)]);
5293
- event("playing", audio, onAudioPlaying);
5294
- event("ended", audio, onAudioEnded);
5295
- event("click", button, playFeatureAudio);
5474
+ }, [() => speechButtonLabel(model()?.locale)]);
5296
5475
  append($$anchor, fragment);
5297
5476
  };
5298
5477
  var consequent_3 = ($$anchor) => {
@@ -5304,19 +5483,17 @@ function McPopulatedBlank($$anchor, $$props) {
5304
5483
  var button_1 = root_5();
5305
5484
  var text = child(button_1, true);
5306
5485
  reset(button_1);
5486
+ bind_this(button_1, ($$value) => set(autoplayEnableButtonEl, $$value), () => get(autoplayEnableButtonEl));
5307
5487
  template_effect(() => set_text(text, get(uiText).clickToEnableAutoplay));
5308
- event("click", button_1, handleEnableAutoplayClick);
5309
5488
  append($$anchor, button_1);
5310
5489
  };
5311
5490
  if_block(node_3, ($$render) => {
5312
5491
  if (get(autoPlayPromptOpen)) $$render(consequent_2);
5313
5492
  });
5314
5493
  template_effect(() => {
5315
- set_attribute(audio_1, "src", $$props.model.audioUrl);
5316
- set_attribute(audio_1, "aria-describedby", $$props?.model?.audioTranscript ? get(transcriptId) : void 0);
5494
+ set_attribute(audio_1, "src", model().audioUrl);
5495
+ set_attribute(audio_1, "aria-describedby", model()?.audioTranscript ? get(transcriptId) : void 0);
5317
5496
  });
5318
- event("playing", audio_1, onAudioPlaying);
5319
- event("ended", audio_1, onAudioEnded);
5320
5497
  append($$anchor, fragment_1);
5321
5498
  };
5322
5499
  var consequent_4 = ($$anchor) => {
@@ -5343,29 +5520,29 @@ function McPopulatedBlank($$anchor, $$props) {
5343
5520
  set_class(p_1, 1, `text-sm mt-2 text-gray-700 pie-audio-transcript ${get(showVisibleTranscript) ? "" : "sr-only"}`, "svelte-6wlbb4");
5344
5521
  set_attribute(p_1, "id", get(transcriptId));
5345
5522
  set_text(text_2, `${get(uiText).transcriptLabel ?? ""}:`);
5346
- set_text(text_3, ` ${$$props.model.audioTranscript ?? ""}`);
5523
+ set_text(text_3, ` ${model().audioTranscript ?? ""}`);
5347
5524
  });
5348
5525
  append($$anchor, p_1);
5349
5526
  };
5350
5527
  if_block(node_4, ($$render) => {
5351
- if ($$props?.model?.audioTranscript) $$render(consequent_5);
5528
+ if (model()?.audioTranscript) $$render(consequent_5);
5352
5529
  });
5353
5530
  reset(div_2);
5354
5531
  append($$anchor, div_2);
5355
5532
  };
5356
5533
  if_block(node_1, ($$render) => {
5357
- if ($$props?.model?.hasAudio) $$render(consequent_6);
5534
+ if (model()?.hasAudio) $$render(consequent_6);
5358
5535
  });
5359
5536
  var node_5 = sibling(node_1, 2);
5360
5537
  var consequent_7 = ($$anchor) => {
5361
5538
  var div_3 = root_8();
5362
- html(div_3, () => $$props.model.sentenceHtml, true);
5539
+ html(div_3, () => model().sentenceHtml, true);
5363
5540
  reset(div_3);
5364
5541
  template_effect(() => set_attribute(div_3, "aria-describedby", get(templateDescribedBy)));
5365
5542
  append($$anchor, div_3);
5366
5543
  };
5367
5544
  if_block(node_5, ($$render) => {
5368
- if ($$props?.model?.sentenceHtml) $$render(consequent_7);
5545
+ if (model()?.sentenceHtml) $$render(consequent_7);
5369
5546
  });
5370
5547
  var node_6 = sibling(node_5, 2);
5371
5548
  var consequent_10 = ($$anchor) => {
@@ -5417,11 +5594,11 @@ function McPopulatedBlank($$anchor, $$props) {
5417
5594
  var text_4 = child(span_3, true);
5418
5595
  reset(span_3);
5419
5596
  reset(button_2);
5597
+ bind_this(button_2, ($$value) => set(toggleCorrectAnswerButtonEl, $$value), () => get(toggleCorrectAnswerButtonEl));
5420
5598
  template_effect(() => {
5421
5599
  set_attribute(button_2, "aria-pressed", get(showCorrectAnswer));
5422
5600
  set_text(text_4, get(showCorrectAnswer) ? get(uiText).hideCorrectAnswer : get(uiText).showCorrectAnswer);
5423
5601
  });
5424
- event("click", button_2, toggleCorrectAnswer);
5425
5602
  append($$anchor, button_2);
5426
5603
  };
5427
5604
  if_block(node_10, ($$render) => {
@@ -5480,10 +5657,9 @@ function McPopulatedBlank($$anchor, $$props) {
5480
5657
  set_attribute(input_1, "name", get(radioGroupName));
5481
5658
  set_attribute(input_1, "id", `${instanceId}-opt-${get(c).id}`);
5482
5659
  set_value(input_1, get(c).id);
5483
- set_checked(input_1, (get(showCorrectAnswer) && get(isEvaluateMode) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id);
5484
- input_1.disabled = $$props?.model?.disabled;
5660
+ set_checked(input_1, (get(showCorrectAnswer) && get(isEvaluateMode) ? model()?.correctChoiceId : get(selectedId)) === get(c).id);
5661
+ input_1.disabled = model()?.disabled;
5485
5662
  });
5486
- event("change", input_1, onRadioChange);
5487
5663
  append($$anchor, label);
5488
5664
  };
5489
5665
  var alternate_3 = ($$anchor) => {
@@ -5515,11 +5691,10 @@ function McPopulatedBlank($$anchor, $$props) {
5515
5691
  set_attribute(input_2, "name", get(radioGroupName));
5516
5692
  set_attribute(input_2, "id", `${instanceId}-opt-${get(c).id}`);
5517
5693
  set_value(input_2, get(c).id);
5518
- set_checked(input_2, (get(showCorrectAnswer) && get(isEvaluateMode) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id);
5519
- input_2.disabled = $$props?.model?.disabled;
5694
+ set_checked(input_2, (get(showCorrectAnswer) && get(isEvaluateMode) ? model()?.correctChoiceId : get(selectedId)) === get(c).id);
5695
+ input_2.disabled = model()?.disabled;
5520
5696
  set_attribute(label_1, "for", `${instanceId}-opt-${get(c).id}`);
5521
5697
  });
5522
- event("change", input_2, onRadioChange);
5523
5698
  append($$anchor, fragment_2);
5524
5699
  };
5525
5700
  if_block(node_12, ($$render) => {
@@ -5546,28 +5721,29 @@ function McPopulatedBlank($$anchor, $$props) {
5546
5721
  if (get(isEvaluateMode) && !get(showCorrectAnswer)) $$render(consequent_18);
5547
5722
  });
5548
5723
  reset(div_6);
5549
- 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) ? $$props?.model?.correctChoiceId : get(selectedId)) === get(c).id ? "is-selected pie-choice-selected" : ""}`, "svelte-6wlbb4"));
5724
+ 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"));
5550
5725
  append($$anchor, div_6);
5551
5726
  });
5552
5727
  reset(div_5);
5728
+ bind_this(div_5, ($$value) => set(choicesGroupEl, $$value), () => get(choicesGroupEl));
5553
5729
  reset(fieldset);
5554
5730
  reset(div);
5555
5731
  template_effect(() => {
5556
5732
  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");
5557
5733
  set_attribute(div, "lang", get(lang));
5558
5734
  set_style(div, get(rootStyle));
5559
- fieldset.disabled = $$props?.model?.disabled;
5735
+ fieldset.disabled = model()?.disabled;
5560
5736
  set_attribute(legend, "id", get(legendId));
5561
5737
  set_text(text_6, get(legendText));
5562
5738
  set_class(div_5, 1, `pie-choices ${get(isHorizontalChoices) ? "flex flex-row flex-wrap items-start justify-center" : "flex flex-col"}`, "svelte-6wlbb4");
5563
5739
  set_attribute(div_5, "aria-labelledby", get(choicesGroupLabelledBy));
5740
+ set_attribute(div_5, "aria-label", get(choicesGroupAriaLabel));
5564
5741
  set_attribute(div_5, "aria-describedby", get(resultText) ? get(resultId) : void 0);
5565
5742
  });
5566
- event("keydown", div_5, onRadioGroupKeydown);
5567
5743
  append($$anchor, div);
5568
- pop();
5744
+ return pop($$exports);
5569
5745
  }
5570
- customElements.define("mc-populated-blank-element", create_custom_element(McPopulatedBlank, {
5746
+ customElements.define("mc-populated-blank", create_custom_element(McPopulatedBlank, {
5571
5747
  model: { type: "Object" },
5572
5748
  session: { type: "Object" },
5573
5749
  options: { type: "Object" }