@pie-element/mc-populated-blank 0.3.0 → 0.3.1-next.20261004185415

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.
package/README.md CHANGED
@@ -172,6 +172,8 @@ This element bundles variant-specific CSS in delivery, so it loads no stylesheet
172
172
 
173
173
  Every selector in a variant CSS file starts at `.mc-populated-blank-root` (`variant-css-scope.test.ts` enforces it), so the styles cannot leak into other PIE elements. At injection each root selector is narrowed to roots whose `data-mpb-css` carries a hash of this build's sheets, so two versions of the element on one page style only their own instances. The sheets go into the document head, or into the shadow root the element renders in.
174
174
 
175
+ The sheets leave the radio's size to `ChoiceRow.svelte`, which renders it at the 24×24 minimum target size; `variant-css-scope.test.ts` rejects a sheet that scales or resizes `pie-choice-radio`.
176
+
175
177
  ### Maintenance workflow
176
178
 
177
179
  1. Edit the variant's file under `src/delivery/cqt-css/`.
@@ -12,15 +12,50 @@ var I = {
12
12
  limitMaxChoicesPerCategory: "You've reached the limit of {{maxChoicesPerCategory}} responses per area. To add another response, one must first be removed.",
13
13
  maxChoicesPerCategoryRestriction: "To change this value to {{maxChoicesPerCategory}}, each category must have {{maxChoicesPerCategory}} or fewer answer choice[s]."
14
14
  },
15
+ dragInTheBlank: { blank: "Blank {{index}}" },
15
16
  ebsr: { part: "Part {{index}}" },
17
+ editableHtml: {
18
+ responseAreaToolbar: "Response area",
19
+ toolbar: "Editing tools"
20
+ },
21
+ explicitConstructedResponse: { response: "Response {{index}} of {{total}}" },
22
+ extendedTextEntry: {
23
+ comment: "Comment",
24
+ response: "Your response"
25
+ },
26
+ fractionModel: {
27
+ modelLabel_one: "Model {{index}} of {{total}}: {{selected}} of {{count}} part selected",
28
+ modelLabel_other: "Model {{index}} of {{total}}: {{selected}} of {{count}} parts selected"
29
+ },
16
30
  numberLine: {
17
31
  addElementLimit_one: "You can only add {{count}} element",
18
32
  addElementLimit_other: "You can only add {{count}} elements",
19
- clearAll: "Clear all"
33
+ clearAll: "Clear all",
34
+ closedEnd: "closed",
35
+ graphLabel: "Number line from {{min}} to {{max}}, with a tick every {{interval}}",
36
+ line: "Line from {{left}} ({{leftEnd}}) to {{right}} ({{rightEnd}}).",
37
+ openEnd: "open",
38
+ plottedNone: "Nothing is plotted.",
39
+ pointClosed: "Closed point at {{position}}.",
40
+ pointOpen: "Open point at {{position}}.",
41
+ rayLeft: "Ray from {{position}} ({{end}}) to the left.",
42
+ rayRight: "Ray from {{position}} ({{end}}) to the right."
43
+ },
44
+ hotspot: {
45
+ correctlySelected: "Correctly selected",
46
+ image_one: "Image with {{count}} hotspot",
47
+ image_other: "Image with {{count}} hotspots",
48
+ shape: "Hotspot {{index}} of {{total}}",
49
+ shouldHaveBeenSelected: "Should have been selected",
50
+ shouldNotHaveBeenSelected: "Should not have been selected"
20
51
  },
21
52
  imageClozeAssociation: {
53
+ answerChoice: "Answer choice {{index}} of {{total}}",
54
+ image_one: "Image with {{count}} response area",
55
+ image_other: "Image with {{count}} response areas",
22
56
  reachedLimit_one: "You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.",
23
- reachedLimit_other: "Full"
57
+ reachedLimit_other: "Full",
58
+ responseArea: "Response area {{index}} of {{total}}"
24
59
  },
