@devalok/shilp-sutra 0.52.0 → 0.54.0

package/dist/ui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: isChecked ? travel : 0 }}\n          whileTap={{ scale: 0.85 }}\n          transition={springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;CAC1D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;CAAG;CAChE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;AAC5D,GAGM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEM,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;AACX,GAUM,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,EAAK,GAC9E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;EAIlB,AAHI,MAAY,KAAA,KACd,EAAmB,CAAK,GAE1B,IAAkB,CAAK;CACzB,GACA,CAAC,GAAS,CAAe,CAC3B;CAEA,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,CACF;EACS;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,CACF;IACA,SAAS,EAAE,GAAG,IAAY,IAAS,EAAE;IACrC,UAAU,EAAE,OAAO,IAAK;IACxB,YAAY,EAAQ;cAEnB;GACU,CAAA;EACS,CAAA;CACH,CAAA;AAE3B,CAAC;AACD,EAAO,cAAA,EAAoC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const reduced = useReducedMotion()\n  // Thumb travels toward the inline-end — mirror it under RTL.\n  const isRtl =\n    typeof document !== 'undefined' &&\n    (document.dir === 'rtl' || document.documentElement.dir === 'rtl')\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: (isChecked ? travel : 0) * (isRtl ? -1 : 1) }}\n          whileTap={reduced ? undefined : { scale: 0.85 }}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;CAC1D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;CAAG;CAChE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;AAC5D,GAGM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEM,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;AACX,GAUM,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,EAAK,GAC9E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,IAAU,EAAiB,GAE3B,IACJ,OAAO,WAAa,QACnB,SAAS,QAAQ,SAAS,SAAS,gBAAgB,QAAQ,QACxD,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;EAIlB,AAHI,MAAY,KAAA,KACd,EAAmB,CAAK,GAE1B,IAAkB,CAAK;CACzB,GACA,CAAC,GAAS,CAAe,CAC3B;CAEA,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,CACF;EACS;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,CACF;IACA,SAAS,EAAE,IAAI,IAAY,IAAS,MAAM,IAAQ,KAAK,GAAG;IAC1D,UAAU,IAAU,KAAA,IAAY,EAAE,OAAO,IAAK;IAC9C,YAAY,IAAU,EAAE,UAAU,EAAE,IAAI,EAAQ;cAE/C;GACU,CAAA;EACS,CAAA;CACH,CAAA;AAE3B,CAAC;AACD,EAAO,cAAA,EAAoC"}

package/dist/ui/table.js

@@ -35,7 +35,7 @@ var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tfoot", {
 s.displayName = "TableFooter";
 var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tr", {
 	ref: i,
-	className: e("group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4", "has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2", t),
+	className: e("group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1", "has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2", t),
 	...r
 }));
 c.displayName = "TableRow";

package/dist/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,6KACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}
+{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,uQACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}

package/docs/components/composed/bulk-action-bar.md

@@ -9,14 +9,20 @@
     count: number (number of selected items — displayed in badge)
     onClearSelection: () => void
     actions: BulkActionBarAction[]
+    totalCount: number (optional — total selectable items; enables "Select all")
+    onSelectAll: () => void (optional — called by the "Select all" control)
     className: string
+    ...div attributes (forwardRef to the toolbar div; HTMLAttributes spread)
 
 ### BulkActionBarAction
     label: string
-    icon: ComponentType<{ className?: string }> (optional icon component)
+    icon: IconInput (optional — any icon component or element)
     onClick: () => void
-    color: "default" | "error"
-    disabled: boolean
+    color: "accent" | "error" | "success" | "warning" | "info" | "neutral" (default: "accent")
+    disabled: boolean (optional)
+    loading: boolean (optional — pending spinner on the action)
+    requiresConfirmation: boolean (optional — inline confirm before executing)
+    confirmMessage: string (optional — default "Are you sure?")
 
 ## Defaults
     (no optional props with defaults)

package/docs/components/composed/error-boundary.md

@@ -5,11 +5,27 @@
 - Category: composed
 
 ## Props
+
+### ErrorDisplay (the rendered UI — forwardRef<HTMLDivElement>, spreads div attrs)
     error: unknown (REQUIRED — Error object, status object, or string)
