@eocrm/design-system 0.6.20 → 0.6.22

package/AI-PRIMER.md

@@ -20,7 +20,7 @@ Read this first. Each component's contract is its `docs/components/<Name>.md`; t
 
 See [docs/setup.md](docs/setup.md).
 
-Accent: blue by default; `<html data-accent="tealpine">` switches to Teal pine (see [README.md](./README.md#accent)).
+Accent: blue by default; `<html data-accent="…">` switches to `tealpine`, `indigo`, `grape`, `berry`, `slate`, `ocean` or `moss` (see [README.md](./README.md#accent)).
 
 ## Localization (i18n)
 

package/README.md

@@ -63,17 +63,30 @@ If you need only the tokens (you're providing your own reset), import `@eocrm/de
 
 ## Accent
 
-The accent family defaults to blue. To switch the whole app to **Teal pine**, set `data-accent="tealpine"` on `<html>` (omit the attribute for blue):
+The accent family defaults to blue. To switch the whole app to another accent, set `data-accent` on `<html>` (omit the attribute for blue):
 
 ```html
 <html data-accent="tealpine" data-theme="dark"></html>
 ```
 
-It swaps `--color-accent`, `-hover`, `-pressed`, `-fg`, `-bg-subtle`, `-subtle-bg` and `--ring-accent`, plus the default `Link` colour (`--color-link-fg` / `-hover`), in light, forced dark (`data-theme="dark"`) and OS dark. It ships in the existing `tokens.scss` / `dark.scss`, so there is no new import. `AppProvider`'s `tokens` / `darkTokens` overrides win over `data-accent` in every theme (see [docs/setup.md](docs/setup.md)). Info colours stay blue under any accent; DropdownMenu checked items, the OptionsPicker selected row and StagePath done states follow the accent. In light theme, default `Link`s use a slightly brighter teal than the accent (`#007676`, AA on every grey surface) at medium weight (not inside headings, `<strong>` or `<th>`), because the accent alone sits too close to the navy body text to read as a link.
+| `data-accent` | Hue              | Compose objects                                        |
+| ------------- | ---------------- | ------------------------------------------------------ |
+| _(none)_      | Blue (default)   | `EocrmLightTokens` / `EocrmDarkTokens`                 |
+| `tealpine`    | Teal pine        | `EocrmTealPineLightTokens` / `EocrmTealPineDarkTokens` |
+| `indigo`      | Indigo           | `EocrmIndigoLightTokens` / `EocrmIndigoDarkTokens`     |
+| `grape`       | Purple           | `EocrmGrapeLightTokens` / `EocrmGrapeDarkTokens`       |
+| `berry`       | Magenta-pink     | `EocrmBerryLightTokens` / `EocrmBerryDarkTokens`       |
+| `slate`       | Neutral graphite | `EocrmSlateLightTokens` / `EocrmSlateDarkTokens`       |
+| `ocean`       | Cyan-blue        | `EocrmOceanLightTokens` / `EocrmOceanDarkTokens`       |
+| `moss`        | Olive green      | `EocrmMossLightTokens` / `EocrmMossDarkTokens`         |
 
-Compose: `EocrmTealPineLightTokens` / `EocrmTealPineDarkTokens` sit beside `EocrmLightTokens` / `EocrmDarkTokens`; only accent colours differ. The link colour tokens are web-only (Compose has no `Link`), so Compose links keep the accent colour.
+Each accent swaps `--color-accent`, `-hover`, `-pressed`, `-fg`, `-bg-subtle`, `-subtle-bg` and `--ring-accent`, plus the default `Link` colour (`--color-link-fg` / `-hover`), in light, forced dark (`data-theme="dark"`) and OS dark. They ship in the existing `tokens.scss` / `dark.scss`, so there is no new import. `AppProvider`'s `tokens` / `darkTokens` overrides win over `data-accent` in every theme (see [docs/setup.md](docs/setup.md)). Info colours stay blue under any accent; DropdownMenu checked items, the OptionsPicker selected row and StagePath done states follow the accent. In light theme, Teal pine's default `Link`s use a slightly brighter teal than the accent (`#007676`, AA on every grey surface) at medium weight (not inside headings, `<strong>` or `<th>`), because the accent alone sits too close to the navy body text to read as a link. Slate's default `Link`s are medium weight for the same reason. Indigo and Berry also set a slightly different link colour from their accent (`#4342c4`, `#a82c68`) to keep links at AA on every grey surface.
 
-**Known issue:** in light theme, Teal pine and `--color-success` are close in hue (both green-teal). Review success/accent pairings visually before switching the CRM.
+Compose: each accent's Light / Dark objects sit beside `EocrmLightTokens` / `EocrmDarkTokens`; only accent colours differ. The link colour tokens are web-only (Compose has no `Link`), so Compose links keep the accent colour.
+
+There is deliberately no red, orange or yellow accent: a primary button in those hues reads as a danger or warning action.
+
+**Known issue:** in light theme, Teal pine and Moss sit close to `--color-success` in hue. Review success/accent pairings visually before switching the CRM to either.
 
 ---
 

package/docs/components/DataTable.md

@@ -53,7 +53,7 @@ const instance = useDataTable<Deal>({
 - Resize via the right-edge handle. Without `collapseBelow`, the legacy keyboard path stays on a focused sortable header label: `←`/`→` for −/+8px; Shift+`←`/`→` for ±32px. With `collapseBelow`, the wide presentation exposes a dedicated focusable resize separator with the same keys; the separator and resize interaction are unavailable while stacked and return after widening.
 - `ColumnVisibilityTrigger` is the only built-in companion. For column pinning UI (Phase 2 ships state, no built-in UI), wire your own using `instance.pinColumn(id, side)`.
 - **Phase 2 ships pinning rendering.** `columnPinning` now applies sticky CSS with cumulative offsets and an inside-edge shadow; `pinnedRows` renders in a separate `<tbody>` above the main body. The selection auto-column is auto-left-pinned at offset 0. Pinned columns are LOCKED in place — no drag grip, can't be reordered. Their sort still works. Declare initial pinning either on the hook (`defaultColumnPinning: { left: ['name'], right: ['actions'] }`) or directly on each column (`pin: 'left' | 'right'`); the hook prop wins when both are set. **Phase 3 ships expandable rows.** Pass `renderExpandedRow: (row) => ReactNode` to add a per-row chevron auto-column at the left edge. Clicking the chevron toggles a detail row beneath the main row, spanning all columns. ARIA-wired with `aria-expanded` + `aria-controls`. The chevron auto-column is sticky-left like the selection cell; when both are enabled, selection is first and expand is second. DataTable is now feature-complete per the original spec.
-- **Cell content is single-line + ellipsized by default.** DataTable's internal table uses `table-layout: fixed` so column widths from `ColumnDef.size` (or runtime `columnSizing`) are authoritative, and every cell gets `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`. Wide content truncates with `…` at the column boundary; the column does NOT expand to fit. If you need multi-line cells, render `<Table>` directly — DataTable is opinionated here so pinning offsets stay pixel-correct.
+- **Cell content is single-line + ellipsized by default.** DataTable's internal table uses `table-layout: fixed` so column widths from `ColumnDef.size` (or runtime `columnSizing`) are authoritative, and every cell gets `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`. The table is as wide as the sum of its column sizes, or 100% of its container when that is wider (columns then scale up proportionally). Content never widens it. Wide content, including nested block content such as a `Stack` or a long `Badge`, is clipped at the column boundary, and text truncates with `…`; the column does NOT expand to fit. If you need multi-line cells, render `<Table>` directly — DataTable is opinionated here so pinning offsets stay pixel-correct.
 - **A column drag commits wherever the preview parked it** — however far the pointer roams, including over a pinned column or clear off the table. There is no "outside" to release into: the column is clamped to the unpinned band, so the preview is always showing a real slot and the drop honors it. This deliberately differs from `Kanban`, where releasing outside the columns cancels — there the pointer can genuinely aim somewhere else. **Escape is the only cancel.** The `dragWholeColumn={false}` opt-out is the exception: its preview is dnd-kit's own and RETRACTS (the header snaps home) when no unpinned slot is under the column, so a release there is discarded — matching what that preview shows.
 
 **When NOT to use:**

package/docs/components/Link.md

@@ -40,7 +40,7 @@ import { Link as RouterLink } from 'react-router-dom';
 - **Polymorphic**: `as={Component}` forwards all of Component's props with full TypeScript inference.
 - **Library has no router dependency** — the `as` mechanism is consumer-driven.
 - **Three variants**:
-  - `default`: link colour (`--color-link-fg`; the accent unless the accent set overrides it — `tealpine` uses a brighter teal at medium weight), hover-underline. Inline CTA ("View all →").
+  - `default`: link colour (`--color-link-fg`; the accent unless the accent set overrides it — `tealpine` uses a brighter teal at medium weight; `slate` links are medium weight), hover-underline. Inline CTA ("View all →").
   - `muted`: muted color, hover-accent. Low-emphasis nav (breadcrumb-style).
   - `subtle`: foreground color, hover-accent + underline. Dense-surface name links. **Not deprecated** — this is `Link`'s own variant and is unrelated to `Text`/`Title`'s `tone="subtle"`, which WAS deprecated. Same word, opposite status: a grep for "subtle deprecated" will land on the tone, and `PersonDisplay.Name` uses this variant deliberately.
 - **`underline` prop** (`'hover'` | `'always'` | `'none'`, default `'hover'`) — orthogonal to `variant`:
@@ -62,4 +62,4 @@ import { Link as RouterLink } from 'react-router-dom';
 - ❌ Forgetting `rel="noopener noreferrer"` on `target="_blank"` links.
 - ❌ Using `variant="default"` for low-emphasis nav like breadcrumbs.
 - ❌ A Link inside running text/body copy without `underline="always"` — color alone isn't a sufficient visual cue (WCAG 1.4.1).
-- ❌ A `default` Link inside `<Text weight="semibold">` (or `bold`) under `data-accent="tealpine"` — the link renders at the accent's medium weight, lighter than the words around it. Wrap the bold run in `<strong>` or give the Link a matching weight via `className`.
+- ❌ A `default` Link inside `<Text weight="semibold">` (or `bold`) under `data-accent="tealpine"` or `"slate"` — the link renders at the accent's medium weight, lighter than the words around it. Wrap the bold run in `<strong>` or give the Link a matching weight via `className`.

package/docs/setup.md

@@ -48,4 +48,4 @@ const darkTokens = useMemo(() => ({ '--color-accent': '#a78bfa' }), []);
 </AppProvider>;
 ```
 
-`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine` does), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; `src/styles/tokens.scss` remains the stable consumer entry point.
+`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; `src/styles/tokens.scss` remains the stable consumer entry point.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
@@ -50,7 +50,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eocrm/design-tokens": "0.6.20",
+    "@eocrm/design-tokens": "0.6.22",
     "@floating-ui/react-dom": "^2.1.8",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",

package/src/components/DataTable/DataTable.module.scss

@@ -9,18 +9,18 @@
 // internal table-sizing properties (not consumer layout). Same precedent as the
 // Table primitive's `position: sticky` for the sticky-header band.
 .root {
-  // table-layout: fixed + width: max-content makes each <col>'s declared
-  // width AUTHORITATIVE for the cell. Default `table-layout: auto` plus the
-  // Table primitive's `min-width: 100%` would distribute columns
-  // proportionally within the parent's width, which causes pin offsets to
-  // misalign — the 44px auto-cell rendering at e.g. 40px because the table
-  // was capped at the wrap's width, then the left-pinned column at left:44
-  // leaves a 4px gap that exposes scroll content during horizontal scroll.
-  // `width: max-content` lets the table grow to its intrinsic column-sum
-  // width when that exceeds the wrap; Table primitive's scrollWrap then
-  // scrolls horizontally as designed.
+  // table-layout: fixed + an explicit width makes each <col>'s declared
+  // width AUTHORITATIVE for the cell. `--data-table-width` is the sum of the
+  // <col> widths, set inline by DataTable.tsx. Default `table-layout: auto`
+  // would distribute columns proportionally within the parent's width,
+  // misaligning pin offsets. Never use an intrinsic width (`max-content`)
+  // here: it is computed from cell content, so one long nowrap cell widens
+  // its column past `size` (#733). `min-width: 100%` still stretches the
+  // table to fill a wider wrap; a narrower wrap scrolls horizontally.
+  // Fallback `0` is still content-independent: a fixed-layout table is the
+  // greater of its `width` and the sum of its column widths.
   table-layout: fixed;
-  width: max-content;
+  width: var(--data-table-width, 0);
   min-width: 100%;
 }
 // stylelint-enable property-disallowed-list

package/src/components/DataTable/DataTable.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type CSSProperties,
   type ReactNode,
   type Ref,
   type RefObject,
@@ -41,7 +42,7 @@ import {
   useDragAccessibility,
   type DescribeDragTarget,
 } from '../_internal/dragAnnouncements';
-import { AUTO_CELL_WIDTH } from './pinStyle';
+import { AUTO_CELL_WIDTH, DEFAULT_COL_WIDTH } from './pinStyle';
 import type { DataTableInstance } from './types';
 import type { CollapseBreakpoint } from '../_internal/collapse';
 import { useTranslation } from '../../i18n/useTranslation';
@@ -380,6 +381,16 @@ function DataTableInner<T>(
     [instance.leftPinnedColumns, instance.unpinnedColumns, instance.rightPinnedColumns],
   );
 
+  // Explicit table width = sum of the <col> widths. Under `table-layout:
+  // fixed` that keeps every column at its declared size (#733); an intrinsic
+  // width like `max-content` would be computed from cell content instead.
+  const tableWidthPx =
+    ((instance.enableRowSelection ? 1 : 0) + (instance.hasExpansion ? 1 : 0)) * AUTO_CELL_WIDTH +
+    renderColumns.reduce(
+      (sum, col) => sum + (instance.columnSizesPx[col.id] ?? DEFAULT_COL_WIDTH),
+      0,
+    );
+
   const totalColCount =
     instance.visibleColumns.length +
     (instance.enableRowSelection ? 1 : 0) +
@@ -542,6 +553,7 @@ function DataTableInner<T>(
             aria-rowcount={instance.rowCount}
             className={clsx(styles.root, className)}
             {...rest}
+            style={{ '--data-table-width': `${tableWidthPx}px` } as CSSProperties}
             scroll={!responsiveEnabled}
           >
             {caption && <Table.Caption>{caption}</Table.Caption>}
@@ -550,7 +562,10 @@ function DataTableInner<T>(
               {instance.enableRowSelection && <col style={{ width: AUTO_CELL_WIDTH }} />}
               {instance.hasExpansion && <col style={{ width: AUTO_CELL_WIDTH }} />}
               {renderColumns.map((col) => (
-                <col key={col.id} style={{ width: instance.columnSizesPx[col.id] ?? 120 }} />
+                <col
+                  key={col.id}
+                  style={{ width: instance.columnSizesPx[col.id] ?? DEFAULT_COL_WIDTH }}
+                />
               ))}
             </colgroup>
 

package/src/components/DataTable/HeaderCell.tsx

@@ -15,7 +15,7 @@ import type { TableSortDirection } from '../Table';
 import { useTranslation } from '../../i18n/useTranslation';
 import { useResizeHandle } from './useResizeHandle';
 import type { ColumnDef, DataTableInstance } from './types';
-import { getPinStyle } from './pinStyle';
+import { DEFAULT_COL_WIDTH, getPinStyle } from './pinStyle';
 import { shiftVarName } from './columnShift';
 
 import styles from './HeaderCell.module.scss';
@@ -223,7 +223,7 @@ export function HeaderCell<T>({
   });
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortableResult;
 
-  const width = instance.columnSizesPx[column.id] ?? 120;
+  const width = instance.columnSizesPx[column.id] ?? DEFAULT_COL_WIDTH;
   const resize = useResizeHandle({
     initialWidth: width,
     minWidth: column.minSize ?? 40,
@@ -248,7 +248,7 @@ export function HeaderCell<T>({
     if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       e.preventDefault();
       const step = (e.shiftKey ? 32 : 8) * (e.key === 'ArrowRight' ? 1 : -1);
-      const current = instance.columnSizesPx[column.id] ?? 120;
+      const current = instance.columnSizesPx[column.id] ?? DEFAULT_COL_WIDTH;
       const minW = column.minSize ?? 40;
       const maxW = column.maxSize;
       let next = current + step;

package/src/components/DataTable/pinStyle.ts

@@ -6,6 +6,9 @@ import type { DataTableInstance } from './types';
  */
 export const AUTO_CELL_WIDTH = 44;
 
+/** Width of a column with no `size` and no runtime sizing state. */
+export const DEFAULT_COL_WIDTH = 120;
+
 export interface PinStyle {
   position?: 'sticky';
   left?: number;

package/src/components/DataTable/useColumnDragShift.ts

@@ -7,9 +7,10 @@ import { clampX, computeColumnShifts, shiftVarName, type DragRangeX } from './co
  * geometry of the header cells inside `root`.
  *
  * Declared widths (`columnSizingPx` / the `<col>` elements) cannot be used for
- * this. `DataTable.module.scss` sets `table-layout: fixed; width: max-content;
- * min-width: 100%`, so whenever the column sum is narrower than the scroll wrap
- * the table stretches and every rendered column is WIDER than declared. Summing
+ * this. `DataTable.module.scss` sets `table-layout: fixed;
+ * width: var(--data-table-width, 0); min-width: 100%`, so whenever the column
+ * sum is narrower than the scroll wrap the table stretches and every rendered
+ * column is WIDER than declared. Summing
  * declared widths then under-reports the travel and makes the last slot
  * unreachable — the exact regression this replaced.
  *

package/src/components/DataTable/useDataTable.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useControllableState } from '../_internal/useControllableState';
+import { DEFAULT_COL_WIDTH } from './pinStyle';
 import type {
   ColumnOrderState,
   ColumnPinningState,
@@ -157,8 +158,6 @@ export function useDataTable<T>(options: UseDataTableOptions<T>): DataTableInsta
     onChange: options.onSortChange,
   });
 
-  const DEFAULT_COL_WIDTH = 120;
-
   const columnsById = useMemo(() => {
     const m = new Map<string, (typeof columns)[number]>();
     for (const c of columns) m.set(c.id, c);

package/src/components/Link/Link.tokens.scss

@@ -21,8 +21,9 @@
   --link-fg-subtle-hover: var(--color-accent);
 }
 
-// Teal pine's accent sits close to the navy body text, so its default links
-// also step up in weight (the colour alone can't carry the difference).
-:root[data-accent='tealpine'] {
+// Teal pine's and Slate's accents sit close to the navy body text, so their
+// default links also step up in weight (the colour alone can't carry the difference).
+:root[data-accent='tealpine'],
+:root[data-accent='slate'] {
   --link-font-weight-default: var(--font-weight-medium);
 }

package/src/components/Link/Link.tsx

@@ -14,7 +14,7 @@ import styles from './Link.module.scss';
  * Visual variant. Defaults to `'default'`.
  * - `'default'` — link color (`--color-link-fg`, the accent unless the accent set
  *   overrides it), no underline at rest, underline + hover color on hover. Under
- *   `data-accent="tealpine"` it is also medium weight, except inside headings,
+ *   `data-accent="tealpine"` or `"slate"` it is also medium weight, except inside headings,
  *   `<strong>`/`<b>` and `<th>`.
  *   Use for inline CTA links ("View all →", "Read more").
  * - `'muted'` — muted color, no underline, accent-hover on hover.