react-cheminfo 0.30.0 → 0.32.0

package/lib/number/ui/NumberInput.d.ts

@@ -0,0 +1,113 @@
+import type { CSSProperties, ReactElement } from 'react';
+/** What every number box takes, whether or not it can be left empty. */
+export interface NumberInputBaseProps {
+    /**
+     * Smallest accepted value, applied when the box is left rather than while it
+     * is typed in.
+     * @default undefined — unbounded below
+     */
+    min?: number;
+    /**
+     * Largest accepted value, applied when the box is left.
+     * @default undefined — unbounded above
+     */
+    max?: number;
+    /**
+     * What one press of an arrow key or a stepper button adds; Shift multiplies
+     * it by ten and Alt divides it by ten.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Whether only whole numbers are wanted. A typed decimal is rounded when the
+     * box is left.
+     * @default false
+     */
+    integer?: boolean;
+    /**
+     * Whether the up and down buttons are drawn beside the box.
+     * @default true
+     */
+    buttons?: boolean;
+    /**
+     * Grey text shown while the box is empty.
+     * @default undefined — the box carries no placeholder
+     */
+    placeholder?: string;
+    /** @default false */
+    disabled?: boolean;
+    /**
+     * Whether the control takes the whole width it is given.
+     * @default false
+     */
+    fill?: boolean;
+    /** @default 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Accessible name, for a box no `<label>` points at.
+     * @default undefined — the box is named by its label
+     */
+    ariaLabel?: string;
+    /**
+     * The box's id, for a `<label htmlFor>` elsewhere in the form.
+     * @default undefined
+     */
+    id?: string;
+    /**
+     * A name a test finds the box by, written as `data-testid`.
+     * @default undefined
+     */
+    testId?: string;
+    /**
+     * Drawn inside the box at its left — a unit, a prefix such as `10⁻`.
+     * @default undefined
+     */
+    leftElement?: ReactElement;
+    /**
+     * Drawn inside the box at its right — a unit, a small button.
+     * @default undefined
+     */
+    rightElement?: ReactElement;
+    /** @default undefined */
+    className?: string;
+    /** @default undefined */
+    style?: CSSProperties;
+}
+/** A box that always holds a number. */
+export interface RequiredNumberInputProps extends NumberInputBaseProps {
+    /** The number the box shows. */
+    value: number;
+    /**
+     * Whether an emptied box hands up nothing. A required box keeps the number
+     * it had and shows it again when the box is left.
+     * @default false
+     */
+    allowEmpty?: false;
+    /** Called with the new number, never while the text is half-typed. */
+    onChange: (value: number) => void;
+}
+/** A box that may be left empty, which hands up `undefined`. */
+export interface OptionalNumberInputProps extends NumberInputBaseProps {
+    /** The number the box shows, or nothing when it is empty. */
+    value: number | undefined;
+    allowEmpty: true;
+    /** Called with the new number, or with `undefined` when the box is emptied. */
+    onChange: (value: number | undefined) => void;
+}
+/** See {@link NumberInput}. */
+export type NumberInputProps = RequiredNumberInputProps | OptionalNumberInputProps;
+/**
+ * A number typed into a box.
+ *
+ * The box keeps what was typed rather than what parsed. A reader halfway
+ * through `0.2` has typed `0.`, which reads as zero, and a box rendered from
+ * that number would write `0` back over the dot before the `2` arrives —
+ * which is why Blueprint's `NumericInput` cannot be given a number to show and
+ * is never used directly on our sites. Nothing is handed up until the text
+ * reads as a number, so a calculation never sees a half-typed value, and the
+ * bounds are applied when the box is left rather than under the caret.
+ * @param props - See {@link NumberInputProps}.
+ * @returns The box, with its stepper buttons unless they are turned off.
+ */
+export declare function NumberInput(props: NumberInputProps): ReactElement;
+//# sourceMappingURL=NumberInput.d.ts.map

package/lib/number/ui/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/number/ui/NumberInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxE,wEAAwE;AACxE,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wCAAwC;AACxC,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IACpE,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,gEAAgE;AAChE,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IACpE,6DAA6D;IAC7D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE,IAAI,CAAC;IACjB,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAC1B,wBAAwB,GAAG,wBAAwB,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA8IjE"}

