@pie-lib/math-input-mathlive 1.1.5-beta.9 → 2.0.1-next.20261107131445

package/dist/mf/common-styles.d.ts

@@ -0,0 +1,594 @@
+/**
+ * Shared MathLive styling.
+ *
+ * Replaces @pie-lib/math-input's `common-mq-styles.js`. That file was built
+ * around MathQuill's `.mq-*` class names, none of which exist in MathLive
+ * output, so the selectors here target MathLive's own structure instead.
+ *
+ * The four named groups are kept because consumers destructure them:
+ *
+ *   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
+ *     = mq.CommonMqStyles;   // math-toolbar/src/editor-and-pad.jsx, math-preview.jsx
+ *
+ * Most are intentionally near-empty: MathLive sizes scripts, radicals and
+ * fences correctly on its own, so the MathQuill-era corrections are not needed.
+ * They stay as documented extension points rather than being deleted, so the
+ * destructuring above keeps working. The exception is the radical index, which
+ * MathLive sizes to TeX metrics that read too small here - see
+ * `rootIndexStyles`.
+ */
+/**
+ * Font styling. MathQuill needed explicit MathJax font families to match the
+ * static renderer; MathLive ships the KaTeX fonts it renders with, so this only
+ * smooths rendering and lets the host override the family.
+ */
+export declare const commonMqFontStyles: {
+    '-webkit-font-smoothing': string;
+    '& math-field': {
+        fontFamily: string;
+    };
+};
+/**
+ * Long division. The MathQuill fork drew this with nested `.mq-longdiv-*`
+ * elements that needed manual offsets; here it comes from the `\longdiv` macro
+ * (see `PIE_MACROS`), tagged with `data-pie-macro="longdiv"`.
+ */
+export declare const longdivStyles: {
+    '& [data-pie-macro="longdiv"]': {
+        display: string;
+    };
+};
+export declare const rootIndexStyles: {
+    "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+        fontSize: string;
+    };
+};
+/**
+ * The same rule as a CSS string, for a live mathfield's shadow root - see
+ * `SHADOW_CSS` in mathlive-instance.js. Static markup is styled by
+ * {@link rootIndexStyles}.
+ */
+export declare const ROOT_INDEX_CSS = ".ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]{font-size:80% !important}";
+export declare const parallelStyles: {
+    "& [data-pie-macro=\"parallel\"]": {
+        fontSize: string;
+    };
+};
+/** The same rule as a CSS string, for a live mathfield's shadow root. */
+export declare const PARALLEL_CSS = "[data-pie-macro=\"parallel\"]{font-size:1.4em}";
+/**
+ * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the
+ * MathQuill-era corrections are gone; the radical index is the one place where a
+ * TeX-correct size reads too small in the authoring UI.
+ */
+export declare const supsubStyles: {
+    "& [data-pie-macro=\"parallel\"]": {
+        fontSize: string;
+    };
+    "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+        fontSize: string;
+    };
+};
+/** Empty placeholder boxes (answer blocks / open slots). */
+export declare const placeholderStyles: {
+    '& .ML__placeholder': {
+        borderBottom: string;
+        minWidth: string;
+    };
+    '& [data-pie-empty]': {
+        opacity: number;
+    };
+    '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+        top: string;
+    };
+    '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+        top: string;
+    };
+    '& .overline .overline-line': {
+        position: string;
+    };
+    '& .overline .overline-line:before': {
+        content: string;
+        display: string;
+        position: string;
+        left: number;
+        right: number;
+        top: string;
+        height: string;
+        border: string;
+        background: string;
+        WebkitMask: string;
+        mask: string;
+    };
+    '& .overline .overline-line:after': {
+        display: string;
+    };
+    '& .ML__base': {
+        position: string;
+    };
+    '& .ML__stretchy': {
+        position: string;
+        left: number;
+        width: string;
+    };
+    '& .ML__center:has(.ML__stretchy)': {
+        marginLeft: string;
+    };
+};
+/**
+ * Styling for the on-screen keyboard and any container rendering math labels.
+ * Also hides MathLive's own affordances, since pie supplies its own keypad.
+ */
+export declare const commonMqKeyboardStyles: {
+    touchAction: string;
+    '& math-field': {
+        fontSize: string;
+        outline: string;
+    };
+    '& math-field::part(virtual-keyboard-toggle)': {
+        display: string;
+    };
+    '& math-field::part(menu-toggle)': {
+        display: string;
+    };
+    '& .ML__placeholder': {
+        borderBottom: string;
+        minWidth: string;
+    };
+    '& [data-pie-empty]': {
+        opacity: number;
+    };
+    '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+        top: string;
+    };
+    '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+        top: string;
+    };
+    '& .overline .overline-line': {
+        position: string;
+    };
+    '& .overline .overline-line:before': {
+        content: string;
+        display: string;
+        position: string;
+        left: number;
+        right: number;
+        top: string;
+        height: string;
+        border: string;
+        background: string;
+        WebkitMask: string;
+        mask: string;
+    };
+    '& .overline .overline-line:after': {
+        display: string;
+    };
+    '& .ML__base': {
+        position: string;
+    };
+    '& .ML__stretchy': {
+        position: string;
+        left: number;
+        width: string;
+    };
+    '& .ML__center:has(.ML__stretchy)': {
+        marginLeft: string;
+    };
+    "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+        fontSize: string;
+    };
+    '& [data-pie-macro="longdiv"]': {
+        display: string;
+    };
+    '-webkit-font-smoothing': string;
+};
+/** Everything combined - the common case for a container of math. */
+export declare const commonMathLiveStyles: {
+    '& math-field': {
+        fontSize: string;
+        outline: string;
+    };
+    '& math-field::part(virtual-keyboard-toggle)': {
+        display: string;
+    };
+    '& math-field::part(menu-toggle)': {
+        display: string;
+    };
+    '& .ML__placeholder': {
+        borderBottom: string;
+        minWidth: string;
+    };
+    '& [data-pie-empty]': {
+        opacity: number;
+    };
+    '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+        top: string;
+    };
+    '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+        top: string;
+    };
+    '& .overline .overline-line': {
+        position: string;
+    };
+    '& .overline .overline-line:before': {
+        content: string;
+        display: string;
+        position: string;
+        left: number;
+        right: number;
+        top: string;
+        height: string;
+        border: string;
+        background: string;
+        WebkitMask: string;
+        mask: string;
+    };
+    '& .overline .overline-line:after': {
+        display: string;
+    };
+    '& .ML__base': {
+        position: string;
+    };
+    '& .ML__stretchy': {
+        position: string;
+        left: number;
+        width: string;
+    };
+    '& .ML__center:has(.ML__stretchy)': {
+        marginLeft: string;
+    };
+    "& [data-pie-macro=\"parallel\"]": {
+        fontSize: string;
+    };
+    "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+        fontSize: string;
+    };
+    '& [data-pie-macro="longdiv"]': {
+        display: string;
+    };
+    '-webkit-font-smoothing': string;
+};
+export declare const commonKeyboardStyles: {
+    touchAction: string;
+    '& math-field': {
+        fontSize: string;
+        outline: string;
+    };
+    '& math-field::part(virtual-keyboard-toggle)': {
+        display: string;
+    };
+    '& math-field::part(menu-toggle)': {
+        display: string;
+    };
+    '& .ML__placeholder': {
+        borderBottom: string;
+        minWidth: string;
+    };
+    '& [data-pie-empty]': {
+        opacity: number;
+    };
+    '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+        position: string;
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+        top: string;
+    };
+    '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+        top: string;
+    };
+    '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+        top: string;
+    };
+    '& .overline .overline-line': {
+        position: string;
+    };
+    '& .overline .overline-line:before': {
+        content: string;
+        display: string;
+        position: string;
+        left: number;
+        right: number;
+        top: string;
+        height: string;
+        border: string;
+        background: string;
+        WebkitMask: string;
+        mask: string;
+    };
+    '& .overline .overline-line:after': {
+        display: string;
+    };
+    '& .ML__base': {
+        position: string;
+    };
+    '& .ML__stretchy': {
+        position: string;
+        left: number;
+        width: string;
+    };
+    '& .ML__center:has(.ML__stretchy)': {
+        marginLeft: string;
+    };
+    "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+        fontSize: string;
+    };
+    '& [data-pie-macro="longdiv"]': {
+        display: string;
+    };
+    '-webkit-font-smoothing': string;
+};
+/**
+ * Default export mirrors @pie-lib/math-input's `CommonMqStyles` object so
+ * existing destructuring keeps working.
+ */
+declare const _default: {
+    commonMqFontStyles: {
+        '-webkit-font-smoothing': string;
+        '& math-field': {
+            fontFamily: string;
+        };
+    };
+    longdivStyles: {
+        '& [data-pie-macro="longdiv"]': {
+            display: string;
+        };
+    };
+    rootIndexStyles: {
+        "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+            fontSize: string;
+        };
+    };
+    supsubStyles: {
+        "& [data-pie-macro=\"parallel\"]": {
+            fontSize: string;
+        };
+        "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+            fontSize: string;
+        };
+    };
+    commonMqKeyboardStyles: {
+        touchAction: string;
+        '& math-field': {
+            fontSize: string;
+            outline: string;
+        };
+        '& math-field::part(virtual-keyboard-toggle)': {
+            display: string;
+        };
+        '& math-field::part(menu-toggle)': {
+            display: string;
+        };
+        '& .ML__placeholder': {
+            borderBottom: string;
+            minWidth: string;
+        };
+        '& [data-pie-empty]': {
+            opacity: number;
+        };
+        '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+            top: string;
+        };
+        '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+            top: string;
+        };
+        '& .overline .overline-line': {
+            position: string;
+        };
+        '& .overline .overline-line:before': {
+            content: string;
+            display: string;
+            position: string;
+            left: number;
+            right: number;
+            top: string;
+            height: string;
+            border: string;
+            background: string;
+            WebkitMask: string;
+            mask: string;
+        };
+        '& .overline .overline-line:after': {
+            display: string;
+        };
+        '& .ML__base': {
+            position: string;
+        };
+        '& .ML__stretchy': {
+            position: string;
+            left: number;
+            width: string;
+        };
+        '& .ML__center:has(.ML__stretchy)': {
+            marginLeft: string;
+        };
+        "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+            fontSize: string;
+        };
+        '& [data-pie-macro="longdiv"]': {
+            display: string;
+        };
+        '-webkit-font-smoothing': string;
+    };
+    placeholderStyles: {
+        '& .ML__placeholder': {
+            borderBottom: string;
+            minWidth: string;
+        };
+        '& [data-pie-empty]': {
+            opacity: number;
+        };
+        '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+            top: string;
+        };
+        '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+            top: string;
+        };
+        '& .overline .overline-line': {
+            position: string;
+        };
+        '& .overline .overline-line:before': {
+            content: string;
+            display: string;
+            position: string;
+            left: number;
+            right: number;
+            top: string;
+            height: string;
+            border: string;
+            background: string;
+            WebkitMask: string;
+            mask: string;
+        };
+        '& .overline .overline-line:after': {
+            display: string;
+        };
+        '& .ML__base': {
+            position: string;
+        };
+        '& .ML__stretchy': {
+            position: string;
+            left: number;
+            width: string;
+        };
+        '& .ML__center:has(.ML__stretchy)': {
+            marginLeft: string;
+        };
+    };
+    commonMathLiveStyles: {
+        '& math-field': {
+            fontSize: string;
+            outline: string;
+        };
+        '& math-field::part(virtual-keyboard-toggle)': {
+            display: string;
+        };
+        '& math-field::part(menu-toggle)': {
+            display: string;
+        };
+        '& .ML__placeholder': {
+            borderBottom: string;
+            minWidth: string;
+        };
+        '& [data-pie-empty]': {
+            opacity: number;
+        };
+        '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
+            position: string;
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
+            top: string;
+        };
+        '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
+            top: string;
+        };
+        '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+            top: string;
+        };
+        '& .overline .overline-line': {
+            position: string;
+        };
+        '& .overline .overline-line:before': {
+            content: string;
+            display: string;
+            position: string;
+            left: number;
+            right: number;
+            top: string;
+            height: string;
+            border: string;
+            background: string;
+            WebkitMask: string;
+            mask: string;
+        };
+        '& .overline .overline-line:after': {
+            display: string;
+        };
+        '& .ML__base': {
+            position: string;
+        };
+        '& .ML__stretchy': {
+            position: string;
+            left: number;
+            width: string;
+        };
+        '& .ML__center:has(.ML__stretchy)': {
+            marginLeft: string;
+        };
+        "& [data-pie-macro=\"parallel\"]": {
+            fontSize: string;
+        };
+        "& .ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]": {
+            fontSize: string;
+        };
+        '& [data-pie-macro="longdiv"]': {
+            display: string;
+        };
+        '-webkit-font-smoothing': string;
+    };
+};
+export default _default;