-    onReset: () => void (optional retry button)
+    onReset: () => void (optional — renders a "Try Again" button)
+    actions: ReactNode (optional — custom recovery actions; replaces the default button)
+    fullPage: boolean (default: true — center in a min-h-[60vh] region; false = inline)
+    autoFocusReset: boolean (default: false — focus the recovery button on mount)
+
+Note: the raw `error.message` is shown ONLY in development. In production, ErrorDisplay
+shows the friendly status-mapped copy (404/403/500/default); the real message stays in
+the dev-only stack-trace block.
+
+### ErrorBoundary (class boundary — wrap a subtree)
+    children: ReactNode (REQUIRED)
+    onReset: () => void (optional — called after the boundary resets)
+    onError: (error: unknown, info: React.ErrorInfo) => void (optional — wire Sentry/logging)
+    resetKeys: unknown[] (optional — auto-reset when any value changes; react-error-boundary parity)
+    fallback: (props: { error: unknown; onReset: () => void }) => ReactNode (optional — defaults to ErrorDisplay)
 
 ## Defaults
-    None
+    fullPage: true
 
 ## Example
 ```jsx

package/docs/components/composed/master-detail.md

@@ -10,13 +10,23 @@ MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListIt
 ## Props
 
 ### MasterDetail (root)
-    selected: string | null (ID of currently selected item; null = show list on mobile)
+    selected: string | null (CONTROLLED selected item id; omit for uncontrolled)
+    defaultSelected: string | null (uncontrolled initial selection)
+    onSelect: (value: string) => void (called with a row's `value` when chosen)
+    label: string (accessible name for the listbox; default "Items")
     onBack: () => void (called when mobile back button is pressed)
     masterWidth: string (master panel width on desktop)
     breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
+    emptyState: ReactNode (shown in the detail pane when nothing is selected)
+    onNavigate: (direction: "up" | "down") => void
+
+Selection can be controlled (`selected`) or owned by the component
+(`defaultSelected` + `onSelect`). With `value` on each ListItem, `active` /
+`aria-selected` derive automatically — no need to hand-wire `active` + `onClick`.
 
 ### MasterDetail.ListItem
-    active: boolean (highlights the item)
+    value: string (row id — enables derived selection + auto-fires onSelect on activate)
+    active: boolean (explicit highlight; omit to derive from value === selected)
     (extends ButtonHTMLAttributes)
 
 ## Defaults

package/docs/components/composed/page-skeletons.md

@@ -22,12 +22,12 @@ Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
 ## Composability
 - **Full-page skeleton layouts** for route-level loading states. Each mimics a common page shape (dashboard tiles, project list with filters, task detail with sidebar).
 - **Server-safe** — use in Next.js app router `loading.tsx` files for instant route-transition feedback while data streams.
-- **Built on LoadingSkeleton + ui/Skeleton** — these just assemble the pre-built regional skeletons into page-shaped layouts.
+- **Assembled from `ui/Skeleton`** — these compose the base `Skeleton` primitive directly into page-shaped layouts (they do NOT wrap the `LoadingSkeleton` regional exports). Each root is a `role="status"` / `aria-busy` region with an sr-only label.
 - **When to use which skeleton tier:**
   - `<Skeleton>` (ui) — single shape for a single element
   - `<CardSkeleton>` / `<TableSkeleton>` (LoadingSkeleton) — individual region shape
   - `<DashboardSkeleton>` / etc. (PageSkeletons) — full page placeholder
-- **Fixed layout structure** — the className prop adjusts the outer container, but internal layout isn't customizable. For custom page skeletons, compose LoadingSkeleton pieces yourself.
+- **Fixed layout structure** — the className prop adjusts the outer container, but internal layout isn't customizable. For custom page skeletons, compose `ui/Skeleton` (or the `LoadingSkeleton` regional exports) yourself.
 
 ## Gotchas
 - Server-safe: can be imported directly in Next.js Server Components

package/docs/components/composed/priority-indicator.md

@@ -1,37 +1,48 @@
 # PriorityIndicator
 
 - Import: @devalok/shilp-sutra/composed/priority-indicator
-- Server-safe: Yes
+- Server-safe: No
 - Category: composed
 
 ## Props
     priority: Priority
-    display: "compact" | "full" (default: "full")
+    iconOnly?: boolean (icon-only chip, no visible text)
+    display?: "compact" | "full" (@deprecated — use iconOnly)
+    children?: ReactNode (override the label, e.g. i18n)
 
 Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'
 
 ## Defaults
-    display="full"
+    iconOnly: false
 
 ## Example
 ```jsx
 <PriorityIndicator priority="HIGH" />
