@pie-element/passage 7.1.2-next.2 → 7.1.2-next.20

package/dist/browser/stimulus-tabs-md98WQf6.js

@@ -0,0 +1,256 @@
+import { i as e } from "./rolldown-runtime-CWhphoD1.js";
+import { A as t, M as n, N as r, Q as i, a, b as o, h as s, o as c, s as l, t as u, wt as d } from "./dist-CYdikT5f.js";
+import f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/delivery/stimulus-tabs.tsx
+var g = /* @__PURE__ */ e(d(), 1);
+function _(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function v(e, t) {
+	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
+}
+var y = v(s, "UiLayout") || v(T.UiLayout, "UiLayout"), b = v(c, "Purpose") || v(T.Purpose, "Purpose"), x = v(l, "PreviewPrompt") || v(T.PreviewPrompt, "PreviewPrompt"), S = v(o, "Collapsible") || v(T.Collapsible, "Collapsible"), C = u, w = C.default, T = w && typeof w == "object" ? w : C, E = 2, D = .4, O = 170, k = () => {
+	if (typeof window > "u") return 1;
+	let e = window.outerWidth / window.innerWidth;
+	return Math.max(D, Math.min(1, E / (Number.isFinite(e) && e > 0 ? e : 1)));
+}, A = i("div")({
+	flexGrow: 1,
+	backgroundColor: t.background(),
+	color: t.text(),
+	"&:not(.MathJax) table": { borderCollapse: "collapse" },
+	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
+		padding: ".6em 1em",
+		textAlign: "left"
+	}
+}), j = i("div")(({ theme: e }) => ({
+	backgroundColor: t.background(),
+	color: t.text(),
+	padding: e.spacing(2),
+	"& blockquote": {
+		background: "#f9f9f9",
+		borderLeft: "5px solid #ccc",
+		margin: "1.5em 10px",
+		padding: ".5em 10px"
+	}
+})), M = i("div")({ fontSize: "1.75rem" }), N = i("div")({ fontSize: "1.5rem" }), P = i("div")({ fontSize: "1.25rem" }), F = i(n)(({ theme: e }) => ({
+	background: t.background(),
+	fontSize: "inherit",
+	fontFamily: "Roboto, sans-serif",
+	color: t.text(),
+	borderRadius: `${e.spacing(2)} ${e.spacing(2)} 0 0`,
+	border: `1px solid ${t.borderGray()}`,
+	borderBottomWidth: 0,
+	minHeight: "56px",
+	padding: "8px 10px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	margin: `0 ${e.spacing(1)}`,
+	textTransform: "none",
+	".passage-label": {
+		display: "-webkit-box",
+		WebkitLineClamp: 2,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "normal",
+		margin: "auto 0",
+		opacity: .7
+	},
+	"&.Mui-selected": {
+		color: t.text(),
+		".passage-label": { opacity: 1 },
+		".passage-label-underline": { backgroundColor: t.tertiary() }
+	},
+	"&:hover": { ".passage-label-underline": { backgroundColor: t.tertiaryLight() } },
+	"& .MuiTouchRipple-root": { opacity: .7 }
+})), I = i("div")(() => ({
+	height: "2px",
+	width: "100%",
+	marginTop: "6px",
+	background: t.background()
+})), L = class extends f.Component {
+	state = {
+		activeTab: 0,
+		zoomCompensation: k(),
+		containerWidth: 0
+	};
+	containerRef = f.createRef();
+	componentDidMount() {
+		typeof window > "u" || (window.addEventListener("resize", this.updateZoomCompensation), this.containerRef.current && typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(this.updateContainerWidth), this.resizeObserver.observe(this.containerRef.current)), this.updateContainerWidth());
+	}
+	componentWillUnmount() {
+		typeof window > "u" || (window.removeEventListener("resize", this.updateZoomCompensation), this.resizeObserver &&= (this.resizeObserver.disconnect(), null));
+	}
+	updateZoomCompensation = () => {
+		this.setState({ zoomCompensation: k() });
+	};
+	updateContainerWidth = () => {
+		let e = this.containerRef.current;
+		if (!e) return;
+		let t = e.clientWidth;
+		t !== this.state.containerWidth && this.setState({ containerWidth: t });
+	};
+	handleChange = (e, t) => {
+		this.setState(() => ({ activeTab: t })), setTimeout(() => {
+			let e = new CustomEvent("pie-ui-passage-tabChanged", { detail: { tab: t } });
+			window.dispatchEvent(e);
+		});
+	};
+	handleKeyDown = (e, t) => {
+		let { key: n } = e, { tabs: r } = this.props, i = -1, a = r.findIndex((e) => e.id === t);
+		switch (n) {
+			case "ArrowRight":
+				i = (a + 1) % r.length;
+				break;
+			case "ArrowLeft":
+				i = (a - 1 + r.length) % r.length;
+				break;
+			case "Home":
+				i = 0;
+				break;
+			case "End":
+				i = r.length - 1;
+				break;
+			case "Enter":
+			case " ":
+				i = a;
+				break;
+			default: break;
+		}
+		i !== -1 && (e.preventDefault(), e.stopPropagation(), this.handleChange(e, r[i].id), document.getElementById(`button-${r[i].id}`).focus());
+	};
+	parsedText = (e = "") => {
+		let t = document.createElement("div");
+		t.innerHTML = e.replace(/(<br\/>\n)/g, "<br/>");
+		let n = t.querySelector("audio");
+		if (n) {
+			let e = document.createElement("source");
+			e.setAttribute("type", "audio/mp3"), e.setAttribute("src", n.getAttribute("src")), n.removeAttribute("src"), n.appendChild(e);
+		}
+		return t.innerHTML;
+	};
+	renderInstructions(e, t = !1) {
+		if (!e) return;
+		let n = /* @__PURE__ */ m(x, {
+			tagName: "div",
+			className: "prompt",
+			defaultClassName: "teacher-instructions",
+			prompt: e
+		});
+		return t ? n : /* @__PURE__ */ m(S, {
+			labels: {
+				hidden: "Show Teacher Instructions",
+				visible: "Hide Teacher Instructions"
+			},
+			children: n
+		});
+	}
+	renderTab(e, t) {
+		let { baseHeadingLevel: n } = this.props, r = n ? Math.min(6, Math.max(1, n)) : void 0, i = n ? `h${r}` : "h2", o = n ? Math.min(6, Math.max(1, r + 1)) : void 0;
+		return /* @__PURE__ */ h(j, {
+			id: `tabpanel-${e.id}`,
+			role: "tabpanel",
+			"aria-labelledby": `button-${e.id}`,
+			children: [
+				this.renderInstructions(e.teacherInstructions, t),
+				e.title && /* @__PURE__ */ m(b, {
+					purpose: "passage-title",
+					children: /* @__PURE__ */ m(i, { children: /* @__PURE__ */ m(M, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
+				}),
+				e.subtitle && /* @__PURE__ */ m(b, {
+					purpose: "passage-subtitle",
+					children: /* @__PURE__ */ m(N, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
+				}),
+				e.author && /* @__PURE__ */ m(b, {
+					purpose: "passage-author",
+					children: /* @__PURE__ */ m(P, {
+						className: "author",
+						dangerouslySetInnerHTML: { __html: this.parsedText(e.author) }
+					})
+				}),
+				e.text && /* @__PURE__ */ m(b, {
+					purpose: "passage-text",
+					children: /* @__PURE__ */ m("div", {
+						className: "text",
+						dangerouslySetInnerHTML: { __html: n ? a(e.text, o) : e.text }
+					}, e.id)
+				})
+			]
+		}, e.id);
+	}
+	render() {
+		let { model: e, tabs: n, disabledTabs: i } = this.props, { activeTab: a, zoomCompensation: o, containerWidth: s } = this.state;
+		if (!n?.length) return;
+		let { extraCSSRules: c } = e || {}, l = (n || []).find((e) => e.id === a), u = s > 0 ? s / n.length : null, d = s > 0 && s <= n.length * O;
+		return /* @__PURE__ */ m(y, {
+			extraCSSRules: c,
+			children: /* @__PURE__ */ m(A, {
+				className: "passages",
+				ref: this.containerRef,
+				children: i || n.length === 1 ? n.map((e) => this.renderTab(e, i)) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(r, {
+					sx: {
+						position: "static",
+						"@media (min-width: 841px)": {
+							position: "sticky",
+							top: 0,
+							zIndex: 1
+						},
+						background: "var(--pie-passage-header-background, rgba(255,255,255,0))",
+						color: t.text(),
+						fontFamily: "Roboto, sans-serif",
+						zoom: o,
+						"& .MuiTabs-list": {
+							backgroundColor: `var(--pie-passage-header-background, ${t.backgroundDark()})`,
+							borderBottom: `1px solid ${t.borderGray()}`
+						},
+						"& .MuiTabs-indicator": {
+							backgroundColor: t.white(),
+							marginBottom: "-1px"
+						}
+					},
+					value: a,
+					onChange: this.handleChange,
+					children: n.map((e, t) => /* @__PURE__ */ m(F, {
+						id: `button-${e.id}`,
+						sx: u ? { maxWidth: `${u}px` } : void 0,
+						label: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(b, {
+							purpose: "passage-label",
+							children: d ? /* @__PURE__ */ m("span", {
+								className: "passage-label",
+								children: `Passage ${t + 1}`
+							}) : /* @__PURE__ */ m("span", {
+								className: "passage-label",
+								dangerouslySetInnerHTML: { __html: this.parsedText(e.label) }
+							})
+						}), /* @__PURE__ */ m(I, { className: "passage-label-underline" })] }),
+						value: e.id,
+						tabIndex: a === e.id ? 0 : -1,
+						"aria-controls": `tabpanel-${e.id}`,
+						"aria-selected": a === e.id,
+						onKeyDown: (t) => this.handleKeyDown(t, e.id)
+					}, e.id))
+				}), l ? this.renderTab(l, i) : null] })
+			})
+		});
+	}
+};
+L.propTypes = {
+	tabs: g.default.arrayOf(g.default.shape({
+		id: g.default.number.isRequired,
+		label: g.default.string.isRequired,
+		title: g.default.string.isRequired,
+		subtitle: g.default.string,
+		author: g.default.string,
+		text: g.default.string.isRequired,
+		teacherInstructions: g.default.string
+	}).isRequired).isRequired,
+	disabledTabs: g.default.bool,
+	model: g.default.object,
+	baseHeadingLevel: g.default.number
+};
+//#endregion
+export { L as t };
+
+//# sourceMappingURL=stimulus-tabs-md98WQf6.js.map

