@reliability-design/web 1.4.9 → 1.4.10

package/dist/components/rel-chip/README.md

@@ -1,138 +1,141 @@
-# rel-chip
-
-`<rel-chip>` is the compact chip from the Figma "Chip" component: a short label with tone × variant colouring, an optional leading icon or initials avatar, an optional trailing icon, a remove control and opt-in drag-and-drop. Use it for tags, active filters, selected values in a multi-select and small status labels. Do not use it as a general button (use `rel-button`) or for status counts (use `rel-badge`); for long-lived toggles use `rel-switch` or `rel-checkbox`.
-
-## Usage
-
-```html
-<!-- Basic chip (tone="neutral" variant="fill" size="medium" border="default") -->
-<rel-chip label="Active"></rel-chip>
-
-<!-- Tones -->
-<rel-chip label="Info" tone="info"></rel-chip>
-<rel-chip label="Warning" tone="warning"></rel-chip>
-<rel-chip label="Error" tone="destructive"></rel-chip>
-<rel-chip label="Success" tone="success"></rel-chip>
-
-<!-- Subtle variant: tinted background, tone-coloured text -->
-<rel-chip label="Subtle" tone="info" variant="subtle"></rel-chip>
-
-<!-- Sizes -->
-<rel-chip label="Small" size="small"></rel-chip>
-<rel-chip label="Medium" size="medium"></rel-chip>
-<rel-chip label="Large" size="large"></rel-chip>
-
-<!-- Deprecated aliases — these still render, but prefer the canonical spellings above.
-     tone="danger" is an alias of tone="destructive" and logs a one-time console notice.
-     size="sm" / "md" / "lg" are alternative spellings (NOT deprecated, no notice). -->
-<rel-chip label="Error" tone="danger"></rel-chip>
-<rel-chip label="Small" size="sm"></rel-chip>
-
-<!-- Fully rounded corners -->
-<rel-chip label="Rounded" border="rounded"></rel-chip>
-
-<!-- Leading / trailing icons (icon dictionary names, rendered via <rel-icon>) -->
-<rel-chip label="Settings" leading-icon="settings"></rel-chip>
-<rel-chip label="Next" trailing-icon="chevron-right"></rel-chip>
-
-<!-- Initials avatar (takes precedence over leading-icon) -->
-<rel-chip label="John Doe" avatar="JD"></rel-chip>
-
-<!-- Removable chip -->
-<rel-chip id="removableChip" label="Removable" removable></rel-chip>
-<script>
-  document.getElementById("removableChip").addEventListener("removed", () => {
-    console.log("Chip was removed");
-  });
-</script>
-
-<!-- Draggable chip: native drag-and-drop plus Left/Right arrow reordering -->
-<rel-chip id="dragChip" label="Reorder me" draggable-chip></rel-chip>
-<script>
-  document.getElementById("dragChip").addEventListener("chip-move", (e) => {
-    console.log("move", e.detail.direction); // -1 = left, 1 = right
-  });
-</script>
-```
-
-<!-- readme-gen:start -->
-
-<!-- Generated from rel-chip.ts — do not edit; run readme-generate.mjs -->
-
-## API
-
-### Attributes / Properties
-
-| Property | Attribute | Type | Default | Description |
-| --- | --- | --- | --- | --- |
-| `label` | `label` | `string` | `"Label"` | Text shown in the chip; also its accessible name and the drag payload. |
-| `tone` | `tone` | `"neutral" \| "destructive" \| "warning" \| "success" \| "info" \| "danger"` | `"neutral"` | Colour tone (Figma Tone): `neutral`, `destructive`, `warning`, `success` or `info`. Combined with `variant`. `"danger"` is a deprecated alias of `"destructive"`: it keeps working, logs a one-time console notice, and is normalised to `"destructive"` on the property and the reflected attribute. Reflected. |
-| `variant` | `variant` | `"fill" \| "subtle" \| "primary" \| "secondary"` | `"fill"` | Emphasis (Figma Style): `fill` = solid tone background, `subtle` = tinted background with tone-coloured text. Figma's own spellings `primary` and `secondary` are accepted and normalised to `fill` / `subtle`. Reflected. |
-| `size` | `size` | `"small" \| "medium" \| "large" \| "sm" \| "md" \| "lg"` | `"medium"` | Height scale (Figma Size): `small` 24px / body-sm, `medium` 28px / body-md, `large` 32px / body-lg. Icon size follows (12 / 14 / 16px). `sm` / `md` / `lg` are accepted and normalised to the full words. Reflected. |
-| `border` | `border` | `"default" \| "rounded"` | `"default"` | Corner shape (Figma Border): `default` = 4px radius, `rounded` = fully rounded with 12px horizontal padding. Reflected. |
-| `leadingIcon` | `leading-icon` | `string` | `undefined` | Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon> before the label. Ignored when `avatar` is set. |
-| `trailingIcon` | `trailing-icon` | `string` | `undefined` | Icon name from the generated icon dictionary, rendered after the label. |
-| `avatar` | `avatar` | `string` | `undefined` | Initials text for the avatar (e.g. "JD"), rendered as a `<rel-avatar type="text">` before the label. Mutually exclusive with leadingIcon (avatar wins). |
-| `removable` | `removable` | `boolean` | `false` | Shows a remove (close) button after the label; clicking it sets `removed` and fires `removed`. |
-| `removed` | `removed` | `boolean` | `false` | `true` once the chip has been removed — the host is hidden via `:host([removed])`. Reflected so CSS and Angular can see it; reset to `false` to show the chip again. Reflected. |
-| `draggableChip` | `draggable-chip` | `boolean` | `false` | Opt-in native drag-and-drop: sets `draggable="true"` on the host, shows the Figma "Dragged" state during a real drag gesture, and makes Left/Right arrow keys fire `chip-move`. |
-
-## Events
-
-| Event | Detail | Bubbles / composed | Description |
-| --- | --- | --- | --- |
-| `chip-move` | `{ direction: e.key === "ArrowLeft" ? -1 : 1 }` | bubbles / composed | Fired on Left/Right arrow keys when `draggable-chip` is set — the keyboard alternative to drag-and-drop; the container should reorder the chip. Detail: `{ direction: -1 \| 1 }` (-1 = left, 1 = right). |
-| `removed` | — | bubbles / composed | Fired when the chip is removed via its remove button or Delete/Backspace (after `removed` is set to `true`). No detail. |
-
-## Slots
-
-| Slot | Description |
-| --- | --- |
-| — | This element has no slots. |
-
-## CSS Parts
-
-| Part | Description |
-| --- | --- |
-| `base` | The chip body (`.chip`) that carries size, tone, variant and border styling |
-| `icon` | The leading `<rel-icon>` (rendered only when `leading-icon` is set and no avatar) |
-| `label` | The label text |
-
-## Tokens / CSS Variables
-
-### Component hooks
-
-Set these on the host (or an ancestor) to customise the element without touching design tokens.
-
-| Custom property | Default | Description |
-| --- | --- | --- |
-| `--rel-chip-focus-ring` | `var(--rel-border-focus)` | Colour of the keyboard focus outline; default `var(--rel-border-focus)` |
-
-<!-- readme-gen:end -->
-
-## Accessibility
-
-- The chip body is a `<span role="button" tabindex="0">` whose `aria-label` is the `label` text. The shadow root uses `delegatesFocus`, so calling `focus()` on the host focuses that inner span.
-- The remove control is a real `<button>` labelled `Remove {label}`; it is a second Tab stop after the chip body.
-- Removing a chip (button or keyboard) calls the shared `announce()` helper with `"{label} removed"`, so screen readers hear the removal even though the chip disappears.
-- Icons and the avatar are decorative; the accessible name comes only from `label`.
-
-| Key | Action |
-|-----|--------|
-| `Tab` | Focus the chip body, then the remove button (when `removable`) |
-| `Enter` / `Space` | Re-dispatches a `click` on the host so consumer `click` handlers run |
-| `Delete` / `Backspace` | Removes the chip when `removable` (sets `removed`, fires `removed`) |
-| `ArrowLeft` / `ArrowRight` | Fires `chip-move` with `direction: -1` / `1` when `draggable-chip` is set |
-
-Focus is shown as a 1.5px outline in `--rel-chip-focus-ring` (defaults to `--rel-border-focus`) around the whole chip, plus an inner `--rel-border-focus-inner` ring, only for keyboard focus (`:focus-visible`). The remove button gets its own `currentColor` outline.
-
-## Notes / Edge Cases
-
-- `avatar` and `leading-icon` are mutually exclusive: when both are set the avatar wins and a console warning is logged. The avatar is a `rel-avatar type="text"` sized to fill the chip's content box — 16 / 20 / 24px for `sm` / `md` / `lg`, driven through `--rel-avatar-size` rather than the avatar's own `size` presets (the small chip needs 16px, below the 20px `xs` floor).
-- The trailing icon has no CSS part; only the leading icon is exposed as `icon`.
-- The remove `✕` is drawn at the same size as the leading/trailing icons (12 / 14 / 16px) and in the same colour as the label — it carries no opacity dulling, so it keeps the label's contrast ratio on the `subtle` tones.
-- `border="rounded"` also widens the horizontal padding to 12px at every size, per the Figma spec.
-- `removed` is reflected: once `true` the host is `display: none` via `:host([removed])`. Set it back to `false` to show the chip again. Clicking the remove button stops propagation, so chip-level `click` handlers do not fire on removal.
-- `draggable-chip` sets the native `draggable="true"` attribute on the host and puts the label in `dataTransfer` as `text/plain`. During a real drag the host carries a `dragging` attribute that maps to the Figma "Dragged" state; the same look is used for `:active`. The component does not reorder anything itself — the container must handle `drop` / `chip-move`.
-- The remove button has no hover state of its own; the hover/pressed colours belong to the whole chip (per-tone action tokens).
-- The host is `display: inline-flex` with `flex: 0 0 auto`, so chips flow inline and never stretch in a flex row.
+# rel-chip
+
+`<rel-chip>` is the compact chip from the Figma "Chip" component: a short label with tone × variant colouring, an optional leading icon or initials avatar, an optional trailing icon, a remove control and opt-in drag-and-drop. Use it for tags, active filters, selected values in a multi-select and small status labels. Do not use it as a general button (use `rel-button`) or for status counts (use `rel-badge`); for long-lived toggles use `rel-switch` or `rel-checkbox`.
+
+## Usage
+
+```html
+<!-- Basic chip (tone="neutral" variant="fill" size="medium" border="default") -->
+<rel-chip label="Active"></rel-chip>
+
+<!-- Tones -->
+<rel-chip label="Info" tone="info"></rel-chip>
+<rel-chip label="Warning" tone="warning"></rel-chip>
+<rel-chip label="Error" tone="destructive"></rel-chip>
+<rel-chip label="Success" tone="success"></rel-chip>
+
+<!-- Subtle variant: tinted background, tone-coloured text -->
+<rel-chip label="Subtle" tone="info" variant="subtle"></rel-chip>
+
+<!-- Sizes -->
+<rel-chip label="Small" size="small"></rel-chip>
+<rel-chip label="Medium" size="medium"></rel-chip>
+<rel-chip label="Large" size="large"></rel-chip>
+
+<!-- Deprecated aliases — these still render, but prefer the canonical spellings above.
+     tone="danger" is an alias of tone="destructive" and logs a one-time console notice.
+     size="sm" / "md" / "lg" are alternative spellings (NOT deprecated, no notice). -->
+<rel-chip label="Error" tone="danger"></rel-chip>
+<rel-chip label="Small" size="sm"></rel-chip>
+
+<!-- Fully rounded corners -->
+<rel-chip label="Rounded" border="rounded"></rel-chip>
+
+<!-- Leading / trailing icons (icon dictionary names, rendered via <rel-icon>) -->
+<rel-chip label="Settings" leading-icon="settings"></rel-chip>
+<rel-chip label="Next" trailing-icon="chevron-right"></rel-chip>
+
+<!-- Initials avatar (takes precedence over leading-icon) -->
+<rel-chip label="John Doe" avatar="JD"></rel-chip>
+
+<!-- Removable chip -->
+<rel-chip id="removableChip" label="Removable" removable></rel-chip>
+<script>
+  document.getElementById("removableChip").addEventListener("removed", () => {
+    console.log("Chip was removed");
+  });
+</script>
+
+<!-- Draggable chip: native drag-and-drop plus Left/Right arrow reordering -->
+<rel-chip id="dragChip" label="Reorder me" draggable-chip></rel-chip>
+<script>
+  document.getElementById("dragChip").addEventListener("chip-move", (e) => {
+    console.log("move", e.detail.direction); // -1 = left, 1 = right
+  });
+</script>
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-chip.ts — do not edit; run readme-generate.mjs -->
+
+## API
+
+### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `"Label"` | Text shown in the chip; also its accessible name and the drag payload. |
+| `fieldAriaLabel` | `field-aria-label` | `string` | `undefined` | Accessible name for an icon-only or intentionally unlabelled chip; overrides `label` for the chip and its remove button. |
+| `tone` | `tone` | `"neutral" \| "destructive" \| "warning" \| "success" \| "info" \| "danger"` | `"neutral"` | Colour tone (Figma Tone): `neutral`, `destructive`, `warning`, `success` or `info`. Combined with `variant`. `"danger"` is a deprecated alias of `"destructive"`: it keeps working, logs a one-time console notice, and is normalised to `"destructive"` on the property and the reflected attribute. Reflected. |
+| `variant` | `variant` | `"fill" \| "subtle" \| "primary" \| "secondary"` | `"fill"` | Emphasis (Figma Style): `fill` = solid tone background, `subtle` = tinted background with tone-coloured text. Figma's own spellings `primary` and `secondary` are accepted and normalised to `fill` / `subtle`. Reflected. |
+| `size` | `size` | `"small" \| "medium" \| "large" \| "sm" \| "md" \| "lg"` | `"medium"` | Height scale (Figma Size): `small` 24px / body-sm, `medium` 28px / body-md, `large` 32px / body-lg. Icon size follows (12 / 14 / 16px). `sm` / `md` / `lg` are accepted and normalised to the full words. Reflected. |
+| `border` | `border` | `"default" \| "rounded"` | `"default"` | Corner shape (Figma Border): `default` = 4px radius, `rounded` = fully rounded with 12px horizontal padding. Reflected. |
+| `leadingIcon` | `leading-icon` | `string` | `undefined` | Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon> before the label. Ignored when `avatar` is set. |
+| `trailingIcon` | `trailing-icon` | `string` | `undefined` | Icon name from the generated icon dictionary, rendered after the label. |
+| `avatar` | `avatar` | `string` | `undefined` | Initials text for the avatar (e.g. "JD"), rendered as a `<rel-avatar type="text">` before the label. Mutually exclusive with leadingIcon (avatar wins). |
+| `removable` | `removable` | `boolean` | `false` | Shows a remove (close) button after the label; clicking it sets `removed` and fires `removed`. |
+| `presentational` | `presentational` | `boolean` | `false` | New in 1.5.0. Makes the chip body plain text: no `button` role, no Tab stop, no Enter / Space / Delete handling and no host click re-dispatch. The remove button (when `removable`) stays a real button. For chips that only display a value inside another control, e.g. rel-select's multi-select chips. Reflected. |
+| `removed` | `removed` | `boolean` | `false` | `true` once the chip has been removed — the host is hidden via `:host([removed])`. Reflected so CSS and Angular can see it; reset to `false` to show the chip again. Reflected. |
+| `draggableChip` | `draggable-chip` | `boolean` | `false` | Opt-in native drag-and-drop: sets `draggable="true"` on the host, shows the Figma "Dragged" state during a real drag gesture, and makes Left/Right arrow keys fire `chip-move`. |
+
+## Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `chip-move` | `{ direction: e.key === "ArrowLeft" ? -1 : 1 }` | bubbles / composed | Fired on Left/Right arrow keys when `draggable-chip` is set — the keyboard alternative to drag-and-drop; the container should reorder the chip. Detail: `{ direction: -1 \| 1 }` (-1 = left, 1 = right). |
+| `removed` | — | bubbles / composed | Fired when the chip is removed via its remove button or Delete/Backspace (after `removed` is set to `true`). No detail. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| — | This element has no slots. |
+
+## CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `base` | The chip body (`.chip`) that carries size, tone, variant and border styling |
+| `icon` | The leading `<rel-icon>` (rendered only when `leading-icon` is set and no avatar) |
+| `label` | The label text |
+| `remove` | The remove `<button>` (rendered only when `removable`) |
+
+## Tokens / CSS Variables
+
+### Component hooks
+
+Set these on the host (or an ancestor) to customise the element without touching design tokens.
+
+| Custom property | Default | Description |
+| --- | --- | --- |
+| `--rel-chip-focus-ring` | `var(--rel-border-focus)` | Colour of the keyboard focus outline; default `var(--rel-border-focus)` |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- The chip body is a `<span role="button" tabindex="0">` whose `aria-label` is the `label` text. The shadow root uses `delegatesFocus`, so calling `focus()` on the host focuses that inner span.
+- The remove control is a real `<button>` labelled `Remove {label}`; it is a second Tab stop after the chip body.
+- Removing a chip (button or keyboard) calls the shared `announce()` helper with `"{label} removed"`, so screen readers hear the removal even though the chip disappears.
+- Icons and the avatar are decorative; the accessible name comes only from `label`.
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Focus the chip body, then the remove button (when `removable`) |
+| `Enter` / `Space` | Re-dispatches a `click` on the host so consumer `click` handlers run |
+| `Delete` / `Backspace` | Removes the chip when `removable` (sets `removed`, fires `removed`) |
+| `ArrowLeft` / `ArrowRight` | Fires `chip-move` with `direction: -1` / `1` when `draggable-chip` is set |
+
+Focus is shown as a 1.5px outline in `--rel-chip-focus-ring` (defaults to `--rel-border-focus`) around the whole chip, plus an inner `--rel-border-focus-inner` ring, only for keyboard focus (`:focus-visible`). The remove button gets its own `currentColor` outline.
+
+## Notes / Edge Cases
+
+- `avatar` and `leading-icon` are mutually exclusive: when both are set the avatar wins and a console warning is logged. The avatar is a `rel-avatar type="text"` sized to fill the chip's content box — 16 / 20 / 24px for `sm` / `md` / `lg`, driven through `--rel-avatar-size` rather than the avatar's own `size` presets (the small chip needs 16px, below the 20px `xs` floor).
+- The trailing icon has no CSS part; only the leading icon is exposed as `icon`.
+- The remove `✕` is drawn at the same size as the leading/trailing icons (12 / 14 / 16px) and in the same colour as the label — it carries no opacity dulling, so it keeps the label's contrast ratio on the `subtle` tones.
+- `border="rounded"` also widens the horizontal padding to 12px at every size, per the Figma spec.
+- `removed` is reflected: once `true` the host is `display: none` via `:host([removed])`. Set it back to `false` to show the chip again. Clicking the remove button stops propagation, so chip-level `click` handlers do not fire on removal.
+- `draggable-chip` sets the native `draggable="true"` attribute on the host and puts the label in `dataTransfer` as `text/plain`. During a real drag the host carries a `dragging` attribute that maps to the Figma "Dragged" state; the same look is used for `:active`. The component does not reorder anything itself — the container must handle `drop` / `chip-move`.
+- The remove button has no hover state of its own; the hover/pressed colours belong to the whole chip (per-tone action tokens).
+- The host is `display: inline-flex` with `flex: 0 0 auto`, so chips flow inline and never stretch in a flex row.

package/dist/components/rel-container/README.md

@@ -57,7 +57,7 @@
 | --- | --- | --- | --- | --- |
 | `padding` | `padding` | `"small" \| "medium" \| "large" \| "extra-large" \| "sm" \| "md" \| "lg" \| "xl"` | `"medium"` | Inner padding step: `small` = spacing-xs, `medium` = spacing-md, `large` = spacing-lg. `extra-large` = spacing-2xl is a code-only extension — Figma publishes only the three steps above — and is supported, not deprecated. `sm` / `md` / `lg` / `xl` are alternative spellings and stay supported, normalised to the full words. Reflected. |
 | `shadow` | `shadow` | `boolean` | `false` | Adds the shadow-300 elevation box-shadow to the surface. |
-| `surface` | `surface` | `"default" \| "elevated" \| "transparent"` | `undefined` | Surface fill: default (page surface) \| elevated (raised surface) \| transparent. Takes precedence over the deprecated `background` prop. Reflected. |
+| `surface` | `surface` | `"default" \| "elevated" \| "transparent"` | `undefined` | Surface fill: `"default"` (the default: page surface) \| `"elevated"` (raised surface) \| `"transparent"`. Takes precedence over the deprecated `background` prop. Reflected. |
 
 #### Deprecated (still supported — removal targeted for 3.0)