@verdify/ui 0.2.0 → 0.2.2

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Skeleton } from \"../skeleton\";\nimport {\n  tableVariants,\n  tableCaptionClass,\n  tableHeaderVariants,\n  tableBodyVariants,\n  tableRowVariants,\n  tableCellVariants,\n  tableRowHeaderVariants,\n  tableHeadVariants,\n  tableSortButtonClass,\n  tableSortCaretClass,\n  tableEmptyClass,\n  tableSkeletonCellClass,\n  type TableCellVariantProps,\n} from \"./table.variants\";\n\n/** The row density (spec §3): `comfortable` (default) for general reading, `compact` for dense console views. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n/** The rule treatment (spec §3): row hairlines (`horizontal`, default), `grid` (rows + columns), or `zebra` (alternating tint). */\nexport type TableRule = \"horizontal\" | \"grid\" | \"zebra\";\n/** A cell's reported state (spec §3/§4): a status color appears only inside a cell that reports a real state, paired with text. */\nexport type TableCellStatus = NonNullable<TableCellVariantProps[\"status\"]>;\n/** A sort direction (spec §4/§7): reflected as `aria-sort` on the header and a non-color caret. */\nexport type TableSortDirection = \"ascending\" | \"descending\" | \"none\";\n\n// The presentation axes set ONCE on the root <table> travel to every cell via context (the proven\n// Dialog/Sheet/Tabs root-context pattern), so callers set density/rule on the Table and never repeat\n// them on each cell. `sticky` is read by the header. This is why the file is `'use client'` — it\n// uses React context (a hook). No cell roving is wired: a static Table's cells are read, not\n// operated; focus belongs to the interactive controls only (spec §6) — cell-by-cell arrow movement\n// is DataGrid behavior, not Table behavior, so there is no hand-rolled roving layer here.\ntype TableContextValue = { density: TableDensity; rule: TableRule };\nconst TableContext = React.createContext<TableContextValue>({\n  density: \"comfortable\",\n  rule: \"horizontal\",\n});\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Row density (spec §3). `comfortable` (default) or `compact`. Applies to all cells via context. */\n  density?: TableDensity;\n  /** Rule treatment (spec §3). `horizontal` (default), `grid`, or `zebra`. Applies to rows/cells via context. */\n  rule?: TableRule;\n  /**\n   * Pin the header row while the body scrolls (spec §3 sticky-header). The header gets the stronger\n   * border-strong divider where a heavier separation reads better. Selection and sort are unchanged.\n   */\n  stickyHeader?: boolean;\n  /**\n   * The polite live-region message (spec §7/§8, WCAG 4.1.3 Status Messages). When a sort or a filter\n   * changes the visible rows, set this to the result so it is announced — for example\n   * \"Sorted by status, ascending. 42 rows.\" The visual reorder is not announced on its own, so a\n   * silent re-sort breaks §8 (\"Don't re-sort silently\"). The caller owns the count (mirroring\n   * CommandPalette): pass the new string whenever the visible rows change. Rendered into an sr-only\n   * `role=\"status\" aria-live=\"polite\"` node, so it reaches assistive tech as text, never color alone.\n   */\n  announcement?: string;\n}\n\n/**\n * A Table presents structured data in rows and columns so you can read, compare, and sort records —\n * a list of API keys, verification events, or registered agents (spec §1). It is a SEMANTIC\n * `<table>`: the data has a real row-and-column relationship and the native markup carries that\n * relationship into the accessibility tree (1.3.1), not just the pixels. Reach for a DataGrid when\n * the data needs virtualized rows, in-cell editing, column resizing, or roving-focus cell navigation.\n *\n * Neutrals carry the table — it is a reading surface, not an accent surface (spec §3): most of it is\n * neutral text and hairline borders. A status color appears ONLY inside a cell that reports a real\n * state, paired with text (never a header, a whole row, or a decoration); the brand violet is NEVER\n * a Table variant — the brand is not a status, so it never tints a row, header, sort, or selection\n * (brand != state). For a first-class verified result in a cell, use the VerifiedBadge molecule.\n *\n * Name the table with a `<caption>` (preferred) or `aria-labelledby`/`aria-label`. It owns no\n * keyboard model of its own — focus belongs to the controls it hosts (a sortable header, a row\n * Checkbox, a row action), which keep their native tab stops in reading order (spec §6).\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, density = \"comfortable\", rule = \"horizontal\", stickyHeader = false, announcement, children, ...props },\n  ref,\n) {\n  const ctx = React.useMemo<TableContextValue>(() => ({ density, rule }), [density, rule]);\n  // sticky is read by the header through a second, header-only context so the <thead> can pin\n  // without the cell context carrying a presentation flag it does not use.\n  const stickyCtx = React.useMemo(() => ({ sticky: stickyHeader }), [stickyHeader]);\n  return (\n    <TableContext.Provider value={ctx}>\n      <TableStickyContext.Provider value={stickyCtx}>\n        <table ref={ref} className={cn(tableVariants(), className)} {...props}>\n          {children}\n        </table>\n        {/* The polite live region (spec §7/§8, WCAG 4.1.3): the result of a sort or filter — the new\n            order and row count — announced as text, since the visual reorder is not announced on its\n            own (a silent re-sort is the §8 \"Don't\"). Always present (the live region must exist before\n            its text changes to be announced); sr-only so it never paints, and a sibling of the <table>,\n            not a child, since a <span> is not valid table content. The caller feeds `announcement`. */}\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </TableStickyContext.Provider>\n    </TableContext.Provider>\n  );\n});\n\nconst TableStickyContext = React.createContext<{ sticky: boolean }>({ sticky: false });\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\n\n/**\n * The table's accessible name (spec §2/§7) — a `<caption>` naming what the data is, for example\n * \"Verification events, last 30 days\". Prefer it over a detached heading; add `className=\"sr-only\"`\n * to keep the name in the accessibility tree while hiding it visually.\n */\nexport const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n  function TableCaption({ className, ...props }, ref) {\n    return <caption ref={ref} className={cn(tableCaptionClass, className)} {...props} />;\n  },\n);\n\nexport type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * The `<thead>` holding the column-header row (spec §2). When the table's `stickyHeader` is set, the\n * header pins to the top of the scroll container with the stronger divider (spec §3/§5). The pinning\n * is read from the Table via context, so callers set it once on the Table.\n */\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  function TableHeader({ className, ...props }, ref) {\n    const { sticky } = React.useContext(TableStickyContext);\n    return <thead ref={ref} className={cn(tableHeaderVariants({ sticky }), className)} {...props} />;\n  },\n);\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /**\n   * The body is resolving (spec §4 Loading). Renders `skeletonRows` × `columns` Skeleton cells in the\n   * table's own column layout — keeping the header and column widths stable so the table does not\n   * reflow when data arrives — and marks the body `aria-busy=\"true\"`. A wait is a plain wait, not\n   * theatre: the deliberate verified-check duration is never spent here.\n   */\n  loading?: boolean;\n  /** How many skeleton rows to show while loading (spec §4 Loading). Default `3`. */\n  skeletonRows?: number;\n  /** How many columns the skeleton rows span, so the placeholder matches the real column layout. Default `1`. */\n  columns?: number;\n}\n\n/**\n * The `<tbody>` holding the data rows (spec §2). In the `zebra` rule it alternates a neutral\n * raised-surface tint on even rows (read from the Table via context). While `loading`, it is\n * `aria-busy` and shows Skeleton rows in the column layout; the skeletons are decorative and the\n * body owns the wait (the Skeleton itself announces nothing, spec §4 Loading / §7).\n */\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  function TableBody({ className, loading = false, skeletonRows = 3, columns = 1, children, ...props }, ref) {\n    const { rule } = React.useContext(TableContext);\n    return (\n      <tbody\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(tableBodyVariants({ rule }), className)}\n        {...props}\n      >\n        {loading\n          ? Array.from({ length: Math.max(1, skeletonRows) }, (_, r) => (\n              <TableRow key={`skeleton-${r}`}>\n                {Array.from({ length: Math.max(1, columns) }, (_, c) => (\n                  // a placeholder data cell in the column layout; decorative, so the wait is owned by\n                  // the body's aria-busy, not the skeleton (spec §4 Loading / §7).\n                  <td key={c} data-testid=\"table-skeleton-cell\" className={tableSkeletonCellClass}>\n                    <Skeleton variant=\"text\" />\n                  </td>\n                ))}\n              </TableRow>\n            ))\n          : children}\n      </tbody>\n    );\n  },\n);\n\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * The `<tfoot>` summary row (spec §2) — a total or an aggregate. It is DATA, not pagination;\n * pagination is a separate Pagination control beside the table.\n */\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n  function TableFooter({ className, ...props }, ref) {\n    return (\n      <tfoot ref={ref} className={cn(\"border-t border-border-default\", className)} {...props} />\n    );\n  },\n);\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /**\n   * A selectable row is currently selected (spec §4 Selected). Sets `aria-selected=\"true\"` and the\n   * restrained neutral raised-surface fill. Selection is encoded by the row Checkbox's checked state\n   * AND `aria-selected`, never by the fill alone, and NEVER a brand or status tint (brand != state).\n   */\n  selected?: boolean;\n}\n\n/**\n * A `<tr>` (spec §2/§4). A body row gets the restrained raised-surface hover fill (an affordance, to\n * track the eye across a wide row — nothing is selected until you act) and, when `selected`, the same\n * neutral fill plus `aria-selected`. The rule treatment (hairline / grid / zebra) is read from the\n * Table via context. Used inside `<thead>`, `<tbody>`, and `<tfoot>`.\n */\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow({ className, selected = false, ...props }, ref) {\n    const { rule } = React.useContext(TableContext);\n    return (\n      <tr\n        ref={ref}\n        aria-selected={selected || undefined}\n        className={cn(tableRowVariants({ rule }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * This column can be re-sorted from its header (spec §3 sortable). Renders the header label as a\n   * real `<button>` (the control it is) with a direction caret, and reflects `aria-sort` on the\n   * `<th>`. Enable per column, not table-wide, so only meaningfully sortable columns advertise it.\n   */\n  sortable?: boolean;\n  /**\n   * The current sort direction for this column (spec §4 Sorted), reflected as `aria-sort` on the\n   * `<th>` and as the caret glyph. Only one column is the sort column at a time — set `\"ascending\"`\n   * or `\"descending\"` on it and `\"none\"` (the default) on the rest.\n   */\n  sortDirection?: TableSortDirection;\n  /** Fired when the sortable header is activated (click / Enter / Space), so the caller re-sorts and updates `sortDirection`. */\n  onSort?: () => void;\n  /**\n   * The column name used in the sort control's accessible name (\"Sort by {label}, {direction}\"),\n   * when it differs from the visible children. Defaults to the children's text.\n   */\n  sortLabel?: string;\n}\n\n// The direction caret (spec §4 Sorted): decorative — aria-sort on the th + the glyph SHAPE\n// (data-direction) encode the direction, so it never rests on color alone (1.4.1). Inline SVG, no\n// icon dep; it points up for ascending, down for descending, and shows a neutral both-ways glyph\n// when the column is sortable but not the active sort column.\nfunction SortCaret({ direction }: { direction: TableSortDirection }) {\n  return (\n    <span\n      data-testid=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      className={tableSortCaretClass}\n    >\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" focusable=\"false\" aria-hidden=\"true\">\n        {direction === \"ascending\" ? (\n          <path d=\"M4 10l4-4 4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : direction === \"descending\" ? (\n          <path d=\"M4 6l4 4 4-4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          // sortable but not the active column: a quiet both-directions glyph\n          <path d=\"M5 6.5l3-3 3 3M5 9.5l3 3 3-3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n    </span>\n  );\n}\n\nconst NEXT_DIRECTION_WORD: Record<TableSortDirection, string> = {\n  none: \"ascending\",\n  ascending: \"descending\",\n  descending: \"ascending\",\n};\n\n/**\n * A `<th scope=\"col\">` column header (spec §2/§7). A plain header is a quiet, tracked label in the\n * secondary text color. A `sortable` header wraps that label in a real `<button>` carrying the\n * ghost-action accent, a visible focus ring, the target-size floor, and a direction caret, and the\n * `<th>` reflects `aria-sort` — so sort direction reaches assistive tech as data and never rests on\n * color alone (1.4.1). The sort button's accessible name names the action and the column (\"Sort by\n * status, ascending\"). Density + grid rule are read from the Table via context.\n */\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, sortable = false, sortDirection = \"none\", onSort, sortLabel, children, ...props },\n  ref,\n) {\n  const { density, rule } = React.useContext(TableContext);\n  const ariaSort = sortable ? sortDirection : undefined;\n  const label = sortLabel ?? (typeof children === \"string\" ? children : undefined);\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      // exactly one header carries aria-sort at a time (spec §4 Sorted); the rest are \"none\"/absent\n      aria-sort={ariaSort}\n      className={cn(tableHeadVariants({ density, rule }), className)}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          // the control's name includes the ACTION and the COLUMN, plus the NEXT direction it will\n          // sort to — so a screen-reader user knows what activating it does (spec §7). aria-sort on\n          // the th already exposes the CURRENT state.\n          aria-label={label ? `Sort by ${label}, ${NEXT_DIRECTION_WORD[sortDirection]}` : undefined}\n          className={tableSortButtonClass}\n        >\n          {children}\n          <SortCaret direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n});\n\nexport type TableRowHeaderProps = React.ThHTMLAttributes<HTMLTableCellElement>;\n\n/**\n * A `<th scope=\"row\">` row-header cell (spec §2/§7) — the row's natural label (an identifier, a\n * name), tying the row's cells to it. It reads at the same body weight as a data cell but is promoted\n * to a header for the relationship (1.3.1). Density + grid rule are read from the Table via context.\n */\nexport const TableRowHeader = React.forwardRef<HTMLTableCellElement, TableRowHeaderProps>(\n  function TableRowHeader({ className, ...props }, ref) {\n    const { density, rule } = React.useContext(TableContext);\n    return (\n      <th\n        ref={ref}\n        scope=\"row\"\n        className={cn(tableRowHeaderVariants({ density, rule }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * The cell reports a real STATE (spec §3/§4): `verified`, `signal`, `caution`, or `critical`. The\n   * status color lives in the CELL only (never the row or header), paired with text — so a grayscale\n   * reader still reads the state from the words. NEVER a brand token. For a first-class verified\n   * result use the VerifiedBadge molecule inside a plain cell, not a hand-tinted cell.\n   */\n  status?: TableCellStatus;\n  /** A numeric cell (spec §4/§5): tabular figures so digits align down the column, end-aligned, in the PRIMARY data text role. */\n  numeric?: boolean;\n  /** De-emphasized AUXILIARY cell text (spec §5) — a timestamp, a unit. Takes the muted role; independent of `numeric`. */\n  auxiliary?: boolean;\n}\n\n/**\n * A `<td>` data cell (spec §2 cell). Holds text, a number, a Badge, an Avatar, or a small inline\n * control. A plain cell is neutral primary text. A `numeric` cell uses tabular figures and stays in\n * the PRIMARY data text role (the muted role is reserved for `auxiliary` text — a timestamp, a unit —\n * per spec §5); a cell that reports a real state takes a `status` treatment (the status fg paired with\n * text). It is NOT a focus stop — focus belongs to any interactive control inside it (spec §6).\n * Density + grid rule are read from the Table via context.\n */\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { className, status = \"none\", numeric = false, auxiliary = false, ...props },\n  ref,\n) {\n  const { density, rule } = React.useContext(TableContext);\n  return (\n    <td\n      ref={ref}\n      className={cn(tableCellVariants({ density, rule, numeric, auxiliary, status }), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** How many columns the empty line spans, so it fills the table's own width (spec §2/§4 Empty). */\n  colSpan?: number;\n}\n\n/**\n * The empty-state row (spec §2/§4 Empty): a single full-width cell stating there is nothing yet and\n * what to do next, in plain words ending in a period. An empty table is NOT an error and never reads\n * as one — no status color. Render it inside the `<tbody>` when there are zero rows after loading.\n */\nexport const TableEmpty = React.forwardRef<HTMLTableCellElement, TableEmptyProps>(\n  function TableEmpty({ className, colSpan = 1, children, ...props }, ref) {\n    return (\n      <tr>\n        <td ref={ref} colSpan={colSpan} className={cn(tableEmptyClass, className)} {...props}>\n          {children}\n        </td>\n      </tr>\n    );\n  },\n);\n"],"mappings":";AA0FM,SACE,KADF;AAxFN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAkBP,MAAM,eAAe,MAAM,cAAiC;AAAA,EAC1D,SAAS;AAAA,EACT,MAAM;AACR,CAAC;AAwCM,MAAM,QAAQ,MAAM,WAAyC,SAASA,OAC3E,EAAE,WAAW,UAAU,eAAe,OAAO,cAAc,eAAe,OAAO,cAAc,UAAU,GAAG,MAAM,GAClH,KACA;AACA,QAAM,MAAM,MAAM,QAA2B,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC;AAGvF,QAAM,YAAY,MAAM,QAAQ,OAAO,EAAE,QAAQ,aAAa,IAAI,CAAC,YAAY,CAAC;AAChF,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,KAC5B,+BAAC,mBAAmB,UAAnB,EAA4B,OAAO,WAClC;AAAA,wBAAC,WAAM,KAAU,WAAW,GAAG,cAAc,GAAG,SAAS,GAAI,GAAG,OAC7D,UACH;AAAA,IAMA,oBAAC,UAAK,MAAK,UAAS,aAAU,UAAS,WAAU,WAC9C,wBACH;AAAA,KACF,GACF;AAEJ,CAAC;AAED,MAAM,qBAAqB,MAAM,cAAmC,EAAE,QAAQ,MAAM,CAAC;AAS9E,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,aAAQ,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EACpF;AACF;AASO,MAAM,cAAc,MAAM;AAAA,EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACjD,UAAM,EAAE,OAAO,IAAI,MAAM,WAAW,kBAAkB;AACtD,WAAO,oBAAC,WAAM,KAAU,WAAW,GAAG,oBAAoB,EAAE,OAAO,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAAA,EAChG;AACF;AAsBO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,WAAW,UAAU,OAAO,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK;AACzG,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,YAAY;AAC9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,kBAAkB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,QACnD,GAAG;AAAA,QAEH,oBACG,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG,CAAC,GAAG,MACpD,oBAAC,YACE,gBAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,EAAE,GAAG,CAACC,IAAG;AAAA;AAAA;AAAA,UAGhD,oBAAC,QAAW,eAAY,uBAAsB,WAAW,wBACvD,8BAAC,YAAS,SAAQ,QAAO,KADlB,CAET;AAAA,SACD,KAPY,YAAY,CAAC,EAQ5B,CACD,IACD;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAQO,MAAM,cAAc,MAAM;AAAA,EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACjD,WACE,oBAAC,WAAM,KAAU,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAAO;AAAA,EAE5F;AACF;AAiBO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASC,UAAS,EAAE,WAAW,WAAW,OAAO,GAAG,MAAM,GAAG,KAAK;AAChE,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,YAAY;AAC9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe,YAAY;AAAA,QAC3B,WAAW,GAAG,iBAAiB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,QAClD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AA4BA,SAAS,UAAU,EAAE,UAAU,GAAsC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,kBAAgB;AAAA,MAChB,eAAY;AAAA,MACZ,WAAW;AAAA,MAEX,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,WAAU,SAAQ,eAAY,QACxG,wBAAc,cACb,oBAAC,UAAK,GAAE,iBAAgB,eAAc,SAAQ,gBAAe,SAAQ,IACnE,cAAc,eAChB,oBAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,QAGpE,oBAAC,UAAK,GAAE,gCAA+B,eAAc,SAAQ,gBAAe,SAAQ;AAAA,SAExF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,sBAA0D;AAAA,EAC9D,MAAM;AAAA,EACN,WAAW;AAAA,EACX,YAAY;AACd;AAUO,MAAM,YAAY,MAAM,WAAiD,SAASC,WACvF,EAAE,WAAW,WAAW,OAAO,gBAAgB,QAAQ,QAAQ,WAAW,UAAU,GAAG,MAAM,GAC7F,KACA;AACA,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,WAAW,YAAY;AACvD,QAAM,WAAW,WAAW,gBAAgB;AAC5C,QAAM,QAAQ,cAAc,OAAO,aAAa,WAAW,WAAW;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MAEN,aAAW;AAAA,MACX,WAAW,GAAG,kBAAkB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEH,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UAIT,cAAY,QAAQ,WAAW,KAAK,KAAK,oBAAoB,aAAa,CAAC,KAAK;AAAA,UAChF,WAAW;AAAA,UAEV;AAAA;AAAA,YACD,oBAAC,aAAU,WAAW,eAAe;AAAA;AAAA;AAAA,MACvC,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AASM,MAAM,iBAAiB,MAAM;AAAA,EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACpD,UAAM,EAAE,SAAS,KAAK,IAAI,MAAM,WAAW,YAAY;AACvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,WAAW,GAAG,uBAAuB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACjE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAwBO,MAAM,YAAY,MAAM,WAAiD,SAASC,WACvF,EAAE,WAAW,SAAS,QAAQ,UAAU,OAAO,YAAY,OAAO,GAAG,MAAM,GAC3E,KACA;AACA,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,WAAW,YAAY;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,kBAAkB,EAAE,SAAS,MAAM,SAAS,WAAW,OAAO,CAAC,GAAG,SAAS;AAAA,MACxF,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAYM,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK;AACvE,WACE,oBAAC,QACC,8BAAC,QAAG,KAAU,SAAkB,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAC5E,UACH,GACF;AAAA,EAEJ;AACF;","names":["Table","TableCaption","TableHeader","TableBody","_","TableFooter","TableRow","TableHead","TableRowHeader","TableCell","TableEmpty"]}
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Skeleton } from \"../skeleton\";\nimport {\n  tableVariants,\n  tableCaptionClass,\n  tableHeaderVariants,\n  tableBodyVariants,\n  tableRowVariants,\n  tableCellVariants,\n  tableRowHeaderVariants,\n  tableHeadVariants,\n  tableSortButtonClass,\n  tableSortCaretClass,\n  tableEmptyClass,\n  tableSkeletonCellClass,\n  type TableCellVariantProps,\n} from \"./table.variants\";\n\n/** The row density (spec §3): `comfortable` (default) for general reading, `compact` for dense console views. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n/** The rule treatment (spec §3): row hairlines (`horizontal`, default), `grid` (rows + columns), or `zebra` (alternating tint). */\nexport type TableRule = \"horizontal\" | \"grid\" | \"zebra\";\n/** A cell's reported state (spec §3/§4): a status color appears only inside a cell that reports a real state, paired with text. */\nexport type TableCellStatus = NonNullable<TableCellVariantProps[\"status\"]>;\n/** A sort direction (spec §4/§7): reflected as `aria-sort` on the header and a non-color caret. */\nexport type TableSortDirection = \"ascending\" | \"descending\" | \"none\";\n\n// The presentation axes set ONCE on the root <table> travel to every cell via context (the proven\n// Dialog/Sheet/Tabs root-context pattern), so callers set density/rule on the Table and never repeat\n// them on each cell. `sticky` is read by the header. This is why the file is `'use client'` — it\n// uses React context (a hook). No cell roving is wired: a static Table's cells are read, not\n// operated; focus belongs to the interactive controls only (spec §6) — cell-by-cell arrow movement\n// is DataGrid behavior, not Table behavior, so there is no hand-rolled roving layer here.\ntype TableContextValue = { density: TableDensity; rule: TableRule };\nconst TableContext = React.createContext<TableContextValue>({\n  density: \"comfortable\",\n  rule: \"horizontal\",\n});\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Row density (spec §3). `comfortable` (default) or `compact`. Applies to all cells via context. */\n  density?: TableDensity;\n  /** Rule treatment (spec §3). `horizontal` (default), `grid`, or `zebra`. Applies to rows/cells via context. */\n  rule?: TableRule;\n  /**\n   * Pin the header row while the body scrolls (spec §3 sticky-header). The header gets the stronger\n   * border-strong divider where a heavier separation reads better. Selection and sort are unchanged.\n   */\n  stickyHeader?: boolean;\n  /**\n   * The polite live-region message (spec §7/§8, WCAG 4.1.3 Status Messages). When a sort or a filter\n   * changes the visible rows, set this to the result so it is announced — for example\n   * \"Sorted by status, ascending. 42 rows.\" The visual reorder is not announced on its own, so a\n   * silent re-sort breaks §8 (\"Don't re-sort silently\"). The caller owns the count (mirroring\n   * CommandPalette): pass the new string whenever the visible rows change. Rendered into an sr-only\n   * `role=\"status\" aria-live=\"polite\"` node, so it reaches assistive tech as text, never color alone.\n   */\n  announcement?: string;\n}\n\n/**\n * A Table presents structured data in rows and columns so you can read, compare, and sort records —\n * a list of API keys, verification events, or registered agents (spec §1). It is a SEMANTIC\n * `<table>`: the data has a real row-and-column relationship and the native markup carries that\n * relationship into the accessibility tree (1.3.1), not just the pixels. Reach for a DataGrid when\n * the data needs virtualized rows, in-cell editing, column resizing, or roving-focus cell navigation.\n *\n * Neutrals carry the table — it is a reading surface, not an accent surface (spec §3): most of it is\n * neutral text and hairline borders. A status color appears ONLY inside a cell that reports a real\n * state, paired with text (never a header, a whole row, or a decoration); the brand violet is NEVER\n * a Table variant — the brand is not a status, so it never tints a row, header, sort, or selection\n * (brand != state). For a first-class verified result in a cell, use the VerifiedBadge molecule.\n *\n * Name the table with a `<caption>` (preferred) or `aria-labelledby`/`aria-label`. It owns no\n * keyboard model of its own — focus belongs to the controls it hosts (a sortable header, a row\n * Checkbox, a row action), which keep their native tab stops in reading order (spec §6).\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, density = \"comfortable\", rule = \"horizontal\", stickyHeader = false, announcement, children, ...props },\n  ref,\n) {\n  const ctx = React.useMemo<TableContextValue>(() => ({ density, rule }), [density, rule]);\n  // sticky is read by the header through a second, header-only context so the <thead> can pin\n  // without the cell context carrying a presentation flag it does not use.\n  const stickyCtx = React.useMemo(() => ({ sticky: stickyHeader }), [stickyHeader]);\n  return (\n    <TableContext.Provider value={ctx}>\n      <TableStickyContext.Provider value={stickyCtx}>\n        {/* overflow-x-auto: the table may be wider than the viewport on 320–414px screens.\n            The scroll container keeps the page body from overflowing while letting a wide\n            table scroll horizontally within its own bounds — the same pattern DataGrid uses\n            for its `overflow-auto` scroll container (spec §5). The sticky header (if any)\n            pins within this scroll container, which is correct behavior. */}\n        <div className=\"w-full overflow-x-auto\">\n          <table ref={ref} className={cn(tableVariants(), className)} {...props}>\n            {children}\n          </table>\n        </div>\n        {/* The polite live region (spec §7/§8, WCAG 4.1.3): the result of a sort or filter — the new\n            order and row count — announced as text, since the visual reorder is not announced on its\n            own (a silent re-sort is the §8 \"Don't\"). Always present (the live region must exist before\n            its text changes to be announced); sr-only so it never paints, and a sibling of the <table>,\n            not a child, since a <span> is not valid table content. The caller feeds `announcement`. */}\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </TableStickyContext.Provider>\n    </TableContext.Provider>\n  );\n});\n\nconst TableStickyContext = React.createContext<{ sticky: boolean }>({ sticky: false });\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\n\n/**\n * The table's accessible name (spec §2/§7) — a `<caption>` naming what the data is, for example\n * \"Verification events, last 30 days\". Prefer it over a detached heading; add `className=\"sr-only\"`\n * to keep the name in the accessibility tree while hiding it visually.\n */\nexport const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n  function TableCaption({ className, ...props }, ref) {\n    return <caption ref={ref} className={cn(tableCaptionClass, className)} {...props} />;\n  },\n);\n\nexport type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * The `<thead>` holding the column-header row (spec §2). When the table's `stickyHeader` is set, the\n * header pins to the top of the scroll container with the stronger divider (spec §3/§5). The pinning\n * is read from the Table via context, so callers set it once on the Table.\n */\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  function TableHeader({ className, ...props }, ref) {\n    const { sticky } = React.useContext(TableStickyContext);\n    return <thead ref={ref} className={cn(tableHeaderVariants({ sticky }), className)} {...props} />;\n  },\n);\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /**\n   * The body is resolving (spec §4 Loading). Renders `skeletonRows` × `columns` Skeleton cells in the\n   * table's own column layout — keeping the header and column widths stable so the table does not\n   * reflow when data arrives — and marks the body `aria-busy=\"true\"`. A wait is a plain wait, not\n   * theatre: the deliberate verified-check duration is never spent here.\n   */\n  loading?: boolean;\n  /** How many skeleton rows to show while loading (spec §4 Loading). Default `3`. */\n  skeletonRows?: number;\n  /** How many columns the skeleton rows span, so the placeholder matches the real column layout. Default `1`. */\n  columns?: number;\n}\n\n/**\n * The `<tbody>` holding the data rows (spec §2). In the `zebra` rule it alternates a neutral\n * raised-surface tint on even rows (read from the Table via context). While `loading`, it is\n * `aria-busy` and shows Skeleton rows in the column layout; the skeletons are decorative and the\n * body owns the wait (the Skeleton itself announces nothing, spec §4 Loading / §7).\n */\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  function TableBody({ className, loading = false, skeletonRows = 3, columns = 1, children, ...props }, ref) {\n    const { rule } = React.useContext(TableContext);\n    return (\n      <tbody\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(tableBodyVariants({ rule }), className)}\n        {...props}\n      >\n        {loading\n          ? Array.from({ length: Math.max(1, skeletonRows) }, (_, r) => (\n              <TableRow key={`skeleton-${r}`}>\n                {Array.from({ length: Math.max(1, columns) }, (_, c) => (\n                  // a placeholder data cell in the column layout; decorative, so the wait is owned by\n                  // the body's aria-busy, not the skeleton (spec §4 Loading / §7).\n                  <td key={c} data-testid=\"table-skeleton-cell\" className={tableSkeletonCellClass}>\n                    <Skeleton variant=\"text\" />\n                  </td>\n                ))}\n              </TableRow>\n            ))\n          : children}\n      </tbody>\n    );\n  },\n);\n\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * The `<tfoot>` summary row (spec §2) — a total or an aggregate. It is DATA, not pagination;\n * pagination is a separate Pagination control beside the table.\n */\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n  function TableFooter({ className, ...props }, ref) {\n    return (\n      <tfoot ref={ref} className={cn(\"border-t border-border-default\", className)} {...props} />\n    );\n  },\n);\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /**\n   * A selectable row is currently selected (spec §4 Selected). Sets `aria-selected=\"true\"` and the\n   * restrained neutral raised-surface fill. Selection is encoded by the row Checkbox's checked state\n   * AND `aria-selected`, never by the fill alone, and NEVER a brand or status tint (brand != state).\n   */\n  selected?: boolean;\n}\n\n/**\n * A `<tr>` (spec §2/§4). A body row gets the restrained raised-surface hover fill (an affordance, to\n * track the eye across a wide row — nothing is selected until you act) and, when `selected`, the same\n * neutral fill plus `aria-selected`. The rule treatment (hairline / grid / zebra) is read from the\n * Table via context. Used inside `<thead>`, `<tbody>`, and `<tfoot>`.\n */\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow({ className, selected = false, ...props }, ref) {\n    const { rule } = React.useContext(TableContext);\n    return (\n      <tr\n        ref={ref}\n        aria-selected={selected || undefined}\n        className={cn(tableRowVariants({ rule }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * This column can be re-sorted from its header (spec §3 sortable). Renders the header label as a\n   * real `<button>` (the control it is) with a direction caret, and reflects `aria-sort` on the\n   * `<th>`. Enable per column, not table-wide, so only meaningfully sortable columns advertise it.\n   */\n  sortable?: boolean;\n  /**\n   * The current sort direction for this column (spec §4 Sorted), reflected as `aria-sort` on the\n   * `<th>` and as the caret glyph. Only one column is the sort column at a time — set `\"ascending\"`\n   * or `\"descending\"` on it and `\"none\"` (the default) on the rest.\n   */\n  sortDirection?: TableSortDirection;\n  /** Fired when the sortable header is activated (click / Enter / Space), so the caller re-sorts and updates `sortDirection`. */\n  onSort?: () => void;\n  /**\n   * The column name used in the sort control's accessible name (\"Sort by {label}, {direction}\"),\n   * when it differs from the visible children. Defaults to the children's text.\n   */\n  sortLabel?: string;\n}\n\n// The direction caret (spec §4 Sorted): decorative — aria-sort on the th + the glyph SHAPE\n// (data-direction) encode the direction, so it never rests on color alone (1.4.1). Inline SVG, no\n// icon dep; it points up for ascending, down for descending, and shows a neutral both-ways glyph\n// when the column is sortable but not the active sort column.\nfunction SortCaret({ direction }: { direction: TableSortDirection }) {\n  return (\n    <span\n      data-testid=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      className={tableSortCaretClass}\n    >\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" focusable=\"false\" aria-hidden=\"true\">\n        {direction === \"ascending\" ? (\n          <path d=\"M4 10l4-4 4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : direction === \"descending\" ? (\n          <path d=\"M4 6l4 4 4-4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          // sortable but not the active column: a quiet both-directions glyph\n          <path d=\"M5 6.5l3-3 3 3M5 9.5l3 3 3-3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n    </span>\n  );\n}\n\nconst NEXT_DIRECTION_WORD: Record<TableSortDirection, string> = {\n  none: \"ascending\",\n  ascending: \"descending\",\n  descending: \"ascending\",\n};\n\n/**\n * A `<th scope=\"col\">` column header (spec §2/§7). A plain header is a quiet, tracked label in the\n * secondary text color. A `sortable` header wraps that label in a real `<button>` carrying the\n * ghost-action accent, a visible focus ring, the target-size floor, and a direction caret, and the\n * `<th>` reflects `aria-sort` — so sort direction reaches assistive tech as data and never rests on\n * color alone (1.4.1). The sort button's accessible name names the action and the column (\"Sort by\n * status, ascending\"). Density + grid rule are read from the Table via context.\n */\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, sortable = false, sortDirection = \"none\", onSort, sortLabel, children, ...props },\n  ref,\n) {\n  const { density, rule } = React.useContext(TableContext);\n  const ariaSort = sortable ? sortDirection : undefined;\n  const label = sortLabel ?? (typeof children === \"string\" ? children : undefined);\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      // exactly one header carries aria-sort at a time (spec §4 Sorted); the rest are \"none\"/absent\n      aria-sort={ariaSort}\n      className={cn(tableHeadVariants({ density, rule }), className)}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          // the control's name includes the ACTION and the COLUMN, plus the NEXT direction it will\n          // sort to — so a screen-reader user knows what activating it does (spec §7). aria-sort on\n          // the th already exposes the CURRENT state.\n          aria-label={label ? `Sort by ${label}, ${NEXT_DIRECTION_WORD[sortDirection]}` : undefined}\n          className={tableSortButtonClass}\n        >\n          {children}\n          <SortCaret direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n});\n\nexport type TableRowHeaderProps = React.ThHTMLAttributes<HTMLTableCellElement>;\n\n/**\n * A `<th scope=\"row\">` row-header cell (spec §2/§7) — the row's natural label (an identifier, a\n * name), tying the row's cells to it. It reads at the same body weight as a data cell but is promoted\n * to a header for the relationship (1.3.1). Density + grid rule are read from the Table via context.\n */\nexport const TableRowHeader = React.forwardRef<HTMLTableCellElement, TableRowHeaderProps>(\n  function TableRowHeader({ className, ...props }, ref) {\n    const { density, rule } = React.useContext(TableContext);\n    return (\n      <th\n        ref={ref}\n        scope=\"row\"\n        className={cn(tableRowHeaderVariants({ density, rule }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * The cell reports a real STATE (spec §3/§4): `verified`, `signal`, `caution`, or `critical`. The\n   * status color lives in the CELL only (never the row or header), paired with text — so a grayscale\n   * reader still reads the state from the words. NEVER a brand token. For a first-class verified\n   * result use the VerifiedBadge molecule inside a plain cell, not a hand-tinted cell.\n   */\n  status?: TableCellStatus;\n  /** A numeric cell (spec §4/§5): tabular figures so digits align down the column, end-aligned, in the PRIMARY data text role. */\n  numeric?: boolean;\n  /** De-emphasized AUXILIARY cell text (spec §5) — a timestamp, a unit. Takes the muted role; independent of `numeric`. */\n  auxiliary?: boolean;\n}\n\n/**\n * A `<td>` data cell (spec §2 cell). Holds text, a number, a Badge, an Avatar, or a small inline\n * control. A plain cell is neutral primary text. A `numeric` cell uses tabular figures and stays in\n * the PRIMARY data text role (the muted role is reserved for `auxiliary` text — a timestamp, a unit —\n * per spec §5); a cell that reports a real state takes a `status` treatment (the status fg paired with\n * text). It is NOT a focus stop — focus belongs to any interactive control inside it (spec §6).\n * Density + grid rule are read from the Table via context.\n */\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { className, status = \"none\", numeric = false, auxiliary = false, ...props },\n  ref,\n) {\n  const { density, rule } = React.useContext(TableContext);\n  return (\n    <td\n      ref={ref}\n      className={cn(tableCellVariants({ density, rule, numeric, auxiliary, status }), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** How many columns the empty line spans, so it fills the table's own width (spec §2/§4 Empty). */\n  colSpan?: number;\n}\n\n/**\n * The empty-state row (spec §2/§4 Empty): a single full-width cell stating there is nothing yet and\n * what to do next, in plain words ending in a period. An empty table is NOT an error and never reads\n * as one — no status color. Render it inside the `<tbody>` when there are zero rows after loading.\n */\nexport const TableEmpty = React.forwardRef<HTMLTableCellElement, TableEmptyProps>(\n  function TableEmpty({ className, colSpan = 1, children, ...props }, ref) {\n    return (\n      <tr>\n        <td ref={ref} colSpan={colSpan} className={cn(tableEmptyClass, className)} {...props}>\n          {children}\n        </td>\n      </tr>\n    );\n  },\n);\n"],"mappings":"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","names":["Table","TableCaption","TableHeader","TableBody","_","TableFooter","TableRow","TableHead","TableRowHeader","TableCell","TableEmpty"]}

