@misoto22/design 0.7.0 → 0.9.0

package/dist/components/Slider/Slider.d.ts

@@ -10,9 +10,35 @@ interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
      * A range slider (two thumbs) needs one name per thumb — pass an array.
      */
     label: string | [string, string];
-    /** Prints the current value beside the label. */
+    /**
+     * Prints the current value beside the label.
+     *
+     * A two-thumb range prints both names and both values, in the same order —
+     * the heading used to print the first name over a pair of numbers, which read
+     * as "Minimum" over "10 – 90".
+     */
     showValue?: boolean;
-    /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */
+    /**
+     * Turns that readout into a box the number can be typed into, and implies
+     * `showValue`.
+     *
+     * A slider is a control for a NEIGHBOURHOOD; someone who needs 1,150 rather
+     * than roughly 1,200 is dragging a 16px thumb across a hundred steps to get
+     * it. This is the way out, in the place the value already is, rather than a
+     * second field beside the track that has to be kept in step by hand.
+     *
+     * The box shows `format`'s output at rest and the bare number while it has
+     * focus, so a reader still sees "$1,200" and a typist is never asked to type
+     * a currency symbol back.
+     */
+    editable?: boolean;
+    /**
+     * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.
+     *
+     * Reaches assistive tech as well as the readout: it becomes each thumb's
+     * `aria-valuetext`, so a thumb showing "$1,200" announces that rather than the
+     * bare number. Left off, the platform announces the value itself.
+     */
     format?: (value: number) => string;
 }
 /**
@@ -27,9 +53,22 @@ interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
  * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized
  * for the design is well under any pointer-target guideline.
  *
+ * `editable` is the answer to the thing a slider cannot do. Reach for it
+ * whenever the exact figure is the point — a budget, a timeout, a price — and
+ * leave it off when the value is genuinely approximate, because a box invites
+ * precision the setting may not have.
+ *
+ * Inside a `Field`, the hint, the error and the requirement land on the THUMB,
+ * which is the element carrying `role="slider"` — on the root they would sit on
+ * a `<span>` with no role and announce nothing. The NAME still comes from
+ * `label` here: a field's label above a slider points at that same roleless
+ * root, so it neither names the control nor clicks through to it.
+ *
  * @example
  * <Slider label="Quality" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />
+ * @example
+ * <Slider label="Monthly budget" defaultValue={[1200]} max={5000} step={50} editable format={(n) => `$${n}`} />
  */
-declare function Slider({ label, showValue, format, className, onValueChange, ...props }: SliderProps): react.JSX.Element;
+declare function Slider({ label, showValue, editable, format, className, onValueChange, value: controlledValue, defaultValue, min, max, step, 'aria-describedby': describedBy, 'aria-required': ariaRequired, 'aria-invalid': ariaInvalid, ...props }: SliderProps): react.JSX.Element;
 
 export { Slider, type SliderProps, Slider as default };

package/dist/components/Slider/Slider.js