package/lib/number/ui/NumberInput.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup, Classes, ControlGroup, InputGroup, } from '@blueprintjs/core';
+import { useState } from 'react';
+import { clamp } from "../../format/core/clamp.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { isPartialNumber, numberText, readNumber, stepNumber, } from "../core/numberText.js";
+/**
+ * A number typed into a box.
+ *
+ * The box keeps what was typed rather than what parsed. A reader halfway
+ * through `0.2` has typed `0.`, which reads as zero, and a box rendered from
+ * that number would write `0` back over the dot before the `2` arrives —
+ * which is why Blueprint's `NumericInput` cannot be given a number to show and
+ * is never used directly on our sites. Nothing is handed up until the text
+ * reads as a number, so a calculation never sees a half-typed value, and the
+ * bounds are applied when the box is left rather than under the caret.
+ * @param props - See {@link NumberInputProps}.
+ * @returns The box, with its stepper buttons unless they are turned off.
+ */
+export function NumberInput(props) {
+    const { value, min, max, step = 1, integer = false, allowEmpty = false, buttons = true, placeholder, disabled = false, fill = false, size = 'medium', ariaLabel, id, testId, leftElement, rightElement, className, style, } = props;
+    const t = useChromeT();
+    const onChange = props.onChange;
+    const [draft, setDraft] = useState(() => ({
+        text: numberText(value),
+        held: value,
+    }));
+    // The number changed elsewhere — a preset, a reset, a link — so the box has
+    // to follow. `held` is what this box last handed up, not the prop it was
+    // rendered with: comparing against the prop would make the box's own edit
+    // look external and rewrite `-0.` as `0` under the caret.
+    if (draft.held !== value)
+        setDraft({ text: numberText(value), held: value });
+    function hold(text, held) {
+        setDraft({ text, held });
+    }
+    function commit(next) {
+        hold(numberText(next), next);
+        onChange(next);
+    }
+    function type(text) {
+        const emptied = text.trim() === '';
+        const parsed = readNumber(text, integer);
+        hold(text, emptied && allowEmpty ? undefined : (parsed ?? value));
+        if (emptied) {
+            if (allowEmpty)
+                onChange(undefined);
+        }
+        else if (parsed !== undefined) {
+            onChange(parsed);
+        }
+    }
+    function leave() {
+        if (draft.text.trim() === '') {
+            if (!allowEmpty)
+                hold(numberText(value), value);
+            return;
+        }
+        const parsed = readNumber(draft.text);
+        if (parsed === undefined) {
+            hold(numberText(value), value);
+            return;
+        }
+        const settled = settle(parsed, integer, min, max);
+        if (settled !== parsed || !Object.is(settled, value))
+            commit(settled);
+    }
+    function press(event) {
+        const direction = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0;
+        if (direction === 0 || disabled)
+            return;
+        event.preventDefault();
+        const scale = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
+        move(direction * scale);
+    }
+    function move(scale) {
+        const from = readNumber(draft.text) ?? value ?? 0;
+        commit(settle(stepNumber(from, step * scale), integer, min, max));
+    }
+    const box = (_jsx(InputGroup, { id: id, size: size, fill: fill, disabled: disabled, placeholder: placeholder, value: draft.text, intent: isPartialNumber(draft.text) ? 'none' : 'danger', inputMode: integer ? 'numeric' : 'decimal', spellCheck: false, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", "aria-label": ariaLabel, "data-testid": testId, leftElement: leftElement, rightElement: rightElement, className: buttons ? undefined : className, style: buttons ? undefined : style, onValueChange: type, onKeyDown: press, onBlur: leave }));
+    if (!buttons)
+        return box;
+    const shown = readNumber(draft.text) ?? value;
+    return (_jsxs(ControlGroup, { fill: fill, style: style, className: [Classes.NUMERIC_INPUT, className].filter(Boolean).join(' '), children: [box, _jsxs(ButtonGroup, { className: Classes.FIXED, vertical: true, children: [_jsx(Button, { icon: "chevron-up", size: size, "aria-label": t('number.increment'), disabled: disabled ||
+                            (max !== undefined && shown !== undefined && shown >= max), onClick: () => move(1) }), _jsx(Button, { icon: "chevron-down", size: size, "aria-label": t('number.decrement'), disabled: disabled ||
+                            (min !== undefined && shown !== undefined && shown <= min), onClick: () => move(-1) })] })] }));
+}
+/**
+ * The number a box settles on once it is left or stepped.
+ * @param value - What the text read as.
+ * @param integer - Whether only whole numbers are wanted.
+ * @param min - Smallest accepted value, when there is one.
+ * @param max - Largest accepted value, when there is one.
+ * @returns The rounded, bounded number.
+ */
+function settle(value, integer, min, max) {
+    const rounded = integer ? Math.round(value) : value;
+    return clamp(rounded, min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY, rounded);
+}
+//# sourceMappingURL=NumberInput.js.map

package/lib/number/ui/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/number/ui/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,WAAW,EACX,OAAO,EACP,YAAY,EACZ,UAAU,GACX,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,GACX,MAAM,uBAAuB,CAAC;AAwG/B;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,IAAI,EACd,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,EAAE,EACF,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,QAA8C,CAAC;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACxC,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC;QACvB,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC,CAAC;IAEJ,4EAA4E;IAC5E,yEAAyE;IACzE,0EAA0E;IAC1E,0DAA0D;IAC1D,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK;QAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7E,SAAS,IAAI,CAAC,IAAY,EAAE,IAAwB;QAClD,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3B,CAAC;IAED,SAAS,MAAM,CAAC,IAAY;QAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC;IAED,SAAS,IAAI,CAAC,IAAY;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;QACnC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,EAAE,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC;QAClE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,UAAU;gBAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAChC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAAS,KAAK;QACZ,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;YAC/B,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClD,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxE,CAAC;IAED,SAAS,KAAK,CAAC,KAAsC;QACnD,MAAM,SAAS,GACb,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,IAAI,SAAS,KAAK,CAAC,IAAI,QAAQ;YAAE,OAAO;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS,IAAI,CAAC,KAAa;QACzB,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QAClD,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IAED,MAAM,GAAG,GAAG,CACV,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,MAAM,EAAE,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACvD,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,UAAU,EAAE,KAAK,EACjB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,KAAK,gBACR,SAAS,iBACR,MAAM,EACnB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAClC,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,KAAK,GACb,CACH,CAAC;IAEF,IAAI,CAAC,OAAO;QAAE,OAAO,GAAG,CAAC;IAEzB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC;IAC9C,OAAO,CACL,MAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEtE,GAAG,EACJ,MAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,mBAC7C,KAAC,MAAM,IACL,IAAI,EAAC,YAAY,EACjB,IAAI,EAAE,IAAI,gBACE,CAAC,CAAC,kBAAkB,CAAC,EACjC,QAAQ,EACN,QAAQ;4BACR,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,IAAI,GAAG,CAAC,EAE5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GACtB,EACF,KAAC,MAAM,IACL,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,gBACE,CAAC,CAAC,kBAAkB,CAAC,EACjC,QAAQ,EACN,QAAQ;4BACR,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,IAAI,GAAG,CAAC,EAE5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GACvB,IACU,IACD,CAChB,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,MAAM,CACb,KAAa,EACb,OAAgB,EAChB,GAAuB,EACvB,GAAuB;IAEvB,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACpD,OAAO,KAAK,CACV,OAAO,EACP,GAAG,IAAI,MAAM,CAAC,iBAAiB,EAC/B,GAAG,IAAI,MAAM,CAAC,iBAAiB,EAC/B,OAAO,CACR,CAAC;AACJ,CAAC"}

package/lib/number/ui/index.d.ts

@@ -0,0 +1,3 @@
+export type { NumberInputBaseProps, NumberInputProps, OptionalNumberInputProps, RequiredNumberInputProps, } from './NumberInput.tsx';
+export { NumberInput } from './NumberInput.tsx';
+//# sourceMappingURL=index.d.ts.map

package/lib/number/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/number/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/number/ui/index.js

@@ -0,0 +1,2 @@
+export { NumberInput } from "./NumberInput.js";
+//# sourceMappingURL=index.js.map

package/lib/number/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number/ui/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC"}

package/lib/overlay/ui/OverlayValueMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayValueMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAItD,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IACnE;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC7D,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnC,YAAY,CAuDd"}
+{"version":3,"file":"OverlayValueMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAItD,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IACnE;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC7D,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnC,YAAY,CA6Dd"}

package/lib/overlay/ui/OverlayValueMenu.js

@@ -26,7 +26,13 @@ export function OverlayValueMenu(props) {
         if (option.value === value)
             written = option.label;
     }
-    return (_jsx(PopoverNext, { isOpen: open, disabled: disabled, placement: placement, onInteraction: (next) => setOpen(next), content: _jsxs(Menu, { role: "listbox", "aria-labelledby": headingId, size: metrics.blueprintSize, style: OVERLAY_VALUE_MENU_STYLE, children: [_jsx(MenuDivider, { title: label, titleId: headingId }), options.map((option) => (_jsx(MenuItem, { roleStructure: "listoption", selected: option.value === value, text: option.label, htmlTitle: option.title, disabled: option.disabled, onClick: () => onChange(option.value) }, option.value)))] }), children: _jsx(OverlayValueButton, { label: label, value: written, keyWord: keyWord, showKey: showKey, swatches: swatches, active: open, disabled: disabled, disabledReason: disabledReason, testId: testId, opensMenu: true }) }));
+    return (_jsx(PopoverNext, { isOpen: open, disabled: disabled, placement: placement, onInteraction: (next) => setOpen(next), content: _jsxs(Menu, { role: "listbox", "aria-labelledby": headingId, size: metrics.blueprintSize, style: OVERLAY_VALUE_MENU_STYLE, children: [_jsx(MenuDivider, { title: label, titleId: headingId }), options.map((option) => (_jsx(MenuItem, { roleStructure: "listoption", selected: option.value === value, text: option.label, htmlTitle: option.title, disabled: option.disabled, 
+                    // A menu opened from inside a panel would otherwise dismiss the
+                    // panel too, taking the reader's other settings away mid-choice.
+                    shouldDismissPopover: false, onClick: () => {
+                        onChange(option.value);
+                        setOpen(false);
+                    } }, option.value)))] }), children: _jsx(OverlayValueButton, { label: label, value: written, keyWord: keyWord, showKey: showKey, swatches: swatches, active: open, disabled: disabled, disabledReason: disabledReason, testId: testId, opensMenu: true }) }));
 }
 /**
  * The menu the value opens.

package/lib/overlay/ui/OverlayValueMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayValueMenu.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuDxD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC;IAEpC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,OAAO,GAAW,KAAK,CAAC;IAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK;YAAE,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;IACrD,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACtC,OAAO,EACL,MAAC,IAAI,IACH,IAAI,EAAC,SAAS,qBACG,SAAS,EAC1B,IAAI,EAAE,OAAO,CAAC,aAAa,EAC3B,KAAK,EAAE,wBAAwB,aAE/B,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAI,EAChD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,QAAQ,IAEP,aAAa,EAAC,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAChC,IAAI,EAAE,MAAM,CAAC,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IANhC,MAAM,CAAC,KAAK,CAOjB,CACH,CAAC,IACG,YAGT,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,SACT,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,wBAAwB,GAAkB;IAC9C,QAAQ,EAAE,GAAG;CACd,CAAC"}
+{"version":3,"file":"OverlayValueMenu.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuDxD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC;IAEpC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,OAAO,GAAW,KAAK,CAAC;IAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK;YAAE,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;IACrD,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACtC,OAAO,EACL,MAAC,IAAI,IACH,IAAI,EAAC,SAAS,qBACG,SAAS,EAC1B,IAAI,EAAE,OAAO,CAAC,aAAa,EAC3B,KAAK,EAAE,wBAAwB,aAE/B,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAI,EAChD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,QAAQ,IAEP,aAAa,EAAC,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAChC,IAAI,EAAE,MAAM,CAAC,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ;oBACzB,gEAAgE;oBAChE,iEAAiE;oBACjE,oBAAoB,EAAE,KAAK,EAC3B,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACvB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAZI,MAAM,CAAC,KAAK,CAajB,CACH,CAAC,IACG,YAGT,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,SACT,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,wBAAwB,GAAkB;IAC9C,QAAQ,EAAE,GAAG;CACd,CAAC"}

package/lib/periodic/ui/ElementCell.d.ts

@@ -4,6 +4,10 @@
  *
  * A cell is a real `<button>`, so Tab reaches it, Enter and Space activate it,
  * and a screen reader reads the element's name rather than its symbol.
+ *
+ * Everything written in it is sized in container-query units, so a cell shows
+ * the same proportions at 280px beside a chart and across a lecture-hall
+ * screen — the table a class reads is the same drawing, larger.
  */
 import type { ReactElement } from 'react';
 import type { Swatch } from '../../color/core/interpolate.ts';
@@ -28,6 +32,12 @@ export interface ElementCellProps {
      * @default '' — nothing is written
      */
     detail?: string;
+    /**
+     * Whether the table this cell belongs to writes a third line at all. A table
+     * that writes none gives the room to the symbol, and its rows are shorter.
+     * @default whether this cell has one
+     */
+    writesDetail?: boolean;
     /**
      * Whether the cell is the one the tools are pointed at.
      * @default false

package/lib/periodic/ui/ElementCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCell.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAoDjE"}
+{"version":3,"file":"ElementCell.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA8EjE"}

package/lib/periodic/ui/ElementCell.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useChromeT } from "../../i18n/ui/useT.js";
 /**
  * A single element of the table.
@@ -6,15 +7,22 @@ import { useChromeT } from "../../i18n/ui/useT.js";
  * @returns The cell.
  */
 export function ElementCell(props) {
-    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', isSelected = false, isIncluded = true, onHover, } = props;
+    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', writesDetail = detail !== '', isSelected = false, isIncluded = true, onHover, } = props;
     const t = useChromeT();
-    return (_jsxs("button", { type: "button", className: className, "data-testid": `element-${symbol}`, "data-symbol": symbol, "aria-label": t('periodic.cellLabel', {
+    const [isHovered, setIsHovered] = useState(false);
+    return (_jsxs("button", { type: "button", className: className, "data-testid": `element-${symbol}`, "data-symbol": symbol, title: detail === '' ? name : `${name} · ${detail}`, "aria-label": t('periodic.cellLabel', {
             name,
             symbol,
             atomicNumber,
         }), "aria-pressed": isSelected, onClick: () => {
             onSelect(symbol);
-        }, onPointerEnter: () => onHover?.(symbol), onPointerLeave: () => onHover?.(null), style: {
+        }, onPointerEnter: () => {
+            setIsHovered(true);
+            onHover?.(symbol);
+        }, onPointerLeave: () => {
+            setIsHovered(false);
+            onHover?.(null);
+        }, style: {
             ...cellStyle,
             gridColumn: column,
             gridRow: row,
@@ -23,10 +31,110 @@ export function ElementCell(props) {
             opacity: isIncluded ? 1 : 0.28,
             // An outline rather than a fill: a table coloured by a property must
             // keep saying what the value is while a cell is selected.
-            outline: isSelected ? `2px solid ${swatch.foreground}` : 'none',
-            outlineOffset: -3,
-        }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: symbolStyle, children: symbol }), detail === '' ? null : _jsx("span", { style: detailStyle, children: detail })] }));
+            outlineStyle: isSelected ? 'solid' : 'none',
+            outlineColor: swatch.foreground,
+            // Thick enough to be seen from the back of a room, and drawn inside
+            // the cell so a neighbour never covers it.
+            outlineWidth: 'max(2px, 0.3cqw)',
+            outlineOffset: 'max(-3px, -0.4cqw)',
+            // The cell the pointer is on, for a class following a demonstration.
+            filter: isHovered ? 'brightness(1.08)' : undefined,
+        }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: {
+                    ...symbolStyle,
+                    fontSize: symbolFontSize(symbol, writesDetail),
+                }, children: symbol }), detail === '' ? null : (_jsx("span", { style: { ...detailStyle, fontSize: detailFontSize(detail) }, children: detail }))] }));
 }