-<PriorityIndicator priority="low" display="compact" />
+<PriorityIndicator priority="low" iconOnly />
+<PriorityIndicator priority="URGENT">Critical</PriorityIndicator>
 ```
 
 ## Composability
-- **Server-safe priority label** — icon + color + text for task / issue priority.
+- **Composes `Badge`** — radius, color semantics, a11y labelling, and reduced-motion handling all come from one place (no bespoke re-roll).
 - **Composes inside list rows, DataTable cells, Card headers, task panels** — anywhere a priority flag fits.
-- **display="compact"** shows only the icon (with priority text as title attribute for tooltip). Use in tight cells; use `display="full"` (default) in free space.
-- **Case-insensitive priority** — accepts both UPPERCASE (LOW/MEDIUM/HIGH/URGENT) and lowercase. Designed to match both backend conventions without manual coercion.
-- Color semantics: LOW=success, MEDIUM=warning, HIGH=error, URGENT=error with bolder icon.
+- **`iconOnly`** shows only the icon with a real accessible name (`role="img"` + `aria-label`), for tight cells. Omit it (default) for icon + label.
+- **Severity by weight, not motion** — URGENT renders as a solid fill so the top tier reads at a glance; the others are soft. No animation (removes the prior perpetual pulse).
+- **Case-insensitive priority** — accepts both UPPERCASE and lowercase; unknown values fall back to MEDIUM instead of throwing.
+- **`children`** overrides the label for i18n / custom copy.
+- Color semantics: LOW = slate (neutral), MEDIUM = warning, HIGH = error (soft), URGENT = error (solid).
 
 ## Gotchas
-- Case-insensitive — "low" and "LOW" both work
-- Server-safe: can be imported directly in Next.js Server Components
-- `compact` display shows only the icon; `full` shows icon + text label
+- Case-insensitive — "low" and "LOW" both work; unknown values fall back to MEDIUM
+- `iconOnly` shows only the icon (accessible-named); default shows icon + text label
+- `display` is deprecated — use `iconOnly`
 
 ## Changes
+### v0.53.0
+- **Changed** Recomposed on the `Badge` primitive (was a bespoke re-rolled chip): inherits pill radius, color semantics, accessible labelling.
+- **Changed** URGENT is now a solid static fill; the perpetual scale-pulse is removed (was unguarded infinite motion, WCAG 2.2.2). Severity reads without animation.
+- **Added** `iconOnly` (replaces deprecated `display`) and `children` (label override for i18n).
+- **Fixed** Icon-only chip now has a real accessible name (`role="img"` + `aria-label`), not a mouse-only `title`. Unknown priority no longer throws.
+
 ### v0.2.0
 - **Added** Identified as server-safe component
 

package/docs/components/composed/rich-chat-input.md

@@ -9,19 +9,24 @@ Compact rich text chat input for unified human+AI workspaces. Built on TipTap.
 ## Props
 
 ### RichChatInputProps
-    onSubmit: (html: string, plainText: string) => void (REQUIRED)
+    onSubmit: (message: RichChatInputMessage) => void (REQUIRED)
     placeholder: string (default: "Type a message...")
     disabled: boolean (default: false)
-    variant: 'compact' | 'expanded' | 'minimal' (default: 'compact')
-    maxRows: number
+    content: string — initial HTML (not reactive; use for message editing)
+    variant: 'compact' | 'expanded' | 'minimal' | 'inline' (default: 'compact')
     enterBehavior: 'send' | 'newline' (default: 'send')
     maxLength: number — enables character counter
+    charCountDisplay: 'always' | 'focus' | 'near-limit' | 'hidden' (default: 'near-limit')
     mentions: MentionItem[] — static list for @mention autocomplete
     onMentionSearch: (query: string) => Promise<MentionItem[]> — async search
     onMentionSelect: (item: MentionItem) => void
     onFileUpload: (file: File) => Promise<{ url: string; name: string; size: number }>
     onImageUpload: (file: File) => Promise<string>
     slashCommands: SlashCommandGroup[] — enables / command palette
+    onVoiceRecord: (audio: Blob, duration: number) => void
+    onTranscribe: (blob: Blob, duration: number) => Promise<string | null> — transcribe after recording; return null to attach as a voice note
+    maxDuration: number — max voice-recording seconds
+    replyTo: { id: string; author: string; preview: string; onDismiss: () => void } — reply banner above the input
     onTyping: (isTyping: boolean) => void — typing indicator callback
     onEmpty: (isEmpty: boolean) => void
     isStreaming: boolean (default: false) — shows stop button instead of send
@@ -29,9 +34,15 @@ Compact rich text chat input for unified human+AI workspaces. Built on TipTap.
     leadingSlot: ReactNode — rendered above the editor
     trailingSlot: ReactNode — rendered below the toolbar
     disclaimer: string — small text below the input
-    toolbar: boolean | ChatToolbarItem[] (default: true)
+    toolbar: boolean | ChatToolbarItem[] | ReactNode (default: true) — true = default toolbar, array = whitelist, ReactNode = custom, false = hidden
+    actionButton: ReactNode | false — custom left-side button (replaces the default attach button; false hides it)
+    emojiSet: 'native' | 'apple' | 'google' | 'twitter' | 'facebook' (default: 'native')
+    onSchedule: (message: RichChatInputMessage, scheduledAt: Date) => void — if set, a schedule button appears next to send
+    sendOptions: Array<{ label: string; icon?: ComponentType<{ className?: string }>; onSelect: () => void }> — split-send dropdown options
 
-ChatToolbarItem: 'bold' | 'italic' | 'underline' | 'strike' | 'highlight' | 'code' | 'bulletList' | 'orderedList' | 'mention' | 'emoji' | 'attach' | 'slash'
+RichChatInputMessage: { html: string; plainText: string; attachments?: Array<{ url: string; name: string; size: number; type: string }>; voiceNote?: { blob: Blob; duration: number } }
+
+ChatToolbarItem: 'bold' | 'italic' | 'underline' | 'strike' | 'highlight' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'link' | 'mention' | 'emoji' | 'slash'
 
 MentionItem: { id: string; label: string; avatar?: string }
 
@@ -43,11 +54,12 @@ SlashCommandGroup: { label: string; commands: SlashCommand[] }
 - `compact` (default) — 2-3 lines, inline toolbar
 - `expanded` — 5+ lines, always-visible toolbar, suited for AI prompts
 - `minimal` — single line, toolbar appears on focus
+- `inline` — 40px min-height, no toolbar; for tight inline composers
 
 ## Example
 ```jsx
 <RichChatInput