@@ -1,48 +1,139 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { clampToRange, parseNumber, snapToStep } from "../../lib/numeric.js";
+import { warnBlankName } from "../../lib/warn.js";
 function Slider({
   label,
   showValue = false,
-  format = String,
+  editable = false,
+  format,
   className,
   onValueChange,
+  value: controlledValue,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  "aria-describedby": describedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
   ...props
 }) {
   const names = Array.isArray(label) ? label : [label];
-  const [uncontrolled, setUncontrolled] = useState(props.defaultValue ?? []);
-  const current = props.value ?? uncontrolled;
+  warnBlankName("Slider", "label", names[0], "the thumb is announced with no name and its value describes nothing");
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? [min]);
+  const current = controlledValue ?? uncontrolled;
+  const [draft, setDraft] = useState(null);
+  const draftRef = useRef(null);
+  const edit = (next) => {
+    draftRef.current = next;
+    setDraft(next);
+  };
   const handleChange = (next) => {
-    if (props.value === void 0) setUncontrolled(next);
+    if (controlledValue === void 0) setUncontrolled(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
-    showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
-      /* @__PURE__ */ jsx("span", { children: names[0] }),
-      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => format(value)).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      SliderPrimitive.Root,
-      {
-        className: "group relative flex w-full touch-none select-none items-center py-3",
-        onValueChange: handleChange,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-(--accent)" }) }),
-          current.map((_, index) => /* @__PURE__ */ jsx(
-            SliderPrimitive.Thumb,
-            {
-              "aria-label": names[index] ?? names[0],
-              className: "relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 disabled:opacity-(--disabled-opacity) motion-reduce:transition-none"
-            },
-            index
-          ))
-        ]
-      }
-    )
-  ] });
+  const commit = (index, text) => {
+    const parsed = parseNumber(text);
+    if (parsed === null) return false;
+    const lower = index > 0 ? current[index - 1] ?? min : min;
+    const upper = index < current.length - 1 ? current[index + 1] ?? max : max;
+    const next = clampToRange(snapToStep(parsed, step, min), Math.max(min, lower), Math.min(max, upper));
+    if (next !== current[index]) handleChange(current.map((value, i) => i === index ? next : value));
+    return true;
+  };
+  const print = format ?? String;
+  const heading = names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(" \u2013 ") : names[0];
+  const readout = showValue || editable;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col gap-3",
+        // On the wrapper, and driven by the prop: the thumb is a <span>, so a
+        // `disabled:` variant compiles to `&:disabled` and matches nothing —
+        // the control was drawn exactly like a live one while refusing to move.
+        // The wrapper is also what dims the readout above the track.
+        props.disabled && "opacity-(--disabled-opacity) pointer-events-none",
+        className
+      ),
+      children: [
+        readout && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4 mono-meta text-(--ink-3-aa)", children: [
+          /* @__PURE__ */ jsx("span", { children: heading }),
+          editable ? /* @__PURE__ */ jsx("span", { className: "flex items-baseline gap-1.5", children: current.map((value, index) => {
+            const editing = draft?.index === index;
+            const text = editing ? draft.text : print(value);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  disabled: props.disabled,
+                  value: text,
+                  "aria-label": `${names[index] ?? names[0]}, exact value`,
+                  "aria-describedby": describedBy,
+                  "aria-required": ariaRequired,
+                  "aria-invalid": editing && parseNumber(draft.text) === null || ariaInvalid || void 0,
+                  onFocus: () => edit({ index, text: String(value) }),
+                  onChange: (event) => edit({ index, text: event.target.value }),
+                  onBlur: () => {
+                    const pending = draftRef.current;
+                    if (pending?.index === index) commit(index, pending.text);
+                    edit(null);
+                  },
+                  onKeyDown: (event) => {
+                    const pending = draftRef.current;
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      if (pending?.index === index && commit(index, pending.text)) edit(null);
+                    }
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      edit(null);
+                      event.currentTarget.blur();
+                    }
+                  },
+                  className: "w-20 rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) px-1.5 py-0.5 text-end tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--rule-hard) focus:border-(--ink) aria-invalid:border-(--danger)"
+                }
+              )
+            ] }, index);
+          }) }) : /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => print(value)).join(" \u2013 ") })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Root,
+          {
+            className: "group relative flex w-full touch-none select-none items-center py-3",
+            value: current,
+            min,
+            max,
+            step,
+            onValueChange: handleChange,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-(--accent)" }) }),
+              current.map((value, index) => /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  "aria-label": names[index] ?? names[0],
+                  "aria-describedby": describedBy,
+                  "aria-required": ariaRequired,
+                  "aria-invalid": ariaInvalid,
+                  "aria-valuetext": format ? format(value) : void 0,
+                  className: "relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none"
+                },
+                index
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 var Slider_default = Slider;
 export {

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  /**\n   * Names the control. Required: a slider with no name announces only a number,\n   * and a number with no noun is not information.\n   *\n   * A range slider (two thumbs) needs one name per thumb — pass an array.\n   */\n  label: string | [string, string]\n  /** Prints the current value beside the label. */\n  showValue?: boolean\n  /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */\n  format?: (value: number) => string\n}\n\n/**\n * A value chosen along a range.\n *\n * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End\n * reach the ends — and the ARIA that reports the value. What is here is the\n * look, and the labelling, which is the part a slider most often gets wrong: a\n * thumb that announces \"42\" and nothing else leaves a screen reader user with a\n * number and no idea what it measures.\n *\n * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized\n * for the design is well under any pointer-target guideline.\n *\n * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  format = String,\n  className,\n  onValueChange,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\n\n  // Tracked here, not read off the props. An uncontrolled slider's\n  // `defaultValue` never changes, so the printed figure sat at its starting\n  // number while the thumb moved — the one thing `showValue` exists to avoid.\n  const [uncontrolled, setUncontrolled] = useState<number[]>(props.defaultValue ?? [])\n  const current = props.value ?? uncontrolled\n\n  const handleChange = (next: number[]) => {\n    if (props.value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-3', className)}>\n      {showValue && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{names[0]}</span>\n          <span className=\"tabular-nums text-(--ink)\">\n            {current.map((value) => format(value)).join(' – ')}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\n        onValueChange={handleChange}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-(--accent)\" />\n        </SliderPrimitive.Track>\n        {current.map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\n            // The visible thumb is 16px; the `before` pseudo-element widens the\n            // hit area to 44px without changing what is drawn.\n            // `transition-transform` and not `all`: the thumb's own position is\n            // set by Radix as a `left` percentage, and transitioning that would\n            // make it lag the pointer. Only the grow-on-grab is animated.\n            className=\"relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 disabled:opacity-(--disabled-opacity) motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":";AA2DQ,SACE,KADF;AAzDR,YAAY,qBAAqB;AACjC,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AA+BZ,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAKnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,MAAM,gBAAgB,CAAC,CAAC;AACnF,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,eAAe,CAAC,SAAmB;AACvC,QAAI,MAAM,UAAU,OAAW,iBAAgB,IAAI;AACnD,oBAAgB,IAAI;AAAA,EACtB;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBACC,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,gBAAM,CAAC,GAAE;AAAA,MAChB,oBAAC,UAAK,WAAU,6BACb,kBAAQ,IAAI,CAAC,UAAU,OAAO,KAAK,CAAC,EAAE,KAAK,UAAK,GACnD;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAU;AAAA,QACV,eAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,kJAC/B,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,iCAAgC,GACnE;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,UACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,cAMnC,WAAU;AAAA;AAAA,YAPL;AAAA,UAQP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { Fragment, useRef, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { clampToRange, parseNumber, snapToStep } from '../../lib/numeric'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  /**\n   * Names the control. Required: a slider with no name announces only a number,\n   * and a number with no noun is not information.\n   *\n   * A range slider (two thumbs) needs one name per thumb — pass an array.\n   */\n  label: string | [string, string]\n  /**\n   * Prints the current value beside the label.\n   *\n   * A two-thumb range prints both names and both values, in the same order —\n   * the heading used to print the first name over a pair of numbers, which read\n   * as \"Minimum\" over \"10 – 90\".\n   */\n  showValue?: boolean\n  /**\n   * Turns that readout into a box the number can be typed into, and implies\n   * `showValue`.\n   *\n   * A slider is a control for a NEIGHBOURHOOD; someone who needs 1,150 rather\n   * than roughly 1,200 is dragging a 16px thumb across a hundred steps to get\n   * it. This is the way out, in the place the value already is, rather than a\n   * second field beside the track that has to be kept in step by hand.\n   *\n   * The box shows `format`'s output at rest and the bare number while it has\n   * focus, so a reader still sees \"$1,200\" and a typist is never asked to type\n   * a currency symbol back.\n   */\n  editable?: boolean\n  /**\n   * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.\n   *\n   * Reaches assistive tech as well as the readout: it becomes each thumb's\n   * `aria-valuetext`, so a thumb showing \"$1,200\" announces that rather than the\n   * bare number. Left off, the platform announces the value itself.\n   */\n  format?: (value: number) => string\n}\n\n/** Which box is being typed into, and what is in it. Only one can have focus. */\ninterface Draft {\n  index: number\n  text: string\n}\n\n/**\n * A value chosen along a range.\n *\n * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End\n * reach the ends — and the ARIA that reports the value. What is here is the\n * look, and the labelling, which is the part a slider most often gets wrong: a\n * thumb that announces \"42\" and nothing else leaves a screen reader user with a\n * number and no idea what it measures.\n *\n * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized\n * for the design is well under any pointer-target guideline.\n *\n * `editable` is the answer to the thing a slider cannot do. Reach for it\n * whenever the exact figure is the point — a budget, a timeout, a price — and\n * leave it off when the value is genuinely approximate, because a box invites\n * precision the setting may not have.\n *\n * Inside a `Field`, the hint, the error and the requirement land on the THUMB,\n * which is the element carrying `role=\"slider\"` — on the root they would sit on\n * a `<span>` with no role and announce nothing. The NAME still comes from\n * `label` here: a field's label above a slider points at that same roleless\n * root, so it neither names the control nor clicks through to it.\n *\n * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n * @example\n * <Slider label=\"Monthly budget\" defaultValue={[1200]} max={5000} step={50} editable format={(n) => `$${n}`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  editable = false,\n  format,\n  className,\n  onValueChange,\n  value: controlledValue,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  'aria-describedby': describedBy,\n  'aria-required': ariaRequired,\n  'aria-invalid': ariaInvalid,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\n\n  // The other five guarded naming props are plain strings; this one is a\n  // string or a pair, so the first name is what is checked — a range whose\n  // lower thumb has no name is the same silence as a single one with none.\n  // It catches a blank, not an absent: `label` is required, so a missing one\n  // is a type error everywhere except a caller that has already left the\n  // types behind.\n  warnBlankName('Slider', 'label', names[0], 'the thumb is announced with no name and its value describes nothing')\n\n  // Tracked here, not read off the props. An uncontrolled slider's\n  // `defaultValue` never changes, so the printed figure sat at its starting\n  // number while the thumb moved — the one thing `showValue` exists to avoid.\n  //\n  // The fallback is the primitive's own — one thumb at the minimum. The thumbs\n  // are rendered from THIS array rather than from Radix's, so an empty one is a\n  // track with nothing on it to drag, which is what `<Slider label=\"Volume\" />`\n  // used to render.\n  const [uncontrolled, setUncontrolled] = useState<number[]>(defaultValue ?? [min])\n  const current = controlledValue ?? uncontrolled\n\n  // Mirrored into a ref because Escape clears the draft and blurs the box in\n  // the SAME event: the state update has not been applied by the time the\n  // blur handler runs, so a handler reading the state variable would see the\n  // abandoned text and commit exactly what Escape was pressed to discard.\n  const [draft, setDraft] = useState<Draft | null>(null)\n  const draftRef = useRef<Draft | null>(null)\n  const edit = (next: Draft | null) => {\n    draftRef.current = next\n    setDraft(next)\n  }\n\n  const handleChange = (next: number[]) => {\n    if (controlledValue === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  /**\n   * Commits one typed box, or reports that there was no number in it.\n   *\n   * A thumb is also bounded by its NEIGHBOURS, which is the bound a typed\n   * value can cross and a dragged one cannot: typing 90 into the lower end of a\n   * range whose upper end is at 70 would otherwise hand Radix an unsorted array\n   * and leave the two thumbs crossed over.\n   */\n  const commit = (index: number, text: string): boolean => {\n    const parsed = parseNumber(text)\n    if (parsed === null) return false\n    const lower = index > 0 ? (current[index - 1] ?? min) : min\n    const upper = index < current.length - 1 ? (current[index + 1] ?? max) : max\n    const next = clampToRange(snapToStep(parsed, step, min), Math.max(min, lower), Math.min(max, upper))\n    if (next !== current[index]) handleChange(current.map((value, i) => (i === index ? next : value)))\n    return true\n  }\n\n  const print = format ?? String\n  // One name per thumb, in the thumbs' own order, so the heading lines up with\n  // the numbers under it. A single name stays a single name however many thumbs\n  // there are — a price filter called \"Price\" is not \"Price – Price\".\n  const heading =\n    names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(' – ') : names[0]\n\n  const readout = showValue || editable\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3',\n        // On the wrapper, and driven by the prop: the thumb is a <span>, so a\n        // `disabled:` variant compiles to `&:disabled` and matches nothing —\n        // the control was drawn exactly like a live one while refusing to move.\n        // The wrapper is also what dims the readout above the track.\n        props.disabled && 'opacity-(--disabled-opacity) pointer-events-none',\n        className,\n      )}\n    >\n      {readout && (\n        <div className=\"flex items-baseline justify-between gap-4 mono-meta text-(--ink-3-aa)\">\n          <span>{heading}</span>\n          {editable ? (\n            <span className=\"flex items-baseline gap-1.5\">\n              {current.map((value, index) => {\n                const editing = draft?.index === index\n                const text = editing ? draft.text : print(value)\n                return (\n                  <Fragment key={index}>\n                    {index > 0 && <span aria-hidden=\"true\">–</span>}\n                    <input\n                      type=\"text\"\n                      // Not `type=\"number\"`: the box holds `format`'s output at\n                      // rest — \"$1,200\" — which a number input refuses to\n                      // display and silently blanks. `inputMode` is what still\n                      // brings up the numeric keypad on a phone.\n                      inputMode=\"decimal\"\n                      // `disabled` on the wrapper is `pointer-events-none`,\n                      // which a keyboard walks straight past. Without this, the\n                      // one editable part of a disabled slider stays editable.\n                      disabled={props.disabled}\n                      value={text}\n                      // The name has to differ from the thumb's: both carry the\n                      // same value, and two controls announcing \"Quality\" is a\n                      // reader hearing the same control twice.\n                      aria-label={`${names[index] ?? names[0]}, exact value`}\n                      aria-describedby={describedBy}\n                      aria-required={ariaRequired}\n                      aria-invalid={(editing && parseNumber(draft.text) === null) || ariaInvalid || undefined}\n                      onFocus={() => edit({ index, text: String(value) })}\n                      onChange={(event) => edit({ index, text: event.target.value })}\n                      onBlur={() => {\n                        const pending = draftRef.current\n                        if (pending?.index === index) commit(index, pending.text)\n                        edit(null)\n                      }}\n                      onKeyDown={(event) => {\n                        const pending = draftRef.current\n                        if (event.key === 'Enter') {\n                          event.preventDefault()\n                          if (pending?.index === index && commit(index, pending.text)) edit(null)\n                        }\n                        if (event.key === 'Escape') {\n                          event.preventDefault()\n                          edit(null)\n                          event.currentTarget.blur()\n                        }\n                      }}\n                      className=\"w-20 rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) px-1.5 py-0.5 text-end tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--rule-hard) focus:border-(--ink) aria-invalid:border-(--danger)\"\n                    />\n                  </Fragment>\n                )\n              })}\n            </span>\n          ) : (\n            <span className=\"tabular-nums text-(--ink)\">\n              {current.map((value) => print(value)).join(' – ')}\n            </span>\n          )}\n        </div>\n      )}\n      {/* Controlled from THIS component's state even when the caller left it\n          uncontrolled, because the thumbs have to answer to more than dragging:\n          a number typed into the readout never passes through Radix, so a Root\n          holding its own `defaultValue` would keep the thumb where it was and\n          leave the figure above it disagreeing with the track. `min`, `max` and\n          `step` are passed on rather than spread for the same reason — the\n          typed value is reconciled against them here. */}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        onValueChange={handleChange}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-(--accent)\" />\n        </SliderPrimitive.Track>\n        {current.map((value, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\n            // The thumb is what carries role=\"slider\", so this is where a\n            // Field's description and requirement have to land — on the root\n            // they sit on a <span> with no role, which announces nothing.\n            aria-describedby={describedBy}\n            aria-required={ariaRequired}\n            aria-invalid={ariaInvalid}\n            // Only when a format was given: setting it otherwise would replace\n            // the platform's own reading of the value with the same digits.\n            aria-valuetext={format ? format(value) : undefined}\n            // The visible thumb is 16px; the `before` pseudo-element widens the\n            // hit area to 44px without changing what is drawn.\n            // `transition-transform` and not `all`: the thumb's own position is\n            // set by Radix as a `left` percentage, and transitioning that would\n            // make it lag the pointer. Only the grow-on-grab is animated.\n            className=\"relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":"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","names":[]}

