@persona/design-system 0.9.1 → 0.10.0

package/dist/useTableColumns-rLskKJhd.d.mts

@@ -0,0 +1,72 @@
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-CjQzH0MM.mjs";
+import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
+
+//#region components/DataTable/useTableColumns.d.ts
+/**
+ * Host-injected cell format renderer. Dashboard passes its own implementation
+ * that handles all format types including tags, files, and status indicators.
+ */
+type RenderFormatFn<TData = unknown, TFormat extends {
+  type: string;
+} = {
+  type: string;
+}> = (value: unknown, format?: TFormat, row?: TData) => React.ReactNode;
+interface UseTableColumnsParams<TData extends RowData, TFormat extends {
+  type: string;
+} = DataTableColumnFormat<TData>, TFilter = unknown> {
+  columns: DataTableColumns<TData, TFormat, TFilter>;
+  data: TData[];
+  compact?: boolean;
+  sort?: boolean | SortProps;
+  clientSearch?: boolean | {
+    placeholder?: string;
+    initialValue?: string;
+  };
+  clientFiltering?: boolean;
+  expandColumnVisibility?: 'auto' | 'always';
+  showControls?: boolean;
+  enableRowSelection?: boolean;
+  enableSubRowSelection?: boolean;
+  rowActions?: RowAction[] | ((row: TData) => RowAction[]);
+  getRowId?: (row: TData) => string;
+  expandedRows: Set<string>;
+  toggleRowExpansion: (rowId: string) => void;
+  canRowExpand: (rowData: TData) => boolean;
+  checkboxColumnStates: Record<string, Set<string>>;
+  handleCheckboxCellChange: (columnId: string, rowId: string, checked: boolean) => void;
+  handleSelectAllCheckboxCell: (columnId: string, checked: boolean) => void;
+  getSelfAndNestedRowIds: (row: TData, indexPath: number[]) => string[];
+  handleRowSelectionWithShift: (clickedRow: Row<TData>, table: Table<TData>, checked: boolean, isShiftKey: boolean) => void;
+  renderFormat: RenderFormatFn<TData, TFormat>;
+}
+declare function useTableColumns<TData extends RowData, TFormat extends {
+  type: string;
+} = DataTableColumnFormat<TData>, TFilter = unknown>({
+  columns,
+  data,
+  compact,
+  sort,
+  clientSearch,
+  clientFiltering,
+  expandColumnVisibility,
+  showControls,
+  enableRowSelection,
+  enableSubRowSelection,
+  rowActions,
+  getRowId,
+  expandedRows,
+  toggleRowExpansion,
+  canRowExpand,
+  checkboxColumnStates,
+  handleCheckboxCellChange,
+  handleSelectAllCheckboxCell,
+  getSelfAndNestedRowIds,
+  handleRowSelectionWithShift,
+  renderFormat
+}: UseTableColumnsParams<TData, TFormat, TFilter>): [ColumnDef<TData, any>[], {
+  key: string;
+  label: string;
+}[]];
+//#endregion
+export { UseTableColumnsParams as n, useTableColumns as r, RenderFormatFn as t };
+//# sourceMappingURL=useTableColumns-rLskKJhd.d.mts.map

package/dist/useTableColumns.d.mts