package/dist/browser/stimulus-tabs-md98WQf6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stimulus-tabs-md98WQf6.js","names":[],"sources":["../../src/delivery/stimulus-tabs.tsx"],"sourcesContent":["// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/passage/src/stimulus-tabs.jsx\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Tabs from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport { styled } from '@mui/material/styles';\nimport { Collapsible as CollapsibleImport, color, PreviewPrompt as PreviewPromptImport, Purpose as PurposeImport, UiLayout as UiLayoutImport, transformDataHeadings } from '@pie-lib/render-ui';\n\nfunction isRenderableReactInteropType(value: any) {\n  return (\n    typeof value === 'function' ||\n    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')\n  );\n}\n\nfunction unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {\n  if (!maybeSymbol) return maybeSymbol;\n  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;\n  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;\n  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {\n    return maybeSymbol[namedExport];\n  }\n  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {\n    return maybeSymbol[namedExport].default;\n  }\n  return maybeSymbol;\n}\nconst UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');\nconst Purpose = unwrapReactInteropSymbol(PurposeImport, 'Purpose') || unwrapReactInteropSymbol(renderUi.Purpose, 'Purpose');\nconst PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');\nconst Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');\nimport * as RenderUiNamespace from '@pie-lib/render-ui';\nconst renderUiNamespaceAny = RenderUiNamespace as any;\nconst renderUiDefaultMaybe = renderUiNamespaceAny['default'];\nconst renderUi =\n  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'\n    ? renderUiDefaultMaybe\n    : renderUiNamespaceAny;\n// Must match the breakpoint Quiz Engine passes to the PIE section player for\n// switching from the side-by-side passage/question layout to the tabbed layout.\n// Below (and at) this width the passage tabs scroll with the passage content\n// instead of being locked to the top of the panel, so that they do not lock up\n// space needed for the passage text (WCAG 1.4.10 Reflow, 400% zoom / 320px).\nconst STICKY_TABS_BREAKPOINT = 840;\n\n/**\n * Zoom compensation for the passage selection tabs.\n *\n * The tabs scale naturally with browser zoom up to 200%. Beyond 200%,\n * we shrink their CSS size proportionally so their physical on-screen size\n * freezes at the 200% appearance, leaving more room for passage content\n * in high-zoom / small-window situations.\n * The factor is min(1, 2 / zoom): exactly 1 at zoom <= 200% (component\n * behavior unchanged), shrinking proportionally above that. A lower clamp\n * of 0.4 guards against inflated ratios (docked devtools, browser side\n * panels, window chrome) ever making the tabs unusably small.\n */\nconst MAX_TABS_ZOOM = 2;\nconst MIN_ZOOM_COMPENSATION = 0.4;\n\n// Per-tab horizontal-space floor in CSS pixels. When the passage container is\n// narrow enough that each tab would have at most this much room\n// (containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB), tab labels\n// fall back to \"Passage 1\", \"Passage 2\", ... so navigation stays usable instead\n// of being dominated by aggressively truncated titles.\nconst NUMERIC_LABEL_MIN_WIDTH_PER_TAB = 170;\n\nconst computeZoomCompensation = () => {\n  if (typeof window === 'undefined') return 1;\n  const ratio = window.outerWidth / window.innerWidth;\n  const zoom = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n  return Math.max(MIN_ZOOM_COMPENSATION, Math.min(1, MAX_TABS_ZOOM / zoom));\n};\n\nconst PassagesContainer: any = styled('div')({\n  flexGrow: 1,\n  backgroundColor: color.background(),\n  color: color.text(),\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '.6em 1em',\n    textAlign: 'left',\n  },\n});\n\nconst Passage: any = styled('div')(({ theme }) => ({\n  backgroundColor: color.background(),\n  color: color.text(),\n  padding: theme.spacing(2),\n  '& blockquote': {\n    background: '#f9f9f9',\n    borderLeft: '5px solid #ccc',\n    margin: '1.5em 10px',\n    padding: '.5em 10px',\n  },\n}));\n\nconst PassageTitle: any = styled('div')({\n  fontSize: '1.75rem',\n});\n\nconst PassageSubtitle: any = styled('div')({\n  fontSize: '1.5rem',\n});\n\nconst PassageAuthor: any = styled('div')({\n  fontSize: '1.25rem',\n});\n\nconst TabStyled: any = styled(Tab)(({ theme }) => ({\n  /*\n   * The tab carries the colour of the panel it opens, which is what makes it read as a\n   * tab rather than a button, and it has to be the themed panel colour: MUI's palette\n   * does not follow `--pie-*`, so `common.white` here left the tab white on every color\n   * scheme while the passage body beneath it went dark. The comment this replaces gated\n   * the change on PD-2801, which is about OT's `color-contrast` class -- the mechanism\n   * pie-theme superseded, and blocked since 2023.\n   */\n  background: color.background(),\n  fontSize: 'inherit',\n  fontFamily: 'Roboto, sans-serif',\n  color: color.text(),\n  borderRadius: `${theme.spacing(2)} ${theme.spacing(2)} 0 0`,\n  /*\n   * `--pie-border-gray` is stepped to the 3:1 non-text minimum in every scheme. The\n   * literal it replaces measured about 1.2:1 against the dark schemes' surfaces, so the\n   * tab outline -- the only thing separating an unselected tab from the strip -- was\n   * invisible there.\n   */\n  border: `1px solid ${color.borderGray()}`,\n  borderBottomWidth: 0,\n  minHeight: '56px',\n  padding: '8px 10px',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  margin: `0 ${theme.spacing(1)}`,\n  textTransform: 'none',\n\n  '.passage-label': {\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'normal',\n    margin: 'auto 0',\n    opacity: 0.7,\n  },\n\n  '&.Mui-selected': {\n    color: color.text(),\n    '.passage-label': {\n      opacity: 1,\n    },\n    '.passage-label-underline': {\n      backgroundColor: color.tertiary(),\n    },\n  },\n\n  '&:hover': {\n    '.passage-label-underline': {\n      backgroundColor: color.tertiaryLight(),\n    },\n  },\n\n  '& .MuiTouchRipple-root': {\n    opacity: 0.7,\n  },\n}));\n\n/*\n * The selection indicator, one per tab. Unselected it has to disappear into the tab, so it\n * paints the tab's own background rather than a fixed white; selected it becomes\n * `--pie-tertiary`, which every scheme sets.\n */\nconst Underline: any = styled('div')(() => ({\n  height: '2px',\n  width: '100%',\n  marginTop: '6px',\n  background: color.background(),\n}));\n\nclass StimulusTabs extends React.Component {\n  state = {\n    activeTab: 0,\n    zoomCompensation: computeZoomCompensation(),\n    containerWidth: 0,\n  };\n\n  containerRef = React.createRef();\n\n  componentDidMount() {\n    if (typeof window === 'undefined') return;\n    window.addEventListener('resize', this.updateZoomCompensation);\n\n    if (this.containerRef.current && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(this.updateContainerWidth);\n      this.resizeObserver.observe(this.containerRef.current);\n    }\n\n    this.updateContainerWidth();\n  }\n\n  componentWillUnmount() {\n    if (typeof window === 'undefined') return;\n    window.removeEventListener('resize', this.updateZoomCompensation);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n  }\n\n  updateZoomCompensation: any = () => {\n    this.setState({ zoomCompensation: computeZoomCompensation() });\n  };\n\n  updateContainerWidth: any = () => {\n    const node = this.containerRef.current;\n    if (!node) return;\n    const width = node.clientWidth;\n    if (width !== this.state.containerWidth) {\n      this.setState({ containerWidth: width });\n    }\n  };\n\n  handleChange: any = (event, activeTab) => {\n    this.setState(() => ({ activeTab }));\n\n    setTimeout(() => {\n      const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {\n        detail: { tab: activeTab },\n      });\n\n      window.dispatchEvent(tabChangeEvent);\n    });\n  };\n\n  handleKeyDown: any = (event, currentTabId) => {\n    const { key } = event;\n    const { tabs } = this.props;\n\n    let newTabIndex = -1;\n    const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);\n\n    switch (key) {\n      case 'ArrowRight':\n        // Move to the next tab\n        newTabIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case 'ArrowLeft':\n        // Move to the previous tab\n        newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      // Commented out ArrowDown and ArrowUp for future vertical tab navigation\n      // case 'ArrowDown':\n      //   // Move to the next tab (for vertical alignment)\n      //   newTabIndex = (currentIndex + 1) % tabs.length;\n      //   break;\n      // case 'ArrowUp':\n      //   // Move to the previous tab (for vertical alignment)\n      //   newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      //   break;\n      case 'Home':\n        // Move to the first tab\n        newTabIndex = 0;\n        break;\n      case 'End':\n        // Move to the last tab\n        newTabIndex = tabs.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        // Activate the current tab\n        newTabIndex = currentIndex;\n        break;\n      default:\n        break;\n    }\n\n    if (newTabIndex !== -1) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleChange(event, tabs[newTabIndex].id);\n      document.getElementById(`button-${tabs[newTabIndex].id}`).focus();\n    }\n  };\n\n  parsedText: any = (text = '') => {\n    // fix imported audio content for Safari PD-1391\n    const div = document.createElement('div');\n    div.innerHTML = text.replace(/(<br\\/>\\n)/g, '<br/>');\n\n    const audio = div.querySelector('audio');\n\n    if (audio) {\n      const source = document.createElement('source');\n\n      source.setAttribute('type', 'audio/mp3');\n      source.setAttribute('src', audio.getAttribute('src'));\n\n      audio.removeAttribute('src');\n      audio.appendChild(source);\n    }\n\n    return div.innerHTML;\n  };\n\n  renderInstructions(teacherInstructions, disabledTabs = false) {\n    if (!teacherInstructions) {\n      return;\n    }\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    if (disabledTabs) {\n      return teacherInstructionsDiv;\n    }\n\n    return (\n      <Collapsible\n        labels={{\n          hidden: 'Show Teacher Instructions',\n          visible: 'Hide Teacher Instructions',\n        }}\n      >\n        {teacherInstructionsDiv}\n      </Collapsible>\n    );\n  }\n\n  renderTab(tab, disabledTabs) {\n    const { baseHeadingLevel } = this.props;\n    const clampedLevel = baseHeadingLevel ? Math.min(6, Math.max(1, baseHeadingLevel)) : undefined;\n    const TitleTag = baseHeadingLevel ? `h${clampedLevel}` : 'h2'; // default to h2 if no base level is provided - this was the previous behavior\n    const textLevel = baseHeadingLevel ? Math.min(6, Math.max(1, clampedLevel + 1)) : undefined; // promote text headings one level above title\n\n    return (\n      <Passage key={tab.id} id={`tabpanel-${tab.id}`} role=\"tabpanel\" aria-labelledby={`button-${tab.id}`}>\n        {this.renderInstructions(tab.teacherInstructions, disabledTabs)}\n\n        {tab.title && (\n          <Purpose purpose=\"passage-title\">\n            <TitleTag>\n              <PassageTitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />\n            </TitleTag>\n          </Purpose>\n        )}\n\n        {tab.subtitle && (\n          <Purpose purpose=\"passage-subtitle\">\n            <PassageSubtitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }} />\n          </Purpose>\n        )}\n\n        {tab.author && (\n          <Purpose purpose=\"passage-author\">\n            <PassageAuthor className=\"author\" dangerouslySetInnerHTML={{ __html: this.parsedText(tab.author) }} />\n          </Purpose>\n        )}\n\n        {tab.text && (\n          <Purpose purpose=\"passage-text\">\n            <div key={tab.id} className=\"text\" dangerouslySetInnerHTML={{ __html: baseHeadingLevel ? transformDataHeadings(tab.text, textLevel) : tab.text }} />\n          </Purpose>\n        )}\n      </Passage>\n    );\n  }\n\n  render() {\n    const { model, tabs, disabledTabs } = this.props;\n    const { activeTab, zoomCompensation, containerWidth } = this.state;\n\n    if (!tabs?.length) {\n      return;\n    }\n\n    const { extraCSSRules } = model || {};\n    const selectedTab = (tabs || []).find((tab) => tab.id === activeTab);\n\n    // cap each tab at 1/n of the passage container width so a single long\n    // title can't push other tabs off-screen. Existing two-line wrap + ellipsis\n    // on .passage-label still trims anything that doesn't fit.\n    const tabMaxWidth = containerWidth > 0 ? containerWidth / tabs.length : null;\n    // When per-tab horizontal space drops to NUMERIC_LABEL_MIN_WIDTH_PER_TAB or\n    // less, titles become unreadably truncated; swap to \"Passage N\" so users\n    // can still navigate. Container width is read once layout has settled\n    // (>0), so initial render uses real labels.\n    const useNumericLabels =\n      containerWidth > 0 && containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB;\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <PassagesContainer className=\"passages\" ref={this.containerRef}>\n          {disabledTabs || tabs.length === 1 ? (\n            tabs.map((tab) => this.renderTab(tab, disabledTabs))\n          ) : (\n            <>\n              <Tabs\n                sx={{\n                  // Below the breakpoint (e.g. WCAG 400% zoom, ~320px viewport)\n                  // the tabs are in normal flow and scroll with the passage text,\n                  // so they don't lock up space needed to display the passage.\n                  position: 'static',\n                  // Above the breakpoint there is adequate screen space, so the\n                  // tabs stay locked to the top of the panel while the passage\n                  // text scrolls beneath them.\n                  [`@media (min-width: ${STICKY_TABS_BREAKPOINT + 1}px)`]: {\n                    position: 'sticky',\n                    top: 0,\n                    zIndex: 1,\n                  },\n                  background: 'var(--pie-passage-header-background, rgba(255,255,255,0))',\n                  color: color.text(),\n                  fontFamily: 'Roboto, sans-serif',\n                  // Freeze the tabs' physical size at their 200%-zoom appearance\n                  // when browser zoom exceeds 200%. The factor is 1 at zoom <= 200%,\n                  // so behavior below that threshold is unchanged. Using `zoom`\n                  // (rather than transform: scale) shrinks the layout box itself,\n                  // so the reclaimed space flows to the passage content below.\n                  zoom: zoomCompensation,\n                  '& .MuiTabs-list': {\n                    /*\n                     * The strip behind the tabs. A host that has opted into\n                     * `--pie-passage-header-background` keeps its own colour on every\n                     * scheme -- Knowledge Checks' pale green-blue is deliberate and is not\n                     * a scheme's business to override. With no host colour the fallback has\n                     * to be a theme token rather than a white literal, or the strip stays\n                     * white over a dark passage body.\n                     */\n                    backgroundColor: `var(--pie-passage-header-background, ${color.backgroundDark()})`,\n                    borderBottom: `1px solid ${color.borderGray()}`,\n                  },\n                  '& .MuiTabs-indicator': {\n                    backgroundColor: color.white(),\n                    marginBottom: '-1px',\n                  },\n                }}\n                value={activeTab}\n                onChange={this.handleChange}\n              >\n                {tabs.map((tab, index) => (\n                  <TabStyled\n                    key={tab.id}\n                    id={`button-${tab.id}`}\n                    sx={tabMaxWidth ? { maxWidth: `${tabMaxWidth}px` } : undefined}\n                    label={\n                      <>\n                        <Purpose purpose=\"passage-label\">\n                          {useNumericLabels ? (\n                            <span className=\"passage-label\">{`Passage ${index + 1}`}</span>\n                          ) : (\n                            <span\n                              className=\"passage-label\"\n                              dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}\n                            />\n                          )}\n                        </Purpose>\n                        <Underline className=\"passage-label-underline\" />\n                      </>\n                    }\n                    value={tab.id}\n                    tabIndex={activeTab === tab.id ? 0 : -1}\n                    aria-controls={`tabpanel-${tab.id}`}\n                    aria-selected={activeTab === tab.id}\n                    onKeyDown={(event) => this.handleKeyDown(event, tab.id)}\n                  />\n                ))}\n              </Tabs>\n              {selectedTab ? this.renderTab(selectedTab, disabledTabs) : null}\n            </>\n          )}\n        </PassagesContainer>\n      </UiLayout>\n    );\n  }\n}\n\nStimulusTabs.propTypes = {\n  tabs: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.number.isRequired,\n      label: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string,\n      author: PropTypes.string,\n      text: PropTypes.string.isRequired,\n      teacherInstructions: PropTypes.string,\n    }).isRequired,\n  ).isRequired,\n  disabledTabs: PropTypes.bool,\n  model: PropTypes.object,\n  baseHeadingLevel: PropTypes.number,\n};\n\nexport default StimulusTabs;\n"],"mappings":"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"}

