@misoto22/design 0.6.1 → 0.8.0

package/dist/components/Slider/Slider.js

@@ -3,46 +3,73 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 function Slider({
   label,
   showValue = false,
-  format = String,
+  format,
   className,
   onValueChange,
+  "aria-describedby": describedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
   ...props
 }) {
   const names = Array.isArray(label) ? label : [label];
-  const [uncontrolled, setUncontrolled] = useState(props.defaultValue ?? []);
+  warnBlankName("Slider", "label", names[0], "the thumb is announced with no name and its value describes nothing");
+  const [uncontrolled, setUncontrolled] = useState(
+    props.defaultValue ?? [props.min ?? 0]
+  );
   const current = props.value ?? uncontrolled;
   const handleChange = (next) => {
     if (props.value === 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 print = format ?? String;
+  const heading = names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(" \u2013 ") : names[0];
+  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: [
+        showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
+          /* @__PURE__ */ jsx("span", { children: heading }),
+          /* @__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",
+            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 { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\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   * 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/**\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 * 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 */\nexport function Slider({\n  label,\n  showValue = false,\n  format,\n  className,\n  onValueChange,\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[]>(\n    props.defaultValue ?? [props.min ?? 0],\n  )\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  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  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      {showValue && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{heading}</span>\n          <span className=\"tabular-nums text-(--ink)\">\n            {current.map((value) => print(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((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":";AAiHQ,SACE,KADF;AA/GR,YAAY,qBAAqB;AACjC,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAiDvB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAgB;AACd,QAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAQnD,gBAAc,UAAU,SAAS,MAAM,CAAC,GAAG,qEAAqE;AAUhH,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,MAAM,gBAAgB,CAAC,MAAM,OAAO,CAAC;AAAA,EACvC;AACA,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,eAAe,CAAC,SAAmB;AACvC,QAAI,MAAM,UAAU,OAAW,iBAAgB,IAAI;AACnD,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,QAAQ,UAAU;AAIxB,QAAM,UACJ,MAAM,SAAS,IAAI,QAAQ,IAAI,CAAC,GAAG,UAAU,MAAM,KAAK,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,UAAK,IAAI,MAAM,CAAC;AAE9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,MAAM,YAAY;AAAA,QAClB;AAAA,MACF;AAAA,MAEC;AAAA,qBACC,qBAAC,SAAI,WAAU,mEACb;AAAA,8BAAC,UAAM,mBAAQ;AAAA,UACf,oBAAC,UAAK,WAAU,6BACb,kBAAQ,IAAI,CAAC,UAAU,MAAM,KAAK,CAAC,EAAE,KAAK,UAAK,GAClD;AAAA,WACF;AAAA,QAEF;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAU;AAAA,YACV,eAAe;AAAA,YACd,GAAG;AAAA,YAEJ;AAAA,kCAAC,gBAAgB,OAAhB,EAAsB,WAAU,kJAC/B,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,iCAAgC,GACnE;AAAA,cACC,QAAQ,IAAI,CAAC,OAAO,UACnB;AAAA,gBAAC,gBAAgB;AAAA,gBAAhB;AAAA,kBAEC,cAAY,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,kBAInC,oBAAkB;AAAA,kBAClB,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBAGd,kBAAgB,SAAS,OAAO,KAAK,IAAI;AAAA,kBAMzC,WAAU;AAAA;AAAA,gBAhBL;AAAA,cAiBP,CACD;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","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.

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\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":"AA2HM,SASE,KATF;AA3HN,SAAS,WAAW,SAAS,sBAAsB;AAEnD,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAiB9B,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;AAoDO,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,gBAAc,SAAS,WAAW,SAAS,2FAA2F;AACtI,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACpB,WAAW,GAAG,+CAA+C,QAAQ,OAAO,CAAC;AAAA,MAE7E;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":[]}

package/dist/components/Tag/Tag.d.ts

@@ -1,28 +1,87 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+interface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     children: ReactNode;
-    /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */
+    /**
+     * Renders the pressed/selected look, and declares the chip a toggle.
+     *
+     * An interactive chip reads `aria-pressed` off this same value, so the accent
+     * fill and the state a screen reader hears cannot drift apart. Leave it off
+     * for a chip whose `onClick` navigates or opens something: a control that is
+     * neither pressed nor unpressed is better announced as neither than as
+     * "not pressed".
+     */
     active?: boolean;
+    /**
+     * Makes the chip ITSELF the filter control.
+     *
+     * This prop exists because the alternative did not survive contact with
+     * `onRemove`. The advice used to be to wrap the tag in a button at the call
+     * site, which is fine on its own and invalid the moment the chip is also
+     * removable: the remove control is a real `<button>`, so the wrapper puts a
+     * button inside a button — markup the parser splits into siblings, leaving a
+     * DOM neither the author nor the accessibility tree expects.
+     *
+     * With this the wrapper is never written. The chip carries the click, the
+     * focus ring and the pressed state on the element that draws them, and a
+     * removable filter chip renders its two controls side by side instead of one
+     * inside the other.
+     */
+    onClick?: () => void;
 }
 /**
- * A subject label — a topic, a technology, a filter facet.
+ * The removable form: a chip for one thing the reader has already chosen.
+ *
+ * `removeLabel` is required alongside `onRemove` and not optional with a
+ * default, because "Remove" repeated down a row of filters is eight controls a
+ * screen reader cannot tell apart. Write the subject into it — "Remove
+ * TypeScript filter".
+ */
+interface TagRemovable {
+    /** Called when the reader dismisses the chip. */
+    onRemove: () => void;
+    /** The remove button's accessible name. Name the subject, not the action. */
+    removeLabel: string;
+}
+interface TagStatic {
+    onRemove?: never;
+    removeLabel?: never;
+}
+type TagProps = TagBase & (TagRemovable | TagStatic);
+/**
+ * A subject label — a topic, a technology, a filter facet — that can filter
+ * with `onClick` and be dismissed with `onRemove`.
  *
  * Distinct from `Badge`, which carries a state or a count. A tag names what
  * something is ABOUT, so several sit together in a row and the reader scans
  * them; a badge is one fact about one record.
  *
- * Presentational on purpose. To make a tag filter a list, wrap it in a button
- * or a link at the call site and pass `active` — that keeps the focus ring,
- * the pressed state and the keyboard handling with the element that actually
- * owns them.
+ * This is where a `Token` component would have gone. It was not built: a token
+ * is a tag with a remove button, and the difference between the two is one
+ * prop, not one component. The system already ships three things that look
+ * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction
+ * is an X on the end would be the one a call site picks by coin toss.
+ *
+ * Presentational until it is given a handler, and the component owns both
+ * interactive cases rather than leaving one to a wrapper at the call site.
+ * That is not a convenience: a wrapping `<button>` around a chip that already
+ * holds the remove `<button>` is a button inside a button, which no parser
+ * keeps and no accessibility tree reports the way it was written. Given both,
+ * the chip renders the label and the X as SIBLING buttons — the label takes
+ * the leading padding with it, so it is the whole of the chip up to the X
+ * rather than the words with dead padding around them.
  *
  * @example
  * <Tag>TypeScript</Tag>
  * @example
- * <button type="button" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>
+ * <Tag active={on} onClick={toggle}>Rust</Tag>
+ * @example
+ * <Tag onRemove={() => drop('rust')} removeLabel="Remove Rust filter">Rust</Tag>
+ * @example
+ * // Both: a filter the reader can toggle and also take out of the row.
+ * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel="Remove Rust filter">Rust</Tag>
  */
-declare function Tag({ children, active, className, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps): react.JSX.Element;
 
 export { Tag, type TagProps, Tag as default };

package/dist/components/Tag/Tag.js

@@ -1,18 +1,58 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { cn } from "../../lib/cn.js";
-function Tag({ children, active = false, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "span",
+function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }) {
+  const split = Boolean(onClick && onRemove);
+  const chip = cn(
+    "inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
+    active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
+    onRemove ? "gap-1 pe-1.5" : "pe-2.5",
+    // Handed to the label button in the split form, so the padding is part of
+    // the target rather than a ring of dead space around it.
+    !split && "py-1 ps-2.5",
+    className
+  );
+  const remove = onRemove ? /* @__PURE__ */ jsx(
+    "button",
     {
+      type: "button",
+      onClick: onRemove,
+      "aria-label": removeLabel,
       className: cn(
-        "inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
-        active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
-        className
+        // The drawn box is 16px, which is under the 24px minimum a pointer
+        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes
+        // the hit area out to 24 without changing what is drawn or pushing
+        // the chips apart — the 44px floor is for a standalone control, and
+        // a chip is 24 tall to begin with.
+        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)",
+        "before:absolute before:inset-[-4px] before:content-['']",
+        "opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100"
       ),
-      ...rest,
-      children
+      children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.5, "aria-hidden": true })
     }
-  );
+  ) : null;
+  if (split) {
+    return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick,
+          "aria-pressed": active,
+          className: "rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide",
+          children
+        }
+      ),
+      remove
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, "aria-pressed": active, className: chip, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+    children,
+    remove
+  ] });
 }
 var Tag_default = Tag;
 export {

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */\n  active?: boolean\n}\n\n/**\n * A subject label — a topic, a technology, a filter facet.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * Presentational on purpose. To make a tag filter a list, wrap it in a button\n * or a link at the call site and pass `active` — that keeps the focus ring,\n * the pressed state and the keyboard handling with the element that actually\n * owns them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <button type=\"button\" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>\n */\nexport function Tag({ children, active = false, className, ...rest }: TagProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n        active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AA4BI;AA3BJ,SAAS,UAAU;AAyBZ,SAAS,IAAI,EAAE,UAAU,SAAS,OAAO,WAAW,GAAG,KAAK,GAAa;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,6CAA6C;AAAA,QACtD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { X } from 'lucide-react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\ninterface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode\n  /**\n   * Renders the pressed/selected look, and declares the chip a toggle.\n   *\n   * An interactive chip reads `aria-pressed` off this same value, so the accent\n   * fill and the state a screen reader hears cannot drift apart. Leave it off\n   * for a chip whose `onClick` navigates or opens something: a control that is\n   * neither pressed nor unpressed is better announced as neither than as\n   * \"not pressed\".\n   */\n  active?: boolean\n  /**\n   * Makes the chip ITSELF the filter control.\n   *\n   * This prop exists because the alternative did not survive contact with\n   * `onRemove`. The advice used to be to wrap the tag in a button at the call\n   * site, which is fine on its own and invalid the moment the chip is also\n   * removable: the remove control is a real `<button>`, so the wrapper puts a\n   * button inside a button — markup the parser splits into siblings, leaving a\n   * DOM neither the author nor the accessibility tree expects.\n   *\n   * With this the wrapper is never written. The chip carries the click, the\n   * focus ring and the pressed state on the element that draws them, and a\n   * removable filter chip renders its two controls side by side instead of one\n   * inside the other.\n   */\n  onClick?: () => void\n}\n\n/**\n * The removable form: a chip for one thing the reader has already chosen.\n *\n * `removeLabel` is required alongside `onRemove` and not optional with a\n * default, because \"Remove\" repeated down a row of filters is eight controls a\n * screen reader cannot tell apart. Write the subject into it — \"Remove\n * TypeScript filter\".\n */\ninterface TagRemovable {\n  /** Called when the reader dismisses the chip. */\n  onRemove: () => void\n  /** The remove button's accessible name. Name the subject, not the action. */\n  removeLabel: string\n}\n\ninterface TagStatic {\n  onRemove?: never\n  removeLabel?: never\n}\n\nexport type TagProps = TagBase & (TagRemovable | TagStatic)\n\n/**\n * A subject label — a topic, a technology, a filter facet — that can filter\n * with `onClick` and be dismissed with `onRemove`.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * This is where a `Token` component would have gone. It was not built: a token\n * is a tag with a remove button, and the difference between the two is one\n * prop, not one component. The system already ships three things that look\n * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction\n * is an X on the end would be the one a call site picks by coin toss.\n *\n * Presentational until it is given a handler, and the component owns both\n * interactive cases rather than leaving one to a wrapper at the call site.\n * That is not a convenience: a wrapping `<button>` around a chip that already\n * holds the remove `<button>` is a button inside a button, which no parser\n * keeps and no accessibility tree reports the way it was written. Given both,\n * the chip renders the label and the X as SIBLING buttons — the label takes\n * the leading padding with it, so it is the whole of the chip up to the X\n * rather than the words with dead padding around them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <Tag active={on} onClick={toggle}>Rust</Tag>\n * @example\n * <Tag onRemove={() => drop('rust')} removeLabel=\"Remove Rust filter\">Rust</Tag>\n * @example\n * // Both: a filter the reader can toggle and also take out of the row.\n * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel=\"Remove Rust filter\">Rust</Tag>\n */\nexport function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps) {\n  // Two controls cannot nest, so a chip that is both a filter and a selection\n  // splits its label out into a button of its own beside the remove button.\n  const split = Boolean(onClick && onRemove)\n\n  const chip = cn(\n    'inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n    active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n    onRemove ? 'gap-1 pe-1.5' : 'pe-2.5',\n    // Handed to the label button in the split form, so the padding is part of\n    // the target rather than a ring of dead space around it.\n    !split && 'py-1 ps-2.5',\n    className,\n  )\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      onClick={onRemove}\n      aria-label={removeLabel}\n      className={cn(\n        // The drawn box is 16px, which is under the 24px minimum a pointer\n        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes\n        // the hit area out to 24 without changing what is drawn or pushing\n        // the chips apart — the 44px floor is for a standalone control, and\n        // a chip is 24 tall to begin with.\n        'relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)',\n        \"before:absolute before:inset-[-4px] before:content-['']\",\n        'opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100',\n      )}\n    >\n      <X size={12} strokeWidth={2.5} aria-hidden />\n    </button>\n  ) : null\n\n  if (split) {\n    return (\n      <span className={chip} {...rest}>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={active}\n          className=\"rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide\"\n        >\n          {children}\n        </button>\n        {remove}\n      </span>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} aria-pressed={active} className={chip} {...rest}>\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <span className={chip} {...rest}>\n      {children}\n      {remove}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AAwHM,cAMA,YANA;AAxHN,SAAS,SAAS;AAElB,SAAS,UAAU;AAuFZ,SAAS,IAAI,EAAE,UAAU,QAAQ,SAAS,UAAU,aAAa,WAAW,GAAG,KAAK,GAAa;AAGtG,QAAM,QAAQ,QAAQ,WAAW,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX;AAAA,IACA,SAAS,6CAA6C;AAAA,IACtD,WAAW,iBAAiB;AAAA;AAAA;AAAA,IAG5B,CAAC,SAAS;AAAA,IACV;AAAA,EACF;AAEA,QAAM,SAAS,WACb;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,EAC7C,IACE;AAEJ,MAAI,OAAO;AACT,WACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACzB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,gBAAc,QAAQ,WAAW,MAAO,GAAG,MAChF,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACxB;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}