25
60
  drawingResponse: {
26
61
  fillColor: "Fill color",
@@ -36,7 +71,9 @@ var I = {
36
71
  green: "Green",
37
72
  white: "White",
38
73
  black: "Black",
39
- onDoubleClick: "Double click to edit this text. Press Enter to submit."
74
+ onDoubleClick: "Double click to edit this text. Press Enter to submit.",
75
+ drawingArea: "Drawing area",
76
+ drawingAreaOverImage: "Drawing area over a background image"
40
77
  },
41
78
  charting: {
42
79
  addCategory: "Add category",
@@ -44,14 +81,34 @@ var I = {
44
81
  add: "Add",
45
82
  delete: "Delete",
46
83
  newLabel: "New label",
84
+ categoryLabel: "Category {{index}} label",
47
85
  reachedLimit_other: "There can't be more than {{count}} categories.",
48
86
  keyLegend: {
49
87
  incorrectAnswer: "Student incorrect answer",
50
88
  correctAnswer: "Student correct answer",
51
89
  correctKeyAnswer: "Answer key correct"
52
- }
90
+ },
91
+ chartTypes: {
92
+ bar: "Bar chart",
93
+ histogram: "Histogram",
94
+ lineDot: "Line chart with dots",
95
+ lineCross: "Line chart with crosses",
96
+ dotPlot: "Dot plot",
97
+ linePlot: "Line plot"
98
+ },
99
+ categories_zero: "No categories.",
100
+ categories_one: "{{count}} category: {{categories}}.",
101
+ categories_other: "{{count}} categories: {{categories}}.",
102
+ valueRange: "Values from {{min}} to {{max}}.",
103
+ labelledValueRange: "{{label}} from {{min}} to {{max}}."
53
104
  },
54
105
  graphing: {
106
+ graph: "Coordinate graph",
107
+ axisRange: "{{axis}} axis from {{min}} to {{max}}.",
108
+ plotted_zero: "Nothing plotted.",
109
+ plotted_one: "{{count}} object plotted: {{marks}}.",
110
+ plotted_other: "{{count}} objects plotted: {{marks}}.",
111
+ shadedRegion: "Shaded region",
55
112
  point: "Point",
56
113
  circle: "Circle",
57
114
  line: "Line",
@@ -64,10 +121,13 @@ var I = {
64
121
  sine: "Sine",
65
122
  vector: "Vector",
66
123
  label: "Label",
124
+ markLabel: "Label at ({{x}}, {{y}})",
125
+ correctMarkLabel: "Correct label at ({{x}}, {{y}})",
67
126
  redo: "Redo",
68
127
  reset: "Reset"
69
128
  },
70
129
  mathInline: { primaryCorrectWithAlternates: "Note: The answer shown above is the primary correct answer specified by the author for this item, but other answers may also be recognized as correct." },
130
+ mathInput: { enterAnswer: "Enter answer" },
71
131
  mcPopulatedBlank: {
72
132
  answerChoices: "Answer choices",
73
133
  blankLabel: "blank",
@@ -152,15 +212,50 @@ var I = {
152
212
  limitMaxChoicesPerCategory: "Has alcanzado el límite de {{maxChoicesPerCategory}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.",
153
213
  maxChoicesPerCategoryRestriction: "Para cambiar este valor a {{maxChoicesPerCategory}}, cada categoría debe tener {{maxChoicesPerCategory}} o menos opciones de respuesta"
154
214
  },
215
+ dragInTheBlank: { blank: "Espacio en blanco {{index}}" },
155
216
  ebsr: { part: "Parte {{index}}" },
217
+ editableHtml: {
218
+ responseAreaToolbar: "Área de respuesta",
219
+ toolbar: "Herramientas de edición"
220
+ },
221
+ explicitConstructedResponse: { response: "Respuesta {{index}} de {{total}}" },
222
+ extendedTextEntry: {
223
+ comment: "Comentario",
224
+ response: "Tu respuesta"
225
+ },
226
+ fractionModel: {
227
+ modelLabel_one: "Modelo {{index}} de {{total}}: {{selected}} de {{count}} parte seleccionada",
228
+ modelLabel_other: "Modelo {{index}} de {{total}}: {{selected}} de {{count}} partes seleccionadas"
229
+ },
156
230
  numberLine: {
157
231
  addElementLimit_one: "Solo puedes agregar {{count}} elemento",
158
232
  addElementLimit_other: "Solo puedes agregar {{count}} elementos",
159
- clearAll: "Borrar todo"
233
+ clearAll: "Borrar todo",
234
+ closedEnd: "cerrado",
235
+ graphLabel: "Recta numérica de {{min}} a {{max}}, con una marca cada {{interval}}",
236
+ line: "Línea de {{left}} ({{leftEnd}}) a {{right}} ({{rightEnd}}).",
237
+ openEnd: "abierto",
238
+ plottedNone: "No hay nada marcado en la recta.",
239
+ pointClosed: "Punto cerrado en {{position}}.",
240
+ pointOpen: "Punto abierto en {{position}}.",
241
+ rayLeft: "Rayo desde {{position}} ({{end}}) hacia la izquierda.",
242
+ rayRight: "Rayo desde {{position}} ({{end}}) hacia la derecha."
243
+ },
244
+ hotspot: {
245
+ correctlySelected: "Seleccionada correctamente",
246
+ image_one: "Imagen con {{count}} zona activa",
247
+ image_other: "Imagen con {{count}} zonas activas",
248
+ shape: "Zona activa {{index}} de {{total}}",
249
+ shouldHaveBeenSelected: "Debía seleccionarse",
250
+ shouldNotHaveBeenSelected: "No debía seleccionarse"
160
251
  },
161
252
  imageClozeAssociation: {
253
+ answerChoice: "Opción de respuesta {{index}} de {{total}}",
254
+ image_one: "Imagen con {{count}} área de respuesta",
255
+ image_other: "Imagen con {{count}} áreas de respuesta",
162
256
  reachedLimit_one: "Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.",
163
- reachedLimit_other: "Lleno"
257
+ reachedLimit_other: "Lleno",
258
+ responseArea: "Área de respuesta {{index}} de {{total}}"
164
259
  },
165
260
  drawingResponse: {
166
261
  fillColor: "Color de relleno",
@@ -176,7 +271,9 @@ var I = {
176
271
  green: "Verde",
177
272
  white: "Blanco",
178
273
  black: "Negro",
179
- onDoubleClick: "Haz doble clic para revisar este texto. Presiona el botón de ingreso para enviar"
274
+ onDoubleClick: "Haz doble clic para revisar este texto. Presiona el botón de ingreso para enviar",
275
+ drawingArea: "Área de dibujo",
276
+ drawingAreaOverImage: "Área de dibujo sobre una imagen de fondo"
180
277
  },
181
278
  charting: {
182
279
  addCategory: "Añadir categoría",
@@ -184,14 +281,34 @@ var I = {
184
281
  add: "Añadir",
185
282
  delete: "Eliminar",
186
283
  newLabel: "Nueva etiqueta",
284
+ categoryLabel: "Etiqueta de la categoría {{index}}",
187
285
  reachedLimit_other: "No puede haber más de {{count}} categorías.",
188
286
  keyLegend: {
189
287
  incorrectAnswer: "Respuesta incorrecta del estudiante",
190
288
  correctAnswer: "Respuesta correcta del estudiante",
191
289
  correctKeyAnswer: "Clave de respuesta correcta"
192
- }
290
+ },
291
+ chartTypes: {
292
+ bar: "Gráfico de barras",
293
+ histogram: "Histograma",
294
+ lineDot: "Gráfico de líneas con puntos",
295
+ lineCross: "Gráfico de líneas con cruces",
296
+ dotPlot: "Diagrama de puntos",
297
+ linePlot: "Diagrama de líneas"
298
+ },
299
+ categories_zero: "Sin categorías.",
300
+ categories_one: "{{count}} categoría: {{categories}}.",
301
+ categories_other: "{{count}} categorías: {{categories}}.",
302
+ valueRange: "Valores de {{min}} a {{max}}.",
303
+ labelledValueRange: "{{label}} de {{min}} a {{max}}."
193
304
  },
194
305
  graphing: {
306
+ graph: "Gráfica de coordenadas",
307
+ axisRange: "Eje {{axis}} de {{min}} a {{max}}.",
308
+ plotted_zero: "Nada trazado.",
309
+ plotted_one: "{{count}} objeto trazado: {{marks}}.",
310
+ plotted_other: "{{count}} objetos trazados: {{marks}}.",
311
+ shadedRegion: "Región sombreada",
195
312
  point: "Punto",
196
313
  circle: "Circulo",
197
314
  line: "Línea",
@@ -204,10 +321,13 @@ var I = {
204
321
  sine: "Seno",
205
322
  vector: "Vector",
206
323
  label: "Etiqueta",
324
+ markLabel: "Etiqueta en ({{x}}, {{y}})",
325
+ correctMarkLabel: "Etiqueta correcta en ({{x}}, {{y}})",
207
326
  redo: "Rehacer",
208
327
  reset: "Reiniciar"
209
328
  },
210
329
  mathInline: { primaryCorrectWithAlternates: "Nota: La respuesta que se muestra arriba es la respuesta correcta principal especificada por el autor para esta pregunta, pero también se pueden reconocer otras respuestas como correctas." },
330
+ mathInput: { enterAnswer: "Escribe la respuesta" },
211
331
  mcPopulatedBlank: {
212
332
  answerChoices: "Opciones de respuesta",
213
333
  blankLabel: "espacio en blanco",
@@ -1768,7 +1888,7 @@ k(tt, {
1768
1888
  //#region src/delivery/ChoiceRow.svelte
1769
1889
  var nt = d("<img class=\"choice-image pie-choice-image svelte-8xu1pt\" style=\"max-width:var(--mpb-choice-image-max-width, 9.375rem);max-height:var(--mpb-choice-image-max-height, 9.375rem);\"/>"), rt = d("<span class=\"choice-html pie-choice-label svelte-8xu1pt\"></span>"), it = d("<label class=\"choice-tile pie-choice-tile svelte-8xu1pt\"><span class=\"choice-tile-content pie-choice-tile-content svelte-8xu1pt\"><!></span> <input type=\"radio\" class=\"choice-radio-bottom pie-choice-radio pie-choice-radio-bottom svelte-8xu1pt\"/></label>"), at = d("<img class=\"choice-image pie-choice-image svelte-8xu1pt\" style=\"max-height:var(--mpb-choice-image-max-height, 5rem);\"/>"), ot = d("<input type=\"radio\" class=\"choice-radio-inline pie-choice-radio pie-choice-radio-inline svelte-8xu1pt\"/> <label class=\"choice-label-wrap pie-choice-label-wrap svelte-8xu1pt\"><!></label>", 1), st = d("<span aria-hidden=\"true\"> </span>"), ct = d("<div style=\"gap:var(--mpb-choice-row-gap, 0.5rem);\"><!> <!></div>"), lt = {
1770
1890
  hash: "svelte-8xu1pt",
1771
- code: ".choice-row.svelte-8xu1pt {display:flex;align-items:flex-start;}.choice-row-horizontal.svelte-8xu1pt {flex-direction:column;align-items:center;width:min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));min-height:var(--mpb-choice-tile-min-height, 11rem);gap:0;}.choice-tile.svelte-8xu1pt {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;cursor:pointer;text-align:center;}.choice-tile-content.svelte-8xu1pt {width:100%;display:flex;align-items:center;justify-content:center;min-height:var(--mpb-choice-content-min-height, 7.5rem);}.choice-image.svelte-8xu1pt {display:block;object-fit:contain;}.choice-label-wrap.svelte-8xu1pt {flex:1 1 0%;cursor:pointer;}\n\n /* Every background painted here carries its own text colour: a variant that\n pins a light surface (the CQT sheets' #fcfcd3) would otherwise sit under\n the scheme's text colour, which is near-white in a dark scheme. With neither\n the hook nor --pie-text defined the declaration is invalid at computed-value\n time and the colour inherits. */.choice-row-horizontal.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-hover-bg, var(--pie-background-dark, #ecedf1));color:var(--mpb-choice-hover-color, var(--pie-text));}.pie-choice-horizontal.svelte-8xu1pt:not(.is-selected):not(:hover) .pie-choice-tile:where(.svelte-8xu1pt) {background:transparent;}.choice-row-horizontal.is-selected.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.choice-row-horizontal.is-selected.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-background-dark, #ecedf1);color:var(--pie-text);}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):not(.is-selected):not(:hover) .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:transparent;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);border-radius:6px;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt:hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);}.pie-choice.choice-correct.svelte-8xu1pt {border-left:3px solid var(--pie-correct-tertiary, #0ea449);}.pie-choice.choice-incorrect.svelte-8xu1pt {border-left:3px solid var(--pie-incorrect-icon, #bf0d00);}.pie-choice-horizontal.choice-correct.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-correct-secondary, #e8f5e9);color:var(--pie-text);}.pie-choice-horizontal.choice-incorrect.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-incorrect-secondary, #ffebee);color:var(--pie-text);}.pie-choice-feedback-badge.svelte-8xu1pt {margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:9999px;font-size:0.72rem;line-height:1;font-weight:700;color:var(--pie-white, #ffffff);}.pie-choice-feedback-correct.svelte-8xu1pt {background:var(--pie-correct-icon, #087d38);}.pie-choice-feedback-incorrect.svelte-8xu1pt {background:var(--pie-incorrect-icon, #bf0d00);}.choice-row-horizontal.svelte-8xu1pt p {margin:0;text-align:center;}.choice-html.svelte-8xu1pt p {margin:0;}.choice-html.svelte-8xu1pt {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}\n\n /* Choices carrying raw <img> markup in labelHtml (rather than the dedicated\n imageUrl/imageAlt fields) render unconstrained at their authored size\n otherwise — 3rd-party/CQT-sourced content is typically authored well above\n the platform's 150x150 content-element spec. Applies regardless of\n customType, unlike the r1-CQT-specific cqt-css overlays. See CONTOOL-3159. */.choice-html.svelte-8xu1pt img {width:150px;height:150px;}\n\n /* Only the top margin is spaced; the browser's own radio side margins would\n otherwise offset the control from its label (the demo app's preflight zeroed them). */.choice-radio-bottom.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;padding:var(--mpb-choice-radio-padding, 0px);}.choice-radio-inline.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;}"
1891
+ code: ".choice-row.svelte-8xu1pt {display:flex;align-items:flex-start;}.choice-row-horizontal.svelte-8xu1pt {flex-direction:column;align-items:center;width:min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));min-height:var(--mpb-choice-tile-min-height, 11rem);gap:0;}.choice-tile.svelte-8xu1pt {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;cursor:pointer;text-align:center;}.choice-tile-content.svelte-8xu1pt {width:100%;display:flex;align-items:center;justify-content:center;min-height:var(--mpb-choice-content-min-height, 7.5rem);}.choice-image.svelte-8xu1pt {display:block;object-fit:contain;}.choice-label-wrap.svelte-8xu1pt {flex:1 1 0%;cursor:pointer;}\n\n /* Every background painted here carries its own text colour: a variant that\n pins a light surface (the CQT sheets' #fcfcd3) would otherwise sit under\n the scheme's text colour, which is near-white in a dark scheme. With neither\n the hook nor --pie-text defined the declaration is invalid at computed-value\n time and the colour inherits. */.choice-row-horizontal.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-hover-bg, var(--pie-background-dark, #ecedf1));color:var(--mpb-choice-hover-color, var(--pie-text));}.pie-choice-horizontal.svelte-8xu1pt:not(.is-selected):not(:hover) .pie-choice-tile:where(.svelte-8xu1pt) {background:transparent;}.choice-row-horizontal.is-selected.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.choice-row-horizontal.is-selected.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-background-dark, #ecedf1);color:var(--pie-text);}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):not(.is-selected):not(:hover) .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:transparent;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);border-radius:6px;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt:hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);}.pie-choice.choice-correct.svelte-8xu1pt {border-left:3px solid var(--pie-correct-tertiary, #0ea449);}.pie-choice.choice-incorrect.svelte-8xu1pt {border-left:3px solid var(--pie-incorrect-icon, #bf0d00);}.pie-choice-horizontal.choice-correct.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-correct-secondary, #e8f5e9);color:var(--pie-text);}.pie-choice-horizontal.choice-incorrect.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-incorrect-secondary, #ffebee);color:var(--pie-text);}.pie-choice-feedback-badge.svelte-8xu1pt {margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:9999px;font-size:0.72rem;line-height:1;font-weight:700;color:var(--pie-white, #ffffff);}.pie-choice-feedback-correct.svelte-8xu1pt {background:var(--pie-correct-icon, #087d38);}.pie-choice-feedback-incorrect.svelte-8xu1pt {background:var(--pie-incorrect-icon, #bf0d00);}.choice-row-horizontal.svelte-8xu1pt p {margin:0;text-align:center;}.choice-html.svelte-8xu1pt p {margin:0;}.choice-html.svelte-8xu1pt {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}\n\n /* Choices carrying raw <img> markup in labelHtml (rather than the dedicated\n imageUrl/imageAlt fields) render unconstrained at their authored size\n otherwise — 3rd-party/CQT-sourced content is typically authored well above\n the platform's 150x150 content-element spec. Applies regardless of\n customType, unlike the r1-CQT-specific cqt-css overlays. See CONTOOL-3159. */.choice-html.svelte-8xu1pt img {width:150px;height:150px;}\n\n /* Only the top margin is spaced; the browser's own radio side margins would\n otherwise offset the control from its label (the demo app's preflight zeroed them).\n 24px is the WCAG 2.5.8 minimum target size; the native radio scales its circle to the box. */.choice-radio-bottom.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;padding:var(--mpb-choice-radio-padding, 0px);width:24px;height:24px;}.choice-radio-inline.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;width:24px;height:24px;flex-shrink:0;}"
1772
1892
  };
1773
1893
  function ut(e, t) {
1774
1894
  c(t, !0), ee(e, lt);
@@ -2196,7 +2316,7 @@ var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n Applied v
2196
2316
  "sel_r1-s3_plusggg": {
2197
2317
  variantId: "sel-r1-s3",
2198
2318
  variantClass: "variant-sel-r1-s3",
2199
- cssText: "/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n max-width: 860px;\n margin-inline: auto;\n --mpb-listen-button-size: 128px;\n --mpb-choice-width-px: 155px;\n --mpb-choice-tile-min-height: 11.25rem;\n --mpb-choice-content-min-height: 9.375rem;\n --mpb-choice-group-gap: 0.35rem;\n --mpb-choice-row-gap: 0.35rem;\n --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n --mpb-stimulus-min-column: 240px;\n --mpb-stimulus-grid-column-gap: 1.1rem;\n --mpb-stimulus-choices-margin-top: 0.85rem;\n --mpb-audio-blank-template-margin-bottom: 0.9rem;\n --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n cloze content-element, so they inherit 400 from the host root. The earlier\n font-weight:500 override caused PIE to render visibly heavier than the CQT for\n the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n line-height: 1.1;\n white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(220px, auto) auto auto;\n grid-template-areas:\n \"sentence template audio\"\n \"choices choices choices\";\n justify-content: center;\n /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n the cloze against the shared sentence/audio row instead of top-aligning it —\n matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header header header\"\n \"sentence template audio\"\n \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n grid-area: template;\n justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n (align-items:center). question.css's .rli-s3-cloze-container uses\n justify-content:end instead, bottom-anchoring the answer text against the\n underline. Centering leaves it floating well above both the underline and the\n sentence image's own (bottom-anchored) baseline. The blank's own box height\n (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n rule) is left as-is — it already matches the CQT reference (~161px)\n closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n justify-self: start;\n align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: center;\n width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n max-width: 100%;\n height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n background: #e2e2e2;\n color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n .pie-choice-horizontal.is-selected:hover\n .pie-choice-tile {\n background: #fcfcd3;\n color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {\n transform: scale(0.85);\n}\n\n/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order\n (listen button, sentence, cloze, distractors), each at the left edge. The cloze\n container stretches, so the underline spans the column, with the 150px\n content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(0, 1fr);\n grid-template-areas:\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n align-items: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header\"\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n justify-self: stretch;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n flex-grow: 1;\n justify-content: flex-start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-value {\n width: 150px;\n }\n}\n"
2319
+ cssText: "/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n max-width: 860px;\n margin-inline: auto;\n --mpb-listen-button-size: 128px;\n --mpb-choice-width-px: 155px;\n --mpb-choice-tile-min-height: 11.25rem;\n --mpb-choice-content-min-height: 9.375rem;\n --mpb-choice-group-gap: 0.35rem;\n --mpb-choice-row-gap: 0.35rem;\n --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n --mpb-stimulus-min-column: 240px;\n --mpb-stimulus-grid-column-gap: 1.1rem;\n --mpb-stimulus-choices-margin-top: 0.85rem;\n --mpb-audio-blank-template-margin-bottom: 0.9rem;\n --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n cloze content-element, so they inherit 400 from the host root. The earlier\n font-weight:500 override caused PIE to render visibly heavier than the CQT for\n the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n line-height: 1.1;\n white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(220px, auto) auto auto;\n grid-template-areas:\n \"sentence template audio\"\n \"choices choices choices\";\n justify-content: center;\n /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n the cloze against the shared sentence/audio row instead of top-aligning it —\n matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header header header\"\n \"sentence template audio\"\n \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n grid-area: template;\n justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n (align-items:center). question.css's .rli-s3-cloze-container uses\n justify-content:end instead, bottom-anchoring the answer text against the\n underline. Centering leaves it floating well above both the underline and the\n sentence image's own (bottom-anchored) baseline. The blank's own box height\n (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n rule) is left as-is — it already matches the CQT reference (~161px)\n closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n justify-self: start;\n align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: center;\n width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n max-width: 100%;\n height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n background: #e2e2e2;\n color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n .pie-choice-horizontal.is-selected:hover\n .pie-choice-tile {\n background: #fcfcd3;\n color: #000;\n}\n\n/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order\n (listen button, sentence, cloze, distractors), each at the left edge. The cloze\n container stretches, so the underline spans the column, with the 150px\n content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(0, 1fr);\n grid-template-areas:\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n align-items: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header\"\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n justify-self: stretch;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n flex-grow: 1;\n justify-content: flex-start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-value {\n width: 150px;\n }\n}\n"
2200
2320
  }
2201
2321
  }, zt = (e) => String(e || "").trim().toLowerCase().replace(/v\d+\.\d+\.\d+$/i, ""), Bt = (e) => Rt[zt(e)], Vt = (e) => Bt(e)?.variantClass || "", Ht = /* @__PURE__ */ new Set([
2202
2322
  "sel-r1-plusggg",
@@ -2538,4 +2658,4 @@ k(an, {
2538
2658
  //#endregion
2539
2659
  export { Q as n, an as t };
2540
2660
 
2541
- //# sourceMappingURL=McPopulatedBlank-LqV-pdXv.js.map
2661
+ //# sourceMappingURL=McPopulatedBlank-CAEmCt5c.js.map