package/dist/delivery/index.js

@@ -76,7 +76,7 @@ var o = class extends HTMLElement {
 		this._playerObserver &&= (this._playerObserver.disconnect(), null);
 	}
 	disconnectedCallback() {
-		this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._root && this._root.unmount();
+		this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/delivery/stimulus-tabs.d.ts

@@ -10,7 +10,14 @@ import React from 'react';
 declare class StimulusTabs extends React.Component {
     state: {
         activeTab: number;
+        zoomCompensation: number;
+        containerWidth: number;
     };
+    containerRef: React.RefObject<unknown>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    updateZoomCompensation: any;
+    updateContainerWidth: any;
     handleChange: any;
     handleKeyDown: any;
     parsedText: any;

package/dist/delivery/stimulus-tabs.js

@@ -13,7 +13,11 @@ function h(e) {
 function g(e, t) {
 	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
 }
-var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(C.Purpose, "Purpose"), y = g(s, "PreviewPrompt") || g(C.PreviewPrompt, "PreviewPrompt"), b = g(o, "Collapsible") || g(C.Collapsible, "Collapsible"), x = a, S = x.default, C = S && typeof S == "object" ? S : x, w = i("div")({
+var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(C.Purpose, "Purpose"), y = g(s, "PreviewPrompt") || g(C.PreviewPrompt, "PreviewPrompt"), b = g(o, "Collapsible") || g(C.Collapsible, "Collapsible"), x = a, S = x.default, C = S && typeof S == "object" ? S : x, w = 2, T = .4, E = 170, D = () => {
+	if (typeof window > "u") return 1;
+	let e = window.outerWidth / window.innerWidth;
+	return Math.max(T, Math.min(1, w / (Number.isFinite(e) && e > 0 ? e : 1)));
+}, O = i("div")({
 	flexGrow: 1,
 	backgroundColor: u.background(),
 	color: u.text(),
@@ -22,7 +26,7 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 		padding: ".6em 1em",
 		textAlign: "left"
 	}
-}), T = i("div")(({ theme: e }) => ({
+}), k = i("div")(({ theme: e }) => ({
 	backgroundColor: u.background(),
 	color: u.text(),
 	padding: e.spacing(2),
@@ -32,13 +36,13 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 		margin: "1.5em 10px",
 		padding: ".5em 10px"
 	}
-})), E = i("div")({ fontSize: "1.75rem" }), D = i("div")({ fontSize: "1.5rem" }), O = i("div")({ fontSize: "1.25rem" }), k = i(r)(({ theme: e }) => ({
-	background: e.palette.common.white,
+})), A = i("div")({ fontSize: "1.75rem" }), j = i("div")({ fontSize: "1.5rem" }), M = i("div")({ fontSize: "1.25rem" }), N = i(r)(({ theme: e }) => ({
+	background: u.background(),
 	fontSize: "inherit",
 	fontFamily: "Roboto, sans-serif",
-	color: e.palette.common.black,
+	color: u.text(),
 	borderRadius: `${e.spacing(2)} ${e.spacing(2)} 0 0`,
-	border: "1px solid #D9DADA",
+	border: `1px solid ${u.borderGray()}`,
 	borderBottomWidth: 0,
 	minHeight: "56px",
 	padding: "8px 10px",
@@ -58,19 +62,39 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 		opacity: .7
 	},
 	"&.Mui-selected": {
-		color: e.palette.common.black,
+		color: u.text(),
 		".passage-label": { opacity: 1 },
-		".passage-label-underline": { backgroundColor: "#146EB3" }
+		".passage-label-underline": { backgroundColor: u.tertiary() }
 	},
-	"&:hover": { ".passage-label-underline": { backgroundColor: "#D0E2F0" } },
+	"&:hover": { ".passage-label-underline": { backgroundColor: u.tertiaryLight() } },
 	"& .MuiTouchRipple-root": { opacity: .7 }
-})), A = i("div")(({ theme: e }) => ({
+})), P = i("div")(() => ({
 	height: "2px",
 	width: "100%",
 	marginTop: "6px",
-	background: e.palette.common.white
-})), j = class extends e.Component {
-	state = { activeTab: 0 };
+	background: u.background()
+})), F = class extends e.Component {
+	state = {
+		activeTab: 0,
+		zoomCompensation: D(),
+		containerWidth: 0
+	};
+	containerRef = e.createRef();
+	componentDidMount() {
+		typeof window > "u" || (window.addEventListener("resize", this.updateZoomCompensation), this.containerRef.current && typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(this.updateContainerWidth), this.resizeObserver.observe(this.containerRef.current)), this.updateContainerWidth());
+	}
+	componentWillUnmount() {
+		typeof window > "u" || (window.removeEventListener("resize", this.updateZoomCompensation), this.resizeObserver &&= (this.resizeObserver.disconnect(), null));
+	}
+	updateZoomCompensation = () => {
+		this.setState({ zoomCompensation: D() });
+	};
+	updateContainerWidth = () => {
+		let e = this.containerRef.current;
+		if (!e) return;
+		let t = e.clientWidth;
+		t !== this.state.containerWidth && this.setState({ containerWidth: t });
+	};
 	handleChange = (e, t) => {
 		this.setState(() => ({ activeTab: t })), setTimeout(() => {
 			let e = new CustomEvent("pie-ui-passage-tabChanged", { detail: { tab: t } });
@@ -128,7 +152,7 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 	}
 	renderTab(e, t) {
 		let { baseHeadingLevel: n } = this.props, r = n ? Math.min(6, Math.max(1, n)) : void 0, i = n ? `h${r}` : "h2", a = n ? Math.min(6, Math.max(1, r + 1)) : void 0;
-		return /* @__PURE__ */ m(T, {
+		return /* @__PURE__ */ m(k, {
 			id: `tabpanel-${e.id}`,
 			role: "tabpanel",
 			"aria-labelledby": `button-${e.id}`,
@@ -136,15 +160,15 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 				this.renderInstructions(e.teacherInstructions, t),
 				e.title && /* @__PURE__ */ p(v, {
 					purpose: "passage-title",
-					children: /* @__PURE__ */ p(i, { children: /* @__PURE__ */ p(E, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
+					children: /* @__PURE__ */ p(i, { children: /* @__PURE__ */ p(A, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
 				}),
 				e.subtitle && /* @__PURE__ */ p(v, {
 					purpose: "passage-subtitle",
-					children: /* @__PURE__ */ p(D, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
+					children: /* @__PURE__ */ p(j, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
 				}),
 				e.author && /* @__PURE__ */ p(v, {
 					purpose: "passage-author",
-					children: /* @__PURE__ */ p(O, {
+					children: /* @__PURE__ */ p(M, {
 						className: "author",
 						dangerouslySetInnerHTML: { __html: this.parsedText(e.author) }
 					})
@@ -160,49 +184,62 @@ var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(
 		}, e.id);
 	}
 	render() {
-		let { model: e, tabs: t, disabledTabs: r } = this.props, { activeTab: i } = this.state;
+		let { model: e, tabs: t, disabledTabs: r } = this.props, { activeTab: i, zoomCompensation: a, containerWidth: o } = this.state;
 		if (!t?.length) return;
-		let { extraCSSRules: a } = e || {}, o = (t || []).find((e) => e.id === i);
+		let { extraCSSRules: s } = e || {}, c = (t || []).find((e) => e.id === i), l = o > 0 ? o / t.length : null, d = o > 0 && o <= t.length * E;
 		return /* @__PURE__ */ p(_, {
-			extraCSSRules: a,
-			children: /* @__PURE__ */ p(w, {
+			extraCSSRules: s,
+			children: /* @__PURE__ */ p(O, {
 				className: "passages",
+				ref: this.containerRef,
 				children: r || t.length === 1 ? t.map((e) => this.renderTab(e, r)) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
 					sx: {
-						position: "sticky",
-						top: 0,
-						background: u.background(),
+						position: "static",
+						"@media (min-width: 841px)": {
+							position: "sticky",
+							top: 0,
+							zIndex: 1
+						},
+						background: "var(--pie-passage-header-background, rgba(255,255,255,0))",
 						color: u.text(),
 						fontFamily: "Roboto, sans-serif",
-						"& .MuiTabs-list": { borderBottom: "1px solid #D9DADA" },
+						zoom: a,
+						"& .MuiTabs-list": {
+							backgroundColor: `var(--pie-passage-header-background, ${u.backgroundDark()})`,
+							borderBottom: `1px solid ${u.borderGray()}`
+						},
 						"& .MuiTabs-indicator": {
-							backgroundColor: "#ffffff",
+							backgroundColor: u.white(),
 							marginBottom: "-1px"
 						}
 					},
 					value: i,
 					onChange: this.handleChange,
-					children: t.map((e) => /* @__PURE__ */ p(k, {
+					children: t.map((e, t) => /* @__PURE__ */ p(N, {
 						id: `button-${e.id}`,
+						sx: l ? { maxWidth: `${l}px` } : void 0,
 						label: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(v, {
 							purpose: "passage-label",
-							children: /* @__PURE__ */ p("span", {
+							children: d ? /* @__PURE__ */ p("span", {
+								className: "passage-label",
+								children: `Passage ${t + 1}`
+							}) : /* @__PURE__ */ p("span", {
 								className: "passage-label",
 								dangerouslySetInnerHTML: { __html: this.parsedText(e.label) }
 							})
-						}), /* @__PURE__ */ p(A, { className: "passage-label-underline" })] }),
+						}), /* @__PURE__ */ p(P, { className: "passage-label-underline" })] }),
 						value: e.id,
 						tabIndex: i === e.id ? 0 : -1,
 						"aria-controls": `tabpanel-${e.id}`,
 						"aria-selected": i === e.id,
 						onKeyDown: (t) => this.handleKeyDown(t, e.id)
 					}, e.id))
-				}), o ? this.renderTab(o, r) : null] })
+				}), c ? this.renderTab(c, r) : null] })
 			})
 		});
 	}
 };
-j.propTypes = {
+F.propTypes = {
 	tabs: t.arrayOf(t.shape({
 		id: t.number.isRequired,
 		label: t.string.isRequired,
@@ -217,4 +254,4 @@ j.propTypes = {
 	baseHeadingLevel: t.number
 };
 //#endregion
-export { j as default };
+export { F as default };