-  onSubmit={(html, text) => sendMessage(html)}
+  onSubmit={(message) => sendMessage(message.html)}
   mentions={teamMembers}
   onFileUpload={uploadFile}
   slashCommands={[{ label: 'Actions', commands: [...] }]}

package/docs/components/composed/schedule-view.md

@@ -10,14 +10,19 @@
     events: ScheduleEvent[] (REQUIRED) — { id, title, start: Date, end: Date, color? }
     onEventClick?: (event: ScheduleEvent) => void
     onSlotClick?: (start: Date, end: Date) => void
-    startHour: number (default: 8)
-    endHour: number (default: 18, exclusive)
-    slotDuration: number (minutes, default: 30)
+    startHour?: number (default: 8)
+    endHour?: number (default: 18, exclusive)
+    slotDuration?: number (minutes, default: 30)
+    selectedEventId?: string (rings the active event)
+    renderEvent?: (event) => ReactNode (custom event body)
+    header?: ReactNode (toolbar slot above the grid)
+    emptyState?: ReactNode (shown when events is empty)
+    height?: number | string (grid body height, default 480)
 
 Event colors: "accent" | "success" | "warning" | "error" | "info" | "neutral"
 
 ## Defaults
-    startHour=8, endHour=18, slotDuration=30
+    startHour=8, endHour=18, slotDuration=30, height=480
 
 ## Example
 ```jsx
@@ -32,7 +37,12 @@ Event colors: "accent" | "success" | "warning" | "error" | "info" | "neutral"
 ## Composability
 - **Day / Week calendar view** for time-block display (meetings, shifts, availability). Not a full calendar app — no month view, no drag-to-create.
 - **Event data is consumer-owned:** You pass `events` as an array; ScheduleView doesn't fetch, doesn't cache, doesn't expand recurring events. All scheduling logic lives in your app.
-- **Event click + slot click** — `onEventClick` for existing events; `onSlotClick` for creating new events (fires with start/end of the empty slot).
+- **Event click + slot click** — `onEventClick` for existing events; `onSlotClick` for creating new events (fires with start/end of the empty slot). **Slots are only interactive (focusable + keyboard-navigable) when `onSlotClick` is set** — otherwise they render as inert grid lines, so a read-only schedule adds no keyboard/AT tab stops.
+- **Keyboard (interactive slots):** roving tabindex — Arrow keys move between slots (up/down within a day, left/right across days, RTL-aware), Home/End jump within the day; only one slot is in the tab order at a time.
+- **Overlapping events** are partitioned into side-by-side columns automatically so double-booked times stay legible.
+- **Live now-line** ticks every minute and scrolls into view on mount.
+- **`renderEvent`** customizes the event block body; **`header`** adds a toolbar; **`selectedEventId`** rings the active event; **`emptyState`** shows when there are no events.
+- **Composes the DS card shell tokens** (`surface-2` + `rounded-surface` + border) and is RTL-safe (logical properties throughout).
 - **Color vocabulary matches the DS** — `accent/success/warning/error/info/neutral`. Map your event types to these at the data layer.
 - **endHour is exclusive:** `endHour=18` means the last visible slot starts at 17:30 (with 30min slots). Match your UX expectation: 9-5 typically means `startHour=9, endHour=18`.
 - **Pairs with date-picker/composed** — use DatePicker or DateRangePicker to choose which date to show; pass that as ScheduleView's `date`.
@@ -43,6 +53,11 @@ Event colors: "accent" | "success" | "warning" | "error" | "info" | "neutral"
 - Events that span outside `startHour`/`endHour` may be clipped
 
 ## Changes
+### v0.53.0
+- **Changed** Read-only schedules no longer flood the tab order — slots are interactive only when `onSlotClick` is set; otherwise inert grid lines. Interactive slots use roving tabindex + Arrow/Home/End keyboard navigation (RTL-aware).
+- **Changed** Overlapping events now lay out in side-by-side columns instead of stacking illegibly. The now-line ticks live (per-minute) and scrolls into view; shell uses the `surface-2` card tier (fixed the prior `surface-raised` + dead-`border-card-strong` regression); layout uses logical (RTL-safe) properties; magic-number sizes tokenized.
+- **Added** `selectedEventId`, `renderEvent`, `header`, `emptyState`, and `height` props.
+
 ### v0.49.0
 - **BREAKING** `ScheduleEvent.color` value `"primary"` renamed `"accent"` (DS colour vocabulary). It was the default, so untyped events are unaffected.
 - **Added** keyboard focus rings on slot cells + event blocks; current-time indicator uses the shared `<Dot>`.

package/docs/components/composed/simple-tooltip.md

@@ -24,7 +24,7 @@
 ## Composability
 - **One-liner Tooltip** — wraps TooltipProvider + Tooltip + TooltipTrigger + TooltipContent so consumers don't have to manually compose them for a simple label.
 - **When to use:** 90% of tooltip use cases (icon-only button labels, abbreviated text expansions, secondary info). Use the ui/Tooltip compound for advanced cases (controlled open, nested triggers, custom animations).
-- **Auto-provides its own TooltipProvider** — safe to drop anywhere. You can still wrap a broader TooltipProvider at layout level for shared `delayDuration`; SimpleTooltip respects it if present.
+- **Always mounts its own TooltipProvider** — safe to drop anywhere. Note it does NOT inherit an ancestor `TooltipProvider`'s `delayDuration`; its own `delayDuration` prop (default 300ms) always wins. Set it per-tooltip via the prop.
 - **Content must be inert** — same rule as ui/Tooltip. For interactive popped content, use Popover or HoverCard.
 - **Pairs with IconButton** — the canonical pattern for labeled icon buttons.
 

package/docs/components/shell/app-command-palette.md

@@ -23,7 +23,7 @@ AppCommandPaletteUser: { name: string, role?: string }
 ## Example
 ```jsx
 <AppCommandPalette
