@juwel-development/design-system 3.10.0 → 4.0.0

package/dist/types/Display/Icon/Icon.d.ts

@@ -1,26 +1,41 @@
+import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent } from 'react';
+declare const icon: (props?: ({
+    color?: "warning" | "info" | "success" | "error" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const drawings: {
+    readonly plus: readonly ["M3 8h10", "M8 3v10"];
+    readonly right: readonly ["M3 8h10", "M9 4l4 4-4 4"];
+    readonly remove: readonly ["M3 8h10"];
+    readonly dot: readonly ["M8 5a3 3 0 1 0 0 6a3 3 0 1 0 0-6z"];
     readonly sort: readonly ["M5.5 13V3", "M3 5.5l2.5-2.5L8 5.5", "M10.5 3v10", "M8 10.5l2.5 2.5 2.5-2.5"];
     readonly 'sort-ascending': readonly ["M8 13V3", "M4 7l4-4 4 4"];
     readonly 'sort-descending': readonly ["M8 3v10", "M4 9l4 4 4-4"];
+    readonly bin: readonly ["M2.5 4.5h11", "M6 4.5V3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v1.5", "M4 4.5l.6 8.1a1 1 0 0 0 1 .9h4.8a1 1 0 0 0 1-.9l.6-8.1", "M6.75 7.25v3.5", "M9.25 7.25v3.5"];
+    readonly 'bubble-exclamation': readonly ["M3.5 2h9a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7.25L4 13.75V11h-.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z", "M8 4.5v2", "M8 8.75h.01"];
+    readonly 'bubble-tick': readonly ["M3.5 2h9a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7.25L4 13.75V11h-.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z", "M5.75 6.75l1.5 1.5 3-3.5"];
 };
-export interface IIconProps {
-    /** Which drawing. A name selects a shape, never a state or a behaviour. */
-    name: keyof typeof drawings;
+export interface IIconPartProps extends VariantProps<typeof icon> {
+    /**
+     * The accessible name that makes the icon a status mark (CONTEXT.md). Give it only where the icon
+     * stands alone for a state; absent or empty, the icon stays hidden from assistive technology.
+     */
+    label?: string;
     testId?: string;
 }
-/**
- * A reusable visual glyph: the three sort indicators a consumer composes inside a header cell's
- * plain Button, or beside any text that names what the icon reinforces.
- *
- * @Guarantees — enforced on every render
- * - Hidden from assistive technology and out of the tab order: it adds no stop and no spoken name.
- * - Scales with the surrounding font-size and takes the surrounding text colour.
- * - The three drawings differ in shape, so the ordering is never carried by colour alone.
- *
- * @CallerMustEnsure
- * - The control or text beside it carries the meaning: a `Button` label, a header cell's `ariaSort`.
- *   An icon standing alone says nothing to a screen reader.
+export interface IIconProps extends IIconPartProps {
+    /** Legacy selector, retained alongside the compound drawing components. */
+    name: Exclude<keyof typeof drawings, 'plus' | 'right' | 'remove'>;
+}
+/** Legacy named drawings and five compound action drawings, all sharing em sizing, currentColor,
+ * optional status tones, label and testId. Parts take no name. Leave parts decorative inside
+ * Buttons and supply the action-specific ariaLabel on the Button itself. Remove is a minus, not bin.
  */
-export declare const Icon: FunctionComponent<IIconProps>;
+export declare const Icon: FunctionComponent<IIconProps> & {
+    Plus: FunctionComponent<IIconPartProps>;
+    Up: FunctionComponent<IIconPartProps>;
+    Down: FunctionComponent<IIconPartProps>;
+    Right: FunctionComponent<IIconPartProps>;
+    Remove: FunctionComponent<IIconPartProps>;
+};
 export {};

package/dist/types/Display/Meter/Meter.d.ts

@@ -4,9 +4,8 @@ declare const meterFill: (props?: ({
     treatment?: "neutral" | "depleting" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface IMeterProps extends VariantProps<typeof meterFill> {
-    /** The current level. Must lie inside `[min, max]`; an outside value throws
-     *  {@link MeterConfigurationError} rather than clamping - a wrong number must not render as a
-     *  plausible level. */
+    /** The current level. Off-range values clamp the visual fill to the nearest bound;
+     *  `aria-valuenow` retains the raw value. */
     value: number;
     /** The bottom of the scale. Defaults to `0`. */
     min?: number;
@@ -29,8 +28,8 @@ export interface IMeterProps extends VariantProps<typeof meterFill> {
  * - The root carries `role="meter"`, `aria-valuenow`/`aria-valuemin`/`aria-valuemax`, the `label`
  *   as its accessible name, and `aria-valuetext` exactly when `valueText` is supplied. It is not
  *   focusable, and the visual fill is hidden from the accessibility tree.
- * - The filled share is `(value - min) / (max - min)` of the container and begins at logical
- *   inline-start under both LTR and RTL direction.
+ * - The filled share is `(value - min) / (max - min)`, clamped to `[0, 1]`, and begins at logical
+ *   inline-start under both LTR and RTL direction. `aria-valuenow` retains the raw value.
  * - Neutral paints the fill with `meterFill`; `depleting` maps the normalized level linearly
  *   through OKLab from `meterFill` at the maximum to `error` at the minimum - no threshold, no
  *   wording, no icon (docs/adr/0010-meter-depletion-is-a-treatment.md).
@@ -39,7 +38,7 @@ export interface IMeterProps extends VariantProps<typeof meterFill> {
  *   radius token - Meter is not a control), and draws a persistent one-pixel `rule` line that
  *   identifies the whole capacity against the surface.
  * - Invalid numeric configuration throws {@link MeterConfigurationError}: non-finite `value`,
- *   `min` or `max`, `min >= max`, or a value outside the inclusive range. Nothing is clamped.
+ *   `min` or `max`, or `min >= max`.
  * - No visible wording of its own, no numeric readout, no caption slot, no `className`/`style`
  *   passthrough.
  *

package/dist/types/Display/Rule/Rule.d.ts

@@ -0,0 +1,22 @@
+import type { FunctionComponent } from 'react';
+export interface IRuleProps {
+    testId?: string;
+}
+/**
+ * A decorative horizontal hairline between two blocks of one arrangement.
+ *
+ * @Guarantees
+ * - One CSS pixel in the theme's border role, spanning its holder's width.
+ * - Forced colours use CanvasText so the hairline survives the user's palette.
+ * - Always hidden from assistive technology, with no role, content or focus stop.
+ * - No margin or padding: the surrounding arrangement owns space on both sides.
+ *
+ * @CallerMustEnsure
+ * - Place it between blocks in a column Stack; Stack's gap supplies the space role.
+ * - Rule is never a semantic separator. A thematic break that must be conveyed to
+ *   assistive technology requires semantic markup instead of this component.
+ *
+ * @UXGuidelines
+ * - Use Collection for a semantic list with rules between items; Rule creates no list.
+ */
+export declare const Rule: FunctionComponent<IRuleProps>;

package/dist/types/Display/Table/Table.d.ts

@@ -2,6 +2,9 @@ import type { VariantProps } from 'class-variance-authority';
 import { type FunctionComponent, type ReactNode } from 'react';
 import type { Observable, Subject } from 'rxjs';
 declare const table: (props?: ({
+    bounded?: boolean | null | undefined;
+    selectionTreatment?: "marker" | "highlight" | null | undefined;
+    captionVisibility?: "hidden" | "visible" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const tableCell: (props?: ({
@@ -21,6 +24,11 @@ type TableColumnWidthRole = 'name' | 'fact' | 'figure' | 'action';
  * optional named minimum as its floor. Declared once on `Table.Root`, in cell order.
  */
 export type TableColumnAllocation = {
+    /** Fits the widest rendered action group, without sharing surplus width. */
+    readonly width: 'icon-action';
+    readonly weight?: never;
+    readonly minWidth?: never;
+} | {
     /** The role whose width this column takes exactly, at any available width. */
     readonly width: TableColumnWidthRole;
     readonly weight?: never;
@@ -36,13 +44,15 @@ export type TableColumnAllocation = {
     readonly minWidth?: TableColumnWidthRole;
 };
 export interface ITableRootProps extends VariantProps<typeof table> {
+    /** Opt into parent-bounded scrolling on both axes with a pinned header; short tables keep natural height. */
+    bounded?: boolean;
     /** The table's accessible name. Rendered as the first child; always present. */
     caption: string;
     /** What the note column is. Governs narrow-viewport behaviour; omit when there is none. */
     notes?: 'supplementary' | 'content';
     /** The columns' allocations, in the order the cells of every row are written. Omit it and widths
      *  follow content as before; declare it and every row shares one allocation the rows' content
-     *  cannot move, and the narrow-viewport `notes` behaviour is replaced by residual scrolling. */
+     *  cannot move (except content-sized `icon-action` tracks), and the narrow-viewport `notes` behaviour is replaced by residual scrolling. */
     columns?: readonly TableColumnAllocation[];
     children?: ReactNode;
     testId?: string;
@@ -83,26 +93,43 @@ export interface ITableHeaderCellProps extends VariantProps<typeof tableHeaderCe
  * @Guarantees — enforced on every render
  * - Renders semantic `table`/`thead`/`tbody`/`tfoot`/`tr`/`th`/`td`, and works with JavaScript off.
  * - `Root` renders its required `caption` as the table's first child, so every table is named.
+ *   `captionVisibility` defaults to `visible`; `hidden` visually clips the caption out of flow,
+ *   including its spacing, while preserving its native accessible name and the scroll wrapper's name.
+ *   Hide it only when visible text directly above the table already names what it lists; the
+ *   enclosing arrangement owns the gap above the table. The consumer still supplies the caption.
  * - The block reads as a table from two rule weights alone: the heavier `rule` above the first row,
- *   `border` hairlines between rows, and no bottom rule on the last. No cell borders, fill, zebra or hover.
+ *   `border` hairlines between rows, and no bottom rule on the last. No cell borders, default fill, zebra or hover.
  * - `Cell variant="value"` sets tabular figures; `variant="note"` does not. Both at the 15px small role.
  * - `HeaderCell` emits the `scope` it is given; none is inferred. It emits `ariaSort` the same way:
  *   the attribute states the displayed order and the component never orders, cycles or requests one.
  * - Residual horizontal overflow scrolls in every `notes` mode, with no opt-in. The wrapper is
  *   keyboard-reachable while there is something to scroll - always, as a named region, with no note
- *   column; as a named group only once the table overflows, with one. No vertical bound is ever set:
- *   a long table sits inside a `ScrollContainer` with `axis="vertical"`, which owns that axis.
+ *   column; as a named group only once the table overflows, with one. Bounded tables instead expose
+ *   a named group and keyboard stop only while either axis overflows, retained while focused.
+ * - `bounded` makes this same wrapper own both scroll axes within the parent's allocated height.
+ *   Short tables retain natural height; unsized parents allow natural growth. Only the header pins,
+ *   on the themed surface; captions scroll normally and keep naming the table. All columns and rows
+ *   remain tabular at every width, including both notes modes. Unbounded behavior is unchanged.
+ * - Focus reveals rows and controls below the pinned header inside the wrapper. Selection updates
+ *   alone never scroll. The wrapper reserves the shared focus ring's room.
  * - `Root columns` declares every column's allocation once, in cell order, and every row shares it:
  *   a fixed column takes its named width role at any available width; proportional columns share
  *   the width the fixed ones leave by their weights, each floored at its named minimum, and while a
  *   minimum holds one column the others share what is left. A fixed width below its minimum is the
- *   minimum. Nothing a row holds moves a boundary: filtering, sorting, paging, long or short content,
+ *   minimum. Except for `icon-action`, nothing a row holds moves a boundary: filtering, sorting, paging, long or short content,
  *   an empty body and its repopulation all leave the allocation as it was. Only the definitions, the
  *   theme's `--table-column-*` values and the available width can. All-fixed columns do not stretch.
+ * - `{ width: 'icon-action' }` fits the widest rendered cell (including its header and insets),
+ *   takes no surplus width, and may shrink after filtering. Compose multiple plain icon buttons
+ *   in `Cluster gap="stack"`; max-content track sizing keeps the group on one line.
  * - With `columns` declared, no narrow-viewport rule applies whatever `notes` says: the note column
  *   stays, rows stay tabular, and what does not fit scrolls in the wrapper as above. Text wraps inside
- *   its allocation, an unbroken run included; the table never truncates, hides or resizes content.
+ *   its allocation, an unbroken run included; the table does not itself truncate, hide or resize content.
  *   Without `columns`, widths follow content and both `notes` behaviours are exactly as before.
+ * - Exception: a consumer may mark individual `P` or `Note` content with `truncate`. Only that
+ *   text stays on one line and ellipsizes at its allocated inline end, in either column layout;
+ *   its full DOM text remains accessible and does not force the table wider. Unmarked siblings
+ *   retain their wrapping/overflow behavior; fixed column widths and minimums still hold.
  * - `Root density` insets every header and body cell from one theme pair: `comfortable` (the
  *   default, the former spacing exactly) or `compact`, per table. It moves no type size and no
  *   control's own dimensions. A non-positive or non-finite `weight` throws
@@ -117,6 +144,10 @@ export interface ITableHeaderCellProps extends VariantProps<typeof tableHeaderCe
  *   emitted reads unselected; a replaced source reads unselected until it emits; unmounting
  *   unsubscribes. The selection input is independent of `onClick$`, so a row may be selected and
  *   noninteractive, interactive and unselected, or both. Rendering and selection changes emit nothing.
+ * - `Root selectionTreatment="highlight"` adds `selectedSurface` behind selected rows only;
+ *   the default `marker` preserves the former presentation. Neither treatment changes on hover.
+ *   The marker remains a border in forced colours, where backgrounds may be suppressed; selection
+ *   stays distinct from the focus outline. A nested table chooses its own treatment.
  * - The row stays a `tr` in a `table`: no grid role, no arrow-key navigation. `aria-selected` is a
  *   WAI-ARIA 1.2 state of `row` and valid here, but Chromium exposes a row's selected state only
  *   inside a `grid`, so Chrome and Edge screen readers do not announce it on these rows (accepted
@@ -127,12 +158,31 @@ export interface ITableHeaderCellProps extends VariantProps<typeof tableHeaderCe
  *   clipped by the scroll region. A table with neither keeps its static geometry exactly.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - For bounded mode supply finite usable parent height, with room for the header and readable rows.
+ *   Compose directly inside `Pane.Body scrollOwner="child"` or `Dialog.Content scrollOwner="child"`:
+ *   those holders add no scrolling. Intermediate wrappers must preserve the height allocation.
+ *   Fixed surrounding content must fit; no component promises impossible viewport fitting.
+ * - For narrow comparisons use weighted columns without minimums when the content can wrap into
+ *   their shares. Fixed widths and declared minimums retain their meaning; controls may overflow.
+ * - A theme's `selectedSurface` differs from resting/hover surfaces and keeps foreground, muted
+ *   and link/status text at 4.5:1, and the marker, rule and focus ring at 3:1.
+ *   Highlighted rows use selectedError for their error ink/fill. Other consumer-composed inks and
+ *   controls must meet their own contrast constraints against this surface too.
  * - Every row writes exactly as many cells as there are `columns`, in the same order. A row with
  *   fewer leaves tracks empty; one with more breaks onto a second line of its own row.
  * - A cell whose content cannot wrap - a `Button`, an `Input`, an image - sits in a column whose
  *   fixed width or minimum holds it: the `action` role holds one standard control at comfortable
  *   density. The allocation never widens for content, so an under-allocated control overflows its
- *   cell rather than moving its neighbours.
+ *   cell rather than moving its neighbours. The content-sized icon-action allocation is the exception.
+ * - Every icon-only Button needs an action-specific `ariaLabel`; leave its nested Icon decorative.
+ *   Prefer labelled buttons wherever there is room. No tooltip is required. Only plain buttons
+ *   inherit cell typography without increasing a single-line row's height; ghost keeps its padding.
+ * - For icon actions, theme `--space-stack` must be at least the focus width plus offset, so a ring
+ *   cannot reach its neighbour. Twice the cell block inset must hold that same ring extent
+ *   between adjacent rows. Keep line height at least one em. The wrapper
+ *   reserves ring room at scroll boundaries without changing row height.
+ * - For truncated text, provide an operable path to the full wording (for example row activation
+ *   opening the item). Truncation must not hide essential content or interactive descendants.
  * - A cell's `align` and `variant` are the consumer's as before; an allocation sets neither.
  * - Each row's `onClick$` and `isSelected$` are tied to that row's stable identity, so a reordered or
  *   temporarily removed row keeps its association. Table holds no identity, registry or policy, and

package/dist/types/Display/Typography/Eyebrow/Eyebrow.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const eyebrow: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IEyebrowProps extends VariantProps<typeof eyebrow> {
     children: ReactNode;

package/dist/types/Display/Typography/H1/H1.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h1: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH1Props extends VariantProps<typeof h1> {
     children: ReactNode;

package/dist/types/Display/Typography/H2/H2.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h2: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH2Props extends VariantProps<typeof h2> {
     children: ReactNode;

package/dist/types/Display/Typography/H3/H3.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h3: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH3Props extends VariantProps<typeof h3> {
     children: ReactNode;

package/dist/types/Display/Typography/H4/H4.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h4: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH4Props extends VariantProps<typeof h4> {
     children: ReactNode;

package/dist/types/Display/Typography/H5/H5.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h5: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH5Props extends VariantProps<typeof h5> {
     children: ReactNode;

package/dist/types/Display/Typography/H6/H6.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h6: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH6Props extends VariantProps<typeof h6> {
     children: ReactNode;

package/dist/types/Display/Typography/Note/Note.d.ts

@@ -1,7 +1,9 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const note: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    emphasis?: "strong" | "regular" | null | undefined;
+    truncate?: boolean | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface INoteProps extends VariantProps<typeof note> {
     /** The annotation. A `ReactNode` rather than a string, because these lines carry inline links. */
@@ -12,16 +14,27 @@ export interface INoteProps extends VariantProps<typeof note> {
  * A short annotation at the small type role in the secondary family — a routing line above a submit
  * button, a privacy line at the point of submission, a line beside a control. Not reading matter:
  * it takes no measure and sits in no reading column, which is what separates it from `Prose.Tail`
- * at the same size, and it carries neither the tracking nor the weight that make an `Eyebrow`.
+ * at the same size. It carries no tracking and inherits weight unless emphasis is requested.
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
  * - `color` selects `foreground` (default), `muted`, `success`, `warning`, `error` or `info`;
  *   nothing else paints text. A status tone changes colour only.
- * - Emits no tracking, no font-weight, no measure and no margin under any prop.
+ * - Emits no tracking, no measure and no margin under any prop.
  * - Carries no ARIA role and no live region under any prop.
+ * - `truncate` opts into one line with an ellipsis at the inline end, following inherited writing
+ *   direction. The complete text stays in the DOM and accessibility tree. Omitted or false wraps
+ *   as before. Marked text can shrink inside ordinary and allocated Table cells.
+ * - `emphasis="strong"` reads `--font-weight-strong` without changing size, family or line height.
+ *   This is visual only: no `strong` element, importance semantics or live announcement is added.
+ *   Omitted or `regular` leaves weight inherited, exactly as before.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Communicate state in words or an accessible name; weight alone must never carry a state.
+ * - Allocate a width through the enclosing layout: truncated text does not size its holder.
+ * - Make the full wording reachable to sighted readers, for example by opening the item. Never
+ *   truncate essential content without that path, or put links, controls or line breaks inside
+ *   truncated text; use text and noninteractive inline phrasing only. No tooltip is added.
  * - The device has three carriers and this primitive is only one: use it for an annotation no other
  *   component owns. A form's own message belongs to `Form`'s `note` and a table's to its note cell,
  *   each painted by the component that owns it.

package/dist/types/Display/Typography/P/P.d.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const p: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    emphasis?: "strong" | "regular" | null | undefined;
+    truncate?: boolean | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface IPProps extends VariantProps<typeof p> {
+export interface IPProps extends VariantProps<typeof p> {
     children: ReactNode;
     testId?: string;
 }
@@ -16,8 +18,19 @@ interface IPProps extends VariantProps<typeof p> {
  *   theme re-points it, #120), sized by `--text-body` and led by `--leading-body`.
  * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
  *   paints text. A status tone changes colour only and adds no announcement semantics.
+ * - `truncate` opts into one line with an ellipsis at the inline end, following inherited writing
+ *   direction. The complete text stays in the DOM and accessibility tree. Omitted or false wraps
+ *   as before. Marked text can shrink inside ordinary and allocated Table cells.
+ * - `emphasis="strong"` reads `--font-weight-strong` without changing size, family or line height.
+ *   This is visual only: no `strong` element, importance semantics or live announcement is added.
+ *   Omitted or `regular` leaves weight inherited, exactly as before.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Communicate state in words or an accessible name; weight alone must never carry a state.
+ * - Allocate a width through the enclosing layout: truncated text does not size its holder.
+ * - Make the full wording reachable to sighted readers, for example by opening the item. Never
+ *   truncate essential content without that path, or put links, controls or line breaks inside
+ *   truncated text; use text and noninteractive inline phrasing only. No tooltip is added.
  * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
  *   does not constrain its own width.
  * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its

package/dist/types/Display/Typography/Prose/Prose.d.ts

@@ -1,16 +1,20 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { FunctionComponent, ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
+declare const proseRoot: (props?: ({
+    variant?: "default" | "letter" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const proseBody: (props?: ({
-    color?: "error" | "foreground" | "muted" | "success" | "warning" | "info" | null | undefined;
+    letter?: boolean | null | undefined;
+    color?: "warning" | "info" | "success" | "error" | "muted" | "foreground" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface IProseRootProps {
+export interface IProseRootProps extends VariantProps<typeof proseRoot> {
     children?: ReactNode;
     testId?: string;
 }
 interface IProseLedeProps {
     children?: ReactNode;
 }
-interface IProseBodyProps extends VariantProps<typeof proseBody> {
+interface IProseBodyProps extends Pick<VariantProps<typeof proseBody>, 'color'> {
     children?: ReactNode;
 }
 interface IProseTailProps {
@@ -22,15 +26,19 @@ interface IProseTailProps {
  * bounding the column. Composed from the four members; the consumer supplies the copy.
  *
  * @Guarantees — enforced on every render
- * - `Root` renders a `div` (never a `section`: it owns no landmark and no heading), capped at
+ * - Ordinary `Root` renders a `div` (never a `section`: it owns no landmark and no heading), capped at
  *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
+ * - `Root variant="letter"` selects --measure-letter resolved against its own letter family and
+ *   size, capped by available width. Body uses --text-letter and --leading-letter, and --font-letter
+ *   falling back to --font-primary at the element. Lede and Tail keep their explicit roles.
  * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
  *   rhythm around the block, and the air the block wants is at its edges and inside the type.
- * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the body role with a
+ * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the selected root's role with a
  *   `foreground`, `muted`, `success`, `warning`, `error` or `info` `color`; `Tail` at the small
  *   role, always muted. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Use Body throughout a letter, including the consumer-worded salutation and signature.
  * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
  *   column around it - in a form, a card, a table cell - use `P` instead.
  * - Status-toned content communicates its status without relying on colour. The caller owns any

package/dist/types/Interaction/Button/Button.d.ts

@@ -2,9 +2,9 @@ import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 import type { Subject } from 'rxjs';
 declare const button: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "outlined" | "destructive" | "plain" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "ghost" | "outlined" | "destructive" | "plain" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface IButtonProps extends VariantProps<typeof button> {
+export interface IButtonProps extends VariantProps<typeof button> {
     /** Optional: an icon-only button renders none, and names itself with `ariaLabel` instead. */
     children?: ReactNode;
     onClick$?: Subject<void>;
@@ -29,7 +29,9 @@ interface IButtonProps extends VariantProps<typeof button> {
  * - `destructive`: an action that removes or ends something, filled with the `error` status tone
  *   and inked with `errorForeground`. The tone reinforces words it never replaces: the label, or
  *   the `ariaLabel` of a symbol-only button, must say what the action does
- * - `ghost`: the padded text action with a hover underline and no floor
+ * - `ghost`: the padded text action with a hover underline and no floor. With an `ariaLabel` and
+ *   the bin `Icon` as its only child it is the quiet delete: the unfilled form of a secondary
+ *   destructive action at the corner of a block of content, where `destructive` is the filled form
  *
  * The four faced variants share the control minimum width and inset, so a row of them aligns, and
  * every one of them shrinks and wraps its label where its holder is narrower than that.
@@ -43,17 +45,23 @@ interface IButtonProps extends VariantProps<typeof button> {
  *   text around it, with no face, padding, corner or hover underline of its own. Reach for it where
  *   the action belongs to a line of content - a sortable column header composed with `Icon` - and
  *   for `ghost` where a quiet but still button-shaped action is wanted
+ * - `link` is an inline action with the prose Link treatment: persistent underline and link ink,
+ *   inheriting the surrounding face, size and line height, with no inset, corner or minimum width.
+ *   Use `Link` when there is an address; use `Button variant="link"` with `onClick$` when there is
+ *   none. The consumer owns the action and navigation. Supply text, not nested interactive content.
  * - Maintain consistent button styling throughout the application
  * - Provide visual feedback on hover/active states
- * - Ensure sufficient touch target size (minimum 44x44px) for mobile users
+ * - Inline actions take their target size from the surrounding text; use faced actions for standalone controls
  * - Position primary actions on the right for multi-button layouts
  * - A submit button's busy state is a label swap ("Send" to "Sending…"), never a spinner: it costs
  *   nothing to render server-side and keeps a Form's `sending` state driver-agnostic
  *
  * @Accessibility
  * - Ensure adequate color contrast (4.5:1 minimum ratio)
- * - Provide focus styles for keyboard navigation: every variant, `plain` included, draws the shared
+ * - Provide focus styles for keyboard navigation: every variant, including `plain` and `link`, draws the shared
  *   focus ring and nothing else changes on focus
+ * - A disabled `link` retains its underline, uses the disabled ink and does not thicken on hover.
+ *   Native disabled semantics prevent activation and remove it from the tab sequence.
  * - A disabled `plain` button is told apart by the `disabled` text tone and keeps native disabled semantics
  * - Use appropriate ARIA attributes when needed
  * - Status colour never stands alone: a destructive action is named by its words or symbol

package/dist/types/Interaction/Slider/Slider.d.ts

@@ -42,5 +42,8 @@ export interface ISliderProps {
  * `Input` too: visible, associated, and the only text the component renders (#112). It is still
  * a live control and not a form field, so none of Input's annotations - hint, error, optional
  * marker - come with it. `disabled` is the explicit non-operable state.
+ *
+ * An off-range value renders at the nearest bound through the native control. The consumer still
+ * owns the value: the clamped position is not emitted on `onInput$` until the user moves the thumb.
  */
 export declare const Slider: FunctionComponent<ISliderProps>;

package/dist/types/Interaction/Stepper/Stepper.d.ts

@@ -0,0 +1,59 @@
+import { type FunctionComponent, type ReactNode } from 'react';
+import type { Observable, Subject } from 'rxjs';
+export interface IStepperRootProps {
+    /** Consumer-owned selection. No panel is active before this source first emits. */
+    active$: Observable<string>;
+    /** Requests selection, including blocked steps, without changing the input. */
+    onSelect$: Subject<string>;
+    label: string;
+    children: ReactNode;
+    testId?: string;
+}
+export interface IStepperListProps {
+    children: ReactNode;
+    testId?: string;
+}
+export interface IStepperStepProps {
+    /** Stable identity, unique within Root, paired with exactly one Panel. */
+    value: string;
+    label: string;
+    status: 'done' | 'open' | 'blocked';
+    /** Noninteractive consumer content, rendered whole and included in the accessible name. */
+    valueText: ReactNode;
+    /** Optional visible wording, associated as the control's accessible description. */
+    statusContent?: ReactNode;
+    testId?: string;
+}
+export interface IStepperPanelProps {
+    /** The tab this panel belongs to - exactly one panel per tab value within a Root. */
+    value: string;
+    /** Mounted only while active; departure unmounts it, return mounts it fresh. */
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * Connected form steps with independent status and consumer-controlled selection.
+ * @Guarantees
+ * - Root observes active$ and emits identities through onSelect$ without changing selection.
+ * - Source replacement clears selection until the new source emits; subscriptions tear down.
+ * - Done and blocked steps remain selectable. Left/Right wraps focus and requests selection.
+ * - Label and value text name each tab; optional visible status content describes it.
+ * - Only the active panel mounts content; returning mounts fresh with no state cache.
+ * - The row wraps text before scrolling horizontally and reveals focused steps.
+ * - Root takes its parent's height; Panel passes the remainder without owning scrolling.
+ *   An unsized parent retains natural content height.
+ * @CallerMustEnsure
+ * - Supply a valid selected identity, unique stable Step values and matching Panels.
+ * - Compose one List of direct Steps (arrays/fragments supported), no wrapper components.
+ * - For bounded content, List and Panels are direct DOM children of Root and the Panel's
+ *   direct child accepts height (for example Pane). Fixed content must leave usable body space.
+ * - Value and status slots contain no interactive descendants. Supply localized status wording
+ *   when spoken status is needed; the library supplies shapes but no status translations.
+ * - Persist form state outside Stepper and restore it into controls when they mount.
+ */
+export declare const Stepper: {
+    readonly Root: FunctionComponent<IStepperRootProps>;
+    readonly List: FunctionComponent<IStepperListProps>;
+    readonly Step: FunctionComponent<IStepperStepProps>;
+    readonly Panel: FunctionComponent<IStepperPanelProps>;
+};

package/dist/types/Interaction/Stepper/StepperCompositionError.d.ts

@@ -0,0 +1,3 @@
+export declare class StepperCompositionError extends Error {
+    constructor(member: string);
+}

package/dist/types/Interaction/Switch/Switch.d.ts

@@ -0,0 +1,20 @@
+import { type FunctionComponent } from 'react';
+import type { Observable, Subject } from 'rxjs';
+export interface ISwitchProps {
+    /** A visible, stable name for the setting, not a changing on/off caption. */
+    label: string;
+    /** Consumer-owned state. Off until the current source first emits, including on replacement. */
+    checked$: Observable<boolean>;
+    /** Requests the opposite of the displayed state; only an input emission changes the display. */
+    onChange$: Subject<boolean>;
+    /** Native disabled conduct; the current state remains visible. */
+    disabled?: boolean;
+    testId?: string;
+}
+/**
+ * One immediate binary setting, named by its visible label. A native button supplies a single
+ * tab stop and Space/Enter activation without submitting a surrounding form. Thumb position and
+ * aria-checked expose the input state; neither activation nor focus changes it independently.
+ * Use Choices for described alternatives, or a checkbox in a Form for a submitted selection.
+ */
+export declare const Switch: FunctionComponent<ISwitchProps>;