package/dist/mf/common-styles.js

@@ -0,0 +1,80 @@
+//#region src/mf/common-styles.ts
+var e = {
+	"-webkit-font-smoothing": "antialiased",
+	"& math-field": { fontFamily: "inherit" }
+}, t = { "& [data-pie-macro=\"longdiv\"]": { display: "inline-flex" } }, n = ".ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*=\"font-size\"]", r = "80%", i = { [`& ${n}`]: { fontSize: `${r} !important` } }, a = `${n}{font-size:${r} !important}`, o = "[data-pie-macro=\"parallel\"]", s = "1.4em", c = { [`& ${o}`]: { fontSize: s } }, l = `${o}{font-size:${s}}`, u = {
+	...i,
+	...c
+}, d = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 522' preserveAspectRatio='none'%3E%3Crect y='241' width='100' height='40'/%3E%3C/svg%3E\") 0 0/100% 100% no-repeat", f = {
+	"& .ML__placeholder": {
+		borderBottom: "1px solid currentColor",
+		minWidth: "1em"
+	},
+	"& [data-pie-empty]": { opacity: .5 },
+	"& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line": {
+		position: "relative",
+		top: "0.04em"
+	},
+	"& .ML__mfrac:has([data-pie-empty]) .ML__frac-line": {
+		position: "relative",
+		top: "0.14em"
+	},
+	"& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line": { top: "0.13em" },
+	"& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line": { top: "0.1em" },
+	"& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)": { top: "-4.07em !important" },
+	"& .overline .overline-line": { position: "relative" },
+	"& .overline .overline-line:before": {
+		content: "\"\"",
+		display: "block",
+		position: "absolute",
+		left: 0,
+		right: 0,
+		top: "-0.241em",
+		height: "0.522em !important",
+		border: "0 !important",
+		background: "currentColor",
+		WebkitMask: d,
+		mask: d
+	},
+	"& .overline .overline-line:after": { display: "none !important" },
+	"& .ML__base": { position: "relative" },
+	"& .ML__stretchy": {
+		position: "absolute",
+		left: 0,
+		width: "100%"
+	},
+	"& .ML__center:has(.ML__stretchy)": { marginLeft: "0 !important" }
+}, p = {
+	...e,
+	...t,
+	...i,
+	...f,
+	touchAction: "manipulation",
+	"& math-field": {
+		fontSize: "inherit",
+		outline: "none"
+	},
+	"& math-field::part(virtual-keyboard-toggle)": { display: "none" },
+	"& math-field::part(menu-toggle)": { display: "none" }
+}, m = {
+	...e,
+	...t,
+	...u,
+	...f,
+	"& math-field": {
+		fontSize: "inherit",
+		outline: "none"
+	},
+	"& math-field::part(virtual-keyboard-toggle)": { display: "none" },
+	"& math-field::part(menu-toggle)": { display: "none" }
+}, h = p, g = {
+	commonMqFontStyles: e,
+	longdivStyles: t,
+	rootIndexStyles: i,
+	supsubStyles: u,
+	commonMqKeyboardStyles: p,
+	placeholderStyles: f,
+	commonMathLiveStyles: m
+};
+//#endregion
+export { l as PARALLEL_CSS, a as ROOT_INDEX_CSS, h as commonKeyboardStyles, m as commonMathLiveStyles, e as commonMqFontStyles, p as commonMqKeyboardStyles, g as default, t as longdivStyles, c as parallelStyles, f as placeholderStyles, i as rootIndexStyles, u as supsubStyles };