-  user={{ name: 'John', role: 'admin' }}
+  user={{ name: 'John', role: 'Admin' }}
   isAdmin={true}
   onNavigate={(path) => router.push(path)}
   searchResults={results}
@@ -42,6 +42,7 @@ AppCommandPaletteUser: { name: string, role?: string }
 ## Gotchas
 - Uses CommandRegistry context for page navigation items (see CommandRegistryProvider)
 - `isAdmin` takes precedence over `user.role` for showing admin command groups
+- **Role detection is case-sensitive:** `user.role` only auto-enables admin groups when it is exactly `'Admin'` or `'SuperAdmin'`. `'admin'` (lowercase) silently shows nothing — pass `isAdmin` explicitly if your role strings differ.
 - Should be placed at the app root level, typically alongside TopBar
 
 ## Changes

package/docs/components/shell/bottom-navbar.md

@@ -6,16 +6,23 @@
 
 ## Props
     currentPath?: string (optional)
-    user?: BottomNavbarUser | null (optional)
+    user?: BottomNavbarUser | null (drives per-item role gating, optional)
     primaryItems?: BottomNavItem[] (max 4 recommended, optional)
-    moreItems?: BottomNavItem[] (overflow items in "More" menu, optional)
+    moreItems?: BottomNavItem[] (overflow items in "More" sheet, optional)
+    indicator?: 'pill' | 'underline' | 'tint' | 'none' (active-item indicator; default 'pill')
+    labelVisibility?: 'always' | 'selected'
     className?: string
 