@@ -1,72 +1,2 @@
-import { DataTableColumnFormat, DataTableColumns, RowAction, SortProps } from "./components/DataTable/types.mjs";
-import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
-
-//#region components/DataTable/useTableColumns.d.ts
-/**
- * Host-injected cell format renderer. Dashboard passes its own implementation
- * that handles all format types including tags, files, and status indicators.
- */
-type RenderFormatFn<TData = unknown, TFormat extends {
-  type: string;
-} = {
-  type: string;
-}> = (value: unknown, format?: TFormat, row?: TData) => React.ReactNode;
-interface UseTableColumnsParams<TData extends RowData, TFormat extends {
-  type: string;
-} = DataTableColumnFormat<TData>, TFilter = unknown> {
-  columns: DataTableColumns<TData, TFormat, TFilter>;
-  data: TData[];
-  compact?: boolean;
-  sort?: boolean | SortProps;
-  clientSearch?: boolean | {
-    placeholder?: string;
-    initialValue?: string;
-  };
-  clientFiltering?: boolean;
-  expandColumnVisibility?: 'auto' | 'always';
-  showControls?: boolean;
-  enableRowSelection?: boolean;
-  enableSubRowSelection?: boolean;
-  rowActions?: RowAction[] | ((row: TData) => RowAction[]);
-  getRowId?: (row: TData) => string;
-  expandedRows: Set<string>;
-  toggleRowExpansion: (rowId: string) => void;
-  canRowExpand: (rowData: TData) => boolean;
-  checkboxColumnStates: Record<string, Set<string>>;
-  handleCheckboxCellChange: (columnId: string, rowId: string, checked: boolean) => void;
-  handleSelectAllCheckboxCell: (columnId: string, checked: boolean) => void;
-  getSelfAndNestedRowIds: (row: TData, indexPath: number[]) => string[];
-  handleRowSelectionWithShift: (clickedRow: Row<TData>, table: Table<TData>, checked: boolean, isShiftKey: boolean) => void;
-  renderFormat: RenderFormatFn<TData, TFormat>;
-}
-declare function useTableColumns<TData extends RowData, TFormat extends {
-  type: string;
-} = DataTableColumnFormat<TData>, TFilter = unknown>({
-  columns,
-  data,
-  compact,
-  sort,
-  clientSearch,
-  clientFiltering,
-  expandColumnVisibility,
-  showControls,
-  enableRowSelection,
-  enableSubRowSelection,
-  rowActions,
-  getRowId,
-  expandedRows,
-  toggleRowExpansion,
-  canRowExpand,
-  checkboxColumnStates,
-  handleCheckboxCellChange,
-  handleSelectAllCheckboxCell,
-  getSelfAndNestedRowIds,
-  handleRowSelectionWithShift,
-  renderFormat
-}: UseTableColumnsParams<TData, TFormat, TFilter>): [ColumnDef<TData, any>[], {
-  key: string;
-  label: string;
-}[]];
-//#endregion
-export { RenderFormatFn, UseTableColumnsParams, useTableColumns };
-//# sourceMappingURL=useTableColumns.d.mts.map
+import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-rLskKJhd.mjs";
+export { RenderFormatFn, UseTableColumnsParams, useTableColumns };

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-2nVpt8oj.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-BQQSKUBU.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/dist/{utilities-B2ry7_20.d.mts → utilities-BrEUGFGq.d.mts}

@@ -6,4 +6,4 @@
 type RequireOneOf<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
 //#endregion
 export { RequireOneOf as t };
-//# sourceMappingURL=utilities-B2ry7_20.d.mts.map
+//# sourceMappingURL=utilities-BrEUGFGq.d.mts.map

package/dist/utilities.d.mts

@@ -1,2 +1,2 @@
-import { t as RequireOneOf } from "./utilities-B2ry7_20.mjs";
+import { t as RequireOneOf } from "./utilities-BrEUGFGq.mjs";
 export { RequireOneOf };

package/dist/utils/testing.d.mts

