@reliability-design/web 1.4.7 → 1.4.9

package/dist/index.d.ts

@@ -26,10 +26,22 @@ declare class RelAccordion extends LitElement {
      * `md` = large (the default), `sm` = medium.
      */
     size: "md" | "sm" | "large" | "medium" | "small";
-    /** Header layout (Figma "Type"): `default` = title + trailing rotating chevron; `action` = leading icon slot (rotating chevron by default) + static trailing arrow-expansion icon, with the body indented under the title. */
+    /**
+     * Header layout (Figma "Type"): `default` = title + trailing rotating chevron; `action` = leading icon slot (rotating chevron by default) + static trailing arrow-expansion icon, with the body indented under the title.
+     *
+     * DELIBERATE DIVERGENCE — do not "fix" this to a button. For `Type=Action`
+     * Figma draws the trailing affordance as a full ghost icon Button instance
+     * (Size=Medium 40x40, Size=Small 32x32, Style=Ghost, Type=Icon Only); the
+     * code keeps a bare icon. Ruled by the user: our behaviour stands and the
+     * DESIGN FILE follows our docs here, not the other way round. The whole
+     * header is the click target, so a nested button would add a second
+     * focusable control inside it and two competing hit areas.
+     */
     type: "default" | "action";
     /** Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. `shadow` = 4px-radius card with the shadow-sm effect and no border; `plain` = square corners with a 1px border-subtle stroke and no elevation. */
     appearance: "shadow" | "plain";
+    /** Figma "State=Disabled": dims the whole component to 40% and blocks toggling by pointer and keyboard. The header keeps its fill and stroke — the dulling is opacity alone, as Figma specifies. */
+    disabled: boolean;
     static styles: lit.CSSResult;
     /** Stable id prefix wiring the header to its panel. */
     private accordionId;
@@ -106,13 +118,15 @@ type FieldLabelStyle = "default" | "floating" | "none";
  * @slot prefix - Custom content at the far left of the control (e.g. a unit dropdown); shares the prefix block with `prefixIcon` / `prefixText`. Hidden when `multiline` is set.
  * @slot suffix - Custom content at the far right of the control (e.g. an action button); shares the suffix block with `rightIcon` / `suffixText`. Hidden when `multiline` is set.
  * @csspart label - The visible label element (default and floating label styles)
- * @csspart control - The bordered control box (the fieldset in the legend variant)
+ * @csspart control - The bordered control box. Changed in 1.4.9: in `variant="legend"` this is now the same `div` as every other variant, not the `fieldset` — the fieldset was demoted to a decorative outline layer behind the content so the control sits on the 32/40/48 size ladder and centres its value like the other variants. `::part(control)` still matches; only rules that depended on it being a fieldset do not.
  * @csspart input - The native input / textarea
  * @csspart prefix - The prefix block (leading icon, prefix text and the `prefix` slot)
  * @csspart suffix - The suffix block (suffix text, trailing icon and the `suffix` slot)
  * @csspart right-icon - The trailing `rel-icon`
  * @csspart helper - The helper / error text line below the control
- * @cssprop --rel-field-label-reserve - Height held for the absent label row under `labelStyle="none"` so the control bottom-aligns with labelled siblings; defaults to the label line-height plus the wrapper gap. Set to `0` to collapse the row entirely (toolbars, table cells).
+ * @csspart helper-icon - The leading `rel-icon` in the helper line; rendered only when `helper-icon` is set and there is helper text
+ * @cssprop --rel-field-label-reserve - Height held for the label row whenever no label renders above the control — `labelStyle="none"`, and `labelStyle="floating"` where the label sits inside the control — so the control still lines up with labelled siblings in a form row. Defaults to that size's label line-height plus the wrapper gap (24px at `small`, 26px at `medium` and `large`). Set to `0` to collapse the row entirely (toolbars, table cells).
+ * @cssprop --rel-textfield-surface - Colour of the strip the floating label lays over the control's top border and focus ring so the label appears to sit in a notch. It overshoots the band by 2px on the page side, so it must match the surface the field sits on; defaults to the control's own fill (`--rel-bg-neutral`). Set it on a tinted or elevated surface, otherwise the strip shows as a light dash across the border.
  */
 declare class RelTextfield extends LitElement {
     /**
@@ -193,6 +207,8 @@ declare class RelTextfield extends LitElement {
     errorMessage?: string;
     /** Helper line below the control (preferred over the legacy `supportingText`); linked to the input via `aria-describedby`. */
     helperText?: string;
+    /** Icon name from the generated icon dictionary, rendered before the helper line (Figma "Supporting Icon"). Sized 16px, or 14px at `size="small"`, and it takes the helper's colour — so it turns `--rel-text-danger` in the error state. Decorative: it is hidden from screen readers, since the helper text it sits beside is already announced. */
+    helperIcon?: string;
     /** Makes the input read-only: focusable and selectable but not editable. */
     readonly: boolean;
     /** Maximum number of characters (native `maxlength`). */
@@ -248,6 +264,197 @@ declare class RelTextfield extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+type CheckboxState = "default" | "error" | "disabled";
+type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+type CheckboxSize = "small" | "medium" | "large" | "extra-large";
+type CheckboxDensity = "compact" | "comfortable";
+type CheckboxAlignment = "leading" | "trailing";
+/**
+ * Tri-state checkbox (Figma "Checkbox"): a hidden native checkbox behind a custom box, with label, optional prefix icon and supporting text.
+ * @csspart base - The outer wrapper that carries the `state` / `status` classes
+ * @csspart label - The visible label text
+ * @csspart helper - The supporting text (rendered beside the box in comfortable density, under the row in compact)
+ */
+declare class RelCheckbox extends LitElement {
+    /** Label text rendered next to the box. */
+    label: string;
+    /** rel-icon name rendered between the checkbox and the label (label prefix icon); scales with `size`. Unset renders no icon and reserves no space. */
+    icon: string;
+    /** Supporting text under or beside the label; where it renders depends on `density`. */
+    supportingtext: string;
+    /** Visual and interaction state (Figma State): `"error"` swaps in the danger colours, `"disabled"` blocks input and dims the whole control to 0.4 opacity (colours unchanged, as Figma specifies). */
+    state: CheckboxState;
+    /** Check state. `"indeterminate"` is programmatic-only — a user toggle always resolves to checked or unchecked. */
+    status: CheckboxStatus;
+    /** Value reported in the `rel-change` event detail (it is not submitted with a form). */
+    value: string;
+    /** Control scale (Figma Size), on Figma's four-step ramp of control frames:
+     *  `"small"` 16px / body-sm, `"medium"` (default) 18px / body-md,
+     *  `"large"` 20px / body-lg, `"extra-large"` 24px / body-xl. Supporting
+     *  text sits one body step below the label at every size (body-xs / sm /
+     *  md / lg, i.e. 10 / 12 / 14 / 16px). The drawn square is inset to 80% of
+     *  the frame, so the frame is the layout footprint (what the row gap and the
+     *  compact indent measure from) rather than the visible square. */
+    size: CheckboxSize;
+    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+     *  supporting text on its own line under the row, indented past the box;
+     *  `"comfortable"` stacks label + supporting text beside the box. */
+    density: CheckboxDensity;
+    /** Box position (Figma Alignment). `"leading"` (default) renders the box
+     *  before the label; `"trailing"` pushes it to the far edge of the row.
+     *  Trailing has no compact layout in the spec, so it always renders with
+     *  comfortable density. */
+    alignment: CheckboxAlignment;
+    /** Accessible name for the native checkbox, for when the visible `label` is
+     *  absent or not a usable name on its own — a checkbox in a table row, or one
+     *  whose meaning comes from its column header.
+     *
+     *  Normally you do not need it: the input is wrapped in the `<label>` that
+     *  renders `label`, so the visible text already names it natively. Setting
+     *  this puts an `aria-label` on the input, which OVERRIDES that wrapping
+     *  label — so set it only when the visible text is the wrong name, not to
+     *  repeat it. Left unset the attribute is not emitted at all and the native
+     *  labelling is untouched. */
+    fieldAriaLabel?: string;
+    /** Boolean view of `status`: `true` when `status === "checked"`; setting it writes `"checked"` / `"unchecked"`. */
+    get checked(): boolean;
+    set checked(val: boolean);
+    private _onChange;
+    private _onTouched;
+    static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Trailing has no compact layout in the spec — trailing wins. */
+    private get effectiveDensity();
+    private toggle;
+    /** @internal Angular ControlValueAccessor bridge. */
+    registerOnChange(fn: (value: boolean) => void): void;
+    /** @internal Angular ControlValueAccessor bridge. */
+    registerOnTouched(fn: () => void): void;
+    /** @internal Angular ControlValueAccessor bridge. */
+    writeValue(checked: boolean): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+/** Diameter step, spelled out. */
+type AvatarSize = "large" | "medium" | "small" | "extra-small";
+/** Alternative spellings, not deprecations — the short names keep working. */
+type AvatarSizeAlias = "lg" | "md" | "sm" | "xs";
+type AvatarSizeInput = AvatarSize | AvatarSizeAlias;
+/**
+ * Circular avatar (Figma "Avatar"): shows a photo, text initials or a slotted icon in one of four sizes and three fill variants.
+ * @slot - Icon content rendered when `type="icon"` (typically an inline SVG, sized 20 / 18 / 16 / 12px by `size`)
+ * @csspart base - The circular wrapper that carries the size, variant and inline `bg` / `color` overrides
+ * @csspart icon - The `<img>` (`type="image"`) or the icon wrapper span around the slot (`type="icon"`)
+ * @csspart label - The `<span>` holding the initials when `type="text"`
+ * @cssprop --rel-avatar-bg-fill - Background colour of the `fill` variant
+ * @cssprop --rel-avatar-color-fill - Text / icon colour of the `fill` variant
+ * @cssprop --rel-avatar-bg-subtle - Background colour of the `subtle` variant
+ * @cssprop --rel-avatar-color-subtle - Text / icon colour of the `subtle` variant
+ * @cssprop --rel-avatar-border-outline - 1px border colour of the `outline` variant
+ * @cssprop --rel-avatar-color-outline - Text / icon colour of the `outline` variant
+ * @cssprop --rel-avatar-icon-size - Overrides the slotted icon's size; defaults to the preset ramp (20 / 18 / 16 / 12px)
+ * @cssprop --rel-avatar-bg-outline - Background colour of the `outline` variant; defaults to --rel-bg-neutral
+ * @cssprop --rel-avatar-size - Overrides the circle's width/height for sizes between (or below) the `size` presets; defaults to the preset's diameter
+ * @cssprop --rel-avatar-font-size - Overrides the initials' font-size, for use alongside `--rel-avatar-size`; defaults to the preset's text role
+ */
+declare class RelAvatar extends LitElement {
+    /** Diameter step: `large` 40px, `medium` 32px, `small` 24px, `extra-small` 20px; each binds the matching body-*-semibold text role for initials. `lg` / `md` / `sm` / `xs` are alternative spellings and stay supported — they are normalised to the full words, not deprecated. */
+    size: AvatarSizeInput;
+    /** What is rendered inside the circle: `image` shows `src`, `text` shows the `text` initials, `icon` shows the default slot. */
+    type: "image" | "text" | "icon";
+    /** Fill style: `fill` = solid inverse background with light text, `subtle` = elevated neutral background, `outline` = transparent with a 1px border. */
+    variant: "fill" | "subtle" | "outline";
+    /** Image URL for `type="image"`; when empty nothing is rendered inside the circle (there is no fallback to initials). */
+    src: string;
+    /** Initials shown for `type="text"`; rendered uppercase via `text-transform`. */
+    text: string;
+    /** Alt text of the `<img>` for `type="image"`; the default is the generic word "Avatar", so pass the person's name. */
+    alt: string;
+    /** Any CSS colour applied inline as `background-color` on the circle, overriding the variant background. */
+    bg: string;
+    /** Any CSS colour applied inline as `color` on the circle (initials / icon), overriding the variant text colour. */
+    color: string;
+    static styles: lit.CSSResult;
+    /** Alternative spellings, NOT deprecations — no console notice. Normalising
+     *  the property rather than duplicating every selector keeps the reflected
+     *  attribute and the rendered class canonical, so only one spelling reaches
+     *  the CSS. Same shape as rel-chip and rel-slider. */
+    protected willUpdate(changed: Map<string, unknown>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+/** Canonical semantic tones (Figma "Tone"): neutral | destructive | warning | success | info. */
+type ChipTone = "neutral" | "destructive" | "warning" | "success" | "info";
+/** Deprecated spelling: "danger" → destructive. */
+type ChipToneAlias = "danger";
+type ChipToneInput = ChipTone | ChipToneAlias;
+/** Canonical emphasis (Figma "Style"): fill | subtle. */
+type ChipVariant = "fill" | "subtle";
+/** Figma's own spellings of the Style axis, accepted as alternatives. */
+type ChipVariantAlias = "primary" | "secondary";
+type ChipVariantInput = ChipVariant | ChipVariantAlias;
+/** Canonical size steps — full words, as elsewhere in the library. */
+type ChipSize = "small" | "medium" | "large";
+/** Short size spellings, accepted as alternatives. */
+type ChipSizeAlias = "sm" | "md" | "lg";
+type ChipSizeInput = ChipSize | ChipSizeAlias;
+type ChipBorder = "default" | "rounded";
+/**
+ * Compact chip (Figma "Chip") for tags, filters and selected values: tone x variant
+ * colouring, optional leading icon / avatar / trailing icon, a remove control and
+ * opt-in drag-and-drop.
+ * @csspart base - The chip body (`.chip`) that carries size, tone, variant and border styling
+ * @csspart icon - The leading `<rel-icon>` (rendered only when `leading-icon` is set and no avatar)
+ * @csspart label - The label text
+ * @cssprop --rel-chip-focus-ring - Colour of the keyboard focus outline; default `var(--rel-border-focus)`
+ */
+declare class RelChip extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    /** Text shown in the chip; also its accessible name and the drag payload. */
+    label: string;
+    /** 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. */
+    tone: ChipToneInput;
+    /** 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`. */
+    variant: ChipVariantInput;
+    /** 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. */
+    size: ChipSizeInput;
+    /** Corner shape (Figma Border): `default` = 4px radius, `rounded` = fully rounded with 12px horizontal padding. */
+    border: ChipBorder;
+    /** Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon> before the label. Ignored when `avatar` is set. */
+    leadingIcon?: string;
+    /** Icon name from the generated icon dictionary, rendered after the label. */
+    trailingIcon?: string;
+    /** Initials text for the avatar (e.g. "JD"), rendered as a `<rel-avatar type="text">` before the label. Mutually exclusive with leadingIcon (avatar wins). */
+    avatar?: string;
+    /** Shows a remove (close) button after the label; clicking it sets `removed` and fires `removed`. */
+    removable: boolean;
+    /** `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. */
+    removed: boolean;
+    /** 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`. */
+    draggableChip: boolean;
+    /** Reflected so CSS can target the Figma "Dragged" visual state. Driven automatically by dragstart/dragend when draggableChip is set. */
+    private dragging;
+    static styles: lit.CSSResult[];
+    private get classes();
+    private handleRemove;
+    /** The chip body is announced as a button, so it must also act on keys:
+     *  Enter/Space re-dispatch as a host click (consumers' @click handlers
+     *  fire), Delete/Backspace remove when removable, and arrow keys ask the
+     *  container to reorder a draggable chip (`chip-move`) — the keyboard
+     *  alternative to pointer drag-and-drop. */
+    private handleKeydown;
+    private onDragStart;
+    private onDragEnd;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-chip": RelChip;
+    }
+}
+
 /**
  * An item is a plain string or any object read through displayField/valueField.
  * Two keys are read off objects directly, whatever those fields are named:
@@ -272,7 +479,9 @@ type AutocompleteSearchFn = (query: string) => Promise<AutocompleteItem[]>;
  * item's label/value on Enter/blur).
  * @csspart panel - The suggestion listbox container (same node as `list`)
  * @csspart list - Alias of `panel`
- * @csspart option - A suggestion row
+ * @csspart option - A suggestion row. Emitted in BOTH single and `multiple` mode, unlike the two parts below
+ * @csspart option-label - The row's first line (the matched label). SINGLE-SELECT ROWS ONLY
+ * @csspart option-supporting-text - The row's optional second line, rendered only when the item supplies one. SINGLE-SELECT ROWS ONLY — under `multiple` the row is a nested `rel-checkbox` and the second line is that component's own `helper` part, inside its shadow root with nothing forwarding it out, so it cannot be reached with `::part()` at all. Style both modes with the `--rel-*` tokens instead
  * @csspart label - The inner field's label (re-exported from `rel-textfield`)
  * @csspart control - The inner field's bordered control box (re-exported from `rel-textfield`)
  * @csspart input - The inner native input (re-exported from `rel-textfield`)
@@ -288,9 +497,11 @@ type AutocompleteSearchFn = (query: string) => Promise<AutocompleteItem[]>;
  * @cssprop --rel-autocomplete-value-color - Suggestion label colour
  * @cssprop --rel-autocomplete-icon-color - Colour of a row's leading `icon`
  * @cssprop --rel-autocomplete-status-color - Colour of the loading / no-results status rows
+ * @cssprop --rel-autocomplete-menu-max-height - Scroll ceiling of the suggestion panel; default `360px`. Code-owned rather than Figma-derived — every Figma Menu variant hugs its content with no ceiling, which is not shippable for an unbounded result list.
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  */
 declare class RelAutocomplete extends LitElement {
-    /** Local (or fallback initial) suggestion list. Ignored while searchFn drives results. */
+    /** Local (or fallback initial) suggestion list. Ignored while searchFn drives results. Object items are read through `displayField` / `valueField` plus the fixed keys `icon`, `disabled` and `supportingText` (the last renamable via `supporting-field`); `supportingText` renders as a second line in the row and is matched by the filter alongside the label. */
     items: AutocompleteItem[];
     /** Committed value — the selected item's valueField string ("" = none). */
     value: string;
@@ -298,6 +509,8 @@ declare class RelAutocomplete extends LitElement {
     displayField: string;
     /** Object key read for the committed value when items are objects. */
     valueField: string;
+    /** Object key read for the row's optional second line. Defaults to `supportingText`, the fixed key `rel-select` and `rel-radio` already use; point it elsewhere when your records cannot be reshaped. */
+    supportingField: string;
     /** Local filtering mode. Ignored when searchFn is set (results arrive pre-filtered). */
     filter: AutocompleteFilter;
     /** Async data source. When set, local filtering is bypassed entirely. */
@@ -308,6 +521,24 @@ declare class RelAutocomplete extends LitElement {
     minSearchLength: number;
     /** Optional cap on rendered suggestions (panel scrolls regardless). */
     maxSuggestions: number;
+    /**
+     * Multi-select mode: rows become checkboxes with a Select-all row, and the
+     * committed values live in `selectedValues` rather than `value`. Mirrors
+     * `rel-select`'s `multiple` rather than introducing a second pattern.
+     *
+     * THE TEXT INPUT STAYS A SEARCH BOX. In single mode the input shows the
+     * selected label, which is the point of a type-ahead; in multi mode there is
+     * no single label to show, and writing a value list into the field would
+     * destroy the query the user is typing. `rel-select` can put chips inside its
+     * trigger because a trigger is not an editable surface — an input is. So the
+     * chips render beneath the field, the query clears after each toggle so the
+     * next search starts fresh, and the panel stays open.
+     */
+    multiple: boolean;
+    /** Committed values in `multiple` mode (ignored otherwise). Mirrors `rel-select.selectedValues`. */
+    selectedValues: string[];
+    /** Label of the Select-all row shown at the top of the panel in `multiple` mode. */
+    selectAllLabel: string;
     /** Shows a trailing ✕ that clears the text and the committed value. */
     clearable: boolean;
     /** Externally-controlled loading state (internal searchFn loading is automatic). */
@@ -387,6 +618,14 @@ declare class RelAutocomplete extends LitElement {
     private openPanel;
     private closePanel;
     private showNativePopover;
+    /**
+     * Gap between the field and the panel. Figma composes the two in a column
+     * with gap=--rel-spacing-2xs, so this is a bound token rather than a magic
+     * number; the position is computed in JS (the panel is in the top layer), so
+     * it is read from the resolved custom property instead of being hardcoded.
+     * That way a spacing re-export carries through here as it does in CSS.
+     */
+    private get panelOffset();
     private hideNativePopover;
     private updatePosition;
     /** Re-evaluates whether the panel should be showing for the current state. */
@@ -394,6 +633,22 @@ declare class RelAutocomplete extends LitElement {
     private onFieldInput;
     private announceResults;
     private runSearch;
+    /**
+     * Multi rows nest the checkbox at the SAME step as the field, not one below.
+     * rel-select records why (rel-select.ts, optionCheckboxSize): the old
+     * one-step-down compensated for rel-checkbox sitting a size above the system,
+     * and once that ramp was realigned to Figma the compensation became the bug.
+     */
+    private get optionCheckboxSize();
+    /** Native tooltip carrying the row's full text. Both lines truncate to one
+     *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+     *  by sight; hovering the row reveals it. Only rows that carry a second line
+     *  get one, so plain lists do not sprout tooltips. */
+    private rowTitle;
+    private get selectAllStatus();
+    private toggleMultiOption;
+    private toggleSelectAll;
+    private emitMultiChanged;
     private selectItem;
     /** Silent commit when typed text exactly matches an item (label or value, case-insensitive). */
     private commitExactMatch;
@@ -417,47 +672,17 @@ declare global {
     }
 }
 
-/**
- * Circular avatar (Figma "Avatar"): shows a photo, text initials or a slotted icon in one of four sizes and three fill variants.
- * @slot - Icon content rendered when `type="icon"` (typically an inline SVG, sized to 50% of the circle)
- * @csspart base - The circular wrapper that carries the size, variant and inline `bg` / `color` overrides
- * @csspart icon - The `<img>` (`type="image"`) or the icon wrapper span around the slot (`type="icon"`)
- * @csspart label - The `<span>` holding the initials when `type="text"`
- * @cssprop --rel-avatar-bg-fill - Background colour of the `fill` variant
- * @cssprop --rel-avatar-color-fill - Text / icon colour of the `fill` variant
- * @cssprop --rel-avatar-bg-subtle - Background colour of the `subtle` variant
- * @cssprop --rel-avatar-color-subtle - Text / icon colour of the `subtle` variant
- * @cssprop --rel-avatar-border-outline - 1px border colour of the `outline` variant
- * @cssprop --rel-avatar-color-outline - Text / icon colour of the `outline` variant
- * @cssprop --rel-avatar-size - Overrides the circle's width/height for sizes between (or below) the `size` presets; defaults to the preset's diameter
- * @cssprop --rel-avatar-font-size - Overrides the initials' font-size, for use alongside `--rel-avatar-size`; defaults to the preset's text role
- */
-declare class RelAvatar extends LitElement {
-    /** Diameter step: `lg` 40px, `md` 32px, `sm` 24px, `xs` 20px; each binds the matching body-*-semibold text role for initials. */
-    size: "lg" | "md" | "sm" | "xs";
-    /** What is rendered inside the circle: `image` shows `src`, `text` shows the `text` initials, `icon` shows the default slot. */
-    type: "image" | "text" | "icon";
-    /** Fill style: `fill` = solid inverse background with light text, `subtle` = elevated neutral background, `outline` = transparent with a 1px border. */
-    variant: "fill" | "subtle" | "outline";
-    /** Image URL for `type="image"`; when empty nothing is rendered inside the circle (there is no fallback to initials). */
-    src: string;
-    /** Initials shown for `type="text"`; rendered uppercase via `text-transform`. */
-    text: string;
-    /** Alt text of the `<img>` for `type="image"`; the default is the generic word "Avatar", so pass the person's name. */
-    alt: string;
-    /** Any CSS colour applied inline as `background-color` on the circle, overriding the variant background. */
-    bg: string;
-    /** Any CSS colour applied inline as `color` on the circle (initials / icon), overriding the variant text colour. */
-    color: string;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
+/** Canonical size steps — full words, as elsewhere in the library. */
+type BadgeSize = "small" | "medium" | "large" | "extra-large";
+/** Short size spellings, accepted as alternatives. */
+type BadgeSizeAlias = "sm" | "md" | "lg" | "xl";
+type BadgeSizeInput = BadgeSize | BadgeSizeAlias;
 /**
  * Notification badge (Figma "Badge"): a small count pill or an unlabeled dot, usually positioned over an icon or avatar.
  * @csspart base - The `role="status"` pill / dot that carries the size, variant and colour overrides
  * @cssprop --rel-badge-bg - Background colour of the badge; the `color` prop writes this on the host
  * @cssprop --rel-badge-color - Text colour of the count; the `text-color` prop writes this on the host
+ * @cssprop --rel-badge-dot-size - Diameter of the `dot` variant; default 6px, the single dot size Figma draws. Set it to restore the larger discs shipped previously.
  */
 declare class RelBadge extends LitElement {
     /** Text shown in the `number` variant (a count such as "5" or "99+"); not rendered by `variant="dot"` but still used to build the accessible name. */
@@ -466,9 +691,9 @@ declare class RelBadge extends LitElement {
     ariaLabel: string;
     /** Noun appended to the count in the generated accessible name, e.g. "3 notifications". */
     suffix: string;
-    /** Badge scale (Figma Badge S/M/L/XL): number badges are 20 / 24 / 28 / 40px tall, dot badges 8 / 10 / 12 / 12px. */
-    size: "sm" | "md" | "lg" | "xl";
-    /** `number` renders the `number` text in a pill that widens with its content; `dot` renders a small disc with no text. */
+    /** Badge scale (Figma Badge S/M/L/XL): number badges are 20 / 24 / 28 / 40px tall. `sm` / `md` / `lg` / `xl` are accepted and normalised to the full words. Ignored when `variant="dot"` — Figma models `Dot` as a fifth option of the same Size axis, so a dot has one size. */
+    size: BadgeSizeInput;
+    /** `number` renders the `number` text in a pill that widens with its content; `dot` renders a 6px disc with no text (Figma `Size=Dot`), ignoring `size`. */
     variant: "dot" | "number";
     /**
      * Direct CSS color override for the badge background. Accepts any valid
@@ -485,6 +710,7 @@ declare class RelBadge extends LitElement {
      */
     textColor: string;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
     private get classes();
     private get computedAriaLabel();
     updated(changedProperties: Map<PropertyKey, unknown>): void;
@@ -534,8 +760,14 @@ type ButtonTone = "default" | "primary" | "secondary" | "critical" | "success" |
 declare class RelButton extends LitElement {
     /** Style axis (Figma "Style"). Canonical: `default` (legacy neutral fill), `primary`, `secondary` (outlined), `ghost` (text-only), `link` (underlined inline text), `static` (transparent, static-light label for dark/colored surfaces). Deprecated aliases still accepted: `outline` = secondary, `text` = ghost, and `icon` (pre-2.0 40px circular icon button — use `icon-only` with a style instead). */
     variant: ButtonVariant;
-    /** Tone axis (Figma "Tone"). Canonical: `neutral` (= `default`), `brand` (= `primary`), `destructive`. Deprecated aliases `critical` and `danger` map to destructive and log a one-time console notice. `secondary` and `success` are legacy extras with no Figma counterpart (secondary only affects the legacy `icon` variant). */
-    tone: ButtonTone;
+    /**
+     * Tone axis (Figma "Tone"). Canonical: `neutral` (= `default`), `brand` (= `primary`), `destructive`. Deprecated aliases `critical` and `danger` map to destructive and log a one-time console notice. `secondary` and `success` are legacy extras with no Figma counterpart (secondary only affects the legacy `icon` variant).
+     *
+     * Left UNSET it means `neutral`, except on `variant="primary"`, where it
+     * still means `brand` for one release — see `effectiveTone`. Write the tone
+     * explicitly and you always get what you wrote.
+     */
+    tone?: ButtonTone;
     /** Figma "Type=Icon Only": renders a square button (32/40/48px per `size`) of the current style and tone with no padding or min-width. Composes with every `variant`; slot a single `rel-icon` and set `aria-label`. */
     iconOnly: boolean;
     /** Figma "State=Loading": replaces the label with a spinner (`indicator` part), sets `aria-busy`, and blocks pointer and programmatic clicks. The button keeps its width. */
@@ -552,7 +784,7 @@ declare class RelButton extends LitElement {
     badge: string;
     /** Renders a small dot badge in the top-right corner instead of a numbered badge; takes precedence over `badge`. The dot is inset 2px from the corner so it lands on a circular icon button's edge. */
     badgeDot: boolean;
-    static styles: lit.CSSResult;
+    static styles: lit.CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleHostClick;
@@ -622,11 +854,11 @@ declare class RelCalendar extends LitElement {
 }
 
 /**
- * `<rel-card>` — bordered surface that groups related content (Figma "Card").
+ * `<rel-card>` — elevated surface that groups related content (Figma "Card").
  * Use `type="media"` with a `<rel-card-media>` in the `media` slot for a flush image header.
  * @slot - Card body; slotted headings and paragraphs receive the Figma card typography
  * @slot media - Flush media region above the body; rendered only when `type="media"`
- * @csspart base - The outer bordered card surface
+ * @csspart base - The outer elevated card surface
  * @csspart header - The media region wrapper (present only when `type="media"`)
  * @csspart content - The padded body that wraps the default slot
  */
@@ -655,6 +887,7 @@ declare class RelCard extends LitElement {
  * @cssprop --rel-carousel-dot-size - Diameter of an inactive dot (default 8px).
  * @cssprop --rel-carousel-dot-size-active - Width of the active (brand-coloured, pill-shaped) dot (default 16px).
  * @cssprop --rel-carousel-slide-width - Written by the component on its own host to the computed panel width (viewport width for `panels="1"`, a fraction of it above that); not meant to be set by consumers (an inline value is overwritten on resize).
+ * @cssprop --rel-carousel-slide-display - `display` given to each slide in `orientation="vertical"` only; defaults to `flex`, which is what centres the slide's content in the fixed-height viewport as Figma draws it. Set it to `block` to opt out if forcing flex reflows your slide's own children. Horizontal slides are never touched.
  * @cssprop --rel-carousel-slide-height - Written by the component on its own host to the computed panel height (used for vertical slides); not meant to be set by consumers.
  */
 declare class RelCarousel extends LitElement {
@@ -786,63 +1019,6 @@ declare class RelCardMedia extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type CheckboxState = "default" | "error" | "disabled";
-type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
-type CheckboxSize = "small" | "medium" | "large";
-type CheckboxDensity = "compact" | "comfortable";
-type CheckboxAlignment = "leading" | "trailing";
-/**
- * Tri-state checkbox (Figma "Checkbox"): a hidden native checkbox behind a custom box, with label, optional prefix icon and supporting text.
- * @csspart base - The outer wrapper that carries the `state` / `status` classes
- * @csspart label - The visible label text
- * @csspart helper - The supporting text (rendered beside the box in comfortable density, under the row in compact)
- */
-declare class RelCheckbox extends LitElement {
-    /** Label text rendered next to the box. */
-    label: string;
-    /** rel-icon name rendered between the checkbox and the label (label prefix icon); scales with `size`. Unset renders no icon and reserves no space. */
-    icon: string;
-    /** Supporting text under or beside the label; where it renders depends on `density`. */
-    supportingtext: string;
-    /** Visual and interaction state (Figma State): `"error"` swaps in the danger colours, `"disabled"` blocks input and dims the control to 0.55 opacity. */
-    state: CheckboxState;
-    /** Check state. `"indeterminate"` is programmatic-only — a user toggle always resolves to checked or unchecked. */
-    status: CheckboxStatus;
-    /** Value reported in the `rel-change` event detail (it is not submitted with a form). */
-    value: string;
-    /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
-     *  label; `"small"` = 14px box with body-md label; `"large"` (Figma L,
-     *  added 2026-09-04) = 20px box with body-lg label and body-sm supporting
-     *  text — the same additive step rel-radio took for its large size. */
-    size: CheckboxSize;
-    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
-     *  supporting text on its own line under the row, indented past the box;
-     *  `"comfortable"` stacks label + supporting text beside the box. */
-    density: CheckboxDensity;
-    /** Box position (Figma Alignment). `"leading"` (default) renders the box
-     *  before the label; `"trailing"` pushes it to the far edge of the row.
-     *  Trailing has no compact layout in the spec, so it always renders with
-     *  comfortable density. */
-    alignment: CheckboxAlignment;
-    /** Boolean view of `status`: `true` when `status === "checked"`; setting it writes `"checked"` / `"unchecked"`. */
-    get checked(): boolean;
-    set checked(val: boolean);
-    private _onChange;
-    private _onTouched;
-    static styles: lit.CSSResult;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    /** Trailing has no compact layout in the spec — trailing wins. */
-    private get effectiveDensity();
-    private toggle;
-    /** @internal Angular ControlValueAccessor bridge. */
-    registerOnChange(fn: (value: boolean) => void): void;
-    /** @internal Angular ControlValueAccessor bridge. */
-    registerOnTouched(fn: () => void): void;
-    /** @internal Angular ControlValueAccessor bridge. */
-    writeValue(checked: boolean): void;
-    render(): lit_html.TemplateResult<1>;
-}
-
 /**
  * Single-date form field (Figma "Date Picker"): a text field with typed date entry plus a
  * popover calendar whose header pills drill into month and year grids, above
@@ -853,6 +1029,7 @@ declare class RelCheckbox extends LitElement {
  * @csspart trigger - The field box that wraps the text input and the clear/calendar icons
  * @csspart value - The editable text input inside the trigger
  * @csspart shortcuts - The Today / Tomorrow / Yesterday chip row at the top of the popover
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  */
 declare class RelDatePicker extends LitElement {
     /** Selected date as an ISO `YYYY-MM-DD` string, or `null` when empty; setting it also moves the popover to that month. */
@@ -861,7 +1038,7 @@ declare class RelDatePicker extends LitElement {
     placeholder: string;
     /** Visible label rendered above the field and wired to the input via `aria-labelledby`; `null` renders no label. */
     label: string | null;
-    /** Disables the field, the icons and the popover; the host dims to 60% opacity. */
+    /** Disables the field, the icons and the popover; the host dims to 40% opacity. */
     disabled: boolean;
     /** Appends a `*` to the label and sets `aria-required`; no validation is performed. */
     required: boolean;
@@ -926,6 +1103,10 @@ declare class RelDatePicker extends LitElement {
     private panelView;
     /** First year of the visible Years page; re-anchored whenever that view opens. */
     private yearPageStart;
+    /** Period-grid cell the keyboard last moved to; -1 until the user moves. Kept
+     *  across a year page turn, since it is a grid POSITION and every page has the
+     *  same twelve slots. */
+    private periodRoved;
     /** Uncommitted typed text; null → the input shows the committed value. */
     private inputText;
     /** Parse/range error message for the typed text (cleared on next input). */
@@ -949,6 +1130,7 @@ declare class RelDatePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     /** Focus the roving day cell (selected day, else today, else first). */
     private focusPanelSelection;
@@ -1012,16 +1194,48 @@ declare class RelDatePicker extends LitElement {
     private announceYearPage;
     /** A pill toggles its own view; tapping it again returns to the day grid. */
     private switchView;
-    /** Focus the selected month/year cell so the keyboard lands somewhere useful. */
+    /** Focus the month/year cell that holds the tab stop, so the keyboard lands
+     *  somewhere useful and focus can never disagree with the tab stop. */
     private focusPanelGridSelection;
     private selectMonth;
     private selectYear;
     /** Arrow-key roving across the 3-column month / year grid. */
     private handlePeriodGridKeydown;
+    /**
+     * The tab stop follows focus, wherever focus came from — arrows, a click, Tab,
+     * or a cell that simply kept focus across a re-render. Doing this on focusin
+     * rather than in the key handler is what keeps the two from disagreeing: a
+     * year page turn reuses the same buttons with new labels, so the focused cell
+     * survives while `selected` moves off-page, and deriving the tab stop from
+     * anything other than focus itself puts them on different cells.
+     */
+    private handlePeriodGridFocusin;
     /**
      * Index of the single grid cell carrying tabindex="0". The old expression
      * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
      * stops once the user arrowed around without a selection.
+     *
+     * KNOWN GAP (deferred from 1.4.9, needs a ticket covering BOTH calendars):
+     * `focusedDate` is read here as the first candidate but is never assigned
+     * anywhere in this file, so it is permanently null and the tab stop tracks
+     * the SELECTION rather than focus. Tab out of the grid and back and you
+     * return to the selected day, not the day you left.
+     *
+     * Wiring it from each cell's `@focus` was tried and is NOT sufficient, which
+     * is why this is still open. Measured 2026-09-25 by driving real keys: from
+     * Sun 27 Sep, one ArrowDown lands focus on Sun 25 Oct instead of Sun 4 Oct,
+     * because handleDayKeydown moves by grid INDEX and then lets the view flip
+     * month, so index+7 addresses a different date in the new grid. lit reuses
+     * the same button elements across that re-render, so the focused element
+     * never changes and NO focus event fires — the handler cannot observe the
+     * move it is supposed to record.
+     *
+     * The real fix is to navigate by DATE and set the rove explicitly before
+     * focusing, the way rel-range-picker.moveGridFocusTo already does (verified
+     * correct in the same run: Sep 27 → Oct 4 → Oct 11, tab stop and focus
+     * agreeing at every step). That is a rewrite of this component's arrow-key
+     * model, not a contained fix, and it must land on both calendars together or
+     * they diverge again.
      */
     private getRovingIndex;
     /** Days view: weekday header + the six week rows. */
@@ -1033,6 +1247,11 @@ declare class RelDatePicker extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/** Field scale, matching the other pickers. */
+type RangePickerSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations. */
+type RangePickerSizeAlias = "sm" | "md" | "lg";
+type RangePickerSizeInput = RangePickerSize | RangePickerSizeAlias;
 /**
  * Date-range form field (Figma "Date Range Picker"): a text field with typed "from → to"
  * entry and a two-pane panel — quick-select presets with single-key shortcuts on the left,
@@ -1044,8 +1263,9 @@ declare class RelDatePicker extends LitElement {
  * @csspart panel - The floating panel (`role="dialog"`) holding presets and calendar
  * @csspart list - The preset column and the day grid
  * @csspart option - Each quick-select preset button
- * @csspart action - The previous-month and next-month buttons
+ * @csspart action - The header's previous and next buttons; they step a month, a year or a 12-year page depending on which view the panel is showing
  * @csspart footer - The Reset / Cancel / Apply button row
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  */
 declare class RelRangePicker extends LitElement {
     /** Committed range start as an ISO `YYYY-MM-DD` string; empty string when no range is set. */
@@ -1088,9 +1308,19 @@ declare class RelRangePicker extends LitElement {
      *  mirroring rel-time-picker / rel-date-picker. Off by default so the
      *  existing intrinsic-width (`inline-block`) rendering is unchanged. */
     fullWidth: boolean;
+    /** Trigger height on the shared field scale — `small` 32 / `medium` 40 / `large` 48px border-box — matching rel-textfield, rel-date-picker and rel-time-picker so the four align in a form row. Also ramps the trigger's text and inline padding. The panel is unaffected: Figma specifies one panel size. `sm` / `md` / `lg` are alternative spellings and stay supported — normalised to the full words, not deprecated. */
+    size: RangePickerSizeInput;
     private draftFrom;
     private draftTo;
     private draftActivePreset;
+    /** Which grid the panel shows. Ported from rel-date-picker so the two
+     *  calendars behave the same; reaching January 2023 was ~44 chevron clicks. */
+    private panelView;
+    private yearPageStart;
+    /** Period-grid cell the keyboard last moved to; -1 until the user moves. Kept
+     *  across a year page turn, since it is a grid POSITION and every page has the
+     *  same twelve slots. */
+    private periodRoved;
     private viewYear;
     private viewMonth;
     private isSelectingRange;
@@ -1111,10 +1341,15 @@ declare class RelRangePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
+    /** Alternative spellings, NOT deprecations — no console notice. Normalising
+     *  keeps the reflected attribute canonical so the :host([size=…]) rules only
+     *  need the full words. */
+    protected willUpdate(changed: Map<string, unknown>): void;
     private openPopover;
     private cancelPopover;
     private applySelection;
@@ -1154,6 +1389,48 @@ declare class RelRangePicker extends LitElement {
     private isDateDisabled;
     private getQuickSelects;
     private selectQuickSelect;
+    private goPrev;
+    private goNext;
+    private announceYearPage;
+    /** A pill toggles its own view; tapping it again returns to the day grid. */
+    private switchView;
+    private selectMonth;
+    private selectYear;
+    /**
+     * Arrow-key roving across the Months / Years grid, matching rel-date-picker
+     * exactly. Without this the grid had ONE reachable cell — the selected one —
+     * because every other cell carries tabindex="-1" under the roving pattern and
+     * nothing moved the focus. A keyboard user could open the view and go nowhere,
+     * while the 44 chevron presses still worked: strictly worse than before the
+     * switcher existed.
+     *
+     * Movement clamps at the edges (shared with the date picker through
+     * periodGridTarget); Escape steps back to the day grid rather than falling
+     * through to the panel's own Escape, which closes the whole picker.
+     */
+    private handlePeriodGridKeydown;
+    /**
+     * The tab stop follows focus, wherever focus came from — arrows, a click, Tab,
+     * or a cell that simply kept focus across a re-render. Doing this on focusin
+     * rather than in the key handler is what keeps the two from disagreeing: a
+     * year page turn reuses the same buttons with new labels, so the focused cell
+     * survives while `selected` moves off-page, and deriving the tab stop from
+     * anything other than focus itself puts them on different cells.
+     */
+    private handlePeriodGridFocusin;
+    /**
+     * Return focus to the day grid after leaving Months / Years. Prefers the
+     * roving tab stop and falls back to the first selectable day, so a month with
+     * every leading cell disabled still lands somewhere. Disabled days here carry
+     * a CLASS, not the :disabled state, because they are not buttons.
+     */
+    private focusDayGrid;
+    /** Put focus in the grid when a view opens, so the keyboard has somewhere to
+     *  start; otherwise the arrows have nothing to move from. */
+    private focusPeriodGrid;
+    /** Months or Years, in the same 3x4 grid rel-date-picker uses. */
+    private renderPeriodGrid;
+    private getMonthsList;
     private previousMonth;
     private nextMonth;
     private getMonthName;
@@ -1167,6 +1444,21 @@ declare class RelRangePicker extends LitElement {
      * The cell that carries tabindex="0". Prefers the last roved date, then the
      * draft start, then today, then the first selectable day — always exactly
      * one Tab stop, even after arrowing away with nothing selected.
+     *
+     * `focusedDate` is written by moveGridFocusTo, which sets it from the DATE
+     * before moving focus rather than reading it back off a focus event. That
+     * ordering is what makes the arrow keys correct across a month boundary —
+     * verified 2026-09-25 by driving real keys: Sep 27 → Oct 4 → Oct 11 with the
+     * tab stop and focus agreeing at every step, including the view change.
+     * rel-date-picker moves by grid INDEX instead and lands on the wrong date
+     * there; see the note on its getRovingIndex. Do not "simplify" this to a
+     * focus listener — lit reuses the same cell elements across the re-render, so
+     * the focused element does not change and no focus event fires.
+     *
+     * Still open for BOTH calendars: focus arriving from a click or from Tab does
+     * not update the rove, only the arrow keys do. Deferred from 1.4.9 as a
+     * shared ticket, since fixing one calendar alone reintroduces the divergence
+     * the shared period-page module exists to prevent.
      */
     private getRovingIso;
     private handleGridKeydown;
@@ -1179,65 +1471,11 @@ declare global {
     }
 }
 
-type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
-type ChipVariant = "fill" | "subtle";
-type ChipSize = "sm" | "md" | "lg";
-type ChipBorder = "default" | "rounded";
-/**
- * Compact chip (Figma "Chip") for tags, filters and selected values: tone x variant
- * colouring, optional leading icon / avatar / trailing icon, a remove control and
- * opt-in drag-and-drop.
- * @csspart base - The chip body (`.chip`) that carries size, tone, variant and border styling
- * @csspart icon - The leading `<rel-icon>` (rendered only when `leading-icon` is set and no avatar)
- * @csspart label - The label text
- * @cssprop --rel-chip-focus-ring - Colour of the keyboard focus outline; default `var(--rel-border-focus)`
- */
-declare class RelChip extends LitElement {
-    static shadowRootOptions: ShadowRootInit;
-    /** Text shown in the chip; also its accessible name and the drag payload. */
-    label: string;
-    /** Colour tone (Figma Tone): `neutral`, `danger`, `warning`, `success` or `info`. Combined with `variant`. */
-    tone: ChipTone;
-    /** Emphasis (Figma Variant): `fill` = solid tone background, `subtle` = tinted background with tone-coloured text. */
-    variant: ChipVariant;
-    /** Height scale (Figma Size): `sm` 24px / body-sm, `md` 28px / body-md, `lg` 32px / body-lg. Icon size follows (12 / 14 / 16px). */
-    size: ChipSize;
-    /** Corner shape (Figma Border): `default` = 4px radius, `rounded` = fully rounded with 12px horizontal padding. */
-    border: ChipBorder;
-    /** Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon> before the label. Ignored when `avatar` is set. */
-    leadingIcon?: string;
-    /** Icon name from the generated icon dictionary, rendered after the label. */
-    trailingIcon?: string;
-    /** Initials text for the avatar (e.g. "JD"), rendered as a `<rel-avatar type="text">` before the label. Mutually exclusive with leadingIcon (avatar wins). */
-    avatar?: string;
-    /** Shows a remove (close) button after the label; clicking it sets `removed` and fires `removed`. */
-    removable: boolean;
-    /** `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. */
-    removed: boolean;
-    /** 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`. */
-    draggableChip: boolean;
-    /** Reflected so CSS can target the Figma "Dragged" visual state. Driven automatically by dragstart/dragend when draggableChip is set. */
-    private dragging;
-    static styles: lit.CSSResult;
-    private get classes();
-    private handleRemove;
-    /** The chip body is announced as a button, so it must also act on keys:
-     *  Enter/Space re-dispatch as a host click (consumers' @click handlers
-     *  fire), Delete/Backspace remove when removable, and arrow keys ask the
-     *  container to reorder a draggable chip (`chip-move`) — the keyboard
-     *  alternative to pointer drag-and-drop. */
-    private handleKeydown;
-    private onDragStart;
-    private onDragEnd;
-    protected updated(changed: Map<string, unknown>): void;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-chip": RelChip;
-    }
-}
-
+/** Inner padding step, spelled out. */
+type ContainerPadding = "small" | "medium" | "large" | "extra-large";
+/** Alternative spellings, not deprecations — the short names keep working. */
+type ContainerPaddingAlias = "sm" | "md" | "lg" | "xl";
+type ContainerPaddingInput = ContainerPadding | ContainerPaddingAlias;
 /** Canonical surface names (audit 12). */
 type ContainerSurface = "default" | "elevated" | "transparent";
 /** @deprecated since 1.4.7 — use `ContainerSurface` / the `surface` prop. */
@@ -1249,8 +1487,8 @@ type ContainerBackground = "light" | "white" | "none";
  * @csspart container - Alias of `base`, kept for existing `::part(container)` selectors
  */
 declare class RelContainer extends LitElement {
-    /** Inner padding step: `sm` = spacing-xs, `md` = spacing-md, `lg` = spacing-xl, `xl` = spacing-2xl. */
-    padding: "sm" | "md" | "lg" | "xl";
+    /** 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. */
+    padding: ContainerPaddingInput;
     /** Adds the shadow-300 elevation box-shadow to the surface. */
     shadow: boolean;
     /**
@@ -1270,7 +1508,8 @@ declare class RelContainer extends LitElement {
 
 /**
  * Thin separator rule that splits content horizontally or vertically. Use it between sections, list groups or toolbar clusters; do not use it as a spacer.
- * @csspart base - The rendered rule (`role="separator"` div) — restyle thickness, colour or margin here.
+ * @csspart base - The rendered rule — restyle thickness, colour or margin here.
+ * @cssprop --rel-divider-spacing - Cross-axis margin around the rule; default 16px. Figma specifies none, so set it to `0` for strict parity — the default is kept for back-compat and is planned to become `0` in 3.0.
  */
 declare class RelDivider extends LitElement {
     /** Axis of the rule: `horizontal` spans the full width with vertical margin; `vertical` is a full-height line with horizontal margin (the parent needs a defined height or a flex row). Mirrored to `aria-orientation` on the host. */
@@ -1352,12 +1591,23 @@ declare class RelDrawer extends LitElement {
     private previousFocus;
     private startY;
     private currentY;
+    /** Scrim opacity at rest, sampled once per drag so the fade starts from it. */
+    private scrimRestingOpacity;
     private originalBodyOverflow;
     private originalBodyPaddingRight;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, any>): void;
+    /**
+     * The footer divider is conditional: short content (a confirmation message)
+     * has no divider, but a body that scrolls does — it is a scroll affordance,
+     * not decoration (designer, confirmed). CSS cannot ask whether an element
+     * scrolls, so it is measured and reflected onto the host as `body-scrolls`,
+     * re-measured whenever the body or its contents resize.
+     */
+    private bodyScrollObserver?;
+    private watchBodyScroll;
     private handleOpen;
     private handleClose;
     private lockScroll;
@@ -1393,7 +1643,7 @@ type KbdSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
 declare class RelKbd extends LitElement {
     /** Key-cap scale (Figma Size): `small` 20px tall / label-sm, `medium` 24px / label-md, `large` 28px / label-lg; 4px radius at every size. `sm` / `md` / `lg` are the legacy short spellings and stay accepted. */
     size: KbdSize;
-    /** Fill / text contrast: `default` = elevated-1 background with label text; `muted` = elevated-2 background with placeholder-tone text for secondary shortcuts. Both are flat with a 1px border. */
+    /** Fill / text contrast: `default` = elevated-1 background with label text; `muted` = elevated-2 background with placeholder-tone text for secondary shortcuts. Both carry a 0.5px stroke and the hard 2px bottom edge Figma draws on the key cap. */
     variant: "default" | "muted";
     /**
      * Fully rounded corners. Logs a one-time console notice when set.
@@ -1443,10 +1693,15 @@ type Orientation = "horizontal" | "vertical";
 type StepperSize = "small" | "large";
 /** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
 type StepperType = "default" | "dot" | "number" | "icon";
+/** How the line BETWEEN steps is drawn (Figma ".Line Types"). Distinct from
+ *  `StepperType`, which is the indicator disc — both spell one value "dot". */
+type StepperConnector = "solid" | "dot";
 /** Figma "Typel": label placement relative to the indicator. */
 type LabelPlacement = "top" | "centered" | "inverted";
 interface Step {
     title: string;
+    /** Optional second line under the title (Figma "Subtitle" / "Show Subtitle"). Omit it and the step stays single-line. */
+    subtitle?: string;
     status: StepStatus;
 }
 /**
@@ -1454,13 +1709,15 @@ interface Step {
  * @csspart indicator - The 24px circle (8px for `type="dot"`) that holds the step number, check mark or icon.
  * @csspart track - The 1px connector line from a step to the next one (not rendered on the last step).
  * @csspart label - The step title text.
+ * @csspart subtitle - The optional second line under the title; rendered only when a step sets `subtitle`.
  * @cssprop --rel-stepper-indicator-size - Indicator diameter (default 24px; `type="dot"` is fixed at 8px).
- * @cssprop --rel-stepper-connector-length-lg - Connector length and step gap for `size="large"` in both orientations (default 86px).
- * @cssprop --rel-stepper-connector-length-md - Connector length and step gap for `size="small"` in `orientation="horizontal"` (default 60px).
- * @cssprop --rel-stepper-connector-length-sm - Connector length and step gap for `size="small"` in `orientation="vertical"` (default 42px).
+ * @cssprop --rel-stepper-connector-length - Length of the connector line; the step gap is derived from it by adding Figma's clear space at both ends. Defaults to Figma's fixed geometry: 96px horizontally, 34px vertically with `label-placement="centered"`, 51px with `inverted`.
+ * @cssprop --rel-stepper-connector-length-lg - Superseded by `--rel-stepper-connector-length`, which it still falls back to, so an existing override keeps working.
+ * @cssprop --rel-stepper-connector-length-md - No longer applies. It parameterised the code-only `size` axis, and Figma has one connector geometry rather than a scale.
+ * @cssprop --rel-stepper-connector-length-sm - No longer applies, for the same reason as `-md`.
  */
 declare class RelStepper extends LitElement {
-    /** The steps in order, each `{ title: string; status: "done" | "progress" | "disabled" }`. Set as a property (or a JSON array attribute); the component never mutates it — update it from the `rel-step-change` handler. */
+    /** The steps in order, each `{ title: string; subtitle?: string; status: "done" | "progress" | "disabled" }`. Set as a property (or a JSON array attribute); the component never mutates it — update it from the `rel-step-change` handler. */
     steps: Step[];
     /**
      * Legacy label placement (attribute `textalign`): `below` (default) puts the label under the indicator, `right` puts it beside the indicator. Ignored whenever `label-placement` is set.
@@ -1469,13 +1726,40 @@ declare class RelStepper extends LitElement {
     textAlign: TextAlign;
     /** Layout axis: `horizontal` (default) lays the steps out in a centred row; `vertical` stacks them. */
     orientation: Orientation;
-    /** `large` (default) or `small`: controls the label type (body-md vs body-sm) and the connector length / step gap (see the `--rel-stepper-connector-length-*` hooks). */
+    /**
+     * No longer has any effect. It used to set the connector length and step gap
+     * (86px for `large`, 60 / 42px for `small`) and to swap the step label to
+     * body/sm/regular at `small`.
+     * @deprecated Figma has no Size axis on the Stepper — the connector geometry
+     * is fixed — so this was a code-only scale. It stays accepted so existing
+     * markup keeps working, and now resolves to the one Figma geometry. Retune it
+     * with `--rel-stepper-connector-length` instead. Logs a one-time notice.
+     */
     size: StepperSize;
-    /** Figma "Type" axis — what the indicator shows: `default` (step number, check mark once done), `dot` (8px dot, no glyph), `number` (always the number) or `icon` (always the check mark). */
+    /**
+     * Figma "Type" axis — what the INDICATOR shows: `default` (step number, check
+     * mark once done), `dot` (8px dot, no glyph), `number` (always the number) or
+     * `icon` (always the check mark).
+     *
+     * Note `type="dot"` and `connector="dot"` are different axes that both use the
+     * word "dot": this one replaces the numbered disc, `connector` dashes the line
+     * BETWEEN discs. They are independent and can be combined.
+     */
     type: StepperType;
+    /**
+     * Figma ".Line Types" axis — how the connector line between steps is drawn:
+     * `solid` (default, an unbroken 1px rule) or `dot` (a 1px rule dashed 2px on,
+     * 2px off).
+     *
+     * Not to be confused with `type="dot"`, which is the INDICATOR disc. This axis
+     * only ever affects the line between steps, and it applies to both
+     * orientations.
+     */
+    connector: StepperConnector;
     /** Figma "Typel" axis — where the label sits: `top` (top-aligned beside the indicator), `centered` (vertically centred beside it) or `inverted` (indicator above the label). When unset, the deprecated `textAlign` prop drives the layout (`below` ≈ `inverted`, `right` ≈ `centered`). Figma marks Top + Horizontal as an unsupported combination. */
     labelPlacement?: LabelPlacement;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: Map<string, unknown>): void;
     private isDone;
     private isProgress;
     private isDisabled;
@@ -1497,7 +1781,11 @@ interface RadioOption {
      *  Ignored when `icon` is also set. */
     avatar?: string;
 }
+/** Control scale, spelled out. */
 type RadioSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations — the short names work too. */
+type RadioSizeAlias = "sm" | "md" | "lg";
+type RadioSizeInput = RadioSize | RadioSizeAlias;
 type RadioDensity = "compact" | "comfortable";
 type RadioAlignment = "leading" | "trailing";
 /**
@@ -1518,11 +1806,21 @@ declare class RelRadio extends LitElement {
     /** Layout axis of the option list. `"vertical"` (default) stacks options in
      *  a column; `"horizontal"` lays them out in a wrapping row. */
     orientation: Orientation;
-    /** Control scale (Figma Size). `"medium"` (default, Figma M) = 20px control
-     *  with body-lg labels; `"large"` (Figma L) = 24px control with body-xl
-     *  labels; `"small"` (Figma S) = 20px control with body-md labels — S and M
-     *  share the control size in the spec, only typography steps down. */
-    size: RadioSize;
+    /** Control scale, matching Figma's Size axis. `"small"` and `"medium"`
+     *  (default) both draw a 20px control — they differ by TYPE, body-md labels
+     *  against body-lg — and `"large"` steps the control to 24px with body-xl
+     *  labels. Supporting text sits one body step below the label at every
+     *  size (body-sm / md / lg, i.e. 12 / 14 / 16px). `sm` / `md` / `lg` are
+     *  alternative spellings and stay supported — normalised to the full words,
+     *  not deprecated.
+     *
+     *  Small and Medium sharing a control is Figma's design, not an oversight:
+     *  verified against the live Published DS file on 2026-09-25, `.Radio
+     *  Control` measures 20x20 in all 15 Small variants and all 15 Medium ones.
+     *  v1.4.8 briefly gave Small its own 16px control on the mistaken premise
+     *  that the ramp was 16/20/24; 1.4.9 reverts that. Do not reintroduce it
+     *  without re-reading the live file. */
+    size: RadioSizeInput;
     /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
      *  supporting text on its own line under the row, indented past the control;
      *  `"comfortable"` stacks label + supporting text beside the control. */
@@ -1559,6 +1857,11 @@ declare class RelRadio extends LitElement {
     private _onTouched;
     static styles: lit.CSSResult;
     protected willUpdate(changed: PropertyValues<this>): void;
+    /** Whether the author wrote `density` themselves, as opposed to inheriting
+     *  the default. Read once at connect: Lit reflects during update, which is
+     *  after this runs, so the attribute is present here only if authored. */
+    private densityExplicit;
+    connectedCallback(): void;
     /** Trailing has no compact layout in the spec — trailing wins. */
     private get effectiveDensity();
     private onChange;
@@ -1574,7 +1877,15 @@ declare class RelRadio extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type MenuType = "default" | "checkbox" | "arrow" | "select-option" | "fixed" | "fit";
+/**
+ * Row shape (Figma ".Menu Item" Type): list | checkbox | select-option.
+ * `default` is the deprecated spelling of `list`. `arrow` is a code-only
+ * extension with no Figma counterpart — it turns on the submenu flyout.
+ * `fixed` / `fit` are deprecated here and now live on `width`.
+ */
+type MenuType = "list" | "checkbox" | "select-option" | "arrow" | "default" | "fixed" | "fit";
+/** Sizing mode (Figma "Menu" Type). Both modes are --rel-menu-width wide; the axis varies the HEIGHT: fixed pins the panel to --rel-menu-height and scrolls, fit hugs its rows. */
+type MenuWidth = "fixed" | "fit";
 /** Figma ".Menu Item" Size: large (48px rows) | medium (40px) | small (32px). */
 type MenuSize = "large" | "medium" | "small";
 interface MenuItem {
@@ -1607,15 +1918,36 @@ declare class RelMenuItem extends LitElement {
  * rows, checkbox rows, radio-style select-option rows, or hover/keyboard submenus.
  * @csspart list - The `role="menu"` root list (a light-DOM `[part="list"]` attribute)
  * @csspart panel - A submenu flyout (`type="arrow"` only; light-DOM `[part="panel"]` attribute)
- * @cssprop --rel-menu-width - Width of the menu when `type="fixed"`; default 300px
+ * @cssprop --rel-menu-width - Width of the menu in BOTH sizing modes; default 300px
+ * @cssprop --rel-menu-height - Height of the menu when `width="fixed"`, which then scrolls; default 500px. `fit` ignores it and hugs its rows.
  */
 declare class RelMenu extends LitElement {
-    /** Menu behaviour / width mode (Figma Type). `default` = single-select rows
-     *  (`rel-select`); `checkbox` = toggling rows with a checkbox (`rel-check`);
-     *  `select-option` = single-select rows with a radio control; `arrow` = rows whose
-     *  `submenu` opens a flyout (`rel-submenu-select`); `fixed` / `fit` behave like
-     *  `default` but size the menu to `--rel-menu-width` (300px) or to its content. */
+    /**
+     * Row shape (Figma ".Menu Item" Type). `list` (default) = plain rows;
+     * `checkbox` = toggling rows with a checkbox; `select-option` = single-select
+     * rows with a trailing check.
+     * `arrow` is a code-only extension with no Figma counterpart: rows whose
+     * `submenu` opens a flyout. Because it rides this axis, submenus cannot
+     * currently be combined with checkbox or select-option rows — see the README.
+     * DEPRECATED values, all still working: `default` is the old spelling of
+     * `list`; `fixed` / `fit` were width modes and now set `width` instead,
+     * leaving the row shape at `list`.
+     */
     type: MenuType;
+    /**
+     * Sizing mode (Figma "Menu" Type). Both modes are `--rel-menu-width` (300px)
+     * wide — Figma's Fixed and Fit variants are both 300px — and the axis varies
+     * the HEIGHT: `fixed` pins the panel to `--rel-menu-height` (500px) and
+     * scrolls, `fit` hugs its rows. `fit` previously varied the width instead,
+     * which was the wrong dimension. This was also fused into `type`, where
+     * choosing a width silently forced plain rows and choosing a row shape
+     * silently forced the default width.
+     */
+    width?: MenuWidth;
+    /** Row shape actually rendered: the deprecated width values fall back to `list`. */
+    private get resolvedType();
+    /** Width mode actually applied: explicit `width` wins, else the deprecated `type` spelling. */
+    private get resolvedWidth();
     /**
      * Row size (Figma ".Menu Item" Size, 6326:616): large = 48px rows with
      * body-lg labels (Figma default), medium = 40px / body-md, small = 32px /
@@ -1632,7 +1964,7 @@ declare class RelMenu extends LitElement {
     private _items;
     /** Stable id prefix for aria-activedescendant targets. */
     private menuId;
-    static readonly _css = "\n    :host {\n      color: var(--rel-text-default);\n      display: inline-block;\n    }\n\n    .rel-menu {\n      position: relative;\n      display: inline-block;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      /* Audit 17: 8px (border-radius/sm), was 16px; Figma Menu (6326:2931) = shadow/md */\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      min-width: 220px;\n      /* No vertical padding: items fill edge-to-edge so a first/last-item hover\n         reaches the menu's top/bottom. NOT overflow:hidden \u2014 that clips the\n         type=arrow flyout (position:absolute at left:100%). Instead the first\n         and last items carry the outer corner radius so hover backgrounds clip\n         to the rounded shape without any overflow. */\n      padding: 0;\n      outline: none;\n      overflow: visible;\n      font-family: var(--rel-body-lg-regular-font-family);\n      font-weight: var(--rel-body-lg-regular-font-weight);\n      font-size: var(--rel-body-lg-regular-font-size);\n      line-height: var(--rel-body-lg-regular-line-height);\n      letter-spacing: var(--rel-body-lg-regular-letter-spacing);\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 2px;\n    }\n\n    /* Rows follow Figma \".Menu Item\" (6326:616) per size:\n       Large  48px = pad 12/12 + body-lg (24 line-height)\n       Medium 40px = pad 8/12  + body-md (22)\n       Small  32px = pad 4/8   + body-sm (20)\n       (audit 17a \u2014 before 1.4.7 every row was 36px: pad 8/12 + a 20px line-height) */\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-md);\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n      line-height: var(--rel-body-lg-regular-line-height);\n      min-height: 48px;\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\n      box-sizing: border-box;\n    }\n\n    /* Light-DOM component: :host never matches here, so size rules key off the\n       reflected attribute on the <rel-menu> element itself. */\n    rel-menu[size=\"medium\"] .rel-menu,\n    rel-menu[size=\"medium\"] .rel-submenu {\n      font-family: var(--rel-body-md-regular-font-family);\n      font-weight: var(--rel-body-md-regular-font-weight);\n      font-size: var(--rel-body-md-regular-font-size);\n      line-height: var(--rel-body-md-regular-line-height);\n      letter-spacing: var(--rel-body-md-regular-letter-spacing);\n    }\n\n    /* Figma Medium / Small frames are fixed at 40 / 32 (content sums to 38 / 28) */\n    rel-menu[size=\"medium\"] .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-md-regular-line-height);\n      min-height: 40px;\n    }\n\n    rel-menu[size=\"small\"] .rel-menu,\n    rel-menu[size=\"small\"] .rel-submenu {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n    }\n\n    rel-menu[size=\"small\"] .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n      line-height: var(--rel-body-sm-regular-line-height);\n      min-height: 32px;\n    }\n\n    /* First/last items carry the menu's outer radius so their hover fill clips\n       to the rounded corners (replaces the removed overflow:hidden). */\n    .rel-menu > .rel-menu-item:first-child {\n      border-top-left-radius: var(--rel-border-radius-sm);\n      border-top-right-radius: var(--rel-border-radius-sm);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-sm);\n      border-bottom-right-radius: var(--rel-border-radius-sm);\n    }\n\n    /* Figma states (6326:616): Hover = action overlay 0.05, Pressed = 0.10\n       (nearest token: overlay-pressed), Active/selected list row = the hover\n       overlay + medium label; Checkbox / Select Option rows keep no fill when\n       selected. Disabled = 40% opacity. (audit 17) */\n    .rel-menu-item:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-action-overlay-hover);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active,\n    .rel-menu.type-select-option .rel-menu-item.active {\n      background: transparent;\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active:hover,\n    .rel-menu.type-select-option .rel-menu-item.active:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      opacity: 0.4;\n      /* Keep the item pointer-interactive so cursor:not-allowed actually\n         renders; clicks are already neutralised by the item.disabled guard in\n         onItemClick/onItemEnter. pointer-events:none here would make the row\n         transparent to the pointer and suppress the cursor. */\n      cursor: not-allowed;\n    }\n\n    /* [data-focused] (presence, not =\"true\"): the ?data-focused boolean\n       binding renders the attribute with an EMPTY value, so a =\"true\"\n       selector never matches. */\n    .rel-menu-item[data-focused] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit) */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      min-width: 0;\n      width: max-content;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    .rel-submenu {\n      border: 1px solid var(--rel-border-subtle);\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 200px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      /* padding:0 + overflow:hidden \u2014 safe here (a submenu has no further nested\n         flyout to clip) \u2014 so sub-item hovers fill fully and clip to the corners */\n      padding: 0;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      z-index: 20;\n    }\n\n    .rel-submenu.visible {\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"medium\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"small\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n    }\n  ";
+    static readonly _css = "\n    :host {\n      color: var(--rel-text-default);\n      display: inline-block;\n    }\n\n    .rel-menu {\n      position: relative;\n      display: inline-block;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      /* Audit 17: 8px (border-radius/sm), was 16px; Figma Menu (6326:2931) = shadow/md */\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      /* Figma's Menu container is 300px around 288px rows. */\n      min-width: 300px;\n      /* No vertical padding: items fill edge-to-edge so a first/last-item hover\n         reaches the menu's top/bottom. NOT overflow:hidden \u2014 that clips the\n         type=arrow flyout (position:absolute at left:100%). Instead the first\n         and last items carry the outer corner radius so hover backgrounds clip\n         to the rounded shape without any overflow. */\n      padding: 0;\n      outline: none;\n      overflow: visible;\n      font-family: var(--rel-body-lg-regular-font-family);\n      font-weight: var(--rel-body-lg-regular-font-weight);\n      font-size: var(--rel-body-lg-regular-font-size);\n      line-height: var(--rel-body-lg-regular-line-height);\n      letter-spacing: var(--rel-body-lg-regular-letter-spacing);\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 0;\n    }\n\n    /* Rows follow Figma \".Menu Item\" (6326:616) per size:\n       Large  48px = pad 12/12 + body-lg (24 line-height)\n       Medium 40px = pad 8/12  + body-md (22)\n       Small  32px = pad 4/8   + body-sm (20)\n       (audit 17a \u2014 before 1.4.7 every row was 36px: pad 8/12 + a 20px line-height) */\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-md);\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n      line-height: var(--rel-body-lg-regular-line-height);\n      min-height: 48px;\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\n      box-sizing: border-box;\n      /* Figma strokes every item with --rel-border-subtle. Drawn as an inset\n         shadow on the BOTTOM edge only (the pattern rel-menubar already uses)\n         so the rows read as a divided list rather than 45 boxed cells, and so\n         it costs no layout height. */\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n    }\n\n    .rel-menu-item:last-child {\n      box-shadow: none;\n    }\n\n    /* Light-DOM component: :host never matches here, so size rules key off the\n       reflected attribute on the <rel-menu> element itself. */\n    rel-menu[size=\"medium\"] .rel-menu,\n    rel-menu[size=\"medium\"] .rel-submenu {\n      font-family: var(--rel-body-md-regular-font-family);\n      font-weight: var(--rel-body-md-regular-font-weight);\n      font-size: var(--rel-body-md-regular-font-size);\n      line-height: var(--rel-body-md-regular-line-height);\n      letter-spacing: var(--rel-body-md-regular-letter-spacing);\n    }\n\n    /* Figma Medium / Small frames are fixed at 40 / 32 (content sums to 38 / 28) */\n    rel-menu[size=\"medium\"] .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-md-regular-line-height);\n      min-height: 40px;\n    }\n\n    rel-menu[size=\"small\"] .rel-menu,\n    rel-menu[size=\"small\"] .rel-submenu {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n    }\n\n    rel-menu[size=\"small\"] .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n      line-height: var(--rel-body-sm-regular-line-height);\n      min-height: 32px;\n    }\n\n    /* First/last items carry the menu's outer radius so their hover fill clips\n       to the rounded corners (replaces the removed overflow:hidden). */\n    .rel-menu > .rel-menu-item:first-child {\n      border-top-left-radius: var(--rel-border-radius-sm);\n      border-top-right-radius: var(--rel-border-radius-sm);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-sm);\n      border-bottom-right-radius: var(--rel-border-radius-sm);\n    }\n\n    /* Figma states (6326:616): Hover = action overlay 0.05, Pressed = 0.10\n       (nearest token: overlay-pressed), Active/selected list row = the hover\n       overlay + medium label; Checkbox / Select Option rows keep no fill when\n       selected. Disabled = 40% opacity. (audit 17) */\n    .rel-menu-item:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    /* The active weight bump follows the row's own size, and applies to plain\n       rows only \u2014 a checkbox row carries its state in the control, and Figma\n       does not bold its label. */\n    .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    rel-menu[size=\"medium\"] .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-md-medium-font-weight);\n    }\n\n    /* Small's active row is Figma's mixed tuple: an xs-medium WEIGHT with\n       sm-medium METRICS on the sm-regular family. Large and Medium step only\n       their weight and keep regular metrics, which is why they are one line\n       each and this one is four. */\n    rel-menu[size=\"small\"] .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-xs-medium-font-weight);\n      font-size: var(--rel-body-sm-medium-font-size);\n      line-height: var(--rel-body-sm-medium-line-height);\n      letter-spacing: var(--rel-body-sm-medium-letter-spacing);\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active,\n    .rel-menu.type-select-option .rel-menu-item.active {\n      background: transparent;\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active:hover,\n    .rel-menu.type-select-option .rel-menu-item.active:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      opacity: 0.4;\n      /* Keep the item pointer-interactive so cursor:not-allowed actually\n         renders; clicks are already neutralised by the item.disabled guard in\n         onItemClick/onItemEnter. pointer-events:none here would make the row\n         transparent to the pointer and suppress the cursor. */\n      cursor: not-allowed;\n    }\n\n    /* [data-focused] (presence, not =\"true\"): the ?data-focused boolean\n       binding renders the attribute with an EMPTY value, so a =\"true\"\n       selector never matches. */\n    /* Inset ring: items run the full width of the panel and butt against its\n       padding, so an outside ring would cross the panel edge. rel-menu has no\n       State=Focused variant in Figma; kept deliberately. */\n    .rel-menu-item[data-focused] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit). BOTH are 300px wide \u2014\n       COMPONENT \"Type=Fixed\" is 300x500 sizing=FIXED/FIXED and\n       COMPONENT \"Type=Fit\" is 300x48 sizing=FIXED/HUG \u2014 so the axis varies the\n       HEIGHT, not the width: Fixed pins a scrolling panel, Fit hugs its rows.\n       This had it inverted: fit varied the width (max-content) and neither mode\n       constrained the height, so the two modes differed on the wrong dimension. */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      height: var(--rel-menu-height, 500px);\n      overflow-y: auto;\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses.\n\n       No opacity here: verified against the live Figma file, \"Chevron Right\"\n       is opacity 1 on both the instance and its vector, on every State and\n       Size, bound to the same colour variable as the row label beside it.\n       The 0.6 that used to sit here dulled it to a mid grey.\n\n       The colour is declared rather than inherited on purpose. rel-menu\n       renders to the LIGHT DOM (createRenderRoot returns this), so these\n       selectors are unscoped globals and an inherited colour would travel\n       through the consumer's page cascade \u2014 an app setting a colour on any\n       ancestor would have been repainting this chevron. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      color: var(--rel-text-default);\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    /* No border: the flyout is the same surface as the parent menu, which has\n       none \u2014 overlapping surfaces are separated by shadow. Min-width tracks the\n       parent's 300px rather than a narrower 200px. */\n    .rel-submenu {\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 300px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      /* padding:0 + overflow:hidden \u2014 safe here (a submenu has no further nested\n         flyout to clip) \u2014 so sub-item hovers fill fully and clip to the corners */\n      padding: 0;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      z-index: 20;\n    }\n\n    .rel-submenu.visible {\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"medium\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"small\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -1666,7 +1998,7 @@ declare class RelMenubar extends LitElement {
      */
     bindShortcuts: boolean;
     /**
-     * Width mode (Figma "Menu Bar" Type, 8699:4): `fit` sizes the bar to its triggers, `fixed` stretches it across its container (override the stretched width with `--rel-menubar-width`). Added in 1.4.8; the default stays `fit`, which is how the bar has always rendered.
+     * Width mode (Figma "Menu Bar" Type, 8699:4): `fit` sizes the bar to its triggers, `fixed` stretches it across its container (override the stretched width with `--rel-menubar-width`). The default stays `fit`, which is how the bar has always rendered.
      */
     type: MenubarType;
     private menus;
@@ -1758,7 +2090,7 @@ declare class RelOtp extends LitElement {
     value: string;
     /** Total number of cells (characters in the code). */
     length: number;
-    /** Cells per visual group; a separator renders between groups. `0` (or `show-separator` off) renders one ungrouped row. */
+    /** Cells per visual group; a separator renders between groups. Grouping applies only when `length` divides evenly by this — otherwise the row renders ungrouped, because a ragged final group would put a separator before a lone cell. So the default `length="6"` is 3–3, `length="4"` is one ungrouped row of four, and `group-size="2"` with `length="4"` is 2–2. `0` (or `show-separator` off) also renders one ungrouped row. */
     groupSize: number;
     /** Placeholder character shown in every empty cell. */
     placeholder: string;
@@ -1775,7 +2107,7 @@ declare class RelOtp extends LitElement {
     type: OtpType;
     /** Renders the cells as `type="password"` so entered characters are masked. */
     mask: boolean;
-    /** Disables every cell and dims the control to 0.6 opacity. */
+    /** Disables every cell and dims the control to 0.4 opacity (cell fill and border unchanged, as Figma specifies). */
     disabled: boolean;
     /** Makes every cell read-only: the value is shown but typing, paste and keyboard editing are ignored. */
     readonly: boolean;
@@ -1793,7 +2125,7 @@ declare class RelOtp extends LitElement {
     ariaLabel: string | null;
     /** Error styling (danger border on every cell) and `aria-invalid="true"`. */
     invalid: boolean;
-    /** Renders the dash separator between groups. Boolean attribute: its presence means true — set the property to `false` to hide separators. */
+    /** Renders the dash separator between groups. Boolean attribute: its presence means true — set the property to `false` to hide separators. Even when on, separators appear only if `length` divides evenly by `group-size`; see `groupSize`. */
     showSeparator: boolean;
     /** Cell size on the shared field scale (square, border-box): `small` 32px, `medium` 40px, `large` 48px (the Figma OTP Input cell). `sm` / `md` / `lg` are deprecated aliases of the full words. */
     size: OtpSize;
@@ -1853,8 +2185,17 @@ declare class RelPagination extends LitElement {
     /** Items per page, used to compute the page count from `totalItems` and the "start–end" range in the count-text readout. Attribute `perPage`, also read once as `per-page` on connect. */
     perPage: number;
     /** Shows a "Viewing page X of Y" caption under the extended layout (ignored by the other types). */
+    /**
+     * DELIBERATE DIVERGENCE — do not flip this default to `true`. Figma's
+     * `Type=Extended` has no boolean for the caption: the "Viewing page 1 of 10"
+     * text is a fixed child of both Extended variants and is load-bearing for
+     * their 78px height (40 + spacing-md + 22). Here it stays opt-in. Ruled by
+     * the user: our behaviour stands and the DESIGN FILE follows our docs.
+     * Defaulting it on would silently add 38px to every existing extended
+     * pagination.
+     */
     showLabel: boolean;
-    /** Dims the whole control to 50% opacity, shows a `not-allowed` cursor and ignores every page change. */
+    /** Dims the whole control to 40% opacity, shows a `not-allowed` cursor and ignores every page change. */
     disabled: boolean;
     /** Reserved for link-mode pagination. Currently accepted but not rendered: every page control is a `<button>`, so navigate in your `rel-change` handler instead. */
     hrefTemplate: string;
@@ -1888,7 +2229,7 @@ type AlignType = "start" | "center" | "end";
  * @slot content - The panel body, usually a `<rel-popover-content>`; rendered inside the fixed, top-layer wrapper only while open.
  * @csspart arrow - The 14×14 chevron box rendered on the panel edge facing the trigger when `arrow` is set (absent otherwise).
  * @cssprop --rel-popover-arrow-bg - Fill of the `arrow` chevron (default `--rel-bg-neutral`, matching `<rel-popover-content>`).
- * @cssprop --rel-popover-arrow-border - Stroke of the `arrow` chevron's two slanted edges (default `--rel-border-default`).
+ * @cssprop --rel-popover-arrow-border - **Deprecated.** Stroke of the `arrow` chevron's two slanted edges. The panel no longer draws a border — overlapping surfaces are separated by shadow — so this defaults to `transparent` and the chevron has no edge. Set it to restore a stroke.
  */
 declare class RelPopover extends LitElement {
     /** Controlled open state. Leave unset for uncontrolled mode; once set (true or false) the component only emits `rel-open-change` and you must update `open` yourself. */
@@ -1974,6 +2315,11 @@ declare global {
     }
 }
 
+/** Figma Size axis, spelled out. */
+type PopoverContentSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations — the short names keep working. */
+type PopoverContentSizeAlias = "sm" | "md" | "lg";
+type PopoverContentSizeInput = PopoverContentSize | PopoverContentSizeAlias;
 /**
  * Styled panel body for `<rel-popover>` (Figma "Popover" surface): neutral background, 1px border, 8px radius, shadow-300, max-width 400px, with heading / paragraph typography for slotted content. Place it in the popover's `content` slot; any other element works there too.
  * @slot - The panel content (headings, paragraphs, form controls, buttons).
@@ -1982,8 +2328,12 @@ declare global {
 declare class RelPopoverContent extends LitElement {
     /** Accessible name applied to the inner `role="dialog"` box (attribute `aria-label`); describe what the panel is for. */
     ariaLabel: string;
-    /** Figma Size axis (S/M/L): panel padding 12/16/20px. */
-    size: "sm" | "md" | "lg";
+    /** Figma Size axis: panel padding 12px (`small`), 16px (`medium`, default) or 20px (`large`). `sm` / `md` / `lg` are alternative spellings and stay supported — they are normalised to the full words, not deprecated. */
+    size: PopoverContentSizeInput;
+    /** Alternative spellings, NOT deprecations — no console notice. Normalising
+     *  keeps the reflected attribute canonical, so the :host([size=…]) rules only
+     *  need the full words. */
+    protected willUpdate(changed: Map<string, unknown>): void;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1995,7 +2345,7 @@ type ProgressMode = "linear-determinate" | "linear-indeterminate" | "circular-de
  * @csspart indicator - The filled / sliding bar inside the linear track (linear modes only)
  */
 declare class RelProgress extends LitElement {
-    /** Shape and behaviour: `linear-*` is a full-width 6px bar, `circular-*` a 48px ring; `*-determinate` fills to `value`, `*-indeterminate` loops an animation and ignores `value`. */
+    /** Shape and behaviour: `linear-*` is a full-width 2px bar, `circular-*` a 36px ring; `*-determinate` fills to `value`, `*-indeterminate` loops an animation and ignores `value`. */
     mode: ProgressMode;
     /** Completion percentage 0–100 for the determinate modes; out-of-range values are clamped before rendering and before `aria-valuenow`. */
     value: number;
@@ -2107,16 +2457,24 @@ interface SegmentOption {
     disabled?: boolean;
     /** `rel-icon` name rendered before the label (Figma "Left Icon"), sized 16 / 18 / 20 with the control. */
     icon?: string;
+    /**
+     * Trailing badge (Figma "Show Badge" / "Badge"), rendered after the label
+     * inside the segment's own 8px gap. A number or string shows the count at
+     * `medium` and `large`; at `small` Figma switches to the 6px dot, so the
+     * value is not displayed there. Use `true` for a dot at any size.
+     */
+    badge?: number | string | boolean;
 }
 /**
  * Single-select segmented button group: renders one `<button role="radio">` per entry in `options` on a 2px-inset track (`role="radiogroup"`), with exactly one segment active at a time.
  * @csspart base - The `role="radiogroup"` track that lays out the segments.
  * @csspart option - Each segment's native `<button role="radio">`; the active one carries the `active` class and `aria-checked="true"`.
  * @csspart icon - A segment's optional leading `rel-icon` element.
+ * @csspart badge - A segment's optional trailing `rel-badge`; rendered only when the option sets `badge`.
  * @csspart label - The wrapper around a segment's label text.
  */
 declare class RelSegmentedButton extends LitElement {
-    /** The segments in order, each `{ label: string; value: string; disabled?: boolean; icon?: string }`. Set as a property (or a JSON array attribute); a disabled entry is rendered but cannot be selected, and `icon` names a `rel-icon` drawn before the label. */
+    /** The segments in order, each `{ label: string; value: string; disabled?: boolean; icon?: string; badge?: number | string | boolean }`. Set as a property (or a JSON array attribute); a disabled entry is rendered but cannot be selected, and `icon` names a `rel-icon` drawn before the label. */
     options: SegmentOption[];
     /** `value` of the currently selected segment. Updated by the component on click / arrow keys; set it to pre-select a segment (an unknown value selects nothing). */
     active: string;
@@ -2132,6 +2490,13 @@ declare class RelSegmentedButton extends LitElement {
      *  one Tab stop (roving tabindex on the selected segment). */
     private onKeyDown;
     private renderSegment;
+    /**
+     * Figma's Show Badge axis: a 20x20 numeric badge at medium and large, and a
+     * 6px dot at small — where the count is not shown at all, so a numeric value
+     * degrades to a dot rather than being squeezed in. `badge: true` asks for the
+     * dot at any size.
+     */
+    private renderBadge;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -2159,9 +2524,13 @@ type SelectOption = string | SelectOptionObject;
  * @csspart list - Alias of `panel`
  * @csspart input - The search input inside the panel
  * @csspart option - A single-select option row
- * @cssprop --rel-field-label-reserve - Height held for the absent label row under `labelStyle="none"` so the trigger bottom-aligns with labelled siblings; defaults to the label line-height plus the wrapper gap. Set to `0` to collapse the row entirely (toolbars, table cells).
- * @cssprop --rel-select-bg - Background of the trigger, the floating label, the panel and its sticky header
+ * @csspart option-label - A single-select row's first line (the option label)
+ * @csspart option-supporting-text - A single-select row's optional second line; rendered only when the option supplies `supportingText`
+ * @cssprop --rel-field-label-reserve - Height held for the label row whenever no label renders above the trigger — `labelStyle="none"`, and `labelStyle="floating"` where the label sits inside the trigger — so the trigger still lines up with labelled siblings in a form row. Defaults to that size's label line-height plus the wrapper gap (24px at `small`, 26px at `medium` and `large`). Set to `0` to collapse the row entirely (toolbars, table cells).
+ * @cssprop --rel-select-bg - Background of the trigger, the panel and its sticky header. No longer paints behind the floating label — see `--rel-select-surface`.
  * @cssprop --rel-select-bg-disabled - Trigger background when `state="disabled"`
+ * @cssprop --rel-select-surface - Colour of the strip the floating label lays over the trigger's top border and focus ring, so the label appears to sit in a notch. It overshoots the band by 2px on the page side, so it must match the surface the field sits on. Defaults to `--rel-select-bg`. Set it when the field sits on a surface that is not the trigger's own fill, otherwise the strip shows as a short dash of the wrong colour. Mirrors `--rel-textfield-surface`.
+ * @cssprop --rel-select-surface-disabled - The same strip while `state="disabled"`, where the trigger fill changes. Defaults to `--rel-select-bg-disabled`.
  * @cssprop --rel-select-border-default - Trigger border colour at rest
  * @cssprop --rel-select-border-disabled - Trigger border colour when `state="disabled"`
  * @cssprop --rel-select-border-focus - Trigger border colour on hover, while focused (where it also thickens to 2px) and while the panel is open
@@ -2180,6 +2549,7 @@ type SelectOption = string | SelectOptionObject;
  * @cssprop --rel-select-divider - Hairline under the search field, the Select-all row and every option row
  * @cssprop --rel-select-option-hover - Background of the hovered / keyboard-highlighted / selected option and Select-all row
  * @cssprop --rel-select-option-pressed - Background of an option row while it is being pressed
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  */
 declare class RelSelect extends LitElement {
     /** Visible label. Rendered above the trigger (`labelStyle="default"`) or floating inside it; omitted under `labelStyle="none"`. */
@@ -2200,7 +2570,14 @@ declare class RelSelect extends LitElement {
     /**
      * Options to list. Each entry is a plain string (used as both value and label) or
      * `{ value, label?, supportingText?, icon? }`; `icon` is a `rel-icon` name rendered
-     * before the label, `supportingText` shows only in multi-select rows.
+     * before the label, `supportingText` renders as a second line in both single- and multi-select rows.
+     *
+     * NOTE — the panel's search matches the LABEL ONLY. `supportingText` is displayed but not
+     * searched, so an option is not findable by its second line here. This differs deliberately from
+     * `rel-autocomplete`, whose filter matches the supporting line as well: there the second line
+     * carries identifying data (a DOT or MC number) that a user types to find the row, whereas a
+     * select's is descriptive ("Read-only", "Can edit, not delete") and matching it would return rows
+     * whose visible label has nothing to do with the query.
      */
     options: SelectOption[];
     /** Enables multi-select: selected values render as removable chips, options as checkboxes, and a Select-all row appears in the panel. */
@@ -2245,6 +2622,16 @@ declare class RelSelect extends LitElement {
      */
     maxVisibleChips: number;
     /** Hides the in-panel search field. Figma's "Single Option" dropdown has no search bar at all — use this for short, non-searchable lists. */
+    /**
+     * DELIBERATE DIVERGENCE — do not default this to `!multiple`. Figma's
+     * `.Menu Dropdown` shows the search row only on `Type=Multioption`; its
+     * `Type=Single Option` panels contain five Select Option items and nothing
+     * else. Here the search row renders for single-select too unless this is set.
+     * Ruled by the user: our behaviour stands and the DESIGN FILE follows our
+     * docs. A long single-select list is unusable without search, and making the
+     * default depend on `multiple` would change the panel of every existing
+     * single-select.
+     */
     noSearch: boolean;
     private open;
     private highlightedIndex;
@@ -2290,18 +2677,41 @@ declare class RelSelect extends LitElement {
      */
     private get chipSize();
     /**
-     * Multi-select rows nest the checkbox one step down its own ramp: rel-checkbox
-     * sits a size above the rest of the system (its `large` is body/xl where a
-     * `large` field is body/lg), so large select -> medium checkbox and both
-     * medium and small select -> small checkbox, the smallest it ships. The rows
-     * still land on 48 / 40 / 32 through their own padding and min-height.
+     * Multi-select rows nest the checkbox at the SAME step as the field. This
+     * used to shift one down, compensating for rel-checkbox sitting a size above
+     * the rest of the system — but that ramp has since been realigned to Figma
+     * (16/18/20/24 with body-sm/md/lg/xl labels), so the compensation is now the
+     * bug: it is what made a small multi-select render 14px labels where Figma
+     * asks for 12px. Figma's option content heights are 20 / 22 / 24 for
+     * small / medium / large, which is exactly body-sm / body-md / body-lg — the
+     * checkbox step of the same name. The rows still land on 32 / 40 / 48
+     * through their own padding and min-height.
      */
     private get optionCheckboxSize();
+    /** Native tooltip carrying the row's full text. Both lines truncate to one
+     *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+     *  by sight; hovering the row reveals it. Only rows that carry a second line
+     *  get one, so plain lists do not sprout tooltips. */
+    private rowTitle;
     private get selectAllStatus();
     private addGlobalListeners;
     private removeGlobalListeners;
     private onOutsidePointerDown;
     private onPageScroll;
+    /**
+     * BOTH events fire, deliberately — do not delete either.
+     *
+     * This repo is split down the middle on the convention, not inconsistent in
+     * one place: rel-select and rel-segmented-button emit `changed`, while
+     * rel-switch, rel-checkbox and rel-radio emit `rel-change`. Renaming
+     * `changed` would break every existing rel-select consumer, so 1.4.9 adds
+     * the prefixed name alongside it rather than moving anyone. New code should
+     * listen for `rel-change`; `changed` stays for as long as 1.x does.
+     *
+     * One `detail` object is shared by both dispatches so the two events cannot
+     * drift apart — a listener on one sees exactly what a listener on the other
+     * sees.
+     */
     private emitChange;
     private openListbox;
     private closeListbox;
@@ -2345,18 +2755,19 @@ type SkeletonAnimation = "pulse" | "shimmer" | "none";
  * Loading placeholder: a neutral block, circle or stack of text lines that pulses or shimmers while real content loads, then hides itself once `loaded` is set. Use it in place of content whose size you already know; use a spinner for indeterminate waits.
  * @csspart base - Each placeholder surface: the single block/circle, or every bar when `shape="line"`.
  * @cssprop --rel-skeleton-color - Fill colour of the placeholder (defaults to the elevated-3 neutral background token).
+ * @cssprop --rel-skeleton-line-height - Height of each text bar when `shape="line"`; default 16px (Figma's Line shape).
  * @cssprop --rel-skeleton-highlight - Lighter band that sweeps across the placeholder when `animation="shimmer"` (defaults to the elevated-2 neutral background token).
  */
 declare class RelSkeleton extends LitElement {
-    /** Placeholder shape: `block` fills the host (min 16px tall), `circle` is a square-aspect disc sized by the host width, `line` renders `lines` 14px text bars with the last one at 65% width. */
+    /** Placeholder shape: `block` fills the host (min 16px tall), `circle` is a square-aspect disc sized by the host width, `line` renders `lines` 16px text bars with the last one at 65% width. */
     shape: SkeletonShape;
-    /** Number of text bars when `shape="line"` (minimum 1, 8px apart); ignored by the other shapes. */
+    /** Number of text bars when `shape="line"` (minimum 1, --rel-spacing-xs apart); ignored by the other shapes. */
     lines: number;
     /** Any CSS width (e.g. `"240px"`, `"50%"`) applied to the host's inline style. Empty leaves the host at its natural block width. */
     width: string;
     /** Any CSS height (e.g. `"120px"`) applied to the host's inline style. Not needed for `circle`, which derives its height from the width. */
     height: string;
-    /** Motion: `pulse` fades opacity between 100% and 40%, `shimmer` sweeps a highlight band left to right, `none` is static. Both animations are disabled under `prefers-reduced-motion: reduce`. */
+    /** Motion: `pulse` fades opacity between 20% and 40% (Figma's Start/End states), `shimmer` sweeps a highlight band left to right, `none` is static. Both animations are disabled under `prefers-reduced-motion: reduce`. */
     animation: SkeletonAnimation;
     /** Set once the real content is ready: hides the skeleton (`display: none`) and removes its `role="status"` / "Loading" label. */
     loaded: boolean;
@@ -2371,7 +2782,11 @@ declare global {
 }
 
 type ModalSide = "top" | "bottom" | "center";
-type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
+/** Panel width scale, spelled out. `fullscreen` has no short form. */
+type ModalSize = "small" | "medium" | "large" | "extra-large" | "fullscreen";
+/** Alternative spellings, not deprecations — the short names keep working. */
+type ModalSizeAlias = "sm" | "md" | "lg" | "xl";
+type ModalSizeInput = ModalSize | ModalSizeAlias;
 /**
  * `"default"` — the body is a free-form slot (24px padding, your own layout).
  * `"text"` — the Figma Modal Sheet "Text" slot: a message-only modal whose body
@@ -2413,8 +2828,8 @@ declare class RelModal extends LitElement {
     dismissible: boolean;
     /** Modal mode: renders the scrim, sets `role="dialog"` + `aria-modal`, traps Tab inside the panel and moves focus in on open. When false the panel is a `region` with no scrim and no focus trap. */
     modal: boolean;
-    /** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
-    size: ModalSize;
+    /** Panel width scale. `medium` (default) matches the Figma Modal Sheet width; `fullscreen` covers the viewport. `sm` / `md` / `lg` / `xl` are alternative spellings of `small` / `medium` / `large` / `extra-large` and stay supported — they are normalised to the full words, not deprecated. */
+    size: ModalSizeInput;
     /** Body treatment — see `ModalVariant`. `"text"` styles the default slot as
      *  the Figma "Text" message slot; the header (and its divider) render as
      *  usual above it. Default rendering is unchanged. */
@@ -2449,8 +2864,18 @@ declare class RelModal extends LitElement {
     private originalBodyPaddingRight;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    /**
+     * The footer divider is conditional: the designer confirmed that short
+     * content (a confirmation message) has no divider, but a body that scrolls
+     * does — it is a scroll affordance, not decoration. There is no CSS way to
+     * ask "does this element scroll", so it is measured and reflected onto the
+     * host as `body-scrolls`, re-measured whenever the body or its contents
+     * resize.
+     */
+    private bodyScrollObserver?;
+    private watchBodyScroll;
     disconnectedCallback(): void;
-    protected willUpdate(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     private handleOpen;
     private handleClose;
@@ -2473,6 +2898,11 @@ declare global {
  */
 type SliderType = "continuous" | "discrete" | "default" | "range";
 type TrackStyle = "solid" | "dotted";
+/** Figma Size axis, spelled out as in the design file. */
+type SliderSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations — the original short names keep working. */
+type SliderSizeAlias = "sm" | "md" | "lg";
+type SliderSizeInput = SliderSize | SliderSizeAlias;
 /**
  * Slider (Figma "Slider", 6417:1340): a pill track with a stroked round thumb,
  * optional value tooltip, discrete tick marks and a dual-thumb range mode.
@@ -2491,8 +2921,19 @@ type TrackStyle = "solid" | "dotted";
 declare class RelSlider extends LitElement {
     /** 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`. */
     type: SliderType;
-    /** Figma Size axis (S/M/L): scales track, thumb and ticks. */
-    size: "sm" | "md" | "lg";
+    /**
+     * 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.
+     */
+    showTicks?: boolean;
+    /** Whether tick marks render: explicit `show-ticks` wins, else the legacy `type="discrete"`. */
+    private get ticksVisible();
+    /** 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. */
+    size: SliderSizeInput;
     /** Lowest selectable value. */
     min: number;
     /** Highest selectable value. */
@@ -2518,6 +2959,10 @@ declare class RelSlider extends LitElement {
     private _onTouched;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    /** Alternative spellings, NOT deprecations — no console notice. Normalising
+     *  the property rather than duplicating every [size=] selector keeps the
+     *  reflected attribute canonical, so only one spelling can reach the CSS. */
+    protected willUpdate(changed: Map<string, unknown>): void;
     updated(changedProperties: Map<string, any>): void;
     private get isRange();
     private get percentage();
@@ -2549,6 +2994,8 @@ declare class RelSlider extends LitElement {
 }
 
 type SnackbarLines = "single" | "double";
+/** Canonical layout axis (Figma "Type"): default | longer-action. */
+type SnackbarVariant = "default" | "longer-action";
 /** Canonical semantic tones (Figma "Tone"): neutral | success | warning | destructive. */
 type SnackbarTone = "neutral" | "success" | "warning" | "destructive";
 /** Deprecated spellings: "default" → neutral; "error" | "danger" | "critical" → destructive. */
@@ -2567,13 +3014,17 @@ declare class RelSnackbar extends LitElement {
     message: string;
     /** Label of the optional action button (Figma trailing button, Static / Small); omitted when unset. Clicking it fires `actionClick` and then dismisses the snackbar. */
     action?: string;
-    /** Doubles the auto-dismiss delay (`duration * 2`) so the user has time to read and use the action button. Pair it with `lines="double"` for the Figma Type=Longer Action layout. */
+    /**
+     * 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.
+     */
+    variant?: SnackbarVariant;
+    /** @deprecated — 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. */
     longerAction: boolean;
     /** 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. */
     iconClose: boolean;
-    /** Layout: `"single"` (default) puts the message and the actions on one row; `"double"` stacks the message above the actions, which align to the end (Figma Type=Longer Action). */
+    /** @deprecated — 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. */
     lines: SnackbarLines;
-    /** Auto-dismiss delay in milliseconds (doubled by `longerAction`), started when `show` becomes true and restarted when `duration` or `longerAction` changes while shown. `0` (or a negative value) disables auto-dismiss. */
+    /** 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. */
     duration: number;
     /**
      * 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.
@@ -2583,6 +3034,8 @@ declare class RelSnackbar extends LitElement {
     type?: SnackbarToneInput;
     /** 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. */
     show: boolean;
+    /** Read-only canonical layout actually rendered: explicit `variant` wins, else either deprecated prop (`lines="double"` or `longerAction`) promotes to `"longer-action"`, else `"default"`. */
+    get resolvedVariant(): SnackbarVariant;
     /** Read-only canonical tone actually rendered: explicit `tone` wins, else `type`, else `"neutral"`; deprecated aliases are resolved to `"neutral"` / `"destructive"`. */
     get resolvedTone(): SnackbarTone;
     private visible;
@@ -2600,15 +3053,25 @@ declare class RelSnackbar extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/** Control scale, spelled out. Figma has no Size axis on Switch; see the size ramp in the styles. */
+type SwitchSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations — the short names work too. */
+type SwitchSizeAlias = "sm" | "md" | "lg";
+type SwitchSizeInput = SwitchSize | SwitchSizeAlias;
+/** Which side of the control the label sits on. */
+type SwitchLabelPlacement = "end" | "start";
 /**
  * Toggle switch (Figma "Switch", 5917:1174, Type=Line): a 44×20 control with a
  * thin 10px track and a 20px handle that slides 20px. Wraps a native checkbox
  * with `role="switch"`, so keyboard and screen-reader behaviour are native.
- * @csspart base - The `<label>` wrapper around the hidden input and the track
+ * @slot - Rich label content beside the control, as an alternative to the `label` property. Clicking it toggles the switch.
+ * @csspart root - The `<label>` holding the control and its optional text; carries the `label-placement` order
+ * @csspart base - The control box around the hidden input and the track
  * @csspart track - The thin rail; the handle is its `::before` pseudo-element
- * @cssprop --rel-switch-track-width - Overall control width; default 44px
- * @cssprop --rel-switch-track-height - Overall control height; default 20px
- * @cssprop --rel-switch-thumb-size - Handle diameter; default 20px (the handle always travels 20px)
+ * @csspart label - The text beside the control; not rendered when there is neither a `label` nor slotted content
+ * @cssprop --rel-switch-track-width - Overall control width; defaults to the `size` ramp (36 / 44 / 52px)
+ * @cssprop --rel-switch-track-height - Overall control height; defaults to the `size` ramp — 16 / 20 / 24px for `type="line"`, 20 / 24 / 28px for `type="pill"`
+ * @cssprop --rel-switch-thumb-size - Handle diameter; defaults to the `size` ramp (16 / 20 / 24px), and the handle always travels its own width minus the 2px inset on each side
  * @cssprop --rel-switch-track - Rail colour; default `var(--rel-bg-neutral-elevated-2)`
  * @cssprop --rel-switch-knob-on - Handle colour when checked; default `var(--rel-bg-neutral-inverse-2)`
  * @cssprop --rel-switch-knob-off - Handle colour when unchecked; default `var(--rel-text-static-light)`
@@ -2617,16 +3080,54 @@ declare class RelSnackbar extends LitElement {
 declare class RelSwitch extends LitElement {
     /** Whether the switch is on. Set it to control the state programmatically; user toggles update it and fire `rel-change`. */
     checked: boolean;
-    /** Disables interaction, dims the control to 50% and removes the handle shadow. */
+    /**
+     * Shape (Figma "Type"): `"line"` (default) is the 44x20 control with a thin
+     * 40x10 rail and the handle riding on it; `"pill"` is the 44x24 filled track
+     * with the handle inside it.
+     * NOTE: Figma's own default is Pill. We default to `line` deliberately —
+     * flipping it would restyle every existing switch — so this is a recorded
+     * divergence from the design default, not an oversight.
+     */
+    type: "line" | "pill";
+    /** Disables interaction and swaps in the dulled rail / handle fills; the handle shadow is removed. */
     disabled: boolean;
     /** Arbitrary string echoed in the `rel-change` event detail — useful when one handler serves several switches. */
     value: string;
     /** Accessible name for the native input. Without it the switch has no label of its own, so pair it with a visible `<label>` or set this. */
     fieldAriaLabel?: string;
+    /** Visible text beside the control. Clicking it toggles the switch, and it becomes the accessible name — use `fieldAriaLabel` instead when the switch has no visible text. For rich content (a bold word, an icon) slot it in the default slot rather than setting this. */
+    label?: string;
+    /**
+     * Which side the label sits on: `end` (default) puts it after the control, `start` before it.
+     *
+     * Note this is a PHYSICAL side, not a writing-direction one, matching every
+     * other placement prop in the library.
+     */
+    labelPlacement: SwitchLabelPlacement;
+    /**
+     * Control scale: `small`, `medium` (default) or `large`. `sm` / `md` / `lg`
+     * are alternative spellings and stay supported — normalised to the full
+     * words, not deprecated.
+     *
+     * Figma's Switch has axes Type / State / Enabled only, with no Size, so this
+     * ramp is ours. `medium` is exactly the control that shipped before it
+     * existed, so an existing switch is unchanged.
+     *
+     * It does NOT respond to viewport width. Picking a size per breakpoint is the
+     * consuming application's decision — a control that silently resized itself
+     * at some width would be undocumentable behaviour, and the breakpoint that
+     * matters belongs to the layout around it, not to the switch.
+     */
+    size: SwitchSizeInput;
     private _onChange;
     private _onTouched;
     private isFocused;
     private isPressed;
+    private hasSlottedLabel;
+    /** Alternative spellings, NOT deprecations — no console notice. Normalising
+     *  keeps the reflected attribute canonical so the :host([size=…]) rules only
+     *  need the full words. Same shape as rel-chip, rel-slider and rel-radio. */
+    protected willUpdate(changed: Map<string, unknown>): void;
     static styles: lit.CSSResult;
     private toggle;
     /** @internal Angular ControlValueAccessor bridge. */
@@ -2640,10 +3141,16 @@ declare class RelSwitch extends LitElement {
     private handleMouseDown;
     private handleMouseUp;
     render(): lit_html.TemplateResult<1>;
+    /** Rich label content can be slotted instead of set as text; this keeps the
+     *  label span out of the layout entirely when neither is present, so an
+     *  unlabelled switch has no stray gap beside it. */
+    private onSlotChange;
 }
 
 interface TabItem {
     label: string;
+    /** Icon name from the generated icon dictionary, rendered before the label (Figma "Show Icon" / "Icon"). Sized 20 / 18 / 16px with the tab's own size step. */
+    icon?: string;
     badge?: number;
     badgeDot?: boolean;
     disabled?: boolean;
@@ -2661,6 +3168,8 @@ type TabSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
 declare class RelTabItem extends LitElement {
     /** Text shown on the tab. */
     label: string;
+    /** Icon name from the generated icon dictionary, rendered before the label (Figma "Show Icon" / "Icon"). Sized 20 / 18 / 16px with the tab's own size step. */
+    icon: string;
     /** Optional identifier for the tab. `<rel-tab>` does not read it; look it up from the item at `event.detail` when handling `rel-tab-change`. */
     value: string;
     /** Count shown in a small badge after the label; `0` hides the badge. */
@@ -2682,7 +3191,7 @@ declare class RelTabItem extends LitElement {
  * @csspart item - Each `role="tab"` element
  * @csspart label - The text span inside each tab
  * @cssprop --rel-tab-active-color - Underline colour of the active tab; default `var(--rel-bg-brand)`
- * @cssprop --rel-tab-underline-height - Thickness of the active underline; default 3px
+ * @cssprop --rel-tab-underline-height - Thickness of the active underline; default 1px (`--rel-stroke-sm`, the weight Figma draws). Set it to restore the heavier 3px bar shipped previously.
  * @cssprop --rel-tab-text-default - Label colour of the active tab; default `var(--rel-text-default)`
  * @cssprop --rel-tab-text-hover - Label colour while hovering an enabled tab; default `var(--rel-text-label)`
  * @cssprop --rel-tab-text-disabled - Label colour of a disabled tab; default `var(--rel-text-disabled)`
@@ -2735,6 +3244,7 @@ declare class RelTab extends LitElement {
  * @csspart option - Each hour / minute / second / AM-PM entry button
  * @csspart footer - The Now / Cancel / OK row
  * @csspart helper - The helper / error text live region under the field
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  * @fires rel-focus - Fired when the text input receives focus. No detail.
  */
 declare class RelTimePicker extends LitElement {
@@ -2806,6 +3316,7 @@ declare class RelTimePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     /** Focus the selected (or first enabled) option in the columns. */
     private focusPanelSelection;
@@ -2882,19 +3393,38 @@ declare global {
     }
 }
 
-/** Canonical semantic tones. */
-type ToastTone = "default" | "destructive";
-/** Deprecated tone spellings, all mapped to "destructive". */
-type ToastToneAlias = "error" | "danger" | "critical";
+/** Canonical semantic tones (Figma "Tone"): neutral | destructive. */
+type ToastTone = "neutral" | "destructive";
+/** Deprecated spellings: "default" → neutral; "error" | "danger" | "critical" → destructive. */
+type ToastToneAlias = "default" | "error" | "danger" | "critical";
 type ToastToneInput = ToastTone | ToastToneAlias;
 /** @deprecated since 1.4.7 — use `ToastToneInput`. */
 type ToastType = "default" | "error";
 /**
- * Transient bottom-centre notification: a fixed-position dark pill with a message, an optional action button and a dismiss button, shown via `show` / `open()` and hidden again after `duration` milliseconds. Use it for brief, non-blocking confirmations; use `rel-alert` for persistent messages.
+ * Where the toast is anchored in the viewport. PHYSICAL sides, not logical
+ * start/end: nothing else in this library adapts to writing direction, and a
+ * logical model in one component would make it the odd one out.
+ */
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** Toast scale, spelled out. Figma has no Size axis on Toast; see the ramp in the styles. */
+type ToastSize = "small" | "medium" | "large";
+/** Alternative spellings, not deprecations — the short names work too. */
+type ToastSizeAlias = "sm" | "md" | "lg";
+type ToastSizeInput = ToastSize | ToastSizeAlias;
+/**
+ * Transient notification: a fixed-position card with a message, an optional action button and a dismiss button, shown via `show` / `open()` and hidden again after `duration` milliseconds. Anchors to any of six viewport positions (`position`, default `bottom-center`) at three scales (`size`, default `medium`). Use it for brief, non-blocking confirmations; use `rel-alert` for persistent messages.
+ *
+ * STACKING. Toasts sharing a `position` stack automatically — no wrapper element
+ * and no change to your markup. Up to `max-visible` (default 3) show at once,
+ * newest against the anchor edge; any beyond that WAIT rather than being dropped,
+ * and a waiting toast's `duration` does not start until it is actually on screen.
+ * Dismissing one closes the gap for the rest. The six positions stack
+ * independently. Behaviour change: five toasts at one position used to render on
+ * top of each other; now three show and two wait.
  * @csspart base - The `role="status"` toast container that carries the tone class
  * @csspart label - The message text span
  * @csspart action - The action button; rendered only when `actionlabel` is set
- * @csspart close-button - The dismiss (✕) button
+ * @csspart close-button - The dismiss button; rendered while `dismissible` is true
  * @cssprop --rel-toast-z - `z-index` of the fixed host (default `9000`); raise it when a modal or drawer layer covers the toast
  * @cssprop --rel-z-toast - Deprecated alias of `--rel-toast-z`, still read as its fallback
  */
@@ -2902,12 +3432,12 @@ declare class RelToast extends LitElement {
     /** Text of the toast. It is also announced to screen readers through the shared live-region announcer each time `show` becomes true. */
     message: string;
     /**
-     * Semantic tone: `"default"` (dark neutral pill) | `"destructive"` (danger fill, announced assertively). `"error"`, `"danger"` and `"critical"` are deprecated aliases of `"destructive"` and log a one-time console notice. Takes precedence over the deprecated `type` prop.
+     * Semantic tone (Figma "Tone"): `"neutral"` (default: neutral surface) | `"destructive"` (danger fill, announced assertively). `"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.
      */
     tone?: ToastToneInput;
-    /** @deprecated Deprecated since 1.4.7 — alias of `tone`; use `tone`. Same values as `tone`; `type="error"` maps to `tone="destructive"`. Ignored when `tone` is set. Logs a one-time console notice. */
+    /** @deprecated 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. */
     type?: ToastToneInput;
-    /** Read-only canonical tone actually rendered: explicit `tone` wins, else `type`, else `"default"`; deprecated aliases are resolved to `"destructive"`. */
+    /** Read-only canonical tone actually rendered: explicit `tone` wins, else `type`, else `"neutral"`; deprecated aliases are resolved to `"neutral"` / `"destructive"`. */
     get resolvedTone(): ToastTone;
     /** Label of the optional action button rendered between the message and the dismiss button; the button is omitted when unset. Clicking it fires `action` and then closes the toast. */
     actionLabel?: string;
@@ -2915,10 +3445,54 @@ declare class RelToast extends LitElement {
     duration: number;
     /** Whether the toast is visible. Set it to true (or call `open()`) to show the toast and start the auto-dismiss timer; it is set back to false by `close()`, the dismiss button, the action button and the timer. */
     show: boolean;
+    /** Shows the trailing dismiss button (Figma "Show Close Button"). Defaults to true; because it is a Lit boolean, `dismissible="false"` is still true — set the property to `false` from script to hide the button. */
+    dismissible: boolean;
+    /**
+     * Where the toast is anchored: `bottom-center` (default, unchanged from
+     * before this prop existed), `bottom-left`, `bottom-right`, `top-left`,
+     * `top-center` or `top-right`. Top anchors also animate in from the top edge
+     * rather than upward from the bottom.
+     *
+     * Figma's Toast has axes Content / Show Button / Show Close Button / Tone and
+     * no position, so this axis is ours.
+     */
+    position: ToastPosition;
+    /**
+     * Toast scale: `small`, `medium` (default, unchanged) or `large`. `sm` / `md`
+     * / `lg` are alternative spellings and stay supported — normalised to the
+     * full words, not deprecated. Scales the padding, the inner gap, the message
+     * type role and the close icon. Figma has no Size axis on Toast.
+     */
+    size: ToastSizeInput;
+    /**
+     * How many toasts may be on screen at once AT THIS POSITION. Further ones
+     * wait their turn rather than being dropped — a notification the user never
+     * saw is worse than a late one — and each toast's `duration` only starts
+     * once it actually becomes visible, so a queued message cannot expire unseen.
+     * Default 3; unbounded stacking just fills the viewport.
+     */
+    maxVisible: number;
     private visible;
     private _dismissTimer;
+    /** The stack this instance is currently registered in, so a `position`
+     *  change while shown can leave the old stack before joining the new one. */
+    private _registeredAt;
     static styles: lit.CSSResult;
     willUpdate(changed: Map<string, unknown>): void;
+    private joinStack;
+    private leaveStack;
+    /**
+     * Called by the reflow with this instance's admission state. The
+     * auto-dismiss timer starts HERE, on becoming visible — not when `show` is
+     * set — so a toast waiting its turn cannot expire before anyone has seen it.
+     */
+    private _setVisible;
+    /** Offset from the anchor edge, written by the reflow. Index 0 gets no
+     *  transform at all, so a lone toast is untouched by the stacking code. */
+    private _setStackOffset;
+    /** Measured height of the rendered card, for the stack arithmetic. */
+    private get _cardHeight();
+    private get anchorsTop();
     disconnectedCallback(): void;
     /** Shows the toast: sets `show = true`, which starts the auto-dismiss timer and announces `message`. */
     open(): void;
@@ -2930,21 +3504,31 @@ declare class RelToast extends LitElement {
 
 type TooltipPosition = "above" | "below" | "left" | "right";
 type TooltipType = "single-line" | "multi-line";
+/**
+ * Bubble appearance. `inverse` is the original look — an inverse-surface bubble
+ * that is dark-on-light in light mode and light-on-dark in dark mode.
+ * `neutral` is a light-surface bubble, the same sense the word already carries
+ * on rel-toast, where `tone="neutral"` is likewise the light surface.
+ */
+type TooltipTone = "inverse" | "neutral";
 /**
  * Hover/focus tooltip (Figma "Tooltip"): wraps a trigger element and shows a short inverse-coloured text bubble above, below, left or right of it. Use it for supplementary hints on icons and truncated labels only — the text is not reachable on touch and must never be the only place critical information lives.
  * @slot - The trigger element (one focusable element such as a button or icon button). It receives `aria-describedby` pointing at the bubble.
  * @csspart panel - The tooltip bubble (`role="tooltip"`): background, padding, radius, shadow and max-width.
  * @csspart indicator - The triangular tail pointing at the trigger, rendered only when `show-tail` is set.
+ * @cssprop --rel-tooltip-offset - Gap between the trigger and the bubble; defaults to `6px`, or `13px` when `show-tail` is set so the tail clears the trigger.
  */
 declare class RelTooltip extends LitElement {
     /** Plain-text content of the bubble. Empty text still renders an (empty) bubble on hover, so always set it. */
     text: string;
-    /** Side of the trigger the bubble appears on, 6px away and centred: `above`, `below`, `left` or `right`. No collision detection — pick a side with room in the viewport. */
+    /** Side of the trigger the bubble appears on, centred and 6px away (13px when `show-tail` is set, so the tail clears the trigger; override with `--rel-tooltip-offset`): `above`, `below`, `left` or `right`. No collision detection — pick a side with room in the viewport. */
     position: TooltipPosition;
     /** Renders the triangular tail (`indicator` part) on the bubble's edge facing the trigger. */
     showTail: boolean;
-    /** Figma "Type": `single-line` keeps the text on one line and sizes to content; `multi-line` wraps inside a 220px max-width bubble. */
+    /** Figma "Type": `single-line` keeps the text on one line and sizes to content; `multi-line` wraps inside a 200px max-width bubble. */
     type: TooltipType;
+    /** Bubble appearance: `inverse` (default) is the original inverse-surface bubble, unchanged; `neutral` is a light surface — `--rel-bg-neutral` with `--rel-text-default` and a 1px `--rel-border-default`, tail included. Figma has no such variant; this is a deliberate addition. */
+    tone: TooltipTone;
     private uniqueId;
     static styles: lit.CSSResult;
     connectedCallback(): void;
@@ -3035,7 +3619,8 @@ interface UploadState {
  * @fires rel-file-error - Fired when one file's `uploader` rejects in self-driving mode. Detail: `{ id: string, file: File, error: string }`.
  * @fires rel-complete - Fired when the whole self-driving batch settles without being cancelled. Detail: `{ succeeded: UploadFile[], failed: UploadFile[] }`.
  * @fires rel-state - Fired when the derived `state` snapshot changes (and once after connecting). Detail: `UploadState`.
- * @cssprop --rel-upload-browse-hover-bg - Background of the Browse button on hover; falls back to `--rel-action-neutral-outline-hover`, then `--rel-bg-surface-elevated`
+ * @cssprop --rel-upload-browse-hover-bg - Background of the Browse button on hover. Defaults to `transparent`, which is what the underlying `rel-button` secondary style draws (Figma's outline button reacts on its border, not its fill), so this only takes effect when you set it.
+ * @csspart browse - The `rel-button` that opens the file picker (Figma "Browse Button": Size=Medium, Style=Secondary).
  */
 declare class RelUpload extends LitElement {
     /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
@@ -3319,4 +3904,4 @@ type Politeness = "polite" | "assertive";
  */
 declare function announce(message: string, politeness?: Politeness): void;
 
-export { type AlertTone, type AlertToneAlias, type AlertToneInput, type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BindShortcutOptions, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type ContainerBackground, type ContainerSurface, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, FocusTrap, type KbdSize, type LabelPlacement, type MenuItem, type MenuSize, type MenuType, type MenubarType, type ModalSide, type ModalSize, type ModalVariant, type Orientation, type OtpInputMode, type OtpSize, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type ShortcutHandler, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarTone, type SnackbarToneAlias, type SnackbarToneInput, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TabSize, type TextAlign, type TextFieldPrefixStyle, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastTone, type ToastToneAlias, type ToastToneInput, type ToastType, type TooltipPosition, type TooltipType, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext, announce, bindShortcut, formatShortcutParts, getDeepActiveElement, getFocusableElements, isApplePlatform, isEditableTarget, matchesShortcut, parseShortcut, trapTabKey };
+export { type AlertTone, type AlertToneAlias, type AlertToneInput, type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type AvatarSize, type AvatarSizeAlias, type AvatarSizeInput, type BadgeSize, type BadgeSizeAlias, type BadgeSizeInput, type BindShortcutOptions, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipSizeAlias, type ChipSizeInput, type ChipTone, type ChipToneAlias, type ChipToneInput, type ChipVariant, type ChipVariantAlias, type ChipVariantInput, type ContainerBackground, type ContainerPadding, type ContainerPaddingAlias, type ContainerPaddingInput, type ContainerSurface, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, FocusTrap, type KbdSize, type LabelPlacement, type MenuItem, type MenuSize, type MenuType, type MenuWidth, type MenubarType, type ModalSide, type ModalSize, type ModalSizeAlias, type ModalSizeInput, type ModalVariant, type Orientation, type OtpInputMode, type OtpSize, type OtpType, type PopoverContentSize, type PopoverContentSizeAlias, type PopoverContentSizeInput, type ProgressMode, type RadioOption, type RadioSize, type RadioSizeAlias, type RadioSizeInput, type RangePickerSize, type RangePickerSizeAlias, type RangePickerSizeInput, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type ShortcutHandler, type SkeletonAnimation, type SkeletonShape, type SliderSize, type SliderSizeAlias, type SliderSizeInput, type SliderType, type SnackbarLines, type SnackbarTone, type SnackbarToneAlias, type SnackbarToneInput, type SnackbarType, type SnackbarVariant, type Step, type StepStatus, type StepperConnector, type StepperSize, type StepperType, type SwitchLabelPlacement, type SwitchSize, type SwitchSizeAlias, type SwitchSizeInput, type TabItem, type TabSize, type TextAlign, type TextFieldPrefixStyle, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastPosition, type ToastSize, type ToastSizeAlias, type ToastSizeInput, type ToastTone, type ToastToneAlias, type ToastToneInput, type ToastType, type TooltipPosition, type TooltipTone, type TooltipType, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext, announce, bindShortcut, formatShortcutParts, getDeepActiveElement, getFocusableElements, isApplePlatform, isEditableTarget, matchesShortcut, parseShortcut, trapTabKey };