@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,135 +1,131 @@
-# rel-slider
-
-## Overview
-A highly customizable range slider component supporting continuous and discrete modes. Features include tick marks, value bubble display, solid/dotted track styles, custom theming via CSS properties, and full accessibility support. Automatically snaps to steps in discrete mode.
-
-## Usage
-```html
-<!-- Basic continuous slider -->
-<rel-slider value="50" min="0" max="100"></rel-slider>
-
-<!-- Discrete slider with ticks -->
-<rel-slider
-  type="discrete"
-  value="25"
-  min="0"
-  max="100"
-  step="25">
-</rel-slider>
-
-<!-- Discrete slider with tick labels -->
-<rel-slider
-  type="discrete"
-  value="3"
-  min="1"
-  max="5"
-  step="1"
-  showTickLabels>
-</rel-slider>
-
-<!-- Dotted track without value bubble -->
-<rel-slider
-  value="60"
-  min="0"
-  max="100"
-  track="dotted"
-  showBubble="false">
-</rel-slider>
-
-<!-- Disabled slider -->
-<rel-slider value="30" disabled></rel-slider>
-
-<!-- Listen for value changes -->
-<rel-slider id="volumeSlider" value="75" min="0" max="100"></rel-slider>
-<script>
-  const slider = document.getElementById('volumeSlider');
-  slider.addEventListener('valueChange', (e) => {
-    console.log('New value:', e.detail.value);
-  });
-</script>
-```
-
-## API
-
-### Attributes/Properties
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `type` | `"continuous" \| "discrete"` | `"continuous"` | Slider mode: continuous allows any value, discrete snaps to steps |
-| `min` | `number` | `0` | Minimum value |
-| `max` | `number` | `100` | Maximum value |
-| `step` | `number` | `1` | Step increment (used in discrete mode for snapping and ticks) |
-| `value` | `number` | `0` | Current slider value |
-| `disabled` | `boolean` | `false` | Disables the slider |
-| `track` | `"solid" \| "dotted"` | `"solid"` | Visual style of the active track |
-| `showTickLabels` | `boolean` | `false` | Show numeric labels at each tick (discrete mode only) |
-| `showBubble` | `boolean` | `true` | Show value bubble marker above the thumb |
-
-## Events
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `valueChange` | `{ value: number }` | Fired when the slider value changes through user interaction |
-
-## Slots
-Default slot not used.
-
-## CSS Parts
-None exposed.
-
-## Tokens / CSS Variables
-
-### Component-Level Custom Properties
-The component defines these CSS custom properties on `:host` which can be overridden:
-
-- `--track-height` - Height of the slider track (default: `5px`)
-- `--thumb-size` - Diameter of the thumb (default: `10px`)
-- `--thumb-stroke` - Thickness of focus/active halo around thumb (default: `7px`)
-- `--thumb-halo-color` - Color of thumb halo (default: `--rel-border-default`)
-- `--tick-size` - Diameter of tick marks (default: `4px`)
-- `--shadow` - Thumb drop shadow (default: `0 2px 4px rgba(0,0,0,0.25)`)
-- `--halo` - Additional halo shadow (default: `0 2px 0 var(--rel-bg-neutral-elevated-1), 0 6px 10px rgba(0,0,0,0.07)`)
-- `--marker-width` - Width of value bubble (default: `24px`)
-- `--marker-height` - Height of value bubble (default: `28px`)
-
-### Design Token References
-- `--rel-fonts-font-family` - Font family
-- `--rel-border-default` - Inactive track color
-- `--rel-text-default` - Active track and thumb color
-- `--rel-bg-surface` - Used in dotted track and tick marks
-- `--rel-text-default` - Tick mark color (inactive)
-- `--rel-text-label` - Tick label color
-- `--rel-text-placeholder` - Disabled active track and tick colors
-- `--rel-border-default` - Default thumb halo color
-- `--rel-bg-neutral-elevated-1` - Disabled track background, used in dotted pattern
-- `--rel-body-xs-regular-font-size` - Tick label font size
-
-## Accessibility
-- Uses native `<input type="range">` for full keyboard and screen reader support
-- Native input is transparent overlay, custom visuals beneath are purely decorative
-- Focus visible state shows halo around custom thumb
-- Disabled state prevents interaction with styled cursor and reduced contrast
-- Respects `prefers-reduced-motion` media query (disables transitions)
-
-### Keyboard Interactions
-- `Arrow Left/Down` - Decrease value
-- `Arrow Right/Up` - Increase value
-- `Home` - Jump to minimum value
-- `End` - Jump to maximum value
-- `Page Up/Down` - Larger increments (browser-dependent)
-
-### Focus Behavior
-- Focus shows halo around custom thumb using `--thumb-halo-color`
-- Active (mouse down) state also shows the halo
-
-## Notes / Edge Cases
-- In **discrete mode**, the slider automatically snaps to the nearest step value as the user drags
-- Tick marks are generated automatically in discrete mode based on `min`, `max`, and `step`
-- If the range doesn't divide evenly by step, a final tick is added at `max`
-- Ticks change color (become white) when the value passes them (active state)
-- **showTickLabels** only has effect in discrete mode
-- **showBubble** displays a pin-drop shaped SVG marker with the current value as text
-- The value bubble uses the "Poppins" font (you may need to load this separately or it will fall back)
-- **Dotted track** uses a `radial-gradient` pattern with white dots over the active color
-- The component has a fixed height of `60px` to accommodate the value bubble
-- When disabled, all interactive colors become muted gray tones
-- Active track width updates dynamically based on the percentage value
-- The component respects `prefers-reduced-motion` and disables all transitions when requested
+# rel-slider
+
+`<rel-slider>` implements the Figma **Slider** component (6417:1340): a pill-shaped track with a stroked round thumb, an optional value tooltip, discrete tick marks with labels, a dotted track style and a dual-thumb `range` mode. It is built on native `<input type="range">` elements, so keyboard and assistive-technology behaviour come from the browser. Use it when a user picks a value or an interval from a bounded numeric range and the relative position matters more than exact digits (volume, opacity, price band); for precise numeric entry use `<rel-textfield>`, and for a handful of named options use `<rel-radio>` or `<rel-tab>`.
+
+## Usage
+
+```html
+<!-- Continuous slider -->
+<rel-slider value="40" min="0" max="100" field-aria-label="Volume"></rel-slider>
+
+<!-- Discrete slider: snaps to step, shows tick marks and tick labels -->
+<rel-slider type="discrete" value="3" min="1" max="5" step="1" showticklabels field-aria-label="Rating"></rel-slider>
+
+<!-- Range slider: two thumbs bounding value…value-end -->
+<rel-slider type="range" value="20" value-end="80" min="0" max="100" field-aria-label="Price"></rel-slider>
+
+<!-- Sizes (Figma S / M / L) -->
+<rel-slider size="sm" value="30"></rel-slider>
+<rel-slider size="md" value="50"></rel-slider>
+<rel-slider size="lg" value="70"></rel-slider>
+
+<!-- Dotted fill, no tooltip -->
+<rel-slider id="opacity" track="dotted" value="60"></rel-slider>
+<script>
+  // showBubble defaults to true; an absent attribute keeps the default, so switch it off from JS.
+  document.getElementById('opacity').showBubble = false;
+</script>
+
+<!-- Disabled -->
+<rel-slider value="30" disabled></rel-slider>
+
+<!-- Listening for changes -->
+<rel-slider id="budget" type="range" value="10" value-end="90"></rel-slider>
+<script>
+  document.getElementById('budget').addEventListener('rel-change', (e) => {
+    console.log(e.detail.value, e.detail.valueEnd); // valueEnd only in range mode
+  });
+</script>
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-slider.ts — do not edit; run readme-generate.mjs -->
+
+## API
+
+### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `type` | `type` | `"continuous" \| "discrete" \| "default" \| "range"` | `"continuous"` | Slider mode: `continuous` (or its alias `default`) accepts any integer value, `discrete` snaps to `step` and draws tick marks, `range` shows two thumbs bounding `value`…`valueEnd`. Reflected. |
+| `showTicks` | `show-ticks` | `boolean` | `undefined` | Draws the tick marks (Figma's separate `Is Determinated` boolean). Works with ANY `type` — Figma shows ticks on every variant, where the code used to gate them behind the code-only `type="discrete"`, so a `default` or `range` slider could never show them. Left unset it follows `type="discrete"`, so nothing changes for existing sliders; set it explicitly to override in either direction. Reflected. |
+| `size` | `size` | `"small" \| "medium" \| "large" \| "sm" \| "md" \| "lg"` | `"medium"` | Figma Size axis: `small` (6px track / 16px thumb), `medium` (8 / 20, default) or `large` (10 / 24), which also scales the ticks and the value bubble. `sm` / `md` / `lg` are alternative spellings and stay supported — they are normalised to the full words, not deprecated. Reflected. |
+| `min` | `min` | `number` | `0` | Lowest selectable value. |
+| `max` | `max` | `number` | `100` | Highest selectable value. |
+| `step` | `step` | `number` | `1` | Increment between values. In `discrete` mode it also spaces the tick marks; in `continuous` mode the native input always moves in steps of 1. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables interaction and dims the track, thumb and ticks; the tooltip is hidden. |
+| `track` | `track` | `"solid" \| "dotted"` | `"solid"` | Style of the filled part of the track: `solid` or a `dotted` pattern. |
+| `showTickLabels` | `showticklabels` | `boolean` | `false` | Print the numeric value under every tick mark. Only has an effect in `discrete` mode. Reflected. |
+| `showBubble` | `showbubble` | `boolean` | `true` | Show the value tooltip above the thumb(s). |
+| `value` | `value` | `number` | `0` | Current value (the lower value in `range` mode). |
+| `valueEnd` | `value-end` | `number` | `100` | Upper value when type="range" (attribute value-end). |
+| `fieldAriaLabel` | `field-aria-label` | `string` | `undefined` | Accessible name for the native range input. In `range` mode it is suffixed with " minimum" / " maximum" per thumb; without it the two thumbs read "Minimum value" / "Maximum value" and a single slider has no name. |
+
+## Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `rel-change` | `{ value: this.value, valueEnd: this.valueEnd } / { value: this.value }` | bubbles / composed | Fired on every user change of the value. Detail: `{ value }` for single-thumb sliders, `{ value, valueEnd }` in `range` mode. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| — | This element has no slots. |
+
+## CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `tooltip` | The value bubble + chevron above each thumb (only while `showBubble` is on) |
+| `thumb` | The round grab handle (one per thumb in range mode) |
+| `track` | The rail behind the thumb (the filled portion has no part) |
+
+## 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-slider-bubble-radius` | `var(--bubble-radius)` | Corner radius of the value bubble; 8px for size sm, otherwise 10px |
+| `--rel-slider-thumb-halo-color` | `var(--thumb-halo-color)` | Colour of the keyboard-focus ring; default `var(--rel-border-default)` |
+| `--rel-slider-thumb-size` | `var(--thumb-size)` | Thumb diameter; 16 / 20 / 24px for size sm / md / lg |
+| `--rel-slider-thumb-stroke` | `var(--thumb-stroke)` | Width of the hover / pressed / focus ring around the thumb; default 6px |
+| `--rel-slider-tick-size` | `var(--tick-size)` | Tick-mark diameter in discrete mode; 4 / 5 / 6px for size sm / md / lg |
+| `--rel-slider-track-height` | `var(--track-height)` | Rail thickness; 6 / 8 / 10px for size sm / md / lg |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- Each thumb is a native `<input type="range">`; the custom track, thumb and tooltip are decorative (`pointer-events: none`) and the tooltip is `aria-hidden="true"`.
+- `field-aria-label` becomes the input's `aria-label`. In `range` mode the two inputs are named `"<label> minimum"` / `"<label> maximum"`; without a label they fall back to `"Minimum value"` / `"Maximum value"`. A single-thumb slider without `field-aria-label` has no accessible name, so always set one (or label it from the surrounding form).
+- `min`, `max` and `step` are forwarded to the native input, so screen readers announce the current value and the range. In `continuous` mode the native step is always 1 regardless of `step`.
+- The keyboard-focus ring is drawn on the custom thumb via `:focus-visible` (`--rel-slider-thumb-halo-color`); mouse focus shows no ring.
+- `disabled` disables the native inputs (removed from the tab order) and hides the tooltip.
+- In `range` mode pointer input is handled by the container so either thumb can be grabbed (the nearer thumb wins); keyboard input still goes through the two native inputs.
+- `prefers-reduced-motion: reduce` removes the thumb and tick transitions.
+
+Keys come from the native range input:
+
+| Key | Action |
+| --- | --- |
+| `ArrowRight` / `ArrowUp` | Increase by one step (`step` in `discrete` mode, 1 otherwise). |
+| `ArrowLeft` / `ArrowDown` | Decrease by one step. |
+| `Home` | Jump to `min`. |
+| `End` | Jump to `max`. |
+| `PageUp` / `PageDown` | Larger jump (browser-defined). |
+
+## Notes / Edge Cases
+
+- `type="default"` is an alias of `continuous` (Figma's Type axis). Only `discrete` draws ticks and snaps to `step`; `continuous` sliders move in integer steps whatever `step` says.
+- Ticks are generated from `min` to `max` in `step` increments; if the range does not divide evenly a final tick is added at `max`. `showticklabels` only has an effect in `discrete` mode.
+- In `range` mode the thumbs cannot cross: `value` is clamped to `≤ value-end` and `value-end` to `≥ value`. The default `value-end` is 100.
+- `rel-change` fires for user interaction only; setting `value` / `valueEnd` programmatically updates the visuals but emits nothing.
+- The element is `display: block` with a fixed 60px height that reserves room for the tooltip above the track.
+- Size presets set the track/thumb/tick/bubble dimensions per `size`; a `--rel-slider-*` hook set on the host overrides the preset for every size.
+- Legacy hook aliases still honoured: `--track-height`, `--thumb-size`, `--thumb-stroke`, `--thumb-halo-color`, `--tick-size` and `--bubble-radius` are read as fallbacks of the `--rel-slider-*` hooks.
+- `registerOnChange`, `registerOnTouched` and `writeValue` exist for the Angular `ControlValueAccessor` wrapper and are not public API.

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

@@ -1,134 +1,168 @@
-# rel-snackbar
-
-## Overview
-A bottom-anchored notification component for brief messages with optional action buttons. Supports single/double line layouts, configurable auto-dismiss duration, longer action mode (2x duration), and optional close icon. Features slide-up animation respecting user motion preferences.
-
-## Usage
-```html
-<!-- Basic snackbar -->
-<rel-snackbar message="File uploaded successfully"></rel-snackbar>
-
-<!-- With action button -->
-<rel-snackbar
-  id="undoSnackbar"
-  message="Item deleted"
-  action="UNDO">
-</rel-snackbar>
-<script>
-  const snackbar = document.getElementById('undoSnackbar');
-  snackbar.addEventListener('actionClick', () => {
-    console.log('Undo action clicked');
-    // Perform undo logic
-  });
-</script>
-
-<!-- Two-line layout -->
-<rel-snackbar
-  message="Your message is too long to fit on a single line, so we'll use two."
-  lines="double"
-  action="DISMISS">
-</rel-snackbar>
-
-<!-- Longer action (2x duration) -->
-<rel-snackbar
-  message="Changes saved"
-  action="VIEW"
-  longerAction>
-</rel-snackbar>
-
-<!-- Without close icon -->
-<rel-snackbar
-  message="Processing..."
-  iconClose="false"
-  duration="0">
-</rel-snackbar>
-
-<!-- Custom duration (10 seconds) -->
-<rel-snackbar
-  message="Important notification"
-  duration="10000"
-  action="GOT IT">
-</rel-snackbar>
-
-<!-- Listen for close event -->
-<rel-snackbar id="notif" message="Update available"></rel-snackbar>
-<script>
-  const notif = document.getElementById('notif');
-  notif.addEventListener('close', () => {
-    console.log('Snackbar closed');
-  });
-</script>
-```
-
-## API
-
-### Attributes/Properties
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `message` | `string` | `"This is a snackbar message"` | Primary message text |
-| `action` | `string` | - | Optional action button label (e.g., "UNDO", "RETRY") |
-| `longerAction` | `boolean` | `false` | If true, doubles the auto-dismiss duration |
-| `iconClose` | `boolean` | `true` | Whether to show the close (✖) icon button |
-| `lines` | `"single" \| "double"` | `"single"` | Layout mode (single-line flex-row, double-line flex-column) |
-| `duration` | `number` | `4000` | Auto-dismiss duration in milliseconds (0 = no auto-dismiss) |
-
-## Events
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `actionClick` | None | Fired when the action button is clicked |
-| `close` | None | Fired when snackbar is closed (via action, close button, or auto-dismiss) |
-
-## Slots
-Default slot not used.
-
-## CSS Parts
-None exposed.
-
-## Tokens / CSS Variables
-
-### Semantic Tokens
-- `--rel-fonts-font-family` - Font family
-- `--rel-body-sm-regular-font-size` - Font size
-- `--rel-fonts-weight-body-semibold` - Action button font weight
-- `--rel-body-md-regular-line-height` - Message line height
-
-### Spacing Tokens
-- `--rel-spacing-2xs` - Action button gap, close button padding
-
-### Color Tokens
-- `--rel-text-default` - Background color
-- `--rel-bg-surface` - Text and focus outline color
-- `--rel-bg-success-light` - Action button text color
-
-### Shadow Tokens
-- `--rel-shadows-shadow-300` - Drop shadow
-
-### Border Tokens
-- `--rel-border-radius-sm` - Border radius
-
-## Accessibility
-- Snackbars are informational and do not interrupt workflows
-- Close and action buttons have proper focus styles
-- Animation respects `prefers-reduced-motion` media query
-
-### Keyboard Interactions
-- `Tab` - Focus action button or close button
-- `Space/Enter` - Activate focused button
-
-### Focus Behavior
-- Buttons show 2px white outline with 2px offset when focused
-- Border radius applied to maintain visual consistency
-
-## Notes / Edge Cases
-- Snackbar has a minimum width of `280px` and maximum width of `500px`
-- **Single-line mode** (`lines="single"`): message and actions are flex-row with `justify-content: space-between`
-- **Double-line mode** (`lines="double"`): layout switches to flex-column with actions aligned to the right
-- Auto-dismiss timer starts in `connectedCallback()` and resets when `duration` or `longerAction` changes
-- If `longerAction` is true, the effective duration is `duration * 2`
-- Setting `duration="0"` disables auto-dismiss
-- Clicking the action button automatically closes the snackbar after dispatching `actionClick`
-- Clicking the close icon dispatches `close` and hides the snackbar (`visible = false`)
-- When `visible` is false, `hidden` class applies `display: none`
-- The component includes a `slide-up` animation (50px translateY → 0) on appearance
-- Animation disabled when `prefers-reduced-motion: reduce` is set
-- Snackbar is `display: block` by default (should be positioned by parent or global styles)
+# rel-snackbar
+
+`<rel-snackbar>` is the snackbar of the Reliability Design System (Figma "Snackbar"): a dark, elevated message bar with a 4px tone accent and leading status icon for the success / warning / destructive tones, an optional action button and a close icon, in single-line and double-line (Figma Type=Longer Action) layouts. It is shown by setting `show` and hides itself after `duration` milliseconds. Unlike `<rel-toast>` it is **not** positioned — it is a `display: block` element you place yourself (in-flow, or fixed via your own CSS). Use it for brief feedback with one follow-up action ("Undo", "Retry"); use `<rel-alert>` for messages that must stay on the page.
+
+## Usage
+
+```html
+<!-- Hidden until `show` is set -->
+<rel-snackbar id="uploaded" message="File uploaded"></rel-snackbar>
+
+<!-- Initially visible; neutral tone (no accent, no icon), auto-hides after 4000 ms -->
+<rel-snackbar show message="Settings saved"></rel-snackbar>
+
+<!-- Status tones: left accent + leading icon -->
+<rel-snackbar show tone="success" message="Invitation sent"></rel-snackbar>
+<rel-snackbar show tone="warning" message="Connection is unstable"></rel-snackbar>
+<rel-snackbar show tone="destructive" message="Payment failed"></rel-snackbar>
+
+<!-- Action button -->
+<rel-snackbar id="deleted" message="Item deleted" action="Undo"></rel-snackbar>
+
+<!-- Double-line layout with a longer (2 × duration) dismiss delay -->
+<rel-snackbar
+  id="archived"
+  message="12 conversations were archived and will be deleted in 30 days"
+  action="Undo"
+  variant="longer-action"
+></rel-snackbar>
+
+<!-- Deprecated aliases — both still work and both log a one-time console notice.
+     `lines="double"` sets the stacked layout but NOT the doubled delay; `longeraction`
+     doubles the delay but does not stack. `variant="longer-action"` above does both.
+     Note the attribute is lower-case `longeraction`, not `longer-action`. -->
+<rel-snackbar message="Older markup" action="Undo" lines="double" longeraction></rel-snackbar>
+
+<!-- Persistent, without the close icon (the boolean must be cleared from script — see the js block) -->
+<rel-snackbar id="busy" message="Processing…" duration="0"></rel-snackbar>
+```
+
+```js
+const uploaded = document.getElementById("uploaded");
+uploaded.show = true;            // starts the auto-dismiss timer and announces the message
+uploaded.addEventListener("close", () => {
+  uploaded.show; // false — fired by the close icon, the action button and the timer
+});
+
+const deleted = document.getElementById("deleted");
+deleted.addEventListener("actionClick", () => {
+  // undo the deletion… the snackbar dismisses itself right after (a `close` event follows)
+});
+deleted.show = true;
+
+// A Lit boolean attribute is true whenever present, so iconclose="false" does NOT work.
+const busy = document.getElementById("busy");
+busy.iconClose = false;
+busy.show = true;
+busy.show = false;               // hides silently — no `close` event when hidden from script
+```
+
+```css
+/* The component is display: block; position it yourself */
+rel-snackbar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+```
+
+### Deprecated aliases
+
+```html
+<!-- type= is the deprecated alias of tone= (tone wins when both are set). Logs once per page:
+     [rel-snackbar] "type" is deprecated and will be removed in 3.0 — use "tone" instead. Note: tone="destructive" replaces type="error"; tone="neutral" replaces type="default". -->
+<rel-snackbar type="error" message="Payment failed"></rel-snackbar>
+<rel-snackbar type="default" message="Settings saved"></rel-snackbar>
+
+<!-- tone="default" is the deprecated spelling of tone="neutral". Logs once:
+     [rel-snackbar] "tone="default"" is deprecated and will be removed in 3.0 — use "tone="neutral"" instead. -->
+<rel-snackbar tone="default" message="Settings saved"></rel-snackbar>
+
+<!-- tone="error" | "danger" | "critical" are deprecated spellings of tone="destructive". Logs once per spelling:
+     [rel-snackbar] "tone="error"" is deprecated and will be removed in 3.0 — use "tone="destructive"" instead. -->
+<rel-snackbar tone="error" message="Payment failed"></rel-snackbar>
+<rel-snackbar tone="critical" message="Payment failed"></rel-snackbar>
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-snackbar.ts — do not edit; run readme-generate.mjs -->
+
+## API
+
+### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `message` | `message` | `string` | `"This is a snackbar message"` | Message text. Announced to screen readers through the shared live-region announcer when the snackbar is shown and whenever it changes while shown. The default is a placeholder — always set it. |
+| `action` | `action` | `string` | `undefined` | Label of the optional action button (Figma trailing button, Static / Small); omitted when unset. Clicking it fires `actionClick` and then dismisses the snackbar. |
+| `variant` | `variant` | `"default" \| "longer-action"` | `undefined` | Layout and timing (Figma "Type"): `"default"` (message and actions on one row) \| `"longer-action"` (message stacked above the actions, which align to the end, with the auto-dismiss delay doubled so there is time to use the action). Takes precedence over the deprecated `lines` and `longerAction` props. |
+| `iconClose` | `iconclose` | `boolean` | `true` | Shows the trailing close icon button. Defaults to true; because it is a Lit boolean, `iconclose="false"` is still true — set the property to `false` from script to hide the button. |
+| `duration` | `duration` | `number` | `4000` | Auto-dismiss delay in milliseconds (doubled by `variant="longer-action"`), started when `show` becomes true and restarted when `duration` or the layout changes while shown. `0` (or a negative value) disables auto-dismiss. |
+| `tone` | `tone` | `"neutral" \| "success" \| "warning" \| "destructive" \| "default" \| "error" \| "danger" \| "critical"` | `undefined` | Semantic tone (Figma "Tone"): `"neutral"` (default: no accent, no icon) \| `"success"` \| `"warning"` \| `"destructive"` — the status tones add a 4px left accent and a leading icon (check-circle / warning / error) in the tone colour. `"default"` is a deprecated alias of `"neutral"`; `"error"`, `"danger"` and `"critical"` are deprecated aliases of `"destructive"`; each logs a one-time console notice. Takes precedence over the deprecated `type` prop. |
+| `show` | `show` | `boolean` | `false` | Whether the snackbar is visible. Set it to true to show the snackbar and start the auto-dismiss timer; it is set back to false by the close icon, the action button and the timer. There is no open/close method — toggle this property. Reflected. |
+
+#### Deprecated (still supported — removal targeted for 3.0)
+
+| Property | Attribute | Type | Use instead |
+| --- | --- | --- | --- |
+| `longerAction` | `longeraction` | `boolean` | — use `variant="longer-action"`, which also sets the stacked layout. Doubles the auto-dismiss delay (`duration * 2`) on its own. Ignored when `variant` is set. Logs a one-time console notice. |
+| `lines` | `lines` | `"single" \| "double"` | — use `variant`; `lines="double"` maps to `variant="longer-action"`. Sets the stacked layout on its own but not the doubled delay. Ignored when `variant` is set. Logs a one-time console notice. |
+| `type` | `type` | `"neutral" \| "success" \| "warning" \| "destructive" \| "default" \| "error" \| "danger" \| "critical"` | Deprecated since 1.4.7 — alias of `tone`; use `tone`. Same values as `tone`; `type="error"` maps to `tone="destructive"` and `type="default"` to `tone="neutral"`. Ignored when `tone` is set. Logs a one-time console notice. |
+
+### Public fields / accessors
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `resolvedVariant` | `SnackbarVariant` | Read-only canonical layout actually rendered: explicit `variant` wins, else either deprecated prop (`lines="double"` or `longerAction`) promotes to `"longer-action"`, else `"default"`. |
+| `resolvedTone` | `SnackbarTone` | Read-only canonical tone actually rendered: explicit `tone` wins, else `type`, else `"neutral"`; deprecated aliases are resolved to `"neutral"` / `"destructive"`. |
+
+## Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `actionClick` | — | bubbles / composed | Fired when the action button is clicked, before the snackbar dismisses itself (a `close` event follows). No detail. |
+| `close` | — | bubbles / composed | Fired whenever the snackbar dismisses itself — via the close icon, the action button or the auto-dismiss timer. Not fired when `show` is set to false from script. No detail. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| — | This element has no slots. |
+
+## CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `label` | The message text container |
+| `action` | The action button; rendered only when `action` is set |
+| `close-button` | The close icon button; rendered while `iconclose` is true |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- The bar is always in the shadow DOM and hidden with `display: none` while `show` is false. Its role follows the tone: `role="alert"` for `destructive` (implicitly assertive), `role="status"` for every other tone (implicitly polite); no explicit `aria-live` is set. Because toggling `display` is not reliably announced, the component also pushes `message` into the shared off-screen live-region announcer (`utils/announce`) when `show` becomes true and whenever `message` changes while shown — assertively for `destructive`, politely otherwise. Focus is never moved.
+- The leading status icon and the close glyph are `<rel-icon>`s and render `aria-hidden="true"`; the close control is a native `<button>` with `aria-label="Close"`, the action button is labelled by `action`. Both are in the Tab order; the component registers no key handlers (there is no Escape-to-close):
+
+| Key | Action |
+| --- | --- |
+| Tab / Shift + Tab | Move between the action button (if any) and the close button (if any) |
+| Enter / Space | Activate the focused button: action fires `actionClick` then `close`; the close button fires `close` |
+
+- Keyboard focus on either button is a 2px `--rel-text-static-light` outline with 2px offset (`:focus-visible` only); the close button adds `--rel-border-radius-xs` corners, the action button keeps its pill radius.
+- The 0.3s slide-up animation is disabled under `prefers-reduced-motion: reduce`.
+- A snackbar that auto-dismisses while one of its buttons has focus drops focus to `<body>`; use `duration="0"` (or `longeraction`) when the action matters.
+
+## Notes / Edge Cases
+
+- Positioning is yours: the host is `display: block` and in flow. The bar itself is `min-width: 280px; max-width: 500px`.
+- The auto-dismiss timer starts when `show` becomes true and restarts whenever `duration` or `longerAction` changes while visible; `longerAction` doubles the delay (`duration * 2`). `duration="0"` disables it.
+- Setting `show = false` from script hides the bar **without** firing `close`; `close` fires only for the close icon, the action button and the timer. Setting `show = true` on an already visible snackbar is a no-op (the value did not change).
+- Only `lines="double"` changes the layout (message stacked over end-aligned actions, 16px top padding); `longeraction` only affects timing — combine the two for the Figma Longer Action variant.
+- The status icon is fixed per tone (`check-circle`, `warning`, `error`) and neutral has none; there are no slots, so the icon cannot be replaced.
+- `message` defaults to the placeholder "This is a snackbar message" — a snackbar that shows that text has simply not been given a message.
+- `iconClose` is a Lit boolean: any attribute value (including `"false"`) counts as true. Clear it as a property from script.
+- Figma binds the success / destructive icon colours to dark-surface status text values that no light-mode semantic token resolves to; the component uses the status fill tokens (`--rel-bg-success` / `--rel-bg-danger` / `--rel-bg-warning`) for both the accent and the icon instead.
+- `resolvedTone` is the tone actually rendered after alias resolution; use it (not `tone` / `type`) if you branch on tone in script.