-BottomNavItem: { title: string, href: string, icon: ReactNode, exact?: boolean, badge?: number }
+BottomNavItem: { title: string, href: string, icon: IconInput, activeIcon?: IconInput, exact?: boolean, badge?: number, roles?: string[], canView?: (user: BottomNavbarUser | null) => boolean }
 BottomNavbarUser: { name: string, role?: string }
 
 ## Defaults
-    None
+    currentPath: '/'
+    user: null
+    primaryItems: []
+    moreItems: []
+    indicator: 'pill'
+    labelVisibility: 'always'
 
 ## Example
 ```jsx
@@ -29,24 +36,36 @@ BottomNavbarUser: { name: string, role?: string }
 ```
 
 ## Composability
-- **Mobile-only bottom nav** — fixed to bottom of viewport. Desktop should use AppSidebar instead.
-- **Responsive switch pattern:** Use `useIsMobile()` hook to conditionally render AppSidebar (desktop) or BottomNavbar (mobile). Example:
+- **Mobile-only bottom nav** — fixed to bottom of viewport. Desktop should use Sidebar instead.
+- **Responsive switch pattern:** Use `useIsMobile()` hook to conditionally render Sidebar (desktop) or BottomNavbar (mobile). Example:
   ```jsx
   const isMobile = useIsMobile()
-  return isMobile ? <BottomNavbar ... /> : <AppSidebar ... />
+  return isMobile ? <BottomNavbar ... /> : <Sidebar ... />
   ```
 - **Primary vs overflow:** `primaryItems` (max 4) for the always-visible slots; `moreItems` go into a "More" sheet that opens on tap. Don't exceed 4 primary — the bar becomes cramped.
 - **Router integration via LinkProvider:** Each nav item is rendered using the framework-specific Link component registered in LinkProvider. Without LinkProvider, you get full-page reloads on tap.
-- **Badge numbers** cap at 99+ (same as BadgeIndicator pattern).
+- **Badge numbers** cap at 99+ (composes the `Badge` primitive).
+- **Role gating:** each item may declare `roles: string[]` (shown only when `user.role` matches) or a `canView(user)` predicate for arbitrary logic (`canView` wins). Items with neither are always visible. Gating applies to both `primaryItems` and `moreItems`.
+- **Overflow sheet:** the "More" surface is the DS `Sheet` (`side="bottom"`) — it inherits focus trap, scroll lock, return-focus, and `aria-modal`; the trigger is wired with `aria-haspopup`/`aria-controls` automatically.
+- **Indicator (animated):** the active indicator slides to the selected item (shared-element `layoutId`) and fades in on first appearance. Modes: `pill` (default, Material-3 tonal pill behind the icon), `underline` (top accent bar), `tint` (subtle bg on the whole active cell), `none` (no shape — pair with `activeIcon` for the iOS filled-icon look). `labelVisibility="selected"` shows labels only for the active item.
+- **Filled-when-active:** set `activeIcon` on an item (e.g. a Tabler `*Filled` variant) to swap the icon for a filled version while it's the active route; falls back to `icon`.
 - **Not for desktop:** The viewport-fixed positioning + touch-optimized sizing don't translate well to desktop. Hide behind `md:hidden`.
 
 ## Gotchas
 - Designed for mobile viewports — fixed to bottom of screen
 - Max 4 `primaryItems` recommended; overflow goes in `moreItems` shown in a "More" sheet
-- Use with `useIsMobile()` hook to conditionally render instead of AppSidebar
+- Use with `useIsMobile()` hook to conditionally render instead of Sidebar
 - Requires LinkProvider for framework-specific link components (e.g., Next.js Link)
 
 ## Changes
+### v0.53.0
+- **Changed** Overflow "More" menu re-founded on the DS `Sheet` primitive — inherits focus trap, scroll lock, return-focus, `aria-modal`, and trigger↔panel ARIA wiring (was a hand-rolled `role="dialog"` with none of these). Composes `Badge` for notification counts and the Sheet's built-in close (≥ touch target).
+- **Added** Per-item role gating: `roles?: string[]` and `canView?: (user) => boolean` on `BottomNavItem`. The previously-inert `user` prop now drives it.
+- **Added** `activeIcon` per item — a filled/alternate icon shown while active (falls back to `icon`). Tightened the icon lozenge padding so icon-only items read less airy.
+- **Added** `indicator` (default **`pill`** — Material-3; plus `underline`, `tint`, `none`) and `labelVisibility` ('always' | 'selected'). The active indicator animates (slides) between items via a shared-element `layoutId`.
+- **Added** Label truncation + logical (RTL-safe) properties; overflow grid adapts to item count.
+- **Fixed** Notification badge `zoom-in` animation now reduced-motion gated.
+
 ### v0.19.0
 - **Changed** Background elevated from `bg-surface-1` to `bg-surface-2` for visual hierarchy above app background
 - **Changed** "More" menu and interactive items bumped accordingly