@@ -1,4 +1,4 @@
-import { n as RouterAdapter } from "../types-CgKSEQyB.mjs";
+import { n as RouterAdapter } from "../types-HxiGiwQN.mjs";
 import { ReactElement } from "react";
 import * as _$_testing_library_react0 from "@testing-library/react";
 import { RenderOptions, screen } from "@testing-library/react";

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { d as FilterRuleValue } from "./types-DEzlAdZW.mjs";
+import { d as FilterRuleValue } from "./types-BMpEizJP.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/utils.d.ts
 /**

package/dist/utils4.d.mts

@@ -1,8 +1,8 @@
-import { n as ASTChain } from "./types-4wnr5R9P.mjs";
-import { t as ASTNode } from "./types-VgGkS4JB.mjs";
-import { n as Chain, s as MethodChainNode } from "./methodChainTypes-BuwpPC73.mjs";
-import { t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
-import { a as Mode, r as FunctionAtCursor, u as ValueType } from "./types-CEQWndtF.mjs";
+import { n as ASTChain } from "./types-Kmnood9Y.mjs";
+import { t as ASTNode } from "./types-DfpVVjso.mjs";
+import { n as Chain, s as MethodChainNode } from "./methodChainTypes-a7kHYhs7.mjs";
+import { t as ChainRoot } from "./chainTypes-BbFZn8a9.mjs";
+import { a as Mode, r as FunctionAtCursor, u as ValueType } from "./types-DFU6M0OL.mjs";
 import { RefObject } from "react";
 
 //#region components/SmartTextInput/utils.d.ts

package/dist/{validation-BODkbEvr.d.mts → validation-Csi2SJxm.d.mts}

@@ -1,5 +1,5 @@
-import { m as FilterStateV2, u as FilterRule } from "./types-DEzlAdZW.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DAk_3PhH.mjs";
+import { m as FilterStateV2, u as FilterRule } from "./types-BMpEizJP.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-d5tGpSch.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/validation.d.ts
 /**
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
 declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
 //#endregion
 export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
-//# sourceMappingURL=validation-BODkbEvr.d.mts.map
+//# sourceMappingURL=validation-Csi2SJxm.d.mts.map

package/dist/validation.d.mts

@@ -1,2 +1,2 @@
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-BODkbEvr.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-Csi2SJxm.mjs";
 export { hasCompleteValue, isFilterStateV2, pruneToRegistry };

package/dist/validation2.d.mts

@@ -1,7 +1,7 @@
-import { t as ASTNode } from "./types-VgGkS4JB.mjs";
-import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-6mcLrVG3.mjs";
-import { t as ChainRoot } from "./chainTypes-DT-9j_sG.mjs";
-import { u as ValueType } from "./types-CEQWndtF.mjs";
+import { t as ASTNode } from "./types-DfpVVjso.mjs";
+import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-COo0XQLA.mjs";
+import { t as ChainRoot } from "./chainTypes-BbFZn8a9.mjs";
+import { u as ValueType } from "./types-DFU6M0OL.mjs";
 import { ReactNode } from "react";
 
 //#region components/SmartTextInput/validation.d.ts

package/dist/{value-control-resolver-BcZiReQ7.d.mts → value-control-resolver-BoBFvQ_0.d.mts}

@@ -1,4 +1,4 @@
-import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-DEzlAdZW.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-BMpEizJP.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -46,4 +46,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
 declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-BcZiReQ7.d.mts.map
+//# sourceMappingURL=value-control-resolver-BoBFvQ_0.d.mts.map

package/dist/value-control-resolver.d.mts

@@ -1,2 +1,2 @@
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-BcZiReQ7.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-BoBFvQ_0.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/dist/variables/effect.d.mts

@@ -1,4 +1,4 @@
-import { t as MaybeSemanticTheme } from "../semanticColor-BuG977_M.mjs";
+import { t as MaybeSemanticTheme } from "../semanticColor-CmGmGRj8.mjs";
 
 //#region variables/effect.d.ts
 /**

package/dist/variables/semantic.d.mts

@@ -1,2 +1,2 @@
-import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-Duoh2Pxp.mjs";
+import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-DjKvtUi8.mjs";
 export { CssPercentage, SemanticTokens, semanticDark, semanticLight };

package/llms.txt

@@ -14,8 +14,8 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 ## Skills
 
 - [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), routing/link adapters (react-router, TanStack, custom), localization (PDSProvider strings/locale), loading states, testing, Storybook
-- [Tokens](skills/ui-authoring/TOKENS.md): Color / Spacing / Typography selection and catalog, radius, charts
-- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts, panels
+- [Tokens](skills/ui-authoring/TOKENS.md): semantic color tokens (Fg / Surface / Border / Action / Input / Feedback / Status / Opacity) with recipes and a dark-mode checklist; Spacing / Typography catalog, radius, elevation, charts
+- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, index tables, indicators, feedback, empty states, charts, panels
 - [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
 - [design-system-component-authoring](skills/design-system-component-authoring/SKILL.md): authoring a new PDS component in this repo — clarifying scope, component conventions, prop interface patterns
 
@@ -32,11 +32,15 @@ their own subpaths.
 - Layout: `Stack` / `HStack` (components/Stack), `Spacer`
 - Text: `Heading`, `Paragraph`, `Label` (components/Text)
 - Tables: `DataTable` (data views w/ pagination + sorting), `TableBox` (editable form tables), `TableLayout` + `Table`/`TableRow`/`TableCell`/`TableHeaderCell` primitives (components/Table) — `TableLayout` has built-in `isLoading`/`isEmpty`/`nullState`/`showHeader` handling
+- Index pages: `IndexTableLayout` (`patterns/IndexTableLayout`) composes the page shell around `DataTable`; hosts pass ready-made controls and own saved-view persistence
 - Page chrome: `PageHeader` (title or breadcrumbs variant), `Breadcrumbs`, `TabBar`, `BottomPanel` (resizable bottom drawer)
 - Feedback: `Spinner`, `Banner`, `Toast`, `LoadingShimmer`, `ProgressBar`
 - Overlays: `Modal`, `WizardModal` (`patterns/WizardModal`), `RightPanel`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`, `FloatingPanel`
+- Modal close button: localize the default with `PDSProvider strings={{ closeModal: translatedLabel }}` (English: "Close"), or override one modal with `contentProps.closeButtonLabel`.
 - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`
 - Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
+- Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views.
+- DataTable filters: pass `filters` and an optional `filterResolver` through `DataTable.controls` or directly to `TableControls`. Built-in filter types are `input`, `select`, `multiselect`, `combobox`, and `daterange`; a supplied `filterPanel` takes precedence. With `clientFiltering`, `column.filter` generates filters backed by TanStack column-filter state.
 - FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.
 
 ## Testing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -141,6 +141,7 @@
     "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
     "./mixins/text": "./dist/mixins/text.mjs",
     "./patterns/CardGrouping": "./dist/patterns/CardGrouping/index.mjs",
+    "./patterns/IndexTableLayout": "./dist/patterns/IndexTableLayout/index.mjs",
     "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
     "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
     "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
@@ -212,8 +213,8 @@
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
-    "@persona/design-tokens": "0.4.19",
-    "@persona/icons": "0.1.8",
+    "@persona/design-tokens": "0.4.20",
+    "@persona/icons": "0.1.9",
     "@storybook/react": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@tanstack/intent": "^0.3.6",
@@ -397,6 +398,7 @@
       "./mixins/scrollbar": "./dist/mixins/scrollbar.mjs",
       "./mixins/text": "./dist/mixins/text.mjs",
       "./patterns/CardGrouping": "./dist/patterns/CardGrouping/index.mjs",
+      "./patterns/IndexTableLayout": "./dist/patterns/IndexTableLayout/index.mjs",
       "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
       "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
       "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -24,6 +24,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `SingleColumnLayout` | One page column, with optional tabs and a page notice. `width="wide"` uses the fluid grid | `@persona/design-system/patterns/PageLayout` |
 | `SplitColumnLayout` | An 8:4 main and aside page. Same optional regions as `SingleColumnLayout`. Stacks main then aside below 768px | `@persona/design-system/patterns/PageLayout` |
 | `DataTable` | Data table — browsing tabular data with filtering, bulk actions, search, pagination, and sorting | `@persona/design-system/components/DataTable` |
+| `IndexTableLayout` | Standard page shell for a DataTable index; hosts supply controls and own saved-view persistence | `@persona/design-system/patterns/IndexTableLayout` |
 | `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Hosts own flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
 | `DatePicker` | Picking a date or date range from a calendar | `@persona/design-system/components/DatePicker` |
 | `DropdownButton` | Opening a menu of related actions from a button | `@persona/design-system/components/DropdownButton` |

package/skills/ui-authoring/PATTERNS.md

@@ -15,6 +15,7 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 | Indicators | A record’s open, pending, completed, or failed state next to other content. An in-page notice the user shouldn’t miss (success, warning, error). Use `Toast` if it can auto-dismiss |
 | [SingleColumnLayout](../../patterns/PageLayout/SingleColumnLayout.mdx) | One page column under `PageHeader`, with optional tabs and a page notice. `width="wide"` uses the fluid grid |
 | [SplitColumnLayout](../../patterns/PageLayout/SplitColumnLayout.mdx) | An 8:4 main and aside page. Same optional regions. Stacks main then aside below 768px |
+| [IndexTableLayout](../../patterns/IndexTableLayout/IndexTableLayout.mdx) | index page = `IndexTableLayout`. A standard page shell for `DataTable`; hosts provide controls and own saved-view persistence |
 | LayoutLoadingSpinner | Centered 120px loading ring that fills its container. Use as the loading state for a page or embedded app when no layout-specific shimmer exists. |
 | LayoutLoadingShimmer | Filling space while content loads |
 | [Panels](../../patterns/Panels/Panels.mdx) | Use `RightPanel` when the page should stay visible. Use `Modal` when the task needs full attention. Never a custom drawer. |
@@ -24,8 +25,9 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 
 ## Page layouts
 
-New pages render `PageHeader`, then `SingleColumnLayout` or `SplitColumnLayout`. Do not wrap the
-template in `Container` or `Section`.
+Index pages backed by `DataTable` use `IndexTableLayout`, which owns its `Container`, `PageHeader`,
+`Section`, and `Card` shell. Other pages render `PageHeader`, then `SingleColumnLayout` or
+`SplitColumnLayout`. Do not wrap those templates in `Container` or `Section`.
 
 ```tsx
 import Header from '@persona/design-system/components/PageHeader';

package/skills/ui-authoring/SKILL.md

@@ -12,8 +12,11 @@ metadata:
 
 ```tsx
 import { Color, Spacing, Typography } from '@persona/design-tokens';
+import { semanticColor } from '@persona/design-system/lib/semanticColor';
 ```
 
+- Before picking a color, use the PDS component that does the job; only custom styling needs tokens.
+- Paint colors with semantic tokens (`semanticColor(theme, 'FgPrimary', Color.TextPrimary)`), never `Color.*`, `theme.color.*` or hex — those are fixed and break dark mode. `Color.*` is only the fallback.
 - `Spacing[0–9]` = 0/4/8/12/16/24/32/40/48/56px. If you hardcode a value, use a multiple of 4 and comment what it's doing.
 - Always use complete `Typography` styles (e.g. `Typography.TextMedium`), never individual font properties.
 - See [TOKENS.md](TOKENS.md) for selection rules.
@@ -40,6 +43,7 @@ Never hand-roll `<table>`, `<thead>`, `<th>`, or `<td>`. Pick the component by u
 - **Row actions**: pass `rowActions={[{ label, onClick }]}` — never use `Popover` + custom menu items.
 - **Status cells**: use `renderCell: ({ cellValue, row }) => <Sticker ...>` in the column config.
 - **Body cell text**: use `size='md'`, not `size='sm'` (sm is for timestamps and captions only).
+- **Saved-view defaults**: `TableControls` / `DataTable.controls` accepts `onSetDefaultView` and `onUnsetDefaultView` together, or neither. With `canEditViews`, `view.isDefault` selects "Unset default" instead of "Set as default". The design system shows a confirmation modal before invoking either callback, leading with the disclaimer that the change affects the entire organization and matching delete-view cancellation, pending, retry, and focus restoration. Consumers persist the change and update `views[].isDefault`; remove host confirmations to avoid double prompts. Compact controls omit saved views. Localize `unsetDefaultView`, `setDefaultViewTitle`, `setDefaultViewConfirmation`, `unsetDefaultViewTitle`, and `unsetDefaultViewConfirmation`.
 
 ### TableLayout loading & empty behavior
 
@@ -127,7 +131,7 @@ React 18+ (TanStack Router's peer range), while PDS itself still supports React
 
 ## Localization
 
-Built-in copy in the table chrome (DataTable empty states and checkbox labels, `Pagination`,
+The `Modal` close-button label and built-in copy in the table chrome (DataTable empty states and checkbox labels, `Pagination`,
 the column configuration gear, `ControlBar` saved-view tabs, Filters V2 pills, picker, operators,
 rules builder and value controls) is English by default and translatable through `PDSProvider`:
 
@@ -139,6 +143,9 @@ rules builder and value controls) is English by default and translatable through
   keep their English defaults, and a value of the wrong kind (string vs. formatter) is ignored.
   Persona dashboards pass `useCommonStrings()` from `@persona-id/persona-dashboard-app` straight
   through.
+- `Modal`'s built-in close button uses `strings.closeModal` (English: "Close"). Override one instance
+  with `contentProps.closeButtonLabel`; it takes precedence over the provider string and does not
+  change `contentProps.showCloseButton` behavior.
 - `locale` makes table `date` / `datetime` cells and Filters V2 date values use the locale's
   medium `Intl` format ("6 oct. 2026, 16 h 39" for fr-CA). Omitted or `en-US` keeps the
   historical "Oct 6, 2026 4:39 PM". `format: { type: 'datetime', config: { showTimeZone: true } }`
@@ -177,6 +184,6 @@ Add `ComponentName.stories.tsx` for every new component or visual variant.
 
 ## Resources
 
-- [TOKENS.md](TOKENS.md) — Color / Spacing / Typography selection and catalog, radius, charts
+- [TOKENS.md](TOKENS.md) — semantic color tokens (Fg / Surface / Border / Action / Input / Feedback / Status / Opacity), recipes and dark-mode checklist; Spacing / Typography catalog, radius, elevation, charts
 - [PATTERNS.md](PATTERNS.md) — forms, layout, panels, indicators, feedback, empty states
 - [COMPONENTS.md](COMPONENTS.md) — which PDS component to use, and its import path; APIs live in each component's `.mdx`