package/dist/mf/field-label.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Names a `<math-field>`. MathLive falls back to an untranslated "math input field" when the
+ * element has no `aria-label` of its own.
+ *
+ * What a screen reader lands on is MathLive's keyboard input, a textbox inside the field's
+ * shadow root, so it gets the name too: the field's own label does not reach it, and MathLive
+ * only names it with the spoken math once it has focus. That input only exists once the field
+ * is connected, so call this again after mounting the field.
+ *
+ * The field is a group around that textbox. With MathLive's own `math` role, which it sets
+ * through ElementInternals, a focusable field holding a focusable textbox is a nested
+ * interactive control.
+ */
+export declare function labelMathField(mathField: Element | null | undefined, language?: string): void;
+/** Points a `<math-field>` at the element that describes it, or drops the reference. */
+export declare function describeMathField(mathField: Element | null | undefined, describedBy?: string): void;

package/dist/mf/field-label.js

@@ -0,0 +1,13 @@
+import e from "@pie-lib/translator";
+//#region src/mf/field-label.ts
+var { translator: t } = e;
+function n(e, n) {
+	if (!e) return;
+	let r = t.t("mathInput.enterAnswer", { lng: n });
+	e.setAttribute("role", "group"), e.setAttribute("aria-label", r), e.shadowRoot?.querySelector(".ML__keyboard-sink")?.setAttribute("aria-label", r);
+}
+function r(e, t) {
+	e && (t ? e.setAttribute("aria-describedby", t) : e.removeAttribute("aria-describedby"));
+}
+//#endregion
+export { r as describeMathField, n as labelMathField };