package/docs/components/shell/command-registry.md

@@ -13,7 +13,7 @@ Exports: CommandRegistryProvider, useCommandRegistry
     registry: CommandRegistry (REQUIRED)
 
 CommandRegistry: { pages: CommandPageItem[], adminPages: CommandPageItem[] }
-CommandPageItem: { id: string, label: string, icon: ReactNode, path: string, keywords?: string[] }
+CommandPageItem: { id: string, label: string, icon: IconInput, path: string, keywords?: string[] }
 
 ### useCommandRegistry hook
     Returns: CommandRegistry | null
@@ -41,7 +41,7 @@ CommandPageItem: { id: string, label: string, icon: ReactNode, path: string, key
 ## Composability
 - **Context provider for AppCommandPalette.** Registers page-level navigation items that the command palette surfaces as commands.
 - **Place at app root** — wrap both AppCommandPalette and the rest of the app inside `<CommandRegistryProvider>`. Positioning matters: any AppCommandPalette outside the provider gets `useCommandRegistry() === null` and falls back to minimal functionality.
-- **Separation of pages vs adminPages** — the palette filters based on user role / `isAdmin` flag. Keep admin-only routes in the adminPages array to avoid leaking them to regular users.
+- **Separation of pages vs adminPages** — this is an ORGANIZATIONAL split, not access control. The component does NOT enforce anything: YOU populate `adminPages` conditionally (e.g. only when the signed-in user is an admin). Anything you put in `adminPages` is still shipped to the client — do real authorization on the server, not here.
 - **useCommandRegistry()** is the consumer hook — returns the full registry or null. Use in your own command-aware components (e.g. a Spotlight-style keyboard-search embed elsewhere in the app).
 - **Works with LinkProvider** — CommandPaletteItems navigate via `onNavigate` prop on AppCommandPalette, which routes to your framework's Link component.
 

package/docs/components/shell/link-context.md

@@ -23,13 +23,13 @@ Exports: LinkProvider, useLink
 import Link from 'next/link'
 
 <LinkProvider component={Link}>
-  <AppSidebar ... />
+  <Sidebar ... />
   <BottomNavbar ... />
 </LinkProvider>
 ```
 
 ## Composability
-- **The framework router bridge for all shell components.** Without LinkProvider, AppSidebar / BottomNavbar / TopBar.UserMenu / AppCommandPalette render plain `<a>` tags — that means full page reloads instead of client-side navigation.
+- **The framework router bridge for all shell components.** Without LinkProvider, Sidebar / BottomNavbar / TopBar.UserMenu / AppCommandPalette render plain `<a>` tags — that means full page reloads instead of client-side navigation.
 - **Required setup:**
   ```tsx
   // Next.js

package/docs/components/shell/top-bar.md

@@ -120,7 +120,7 @@ UserMenuItem fields:
 - **NotificationCenter lives inside TopBar.Right** — it's a complete bell+popover component. Drop it in a TopBar.Section next to other icon buttons.
 - **UserMenu is composable:** `userMenuItems` inserts custom items between the built-in Profile and the color-mode toggle. Each item can navigate (href), run an action (onClick), or show a separator/badge/color decoration.
 - **Responsive hiding:** Actions that shouldn't appear on mobile use `className="hidden md:flex"` on the IconButton — the component doesn't enforce mobile hiding; that's layout responsibility.
-- **Pairs with AppSidebar** — desktop app shell is typically `<TopBar>` + `<AppSidebar>` + main content region.
+- **Pairs with Sidebar** — desktop app shell is typically `<TopBar>` + `<Sidebar>` + main content region.
 
 ## Gotchas
 - Without `TopBar.Center`, layout is flex (two-zone). With it, layout switches to CSS grid `1fr auto 1fr` for true centering.

package/docs/components/ui/autocomplete.md

@@ -6,16 +6,23 @@
 
 ## Props
     options: AutocompleteOption[] (REQUIRED) — { value: string, label: string }
-    value: AutocompleteOption | null
+    value?: AutocompleteOption | null (controlled)
+    defaultValue?: AutocompleteOption | null (uncontrolled initial)
     onValueChange?: (option: AutocompleteOption) => void
-    placeholder: string
-    emptyText: string (default: "No options")
-    disabled: boolean
-    className: string
-    id: string
+    placeholder?: string
+    emptyText?: string (default: "No options")
+    disabled?: boolean
+    size?: (forwarded to Input)
+    state?: 'default' | 'error' | 'warning' | 'success' (forwarded to Input)
+    isLoading?: boolean
+    loadingText?: string (default: "Loading…")
+    renderOption?: (option, query) => ReactNode
+    className?: string
+    id?: string
 
 ## Defaults
     emptyText="No options"
+    loadingText="Loading…"
 
 ## Example
 ```jsx
@@ -28,17 +35,26 @@
 ```
 
 ## Composability
-- **Autocomplete vs Combobox:** Autocomplete allows free-text input (users can type anything); Combobox enforces selection from the list. Pick by whether "off-list" values are valid (e.g. city field that accepts typos → Autocomplete; tag picker from a fixed vocabulary → Combobox).
-- **Value shape is an object** (`{ value, label }`), not a plain string — this preserves label/value decoupling for display-vs-storage.
-- **FormField:** Does NOT auto-consume FormField state. Set explicit error styling via className if needed.
+- **Composes `Input`** — the field is the DS `Input`, so it inherits `size`, error/`state` painting, read-only, hover, and FormField wiring. Autocomplete owns only the dropdown + behavior.
+- **Autocomplete vs Combobox:** Autocomplete allows free-text input (users can type anything); Combobox enforces selection from the list.
+- **Value shape is an object** (`{ value, label }`), not a plain string. Controlled via `value`, or uncontrolled via `defaultValue`.
+- **FormField:** auto-consumes FormField state (via the composed Input) — inside a FormField, error border + `aria-invalid`/`aria-describedby`/`required` are wired automatically. Pass `state` to override.
+- **Async / "type to search":** set `isLoading` to show a spinner (in the field + the listbox) with `loadingText`.
+- **Matched-text highlight:** the query substring is bolded in each option by default; override the whole row with `renderOption`.
 - **Portal rendering:** Dropdown portals to body with z-popover (1400) — stacks above Dialog/Sheet.
-- **Keyboard:** ArrowDown/Up navigate suggestions, Enter selects, Esc closes. Typeahead is the input's native filtering.
+- **Keyboard:** ArrowDown/Up/Home/End navigate, Enter selects, Esc closes.
 
 ## Gotchas
 - Allows free-text input (no forced selection) — use Combobox for forced selection
 - value is an object { value, label }, NOT just a string
+- Client-side filtering only (known list). For huge/remote lists, drive `options` yourself with `isLoading` — no built-in virtualization.
 
 ## Changes
+### v0.53.0
+- **Changed** Re-parented onto the DS `Input` primitive — inherits `size`, error/`state` painting, read-only, hover, and FormField auto-consumption (previously re-rolled its own `<input>` and read FormField error but never painted it).
+- **Added** `defaultValue` (uncontrolled), `size`, `state`, `isLoading`/`loadingText` (async), `renderOption`, and matched-substring highlighting.
+- **Fixed** Doc corrected — it DOES auto-consume FormField (via Input). Dropped a keystroke-frequency stagger animation + a dead effect.
+
 ### v0.18.0
 - **Fixed** Added `useEffect` to sync query when external value changes
 

package/docs/components/ui/search-input.md

@@ -5,7 +5,7 @@
 - Category: ui
 
 ## Props
-    size: "sm" | "md" | "lg"
+    size: "xs" | "sm" | "md" | "lg"
     loading: boolean (shows spinner instead of clear button)
     onClear: () => void (shows X button when value is non-empty)
     value: string
@@ -31,7 +31,7 @@
 - **`onClear` makes the X button appear** only when `value` is non-empty. Pair them so users can reset.
 - **`loading={true}` swaps the clear button for a spinner** with `aria-busy="true"` on the input — useful for debounced/async search.
 - Doesn't auto-consume FormField (no `state` prop) — wrap a regular Input inside FormField for validated search fields.
-- Keyboard: Escape auto-triggers `onClear` when wired (handled via `type="search"`'s native behavior on most browsers).
+- Keyboard: Escape is NOT wired to clear (the input is not `type="search"`). Reset via the X button, or handle Escape yourself and call your `value` setter.
 
 ## Gotchas
 - HTML native "size" attribute is excluded — use CSS width instead