package/dist/components/table/table.variants.js

@@ -74,10 +74,10 @@ const tableCellVariants = cva(
         none: "",
         // each status is the fg only, paired with the cell's text — the cell's words carry the
         // meaning, the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand
-        verified: "text-status-verified-fg",
-        signal: "text-status-signal-fg",
-        caution: "text-status-caution-fg",
-        critical: "text-status-critical-fg"
+        verified: "text-status-verified-on-surface",
+        signal: "text-status-signal-on-surface",
+        caution: "text-status-caution-on-surface",
+        critical: "text-status-critical-on-surface"
       }
     },
     defaultVariants: {

package/dist/components/table/table.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/table/table.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Table presents structured data in rows and columns (spec §1). Neutrals carry the table —\n// restraint over volume (spec §3): it is a READING surface, not an accent surface. It paints from\n// the surface, text, and border roles only; it reaches the --color-action-* tier ONLY for the\n// controls it hosts (a sortable header's ghost accent + focus affordances) and the --color-status-*\n// tier ONLY for a cell that reports a real state, paired with text — never for a row, a header, or\n// a selected state, and NEVER a brand token at all (brand != state, G-U2). The status meaning lives\n// in the cell's words + the status fg, so a grayscale or color-blind reader still reads it (1.4.1).\n\n// The <table> container (spec §2): the neutral canvas surface and the default cell text role. It\n// collapses its borders so the row/column hairline rules read as single lines, and aligns text on\n// the logical start edge so it mirrors under dir=\"rtl\" (G-U6). The table NEVER wears the brand\n// violet or a status fill (spec §3/§8) — those belong to the controls and badges inside cells.\nexport const tableVariants = cva([\n  \"w-full border-collapse text-start\",\n  \"bg-surface-canvas text-body text-text-primary\",\n]);\n\nexport type TableVariantProps = VariantProps<typeof tableVariants>;\n\n// The <caption> (spec §2/§7): the table's accessible name, in the secondary text color at the\n// label type role. A reading caption, not an accent — never the brand or a status color.\nexport const tableCaptionClass = \"text-start text-label text-text-secondary mb-(--space-2)\";\n\n// The <thead> (spec §2). The header divider is a hairline by default; on a sticky-header table the\n// header pins to the top of the scroll container and the divider strengthens to border-strong,\n// where a heavier separation reads better as the body scrolls under it (spec §4/§5). z on the\n// sticky layer so a scrolled body cell never paints over the pinned header.\nexport const tableHeaderVariants = cva(\"border-b border-border-default\", {\n  variants: {\n    sticky: {\n      true: \"sticky top-0 z-(--z-index-sticky) bg-surface-canvas border-b-border-strong\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { sticky: false },\n});\n\nexport type TableHeaderVariantProps = VariantProps<typeof tableHeaderVariants>;\n\n// The <tbody> (spec §3 rule). The `zebra` rule replaces row hairlines with an alternating NEUTRAL\n// surface step on even rows, for a long table — the tint is a surface step, NEVER a status or brand\n// color (spec §3/§8). The arbitrary selector `[&>tr:nth-child(even)]` is a SELECTOR (its body\n// starts with `&`, not a raw value or a bare `--token`), so it is gate-legitimate, not an arbitrary\n// VALUE. While loading, the body is aria-busy (set on the element, not bound here) and shows\n// skeleton rows in the column layout (spec §4 Loading).\nexport const tableBodyVariants = cva(\"\", {\n  variants: {\n    rule: {\n      // hairlines/grid carry their rules on the rows + cells, so the body adds nothing\n      horizontal: \"\",\n      grid: \"\",\n      // zebra: the neutral raised surface step on even rows (no rules)\n      zebra: \"[&>tr:nth-child(even)]:bg-surface-raised\",\n    },\n  },\n  defaultVariants: { rule: \"horizontal\" },\n});\n\nexport type TableBodyVariantProps = VariantProps<typeof tableBodyVariants>;\n\n// A <tr> body row (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained raised-surface fill to track the eye across a wide row — an AFFORDANCE, not a\n// selection (nothing is selected until you act, spec §4 Hover). SELECTED (aria-selected): the same\n// restrained raised-surface fill, encoded by the Checkbox state + aria-selected, NEVER a brand or\n// status tint (brand != state, G-U2) — so a grayscale reader reads selection from the checkbox, not\n// the fill. Motion is the fast token transition on the verdify easing, instant under reduced motion\n// — never the 350ms VerifiedBadge-only theatre (a row hover/select is a plain transition, G-U3).\n// The `zebra` rule turns off the per-row hairline; `horizontal`/`grid` keep the bottom hairline.\nexport const tableRowVariants = cva(\n  [\n    \"hover:bg-surface-raised\",\n    \"aria-selected:bg-surface-raised\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n  ],\n  {\n    variants: {\n      rule: {\n        horizontal: \"border-b border-border-default\",\n        grid: \"border-b border-border-default\",\n        zebra: \"\",\n      },\n    },\n    defaultVariants: { rule: \"horizontal\" },\n  },\n);\n\nexport type TableRowVariantProps = VariantProps<typeof tableRowVariants>;\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — the row controls keep their own --size-target-* floor (DEC-B:\n// never a fixed height below the floor). The grid rule adds a logical inline-end column rule so it\n// mirrors under dir=\"rtl\" (G-U6). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n  rule: {\n    horizontal: \"\",\n    // a logical column rule on each cell, for a wide numeric table's column guide (spec §3 grid)\n    grid: \"border-e border-border-default last:border-e-0\",\n    zebra: \"\",\n  },\n} as const;\n\n// A <td> data cell (spec §2 cell, §4/§5). Default: the primary text color at the body type role.\n// A `numeric` cell uses TABULAR figures so digits align down the column and end-aligns them (spec §4\n// Default/§5) — numeric DATA is primary text, NOT muted (spec §4 assigns cell text the primary role;\n// the muted role is reserved by spec §5 for de-emphasized AUXILIARY text, a timestamp or a unit). An\n// `auxiliary` cell takes the muted role explicitly (spec §5 --color-text-muted), independent of\n// `numeric`. A cell that reports a real STATE carries the status fg paired with text — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2). status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// cell's words, not a saturated fill.\nexport const tableCellVariants = cva(\n  [\"px-(--space-3) align-middle text-start text-body text-text-primary\"],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      numeric: {\n        // tabular figures + end-aligned numbers down the column — primary data text, not muted\n        true: \"text-end tabular-nums\",\n        false: \"\",\n      },\n      auxiliary: {\n        // de-emphasized auxiliary cell text — a timestamp, a unit (spec §5 --color-text-muted)\n        true: \"text-text-muted\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the cell's words carry the\n        // meaning, the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-fg\",\n        signal: \"text-status-signal-fg\",\n        caution: \"text-status-caution-fg\",\n        critical: \"text-status-critical-fg\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      rule: \"horizontal\",\n      numeric: false,\n      auxiliary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type TableCellVariantProps = VariantProps<typeof tableCellVariants>;\n\n// A <th scope=\"row\"> row-header cell (spec §2/§7): the row's natural label (an identifier, a name),\n// tying its cells to the row. The primary text color at the body type role — the same reading weight\n// as a data cell, just promoted to a header for the relationship (1.3.1). Density + grid rule apply.\nexport const tableRowHeaderVariants = cva(\n  [\"px-(--space-3) align-middle text-start font-normal text-body text-text-primary\"],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\", rule: \"horizontal\" },\n  },\n);\n\nexport type TableRowHeaderVariantProps = VariantProps<typeof tableRowHeaderVariants>;\n\n// A <th scope=\"col\"> column header (spec §2/§4/§5). The header LABEL is the SECONDARY text color at\n// the label type role (the quiet, tracked column label), on the canvas — a header NEVER wears a\n// status or brand tint (spec §3/§8). Density + grid rule apply to the cell padding.\nexport const tableHeadVariants = cva(\n  [\"px-(--space-3) align-middle text-start text-label text-text-secondary\"],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\", rule: \"horizontal\" },\n  },\n);\n\nexport type TableHeadVariantProps = VariantProps<typeof tableHeadVariants>;\n\n// The SORTABLE-header control (spec §2/§4/§6/§7): a real <button> inside the <th>, so it reads as\n// the control it is and re-sorts on Enter/Space. It is the GHOST action accent — the label + caret\n// in the ghost fg with the restrained ghost hover fill (spec §4 Sortable-header hover / §5) — the\n// action tier is legitimate here because it is a control the table HOSTS, not a row/header tint. It\n// carries the visible 2px focus ring (never removed) and the target-size floor (40px desktop / 44px\n// touch, spec §7). Motion is the fast token transition, never the deliberate verified-check theatre\n// (G-U3). aria-sort lives on the parent <th>, and the direction caret encodes direction alongside\n// it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const tableSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is\n// also encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on\n// color alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const tableSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full table width, in the\n// secondary text color — an empty table is not an error and never reads as one (no status color).\nexport const tableEmptyClass =\n  \"px-(--space-3) py-(--space-4) text-center text-body text-text-secondary\";\n\n// One skeleton placeholder cell while the body resolves (spec §4 Loading): keeps the column layout\n// stable so the table does not reflow when data arrives. The Skeleton itself is decorative + neutral\n// (it binds no brand/status — that invariant lives in the Skeleton component); this is just the cell\n// padding wrapping it.\nexport const tableSkeletonCellClass = \"px-(--space-3) py-(--space-3)\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAchC,MAAM,gBAAgB,IAAI;AAAA,EAC/B;AAAA,EACA;AACF,CAAC;AAMM,MAAM,oBAAoB;AAM1B,MAAM,sBAAsB,IAAI,kCAAkC;AAAA,EACvE,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,MAAM;AACnC,CAAC;AAUM,MAAM,oBAAoB,IAAI,IAAI;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA;AAAA,MAEJ,YAAY;AAAA,MACZ,MAAM;AAAA;AAAA,MAEN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,aAAa;AACxC,CAAC;AAYM,MAAM,mBAAmB;AAAA,EAC9B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,aAAa;AAAA,EACxC;AACF;AAQA,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,IAEZ,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAWO,MAAM,oBAAoB;AAAA,EAC/B,CAAC,oEAAoE;AAAA,EACrE;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,MACH,SAAS;AAAA;AAAA,QAEP,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA;AAAA,QAET,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA,QAGN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAOO,MAAM,yBAAyB;AAAA,EACpC,CAAC,gFAAgF;AAAA,EACjF;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,eAAe,MAAM,aAAa;AAAA,EAChE;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,CAAC,uEAAuE;AAAA,EACxE;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,eAAe,MAAM,aAAa;AAAA,EAChE;AACF;AAYO,MAAM,uBACX;AAWK,MAAM,sBACX;AAIK,MAAM,kBACX;AAMK,MAAM,yBAAyB;","names":[]}
+{"version":3,"sources":["../../../src/components/table/table.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Table presents structured data in rows and columns (spec §1). Neutrals carry the table —\n// restraint over volume (spec §3): it is a READING surface, not an accent surface. It paints from\n// the surface, text, and border roles only; it reaches the --color-action-* tier ONLY for the\n// controls it hosts (a sortable header's ghost accent + focus affordances) and the --color-status-*\n// tier ONLY for a cell that reports a real state, paired with text — never for a row, a header, or\n// a selected state, and NEVER a brand token at all (brand != state, G-U2). The status meaning lives\n// in the cell's words + the status fg, so a grayscale or color-blind reader still reads it (1.4.1).\n\n// The <table> container (spec §2): the neutral canvas surface and the default cell text role. It\n// collapses its borders so the row/column hairline rules read as single lines, and aligns text on\n// the logical start edge so it mirrors under dir=\"rtl\" (G-U6). The table NEVER wears the brand\n// violet or a status fill (spec §3/§8) — those belong to the controls and badges inside cells.\nexport const tableVariants = cva([\n  \"w-full border-collapse text-start\",\n  \"bg-surface-canvas text-body text-text-primary\",\n]);\n\nexport type TableVariantProps = VariantProps<typeof tableVariants>;\n\n// The <caption> (spec §2/§7): the table's accessible name, in the secondary text color at the\n// label type role. A reading caption, not an accent — never the brand or a status color.\nexport const tableCaptionClass = \"text-start text-label text-text-secondary mb-(--space-2)\";\n\n// The <thead> (spec §2). The header divider is a hairline by default; on a sticky-header table the\n// header pins to the top of the scroll container and the divider strengthens to border-strong,\n// where a heavier separation reads better as the body scrolls under it (spec §4/§5). z on the\n// sticky layer so a scrolled body cell never paints over the pinned header.\nexport const tableHeaderVariants = cva(\"border-b border-border-default\", {\n  variants: {\n    sticky: {\n      true: \"sticky top-0 z-(--z-index-sticky) bg-surface-canvas border-b-border-strong\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { sticky: false },\n});\n\nexport type TableHeaderVariantProps = VariantProps<typeof tableHeaderVariants>;\n\n// The <tbody> (spec §3 rule). The `zebra` rule replaces row hairlines with an alternating NEUTRAL\n// surface step on even rows, for a long table — the tint is a surface step, NEVER a status or brand\n// color (spec §3/§8). The arbitrary selector `[&>tr:nth-child(even)]` is a SELECTOR (its body\n// starts with `&`, not a raw value or a bare `--token`), so it is gate-legitimate, not an arbitrary\n// VALUE. While loading, the body is aria-busy (set on the element, not bound here) and shows\n// skeleton rows in the column layout (spec §4 Loading).\nexport const tableBodyVariants = cva(\"\", {\n  variants: {\n    rule: {\n      // hairlines/grid carry their rules on the rows + cells, so the body adds nothing\n      horizontal: \"\",\n      grid: \"\",\n      // zebra: the neutral raised surface step on even rows (no rules)\n      zebra: \"[&>tr:nth-child(even)]:bg-surface-raised\",\n    },\n  },\n  defaultVariants: { rule: \"horizontal\" },\n});\n\nexport type TableBodyVariantProps = VariantProps<typeof tableBodyVariants>;\n\n// A <tr> body row (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained raised-surface fill to track the eye across a wide row — an AFFORDANCE, not a\n// selection (nothing is selected until you act, spec §4 Hover). SELECTED (aria-selected): the same\n// restrained raised-surface fill, encoded by the Checkbox state + aria-selected, NEVER a brand or\n// status tint (brand != state, G-U2) — so a grayscale reader reads selection from the checkbox, not\n// the fill. Motion is the fast token transition on the verdify easing, instant under reduced motion\n// — never the 350ms VerifiedBadge-only theatre (a row hover/select is a plain transition, G-U3).\n// The `zebra` rule turns off the per-row hairline; `horizontal`/`grid` keep the bottom hairline.\nexport const tableRowVariants = cva(\n  [\n    \"hover:bg-surface-raised\",\n    \"aria-selected:bg-surface-raised\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n  ],\n  {\n    variants: {\n      rule: {\n        horizontal: \"border-b border-border-default\",\n        grid: \"border-b border-border-default\",\n        zebra: \"\",\n      },\n    },\n    defaultVariants: { rule: \"horizontal\" },\n  },\n);\n\nexport type TableRowVariantProps = VariantProps<typeof tableRowVariants>;\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — the row controls keep their own --size-target-* floor (DEC-B:\n// never a fixed height below the floor). The grid rule adds a logical inline-end column rule so it\n// mirrors under dir=\"rtl\" (G-U6). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n  rule: {\n    horizontal: \"\",\n    // a logical column rule on each cell, for a wide numeric table's column guide (spec §3 grid)\n    grid: \"border-e border-border-default last:border-e-0\",\n    zebra: \"\",\n  },\n} as const;\n\n// A <td> data cell (spec §2 cell, §4/§5). Default: the primary text color at the body type role.\n// A `numeric` cell uses TABULAR figures so digits align down the column and end-aligns them (spec §4\n// Default/§5) — numeric DATA is primary text, NOT muted (spec §4 assigns cell text the primary role;\n// the muted role is reserved by spec §5 for de-emphasized AUXILIARY text, a timestamp or a unit). An\n// `auxiliary` cell takes the muted role explicitly (spec §5 --color-text-muted), independent of\n// `numeric`. A cell that reports a real STATE carries the status fg paired with text — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2). status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// cell's words, not a saturated fill.\nexport const tableCellVariants = cva(\n  [\"px-(--space-3) align-middle text-start text-body text-text-primary\"],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      numeric: {\n        // tabular figures + end-aligned numbers down the column — primary data text, not muted\n        true: \"text-end tabular-nums\",\n        false: \"\",\n      },\n      auxiliary: {\n        // de-emphasized auxiliary cell text — a timestamp, a unit (spec §5 --color-text-muted)\n        true: \"text-text-muted\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the cell's words carry the\n        // meaning, the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-on-surface\",\n        signal: \"text-status-signal-on-surface\",\n        caution: \"text-status-caution-on-surface\",\n        critical: \"text-status-critical-on-surface\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      rule: \"horizontal\",\n      numeric: false,\n      auxiliary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type TableCellVariantProps = VariantProps<typeof tableCellVariants>;\n\n// A <th scope=\"row\"> row-header cell (spec §2/§7): the row's natural label (an identifier, a name),\n// tying its cells to the row. The primary text color at the body type role — the same reading weight\n// as a data cell, just promoted to a header for the relationship (1.3.1). Density + grid rule apply.\nexport const tableRowHeaderVariants = cva(\n  [\"px-(--space-3) align-middle text-start font-normal text-body text-text-primary\"],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\", rule: \"horizontal\" },\n  },\n);\n\nexport type TableRowHeaderVariantProps = VariantProps<typeof tableRowHeaderVariants>;\n\n// A <th scope=\"col\"> column header (spec §2/§4/§5). The header LABEL is the SECONDARY text color at\n// the label type role (the quiet, tracked column label), on the canvas — a header NEVER wears a\n// status or brand tint (spec §3/§8). Density + grid rule apply to the cell padding.\nexport const tableHeadVariants = cva(\n  [\"px-(--space-3) align-middle text-start text-label text-text-secondary\"],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\", rule: \"horizontal\" },\n  },\n);\n\nexport type TableHeadVariantProps = VariantProps<typeof tableHeadVariants>;\n\n// The SORTABLE-header control (spec §2/§4/§6/§7): a real <button> inside the <th>, so it reads as\n// the control it is and re-sorts on Enter/Space. It is the GHOST action accent — the label + caret\n// in the ghost fg with the restrained ghost hover fill (spec §4 Sortable-header hover / §5) — the\n// action tier is legitimate here because it is a control the table HOSTS, not a row/header tint. It\n// carries the visible 2px focus ring (never removed) and the target-size floor (40px desktop / 44px\n// touch, spec §7). Motion is the fast token transition, never the deliberate verified-check theatre\n// (G-U3). aria-sort lives on the parent <th>, and the direction caret encodes direction alongside\n// it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const tableSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is\n// also encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on\n// color alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const tableSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full table width, in the\n// secondary text color — an empty table is not an error and never reads as one (no status color).\nexport const tableEmptyClass =\n  \"px-(--space-3) py-(--space-4) text-center text-body text-text-secondary\";\n\n// One skeleton placeholder cell while the body resolves (spec §4 Loading): keeps the column layout\n// stable so the table does not reflow when data arrives. The Skeleton itself is decorative + neutral\n// (it binds no brand/status — that invariant lives in the Skeleton component); this is just the cell\n// padding wrapping it.\nexport const tableSkeletonCellClass = \"px-(--space-3) py-(--space-3)\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAchC,MAAM,gBAAgB,IAAI;AAAA,EAC/B;AAAA,EACA;AACF,CAAC;AAMM,MAAM,oBAAoB;AAM1B,MAAM,sBAAsB,IAAI,kCAAkC;AAAA,EACvE,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,MAAM;AACnC,CAAC;AAUM,MAAM,oBAAoB,IAAI,IAAI;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA;AAAA,MAEJ,YAAY;AAAA,MACZ,MAAM;AAAA;AAAA,MAEN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,aAAa;AACxC,CAAC;AAYM,MAAM,mBAAmB;AAAA,EAC9B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,aAAa;AAAA,EACxC;AACF;AAQA,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,IAEZ,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAWO,MAAM,oBAAoB;AAAA,EAC/B,CAAC,oEAAoE;AAAA,EACrE;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,MACH,SAAS;AAAA;AAAA,QAEP,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA;AAAA,QAET,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA,QAGN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAOO,MAAM,yBAAyB;AAAA,EACpC,CAAC,gFAAgF;AAAA,EACjF;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,eAAe,MAAM,aAAa;AAAA,EAChE;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,CAAC,uEAAuE;AAAA,EACxE;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,eAAe,MAAM,aAAa;AAAA,EAChE;AACF;AAYO,MAAM,uBACX;AAWK,MAAM,sBACX;AAIK,MAAM,kBACX;AAMK,MAAM,yBAAyB;","names":[]}

package/dist/components/textarea/textarea.js

@@ -110,7 +110,7 @@ const Textarea = React.forwardRef(
             // reserved for the character counter at rest (see the counter below).
             /* @__PURE__ */ jsx("span", { id: descId, className: "text-caption text-text-secondary", children: description })
           ) : null,
-          hasError ? /* @__PURE__ */ jsx("span", { id: errId, className: "text-caption text-status-critical-fg", children: error }) : null
+          hasError ? /* @__PURE__ */ jsx("span", { id: errId, className: "text-caption text-status-critical-on-surface", children: error }) : null
         ] }),
         hasCounter ? /* @__PURE__ */ jsxs(
           "span",

package/dist/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\nimport { textareaVariants, type TextareaVariantProps } from \"./textarea.variants\";\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"id\">,\n    TextareaVariantProps {\n  /** Bound visible label text (for/id). Required — the placeholder is never the name. */\n  label: React.ReactNode;\n  /** Help text below the field, linked via aria-describedby. */\n  description?: React.ReactNode;\n  /** Error message: reds the border, sets aria-invalid, joins aria-describedby. */\n  error?: React.ReactNode;\n  /** Field id; auto-generated from React.useId when omitted. */\n  id?: string;\n  /** auto-grow lower bound (rows). */\n  minRows?: number;\n  /** auto-grow upper bound (rows) — beyond it the field scrolls. */\n  maxRows?: number;\n}\n\n/** Merge non-null describedby ids into a single attribute value (or undefined). */\nfunction describedBy(...ids: (string | false | undefined)[]): string | undefined {\n  const present = ids.filter(Boolean) as string[];\n  return present.length ? present.join(\" \") : undefined;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      className,\n      resize = \"vertical\",\n      label,\n      description,\n      error,\n      id,\n      minRows = 3,\n      maxRows = 8,\n      rows,\n      maxLength,\n      value,\n      defaultValue,\n      onChange,\n      disabled,\n      readOnly,\n      required,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const autoId = React.useId();\n    const fieldId = id ?? autoId;\n    const descId = `${fieldId}-desc`;\n    const errId = `${fieldId}-err`;\n    const counterId = `${fieldId}-counter`;\n\n    const innerRef = React.useRef<HTMLTextAreaElement>(null);\n    React.useImperativeHandle(\n      forwardedRef,\n      () => innerRef.current as HTMLTextAreaElement,\n    );\n\n    // counter state: read controlled value when present, else track length locally\n    const isControlled = value !== undefined;\n    const [count, setCount] = React.useState(\n      String(value ?? defaultValue ?? \"\").length,\n    );\n    const length = isControlled ? String(value ?? \"\").length : count;\n\n    const isAutoGrow = resize === \"auto-grow\";\n\n    // auto-grow: measure scrollHeight, then clamp the height to a ceiling computed\n    // from maxRows × line-height. Beyond the ceiling the field scrolls (overflowY\n    // auto) instead of growing unbounded; below it the field hugs its content\n    // (overflowY hidden). The ceiling is written to el.style.maxHeight — there is no\n    // class for it, so nothing references an undefined custom property.\n    const resizeToContent = React.useCallback(() => {\n      const el = innerRef.current;\n      if (!el || !isAutoGrow) return;\n      const style = window.getComputedStyle(el);\n      // jsdom and \"normal\" line-height both yield NaN here; px() coerces any\n      // non-finite value to 0 (or the fallback) so the ceiling stays a real number.\n      const px = (v: string, fallback = 0) => {\n        const n = parseFloat(v);\n        return Number.isFinite(n) ? n : fallback;\n      };\n      // line-height may compute to \"normal\"; fall back to ~1.5× font size, else 20px.\n      const lineHeight = px(style.lineHeight) || px(style.fontSize) * 1.5 || 20;\n      const borders = px(style.borderTopWidth) + px(style.borderBottomWidth);\n      const padding = px(style.paddingTop) + px(style.paddingBottom);\n      const ceiling = maxRows * lineHeight + padding + borders;\n      // measure the natural content height from a collapsed baseline\n      el.style.height = \"auto\";\n      const next = Math.min(el.scrollHeight, ceiling);\n      el.style.height = `${next}px`;\n      el.style.maxHeight = `${ceiling}px`;\n      // scroll only once content exceeds the ceiling; hug content otherwise\n      el.style.overflowY = el.scrollHeight > ceiling ? \"auto\" : \"hidden\";\n    }, [isAutoGrow, maxRows]);\n\n    React.useLayoutEffect(() => {\n      if (isAutoGrow) resizeToContent();\n    }, [isAutoGrow, resizeToContent, value]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) setCount(e.target.value.length);\n      if (isAutoGrow) resizeToContent();\n      onChange?.(e);\n    };\n\n    const hasCounter = maxLength !== undefined;\n    const hasError = error != null && error !== false;\n\n    return (\n      <div className=\"flex flex-col gap-(--space-3)\">\n        {/* Compose the Label primitive (define-once): it owns the canonical\n            label role/color (text-label / text-text-primary) and the disabled\n            dim. Passing `disabled` lets a disabled Textarea's name dim to\n            --color-text-disabled via Label's own cva variant, and `required`\n            surfaces the required mark there (the field still carries the real\n            required / aria-required state below). textarea.md §5 lists\n            text-secondary for the label, but label.md §3–5 is authoritative for\n            the Label primitive: resting label text is text-text-primary. */}\n        <Label htmlFor={fieldId} disabled={disabled} required={required}>\n          {label}\n        </Label>\n        <textarea\n          ref={innerRef}\n          id={fieldId}\n          // native <textarea> already carries an implicit aria-multiline; make the\n          // multi-line contract explicit per the frozen ARIA contract (spec §7).\n          aria-multiline=\"true\"\n          rows={isAutoGrow ? minRows : rows}\n          maxLength={maxLength}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-required={required || undefined}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy(\n            // coerce each guard to a boolean so the expression narrows to\n            // string | false (React.ReactNode can be null/0/0n, which would widen\n            // the union past the describedBy signature otherwise)\n            !!description && descId,\n            hasError && errId,\n            hasCounter && counterId,\n          )}\n          style={isAutoGrow ? { overflowY: \"hidden\" } : undefined}\n          className={cn(textareaVariants({ resize }), className)}\n          {...props}\n        />\n        <div className=\"flex items-start justify-between gap-(--space-3)\">\n          <div className=\"text-caption text-text-secondary\">\n            {description ? (\n              // spec §5: label AND description text are text-secondary; text-muted is\n              // reserved for the character counter at rest (see the counter below).\n              <span id={descId} className=\"text-caption text-text-secondary\">\n                {description}\n              </span>\n            ) : null}\n            {hasError ? (\n              <span id={errId} className=\"text-caption text-status-critical-fg\">\n                {error}\n              </span>\n            ) : null}\n          </div>\n          {hasCounter ? (\n            <span\n              id={counterId}\n              data-testid=\"textarea-counter\"\n              aria-live=\"polite\"\n              className=\"text-caption text-text-muted tabular-nums\"\n            >\n              {length}/{maxLength}\n            </span>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";AA8HQ,cAgCE,YAhCF;AA5HR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,wBAAmD;AAoB5D,SAAS,eAAe,KAAyD;AAC/E,QAAM,UAAU,IAAI,OAAO,OAAO;AAClC,SAAO,QAAQ,SAAS,QAAQ,KAAK,GAAG,IAAI;AAC9C;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,SAAS,MAAM,MAAM;AAC3B,UAAM,UAAU,MAAM;AACtB,UAAM,SAAS,GAAG,OAAO;AACzB,UAAM,QAAQ,GAAG,OAAO;AACxB,UAAM,YAAY,GAAG,OAAO;AAE5B,UAAM,WAAW,MAAM,OAA4B,IAAI;AACvD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM,SAAS;AAAA,IACjB;AAGA,UAAM,eAAe,UAAU;AAC/B,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM;AAAA,MAC9B,OAAO,SAAS,gBAAgB,EAAE,EAAE;AAAA,IACtC;AACA,UAAM,SAAS,eAAe,OAAO,SAAS,EAAE,EAAE,SAAS;AAE3D,UAAM,aAAa,WAAW;AAO9B,UAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,YAAM,KAAK,SAAS;AACpB,UAAI,CAAC,MAAM,CAAC,WAAY;AACxB,YAAM,QAAQ,OAAO,iBAAiB,EAAE;AAGxC,YAAM,KAAK,CAAC,GAAW,WAAW,MAAM;AACtC,cAAM,IAAI,WAAW,CAAC;AACtB,eAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAAA,MAClC;AAEA,YAAM,aAAa,GAAG,MAAM,UAAU,KAAK,GAAG,MAAM,QAAQ,IAAI,OAAO;AACvE,YAAM,UAAU,GAAG,MAAM,cAAc,IAAI,GAAG,MAAM,iBAAiB;AACrE,YAAM,UAAU,GAAG,MAAM,UAAU,IAAI,GAAG,MAAM,aAAa;AAC7D,YAAM,UAAU,UAAU,aAAa,UAAU;AAEjD,SAAG,MAAM,SAAS;AAClB,YAAM,OAAO,KAAK,IAAI,GAAG,cAAc,OAAO;AAC9C,SAAG,MAAM,SAAS,GAAG,IAAI;AACzB,SAAG,MAAM,YAAY,GAAG,OAAO;AAE/B,SAAG,MAAM,YAAY,GAAG,eAAe,UAAU,SAAS;AAAA,IAC5D,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,UAAM,gBAAgB,MAAM;AAC1B,UAAI,WAAY,iBAAgB;AAAA,IAClC,GAAG,CAAC,YAAY,iBAAiB,KAAK,CAAC;AAEvC,UAAM,eAAe,CAAC,MAA8C;AAClE,UAAI,CAAC,aAAc,UAAS,EAAE,OAAO,MAAM,MAAM;AACjD,UAAI,WAAY,iBAAgB;AAChC,iBAAW,CAAC;AAAA,IACd;AAEA,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,SAAS,QAAQ,UAAU;AAE5C,WACE,qBAAC,SAAI,WAAU,iCASb;AAAA,0BAAC,SAAM,SAAS,SAAS,UAAoB,UAC1C,iBACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UAGJ,kBAAe;AAAA,UACf,MAAM,aAAa,UAAU;AAAA,UAC7B;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAe,YAAY;AAAA,UAC3B,gBAAc,YAAY;AAAA,UAC1B,oBAAkB;AAAA;AAAA;AAAA;AAAA,YAIhB,CAAC,CAAC,eAAe;AAAA,YACjB,YAAY;AAAA,YACZ,cAAc;AAAA,UAChB;AAAA,UACA,OAAO,aAAa,EAAE,WAAW,SAAS,IAAI;AAAA,UAC9C,WAAW,GAAG,iBAAiB,EAAE,OAAO,CAAC,GAAG,SAAS;AAAA,UACpD,GAAG;AAAA;AAAA,MACN;AAAA,MACA,qBAAC,SAAI,WAAU,oDACb;AAAA,6BAAC,SAAI,WAAU,oCACZ;AAAA;AAAA;AAAA;AAAA,YAGC,oBAAC,UAAK,IAAI,QAAQ,WAAU,oCACzB,uBACH;AAAA,cACE;AAAA,UACH,WACC,oBAAC,UAAK,IAAI,OAAO,WAAU,wCACxB,iBACH,IACE;AAAA,WACN;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,cAAO;AAAA,cAAE;AAAA;AAAA;AAAA,QACZ,IACE;AAAA,SACN;AAAA,OACF;AAAA,EAEJ;AACF;","names":["Textarea"]}
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\nimport { textareaVariants, type TextareaVariantProps } from \"./textarea.variants\";\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"id\">,\n    TextareaVariantProps {\n  /** Bound visible label text (for/id). Required — the placeholder is never the name. */\n  label: React.ReactNode;\n  /** Help text below the field, linked via aria-describedby. */\n  description?: React.ReactNode;\n  /** Error message: reds the border, sets aria-invalid, joins aria-describedby. */\n  error?: React.ReactNode;\n  /** Field id; auto-generated from React.useId when omitted. */\n  id?: string;\n  /** auto-grow lower bound (rows). */\n  minRows?: number;\n  /** auto-grow upper bound (rows) — beyond it the field scrolls. */\n  maxRows?: number;\n}\n\n/** Merge non-null describedby ids into a single attribute value (or undefined). */\nfunction describedBy(...ids: (string | false | undefined)[]): string | undefined {\n  const present = ids.filter(Boolean) as string[];\n  return present.length ? present.join(\" \") : undefined;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      className,\n      resize = \"vertical\",\n      label,\n      description,\n      error,\n      id,\n      minRows = 3,\n      maxRows = 8,\n      rows,\n      maxLength,\n      value,\n      defaultValue,\n      onChange,\n      disabled,\n      readOnly,\n      required,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const autoId = React.useId();\n    const fieldId = id ?? autoId;\n    const descId = `${fieldId}-desc`;\n    const errId = `${fieldId}-err`;\n    const counterId = `${fieldId}-counter`;\n\n    const innerRef = React.useRef<HTMLTextAreaElement>(null);\n    React.useImperativeHandle(\n      forwardedRef,\n      () => innerRef.current as HTMLTextAreaElement,\n    );\n\n    // counter state: read controlled value when present, else track length locally\n    const isControlled = value !== undefined;\n    const [count, setCount] = React.useState(\n      String(value ?? defaultValue ?? \"\").length,\n    );\n    const length = isControlled ? String(value ?? \"\").length : count;\n\n    const isAutoGrow = resize === \"auto-grow\";\n\n    // auto-grow: measure scrollHeight, then clamp the height to a ceiling computed\n    // from maxRows × line-height. Beyond the ceiling the field scrolls (overflowY\n    // auto) instead of growing unbounded; below it the field hugs its content\n    // (overflowY hidden). The ceiling is written to el.style.maxHeight — there is no\n    // class for it, so nothing references an undefined custom property.\n    const resizeToContent = React.useCallback(() => {\n      const el = innerRef.current;\n      if (!el || !isAutoGrow) return;\n      const style = window.getComputedStyle(el);\n      // jsdom and \"normal\" line-height both yield NaN here; px() coerces any\n      // non-finite value to 0 (or the fallback) so the ceiling stays a real number.\n      const px = (v: string, fallback = 0) => {\n        const n = parseFloat(v);\n        return Number.isFinite(n) ? n : fallback;\n      };\n      // line-height may compute to \"normal\"; fall back to ~1.5× font size, else 20px.\n      const lineHeight = px(style.lineHeight) || px(style.fontSize) * 1.5 || 20;\n      const borders = px(style.borderTopWidth) + px(style.borderBottomWidth);\n      const padding = px(style.paddingTop) + px(style.paddingBottom);\n      const ceiling = maxRows * lineHeight + padding + borders;\n      // measure the natural content height from a collapsed baseline\n      el.style.height = \"auto\";\n      const next = Math.min(el.scrollHeight, ceiling);\n      el.style.height = `${next}px`;\n      el.style.maxHeight = `${ceiling}px`;\n      // scroll only once content exceeds the ceiling; hug content otherwise\n      el.style.overflowY = el.scrollHeight > ceiling ? \"auto\" : \"hidden\";\n    }, [isAutoGrow, maxRows]);\n\n    React.useLayoutEffect(() => {\n      if (isAutoGrow) resizeToContent();\n    }, [isAutoGrow, resizeToContent, value]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) setCount(e.target.value.length);\n      if (isAutoGrow) resizeToContent();\n      onChange?.(e);\n    };\n\n    const hasCounter = maxLength !== undefined;\n    const hasError = error != null && error !== false;\n\n    return (\n      <div className=\"flex flex-col gap-(--space-3)\">\n        {/* Compose the Label primitive (define-once): it owns the canonical\n            label role/color (text-label / text-text-primary) and the disabled\n            dim. Passing `disabled` lets a disabled Textarea's name dim to\n            --color-text-disabled via Label's own cva variant, and `required`\n            surfaces the required mark there (the field still carries the real\n            required / aria-required state below). textarea.md §5 lists\n            text-secondary for the label, but label.md §3–5 is authoritative for\n            the Label primitive: resting label text is text-text-primary. */}\n        <Label htmlFor={fieldId} disabled={disabled} required={required}>\n          {label}\n        </Label>\n        <textarea\n          ref={innerRef}\n          id={fieldId}\n          // native <textarea> already carries an implicit aria-multiline; make the\n          // multi-line contract explicit per the frozen ARIA contract (spec §7).\n          aria-multiline=\"true\"\n          rows={isAutoGrow ? minRows : rows}\n          maxLength={maxLength}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-required={required || undefined}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy(\n            // coerce each guard to a boolean so the expression narrows to\n            // string | false (React.ReactNode can be null/0/0n, which would widen\n            // the union past the describedBy signature otherwise)\n            !!description && descId,\n            hasError && errId,\n            hasCounter && counterId,\n          )}\n          style={isAutoGrow ? { overflowY: \"hidden\" } : undefined}\n          className={cn(textareaVariants({ resize }), className)}\n          {...props}\n        />\n        <div className=\"flex items-start justify-between gap-(--space-3)\">\n          <div className=\"text-caption text-text-secondary\">\n            {description ? (\n              // spec §5: label AND description text are text-secondary; text-muted is\n              // reserved for the character counter at rest (see the counter below).\n              <span id={descId} className=\"text-caption text-text-secondary\">\n                {description}\n              </span>\n            ) : null}\n            {hasError ? (\n              <span id={errId} className=\"text-caption text-status-critical-on-surface\">\n                {error}\n              </span>\n            ) : null}\n          </div>\n          {hasCounter ? (\n            <span\n              id={counterId}\n              data-testid=\"textarea-counter\"\n              aria-live=\"polite\"\n              className=\"text-caption text-text-muted tabular-nums\"\n            >\n              {length}/{maxLength}\n            </span>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";AA8HQ,cAgCE,YAhCF;AA5HR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,wBAAmD;AAoB5D,SAAS,eAAe,KAAyD;AAC/E,QAAM,UAAU,IAAI,OAAO,OAAO;AAClC,SAAO,QAAQ,SAAS,QAAQ,KAAK,GAAG,IAAI;AAC9C;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,SAAS,MAAM,MAAM;AAC3B,UAAM,UAAU,MAAM;AACtB,UAAM,SAAS,GAAG,OAAO;AACzB,UAAM,QAAQ,GAAG,OAAO;AACxB,UAAM,YAAY,GAAG,OAAO;AAE5B,UAAM,WAAW,MAAM,OAA4B,IAAI;AACvD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM,SAAS;AAAA,IACjB;AAGA,UAAM,eAAe,UAAU;AAC/B,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM;AAAA,MAC9B,OAAO,SAAS,gBAAgB,EAAE,EAAE;AAAA,IACtC;AACA,UAAM,SAAS,eAAe,OAAO,SAAS,EAAE,EAAE,SAAS;AAE3D,UAAM,aAAa,WAAW;AAO9B,UAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,YAAM,KAAK,SAAS;AACpB,UAAI,CAAC,MAAM,CAAC,WAAY;AACxB,YAAM,QAAQ,OAAO,iBAAiB,EAAE;AAGxC,YAAM,KAAK,CAAC,GAAW,WAAW,MAAM;AACtC,cAAM,IAAI,WAAW,CAAC;AACtB,eAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAAA,MAClC;AAEA,YAAM,aAAa,GAAG,MAAM,UAAU,KAAK,GAAG,MAAM,QAAQ,IAAI,OAAO;AACvE,YAAM,UAAU,GAAG,MAAM,cAAc,IAAI,GAAG,MAAM,iBAAiB;AACrE,YAAM,UAAU,GAAG,MAAM,UAAU,IAAI,GAAG,MAAM,aAAa;AAC7D,YAAM,UAAU,UAAU,aAAa,UAAU;AAEjD,SAAG,MAAM,SAAS;AAClB,YAAM,OAAO,KAAK,IAAI,GAAG,cAAc,OAAO;AAC9C,SAAG,MAAM,SAAS,GAAG,IAAI;AACzB,SAAG,MAAM,YAAY,GAAG,OAAO;AAE/B,SAAG,MAAM,YAAY,GAAG,eAAe,UAAU,SAAS;AAAA,IAC5D,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,UAAM,gBAAgB,MAAM;AAC1B,UAAI,WAAY,iBAAgB;AAAA,IAClC,GAAG,CAAC,YAAY,iBAAiB,KAAK,CAAC;AAEvC,UAAM,eAAe,CAAC,MAA8C;AAClE,UAAI,CAAC,aAAc,UAAS,EAAE,OAAO,MAAM,MAAM;AACjD,UAAI,WAAY,iBAAgB;AAChC,iBAAW,CAAC;AAAA,IACd;AAEA,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,SAAS,QAAQ,UAAU;AAE5C,WACE,qBAAC,SAAI,WAAU,iCASb;AAAA,0BAAC,SAAM,SAAS,SAAS,UAAoB,UAC1C,iBACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UAGJ,kBAAe;AAAA,UACf,MAAM,aAAa,UAAU;AAAA,UAC7B;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAe,YAAY;AAAA,UAC3B,gBAAc,YAAY;AAAA,UAC1B,oBAAkB;AAAA;AAAA;AAAA;AAAA,YAIhB,CAAC,CAAC,eAAe;AAAA,YACjB,YAAY;AAAA,YACZ,cAAc;AAAA,UAChB;AAAA,UACA,OAAO,aAAa,EAAE,WAAW,SAAS,IAAI;AAAA,UAC9C,WAAW,GAAG,iBAAiB,EAAE,OAAO,CAAC,GAAG,SAAS;AAAA,UACpD,GAAG;AAAA;AAAA,MACN;AAAA,MACA,qBAAC,SAAI,WAAU,oDACb;AAAA,6BAAC,SAAI,WAAU,oCACZ;AAAA;AAAA;AAAA;AAAA,YAGC,oBAAC,UAAK,IAAI,QAAQ,WAAU,oCACzB,uBACH;AAAA,cACE;AAAA,UACH,WACC,oBAAC,UAAK,IAAI,OAAO,WAAU,gDACxB,iBACH,IACE;AAAA,WACN;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,cAAO;AAAA,cAAE;AAAA;AAAA;AAAA,QACZ,IACE;AAAA,SACN;AAAA,OACF;AAAA,EAEJ;AACF;","names":["Textarea"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdify/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Verdify React component library — token-bound, WCAG 2.2 AA, headless-where-needed",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,7 +27,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@verdify/tokens": "^0.6.0",
+    "@verdify/tokens": "^0.8.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "tailwindcss": "^4"
@@ -63,7 +63,7 @@
     "tsx": "^4.7.0",
     "typescript": "^5.4.0",
     "vitest": "^2.1.0",
-    "@verdify/tokens": "0.6.0"
+    "@verdify/tokens": "0.8.0"
   },
   "scripts": {
     "build": "tsup && tsc -p tsconfig.build.json",
@@ -73,6 +73,7 @@
     "verify": "pnpm run build && pnpm run lint:gates && pnpm run test && pnpm run registry:verify",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
+    "prerelease": "pnpm run verify && pnpm run registry:smoke",
     "registry:build": "tsx scripts/registry/build.ts",
     "registry:verify": "tsx scripts/registry/verify.ts",
     "registry:smoke": "tsx scripts/registry/smoke.ts"

package/registry/agent-badge.json

@@ -11,7 +11,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An AgentBadge is a small, NON-INTERACTIVE marker that the actor in view is an AI\n// agent, not a human (spec §1). It is a pill that holds a label and an optional\n// decorative icon — NOT a control: no focus ring, no target-size floor, no state\n// transition (spec §4/§5/§6).\n//\n// `variant` is the state the badge reports (spec §3). `neutral` is the default and\n// the common case: an AgentBadge has ONE meaning — \"this actor is an AI agent\" — so\n// neutrals carry the surface. It is a quiet, persistent marker, not an alarm. A\n// status color is spent ONLY when the agent ITSELF is in a state that needs\n// attention (authority expiring) or has failed (access revoked) — never to draw\n// attention to \"agent-ness\".\n//\n// The brand color (Sovereign Violet) is NEVER an AgentBadge fill — the brand is not\n// a status and not an actor-kind marker, so the family binds nothing from the action\n// tier. The verified-status green is reserved for the VerifiedBadge placed beside it,\n// never painted here, and \"agent\" is not the verified or signal status — so the only\n// status trios this badge ever reaches for are caution and critical (spec §3/§5/§8,\n// brand != state).\n//\n// Container fill: neutral AND each status paint the SAME one raised surface. The\n// status trio's `-bg` resolves to that same surface, so the agent's state is carried\n// by the fg (label + icon) and the border, never a saturated fill (spec §3/§5/§C).\n//\n// INHERITED TOKEN-TIER CONTRAST DEFECT — flag, do NOT mirror as AA-compliant.\n// The caution/critical bindings below are the spec §5 token table verbatim and an\n// exact mirror of the committed Badge template — they are CORRECT for this component\n// to bind, and the fix does NOT belong here. But on the one raised surface (where\n// every --color-status-*-bg resolves, identical to --color-surface-raised) the\n// saturated status fg/border colors, tuned for a stronger fill, fall below WCAG 2.2 AA\n// (measured against --color-surface-raised):\n//   caution  --color-status-caution-fg  / -border  -> 1.71:1\n//   critical --color-status-critical-fg / -border  -> 2.76:1\n// both far under the 4.5:1 text floor (1.4.3) for the 12px caption label and under\n// the 3:1 non-text bar (1.4.11) for the border. (--color-surface-border-muted on the\n// neutral variant is likewise ~2.55:1, under 3:1, but neutral is not status-bearing.)\n// This CONTRADICTS the frozen spec §7 claim that the label \"meets the AA text-contrast\n// floor and its border meets the 3:1 non-text bar\"; that claim is false for the status\n// variants and must not be treated as true. It is a SYSTEMIC token-tier problem\n// affecting every status-bearing Badge AND AgentBadge — the @verdify/tokens saturated\n// status fg/border values were designed for a stronger fill, not this near-white\n// surface — so the fix is at the token tier, not in this component. Neither lint:gates\n// nor the jest-axe sweep catches it (gates do not check contrast; jsdom resolves no\n// computed colors), so the measured ratios are pinned as a tripwire in\n// agent-badge.test.tsx. (Hex values are intentionally omitted here: the token-binding\n// gate's raw-hex matcher scans this comment.)\nexport const agentBadgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); the label always reads on its own, so the\n    // human/agent distinction never rests on color or shape alone\n    \"text-caption font-medium\",\n    // global-first: never wrap (the marker stays a single self-contained chip)\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)\n      variant: {\n        // neutral (default): the standard agent marker — neutral surface, text, and\n        // border roles, no status color (spec §3)\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // caution: the agent itself needs attention (authority expiring, grant pending)\n        // — the matching status trio; bg is the neutral surface (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        // critical: the agent itself failed or was revoked (access revoked, invalid\n        // credentials) — the matching status trio; bg is the neutral surface (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role that reinforces the label. It inherits the variant fg via `currentColor`; the\n// label still carries the meaning if the icon is dropped, so meaning never rests on\n// color OR icon alone.\nexport const agentBadgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An AgentBadge is a small, NON-INTERACTIVE marker that the actor in view is an AI\n// agent, not a human (spec §1). It is a pill that holds a label and an optional\n// decorative icon — NOT a control: no focus ring, no target-size floor, no state\n// transition (spec §4/§5/§6).\n//\n// `variant` is the state the badge reports (spec §3). `neutral` is the default and\n// the common case: an AgentBadge has ONE meaning — \"this actor is an AI agent\" — so\n// neutrals carry the surface. It is a quiet, persistent marker, not an alarm. A\n// status color is spent ONLY when the agent ITSELF is in a state that needs\n// attention (authority expiring) or has failed (access revoked) — never to draw\n// attention to \"agent-ness\".\n//\n// The brand color (Sovereign Violet) is NEVER an AgentBadge fill — the brand is not\n// a status and not an actor-kind marker, so the family binds nothing from the action\n// tier. The verified-status green is reserved for the VerifiedBadge placed beside it,\n// never painted here, and \"agent\" is not the verified or signal status — so the only\n// status trios this badge ever reaches for are caution and critical (spec §3/§5/§8,\n// brand != state).\n//\n// Container fill: neutral AND each status paint the SAME one raised surface. The\n// status trio's `-bg` resolves to that same surface, so the agent's state is carried\n// by the fg (label + icon) and the border, never a saturated fill (spec §3/§5/§C).\n//\n// TOKEN-TIER CONTRAST — RESOLVED at the token tier (tokens 0.6.0); the spec §7 AA claim holds.\n// The caution/critical bindings below are the spec §5 token table verbatim and an\n// exact mirror of the committed Badge template. On the one raised surface (where every\n// --color-status-*-bg resolves, identical to --color-surface-raised) the status fg/border\n// now MEET WCAG 2.2 AA: tokens 0.6.0 darkened --color-status-{caution,critical}-{fg,border}\n// to in-hue AA-passing shades (~4.6:1 measured against --color-surface-raised), clearing the\n// 4.5:1 text floor (1.4.3) for the 12px caption label and the 3:1 non-text bar (1.4.11) for\n// the border. (The bright saturated status colors moved to --color-status-*-accent, used only\n// on decorative aria-hidden glyphs elsewhere, never on this label.) So the spec §7 claim that\n// the label \"meets the AA text-contrast floor and its border meets the 3:1 non-text bar\" is\n// TRUE for the status variants. The neutral variant's border (--color-surface-border-muted,\n// ~2.55:1) is still under 3:1, but neutral is not status-bearing. Neither lint:gates nor the\n// jest-axe sweep checks contrast (gates do not; jsdom resolves no computed colors), so the\n// AA-passing ratios are PINNED as a regression tripwire in agent-badge.test.tsx — a re-lighten\n// below the floors trips there. (Hex values are intentionally omitted here: the token-binding\n// gate's raw-hex matcher scans this comment.)\nexport const agentBadgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); the label always reads on its own, so the\n    // human/agent distinction never rests on color or shape alone\n    \"text-caption font-medium\",\n    // global-first: never wrap (the marker stays a single self-contained chip)\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)\n      variant: {\n        // neutral (default): the standard agent marker — neutral surface, text, and\n        // border roles, no status color (spec §3)\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // caution: the agent itself needs attention (authority expiring, grant pending)\n        // — the matching status trio; bg is the neutral surface (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        // critical: the agent itself failed or was revoked (access revoked, invalid\n        // credentials) — the matching status trio; bg is the neutral surface (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role that reinforces the label. It inherits the variant fg via `currentColor`; the\n// label still carries the meaning if the icon is dropped, so meaning never rests on\n// color OR icon alone.\nexport const agentBadgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;\n",
       "path": "agent-badge/agent-badge.variants.ts",
       "target": "@ui/agent-badge/agent-badge.variants.ts",
       "type": "registry:ui"

package/registry/checkbox.json

@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  checkboxCheckGlyphVariants,\n  checkboxBarGlyphVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\" | \"onChange\"\n>;\n\nexport interface CheckboxProps extends NativeInputProps, CheckboxBoxVariantProps {\n  /** The visible text naming the choice. Becomes the accessible name via <label for>. */\n  label: string;\n  /** Secondary helper text beneath the label. Linked via aria-describedby. */\n  description?: string;\n  /** Validation message; sets aria-invalid and the critical-bordered error state. */\n  error?: string;\n  /** standalone = one value; parent = summarizes children (the only place mixed rests). */\n  variant?: \"standalone\" | \"parent\";\n  /** Mixed/“some children” state. Honored ONLY on variant=\"parent\"; ignored on standalone. */\n  indeterminate?: boolean;\n  /** Fired with the resolved boolean; a parent toggle resolves mixed → checked/unchecked. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nlet idSeq = 0;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      size,\n      variant = \"standalone\",\n      indeterminate = false,\n      disabled = false,\n      id,\n      onCheckedChange,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reactId = React.useId();\n    const baseId = id ?? `checkbox-${reactId}-${(idSeq += 1)}`;\n    const descId = description ? `${baseId}-description` : undefined;\n    const errorId = error ? `${baseId}-error` : undefined;\n\n    // indeterminate is a parent-only RESTING state — standalone never rests on mixed.\n    const isMixed = variant === \"parent\" && indeterminate;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    // bridge the forwarded ref to our inner ref (we need direct DOM access for indeterminate)\n    React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement);\n\n    // indeterminate is a DOM property, not an attribute — write it through the ref.\n    // This effect is why the component is a client component ('use client' above).\n    React.useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isMixed;\n    }, [isMixed]);\n\n    const describedBy =\n      [descId, errorId].filter(Boolean).join(\" \") || undefined;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // a direct parent toggle resolves mixed → a single state; never rests on mixed\n      onCheckedChange?.(e.currentTarget.checked);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {/* control row: the box + label share one hit area no smaller than the target token */}\n        <div\n          data-testid=\"checkbox-control\"\n          className=\"flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)\"\n        >\n          {/* relative overlay: the box (peer) + the indicator glyphs it drives.\n              The glyphs are siblings AFTER the input so peer-* can reach them. */}\n          <span className=\"relative inline-flex shrink-0\">\n            <input\n              ref={innerRef}\n              id={baseId}\n              type=\"checkbox\"\n              disabled={disabled}\n              aria-checked={isMixed ? \"mixed\" : undefined}\n              aria-invalid={error ? \"true\" : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(checkboxBoxVariants({ size }), className)}\n              {...props}\n            />\n            {/* check: only when :checked; never rendered in the mixed state so the\n                bar wins for an indeterminate parent (check and bar stay exclusive) */}\n            {!isMixed ? (\n              <svg\n                data-testid=\"checkbox-check\"\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                className={checkboxCheckGlyphVariants({ disabled })}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n              >\n                <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n            {/* horizontal bar: the single indeterminate mark, only when :indeterminate */}\n            <svg\n              data-testid=\"checkbox-bar\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              className={checkboxBarGlyphVariants({ disabled })}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n            >\n              <path d=\"M4 8h8\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <label htmlFor={baseId} className={checkboxLabelVariants({ disabled })}>\n            {label}\n          </label>\n        </div>\n        {description ? (\n          <p id={descId} className=\"text-caption text-text-secondary\">\n            {description}\n          </p>\n        ) : null}\n        {error ? (\n          <p id={errorId} className=\"text-caption text-status-critical-fg\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  checkboxCheckGlyphVariants,\n  checkboxBarGlyphVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\" | \"onChange\"\n>;\n\nexport interface CheckboxProps extends NativeInputProps, CheckboxBoxVariantProps {\n  /** The visible text naming the choice. Becomes the accessible name via <label for>. */\n  label: string;\n  /** Secondary helper text beneath the label. Linked via aria-describedby. */\n  description?: string;\n  /** Validation message; sets aria-invalid and the critical-bordered error state. */\n  error?: string;\n  /** standalone = one value; parent = summarizes children (the only place mixed rests). */\n  variant?: \"standalone\" | \"parent\";\n  /** Mixed/“some children” state. Honored ONLY on variant=\"parent\"; ignored on standalone. */\n  indeterminate?: boolean;\n  /** Fired with the resolved boolean; a parent toggle resolves mixed → checked/unchecked. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nlet idSeq = 0;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      size,\n      variant = \"standalone\",\n      indeterminate = false,\n      disabled = false,\n      id,\n      onCheckedChange,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reactId = React.useId();\n    const baseId = id ?? `checkbox-${reactId}-${(idSeq += 1)}`;\n    const descId = description ? `${baseId}-description` : undefined;\n    const errorId = error ? `${baseId}-error` : undefined;\n\n    // indeterminate is a parent-only RESTING state — standalone never rests on mixed.\n    const isMixed = variant === \"parent\" && indeterminate;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    // bridge the forwarded ref to our inner ref (we need direct DOM access for indeterminate)\n    React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement);\n\n    // indeterminate is a DOM property, not an attribute — write it through the ref.\n    // This effect is why the component is a client component ('use client' above).\n    React.useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isMixed;\n    }, [isMixed]);\n\n    const describedBy =\n      [descId, errorId].filter(Boolean).join(\" \") || undefined;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // a direct parent toggle resolves mixed → a single state; never rests on mixed\n      onCheckedChange?.(e.currentTarget.checked);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {/* control row: the box + label share one hit area no smaller than the target token */}\n        <div\n          data-testid=\"checkbox-control\"\n          className=\"flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)\"\n        >\n          {/* relative overlay: the box (peer) + the indicator glyphs it drives.\n              The glyphs are siblings AFTER the input so peer-* can reach them. */}\n          <span className=\"relative inline-flex shrink-0\">\n            <input\n              ref={innerRef}\n              id={baseId}\n              type=\"checkbox\"\n              disabled={disabled}\n              aria-checked={isMixed ? \"mixed\" : undefined}\n              aria-invalid={error ? \"true\" : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(checkboxBoxVariants({ size }), className)}\n              {...props}\n            />\n            {/* check: only when :checked; never rendered in the mixed state so the\n                bar wins for an indeterminate parent (check and bar stay exclusive) */}\n            {!isMixed ? (\n              <svg\n                data-testid=\"checkbox-check\"\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                className={checkboxCheckGlyphVariants({ disabled })}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n              >\n                <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n            {/* horizontal bar: the single indeterminate mark, only when :indeterminate */}\n            <svg\n              data-testid=\"checkbox-bar\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              className={checkboxBarGlyphVariants({ disabled })}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n            >\n              <path d=\"M4 8h8\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <label htmlFor={baseId} className={checkboxLabelVariants({ disabled })}>\n            {label}\n          </label>\n        </div>\n        {description ? (\n          <p id={descId} className=\"text-caption text-text-secondary\">\n            {description}\n          </p>\n        ) : null}\n        {error ? (\n          <p id={errorId} className=\"text-caption text-status-critical-on-surface\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n",
       "path": "checkbox/checkbox.tsx",
       "target": "@ui/checkbox/checkbox.tsx",
       "type": "registry:ui"

package/registry/consent-toggle.json

@@ -11,7 +11,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// ConsentToggle is the explicit, revocable affordance by which an actor grants or\n// withdraws permission for one specific use of their data or identity (spec §1). It\n// COMPOSES the committed Switch as its control — the granted axis maps to the Switch's\n// `on` — and adds the scope, the named recipient, the optional detail, the optional\n// evidence affordance, and the failure message AROUND it. So the track / thumb / focus\n// ring / target-size floor / slide-and-tint motion are bound ONCE in switch.variants.ts\n// and are NOT re-bound here; this file binds only the surrounding text + layout roles.\n//\n// brand != state (spec §4/§5/§8). The granted track takes the primary ACTION accent\n// (the Switch's `aria-checked:bg-action-primary-bg`), NEVER --color-status-verified-*:\n// verified green is the in-product verified status, never a consent affordance, and a\n// grant reports permission, not a verification result. ConsentToggle therefore binds\n// NOTHING from the status tier on its granted state — the one status color it ever\n// reaches for is --color-status-critical-fg, and ONLY on the failure message (a stated\n// failed grant/withdrawal), never on the granted/checked state. This component-scoped\n// invariant (no status color on the grant; verified green never a consent affordance) is\n// pinned as a test in consent-toggle.test.tsx — the action accent IS legitimate here, so\n// the negative forbids only the STATUS tier, per the build-on-brand skill's scoping note.\n//\n// The motion is the Switch's FAST functional slide/tint on verdify easing, collapsing to\n// the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration: a consent grant is not a verification (G-U3).\n\n// The root layout (spec §2): a column stacking the control row, the optional evidence\n// affordance, and the optional failure message at the --space-2 gap. The `variant` axis\n// (spec §3) is a form of how the consent is PRESENTED — a plain grant, a grant with the\n// evidence affordance, or a grant scoped to an AI agent — never a level of color or alarm,\n// so NONE of the variants recolors anything: the granted accent and every text role are\n// identical across all three. Non-interactive container: the focus ring, the keyboard\n// model, and the target-size floor all live on the composed Switch control, not here.\nexport const consentToggleVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.\n    variant: {\n      // grant (default): a single permission the actor turns on to allow, off to withhold.\n      grant: \"\",\n      // with-evidence: adds the evidence affordance so the actor can review the recorded\n      // grant — what, to whom, when. Use wherever the grant is consequential.\n      \"with-evidence\": \"\",\n      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),\n      // so the actor knows they are granting to an agent, not a human.\n      \"agent-scoped\": \"\",\n    },\n  },\n  defaultVariants: { variant: \"grant\" },\n});\n\n// The recipient + detail block (spec §2/§5): who receives the data and the optional bound\n// of the grant, in the SECONDARY text color at the --text-body type role. It is composed\n// into the control's accessible description (aria-describedby), so a screen reader\n// announces \"to whom\" alongside the scope — never a bare on/off with the meaning missing.\nexport const consentToggleRecipientClass = \"text-body text-text-secondary\";\n\n// The optional detail line (spec §2/§5): one statement clarifying the bound or duration of\n// the grant (for example, what stops when consent is withdrawn), under the recipient, in\n// the secondary text color at the body role.\nexport const consentToggleDetailClass = \"text-body text-text-secondary\";\n\n// The optional evidence affordance row (spec §2/§3): a slot holding the caller's link or\n// Button to the PROOF of the grant — what was consented to, to whom, and when — so the act\n// is reviewable later. It is the caller's own focus stop with its own keyboard model and\n// focus ring (the evidence control is not folded into the busy switch); this row only\n// positions it. Surfaces a proof of the consent event, not a stored document.\nexport const consentToggleEvidenceClass = \"flex items-center text-body\";\n\n// The failure message (spec §4/§5/§7): shown next to the control on a FAILED grant or\n// withdrawal, naming what failed and what to do next without blaming the reader, in the\n// CRITICAL status foreground at the --text-body role. It is the ONLY status color the\n// component binds, and only here — never on the granted state (brand != state). It is\n// announced through an assertive live region (role=alert), set in the tsx, per 4.1.3.\nexport const consentToggleFailureClass = \"text-body text-status-critical-fg\";\n\nexport type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// ConsentToggle is the explicit, revocable affordance by which an actor grants or\n// withdraws permission for one specific use of their data or identity (spec §1). It\n// COMPOSES the committed Switch as its control — the granted axis maps to the Switch's\n// `on` — and adds the scope, the named recipient, the optional detail, the optional\n// evidence affordance, and the failure message AROUND it. So the track / thumb / focus\n// ring / target-size floor / slide-and-tint motion are bound ONCE in switch.variants.ts\n// and are NOT re-bound here; this file binds only the surrounding text + layout roles.\n//\n// brand != state (spec §4/§5/§8). The granted track takes the primary ACTION accent\n// (the Switch's `aria-checked:bg-action-primary-bg`), NEVER --color-status-verified-*:\n// verified green is the in-product verified status, never a consent affordance, and a\n// grant reports permission, not a verification result. ConsentToggle therefore binds\n// NOTHING from the status tier on its granted state — the one status color it ever\n// reaches for is --color-status-critical-fg, and ONLY on the failure message (a stated\n// failed grant/withdrawal), never on the granted/checked state. This component-scoped\n// invariant (no status color on the grant; verified green never a consent affordance) is\n// pinned as a test in consent-toggle.test.tsx — the action accent IS legitimate here, so\n// the negative forbids only the STATUS tier, per the build-on-brand skill's scoping note.\n//\n// The motion is the Switch's FAST functional slide/tint on verdify easing, collapsing to\n// the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration: a consent grant is not a verification (G-U3).\n\n// The root layout (spec §2): a column stacking the control row, the optional evidence\n// affordance, and the optional failure message at the --space-2 gap. The `variant` axis\n// (spec §3) is a form of how the consent is PRESENTED — a plain grant, a grant with the\n// evidence affordance, or a grant scoped to an AI agent — never a level of color or alarm,\n// so NONE of the variants recolors anything: the granted accent and every text role are\n// identical across all three. Non-interactive container: the focus ring, the keyboard\n// model, and the target-size floor all live on the composed Switch control, not here.\nexport const consentToggleVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.\n    variant: {\n      // grant (default): a single permission the actor turns on to allow, off to withhold.\n      grant: \"\",\n      // with-evidence: adds the evidence affordance so the actor can review the recorded\n      // grant — what, to whom, when. Use wherever the grant is consequential.\n      \"with-evidence\": \"\",\n      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),\n      // so the actor knows they are granting to an agent, not a human.\n      \"agent-scoped\": \"\",\n    },\n  },\n  defaultVariants: { variant: \"grant\" },\n});\n\n// The recipient + detail block (spec §2/§5): who receives the data and the optional bound\n// of the grant, in the SECONDARY text color at the --text-body type role. It is composed\n// into the control's accessible description (aria-describedby), so a screen reader\n// announces \"to whom\" alongside the scope — never a bare on/off with the meaning missing.\nexport const consentToggleRecipientClass = \"text-body text-text-secondary\";\n\n// The optional detail line (spec §2/§5): one statement clarifying the bound or duration of\n// the grant (for example, what stops when consent is withdrawn), under the recipient, in\n// the secondary text color at the body role.\nexport const consentToggleDetailClass = \"text-body text-text-secondary\";\n\n// The optional evidence affordance row (spec §2/§3): a slot holding the caller's link or\n// Button to the PROOF of the grant — what was consented to, to whom, and when — so the act\n// is reviewable later. It is the caller's own focus stop with its own keyboard model and\n// focus ring (the evidence control is not folded into the busy switch); this row only\n// positions it. Surfaces a proof of the consent event, not a stored document.\nexport const consentToggleEvidenceClass = \"flex items-center text-body\";\n\n// The failure message (spec §4/§5/§7): shown next to the control on a FAILED grant or\n// withdrawal, naming what failed and what to do next without blaming the reader, in the\n// CRITICAL status foreground at the --text-body role. It is the ONLY status color the\n// component binds, and only here — never on the granted state (brand != state). It is\n// announced through an assertive live region (role=alert), set in the tsx, per 4.1.3.\nexport const consentToggleFailureClass = \"text-body text-status-critical-on-surface\";\n\nexport type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;\n",
       "path": "consent-toggle/consent-toggle.variants.ts",
       "target": "@ui/consent-toggle/consent-toggle.variants.ts",
       "type": "registry:ui"

package/registry/credential-card.json

@@ -11,7 +11,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// CredentialCard is one ROW in the list of credentials ATTACHED to an identity — a single way\n// to reach that identity (an email, phone, passkey, wallet, or enterprise SSO connection). It\n// encodes the platform's first invariant — identity is not credentials — in its UI contract: a\n// card is a LINK to an identity, never the identity itself, so it never reads as \"you\" and never\n// stands in for the account (spec §1/§8).\n//\n// It COMPOSES the committed primitives rather than reinventing them — a Card-like neutral surface\n// (the surface-* roles, bound here), the destructive Button for `remove`, the secondary Button\n// for an optional `action`, the Badge for a `status`, the Checkbox for `selectable`, and the\n// Button's in-place loading spinner for a resolving removal. So the focus ring, the target-size\n// floor, the keyboard model, and the control motion all come from those proven primitives; this\n// file binds ONLY the surrounding neutral surface + text-role + layout classes.\n//\n// brand != state (spec §3/§5/§8). The card SURFACE consumes NO action or status token of its own\n// — neutrals carry the card. The brand violet (Sovereign Violet, the action accent) is never a\n// card fill, never the icon, never the identifier, and never marks a credential as special. The\n// verified-status green is reserved for the `verified` status Badge and is never spent on the\n// card surface, the icon, or the identifier — coloring the card green would imply the IDENTITY is\n// verified, which is the one misreport this molecule forbids. The card therefore binds nothing\n// from the action tier and nothing from the status tier; those colors live on the controls and\n// Badges it holds (asserted positively in their own primitives' tests), never on this surface.\n//\n// The motion the card adds is none of its own: control hover/press uses the composed primitive's\n// fast functional transition on verdify easing, collapsing to the instant endpoint under reduced\n// motion. A resolving removal is a plain wait on the Button's ambient spinner — never the 350ms\n// VerifiedBadge-only theatre duration: a removal is not a verification (G-U3).\n\n// The card container (spec §2/§4/§5): a NEUTRAL raised surface, the same Card-static surface the\n// committed Card binds, but it is a LIST ROW (`<li role=\"listitem\">`, set in the tsx) so it sits\n// in the credential list's `<ul role=\"list\">` (spec §7). It is a static container, NOT a single\n// clickable control — the whole row does not map to one action — so it carries no focus ring and\n// no target-size floor of its own (those live on its controls, spec §4/§5). The `kind` axis is\n// which credential the card represents; it is carried by the `icon` + `label` TEXT, never by\n// color, so NONE of the kinds recolors the surface — every kind is the identical neutral surface\n// (spec §3). `selectable` composes with any kind and changes layout (a leading Checkbox), not\n// color, so it is not a color variant here.\nexport const credentialCardVariants = cva(\n  [\n    // raised neutral surface, rounded container, resting elevation, internal padding from --space-4\n    \"relative flex items-start gap-(--space-2) rounded-lg border bg-surface-raised shadow-sm p-(--space-4)\",\n    // the default container hairline (spec §5)\n    \"border-surface-border\",\n    // logical-property text alignment so the row mirrors under dir=rtl (G-U6); list rows carry\n    // no bullet marker\n    \"text-start text-text-primary list-none\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the credential KIND the card represents). The kind is carried\n      // by the icon + label text, never color, so every kind is the SAME neutral surface.\n      kind: {\n        email: \"\",\n        phone: \"\",\n        passkey: \"\",\n        wallet: \"\",\n        \"enterprise-sso\": \"\",\n      },\n    },\n    defaultVariants: { kind: \"email\" },\n  },\n);\n\n// The kind icon (spec §2/§5/§7): one small glyph for the credential kind at the md icon role. It\n// reinforces the kind shown in the label and is decorative (aria-hidden, set in the tsx) — the\n// label text still carries the kind if the icon is dropped, so the kind never rests on the icon\n// or color alone. Its fill is the SECONDARY text role (a neutral role), never a status color and\n// never the brand (spec §2/§3).\nexport const credentialCardIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-text-secondary\";\n\n// The label + identifier block (spec §2): the human-readable kind name above the value that\n// identifies this specific credential. Takes the remaining inline space between the icon and the\n// trailing status/controls; stacks the two lines at the --space-1 gap.\nexport const credentialCardBodyClass = \"flex min-w-0 flex-1 flex-col gap-(--space-1)\";\n\n// The label (spec §2/§5): the human-readable name of the credential KIND, a statement in\n// sentence case (for example \"Email\", \"Passkey\", \"Wallet\"), in the label type role + the PRIMARY\n// text color. The label says what kind of link this is, not who the identity is.\nexport const credentialCardLabelClass = \"text-label text-text-primary\";\n\n// The identifier (spec §2/§5/G-U6): the value that identifies this specific credential — the\n// email, the masked phone, the passkey device name, the truncated wallet address, or the SSO\n// provider + domain. It renders in the MONOSPACE type role (never the UI font for credential\n// strings) in the SECONDARY text color, isolated left-to-right so addresses, hashes, and wallet\n// strings stay readable even inside RTL text, and truncates rather than wrapping.\nexport const credentialCardIdentifierClass =\n  \"text-mono text-text-secondary [direction:ltr] truncate\";\n\n// The status row (spec §2): at most one or two small Badges stating a fact about the credential —\n// `verified` (the green status, on the composed Badge's verified variant) or `primary` (the\n// credential you currently sign in with, a NEUTRAL Badge — \"primary\" is which credential is used,\n// a fact, not a status color and never the brand). The status describes the credential, not the\n// identity. This row only positions the composed Badges; their color lives in badge.variants.ts.\nexport const credentialCardStatusClass = \"flex shrink-0 flex-wrap items-center gap-(--space-1)\";\n\n// The meta line (spec §2/§5): quiet secondary text such as when the credential was added or last\n// used, in the MUTED text color at the caption role. De-emphasized; never an alarm color.\nexport const credentialCardMetaClass = \"text-caption text-text-muted\";\n\n// The trailing controls cluster (spec §2): the optional `action` beside the required `remove`,\n// aligned to the inline-end edge at the --space-2 gap. Keep the card to one primary action\n// (`remove`) plus at most one further low-emphasis control (restraint over volume). It only lays\n// the controls out; each control's treatment + focus ring + target-size floor live on the\n// composed Button.\nexport const credentialCardControlsClass = \"flex shrink-0 items-center gap-(--space-2)\";\n\n// The disabled-reason note (spec §4/§5/§7): when a control is disabled (for example `remove` on\n// the last sign-in credential), the reason is given as adjacent text in the MUTED text color at\n// the caption role — wired to the control as its accessible description (so the reason is heard,\n// not just seen), never communicated by graying alone.\nexport const credentialCardReasonClass = \"text-caption text-text-muted\";\n\n// The removal-failure message (spec §4/§7): on a FAILED removal the credential stays in the list\n// and the failure is stated plainly where it happened, in the CRITICAL status foreground at the\n// caption role — naming what failed and what to do next, never blaming the reader and never an\n// exclamation mark. It is the ONLY status color this component binds, and only here (never on the\n// card surface, brand != state). It is announced through an assertive live region (role=alert,\n// set in the tsx) per 4.1.3.\nexport const credentialCardErrorClass = \"text-caption text-status-critical-fg\";\n\nexport type CredentialCardVariantProps = VariantProps<typeof credentialCardVariants>;\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// CredentialCard is one ROW in the list of credentials ATTACHED to an identity — a single way\n// to reach that identity (an email, phone, passkey, wallet, or enterprise SSO connection). It\n// encodes the platform's first invariant — identity is not credentials — in its UI contract: a\n// card is a LINK to an identity, never the identity itself, so it never reads as \"you\" and never\n// stands in for the account (spec §1/§8).\n//\n// It COMPOSES the committed primitives rather than reinventing them — a Card-like neutral surface\n// (the surface-* roles, bound here), the destructive Button for `remove`, the secondary Button\n// for an optional `action`, the Badge for a `status`, the Checkbox for `selectable`, and the\n// Button's in-place loading spinner for a resolving removal. So the focus ring, the target-size\n// floor, the keyboard model, and the control motion all come from those proven primitives; this\n// file binds ONLY the surrounding neutral surface + text-role + layout classes.\n//\n// brand != state (spec §3/§5/§8). The card SURFACE consumes NO action or status token of its own\n// — neutrals carry the card. The brand violet (Sovereign Violet, the action accent) is never a\n// card fill, never the icon, never the identifier, and never marks a credential as special. The\n// verified-status green is reserved for the `verified` status Badge and is never spent on the\n// card surface, the icon, or the identifier — coloring the card green would imply the IDENTITY is\n// verified, which is the one misreport this molecule forbids. The card therefore binds nothing\n// from the action tier and nothing from the status tier; those colors live on the controls and\n// Badges it holds (asserted positively in their own primitives' tests), never on this surface.\n//\n// The motion the card adds is none of its own: control hover/press uses the composed primitive's\n// fast functional transition on verdify easing, collapsing to the instant endpoint under reduced\n// motion. A resolving removal is a plain wait on the Button's ambient spinner — never the 350ms\n// VerifiedBadge-only theatre duration: a removal is not a verification (G-U3).\n\n// The card container (spec §2/§4/§5): a NEUTRAL raised surface, the same Card-static surface the\n// committed Card binds, but it is a LIST ROW (`<li role=\"listitem\">`, set in the tsx) so it sits\n// in the credential list's `<ul role=\"list\">` (spec §7). It is a static container, NOT a single\n// clickable control — the whole row does not map to one action — so it carries no focus ring and\n// no target-size floor of its own (those live on its controls, spec §4/§5). The `kind` axis is\n// which credential the card represents; it is carried by the `icon` + `label` TEXT, never by\n// color, so NONE of the kinds recolors the surface — every kind is the identical neutral surface\n// (spec §3). `selectable` composes with any kind and changes layout (a leading Checkbox), not\n// color, so it is not a color variant here.\nexport const credentialCardVariants = cva(\n  [\n    // raised neutral surface, rounded container, resting elevation, internal padding from --space-4\n    \"relative flex items-start gap-(--space-2) rounded-lg border bg-surface-raised shadow-sm p-(--space-4)\",\n    // the default container hairline (spec §5)\n    \"border-surface-border\",\n    // logical-property text alignment so the row mirrors under dir=rtl (G-U6); list rows carry\n    // no bullet marker\n    \"text-start text-text-primary list-none\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the credential KIND the card represents). The kind is carried\n      // by the icon + label text, never color, so every kind is the SAME neutral surface.\n      kind: {\n        email: \"\",\n        phone: \"\",\n        passkey: \"\",\n        wallet: \"\",\n        \"enterprise-sso\": \"\",\n      },\n    },\n    defaultVariants: { kind: \"email\" },\n  },\n);\n\n// The kind icon (spec §2/§5/§7): one small glyph for the credential kind at the md icon role. It\n// reinforces the kind shown in the label and is decorative (aria-hidden, set in the tsx) — the\n// label text still carries the kind if the icon is dropped, so the kind never rests on the icon\n// or color alone. Its fill is the SECONDARY text role (a neutral role), never a status color and\n// never the brand (spec §2/§3).\nexport const credentialCardIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-text-secondary\";\n\n// The label + identifier block (spec §2): the human-readable kind name above the value that\n// identifies this specific credential. Takes the remaining inline space between the icon and the\n// trailing status/controls; stacks the two lines at the --space-1 gap.\nexport const credentialCardBodyClass = \"flex min-w-0 flex-1 flex-col gap-(--space-1)\";\n\n// The label (spec §2/§5): the human-readable name of the credential KIND, a statement in\n// sentence case (for example \"Email\", \"Passkey\", \"Wallet\"), in the label type role + the PRIMARY\n// text color. The label says what kind of link this is, not who the identity is.\nexport const credentialCardLabelClass = \"text-label text-text-primary\";\n\n// The identifier (spec §2/§5/G-U6): the value that identifies this specific credential — the\n// email, the masked phone, the passkey device name, the truncated wallet address, or the SSO\n// provider + domain. It renders in the MONOSPACE type role (never the UI font for credential\n// strings) in the SECONDARY text color, isolated left-to-right so addresses, hashes, and wallet\n// strings stay readable even inside RTL text, and truncates rather than wrapping.\nexport const credentialCardIdentifierClass =\n  \"text-mono text-text-secondary [direction:ltr] truncate\";\n\n// The status row (spec §2): at most one or two small Badges stating a fact about the credential —\n// `verified` (the green status, on the composed Badge's verified variant) or `primary` (the\n// credential you currently sign in with, a NEUTRAL Badge — \"primary\" is which credential is used,\n// a fact, not a status color and never the brand). The status describes the credential, not the\n// identity. This row only positions the composed Badges; their color lives in badge.variants.ts.\nexport const credentialCardStatusClass = \"flex shrink-0 flex-wrap items-center gap-(--space-1)\";\n\n// The meta line (spec §2/§5): quiet secondary text such as when the credential was added or last\n// used, in the MUTED text color at the caption role. De-emphasized; never an alarm color.\nexport const credentialCardMetaClass = \"text-caption text-text-muted\";\n\n// The trailing controls cluster (spec §2): the optional `action` beside the required `remove`,\n// aligned to the inline-end edge at the --space-2 gap. Keep the card to one primary action\n// (`remove`) plus at most one further low-emphasis control (restraint over volume). It only lays\n// the controls out; each control's treatment + focus ring + target-size floor live on the\n// composed Button.\nexport const credentialCardControlsClass = \"flex shrink-0 items-center gap-(--space-2)\";\n\n// The disabled-reason note (spec §4/§5/§7): when a control is disabled (for example `remove` on\n// the last sign-in credential), the reason is given as adjacent text in the MUTED text color at\n// the caption role — wired to the control as its accessible description (so the reason is heard,\n// not just seen), never communicated by graying alone.\nexport const credentialCardReasonClass = \"text-caption text-text-muted\";\n\n// The removal-failure message (spec §4/§7): on a FAILED removal the credential stays in the list\n// and the failure is stated plainly where it happened, in the CRITICAL status foreground at the\n// caption role — naming what failed and what to do next, never blaming the reader and never an\n// exclamation mark. It is the ONLY status color this component binds, and only here (never on the\n// card surface, brand != state). It is announced through an assertive live region (role=alert,\n// set in the tsx) per 4.1.3.\nexport const credentialCardErrorClass = \"text-caption text-status-critical-on-surface\";\n\nexport type CredentialCardVariantProps = VariantProps<typeof credentialCardVariants>;\n",
       "path": "credential-card/credential-card.variants.ts",
       "target": "@ui/credential-card/credential-card.variants.ts",
       "type": "registry:ui"

package/registry/data-grid.json

@@ -11,7 +11,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n// you navigate one cell at a time (spec §1). It is a NEUTRAL data surface (spec §1/§3): neutrals\n// carry roughly 90% of it, and a dense grid earns its legibility from restraint. It paints from the\n// surface, text, and border roles; it reaches the --color-action-* tier only for the controls it\n// hosts (the sortable-header ghost accent, the row-hover affordance, the bulk-bar actions, and the\n// NEUTRAL selection accent) and the --color-status-* tier ONLY inside a cell that reports a real\n// state, paired with text — never as a row tint, a header fill, or the selection accent, and NEVER\n// a brand token as a status (brand != state, G-U2). Selection and the active cell are NEUTRAL action\n// states; a verified/trust state is a status cell (spec §3/§4/§8).\n\n// The scroll container <div role=\"grid\"> (spec §2 grid / §5). The neutral canvas surface and the\n// default cell text role, framed by the outer surface border at the md radius, with a fixed-height\n// scroll viewport (the caller sizes it via className — the token set has no grid-height scale, the\n// caller-owned-dimension precedent J). It NEVER wears the brand violet or a status fill (spec §3/§8)\n// — those belong to the controls and the status cells inside it. The active cell is kept scrolled\n// clear of the sticky header and pinned columns by scroll-margin (2.4.11 Focus Not Obscured).\nexport const dataGridVariants = cva([\n  \"relative w-full overflow-auto\",\n  \"bg-surface-canvas text-body text-text-primary\",\n  \"border border-surface-border rounded-(--radius-md)\",\n]);\n\nexport type DataGridVariantProps = VariantProps<typeof dataGridVariants>;\n\n// The inner table element. The grid is a real <table> for the row/column relationship (1.3.1),\n// border-collapsed so the gridlines read as single hairlines, and start-aligned so it mirrors under\n// dir=\"rtl\" (G-U6).\nexport const dataGridTableClass = \"w-full border-collapse text-start\";\n\n// The column-header row <tr> (spec §2 column-header-row / §4 Default / §5). It is STICKY — it stays\n// pinned to the top of the scroll viewport while rows scroll under it — on the raised neutral surface\n// with the sm elevation so it reads ABOVE the scrolling rows (spec §4/§5). z on the sticky layer so a\n// scrolled cell never paints over the pinned header. A header row NEVER wears a status or brand tint\n// (spec §3/§8).\nexport const dataGridHeaderRowClass =\n  \"sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm \" +\n  \"border-b border-border-default\";\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — any in-cell control keeps its own --size-target-* floor\n// (DEC-B: never a fixed height below the floor). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n} as const;\n\n// A data row <tr> (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained GHOST fill to track the eye across a wide row — an AFFORDANCE, never the sole carrier of\n// meaning, and never a selection (nothing is selected until you act, spec §4 Hover). SELECTED\n// (aria-selected): the NEUTRAL secondary-action selection accent — selection is a neutral action\n// state, NOT verified green and NOT the brand violet (selecting a row never implies it is verified;\n// brand != state, G-U2, spec §4/§8). Selection is encoded by the row checkbox + aria-selected, so a\n// grayscale reader reads it from the checkbox, not the fill (1.4.1). Motion is the fast token\n// transition on the verdify easing, instant under reduced motion — never the 350ms VerifiedBadge-only\n// theatre (a row hover/select is a plain transition, G-U3).\nexport const dataGridRowClass =\n  \"border-b border-border-default \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"aria-selected:bg-action-secondary-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// A data cell <td role=\"gridcell\"> (spec §2 cell, §4/§5). It is ONE focusable unit in the roving\n// grid: exactly one cell is the active cell (tabindex=0) and shows the visible 2px focus ring; every\n// other cell is tabindex=-1. The ring is part of the base and is NEVER removed (spec §4 Focus /\n// 2.4.7). scroll-margin keeps the active cell clear of the sticky header + pinned columns before it\n// takes focus (spec §7, 2.4.11 Focus Not Obscured). Default: the primary text color at the body type\n// role. A `mono` cell takes the monospace role and is isolated LTR so an identifier/key/timestamp\n// stays readable inside an RTL layout (spec §3/§5, G-U6). A `secondary` cell is de-emphasized\n// auxiliary text. A `status` cell carries the status fg paired with the cell's words — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2); status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// text, not a saturated fill.\nexport const dataGridCellVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-body text-text-primary\",\n    // the roving active cell's focus ring — always visible, never removed (2.4.7)\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      mono: {\n        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)\n        true: \"text-mono [direction:ltr]\",\n        false: \"\",\n      },\n      secondary: {\n        // de-emphasized secondary cell text (spec §5 --color-text-secondary)\n        true: \"text-text-secondary\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the words carry the meaning,\n        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-fg\",\n        signal: \"text-status-signal-fg\",\n        caution: \"text-status-caution-fg\",\n        critical: \"text-status-critical-fg\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      mono: false,\n      secondary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;\n\n// A column-header cell <th role=\"columnheader\"> (spec §2 column-header / §4/§5). The header LABEL is\n// the SECONDARY text color at the label type role (the quiet, tracked column label) on the raised\n// header surface — a header NEVER wears a status or brand tint (spec §3/§8). It is also a roving\n// active-cell target, so it carries the same focus ring + scroll-margin as a data cell.\nexport const dataGridColumnHeaderVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-label text-text-secondary\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;\n\n// The SORTABLE-header control (spec §2/§4 Sorted/§6/§7): a real <button> inside the columnheader, so\n// it reads as the control it is and toggles the sort on Enter. It is the GHOST action accent — the\n// label + caret in the ghost fg with the restrained ghost hover fill (spec §4 sortable-header hover /\n// §5) — the action tier is legitimate here because it is a control the grid HOSTS, not a header tint.\n// It carries the target-size floor (40px desktop / 44px touch, spec §7) and inherits the active\n// cell's focus ring from the columnheader. Motion is the fast token transition, never the deliberate\n// verified-check theatre (G-U3). aria-sort lives on the parent th, and the caret encodes direction\n// alongside it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const dataGridSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is also\n// encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on color\n// alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const dataGridSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The selection cell <td role=\"gridcell\"> and the select-all header cell (spec §2 selection-cell /\n// §5): the leading cell that holds the row's Checkbox, carrying the active-cell focus ring +\n// scroll-margin like any other cell. The checkbox is the committed Checkbox component (reused, not\n// re-rolled), which already binds the control surface + border tokens (spec §5) and the brand action\n// accent on the CHECKED box — a checked checkbox is the brand accent, never status-verified (G-U2):\n// selection is a neutral action state. This wrapper is just the cell padding + the roving focus ring.\nexport const dataGridSelectionCellClass =\n  \"px-(--space-3) align-middle text-start \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"scroll-mt-(--space-12) scroll-ms-(--space-12)\";\n\n// The bulk-action bar (spec §2 bulk-action-bar / §4/§5): a toolbar that appears when rows are\n// selected, on the raised neutral surface with the sm elevation and a hairline top border, holding\n// the selection actions + a clear-selection control. It is a NEUTRAL surface — the COLOR lives on the\n// action buttons it holds, never on the bar (spec §3/§8). Motion is the fast token transition (the\n// bar's appear/transition), never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkBarClass =\n  \"flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) \" +\n  \"bg-surface-raised border-t border-border-default \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The selected-count label in the bulk-action bar (spec §2): the secondary text at the label role —\n// the count of selected rows, in words, so selection is announced, never color alone (1.4.1 / 4.1.3).\nexport const dataGridBulkCountClass = \"text-label text-text-secondary\";\n\n// A bulk-action button (spec §2/§5): the PRIMARY selection action is the primary ACTION accent; a\n// `destructive` action (for example, revoke a key) is the destructive ACTION accent — a risk signal\n// named in TEXT, never a status color (spec §5/§8). Both carry the visible focus ring + target-size\n// floor. Motion is the fast token transition, never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkActionVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)\",\n    \"text-label font-medium cursor-pointer\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      destructive: {\n        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token\n        true: \"bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border\",\n        // the default bulk action — the primary action accent\n        false: \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full grid width, in the muted\n// text color — an empty grid is NOT an error and never reads as one (no status color). Its copy says\n// why it is empty and what to do next, in plain words ending in a period (spec §4 Empty / voice).\nexport const dataGridEmptyClass =\n  \"px-(--space-3) py-(--space-6) text-center text-body text-text-muted\";\n\n// The off-screen-capable live region (spec §2 status-region / §7 4.1.3): announces the resolved row\n// count, sort + filter changes, and the selection count politely; a blocking row-load error\n// assertively. Always sr-only (it never paints — the visual state carries the same information for\n// sighted users), so it reaches assistive tech as TEXT, never color alone (1.4.1 / 4.1.3).\nexport const dataGridStatusRegionClass = \"sr-only\";\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n// you navigate one cell at a time (spec §1). It is a NEUTRAL data surface (spec §1/§3): neutrals\n// carry roughly 90% of it, and a dense grid earns its legibility from restraint. It paints from the\n// surface, text, and border roles; it reaches the --color-action-* tier only for the controls it\n// hosts (the sortable-header ghost accent, the row-hover affordance, the bulk-bar actions, and the\n// NEUTRAL selection accent) and the --color-status-* tier ONLY inside a cell that reports a real\n// state, paired with text — never as a row tint, a header fill, or the selection accent, and NEVER\n// a brand token as a status (brand != state, G-U2). Selection and the active cell are NEUTRAL action\n// states; a verified/trust state is a status cell (spec §3/§4/§8).\n\n// The scroll container <div role=\"grid\"> (spec §2 grid / §5). The neutral canvas surface and the\n// default cell text role, framed by the outer surface border at the md radius, with a fixed-height\n// scroll viewport (the caller sizes it via className — the token set has no grid-height scale, the\n// caller-owned-dimension precedent J). It NEVER wears the brand violet or a status fill (spec §3/§8)\n// — those belong to the controls and the status cells inside it. The active cell is kept scrolled\n// clear of the sticky header and pinned columns by scroll-margin (2.4.11 Focus Not Obscured).\nexport const dataGridVariants = cva([\n  \"relative w-full overflow-auto\",\n  \"bg-surface-canvas text-body text-text-primary\",\n  \"border border-surface-border rounded-(--radius-md)\",\n]);\n\nexport type DataGridVariantProps = VariantProps<typeof dataGridVariants>;\n\n// The inner table element. The grid is a real <table> for the row/column relationship (1.3.1),\n// border-collapsed so the gridlines read as single hairlines, and start-aligned so it mirrors under\n// dir=\"rtl\" (G-U6).\nexport const dataGridTableClass = \"w-full border-collapse text-start\";\n\n// The column-header row <tr> (spec §2 column-header-row / §4 Default / §5). It is STICKY — it stays\n// pinned to the top of the scroll viewport while rows scroll under it — on the raised neutral surface\n// with the sm elevation so it reads ABOVE the scrolling rows (spec §4/§5). z on the sticky layer so a\n// scrolled cell never paints over the pinned header. A header row NEVER wears a status or brand tint\n// (spec §3/§8).\nexport const dataGridHeaderRowClass =\n  \"sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm \" +\n  \"border-b border-border-default\";\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — any in-cell control keeps its own --size-target-* floor\n// (DEC-B: never a fixed height below the floor). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n} as const;\n\n// A data row <tr> (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained GHOST fill to track the eye across a wide row — an AFFORDANCE, never the sole carrier of\n// meaning, and never a selection (nothing is selected until you act, spec §4 Hover). SELECTED\n// (aria-selected): the NEUTRAL secondary-action selection accent — selection is a neutral action\n// state, NOT verified green and NOT the brand violet (selecting a row never implies it is verified;\n// brand != state, G-U2, spec §4/§8). Selection is encoded by the row checkbox + aria-selected, so a\n// grayscale reader reads it from the checkbox, not the fill (1.4.1). Motion is the fast token\n// transition on the verdify easing, instant under reduced motion — never the 350ms VerifiedBadge-only\n// theatre (a row hover/select is a plain transition, G-U3).\nexport const dataGridRowClass =\n  \"border-b border-border-default \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"aria-selected:bg-action-secondary-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// A data cell <td role=\"gridcell\"> (spec §2 cell, §4/§5). It is ONE focusable unit in the roving\n// grid: exactly one cell is the active cell (tabindex=0) and shows the visible 2px focus ring; every\n// other cell is tabindex=-1. The ring is part of the base and is NEVER removed (spec §4 Focus /\n// 2.4.7). scroll-margin keeps the active cell clear of the sticky header + pinned columns before it\n// takes focus (spec §7, 2.4.11 Focus Not Obscured). Default: the primary text color at the body type\n// role. A `mono` cell takes the monospace role and is isolated LTR so an identifier/key/timestamp\n// stays readable inside an RTL layout (spec §3/§5, G-U6). A `secondary` cell is de-emphasized\n// auxiliary text. A `status` cell carries the status fg paired with the cell's words — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2); status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// text, not a saturated fill.\nexport const dataGridCellVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-body text-text-primary\",\n    // the roving active cell's focus ring — always visible, never removed (2.4.7)\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      mono: {\n        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)\n        true: \"text-mono [direction:ltr]\",\n        false: \"\",\n      },\n      secondary: {\n        // de-emphasized secondary cell text (spec §5 --color-text-secondary)\n        true: \"text-text-secondary\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the words carry the meaning,\n        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-on-surface\",\n        signal: \"text-status-signal-on-surface\",\n        caution: \"text-status-caution-on-surface\",\n        critical: \"text-status-critical-on-surface\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      mono: false,\n      secondary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;\n\n// A column-header cell <th role=\"columnheader\"> (spec §2 column-header / §4/§5). The header LABEL is\n// the SECONDARY text color at the label type role (the quiet, tracked column label) on the raised\n// header surface — a header NEVER wears a status or brand tint (spec §3/§8). It is also a roving\n// active-cell target, so it carries the same focus ring + scroll-margin as a data cell.\nexport const dataGridColumnHeaderVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-label text-text-secondary\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;\n\n// The SORTABLE-header control (spec §2/§4 Sorted/§6/§7): a real <button> inside the columnheader, so\n// it reads as the control it is and toggles the sort on Enter. It is the GHOST action accent — the\n// label + caret in the ghost fg with the restrained ghost hover fill (spec §4 sortable-header hover /\n// §5) — the action tier is legitimate here because it is a control the grid HOSTS, not a header tint.\n// It carries the target-size floor (40px desktop / 44px touch, spec §7) and inherits the active\n// cell's focus ring from the columnheader. Motion is the fast token transition, never the deliberate\n// verified-check theatre (G-U3). aria-sort lives on the parent th, and the caret encodes direction\n// alongside it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const dataGridSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is also\n// encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on color\n// alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const dataGridSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The selection cell <td role=\"gridcell\"> and the select-all header cell (spec §2 selection-cell /\n// §5): the leading cell that holds the row's Checkbox, carrying the active-cell focus ring +\n// scroll-margin like any other cell. The checkbox is the committed Checkbox component (reused, not\n// re-rolled), which already binds the control surface + border tokens (spec §5) and the brand action\n// accent on the CHECKED box — a checked checkbox is the brand accent, never status-verified (G-U2):\n// selection is a neutral action state. This wrapper is just the cell padding + the roving focus ring.\nexport const dataGridSelectionCellClass =\n  \"px-(--space-3) align-middle text-start \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"scroll-mt-(--space-12) scroll-ms-(--space-12)\";\n\n// The bulk-action bar (spec §2 bulk-action-bar / §4/§5): a toolbar that appears when rows are\n// selected, on the raised neutral surface with the sm elevation and a hairline top border, holding\n// the selection actions + a clear-selection control. It is a NEUTRAL surface — the COLOR lives on the\n// action buttons it holds, never on the bar (spec §3/§8). Motion is the fast token transition (the\n// bar's appear/transition), never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkBarClass =\n  \"flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) \" +\n  \"bg-surface-raised border-t border-border-default \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The selected-count label in the bulk-action bar (spec §2): the secondary text at the label role —\n// the count of selected rows, in words, so selection is announced, never color alone (1.4.1 / 4.1.3).\nexport const dataGridBulkCountClass = \"text-label text-text-secondary\";\n\n// A bulk-action button (spec §2/§5): the PRIMARY selection action is the primary ACTION accent; a\n// `destructive` action (for example, revoke a key) is the destructive ACTION accent — a risk signal\n// named in TEXT, never a status color (spec §5/§8). Both carry the visible focus ring + target-size\n// floor. Motion is the fast token transition, never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkActionVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)\",\n    \"text-label font-medium cursor-pointer\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      destructive: {\n        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token\n        true: \"bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border\",\n        // the default bulk action — the primary action accent\n        false: \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full grid width, in the muted\n// text color — an empty grid is NOT an error and never reads as one (no status color). Its copy says\n// why it is empty and what to do next, in plain words ending in a period (spec §4 Empty / voice).\nexport const dataGridEmptyClass =\n  \"px-(--space-3) py-(--space-6) text-center text-body text-text-muted\";\n\n// The off-screen-capable live region (spec §2 status-region / §7 4.1.3): announces the resolved row\n// count, sort + filter changes, and the selection count politely; a blocking row-load error\n// assertively. Always sr-only (it never paints — the visual state carries the same information for\n// sighted users), so it reaches assistive tech as TEXT, never color alone (1.4.1 / 4.1.3).\nexport const dataGridStatusRegionClass = \"sr-only\";\n",
       "path": "data-grid/data-grid.variants.ts",
       "target": "@ui/data-grid/data-grid.variants.ts",
       "type": "registry:ui"

package/registry/init.json

@@ -4,7 +4,7 @@
     "@import \"@verdify/tokens/preset\"": {}
   },
   "dependencies": [
-    "@verdify/tokens@^0.6.0"
+    "@verdify/tokens@^0.8.0"
   ],
   "extends": "none",
   "files": [],