+/**
+ * The size the symbol is written at.
+ *
+ * Every symbol is written at the same size, except the widest of them — the
+ * ones whose second letter is an `m` — which are written a tenth smaller
+ * rather than run into the edges of their cell.
+ * @param symbol - The chemical symbol.
+ * @param writesDetail - Whether the table writes a third line under it.
+ * @returns A CSS length.
+ */
+function symbolFontSize(symbol, writesDetail) {
+    const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
+    return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+}
+/**
+ * The size the third line takes so the whole of it is written.
+ *
+ * A value cut short by an ellipsis is a wrong value — `0.0899` read as `0.0…`
+ * is worse than not writing it at all — so a long string is written smaller
+ * rather than trimmed.
+ * @param detail - What the third line says.
+ * @returns A CSS length.
+ */
+function detailFontSize(detail) {
+    return fitted(detailWidthInEm(detail), DETAIL_CQW, '0.25rem');
+}
+/**
+ * The largest size a string of the given width fits its cell at.
+ *
+ * The room a cell leaves is a share of the table's width less its border and
+ * its padding, which are the same few pixels at every size — hence the two
+ * units in one expression.
+ * @param widthInEm - How wide the string is, in ems of its own size.
+ * @param cap - The size it is written at when it has room to spare.
+ * @param floor - The size under which it is not shrunk any further.
+ * @returns A CSS length.
+ */
+function fitted(widthInEm, cap, floor) {
+    const room = `calc((${CELL_CQW} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
+    return `max(${floor}, min(${cap}, ${room}))`;
+}
+/**
+ * How wide a symbol is, in ems of its own size.
+ * @param symbol - The chemical symbol.
+ * @returns Its width, never zero.
+ */
+function symbolWidthInEm(symbol) {
+    let width = 0;
+    for (const character of symbol) {
+        if (character === 'm' || character === 'w') {
+            width += 0.95;
+        }
+        else if (character >= 'a' && character <= 'z') {
+            width += 0.63;
+        }
+        else {
+            width += 0.85;
+        }
+    }
+    return Math.max(width, 0.85);
+}
+/**
+ * How wide the third line is, in ems of its own size.
+ *
+ * It is written with tabular figures, where every glyph — the decimal point
+ * and the minus of an exponent included — advances the same width, so counting
+ * the characters is the measurement.
+ * @param detail - What the third line says.
+ * @returns Its width, never zero.
+ */
+function detailWidthInEm(detail) {
+    return Math.max(detail.length, 1) * TABULAR_EM;
+}
+/** What one tabular glyph advances, as a share of its own size. */
+const TABULAR_EM = 0.6;
+/** The size the symbol is written at wherever it fits, as a share of the table. */
+const SYMBOL_CQW = '2.4cqw';
+/** The same, in a table that writes nothing under the symbol. */
+const SYMBOL_ALONE_CQW = '2.8cqw';
+/**
+ * The tallest the third line is ever written, as a share of the table.
+ *
+ * Close to three quarters of the symbol: the symbol is how a cell is found,
+ * but the value is what the table is being read for, and a value half the size
+ * of the symbol is the one thing on the cell a class cannot make out.
+ */
+const DETAIL_CQW = '1.75cqw';
+/** How wide one column is, as a share of the table's width. */
+const CELL_CQW = '4.85cqw';
+/** What the border and the padding of a cell take off that width. */
+const CELL_CHROME = '4px';
 const cellStyle = {
     alignItems: 'center',
     border: '1px solid rgb(255 255 255 / 0.55)',
@@ -36,27 +144,29 @@ const cellStyle = {
     flexDirection: 'column',
     font: 'inherit',
     justifyContent: 'center',
-    lineHeight: 1.05,
     minWidth: 0,
     overflow: 'hidden',
-    padding: 1,
-    transition: 'opacity 120ms ease',
+    padding: '1px',
+    transition: 'opacity 120ms ease, filter 120ms ease',
 };
 const numberStyle = {
     alignSelf: 'flex-start',
-    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    fontSize: 'max(0.33rem, 1.2cqw)',
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1,
     opacity: 0.8,
-    paddingLeft: 2,
+    paddingLeft: '0.15cqw',
 };
 const symbolStyle = {
-    fontSize: 'clamp(0.55rem, 3.3cqw, 1.05rem)',
     fontWeight: 700,
+    letterSpacing: '-0.02em',
+    lineHeight: 1.02,
 };
 const detailStyle = {
-    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1,
     maxWidth: '100%',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
 //# sourceMappingURL=ElementCell.js.map

package/lib/periodic/ui/ElementCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA8CnD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,OAAO,GACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,iBACP,WAAW,MAAM,EAAE,iBACnB,MAAM,gBACP,CAAC,CAAC,oBAAoB,EAAE;YAClC,IAAI;YACJ,MAAM;YACN,YAAY;SACb,CAAC,kBACY,UAAU,EACxB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC,EACD,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EACvC,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE,GAAG;YACZ,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAC9B,qEAAqE;YACrE,0DAA0D;YAC1D,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM;YAC/D,aAAa,EAAE,CAAC,CAAC;SAClB,aAED,eAAM,KAAK,EAAE,WAAW,YAAG,YAAY,GAAQ,EAC/C,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,EACxC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,IAC1D,CACV,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,mCAAmC;IAC3C,YAAY,EAAE,CAAC;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,oBAAoB;CACA,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,gCAAgC;IAC1C,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,CAAC;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,iCAAiC;IAC3C,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACY,CAAC"}
+{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"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"}

package/lib/periodic/ui/PeriodicTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAyErE"}
+{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA2ErE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -14,6 +14,7 @@ import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js"
 export function PeriodicTable(props) {
     const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, isIncluded, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
     const t = useChromeT();
+    const writesDetail = detailOf !== undefined;
     const gridRef = useRef(null);
     const cameFromKeyRef = useRef(false);
     const offset = headers ? 1 : 0;
@@ -35,7 +36,7 @@ export function PeriodicTable(props) {
         cameFromKeyRef.current = true;
         onSelect(next.symbol);
     }
-    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: headers ? gridWithHeadersStyle : gridStyle, onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
+    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers, writesDetail), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), writesDetail: writesDetail, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
 }
 function defaultSwatchOf(element) {
     return categorySwatch(element.category);
@@ -47,33 +48,59 @@ function noop() {
     // A table with no `onSelect` is a figure; its cells stay buttons so the
     // keyboard and a screen reader still reach every element.
 }
+/** Narrowest the table is ever drawn; under it the type stops being readable. */
+const MIN_WIDTH = 280;
+/**
+ * How tall one row of elements is, as a share of the table's width.
+ *
+ * A column is about 5.4% of that width, so a cell is a seventh taller than it
+ * is wide — the proportion of a wall chart, and the room the three lines of a
+ * cell need to be written at a size a class can read.
+ */
+const ROW_HEIGHT = '6.1cqw';
+/** The same, in a table that writes nothing under the symbol. */
+const ROW_HEIGHT_ALONE = '4.9cqw';
+/** The band the two inner-transition series were lifted out across. */
+const SERIES_GAP = 'max(6px, 1.1cqw)';
 const rootStyle = {
     display: 'flex',
     flexDirection: 'column',
     gap: 8,
+    minWidth: MIN_WIDTH,
+    // Everything inside — the height of a row as much as the type in a cell — is
+    // a share of this box rather than of the page, so the same table reads at
+    // 280px beside a chart and fills a lecture-hall screen at twice that.
+    containerType: 'inline-size',
 };
 const baseGridStyle = {
     display: 'grid',
     gap: 2,
+    minWidth: MIN_WIDTH,
     width: '100%',
-    // The cells size their type against this box rather than against the page,
-    // so the same table reads at 320px beside a chart and at 900px on its own.
-    containerType: 'inline-size',
 };
-const gridStyle = {
-    ...baseGridStyle,
+/**
+ * The grid the cells are placed on.
+ * @param headers - Whether a leading column and row hold the period and group
+ * numbers.
+ * @param writesDetail - Whether a cell writes a third line, which is what a
+ * row is tall enough for.
+ * @returns The style of the grid.
+ */
+function gridStyle(headers, writesDetail) {
+    const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
     // The eighth row is the gap the inner-transition series are lifted out into.
-    gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: 'repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-    aspectRatio: `${String(COLUMN_COUNT)} / 9.7`,
-    minWidth: 280,
-};
-const gridWithHeadersStyle = {
-    ...baseGridStyle,
-    // A leading column and a leading row hold the period and group numbers.
-    gridTemplateColumns: `1.4rem repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: '1rem repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-    aspectRatio: `${String(COLUMN_COUNT + 1.2)} / 10.6`,
-    minWidth: 280,
-};
+    const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+    if (!headers) {
+        return {
+            ...baseGridStyle,
+            gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+            gridTemplateRows: rows,
+        };
+    }
+    return {
+        ...baseGridStyle,
+        gridTemplateColumns: `max(14px, 2.4cqw) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+        gridTemplateRows: `max(12px, 2cqw) ${rows}`,
+    };
+}
 //# sourceMappingURL=PeriodicTable.js.map