package/dist/components/Spinner/Spinner.d.ts

@@ -11,6 +11,8 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
      * ink ground an ink ring is invisible.
      */
     tone?: 'default' | 'current';
+    /** Merged onto the RING, after `size` and `tone`, so it overrides both. */
+    className?: string;
     /**
      * Announced to assistive tech. Pass the specific thing being waited on
      * ("Loading projects"), not the generic word — a screen reader user hearing
@@ -39,6 +41,12 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
  * page is broken, prefer `Skeleton` — a shape that describes what is coming
  * beats a dot that describes nothing.
  *
+ * `className` reaches the RING, alongside `size` and `tone`, and overrides
+ * them: every utility a caller has for a spinner is about the ring, and merged
+ * onto the wrapper instead `className="size-8"` grew an invisible box around an
+ * unchanged 18px circle. Layout still works from there — the wrapper is
+ * `inline-flex` and takes the ring's margin box as its own.
+ *
  * @example
  * <Spinner size="lg" label="Loading projects" />
  * @example

package/dist/components/Spinner/Spinner.js

@@ -21,7 +21,7 @@ function Spinner({
     {
       role: label === null ? void 0 : "status",
       "aria-hidden": label === null ? true : void 0,
-      className: cn("inline-flex shrink-0 items-center justify-center", className),
+      className: "inline-flex shrink-0 items-center justify-center",
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
@@ -31,7 +31,8 @@ function Spinner({
             className: cn(
               "inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]",
               SIZE[size],
-              TONE[tone]
+              TONE[tone],
+              className
             )
           }
         ),

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 14px / 18px / 26px. Match the size of the type it sits beside. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * `default` draws the ring against the page — a hairline track in the rule\n   * colour with the leading quarter in ink. `current` draws it in the inherited\n   * text colour, which is what a spinner inside a filled button needs: on an\n   * ink ground an ink ring is invisible.\n   */\n  tone?: 'default' | 'current'\n  /**\n   * Announced to assistive tech. Pass the specific thing being waited on\n   * (\"Loading projects\"), not the generic word — a screen reader user hearing\n   * \"Loading\" three times cannot tell which three things.\n   *\n   * Pass `null` for a spinner that sits inside a control which already names\n   * the operation (a button whose own label changes to \"Saving…\"), so the two\n   * are not read out twice.\n   */\n  label?: string | null\n}\n\nconst SIZE = {\n  sm: 'size-3.5 border-[1.5px]',\n  md: 'size-[18px] border-2',\n  lg: 'size-6.5 border-2',\n} as const\n\nconst TONE = {\n  default: 'border-(--rule-2) border-t-(--ink)',\n  current: 'border-current/25 border-t-current',\n} as const\n\n/**\n * The system's one \"working\" indicator.\n *\n * A ring, not a blurred glow and not a shimmer: the White Reset has no light\n * source, so depth and softness are not available to it. The leading quarter is\n * the only thing that distinguishes the ring from a plain circle, which is why\n * the track stays a hairline — a spinner is a hint that time is passing, not a\n * feature of the page.\n *\n * It spins under `motion-safe` only. A reader who has asked for less motion\n * gets a static ring, which still reads as \"not finished\" because the leading\n * quarter is darker than the track.\n *\n * For a wait long enough that the reader would otherwise wonder whether the\n * page is broken, prefer `Skeleton` — a shape that describes what is coming\n * beats a dot that describes nothing.\n *\n * @example\n * <Spinner size=\"lg\" label=\"Loading projects\" />\n * @example\n * // Inside a filled button, where the ground is ink:\n * <Spinner size=\"sm\" tone=\"current\" label={null} />\n */\nexport function Spinner({\n  size = 'md',\n  tone = 'default',\n  className,\n  label = 'Loading',\n  ...rest\n}: SpinnerProps) {\n  return (\n    <span\n      role={label === null ? undefined : 'status'}\n      aria-hidden={label === null ? true : undefined}\n      className={cn('inline-flex shrink-0 items-center justify-center', className)}\n      {...rest}\n    >\n      <span\n        data-m22-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AAmEI,SAME,KANF;AAlEJ,SAAS,UAAU;AAwBnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AAyBO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,OAAO,SAAY;AAAA,MACnC,eAAa,UAAU,OAAO,OAAO;AAAA,MACrC,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAC1E,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF;AAAA,QACC,UAAU,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,EACtD;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 14px / 18px / 26px. Match the size of the type it sits beside. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * `default` draws the ring against the page — a hairline track in the rule\n   * colour with the leading quarter in ink. `current` draws it in the inherited\n   * text colour, which is what a spinner inside a filled button needs: on an\n   * ink ground an ink ring is invisible.\n   */\n  tone?: 'default' | 'current'\n  /** Merged onto the RING, after `size` and `tone`, so it overrides both. */\n  className?: string\n  /**\n   * Announced to assistive tech. Pass the specific thing being waited on\n   * (\"Loading projects\"), not the generic word — a screen reader user hearing\n   * \"Loading\" three times cannot tell which three things.\n   *\n   * Pass `null` for a spinner that sits inside a control which already names\n   * the operation (a button whose own label changes to \"Saving…\"), so the two\n   * are not read out twice.\n   */\n  label?: string | null\n}\n\nconst SIZE = {\n  sm: 'size-3.5 border-[1.5px]',\n  md: 'size-[18px] border-2',\n  lg: 'size-6.5 border-2',\n} as const\n\nconst TONE = {\n  default: 'border-(--rule-2) border-t-(--ink)',\n  current: 'border-current/25 border-t-current',\n} as const\n\n/**\n * The system's one \"working\" indicator.\n *\n * A ring, not a blurred glow and not a shimmer: the White Reset has no light\n * source, so depth and softness are not available to it. The leading quarter is\n * the only thing that distinguishes the ring from a plain circle, which is why\n * the track stays a hairline — a spinner is a hint that time is passing, not a\n * feature of the page.\n *\n * It spins under `motion-safe` only. A reader who has asked for less motion\n * gets a static ring, which still reads as \"not finished\" because the leading\n * quarter is darker than the track.\n *\n * For a wait long enough that the reader would otherwise wonder whether the\n * page is broken, prefer `Skeleton` — a shape that describes what is coming\n * beats a dot that describes nothing.\n *\n * `className` reaches the RING, alongside `size` and `tone`, and overrides\n * them: every utility a caller has for a spinner is about the ring, and merged\n * onto the wrapper instead `className=\"size-8\"` grew an invisible box around an\n * unchanged 18px circle. Layout still works from there — the wrapper is\n * `inline-flex` and takes the ring's margin box as its own.\n *\n * @example\n * <Spinner size=\"lg\" label=\"Loading projects\" />\n * @example\n * // Inside a filled button, where the ground is ink:\n * <Spinner size=\"sm\" tone=\"current\" label={null} />\n */\nexport function Spinner({\n  size = 'md',\n  tone = 'default',\n  className,\n  label = 'Loading',\n  ...rest\n}: SpinnerProps) {\n  return (\n    <span\n      role={label === null ? undefined : 'status'}\n      aria-hidden={label === null ? true : undefined}\n      className=\"inline-flex shrink-0 items-center justify-center\"\n      {...rest}\n    >\n      <span\n        data-m22-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n          className,\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AA2EI,SAME,KANF;AA1EJ,SAAS,UAAU;AA0BnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AA+BO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,OAAO,SAAY;AAAA,MACnC,eAAa,UAAU,OAAO,OAAO;AAAA,MACrC,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,cACT;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,UAAU,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,EACtD;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/StatusPill/StatusPill.d.ts

@@ -15,6 +15,11 @@ interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
  * how the same "available for work" chip ended up with three different dot
  * sizes and two different pulse timings on one site.
  *
+ * A warning or danger tone is doubled by a visually-hidden severity word, so
+ * the tone survives the dot being hidden. It does not survive monochrome: the
+ * pill's own text is `--ink-2` at every tone, and the state itself still
+ * belongs in the words the call site writes.
+ *
  * @example
  * <StatusPill>Available for work</StatusPill>
  * @example

package/dist/components/StatusPill/StatusPill.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 import { StatusDot } from "../StatusDot/StatusDot.js";
+const SEVERITY = {
+  warning: "Warning",
+  danger: "Error"
+};
 function StatusPill({
   children,
   tone = "success",
@@ -8,6 +12,7 @@ function StatusPill({
   className,
   ...rest
 }) {
+  const severity = SEVERITY[tone];
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -18,6 +23,7 @@ function StatusPill({
       ...rest,
       children: [
         /* @__PURE__ */ jsx(StatusDot, { tone, pulse }),
+        severity && /* @__PURE__ */ jsx("span", { className: "sr-only", children: severity }),
         children
       ]
     }

package/dist/components/StatusPill/StatusPill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\n\nexport interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  tone?: StatusTone\n  /** Pulsing live dot (default) vs a settled one. */\n  pulse?: boolean\n}\n\n/**\n * A live state, named: a dot plus an uppercase mono label in an outlined pill.\n *\n * One component rather than a dot and a pill assembled per call site, which is\n * how the same \"available for work\" chip ended up with three different dot\n * sizes and two different pulse timings on one site.\n *\n * @example\n * <StatusPill>Available for work</StatusPill>\n * @example\n * <StatusPill tone=\"warning\" pulse={false}>Degraded</StatusPill>\n */\nexport function StatusPill({\n  children,\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusPillProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      <StatusDot tone={tone} pulse={pulse} />\n      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AA+BI,SAOE,KAPF;AA9BJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAqBpC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QACpC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\n\nexport interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  tone?: StatusTone\n  /** Pulsing live dot (default) vs a settled one. */\n  pulse?: boolean\n}\n\n/**\n * The two tones a reader must not miss, in the words the dot cannot say.\n *\n * `tone` reaches only the StatusDot, and the dot is `aria-hidden` by law — so\n * before this, \"Degraded\" in a warning pill and \"Degraded\" in a neutral one\n * were the same sentence to anyone who could not see the colour.\n *\n * `success` and `neutral` add nothing on purpose. They are the absence of\n * alarm, which is what a reader assumes; announcing it before every settled\n * pill is noise charged to the two tones that are worth interrupting for.\n */\nconst SEVERITY: Partial<Record<StatusTone, string>> = {\n  warning: 'Warning',\n  danger: 'Error',\n}\n\n/**\n * A live state, named: a dot plus an uppercase mono label in an outlined pill.\n *\n * One component rather than a dot and a pill assembled per call site, which is\n * how the same \"available for work\" chip ended up with three different dot\n * sizes and two different pulse timings on one site.\n *\n * A warning or danger tone is doubled by a visually-hidden severity word, so\n * the tone survives the dot being hidden. It does not survive monochrome: the\n * pill's own text is `--ink-2` at every tone, and the state itself still\n * belongs in the words the call site writes.\n *\n * @example\n * <StatusPill>Available for work</StatusPill>\n * @example\n * <StatusPill tone=\"warning\" pulse={false}>Degraded</StatusPill>\n */\nexport function StatusPill({\n  children,\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusPillProps) {\n  const severity = SEVERITY[tone]\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      <StatusDot tone={tone} pulse={pulse} />\n      {/* Absolutely positioned by `sr-only`, so it is out of flow and costs the\n          pill neither a gap nor a pixel. */}\n      {severity && <span className=\"sr-only\">{severity}</span>}\n      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AAsDI,SAOE,KAPF;AArDJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAoB3C,MAAM,WAAgD;AAAA,EACpD,SAAS;AAAA,EACT,QAAQ;AACV;AAmBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,WAAW,SAAS,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QAGpC,YAAY,oBAAC,UAAK,WAAU,WAAW,oBAAS;AAAA,QAChD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Table/Table.d.ts

@@ -45,6 +45,12 @@ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
  * element to Tab to and therefore no way to press an arrow key at it, so the
  * columns past the fold simply do not exist for anyone not using a mouse.
  *
+ * It is also POSITIONED, which is not decoration. `sr-only` is
+ * `position: absolute`, so a visually-hidden label in a cell resolves against
+ * the nearest positioned ancestor — and with none between it and the document,
+ * it escapes the scroll container and every `overflow-hidden` around it, and
+ * widens the page by however far the table happens to be scrolled.
+ *
  * No zebra striping at any border setting. In a monochrome system a striped row
  * is a second surface competing with the page ground, and the hairline between
  * rows is already enough to track a line across.
@@ -91,6 +97,20 @@ interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>
     /** Which edge the cell's contents sit against. Match the column's header. */
     align?: TableAlign;
 }
+/**
+ * A body cell.
+ *
+ * TOP-aligned, and that is a choice about which kind of table is the common
+ * one here: a cell holding a paragraph. Top is what lines the first lines of a
+ * row up with each other, and centring a two-word term against a four-line
+ * description puts the term in the middle of nothing.
+ *
+ * It is the wrong default for the other kind — a row of one-line values with a
+ * control in it. A 36px button next to 16px of text makes a 52px row, and every
+ * other cell then hangs at the top of it with twenty pixels of nothing
+ * underneath, which reads as a column that has slipped. Pass
+ * `className="align-middle"` on those rows; the data-table template does.
+ */
 declare function TD({ align, className, ...rest }: TDProps): react.JSX.Element;
 
 export { type SortDirection, TBody, TD, type TDProps, TH, type THProps, THead, TR, Table, type TableAlign, type TableBorders, type TableProps, Table as default };

package/dist/components/Table/Table.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 const ALIGN = {
   start: "text-start",
   center: "text-center",
@@ -27,6 +28,7 @@ function Table({
   children,
   ...rest
 }) {
+  warnBlankName("Table", "caption", caption, "the table is announced with no name and a reader arrives in it with no idea what it lists");
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -34,7 +36,7 @@ function Table({
       role: "region",
       "aria-label": caption,
       "data-table-density": density,
-      className: cn("w-full overflow-x-auto scroll-slim", BORDERS[borders]),
+      className: cn("relative w-full overflow-x-auto scroll-slim", BORDERS[borders]),
       children: /* @__PURE__ */ jsxs(
         "table",
         {

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ChevronsUpDown,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            strokeWidth={2}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"AAmHM,SASE,KATF;AAnHN,SAAS,WAAW,SAAS,sBAAsB;AAEnD,SAAS,UAAU;AAiBnB,MAAM,QAAoC;AAAA,EACxC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAeA,MAAM,OACJ;AACF,MAAM,YAAY;AAClB,MAAM,UACJ;AACF,MAAM,QAAQ;AAEd,MAAM,UAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,GAAG,MAAM,SAAS,yBAAyB;AAAA,EACjD,UAAU,GAAG,MAAM,WAAW,KAAK;AAAA,EACnC,iBAAiB,GAAG,MAAM,WAAW,SAAS,KAAK;AAAA,EACnD,MAAM;AACR;AA8CO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACpB,WAAW,GAAG,sCAAsC,QAAQ,OAAO,CAAC;AAAA,MAEpE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBACE;AAAA,YACF;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEJ;AAAA,gCAAC,aAAQ,WAAW,GAAG,cAAc,8CAA8C,SAAS,GACzF,mBACH;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,GAAG,EAAE,WAAW,GAAG,KAAK,GAAwC;AAC9E,SAAO,oBAAC,QAAG,WAAuB,GAAG,MAAM;AAC7C;AAyBA,MAAM,OACJ;AAEF,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM;AACR;AAYO,SAAS,GAAG;AAAA,EACjB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAY;AACV,QAAM,OAAO,UAAU,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAW,WAAW,gBAAgB;AAAA,MACtC,WAAW,GAAG,MAAM,+CAA+C,MAAM,KAAK,GAAG,SAAS;AAAA,MACzF,GAAG;AAAA,MAEH,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,SAAS,sBAAsB;AAAA,UACnD;AAAA,UAEC;AAAA;AAAA,YACD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,aAAa;AAAA,gBACb,eAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,UAAU;AAAA,gBAC9B;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,GAAG,EAAE,QAAQ,SAAS,WAAW,GAAG,KAAK,GAAY;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,MAAM,oDAAoD,MAAM,KAAK,GAAG,SAAS;AAAA,MAC9F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * It is also POSITIONED, which is not decoration. `sr-only` is\n * `position: absolute`, so a visually-hidden label in a cell resolves against\n * the nearest positioned ancestor — and with none between it and the document,\n * it escapes the scroll container and every `overflow-hidden` around it, and\n * widens the page by however far the table happens to be scrolled.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  warnBlankName('Table', 'caption', caption, 'the table is announced with no name and a reader arrives in it with no idea what it lists')\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('relative w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ChevronsUpDown,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            strokeWidth={2}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\n/**\n * A body cell.\n *\n * TOP-aligned, and that is a choice about which kind of table is the common\n * one here: a cell holding a paragraph. Top is what lines the first lines of a\n * row up with each other, and centring a two-word term against a four-line\n * description puts the term in the middle of nothing.\n *\n * It is the wrong default for the other kind — a row of one-line values with a\n * control in it. A 36px button next to 16px of text makes a 52px row, and every\n * other cell then hangs at the top of it with twenty pixels of nothing\n * underneath, which reads as a column that has slipped. Pass\n * `className=\"align-middle\"` on those rows; the data-table template does.\n */\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"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","names":[]}

package/dist/components/Tabs/Tabs.js

@@ -8,7 +8,13 @@ function TabsList({ className, ...rest }) {
     TabsPrimitive.List,
     {
       className: cn(
-        "flex items-center gap-1 overflow-x-auto border-b border-(--rule-2) scroll-slim",
+        // `overflow-y-hidden` is not decoration. A strip only ever scrolls
+        // sideways, but `overflow-x: auto` on its own computes `overflow-y` to
+        // `auto` as well — and the active trigger's `-mb-px` rule leaves the
+        // content exactly one pixel taller than the box, which is enough for a
+        // vertical scrollbar to appear beside a row of tabs that has nothing
+        // to scroll.
+        "flex items-center overflow-x-auto overflow-y-hidden gap-1 border-b border-(--rule-2) scroll-slim",
         className
       ),
       ...rest

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Tabs root, re-exported as a typed passthrough. */\nexport const Tabs = TabsPrimitive.Root\n\n/**\n * The tab strip.\n *\n * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves\n * every tab below it when the strip grows, and the reader loses the one they\n * were about to click.\n *\n * @example\n * <Tabs defaultValue=\"preview\">\n *   <TabsList>\n *     <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n *     <TabsTrigger value=\"code\">Code</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"preview\">…</TabsContent>\n * </Tabs>\n */\nexport function TabsList({ className, ...rest }: ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        'flex items-center gap-1 overflow-x-auto border-b border-(--rule-2) scroll-slim',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One tab.\n *\n * The active marker is a 2px ink rule pulled onto the strip's own border with\n * `-mb-px`, so the two occupy the same line instead of stacking into a 3px\n * edge. 44px tall, because a tab is a pointer target like any other.\n */\nexport function TabsTrigger({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(\n        '-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The panel paired to a {@link TabsTrigger} by matching `value`. */\nexport function TabsContent({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-m22-animated\n      className={cn('pt-5 data-[state=active]:animate-[m22-panel-in_var(--duration-fast)_var(--ease)]', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Tabs\n"],"mappings":";AA2BI;AAzBJ,YAAY,mBAAmB;AAE/B,SAAS,UAAU;AAGZ,MAAM,OAAO,cAAc;AAkB3B,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAA8C;AAC1F,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AASO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,qBAAiB;AAAA,MACjB,WAAW,GAAG,oFAAoF,SAAS;AAAA,MAC1G,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Tabs root, re-exported as a typed passthrough. */\nexport const Tabs = TabsPrimitive.Root\n\n/**\n * The tab strip.\n *\n * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves\n * every tab below it when the strip grows, and the reader loses the one they\n * were about to click.\n *\n * @example\n * <Tabs defaultValue=\"preview\">\n *   <TabsList>\n *     <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n *     <TabsTrigger value=\"code\">Code</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"preview\">…</TabsContent>\n * </Tabs>\n */\nexport function TabsList({ className, ...rest }: ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        // `overflow-y-hidden` is not decoration. A strip only ever scrolls\n        // sideways, but `overflow-x: auto` on its own computes `overflow-y` to\n        // `auto` as well — and the active trigger's `-mb-px` rule leaves the\n        // content exactly one pixel taller than the box, which is enough for a\n        // vertical scrollbar to appear beside a row of tabs that has nothing\n        // to scroll.\n        'flex items-center overflow-x-auto overflow-y-hidden gap-1 border-b border-(--rule-2) scroll-slim',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One tab.\n *\n * The active marker is a 2px ink rule pulled onto the strip's own border with\n * `-mb-px`, so the two occupy the same line instead of stacking into a 3px\n * edge. 44px tall, because a tab is a pointer target like any other.\n */\nexport function TabsTrigger({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(\n        '-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The panel paired to a {@link TabsTrigger} by matching `value`. */\nexport function TabsContent({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-m22-animated\n      className={cn('pt-5 data-[state=active]:animate-[m22-panel-in_var(--duration-fast)_var(--ease)]', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Tabs\n"],"mappings":";AA2BI;AAzBJ,YAAY,mBAAmB;AAE/B,SAAS,UAAU;AAGZ,MAAM,OAAO,cAAc;AAkB3B,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAA8C;AAC1F,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AASO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,qBAAiB;AAAA,MACjB,WAAW,GAAG,oFAAoF,SAAS;AAAA,MAC1G,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,eAAQ;","names":[]}