@lerianstudio/sindarian-ui 1.4.0-beta.2 → 1.4.0-beta.4

package/dist/esm/enterprise/status-badge/index.js

@@ -112,5 +112,5 @@ export function StatusBadge({ status, label, variantMap, withIcon = false, unkno
     // The glyph follows the resolved variant; an unknown/non-severity variant has
     // no cue, so the badge gracefully renders label-only even with withIcon set.
     const cue = withIcon ? SEVERITY_CUE[variant] : undefined;
-    return (_jsxs(Badge, { variant: variant, className: cn('gap-1', className), children: [cue ? (_jsxs(_Fragment, { children: [_jsx(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsxs("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
+    return (_jsxs(Badge, { variant: variant, className: className, children: [cue ? (_jsxs(_Fragment, { children: [_jsx(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsxs("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
 }

package/dist/esm/enterprise/virtualized-table/index.d.ts

@@ -1,6 +1,16 @@
 import { type ColumnDef } from '@tanstack/react-table';
 export type VirtualizedTableProps<TData> = {
-    /** Same shape as DataTable: standard TanStack `ColumnDef<T>`. */
+    /**
+     * Same shape as DataTable: standard TanStack `ColumnDef<T>`. A column that
+     * declares none keeps its equal share of the row.
+     *
+     * Declared sizing does NOT mean the same thing in the kit's two table paths.
+     * Here, flex rows PIN all three: `size`, `minSize` and `maxSize` are honoured
+     * exactly as declared. DataTable renders real `<th>`/`<td>` under CSS auto
+     * table layout, where `size` is only a PREFERRED width, `minSize` a floor,
+     * and `maxSize` is ignored outright. A column that must not grow past a width
+     * belongs here.
+     */
     columns: ColumnDef<TData, unknown>[];
     /** The full dataset, already in memory. Only the visible window renders. */
     data: TData[];
@@ -21,6 +31,12 @@ export type VirtualizedTableProps<TData> = {
     scrollAreaLabel?: string;
     /** Applied to the outer wrapper (the scroll container's parent). */
     className?: string;
+    /**
+     * Extra classes merged onto every header cell, after the kit label voice —
+     * the same seam DataTable exposes, so a screen that switches between the two
+     * render paths quiets both column heads with one prop instead of one.
+     */
+    headClassName?: string;
 };
-export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className }: VirtualizedTableProps<TData>): import("react").JSX.Element;
+export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className, headClassName }: VirtualizedTableProps<TData>): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/virtualized-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/virtualized-table/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAA;AAK9B,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI;IACzC,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,4EAA4E;IAC5E,IAAI,EAAE,KAAK,EAAE,CAAA;IACb;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,SAAc,EACd,SAAe,EACf,eAAyC,EACzC,SAAS,EACV,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAiM9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/virtualized-table/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAA;AAW9B,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI;IACzC;;;;;;;;;;OAUG;IACH,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,4EAA4E;IAC5E,IAAI,EAAE,KAAK,EAAE,CAAA;IACb;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,SAAc,EACd,SAAe,EACf,eAAyC,EACzC,SAAS,EACT,aAAa,EACd,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAkO9B"}

package/dist/esm/enterprise/virtualized-table/index.js

@@ -31,10 +31,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
 import { cn } from '../../lib/utils.js';
+import { readDeclaredColumnSize, readDeclaredGroupSize, UNSIZED_DEFAULT_COLUMN } from '../data-table/column-size.js';
 /** Rows rendered just outside the viewport to keep fast scrolls smooth. */
 const OVERSCAN = 8;
-export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className }) {
+export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className, headClassName }) {
     const scrollRef = useRef(null);
     const [isScrollable, setIsScrollable] = useState(false);
     // A number is px; a string is used verbatim (e.g. '60vh').
@@ -42,6 +44,10 @@ export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 48
     const table = useReactTable({
         data,
         columns,
+        // Keeps `columnDef.size`/`minSize`/`maxSize` meaning "declared" — see
+        // ../data-table/column-size. `getSize()` is unaffected; it falls back to
+        // the library defaults itself.
+        defaultColumn: UNSIZED_DEFAULT_COLUMN,
         getCoreRowModel: getCoreRowModel()
     });
     const rows = table.getRowModel().rows;
@@ -94,11 +100,23 @@ export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 48
                             // its position among its siblings.
                             const firstLeaf = header.column.getLeafColumns()[0];
                             const start = leafPosition.get(firstLeaf?.id ?? header.column.id);
-                            return (_jsx("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, style: { flex: `${header.colSpan} 1 0%` }, 
+                            // A group header spans leaf columns whose body cells carry
+                            // their own widths, so its size comes from those leaves, not
+                            // from the group def (which declares nothing). A leaf header
+                            // reads its own column, as before.
+                            const size = header.subHeaders.length > 0
+                                ? readDeclaredGroupSize(header.column.getLeafColumns())
+                                : readDeclaredColumnSize(header.column);
+                            return (_jsx("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, 
+                                // A declared width must not be flexed away; without one the
+                                // cell keeps its colSpan share of the row, as before.
+                                style: size?.width === undefined
+                                    ? { flex: `${header.colSpan} 1 0%`, ...size }
+                                    : { flex: '0 0 auto', ...size }, 
                                 // Header height is independent of rowHeight: pinning it to a
                                 // small rowHeight (32) clipped the uppercase label against its
                                 // own padding. Padding sizes it; min-h keeps a stable rule.
-                                className: "text-muted-foreground min-h-10 px-4 py-2.5 text-left text-xs font-medium tracking-wide uppercase", children: header.isPlaceholder
+                                className: cn('min-h-10 px-4 py-2.5 text-left', LABEL_VOICE_CLASS, headClassName), children: header.isPlaceholder
                                     ? null
                                     : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                         }) }, headerGroup.id))) }), _jsx("div", { ref: scrollRef, role: "rowgroup", "data-testid": "virtualized-table-viewport", "aria-label": isScrollable ? scrollAreaLabel : undefined, tabIndex: isScrollable ? 0 : undefined, className: "focus-visible:ring-ring relative overflow-auto focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", style: { maxHeight: viewportMaxHeight }, children: _jsx("div", { role: "presentation", className: "relative w-full", style: { height: totalSize }, children: virtualRows.map((virtualItem) => {
@@ -106,6 +124,15 @@ export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 48
                             return (_jsx("div", { role: "row", "aria-rowindex": virtualItem.index + headerRowCount + 1, "data-index": virtualItem.index, className: "border-border absolute left-0 flex w-full items-center border-b text-sm", style: {
                                     height: virtualItem.size,
                                     transform: `translateY(${virtualItem.start}px)`
-                                }, children: row.getVisibleCells().map((cell, i) => (_jsx("div", { role: "cell", "aria-colindex": i + 1, className: "flex-1 truncate px-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                }, children: row.getVisibleCells().map((cell, i) => {
+                                    const size = readDeclaredColumnSize(cell.column);
+                                    return (_jsx("div", { role: "cell", "aria-colindex": i + 1, 
+                                        // An inline `flex` beats the class, so a sized column
+                                        // stops flexing while every other column renders
+                                        // exactly as it did before.
+                                        style: size?.width === undefined
+                                            ? size
+                                            : { flex: '0 0 auto', ...size }, className: "flex-1 truncate px-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                }) }, row.id));
                         }) }) })] }) }));
 }

package/dist/esm/lib/typography.d.ts

@@ -1,17 +1,32 @@
 /**
- * THE canonical quiet-label voice: the recessive uppercase-tracked small-caps
- * label that lets the loud mono figures dominate. Used by panel headings,
- * column heads, key/value labels, captions — anywhere the console needs a
- * quiet label.
+ * THE canonical quiet-label voice: sentence-case, one step down in size,
+ * medium weight, muted ink. Used by column heads, panel headings, key/value
+ * labels, captions — anywhere the console needs a quiet label.
+ *
+ * This is product-console's table-head voice, copied rather than invented. The
+ * kit's own `TableHead` paints `text-muted-foreground … font-medium` inside a
+ * `text-sm` `Table` (`components/ui/table/index.tsx:20,90`), and
+ * product-console renders every data table through that primitive
+ * (`src/components/table/data-table.tsx:14`). It replaced the retired "Ledger"
+ * voice — `text-[11px] uppercase tracking-[0.08em]` — which shouted a register
+ * no sibling console speaks.
  *
  * Do NOT re-state the cluster by hand; compose extra classes via
  * `cn(LABEL_VOICE_CLASS, ...)`.
  */
-export declare const LABEL_VOICE_CLASS = "text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground";
+export declare const LABEL_VOICE_CLASS = "text-sm font-medium text-muted-foreground";
 /**
  * Alias of {@link LABEL_VOICE_CLASS} for section headings. Kept as a distinct
  * name so section-level headings can diverge later without touching every
  * quiet-label call site.
+ *
+ * It stays an alias on purpose. product-console's panel/section TITLE voice is
+ * `text-muted-foreground text-lg font-medium` (`EntityBoxHeaderTitle`,
+ * `components/entity-box/index.tsx:108`) — but that voice already ships as a
+ * component, and every live `SectionLabel` call site is a caption or a small
+ * heading (a stat-card label, an inline rate label), not an EntityBox-scale
+ * panel title. Promoting this constant to `text-lg` would duplicate a voice the
+ * kit already owns and inflate those captions.
  */
-export declare const SECTION_LABEL_CLASS = "text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground";
+export declare const SECTION_LABEL_CLASS = "text-sm font-medium text-muted-foreground";
 //# sourceMappingURL=typography.d.ts.map

package/dist/esm/lib/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8EAC+C,CAAA;AAE7E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,8EAAoB,CAAA"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,8CAA8C,CAAA;AAE5E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,8CAAoB,CAAA"}

package/dist/esm/lib/typography.js

@@ -1,16 +1,31 @@
 /**
- * THE canonical quiet-label voice: the recessive uppercase-tracked small-caps
- * label that lets the loud mono figures dominate. Used by panel headings,
- * column heads, key/value labels, captions — anywhere the console needs a
- * quiet label.
+ * THE canonical quiet-label voice: sentence-case, one step down in size,
+ * medium weight, muted ink. Used by column heads, panel headings, key/value
+ * labels, captions — anywhere the console needs a quiet label.
+ *
+ * This is product-console's table-head voice, copied rather than invented. The
+ * kit's own `TableHead` paints `text-muted-foreground … font-medium` inside a
+ * `text-sm` `Table` (`components/ui/table/index.tsx:20,90`), and
+ * product-console renders every data table through that primitive
+ * (`src/components/table/data-table.tsx:14`). It replaced the retired "Ledger"
+ * voice — `text-[11px] uppercase tracking-[0.08em]` — which shouted a register
+ * no sibling console speaks.
  *
  * Do NOT re-state the cluster by hand; compose extra classes via
  * `cn(LABEL_VOICE_CLASS, ...)`.
  */
-export const LABEL_VOICE_CLASS = 'text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground';
+export const LABEL_VOICE_CLASS = 'text-sm font-medium text-muted-foreground';
 /**
  * Alias of {@link LABEL_VOICE_CLASS} for section headings. Kept as a distinct
  * name so section-level headings can diverge later without touching every
  * quiet-label call site.
+ *
+ * It stays an alias on purpose. product-console's panel/section TITLE voice is
+ * `text-muted-foreground text-lg font-medium` (`EntityBoxHeaderTitle`,
+ * `components/entity-box/index.tsx:108`) — but that voice already ships as a
+ * component, and every live `SectionLabel` call site is a caption or a small
+ * heading (a stat-card label, an inline rate label), not an EntityBox-scale
+ * panel title. Promoting this constant to `text-lg` would duplicate a voice the
+ * kit already owns and inflate those captions.
  */
 export const SECTION_LABEL_CLASS = LABEL_VOICE_CLASS;

package/dist/globals.css

@@ -138,27 +138,27 @@
   --color-system-error-surface: hsl(var(--system-error-surface));
   --color-system-error-h1a: hsl(var(--system-error-h1a));
   --color-system-error-border: hsl(var(--system-error-border));
-  --color-system-error-text: hsl(var(--system-error-text) / 0.7);
+  --color-system-error-text: hsl(var(--system-error-text));
   --color-system-success: hsl(var(--system-success));
   --color-system-success-surface: hsl(var(--system-success-surface));
   --color-system-success-h1a: hsl(var(--system-success-h1a));
   --color-system-success-border: hsl(var(--system-success-border));
-  --color-system-success-text: hsl(var(--system-success-text) / 0.7);
+  --color-system-success-text: hsl(var(--system-success-text));
   --color-system-info: hsl(var(--system-info));
   --color-system-info-surface: hsl(var(--system-info-surface));
   --color-system-info-h1a: hsl(var(--system-info-h1a));
   --color-system-info-border: hsl(var(--system-info-border));
-  --color-system-info-text: hsl(var(--system-info-text) / 0.7);
+  --color-system-info-text: hsl(var(--system-info-text));
   --color-system-alert: hsl(var(--system-alert));
   --color-system-alert-surface: hsl(var(--system-alert-surface));
   --color-system-alert-h1a: hsl(var(--system-alert-h1a));
   --color-system-alert-border: hsl(var(--system-alert-border));
-  --color-system-alert-text: hsl(var(--system-alert-text) / 0.7);
+  --color-system-alert-text: hsl(var(--system-alert-text));
   --color-system-purple: hsl(var(--system-purple));
   --color-system-purple-surface: hsl(var(--system-purple-surface));
   --color-system-purple-h1a: hsl(var(--system-purple-h1a));
   --color-system-purple-border: hsl(var(--system-purple-border));
-  --color-system-purple-text: hsl(var(--system-purple-text) / 0.7);
+  --color-system-purple-text: hsl(var(--system-purple-text));
 
   /* Ledger + reconciliation tokens */
   --color-credit: hsl(var(--credit));
@@ -243,7 +243,14 @@
     --muted-foreground: 240 5% 34%; /* base/600 = #52525B */
     --accent: 56 99% 50%; /* #FEED02 (sunglow) */
     --accent-foreground: 240 10% 4%; /* base/800 for contrast on yellow */
-    --destructive: 0 84% 60%; /* red/500 = #EF4444 */
+    /*
+      Shadcn — Destructive. Darkened one step to red/600. red/500 under white
+      was 3.78:1, under AA, for both roles this token plays: the fill beneath
+      `--destructive-foreground` (the Critical badge, every destructive
+      button) and the plain body ink of a field/form error message on white.
+      red/600 lifts both to 4.80:1. The hue is unchanged; only the step moved.
+    */
+    --destructive: 0 72% 51%; /* red/600 = #DC2626 */
     --destructive-foreground: 0 0% 100%; /* white */
     --border: 240 5% 90%; /* base/200 = #E4E4E7 */
     --input: 0 0% 100%; /* base/white */
@@ -263,27 +270,27 @@
     --system-error-surface: 0 86% 97%; /* red/50 = #FEF2F2 */
     --system-error-h1a: 0 74% 35%; /* red/800 = #991B1B */
     --system-error-border: 0 84% 60% / 0.5; /* #EF4444 50% */
-    --system-error-text: 0 74% 35%; /* #991B1B - opacity via /70 */
+    --system-error-text: 0 74% 35%; /* #991B1B */
     --system-success: 142 76% 36%; /* green/600 = #16A34A */
     --system-success-surface: 139 76% 97%; /* green/50 = #F0FDF4 */
     --system-success-h1a: 143 64% 24%; /* green/800 = #166534 */
     --system-success-border: 142 76% 36% / 0.5; /* #16A34A 50% */
-    --system-success-text: 143 64% 24%; /* #166534 - opacity via /70 */
+    --system-success-text: 143 64% 24%; /* #166534 */
     --system-info: 221 83% 53%; /* blue/600 = #2563EB */
     --system-info-surface: 214 100% 97%; /* blue/50 = #EFF6FF */
     --system-info-h1a: 224 76% 40%; /* blue/800 = #1E40AF */
     --system-info-border: 221 83% 53% / 0.5; /* #2563EB 50% */
-    --system-info-text: 224 76% 40%; /* #1E40AF - opacity via /70 */
+    --system-info-text: 224 76% 40%; /* #1E40AF */
     --system-alert: 48 96% 47%; /* yellow/500 = #EAB308 */
     --system-alert-surface: 55 92% 95%; /* yellow/50 = #FEFCE8 */
     --system-alert-h1a: 36 92% 29%; /* yellow/800 = #854D0E */
     --system-alert-border: 48 96% 47% / 0.5; /* #EAB308 50% */
-    --system-alert-text: 36 92% 29%; /* #854D0E - opacity via /70 */
+    --system-alert-text: 36 92% 29%; /* #854D0E */
     --system-purple: 271 81% 56%; /* purple/600 = #9333EA */
     --system-purple-surface: 270 100% 98%; /* purple/50 = #FAF5FF */
     --system-purple-h1a: 273 67% 39%; /* purple/800 = #6B21A8 */
     --system-purple-border: 271 81% 56% / 0.5; /* #9333EA 50% */
-    --system-purple-text: 273 67% 39%; /* #6B21A8 - opacity via /70 */
+    --system-purple-text: 273 67% 39%; /* #6B21A8 */
 
     /* Shadow color token for dark mode adaptation */
     --shadow-color: 0 0% 0%;
@@ -377,35 +384,35 @@
     /* Shadcn — System Error */
     --system-error: 0 91% 71%; /* red/400 = #F87171 */
     --system-error-surface: 0 75% 15%; /* red/950 = #450A0A */
-    --system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 - opacity via /70 */
+    --system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 */
     --system-error-h1a: 0 96% 89%; /* red/200 = #FECACA */
     --system-error-border: 0 94% 82% / 0.3; /* #FCA5A5 30% */
 
     /* Shadcn — System Success */
     --system-success: 142 69% 58%; /* green/400 = #4ADE80 */
     --system-success-surface: 145 80% 10%; /* green/950 = #052E16 */
-    --system-success-text: 142 77% 73%; /* green/300 = #86EFAC - opacity via /70 */
+    --system-success-text: 142 77% 73%; /* green/300 = #86EFAC */
     --system-success-h1a: 141 79% 85%; /* green/200 = #BBF7D0 */
     --system-success-border: 142 69% 58% / 0.3; /* #4ADE80 30% */
 
     /* Shadcn — System Info */
     --system-info: 213 94% 68%; /* blue/400 = #60A5FA */
     --system-info-surface: 226 57% 21%; /* blue/950 = #172554 */
-    --system-info-text: 212 96% 78%; /* blue/300 = #93C5FD - opacity via /70 */
+    --system-info-text: 212 96% 78%; /* blue/300 = #93C5FD */
     --system-info-h1a: 213 97% 87%; /* blue/200 = #BFDBFE */
     --system-info-border: 213 94% 68% / 0.3; /* #60A5FA 30% */
 
     /* Shadcn — System Alert */
     --system-alert: 48 96% 53%; /* yellow/400 = #FACC15 */
     --system-alert-surface: 26 83% 14%; /* yellow/950 = #422006 */
-    --system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A - opacity via /70 */
+    --system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A */
     --system-alert-h1a: 53 98% 77%; /* yellow/200 = #FEF08A */
     --system-alert-border: 48 96% 53% / 0.3; /* #FACC15 30% */
 
     /* Shadcn — System Purple */
     --system-purple: 270 95% 75%; /* purple/400 = #C084FC */
     --system-purple-surface: 266 86% 13%; /* purple/950 = #3B0764 */
-    --system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE - opacity via /70 */
+    --system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE */
     --system-purple-h1a: 269 100% 92%; /* purple/200 = #E9D5FF */
     --system-purple-border: 270 95% 75% / 0.3; /* #C084FC 30% */
 
@@ -604,3 +611,31 @@
   mask: radial-gradient(21px 13px at 50% 102%, #0000 98%, #000) 50%
     calc(100% - 16px) / 64px 100% repeat-x;
 }
+
+/*
+  Reduced-motion floor.
+
+  Every animated surface in the kit already carries a `motion-safe:` variant,
+  but that variant is a Tailwind utility: it only becomes
+  `@media (prefers-reduced-motion: no-preference)` after the CONSUMER compiles
+  Tailwind over the kit's dist. A consumer whose content globs miss a file, one
+  on an older kit, or one who writes `animate-in` in its own code gets no guard
+  at all — which is why `grep prefers-reduced-motion` over the shipped
+  stylesheet found nothing to point at.
+
+  This block is plain CSS with no variant and no build step between it and the
+  reader, and it ships verbatim (`copy:styles` copies every .css under src).
+  Animation
+  is dropped rather than shortened, so an overlay renders its final geometry
+  immediately; Radix reads a computed `animation-name: none` as "nothing to wait
+  for" and unmounts on close instead of hanging on an `animationend` that never
+  fires. Transitions are deliberately left alone: hover and focus affordances
+  are feedback, not motion effects.
+*/
+@media (prefers-reduced-motion: reduce) {
+  [class*='animate-'],
+  [data-state='open'],
+  [data-state='closed'] {
+    animation: none !important;
+  }
+}

package/dist/lib/typography.d.ts

@@ -1,17 +1,32 @@
 /**
- * THE canonical quiet-label voice: the recessive uppercase-tracked small-caps
- * label that lets the loud mono figures dominate. Used by panel headings,
- * column heads, key/value labels, captions — anywhere the console needs a
- * quiet label.
+ * THE canonical quiet-label voice: sentence-case, one step down in size,
+ * medium weight, muted ink. Used by column heads, panel headings, key/value
+ * labels, captions — anywhere the console needs a quiet label.
+ *
+ * This is product-console's table-head voice, copied rather than invented. The
+ * kit's own `TableHead` paints `text-muted-foreground … font-medium` inside a
+ * `text-sm` `Table` (`components/ui/table/index.tsx:20,90`), and
+ * product-console renders every data table through that primitive
+ * (`src/components/table/data-table.tsx:14`). It replaced the retired "Ledger"
+ * voice — `text-[11px] uppercase tracking-[0.08em]` — which shouted a register
+ * no sibling console speaks.
  *
  * Do NOT re-state the cluster by hand; compose extra classes via
  * `cn(LABEL_VOICE_CLASS, ...)`.
  */
-export declare const LABEL_VOICE_CLASS = "text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground";
+export declare const LABEL_VOICE_CLASS = "text-sm font-medium text-muted-foreground";
 /**
  * Alias of {@link LABEL_VOICE_CLASS} for section headings. Kept as a distinct
  * name so section-level headings can diverge later without touching every
  * quiet-label call site.
+ *
+ * It stays an alias on purpose. product-console's panel/section TITLE voice is
+ * `text-muted-foreground text-lg font-medium` (`EntityBoxHeaderTitle`,
+ * `components/entity-box/index.tsx:108`) — but that voice already ships as a
+ * component, and every live `SectionLabel` call site is a caption or a small
+ * heading (a stat-card label, an inline rate label), not an EntityBox-scale
+ * panel title. Promoting this constant to `text-lg` would duplicate a voice the
+ * kit already owns and inflate those captions.
  */
-export declare const SECTION_LABEL_CLASS = "text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground";
+export declare const SECTION_LABEL_CLASS = "text-sm font-medium text-muted-foreground";
 //# sourceMappingURL=typography.d.ts.map

package/dist/lib/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8EAC+C,CAAA;AAE7E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,8EAAoB,CAAA"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,8CAA8C,CAAA;AAE5E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,8CAAoB,CAAA"}

package/dist/lib/typography.js

@@ -2,18 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SECTION_LABEL_CLASS = exports.LABEL_VOICE_CLASS = void 0;
 /**
- * THE canonical quiet-label voice: the recessive uppercase-tracked small-caps
- * label that lets the loud mono figures dominate. Used by panel headings,
- * column heads, key/value labels, captions — anywhere the console needs a
- * quiet label.
+ * THE canonical quiet-label voice: sentence-case, one step down in size,
+ * medium weight, muted ink. Used by column heads, panel headings, key/value
+ * labels, captions — anywhere the console needs a quiet label.
+ *
+ * This is product-console's table-head voice, copied rather than invented. The
+ * kit's own `TableHead` paints `text-muted-foreground … font-medium` inside a
+ * `text-sm` `Table` (`components/ui/table/index.tsx:20,90`), and
+ * product-console renders every data table through that primitive
+ * (`src/components/table/data-table.tsx:14`). It replaced the retired "Ledger"
+ * voice — `text-[11px] uppercase tracking-[0.08em]` — which shouted a register
+ * no sibling console speaks.
  *
  * Do NOT re-state the cluster by hand; compose extra classes via
  * `cn(LABEL_VOICE_CLASS, ...)`.
  */
-exports.LABEL_VOICE_CLASS = 'text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground';
+exports.LABEL_VOICE_CLASS = 'text-sm font-medium text-muted-foreground';
 /**
  * Alias of {@link LABEL_VOICE_CLASS} for section headings. Kept as a distinct
  * name so section-level headings can diverge later without touching every
  * quiet-label call site.
+ *
+ * It stays an alias on purpose. product-console's panel/section TITLE voice is
+ * `text-muted-foreground text-lg font-medium` (`EntityBoxHeaderTitle`,
+ * `components/entity-box/index.tsx:108`) — but that voice already ships as a
+ * component, and every live `SectionLabel` call site is a caption or a small
+ * heading (a stat-card label, an inline rate label), not an EntityBox-scale
+ * panel title. Promoting this constant to `text-lg` would duplicate a voice the
+ * kit already owns and inflate those captions.
  */
 exports.SECTION_LABEL_CLASS = exports.LABEL_VOICE_CLASS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0-beta.4",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {