@reliability-design/web 1.4.9 → 1.4.11

package/dist/index.d.mts

@@ -1,8 +1,37 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, PropertyDeclaration, TemplateResult } from 'lit';
 export * from '@reliability-design/icons';
 
+type KebabAlias = {
+    /** The kebab attribute that is observed in addition to the prop's own. */
+    kebab: string;
+    /** The reactive property it maps onto. */
+    prop: PropertyKey;
+    /** The prop's own (joined, legacy) attribute name, which keeps reflecting. */
+    legacy: string;
+};
+declare class RelElement extends LitElement {
+    /**
+     * Explicit kebab spellings the derivation can't reach, as
+     * `{ "kebab-name": "propName" }`; e.g. a prop whose own name is lowercase
+     * (`supportingtext`). Same behaviour as a derived alias, deprecation
+     * notice for the prop's own attribute included.
+     */
+    static kebabAliases?: Readonly<Record<string, PropertyKey>>;
+    /** Props that must not get a derived kebab alias (adds to NO_KEBAB_ALIAS). */
+    static noKebabAlias?: readonly PropertyKey[];
+    /** The kebab aliases this class observes (for tests, docs and audit tools). */
+    static kebabAliasList(): KebabAlias[];
+    private static relAliasTables;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    private applyKebabAttribute;
+    protected update(changedProperties: PropertyValues): void;
+    static createProperty(name: PropertyKey, options?: PropertyDeclaration): void;
+    static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): PropertyDescriptor | undefined;
+}
+
 /**
  * Single collapsible section (Figma "Accordion", 6021:1085): a clickable header
  * that expands/collapses the slotted body with an animated chevron.
@@ -15,7 +44,7 @@ export * from '@reliability-design/icons';
  * @csspart icon - The trailing icon wrapper
  * @csspart content - The `role="region"` body that holds the default slot
  */
-declare class RelAccordion extends LitElement {
+declare class RelAccordion extends RelElement {
     /** Header text. Note it is also the native HTML `title` attribute, so browsers show it as a tooltip on hover. */
     title: string;
     /** Whether the body is expanded; toggled by the header and reported via `open-change`. Setting it from code does not fire the event. */
@@ -28,16 +57,12 @@ declare class RelAccordion extends LitElement {
     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.
-     *
-     * 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";
+    /**
+     * Body treatment (Figma "Content Type"). `text` (default) styles the slotted body as copy: 0 / 16 / 16 / 16px padding, body-md type and the `--rel-text-body` colour. `custom` is for your own layout (a table, a form, a nested card): the body wrapper has no padding, sets no type or colour of its own (the slotted content inherits from the accordion's context), and has an 8px (`--rel-border-radius-sm`) corner radius. With `custom`, `type="action"` does not indent the body. Unknown values fall back to `text`.
+     */
+    contentType: "text" | "custom";
     /** 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. */
@@ -45,6 +70,18 @@ declare class RelAccordion extends LitElement {
     static styles: lit.CSSResult;
     /** Stable id prefix wiring the header to its panel. */
     private accordionId;
+    /** Body geometry captured just before an open/close re-render: the start point of the animation. */
+    private bodyFrom?;
+    /** Bumped per toggle so a stale transitionend / timer cannot clear a newer animation's inline styles. */
+    private bodyAnimation;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Animates max-height between the captured start and the measured end, then
+     * hands control back to the stylesheet (open = none, closed = 0). Measuring
+     * replaces the old fixed 1000px ceiling, which clipped taller bodies.
+     */
+    private animateBody;
     private toggle;
     render(): lit_html.TemplateResult<1>;
 }
@@ -64,7 +101,7 @@ type AlertToneInput = AlertTone | AlertToneAlias;
  * @csspart action - The inline link; rendered only when both `url-text` and `url-href` are set
  * @csspart close-button - The dismiss (✕) button; rendered only while `dismissible` is true
  */
-declare class RelAlert extends LitElement {
+declare class RelAlert extends RelElement {
     /**
      * Semantic tone (Figma "Tone"): `"neutral"` (default) | `"info"` | `"success"` | `"warning"` | `"destructive"`. Drives the fill/border colour, the title colour and the leading icon (info, check-circle, alert-circle, error). `"error"`, `"danger"` and `"critical"` are deprecated aliases of `"destructive"` and log a one-time console notice. Takes precedence over the deprecated `type` prop.
      */
@@ -84,7 +121,7 @@ declare class RelAlert extends LitElement {
     urlText?: string;
     /** `href` of the inline link. The link appears only when both `urlText` and `urlHref` are set. */
     urlHref?: string;
-    /** Shows the dismiss (✕) 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. */
+    /** Shows the dismiss (✕) button. Defaults to true; `dismissible="false"` (or the property set to `false`) hides the button. */
     dismissible: boolean;
     /** True once the alert has been dismissed; hides the host via `:host([dismissed]) { display: none }`. Set it back to `false` to show the alert again. */
     dismissed: boolean;
@@ -118,7 +155,7 @@ 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. 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 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)
@@ -128,7 +165,7 @@ type FieldLabelStyle = "default" | "floating" | "none";
  * @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 {
+declare class RelTextfield extends RelElement {
     /**
      * Visible label text. Rendered above the control (default), inside it as a
      * floating label (`labelStyle="floating"`) or as the notch of the `legend`
@@ -271,11 +308,19 @@ 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.
+ * Form-associated, so an outer `<label>` (wrapping it, or `for=`) toggles it and names it; it still sets no form value and is not submitted.
  * @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 {
+declare class RelCheckbox extends RelElement {
+    /** Form-associated only so an outer `<label>` has a control (see utils/outer-label.ts). No form value is set. */
+    static formAssociated: boolean;
+    /** `supporting-text` is the canonical attribute; the prop's own lowercase
+     *  name means RelElement can't derive it, so it is declared here. */
+    static kebabAliases: {
+        "supporting-text": string;
+    };
     /** 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. */
@@ -284,6 +329,8 @@ declare class RelCheckbox extends LitElement {
     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;
+    /** Disables the checkbox exactly as `state="disabled"` does (`state` stays the documented spelling). Either one disables it, and so does an ancestor `<fieldset disabled>`; none of them changes the others. New in 1.5.0. */
+    disabled: boolean;
     /** 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). */
@@ -309,18 +356,40 @@ declare class RelCheckbox extends LitElement {
      *  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
+     *  Normally unnecessary: 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. */
+     *  repeat it. Left unset the attribute is not emitted at all.
+     *
+     *  An outer `<label>` (wrapping the checkbox, or `for=`) names it only when
+     *  neither this nor a visible `label` is set. */
     fieldAriaLabel?: string;
+    /**
+     * camelCase alias of `supportingtext`, matching rel-textfield and rel-select.
+     * The declared property is lowercase, so `el.supportingText = "…"`, lit
+     * `.supportingText=${…}` and Angular `[supportingText]` used to set an unused
+     * expando and render nothing. Reading or writing either name now hits the same
+     * reactive property; the attribute stays `supportingtext`.
+     */
+    get supportingText(): string;
+    set supportingText(val: 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;
+    private readonly internals;
+    /** A click on an outer label arrives at the host; route it through the
+     *  native input so it runs the same `toggle()` a direct click does. */
+    private readonly outerLabel;
+    /** `state="disabled"`, the `disabled` property, or an ancestor `<fieldset disabled>`. */
+    private get isDisabled();
+    /** @internal Form-associated lifecycle: an ancestor `<fieldset disabled>` disables the control too (utils/outer-label.ts, 3). */
+    formDisabledCallback(): void;
+    /** fieldAriaLabel wins; then the visible label (native, via the inner
+     *  <label>, so no attribute); then an outer <label>'s text. */
+    private get inputAriaLabel();
     static styles: lit.CSSResult;
     protected willUpdate(changed: PropertyValues<this>): void;
     /** Trailing has no compact layout in the spec — trailing wins. */
@@ -335,6 +404,8 @@ declare class RelCheckbox extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/** Status badge on the avatar's bottom-right edge (Figma ".Avatar Badge" Type). `""` = none. */
+type AvatarBadge = "" | "dot" | "icon";
 /** Diameter step, spelled out. */
 type AvatarSize = "large" | "medium" | "small" | "extra-small";
 /** Alternative spellings, not deprecations — the short names keep working. */
@@ -342,8 +413,11 @@ 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`)
+ * @slot - Icon content rendered when `type="icon"` (typically an inline SVG, sized 20 / 18 / 16 / 12px by `size`); not rendered when the `icon` attribute is set
  * @csspart base - The circular wrapper that carries the size, variant and inline `bg` / `color` overrides
+ * @csspart badge - The status badge on the bottom-right edge, rendered when `badge` is set (new in 1.5.0)
+ * @cssprop --rel-avatar-ring-color - Colour of the `ring`; defaults to `--rel-border-inverse` (new in 1.5.0)
+ * @cssprop --rel-avatar-badge-bg - Fill of the `badge`; defaults to `--rel-bg-success` for `dot` and `--rel-bg-neutral-elevated-2` for `icon` (new in 1.5.0)
  * @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
@@ -357,7 +431,7 @@ type AvatarSizeInput = AvatarSize | AvatarSizeAlias;
  * @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 {
+declare class RelAvatar extends RelElement {
     /** 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. */
@@ -374,6 +448,16 @@ declare class RelAvatar extends LitElement {
     bg: string;
     /** Any CSS colour applied inline as `color` on the circle (initials / icon), overriding the variant text colour. */
     color: string;
+    /** New in 1.5.0. rel-icon name shown for `type="icon"` (Figma's "Icon" swap, e.g. `person`), as an alternative to slotting an SVG. When set it replaces the slot. */
+    icon: string;
+    /** New in 1.5.0. Figma "Show Ring": a 2px ring in `--rel-border-inverse` just outside the circle, which separates overlapping avatars. It does not change the avatar's size. */
+    ring: boolean;
+    /** New in 1.5.0. Figma "Show Badge": a status badge on the bottom-right edge with a 1px `--rel-border-inverse` edge. `dot` is a `--rel-bg-success` disc; `icon` is a `--rel-bg-neutral-elevated-2` disc holding `badge-icon`. 12 / 10 / 8 / 6px for large / medium / small / extra-small. Empty (the default) renders none. */
+    badge: AvatarBadge;
+    /** New in 1.5.0. rel-icon name inside a `badge="icon"` badge. */
+    badgeIcon: string;
+    /** New in 1.5.0. What the badge means, for screen readers (e.g. "Online"). Without it the badge is decorative and hidden from assistive technology, because a dot conveys its meaning by colour alone. */
+    badgeLabel: string;
     static styles: lit.CSSResult;
     /** Alternative spellings, NOT deprecations — no console notice. Normalising
      *  the property rather than duplicating every selector keeps the reflected
@@ -381,6 +465,7 @@ declare class RelAvatar extends LitElement {
      *  the CSS. Same shape as rel-chip and rel-slider. */
     protected willUpdate(changed: Map<string, unknown>): void;
     render(): lit_html.TemplateResult<1>;
+    private renderBadge;
 }
 
 /** Canonical semantic tones (Figma "Tone"): neutral | destructive | warning | success | info. */
@@ -406,12 +491,15 @@ type ChipBorder = "default" | "rounded";
  * @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
+ * @csspart remove - The remove `<button>` (rendered only when `removable`)
  * @cssprop --rel-chip-focus-ring - Colour of the keyboard focus outline; default `var(--rel-border-focus)`
  */
-declare class RelChip extends LitElement {
+declare class RelChip extends RelElement {
     static shadowRootOptions: ShadowRootInit;
     /** Text shown in the chip; also its accessible name and the drag payload. */
     label: string;
+    /** Accessible name for an icon-only or intentionally unlabelled chip; overrides `label` for the chip and its remove button. */
+    fieldAriaLabel?: 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`. */
@@ -428,6 +516,8 @@ declare class RelChip extends LitElement {
     avatar?: string;
     /** Shows a remove (close) button after the label; clicking it sets `removed` and fires `removed`. */
     removable: boolean;
+    /** New in 1.5.0. Makes the chip body plain text: no `button` role, no Tab stop, no Enter / Space / Delete handling and no host click re-dispatch. The remove button (when `removable`) stays a real button. For chips that only display a value inside another control, e.g. rel-select's multi-select chips. */
+    presentational: 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`. */
@@ -459,7 +549,7 @@ declare global {
  * 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:
  * `icon` (a `rel-icon` name shown before the label) and `disabled` (`true`
- * renders the row dulled and makes it unselectable by click or keyboard).
+ * renders the row's text in `--rel-text-disabled`, icon unchanged, and makes it unselectable by click or keyboard).
  */
 type AutocompleteItem = string | Record<string, unknown>;
 type AutocompleteFilter = "contains" | "starts-with" | "none";
@@ -498,9 +588,9 @@ type AutocompleteSearchFn = (query: string) => Promise<AutocompleteItem[]>;
  * @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.
+ * @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 the other overlays (select, autocomplete, the three pickers) so the whole family can be moved from one place.
  */
-declare class RelAutocomplete extends LitElement {
+declare class RelAutocomplete extends RelElement {
     /** 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). */
@@ -529,7 +619,7 @@ declare class RelAutocomplete extends LitElement {
      * 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
+     * destroy the query the user is typing. `rel-select` can lay chips over 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.
@@ -614,7 +704,7 @@ declare class RelAutocomplete extends LitElement {
     private addGlobalListeners;
     private removeGlobalListeners;
     private onOutsidePointerDown;
-    private onPageScroll;
+    private scrollWatch;
     private openPanel;
     private closePanel;
     private showNativePopover;
@@ -672,6 +762,38 @@ declare global {
     }
 }
 
+/**
+ * New in 1.5.0. A row of overlapping avatars (Figma "Avatar Group", 9243:85), with an optional "+N" circle for the people not shown. Slot `rel-avatar` elements into it: the group gives each one its `size` and a `ring`, overlaps them by a quarter of the diameter, and hides those beyond `max`.
+ * @slot - The `rel-avatar` elements, in display order
+ * @csspart base - The `role="group"` row holding the avatars and the overflow circle
+ * @csspart overflow - The "+N" circle (a `rel-avatar` of `type="text"`, `variant="fill"`) shown when people are not displayed
+ * @cssprop --rel-avatar-group-overlap - How far each avatar overlaps the previous one (a positive length); defaults to Figma's 10 / 8 / 6 / 4px for large / medium / small / extra-small
+ */
+declare class RelAvatarGroup extends RelElement {
+    /** Diameter step given to every avatar in the group and to the "+N" circle: `large` 40px, `medium` 32px, `small` 24px, `extra-small` 20px. `lg` / `md` / `sm` / `xs` are accepted and normalised to the full words. */
+    size: AvatarSizeInput;
+    /** Most avatars to show; the rest are hidden and counted in the "+N" circle. `0` (the default) shows them all. */
+    max: number;
+    /** The full number of people when only some avatars are slotted (e.g. 3 slotted of 57). The "+N" circle then counts everyone not shown. `0` (the default) counts the slotted avatars only. */
+    total: number;
+    /** Accessible name of the group (e.g. "Project members"). No default: without it the group has no name. */
+    label: string;
+    /** Accessible name of the "+N" circle; `{n}` is replaced by the count. */
+    overflowLabel: string;
+    private avatarCount;
+    static styles: lit.CSSResult;
+    private get avatars();
+    private get visibleCount();
+    /** People counted in the "+N" circle. */
+    get overflowCount(): number;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Give every slotted avatar the group's size and a ring, and hide the ones beyond `max`. */
+    private syncAvatars;
+    private onSlotChange;
+    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. */
@@ -684,7 +806,7 @@ type BadgeSizeInput = BadgeSize | BadgeSizeAlias;
  * @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 {
+declare class RelBadge extends RelElement {
     /** 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. */
     number: string;
     /** Explicit accessible name; when empty it is composed as "<number> <suffix>" or, with no number, "New <suffix>". Attribute is `arialabel`. */
@@ -726,9 +848,11 @@ interface BreadcrumbItem {
  * @csspart base - The `<nav>` landmark wrapping the ordered list.
  * @csspart label - The non-link current-page text (`aria-current="page"`), also used for any item without a `url`.
  */
-declare class RelBreadcrumbs extends LitElement {
+declare class RelBreadcrumbs extends RelElement {
     /** Ordered trail, root first: `{ label: string; url?: string }[]`. Items with a `url` render as links except the last one, which is always the current page (and never a link). Set as a property — arrays do not survive attribute serialisation. */
     items: BreadcrumbItem[];
+    /** Name the trail when several breadcrumb landmarks share a page. */
+    ariaLabel: string;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -757,7 +881,7 @@ type ButtonTone = "default" | "primary" | "secondary" | "critical" | "success" |
  * @csspart indicator - The loading spinner, rendered only while `loading` is set.
  * @cssprop --rel-button-min-width - Overrides the per-size minimum width (Figma small/medium/large = 80/100/120px, ghost small = 56px). Ignored by `icon-only` and `link`.
  */
-declare class RelButton extends LitElement {
+declare class RelButton extends RelElement {
     /** 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;
     /**
@@ -805,9 +929,10 @@ declare class RelButton extends LitElement {
  * @csspart action - The previous-month and next-month buttons
  * @csspart label - The month/year heading and each weekday column header
  * @csspart list - The weekday-header row and the day grid
- * @csspart item - Each day cell button
+ * @csspart item - Each day cell button (unavailable days also carry `unavailable`)
+ * @csspart unavailable - Day cells that cannot be picked (outside `min` / `max`, or blocked by `isDateDisabled`), alongside `item`. They are `aria-disabled` and stay focusable, so `::part(item):disabled` does not match them; style them with `::part(unavailable)`
  */
-declare class RelCalendar extends LitElement {
+declare class RelCalendar extends RelElement {
     /** Selected date as an ISO `YYYY-MM-DD` string, or `null` for no selection; setting it also moves the visible month. */
     value: string | null;
     /** Earliest selectable date (ISO `YYYY-MM-DD`); earlier days render disabled. */
@@ -841,13 +966,57 @@ declare class RelCalendar extends LitElement {
     private announceMonth;
     private previousMonth;
     private nextMonth;
+    /**
+     * A click is an interaction with that day even when the day cannot be
+     * picked, so it takes the Tab stop first. Set explicitly rather than left to
+     * handleDayGridFocusin because Safari does not focus a button on click.
+     */
+    private handleDayClick;
     private selectDay;
-    private handleKeyDown;
+    private dayButtonHasFocus;
+    /**
+     * Day-grid keys. Movement is by DATE, never by grid index (an index
+     * addresses a different date once the view flips month). The key map is
+     * period-page's dayGridTarget, shared with rel-date-picker and
+     * rel-range-picker: arrows ±1/±7 days, Home/End the week (honouring
+     * `week-start`), PageUp/PageDown a month, Shift+PageUp/PageDown a year,
+     * clamped to the target month's last day.
+     */
+    private handleDayKeydown;
     /**
-     * Index of the single grid cell carrying tabindex="0". The old expression
+     * Move the rove AND focus to `date`, flipping the view when the date has left
+     * the visible month. Same shape as the pickers' moveGridFocusTo, and the
+     * order matters: `focusedDate` is set from the date BEFORE focus moves,
+     * because lit reuses the day buttons across the month re-render, so the
+     * focused element may not change and no focus event would fire to record it.
+     */
+    private moveGridFocusTo;
+    /**
+     * Focus arriving any other way — a click, Tab / Shift+Tab, or a programmatic
+     * focus() — moves the Tab stop to that day too, so Tab out of the grid and
+     * back returns to the day last interacted with. This catches every case in
+     * which the focused ELEMENT changes; the one case where it does not (a month
+     * flip that reuses the focused button) is covered by moveGridFocusTo setting
+     * the date first.
+     */
+    private handleDayGridFocusin;
+    /**
+     * Index of the single grid cell carrying tabindex="0": the day last
+     * interacted with (`focusedDate`), else the selection, else today, else the
+     * first enabled day of the month, else the first cell. The old expression
      * (`isSelected || (index === 0 && !focusedDate)`) left the grid with ZERO
-     * tab stops once the user arrowed around without a selection — Tab could
-     * never re-enter the calendar.
+     * tab stops once the user arrowed around without a selection; the trailing
+     * fallback keeps it at exactly one by construction.
+     *
+     * `focusedDate` is written by moveGridFocusTo (arrows / Home / End / Page
+     * keys, from the date, before focus moves), handleDayClick and
+     * handleDayGridFocusin (Tab or any other focus route), the same model as
+     * rel-date-picker and rel-range-picker. It counts wherever it sits in the
+     * 42-cell grid, out-of-month cells included: every date appears at most
+     * once, so this cannot create a second Tab stop, and after a chevron the
+     * day last used stays the Tab stop while it is still on screen. Unavailable
+     * days are aria-disabled, not native disabled, so a Tab stop on one is still
+     * reachable.
      */
     private getRovingIndex;
     render(): lit_html.TemplateResult<1>;
@@ -862,7 +1031,7 @@ declare class RelCalendar extends LitElement {
  * @csspart header - The media region wrapper (present only when `type="media"`)
  * @csspart content - The padded body that wraps the default slot
  */
-declare class RelCard extends LitElement {
+declare class RelCard extends RelElement {
     /**
      * Figma "Type" axis: custom (default) renders slotted content with card
      * padding; media adds a flush media region (slot name="media") above the
@@ -880,17 +1049,17 @@ declare class RelCard extends LitElement {
  * @csspart track - The flex row / column that translates to reveal the current slide.
  * @csspart ${direction}-button - The two arrow buttons, exposed as `prev-button` and `next-button` (`type="side-arrows"` overlays them on the viewport; `type="bottom-arrows"` inlines them in the dots row).
  * @csspart dots - The indicator row under the viewport (also hosts the arrows for `type="bottom-arrows"`).
- * @csspart dot - One indicator button per reachable position (per slide at `panels="1"`); the active one carries the `active` class and `aria-current="true"`.
+ * @csspart dot - One indicator button per reachable position (per slide at `panels="1"`); the active one carries the `active` class and `aria-current="true"`. Since 1.5.0 the button is a transparent target cell of at least 24 × 24px and the visible dot is its `::before` (style it with `::part(dot)::before`).
  * @csspart dot-group - The row of dots inside `dots` (for `type="bottom-arrows"` it is the middle child, between the two arrows).
  * @cssprop --rel-carousel-height - Viewport height in `orientation="vertical"` (default 320px); the horizontal viewport takes the height of its tallest slide.
  * @cssprop --rel-carousel-nav-size - Width / height of the arrow buttons (default 32px, matching Figma; applies to both side and bottom arrows).
- * @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-dot-size - Diameter of an inactive dot (default 8px); its target cell is at least 24px.
+ * @cssprop --rel-carousel-dot-size-active - Width of the active (brand-coloured, pill-shaped) dot (default 16px); its target cell is at least 24px.
  * @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-display - `display` given to each slide in `orientation="vertical"` only, 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 {
+declare class RelCarousel extends RelElement {
     /** Index of the current slide (0-based). Set it to jump; it is clamped to the slide count and reflected as an attribute. */
     value: number;
     /** Wrap from the last slide to the first (and back) with a seamless clone transition instead of stopping at the ends. */
@@ -899,7 +1068,7 @@ declare class RelCarousel extends LitElement {
     autoplay: boolean;
     /** Autoplay delay between slides, in milliseconds (default 5000). */
     interval: number;
-    /** Pause autoplay while the pointer is over the carousel or while dragging (default true; switch off via the property, e.g. `el.pauseOnHover = false`). */
+    /** Pause autoplay while the pointer is over the carousel or while dragging (default true; switch off with `pause-on-hover="false"` or `el.pauseOnHover = false`). */
     pauseOnHover: boolean;
     /** Legacy toggle for the overlaid previous / next arrows; ignored whenever `type` is set. */
     showButtons: boolean;
@@ -1006,7 +1175,7 @@ declare class RelCarousel extends LitElement {
  * @csspart icon - The image wrapper above the content, rendered only when `image-src` is set.
  * @csspart content - The padded area holding the title, subtitle and slotted body.
  */
-declare class RelCardMedia extends LitElement {
+declare class RelCardMedia extends RelElement {
     /** URL of the hero image shown full-width at the top of the card. Empty (the default) omits the image section entirely. */
     imageSrc: string;
     /** Alternative text for the hero image. Replace the generic default with a real description, or an empty string for purely decorative images. */
@@ -1029,16 +1198,17 @@ declare class RelCardMedia 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.
+ * @csspart unavailable - Day cells that cannot be picked (outside `min-date` / `max-date`, or blocked by `isDateDisabled`). They are `aria-disabled` and stay focusable, so `:disabled` does not match them; style them with `::part(unavailable)`
+ * @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 the other overlays (select, autocomplete, the three pickers) so the whole family can be moved from one place.
  */
-declare class RelDatePicker extends LitElement {
+declare class RelDatePicker extends RelElement {
     /** Selected date as an ISO `YYYY-MM-DD` string, or `null` when empty; setting it also moves the popover to that month. */
     value: string | null;
     /** Placeholder text shown while the field is empty (visual only; the accessible name comes from `label`, or "Select date" when unset). */
     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 40% opacity. */
+    /** Disables the field, the icons and the popover. The field looks exactly like a disabled `rel-textfield`: the whole field at 0.65 opacity, an elevated-2 box with the accent border, the label in `--rel-text-label` and the value and placeholder in `--rel-text-caption` (changed in 1.5.0: they were `--rel-text-disabled` under the 0.65, which left them barely readable). */
     disabled: boolean;
     /** Appends a `*` to the label and sets `aria-required`; no validation is performed. */
     required: boolean;
@@ -1073,8 +1243,8 @@ declare class RelDatePicker extends LitElement {
     /**
      * Figma ".Date Picker Calendar" Show Shortcuts: renders the Today / Tomorrow /
      * Yesterday chip row and its divider at the top of the popover. On by default —
-     * write `show-shortcuts="false"` to hide both (a plain boolean attribute could
-     * not express a default of `true`). The typed `T` / `T±N` shortcuts and the
+     * write `show-shortcuts="false"` to hide both (a plain boolean attribute could not
+     * express a default of `true`). The typed `T` / `T±N` shortcuts and the
      * in-panel `T` key keep working either way.
      */
     showShortcuts: boolean;
@@ -1090,7 +1260,7 @@ declare class RelDatePicker extends LitElement {
     size: "small" | "medium" | "large";
     /** Visual style of the field; `outlined` is the only variant today. */
     variant: "outlined";
-    /** Stretches the host to fill its parent's width (attribute `fullwidth`); off by default so the field keeps its intrinsic inline width. */
+    /** Stretches the host to fill its parent's width (attribute `full-width`); off by default so the field keeps its intrinsic inline width. */
     fullWidth: boolean;
     /** Custom predicate that disables individual days (return `true` to disable); applied on top of `minDate`/`maxDate` and also rejects typed input. Property only — assign it from JavaScript. */
     isDateDisabled?: (date: Date) => boolean;
@@ -1126,13 +1296,14 @@ declare class RelDatePicker extends LitElement {
     disconnectedCallback(): void;
     private handleClickOutside;
     private handleEscapeKey;
+    protected willUpdate(changedProperties: Map<string, any>): void;
     updated(changedProperties: Map<string, any>): void;
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
-    private onPageScroll;
+    private scrollWatch;
     private updatePopoverPosition;
-    /** Focus the roving day cell (selected day, else today, else first). */
+    /** Focus the roving day cell (the Tab stop — see getRovingIndex). */
     private focusPanelSelection;
     private parseISODate;
     private formatISODate;
@@ -1160,6 +1331,12 @@ declare class RelDatePicker extends LitElement {
     private closeCalendarPopover;
     private previousMonth;
     private nextMonth;
+    /**
+     * A click is an interaction with that day even when the day cannot be
+     * picked, so it takes the Tab stop first. Set explicitly rather than left to
+     * handleDayGridFocusin because Safari does not focus a button on click.
+     */
+    private handleDayClick;
     private selectDay;
     /** Commit a date: set value, reset typed text/error, fire rel-change. */
     private commitDate;
@@ -1184,7 +1361,29 @@ declare class RelDatePicker extends LitElement {
     private handleInputBlur;
     /** T inside the panel (grid/header focus) applies Today directly. */
     private handlePanelKeydown;
+    /**
+     * Day-grid keys. Movement is by DATE (the key map is shared with
+     * rel-range-picker via period-page's dayGridTarget), never by grid index:
+     * an index addresses a different date once the view flips month.
+     */
     private handleDayKeydown;
+    /**
+     * Move the rove AND focus to `date`, flipping the view when the date has left
+     * the visible month. Same shape as rel-range-picker.moveGridFocusTo, and the
+     * order matters: `focusedDate` is set from the date BEFORE focus moves,
+     * because lit reuses the day buttons across the month re-render, so the
+     * focused element may not change and no focus event would fire to record it.
+     */
+    private moveGridFocusTo;
+    /**
+     * Focus arriving any other way — a click, Tab / Shift+Tab, or a programmatic
+     * focus() — moves the Tab stop to that day too, so Tab out of the grid and
+     * back returns to the day last interacted with. This catches every case in
+     * which the focused ELEMENT changes; the one case where it does not (a month
+     * flip that reuses the focused button) is covered by moveGridFocusTo setting
+     * the date first.
+     */
+    private handleDayGridFocusin;
     /**
      * The chevrons step by whatever the visible body is made of, so they stay
      * useful in every view: a month, a year, or a whole 12-year page.
@@ -1211,31 +1410,32 @@ declare class RelDatePicker extends LitElement {
      */
     private handlePeriodGridFocusin;
     /**
-     * Index of the single grid cell carrying tabindex="0". The old expression
+     * Index of the single grid cell carrying tabindex="0": the day last
+     * interacted with (`focusedDate`), else the selection, else today, else the
+     * first enabled day of the month. The old expression
      * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
-     * stops once the user arrowed around without a selection.
+     * stops once the user arrowed around without a selection; the trailing
+     * fallback keeps it at exactly one by construction.
      *
-     * 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.
+     * `focusedDate` is written from three places, and all three are needed
+     * (fixed 2026-10-03; the same model as rel-range-picker.getRovingIso):
+     * - moveGridFocusTo, from the DATE, before focus moves. Arrow keys navigate
+     *   by date, not by grid index, so Sun 27 Sep + ArrowDown is Sun 4 Oct (the
+     *   old index+7 landed on Sun 1 Nov once the view flipped). It cannot be left
+     *   to a focus event: lit reuses the same buttons across the month
+     *   re-render, so the focused element may not change and NO focus event
+     *   fires for the move.
+     * - handleDayClick, so a clicked day holds the Tab stop even where a click
+     *   does not focus the button (Safari).
+     * - handleDayGridFocusin, for focus arriving by Tab or any other route.
      *
-     * 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.
+     * `focusedDate` counts wherever it sits in the 42-cell grid, out-of-month
+     * cells included. Every date appears in the grid at most once, so this
+     * cannot create a second Tab stop. It only matters after a chevron or a
+     * month/year pick moves the view: the day last interacted with stays the
+     * Tab stop while it is still on screen as a leading/trailing cell. Unavailable
+     * days are aria-disabled, not native disabled, so a Tab stop on one is still
+     * reachable (same as rel-range-picker).
      */
     private getRovingIndex;
     /** Days view: weekday header + the six week rows. */
@@ -1265,9 +1465,10 @@ type RangePickerSizeInput = RangePickerSize | RangePickerSizeAlias;
  * @csspart option - Each quick-select preset button
  * @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.
+ * @csspart unavailable - Day cells that cannot be picked (outside `min-date` / `max-date`). They are `aria-disabled` and stay focusable, so `:disabled` does not match them; style them with `::part(unavailable)`
+ * @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 the other overlays (select, autocomplete, the three pickers) so the whole family can be moved from one place.
  */
-declare class RelRangePicker extends LitElement {
+declare class RelRangePicker extends RelElement {
     /** Committed range start as an ISO `YYYY-MM-DD` string; empty string when no range is set. */
     from: string;
     /** Committed range end as an ISO `YYYY-MM-DD` string; empty string when no range is set. Always ≥ `from`. */
@@ -1280,7 +1481,7 @@ declare class RelRangePicker extends LitElement {
     minDate: string;
     /** Latest selectable date (ISO `YYYY-MM-DD`); later days are disabled and typed ranges ending after it are rejected. */
     maxDate: string;
-    /** Disables the trigger, the icons and the panel controls; the host dims to 60% opacity. */
+    /** Disables the trigger, the icons and the panel controls. The field looks like a disabled `rel-textfield`: the whole field at 0.65 opacity, an elevated-2 box with the accent border, and the value and placeholder in `--rel-text-caption` (changed in 1.5.0: it was the enabled look at 60% opacity). */
     disabled: boolean;
     /** Whether the panel is open. Setting it directly shows/hides the panel but does not seed the draft from `from`/`to` or fire `rel-open-change` — user interaction does both. */
     open: boolean;
@@ -1304,7 +1505,7 @@ declare class RelRangePicker extends LitElement {
     triggerVariant: "default" | "icon";
     /** Shows a clear (×) icon while a range is set; clearing fires `rel-change` with empty `from`/`to`. Only with the default trigger. */
     clearable: boolean;
-    /** Stretches the host to fill its parent's width (attribute `fullwidth`),
+    /** Stretches the host to fill its parent's width (attribute `full-width`),
      *  mirroring rel-time-picker / rel-date-picker. Off by default so the
      *  existing intrinsic-width (`inline-block`) rendering is unchanged. */
     fullWidth: boolean;
@@ -1312,6 +1513,10 @@ declare class RelRangePicker extends LitElement {
     size: RangePickerSizeInput;
     private draftFrom;
     private draftTo;
+    /** Uncommitted text in the panel's From / To inputs; null → the input shows the draft date. */
+    private panelText;
+    /** Parse / availability error per panel input (cleared on the next edit). */
+    private panelError;
     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. */
@@ -1324,6 +1529,8 @@ declare class RelRangePicker extends LitElement {
     private viewYear;
     private viewMonth;
     private isSelectingRange;
+    /** A mouse click picked the start: the To box is marked as next (sandbox design, Range-A). Keyboard focus never moves for it. */
+    private toMarkedNext;
     private hoverDate;
     /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
     private focusedDate;
@@ -1341,7 +1548,7 @@ declare class RelRangePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
-    private onPageScroll;
+    private scrollWatch;
     private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
@@ -1388,6 +1595,8 @@ declare class RelRangePicker extends LitElement {
     private isSameDay;
     private isDateDisabled;
     private getQuickSelects;
+    /** The preset shown as selected: the one clicked, or else the first whose range equals the draft (sandbox design: picking the days of "Next Week" checks it). */
+    private activePresetLabel;
     private selectQuickSelect;
     private goPrev;
     private goNext;
@@ -1438,30 +1647,67 @@ declare class RelRangePicker extends LitElement {
     private formatDayLabel;
     private getWeekdayLabels;
     private getCalendarDays;
+    /**
+     * Picking an out-of-month day does NOT move the view, unlike rel-calendar
+     * and rel-date-picker (a decision for this component, 2026-10-01). A range
+     * is picked in two clicks, so jumping to the start day's month would send
+     * the user paging back for the end day, and the grid would shift under the
+     * pointer between the clicks. The leading and trailing cells already show
+     * the band and the hover preview across the month boundary, so the range
+     * stays readable without the jump.
+     *
+     * The clicked day takes the Tab stop first, even when it is disabled or out
+     * of the month (see getRovingIso for why that cannot make a second stop).
+     */
     private handleDayClick;
+    private recordDayPick;
+    /** The panel's From / To boxes: real text inputs over the draft. Typing
+     *  commits on Enter or blur through the same parser as the trigger
+     *  (parseDateInput: MM/DD/YYYY, month names, t / t±N), never to from/to —
+     *  Apply still commits the range and Cancel / Escape still discard it. */
+    private renderPanelInput;
+    private handlePanelInput;
+    private handlePanelKeydown;
+    private clearPanelEntry;
+    /** Parse one side into the draft. Empty clears that side; unparseable or
+     *  unavailable text stays in the box with an error. A From after the To (or
+     *  a To before the From) swaps the two, as typed ranges and grid picks do. */
+    private commitPanelInput;
     private handleDayHover;
     /**
-     * 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.
+     * The cell that carries tabindex="0". Prefers the day last interacted with,
+     * 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.
+     * `focusedDate` is written from three places, and all three are needed
+     * (the same model as rel-date-picker.getRovingIndex; fixed for both
+     * 2026-10-03):
+     * - moveGridFocusTo sets it from the DATE before moving focus. That ordering
+     *   is what makes the arrow keys correct across a month boundary (Sep 27 →
+     *   Oct 4 → Oct 11). Do not "simplify" this to a focus listener alone: lit
+     *   reuses the same cell elements across the month re-render, so the focused
+     *   element may not change and no focus event fires.
+     * - handleDayClick, so the clicked day holds the Tab stop.
+     * - handleDayGridFocusin, for focus arriving by Tab or any other route.
      *
-     * 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.
+     * Out-of-month cells: picking one deliberately does NOT move the view (see
+     * handleDayClick), so the clicked leading/trailing cell itself must be able
+     * to hold the Tab stop, or Shift+Tab, Tab after the click would land on a
+     * different day. `focusedDate` therefore counts wherever it sits in the
+     * 42-cell grid. Every date appears in the grid at most once, so this cannot
+     * create a second Tab stop. The fallbacks (draft start, today) stay
+     * in-month, as before. Disabled cells are focusable (aria-disabled), so a
+     * Tab stop on one is still reachable.
      */
     private getRovingIso;
     private handleGridKeydown;
+    /**
+     * Focus arriving by Tab, a click or any other route moves the Tab stop to
+     * that day, so Tab out of the grid and back returns to it. Only catches moves
+     * where the focused ELEMENT changes; a month flip that reuses the focused cell
+     * is covered by moveGridFocusTo setting the date first.
+     */
+    private handleDayGridFocusin;
     private moveGridFocusTo;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1486,14 +1732,15 @@ type ContainerBackground = "light" | "white" | "none";
  * @csspart base - The padded surface `<div>` (same element as `container`)
  * @csspart container - Alias of `base`, kept for existing `::part(container)` selectors
  */
-declare class RelContainer extends LitElement {
+declare class RelContainer extends RelElement {
     /** 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;
     /**
-     * Surface fill: default (page surface) | elevated (raised surface) |
-     * transparent. Takes precedence over the deprecated `background` prop.
+     * Surface fill: `"default"` (the default: page surface) | `"elevated"`
+     * (raised surface) | `"transparent"`. Takes precedence over the deprecated
+     * `background` prop.
      */
     surface?: ContainerSurface;
     /** @deprecated Deprecated since 1.4.7 — use `surface` (white→default, light→elevated, none→transparent). */
@@ -1511,7 +1758,7 @@ declare class RelContainer extends LitElement {
  * @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 {
+declare class RelDivider extends RelElement {
     /** 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. */
     orientation: "horizontal" | "vertical";
     static styles: lit.CSSResult;
@@ -1525,7 +1772,7 @@ declare class RelDivider extends LitElement {
  * row with an 8px gap. Can also be used standalone for a matching actions row.
  * @slot - Footer actions (typically `<rel-button>`s)
  */
-declare class RelDrawerFooter extends LitElement {
+declare class RelDrawerFooter extends RelElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1542,7 +1789,7 @@ type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
  * from the bottom, left or right over a scrim, with an optional drag handle
  * (bottom only), a title/description header, a scrollable body and a footer.
  * @slot - Body content of the drawer
- * @slot footer - Actions row; rendered inside a `<rel-drawer-footer>` (right-aligned, 8px gap)
+ * @slot footer - Actions row; rendered inside a `<rel-drawer-footer>` (right-aligned, 8px gap). The footer only renders when this slot has content; its top divider shows only while the body scrolls
  * @csspart overlay - The full-viewport scrim behind the panel
  * @csspart panel - The sliding panel (role="dialog")
  * @csspart handle - The drag-to-close grab bar (bottom drawers only)
@@ -1556,7 +1803,7 @@ type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
  * @cssprop --rel-drawer-transition-timing - Slide/scrim animation easing; default `cubic-bezier(0.32, 0.72, 0, 1)`
  * @cssprop --rel-drawer-scrim-opacity - Opacity of the scrim while open; default `1`
  */
-declare class RelDrawer extends LitElement {
+declare class RelDrawer extends RelElement {
     /** Whether the drawer is shown. Toggle it to open/close; every change fires `rel-open-change`. */
     open: boolean;
     /** Edge the panel slides in from. `bottom` is centred horizontally and supports the drag handle; `left`/`right` are full-height side panels. */
@@ -1593,25 +1840,36 @@ declare class RelDrawer extends LitElement {
     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;
+    firstUpdated(): 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.
+     * scrolls, so it is measured and reflected onto the host as `body-scrolls`.
+     *
+     * What is observed matters. `.content` is a flex: 1 box in a fixed-height
+     * panel, so its own size does not change when its content grows, and its
+     * only shadow child is the slot, which has no box. So the observer also
+     * watches every element assigned to the default slot (re-collected on
+     * slotchange): content added later, a child growing in place, an image
+     * loading, all resize one of those. Window resizes reach `.content` itself.
      */
     private bodyScrollObserver?;
-    private watchBodyScroll;
+    private bodyMeasureQueued;
+    private measureBodyScroll;
+    private queueBodyMeasure;
+    private observeBody;
     private handleOpen;
     private handleClose;
     private lockScroll;
     private unlockScroll;
+    /** Drops a drag in progress when the drawer closes or leaves the DOM, so the
+     *  document pointer listeners do not outlive it. */
+    private endDrag;
     private handleKeydown;
     private handleOverlayClick;
     private handleCloseButtonClick;
@@ -1635,15 +1893,41 @@ declare global {
  * names; the full words are accepted as aliases (Trello 4).
  */
 type KbdSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+/** Which keyboard convention named keys follow: `auto` detects it, `mac` / `other` force it. */
+type KbdPlatform = "auto" | "mac" | "other";
+/** A named key as drawn on one platform: the cap text and the name a screen reader speaks. */
+interface KeyFace {
+    label: string;
+    name: string;
+}
+/**
+ * Platform detection for `platform="auto"`: User-Agent Client Hints first, then
+ * `navigator.platform` (iPadOS reports "MacIntel" there). No `navigator`
+ * (SSR, workers without it) means "other".
+ */
+declare function detectKbdPlatform(): "mac" | "other";
+/**
+ * Resolves a key name to its cap text and spoken name. Names are matched
+ * case-insensitively; anything that is not a named key (`K`, `F5`, `⌘`) comes
+ * back exactly as typed.
+ */
+declare function resolveKbdKey(key: string, platform?: KbdPlatform): KeyFace;
 /**
  * Single key cap (Figma "Kbd", 6316:284) for showing a keyboard key or shortcut
- * inline with text; the key label is the slotted content.
- * @slot - The key label (e.g. `Ctrl`, `K`, `⌘`)
+ * inline with text; the key label is the slotted content, or a named key set
+ * with `key-name`.
+ * @slot - The key label (e.g. `Ctrl`, `K`, `⌘`), rendered exactly as written. Not rendered while `key-name` is set.
  */
-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. */
+declare class RelKbd extends RelElement {
+    /**
+     * New in 1.5.0. A named key, drawn in the platform's convention instead of the slotted text: `mod` (⌘ on Mac, Ctrl elsewhere), `cmd` / `command` / `meta`, `ctrl` / `control`, `alt` / `option` / `opt`, `shift`, `enter` / `return`, `esc` / `escape`, `tab`, `backspace`, `delete`, `space`, `up` / `down` / `left` / `right`, `pageup` / `pagedown`, `home` / `end`, `capslock` (case-insensitive). Mac shows symbols (⌘ ⌃ ⌥ ⇧ ↩ ⎋ ⇥ ⌫ ⌦ ⇞ ⇟ ↖ ↘ ⇪); elsewhere the short words (Ctrl, Alt, Esc, PgUp…); arrows are ↑ ↓ ← → on both and Space is the word on both. The symbol is hidden from assistive technology and the key's full name (Command, Option…) is read instead. Any other value is shown as typed. While set, slotted content is not rendered.
+     */
+    keyName?: string;
+    /** New in 1.5.0. Keyboard convention for `key-name`: `auto` detects Mac / iPhone / iPad from the browser (no `navigator`, as in SSR, counts as `other`), `mac` and `other` force one. Has no effect on slotted text. */
+    platform: KbdPlatform;
+    /** Key-cap scale (Figma Size): `small` 20px tall / label-sm, `medium` 24px / label-md, `large` 28px / label-lg; 4px radius at every size. A single-symbol key (⌘ ⌥ ⇧ ⌃, `mod` when it shows ⌘, arrows…) is a square cap, 20 × 20 / 24 × 24 / 28 × 28px, with the symbol centred (new in 1.5.0). `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 carry a 0.5px stroke and the hard 2px bottom edge Figma draws on the key cap. */
+    /** Fill / text contrast: `default` = elevated-1 background with label text; `muted` = elevated-2 background with caption-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.
@@ -1651,10 +1935,14 @@ declare class RelKbd extends LitElement {
      * 16); `pill` is kept working as an alias but logs a one-time notice.
      */
     pill: boolean;
-    /** Pressed look: border-strong stroke, 1px downward nudge and (muted variant) a darker fill. */
+    /** Pressed look: border-strong stroke and a 1px downward nudge; the fill stays the variant's. */
     inset: boolean;
     protected willUpdate(changed: PropertyValues<this>): void;
-    static styles: lit.CSSResult;
+    static styles: lit.CSSResult[];
+    /** The visible label: the named key's cap text, or the slotted text. */
+    private visibleLabel;
+    private syncSymbol;
+    protected updated(changed: PropertyValues<this>): void;
     render(): lit_html.TemplateResult<1>;
 }
 /**
@@ -1662,23 +1950,25 @@ declare class RelKbd extends LitElement {
  * entry in `items` with "+" separators between them. Slotted <rel-kbd>
  * children may be used instead of the items array.
  *
- * <rel-kbd-group .items=${["Ctrl", "Shift", "P"]} size="medium"></rel-kbd-group>
+ * <rel-kbd-group .items=${["mod", "Shift", "P"]} size="medium"></rel-kbd-group>
  * @slot - Extra content rendered after the generated keys (e.g. hand-written `<rel-kbd>` children)
  * @csspart item - Each generated `<rel-kbd>` key cap
  * @csspart label - The `+` separator between generated keys
  */
-declare class RelKbdGroup extends LitElement {
-    /** Key labels to render, one `<rel-kbd>` each, joined by `+` separators. Set as a property or as a JSON array attribute (`items='["Ctrl","K"]'`). */
+declare class RelKbdGroup extends RelElement {
+    /** Keys to render, one `<rel-kbd>` each, joined by `+` separators (read as "plus"). Set as a property or as a JSON array attribute (`items='["mod","K"]'`). Since 1.5.0 each entry is a `key-name`: named keys (`mod`, `ctrl`, `shift`, `enter`, arrows…, case-insensitive) follow the platform convention, so `"Ctrl"` shows ⌃ on a Mac; use `"mod"` for the primary modifier (⌘ on Mac, Ctrl elsewhere). Anything else is shown as typed. */
     items: string[];
+    /** New in 1.5.0. Passed through to every generated <rel-kbd>: `auto` (default) detects Mac from the browser, `mac` / `other` force a convention for named keys. */
+    platform: KbdPlatform;
     /** Passed through to every generated <rel-kbd>: `small` / `medium` / `large` (legacy `sm` / `md` / `lg` still accepted). */
     size: KbdSize;
     /** Passed through to every generated <rel-kbd>: `default` or `muted`. */
     variant: "default" | "muted";
-    static styles: lit.CSSResult;
+    static styles: lit.CSSResult[];
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelLayout extends LitElement {
+declare class RelLayout extends RelElement {
     gap: string;
     columns: number;
     responsive: boolean;
@@ -1716,7 +2006,7 @@ interface Step {
  * @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 {
+declare class RelStepper extends RelElement {
     /** 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[];
     /**
@@ -1739,21 +2029,15 @@ declare class RelStepper extends LitElement {
     /**
      * 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.
+     * `icon` (always the check mark). Not the same axis as `connector="dot"`, which
+     * dashes the line between steps.
      */
     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.
+     * Figma ".Line Types" axis — how the line BETWEEN steps is drawn: `solid` (an
+     * unbroken 1px rule) or `dot` (a 1px rule dashed 2px on, 2px off). Applies to
+     * both orientations. Not the same axis as `type="dot"`, which is the indicator
+     * disc; the two are independent and can be combined.
      */
     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. */
@@ -1791,10 +2075,15 @@ type RadioAlignment = "leading" | "trailing";
 /**
  * Single-select radio group (Figma "Radio"): renders one native radio input per
  * entry in `options`, with optional supporting text, icon or avatar prefix.
+ * Form-associated, so an outer `<label>` (wrapping it, or `for=`) names the
+ * group; clicking that label focuses the selected (else first enabled) option
+ * without selecting anything. It still sets no form value and is not submitted.
  * @csspart base - The `role="radiogroup"` container that lays out the options
  * @csspart label - The visible label text of each option
  */
-declare class RelRadio extends LitElement {
+declare class RelRadio extends RelElement {
+    /** Form-associated only so an outer `<label>` has a control (see utils/outer-label.ts). No form value is set. */
+    static formAssociated: boolean;
     /** The options to render, in order. Each entry is a `RadioOption` (`value`, `label`,
      *  optional `supportingText`, `disabled`, `icon` or `avatar`). Set as a property
      *  (`.options=`) or as a JSON attribute. */
@@ -1818,8 +2107,7 @@ declare class RelRadio extends LitElement {
      *  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. */
+     *  that the ramp was 16/20/24; 1.4.9 reverts that. */
     size: RadioSizeInput;
     /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
      *  supporting text on its own line under the row, indented past the control;
@@ -1835,7 +2123,8 @@ declare class RelRadio extends LitElement {
      *  Set it to preselect an option; it is updated on every user selection. */
     selectedValue: string | null;
     /** Disables every option (Figma State=Disabled: the whole group at 40% opacity).
-     *  Individual options can also be disabled via `RadioOption.disabled`. */
+     *  Individual options can also be disabled via `RadioOption.disabled`. An ancestor
+     *  `<fieldset disabled>` disables the group the same way, without changing this property. */
     disabled: boolean;
     /** Error state (Figma State=Error): rings, dots and supporting text turn danger.
      *  Applies to every option while nothing is selected, and only to the selected
@@ -1844,7 +2133,7 @@ declare class RelRadio extends LitElement {
     /** Message rendered under the group (live region) while `error` is set; hidden
      *  when `error` is false or the text is empty. */
     errorMessage: string;
-    /** Accessible name for the radiogroup (it renders no visible group label). */
+    /** Accessible name for the radiogroup (it renders no visible group label). Unset, an outer `<label>` (wrapping the group, or `for=`) names it instead. */
     fieldAriaLabel?: string;
     /** Value reported to the Angular forms bridge (`registerOnChange` callback) on each
      *  change and compared by `writeValue`. Not used for rendering; read `selectedValue`
@@ -1855,6 +2144,15 @@ declare class RelRadio extends LitElement {
     checked: boolean;
     private _onChange;
     private _onTouched;
+    private readonly internals;
+    /** An outer label labels the GROUP, not an option, so its click picks
+     *  nothing: it moves focus where Tab would land (the selected option, else
+     *  the first enabled one) and the arrow keys choose from there. */
+    private readonly outerLabel;
+    /** Own `disabled`, or an ancestor `<fieldset disabled>`. */
+    private get isDisabled();
+    /** @internal Form-associated lifecycle: an ancestor `<fieldset disabled>` disables the control too (utils/outer-label.ts, 3). */
+    formDisabledCallback(): void;
     static styles: lit.CSSResult;
     protected willUpdate(changed: PropertyValues<this>): void;
     /** Whether the author wrote `density` themselves, as opposed to inheriting
@@ -1890,6 +2188,8 @@ type MenuWidth = "fixed" | "fit";
 type MenuSize = "large" | "medium" | "small";
 interface MenuItem {
     label: string;
+    /** New in 1.5.0. `rel-icon` name drawn before the label on `list` and `arrow` rows, at 20 / 18 / 16px for the large / medium / small sizes. Checkbox and select-option rows ignore it. */
+    icon?: string;
     active?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -1901,7 +2201,7 @@ interface MenuItem {
  * currently read slotted children — menus are built from the `items` property.
  * Registered so markup can carry item metadata for future declarative support.
  */
-declare class RelMenuItem extends LitElement {
+declare class RelMenuItem extends RelElement {
     /** Display text of the item. */
     label: string;
     /** Value that identifies the item (not used by `rel-menu` today). */
@@ -1921,11 +2221,11 @@ declare class RelMenuItem extends LitElement {
  * @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 {
+declare class RelMenu extends RelElement {
     /**
      * 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.
+     * rows with a leading radio (`role="menuitemradio"`).
      * `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.
@@ -1955,20 +2255,38 @@ declare class RelMenu extends LitElement {
      */
     size: MenuSize;
     /** The rows to render, in order. Each entry is a `MenuItem` (`label`, optional
-     *  `active`, `checked`, `disabled`, `submenu`, `open`). The array is copied on
-     *  assignment, so mutate and reassign it to update the menu. */
+     *  `active`, `checked`, `disabled`, `submenu`, `open`, and, new in 1.5.0, `icon`).
+     *  The array is copied on assignment, so mutate and reassign it to update
+     *  the menu. */
     items: MenuItem[];
     private focusedIndex;
     /** Index inside the open submenu that virtual focus sits on; -1 = main list. */
     private subFocusedIndex;
+    /** A key has moved the virtual focus since the last pointer press or
+     *  movement in the list (or since it lost focus): draws the row ring even
+     *  when the list itself is not :focus-visible. */
+    private keyboardNav;
     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      /* 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  ";
+    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    /* No ring on the container (designer, October 2026): while the list has\n       keyboard focus, only the current row carries the ring (below). */\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 \u2014 but ONLY while the\n       list has keyboard focus. Virtual focus (data-focused) always sits on\n       some row (row 0 at rest, the last clicked row after a click), so an\n       ungated ring read as a permanent border on the selected item. */\n    /* [data-keyboard]: a key moved the virtual focus. A list that took focus\n       without a ring (a mouse press, or rel-popover opening on a pointer\n       press with focusVisible: false) does not become :focus-visible on a\n       later key press in Chromium, so the arrows would move an invisible\n       focus. The flag clears on pointer movement or press and on blur, so\n       mouse-only use still never shows the ring. */\n    .rel-menu:focus-visible .rel-menu-item[data-focused],\n    .rel-menu[data-keyboard]:focus .rel-menu-item[data-focused],\n    :host(:focus-visible) .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    /* Leading item icon (MenuItem.icon): fixed size, never shrinks. */\n    .menu-icon {\n      flex: none;\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      margin: 0;\n      border: 0;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      z-index: 20;\n    }\n\n    /* Top layer (Popover API): the flyout escapes every ancestor's overflow\n       clip \u2014 the menu's own scroller in width=\"fixed\", cards, rel-modal,\n       scrolling sidebars \u2014 and is placed in viewport coordinates by\n       positionSubmenu(). It stays a DOM descendant of its row, so moving the\n       pointer into it never fires the row's mouseleave. Without the Popover\n       API the absolute left:100% placement above still applies. */\n    .rel-submenu:popover-open {\n      position: fixed;\n      inset: auto;\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;
     updated(changedProperties: Map<string, unknown>): void;
+    /** The open flyout and its row while one is showing. */
+    private openSubmenu;
+    /** Outside scroll / resize: follow the row while it is visible, close once
+     *  it scrolls out of view (same rule as the select / picker panels). */
+    private submenuScroll;
+    private onSubmenuResize;
+    /** Show / hide each flyout in the top layer to match the rendered state. */
+    private syncSubmenus;
+    private stopTrackingSubmenu;
+    /** Beside the row, flush (no gap, so hover never crosses a dead zone):
+     *  to the right when it fits, else flipped to the left; shifted up when it
+     *  would run past the bottom; kept 8px inside the viewport. */
+    private positionSubmenu;
     /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
     private lockedIndex;
     private handleDocumentClick;
@@ -1980,8 +2298,19 @@ declare class RelMenu extends LitElement {
      *  virtual focus onto its first entry. */
     private openSubmenuAt;
     private closeSubmenus;
+    /** Keys that move the virtual focus (rel-menu has no type-ahead). */
+    private static readonly NAV_KEYS;
     private onKeydown;
     private renderMenuItem;
+    /**
+     * New in 1.5.0. Moves the virtual focus (the row `aria-activedescendant`
+     * names) to `index`, clamped to the rows; a negative index counts from the
+     * end, so `-1` is the last row. It moves neither DOM focus nor the ring: the
+     * row ring still follows the list's own keyboard focus. A menu button uses it
+     * to open on the first row (Enter, Space, ArrowDown) or the last (ArrowUp).
+     */
+    focusItem(index: number): void;
+    private clearKeyboardNav;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -1992,7 +2321,7 @@ type MenubarType = "fixed" | "fit";
  * @cssprop --rel-menubar-width - Width of the bar when `type="fixed"`; default 100%
  * @cssprop --rel-menubar-panel-width - Width of the dropdown and submenu panels; default 300px
  */
-declare class RelMenubar extends LitElement {
+declare class RelMenubar extends RelElement {
     /**
      * Opt-in: actually bind the keys declared via `data-shortcut` on items (e.g. `data-shortcut="Ctrl+Z"`) instead of only displaying them; a "Mod" token means Cmd on Apple platforms and Ctrl elsewhere, and keystrokes that originate in inputs, textareas or contenteditable regions are ignored.
      */
@@ -2013,7 +2342,7 @@ declare class RelMenubar extends LitElement {
     /** Stable id prefix for aria-activedescendant targets (light DOM, so ids
      *  must be unique per menubar instance on the page). */
     private menubarId;
-    static readonly _css = "\n    /* This component renders into LIGHT DOM (createRenderRoot returns this), so\n       :host / <slot> don't work here \u2014 the raw <rel-menubar-menu> definitions\n       are data holders that must be hidden with a plain selector. Relying on the\n       global rel-menubar-menu.css is not enough: it can't cross a consumer's\n       shadow boundary AND it's a no-op in the tsup-built package (css:\"copy\"). */\n    rel-menubar {\n      color: var(--rel-text-default);\n      display: block;\n      /* Figma Menu Bar / .Menu Bar Item (8699:4, 8698:13) label = body/lg.\n         Declared on the host, not on .menubar-container, so the position:fixed\n         panels \u2014 siblings of the container, not descendants \u2014 inherit it too. */\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-menubar-menu {\n      display: none;\n    }\n\n    /* Figma Menu Bar (8699:4): bg/fill/neutral/default on border-radius/sm,\n       clipping its children, gap spacing/none \u2014 no border and no shadow. */\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-bg-neutral);\n      border-radius: var(--rel-border-radius-sm);\n      overflow: hidden;\n      padding: 0;\n      gap: 0;\n      min-height: 40px;\n      width: fit-content;\n    }\n\n    /* Type=Fit hugs its triggers (the default); Type=Fixed spans its container.\n       Light-DOM component: :host never matches, so these key off the reflected\n       attribute on the <rel-menubar> element itself. */\n    rel-menubar[type=\"fixed\"] .menubar-container {\n      width: var(--rel-menubar-width, 100%);\n    }\n\n    rel-menubar[type=\"fit\"] .menubar-container {\n      width: fit-content;\n    }\n\n    /* Figma .Menu Bar Item (8698:13): spacing/xs vertical + spacing/md\n       horizontal padding around a body/lg label = a 40px trigger. */\n    .menubar-trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: stretch;\n      padding: var(--rel-spacing-xs) var(--rel-spacing-md);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font: inherit;\n      color: var(--rel-text-default);\n      white-space: nowrap;\n      transition: background 0.15s ease;\n      user-select: none;\n      outline: none;\n    }\n\n    /* State=Hover / State=Pressed / State=Active / State=Disabled. Active (the\n       trigger whose menu is open) is the hover overlay plus a medium label \u2014\n       hence the .open class rather than .active, which would collide with the\n       :active pressed pseudo at equal specificity. */\n    .menubar-trigger:hover:not(.disabled) {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .menubar-trigger:active:not(.disabled) {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .menubar-trigger.open:not(.disabled) {\n      background: var(--rel-action-overlay-hover);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .menubar-trigger.disabled {\n      color: var(--rel-text-disabled);\n      background: transparent;\n      cursor: not-allowed;\n    }\n\n    /* Inset ring: the container clips (overflow:hidden), so a positive\n       outline-offset would be cut off on the first and last trigger. */\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Figma pairs the Menu Bar with the Menu component (6326:2932) for the\n       panel each trigger opens: 300px, bg/fill/neutral/default, border\n       radius/sm, shadow/md, clipped \u2014 no border. */\n    .menubar-panel,\n    .submenu-panel {\n      position: fixed;\n      width: var(--rel-menubar-panel-width, 300px);\n      box-sizing: border-box;\n      background: var(--rel-bg-neutral);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      padding: 0;\n      overflow: hidden;\n      display: none;\n      outline: none;\n    }\n\n    .menubar-panel {\n      z-index: 1000;\n    }\n\n    .submenu-panel {\n      z-index: 1001;\n    }\n\n    .menubar-panel.open,\n    .submenu-panel.open {\n      display: block;\n    }\n\n    /* Rows follow Figma .Menu Item Large (6326:616): spacing/sm padding all\n       round on a body/lg label = 48px, with a border/neutral/subtle rule\n       between rows. The rule is an INSET shadow, not a border: Figma strokes\n       are drawn inside the 48px frame, so a real border-bottom would push\n       every row to 49px. */\n    .menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-md);\n      padding: var(--rel-spacing-sm);\n      min-height: 48px;\n      box-sizing: border-box;\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-text-default);\n      line-height: var(--rel-body-lg-regular-line-height);\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .menu-item:active {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .menu-item[data-disabled=\"true\"] {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .menu-separator {\n      height: var(--rel-stroke-sm);\n      background: var(--rel-border-default);\n      margin: 0;\n      padding: 0;\n    }\n\n    /* An explicit data-separator replaces the preceding row's subtle rule\n       instead of stacking a second line on top of it. */\n    .menu-item:has(+ .menu-separator),\n    .menubar-panel > rel-checkbox:has(+ .menu-separator),\n    .menubar-panel > rel-radio:has(+ .menu-separator) {\n      box-shadow: none;\n    }\n\n    rel-icon {\n      display: inline-flex;\n      pointer-events: none;\n    }\n\n    .menu-submenu-trigger {\n      position: relative;\n    }\n\n    /* Figma draws the 20px chevron at full contrast \u2014 no dimming. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      pointer-events: none;\n    }\n\n    .menu-shortcut {\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-3xs);\n      color: var(--rel-text-caption);\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    /* Checkbox / radio rows are real rel-checkbox / rel-radio elements rendered\n       straight into the panel, so they carry the .Menu Item row box themselves. */\n    .menubar-panel > rel-checkbox,\n    .menubar-panel > rel-radio {\n      display: block;\n      width: 100%;\n      min-height: 48px;\n      padding: var(--rel-spacing-sm);\n      box-sizing: border-box;\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n    }\n\n    .menubar-panel > rel-checkbox {\n      cursor: pointer;\n      transition: background 0.15s ease;\n    }\n\n    .menubar-panel > rel-checkbox:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n  ";
+    static readonly _css = "\n    /* This component renders into LIGHT DOM (createRenderRoot returns this), so\n       :host / <slot> don't work here \u2014 the raw <rel-menubar-menu> definitions\n       are data holders that must be hidden with a plain selector. Relying on the\n       global rel-menubar-menu.css is not enough: it can't cross a consumer's\n       shadow boundary AND it's a no-op in the tsup-built package (css:\"copy\"). */\n    rel-menubar {\n      color: var(--rel-text-default);\n      display: block;\n      /* Figma Menu Bar / .Menu Bar Item (8699:4, 8698:13) label = body/lg.\n         Declared on the host, not on .menubar-container, so the position:fixed\n         panels \u2014 siblings of the container, not descendants \u2014 inherit it too. */\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-menubar-menu {\n      display: none;\n    }\n\n    /* Figma Menu Bar (8699:4): bg/fill/neutral/default on border-radius/sm,\n       clipping its children, gap spacing/none \u2014 no border and no shadow. */\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-bg-neutral);\n      border-radius: var(--rel-border-radius-sm);\n      overflow: hidden;\n      padding: 0;\n      gap: 0;\n      min-height: 40px;\n      width: fit-content;\n    }\n\n    /* Type=Fit hugs its triggers (the default); Type=Fixed spans its container.\n       Light-DOM component: :host never matches, so these key off the reflected\n       attribute on the <rel-menubar> element itself. */\n    rel-menubar[type=\"fixed\"] .menubar-container {\n      width: var(--rel-menubar-width, 100%);\n    }\n\n    rel-menubar[type=\"fit\"] .menubar-container {\n      width: fit-content;\n    }\n\n    /* Figma .Menu Bar Item (8698:13): spacing/xs vertical + spacing/md\n       horizontal padding around a body/lg label = a 40px trigger. */\n    .menubar-trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: stretch;\n      padding: var(--rel-spacing-xs) var(--rel-spacing-md);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font: inherit;\n      color: var(--rel-text-default);\n      white-space: nowrap;\n      transition: background 0.15s ease;\n      user-select: none;\n      outline: none;\n    }\n\n    /* State=Hover / State=Pressed / State=Active / State=Disabled. Active (the\n       trigger whose menu is open) is the hover overlay plus a medium label \u2014\n       hence the .open class rather than .active, which would collide with the\n       :active pressed pseudo at equal specificity. */\n    .menubar-trigger:hover:not(.disabled) {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .menubar-trigger:active:not(.disabled) {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .menubar-trigger.open:not(.disabled) {\n      background: var(--rel-action-overlay-hover);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .menubar-trigger.disabled {\n      color: var(--rel-text-disabled);\n      background: transparent;\n      cursor: not-allowed;\n    }\n\n    /* Inset ring: the container clips (overflow:hidden), so a positive\n       outline-offset would be cut off on the first and last trigger. */\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Figma pairs the Menu Bar with the Menu component (6326:2932) for the\n       panel each trigger opens: 300px, bg/fill/neutral/default, border\n       radius/sm, shadow/md, clipped \u2014 no border. */\n    .menubar-panel,\n    .submenu-panel {\n      position: fixed;\n      width: var(--rel-menubar-panel-width, 300px);\n      box-sizing: border-box;\n      background: var(--rel-bg-neutral);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      padding: 0;\n      overflow: hidden;\n      display: none;\n      outline: none;\n    }\n\n    .menubar-panel {\n      z-index: 1000;\n    }\n\n    .submenu-panel {\n      z-index: 1001;\n    }\n\n    .menubar-panel.open,\n    .submenu-panel.open {\n      display: block;\n    }\n\n    /* Rows follow Figma .Menu Item Large (6326:616): spacing/sm padding all\n       round on a body/lg label = 48px, with a border/neutral/subtle rule\n       between rows. The rule is an INSET shadow, not a border: Figma strokes\n       are drawn inside the 48px frame, so a real border-bottom would push\n       every row to 49px. */\n    .menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-md);\n      padding: var(--rel-spacing-sm);\n      min-height: 48px;\n      box-sizing: border-box;\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-text-default);\n      line-height: var(--rel-body-lg-regular-line-height);\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .menu-item:active {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .menu-item[data-disabled=\"true\"] {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    /* border-subtle, like rel-menu's Figma-bound row strokes (Menu Bar binds\n       no separator colour of its own). */\n    .menu-separator {\n      height: var(--rel-stroke-sm);\n      background: var(--rel-border-subtle);\n      margin: 0;\n      padding: 0;\n    }\n\n    /* An explicit data-separator replaces the preceding row's subtle rule\n       instead of stacking a second line on top of it. */\n    .menu-item:has(+ .menu-separator),\n    .menubar-panel > rel-checkbox:has(+ .menu-separator),\n    .menubar-panel > rel-radio:has(+ .menu-separator) {\n      box-shadow: none;\n    }\n\n    rel-icon {\n      display: inline-flex;\n      pointer-events: none;\n    }\n\n    .menu-submenu-trigger {\n      position: relative;\n    }\n\n    /* Figma draws the 20px chevron at full contrast \u2014 no dimming. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      pointer-events: none;\n    }\n\n    .menu-shortcut {\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-3xs);\n      color: var(--rel-text-caption);\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    /* Checkbox / radio rows are real rel-checkbox / rel-radio elements rendered\n       straight into the panel, so they carry the .Menu Item row box themselves. */\n    .menubar-panel > rel-checkbox,\n    .menubar-panel > rel-radio {\n      display: block;\n      width: 100%;\n      min-height: 48px;\n      padding: var(--rel-spacing-sm);\n      box-sizing: border-box;\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n    }\n\n    .menubar-panel > rel-checkbox {\n      cursor: pointer;\n      transition: background 0.15s ease;\n    }\n\n    .menubar-panel > rel-checkbox:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -2052,7 +2381,7 @@ declare class RelMenubar extends LitElement {
 /**
  * Declarative menu definition for `<rel-menubar>`: a hidden (`display: none`) light-DOM holder whose children (`data-item`, `data-separator`, `data-submenu`, `data-checkbox`, `data-radio-group`) the parent menubar reads and renders into a dropdown panel.
  */
-declare class RelMenubarMenu extends LitElement {
+declare class RelMenubarMenu extends RelElement {
     /** Text of the trigger button the parent menubar renders for this menu. */
     label: string;
     /**
@@ -2085,7 +2414,7 @@ type OtpSize = "small" | "medium" | "large" | "sm" | "md" | "lg";
  * @csspart separator - The dash rendered between cell groups
  * @csspart hidden-input - The hidden form input rendered when `name` is set
  */
-declare class RelOtp extends LitElement {
+declare class RelOtp extends RelElement {
     /** The concatenated code (all cells joined). Set it to fill the cells programmatically; it never exceeds `length` characters. */
     value: string;
     /** Total number of cells (characters in the code). */
@@ -2125,7 +2454,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. Even when on, separators appear only if `length` divides evenly by `group-size`; see `groupSize`. */
+    /** Renders the dash separator between groups. Presence or `""` means true; `show-separator="false"` (or the property set to `false`) hides them. 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;
@@ -2166,418 +2495,85 @@ declare global {
     }
 }
 
+type SelectState = "default" | "error" | "disabled";
+type SelectSize = "small" | "medium" | "large";
+type SelectBorder = "rounded" | "sharp";
+/** Alias of the shared field type — kept so existing imports keep resolving. */
+type SelectLabelStyle = FieldLabelStyle;
+interface SelectOptionObject {
+    value: string;
+    label?: string;
+    supportingText?: string;
+    /** rel-icon name rendered as a prefix (leading icon) on the menu item. */
+    icon?: string;
+}
+type SelectOption = string | SelectOptionObject;
 /**
- * Page navigation (Figma "Pagination"): prev/next ghost buttons with numbered pages, a compact "Page X of Y" readout, or a "1–10 of 50" item-range readout. Use it under tables and lists that load one page of results at a time; it never fetches data itself — listen for `rel-change`.
- * @csspart base - The `role="navigation"` root of the extended layout (page buttons plus the optional "Viewing page" label).
- * @csspart label - The `role="navigation"` root row of the count-text layout (item-range text plus prev/next nav).
+ * `<rel-select>` — combobox-style dropdown (Figma "Dropdown"): single- or multi-select
+ * with an optional in-panel search field and width-adaptive selection chips.
+ * @csspart label - The visible label above the trigger (default label style)
+ * @csspart trigger - The button that opens the panel; styled like a text field
+ * @csspart value - The value area: the selected label or placeholder inside the trigger. In multi-select with chips (since 1.5.0) it is the chip overlay, a sibling laid over the trigger's value area rather than a child of it
+ * @csspart helper - The supporting / error text below the trigger
+ * @csspart panel - The dropdown panel (a `role="group"` holding the search, Select-all and the options listbox; same node as `list`)
+ * @csspart list - Alias of `panel`
+ * @csspart input - The search input inside the panel
+ * @csspart option - A single-select option row
+ * @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
+ * @cssprop --rel-select-border-error - Trigger border colour when `state="error"`
+ * @cssprop --rel-select-radius - Trigger corner radius when `border="rounded"`
+ * @cssprop --rel-select-icon-color - Colour of the trigger icons, the search icon and option prefix icons
+ * @cssprop --rel-select-label-color - Colour of the static label and of the floated label
+ * @cssprop --rel-select-value-color - Colour of the selected value, the search text, option labels and the check mark
+ * @cssprop --rel-select-placeholder-color - Placeholder colour (trigger, resting floating label, search field, empty-list message)
+ * @cssprop --rel-select-placeholder-disabled-color - Placeholder colour when disabled
+ * @cssprop --rel-select-supporting-color - Supporting text colour (non-error)
+ * @cssprop --rel-select-menu-border - Panel border colour. The panel is borderless by design and only draws this on dark surfaces, where its shadow alone can't separate it from the page.
+ * @cssprop --rel-select-menu-radius - Panel corner radius
+ * @cssprop --rel-select-menu-shadow - Panel box-shadow
+ * @cssprop --rel-select-panel-min-width - Smallest width of the dropdown panel. The panel is as wide as the trigger; set this when the trigger is narrower than its options need (a scrollbar included), and the panel grows past the trigger's right edge instead of squeezing them. Unset by default, so the panel matches the trigger. New in 1.5.0.
+ * @cssprop --rel-select-search-border - Border colour of the search field inside the panel
+ * @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 the other overlays (select, autocomplete, the three pickers) so the whole family can be moved from one place.
  */
-declare class RelPagination extends LitElement {
-    /** Figma "Type": `extended` = prev/next + numbered page buttons (auto-collapses to compact under 480px container width), `compact` = prev/next + "Page X of Y", `count-text` = "start–end of total" item range + prev/next around the current page number. */
-    type: "extended" | "compact" | "count-text";
-    /** Controlled current page (1-based). When set, the element only emits `rel-change` and waits for the parent to update `page`; leave unset for uncontrolled behaviour. */
-    page?: number;
-    /** Starting page for uncontrolled use (ignored when `page` is set). Attribute `defaultPage`, also read once as `default-page` on connect. */
-    defaultPage: number;
-    /** Total number of pages. `0` (the default) lets `totalItems` / `perPage` compute the page count instead. Attribute `totalPages`, also read once as `total-pages` on connect. */
-    totalPages: number;
-    /** Total item count; with `perPage` it computes the page count when `totalPages` is `0` and is the "of N" figure in the count-text readout. Attribute `totalItems`, also read once as `total-items` on connect. */
-    totalItems: number;
-    /** 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). */
+declare class RelSelect extends RelElement {
+    /** Visible label. Rendered above the trigger (`labelStyle="default"`) or floating inside it; omitted under `labelStyle="none"`. */
+    label: string;
     /**
-     * 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.
+     * Label presentation: `default` static label above the trigger; `floating` label
+     * rests in the value area and floats onto the border when focused, open or filled;
+     * `none` renders no label (supply `fieldAriaLabel` / `fieldAriaLabelledby`).
      */
-    showLabel: boolean;
-    /** 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;
-    /** Accessible name of the `role="navigation"` landmark (attribute `ariaLabel`). Set it when a page contains more than one pagination control. */
-    ariaLabel: string;
-    private currentPage;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    private get activePage();
-    private get computedTotalPages();
-    private generatePageNumbers;
-    /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
-        Exact below 10,000; floored to k up to 1M; then M with one decimal. */
-    private formatPageLabel;
-    private handlePageChange;
-    private renderChevronLeft;
-    private renderChevronRight;
-    private renderNavBtn;
-    private renderExtended;
-    private renderCompact;
-    private renderCountText;
-    render(): lit_html.TemplateResult<1>;
-}
-
-type SideType = "top" | "right" | "bottom" | "left";
-type AlignType = "start" | "center" | "end";
-/**
- * Click-to-open floating panel anchored to a trigger (Figma "Popover"): the first child is the trigger, the `content` slot is the panel, which is promoted to the browser top layer and positioned in viewport coordinates.
- * @slot - The trigger: the first slotted element toggles the panel on pointer down / Enter / Space and receives `aria-haspopup`, `aria-expanded` and `aria-controls` (a bare `<div>` / `<span>` also gets `tabindex="0"` and `role="button"`).
- * @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 - **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. */
-    open?: boolean;
-    /** Initial state in uncontrolled mode (attribute `defaultopen`); ignored when `open` is set. */
-    defaultOpen: boolean;
-    /** Blocks trigger interaction and dims the host to 60% opacity; does not close an already-open panel. */
-    disabled: boolean;
-    /** Which side of the trigger the panel opens on: `top`, `right`, `bottom` (default) or `left`. The panel is clamped 8px inside the viewport but never flips to another side. */
-    side: SideType;
-    /** Alignment along the cross axis: `start` (left / top edge of the trigger), `center` (default) or `end` (right / bottom edge). */
-    align: AlignType;
-    /** Gap between trigger and panel in pixels (attribute `sideoffset`, default 8). With `arrow` the effective gap is at least 13px. */
-    sideOffset: number;
-    /** Extra shift along the alignment axis in pixels (attribute `alignoffset`, default 0); positive moves right / down. */
-    alignOffset: number;
-    /** Keep Tab / Shift+Tab cycling inside the panel while open (attribute `trapfocus`); use for forms. */
-    trapFocus: boolean;
-    /** Close on Escape (attribute `closeonescape`, default true; switch off via the property, e.g. `el.closeOnEscape = false`). */
-    closeOnEscape: boolean;
-    /** Close on a pointer-down outside the trigger and panel (attribute `closeonoutsideclick`, default true; switch off via the property). Also lets another popover's opening dismiss this one. */
-    closeOnOutsideClick: boolean;
+    labelStyle: SelectLabelStyle;
     /**
-     * Opt-in pointer (audit 23a): a 14×11 triangle on the panel edge that faces
-     * the trigger — the Figma Popover "Chevron" — following `side` and tracking
-     * the trigger's centre along the cross axis (clamped inside the panel).
-     * It is drawn with the panel's tokens (`--rel-popover-arrow-bg` /
-     * `--rel-popover-arrow-border`, defaulting to rel-popover-content's
-     * background and border). With the arrow on, the panel keeps at least the
-     * arrow's height plus 2px away from the trigger so the tip never overlaps
-     * it; larger `sideOffset` values still apply. Default off — existing
-     * popovers render exactly as before.
+     * Accessible name for the trigger. Required when `labelStyle="none"`, since no
+     * `<label>` renders and a placeholder is not a valid naming mechanism.
      */
-    arrow: boolean;
-    /** Figma Popover (6338:563) chevron: 14 wide × 11 tall. */
-    private static readonly ARROW_WIDTH;
-    private static readonly ARROW_HEIGHT;
-    private internalOpen;
-    private contentStyle;
-    private contentWrapper;
-    private triggerEl;
-    private returnFocusEl;
-    private uniqueId;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
-    updated(changed: Map<string, unknown>): void;
-    private isControlled;
-    private get activeOpen();
-    private setOpen;
-    private onHostPointerDown;
-    private onHostKeyDown;
-    private onOpen;
-    private onClose;
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     /**
-     * Light-dismiss every other open popover that isn't an ancestor of this
-     * one (nested popovers keep their parent open). This is what the outside-
-     * pointerdown listener would do for a click on our trigger — except the
-     * trigger handler stops that pointerdown in the capture phase, and a
-     * keyboard (Enter/Space) or programmatic open never produces one at all.
-     * Honors each popover's own `closeOnOutsideClick` setting.
-     */
-    private closeOtherPopovers;
-    private showNativePopover;
-    private hideNativePopover;
-    private addGlobalListeners;
-    private removeGlobalListeners;
-    private onOutsidePointerDown;
-    private onKeyDown;
-    private focusFirst;
-    private restoreFocus;
-    private trapFocusLoop;
-    private getFocusable;
-    private updatePosition;
-    private onTriggerSlotChange;
-    private applyTriggerAria;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-popover": RelPopover;
-    }
-}
-
-/** 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).
- * @csspart content - The padded `role="dialog"` box that carries the surface, border, shadow and size padding.
- */
-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: 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>;
-}
-
-type ProgressMode = "linear-determinate" | "linear-indeterminate" | "circular-determinate" | "circular-indeterminate";
-/**
- * Progress indicator (Figma "Progress"): a linear bar or a circular ring, each either value-driven (determinate) or looping (indeterminate).
- * @csspart track - The linear track `<div>` that carries `role="progressbar"` (linear modes only)
- * @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 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;
-    /** Accessible name of the progressbar (not rendered visually); defaults to "Progress" for determinate and "Loading" for indeterminate modes. */
-    label: string;
-    private radius;
-    private circumference;
-    static styles: lit.CSSResult;
-    private get safeValue();
-    private get accessibleName();
-    private renderLinearDeterminate;
-    private renderLinearIndeterminate;
-    private renderCircularDeterminate;
-    private renderCircularIndeterminate;
-    render(): lit_html.TemplateResult<1>;
-}
-
-/**
- * Flex container that lays out direct-child `<rel-resizable-panel>`s along one axis and lets the user drag or keyboard-nudge the `<rel-resizable-handle>` between two neighbours to trade percentage width/height between them.
- * @slot - The panels and handles, as direct children in display order (panel, handle, panel, …)
- * @fires rel-resize - Fired continuously while a handle is dragged. Detail: `{ direction, sizes: number[] }` with one percentage per panel.
- * @fires rel-resize-end - Fired once when a drag ends (pointerup) and after every keyboard resize step. Detail: `{ direction, sizes: number[] }` with one percentage per panel.
- */
-declare class RelResizableGroup extends LitElement {
-    /** Layout axis: `horizontal` places panels side by side and resizes widths, `vertical` stacks them and resizes heights; also pushed to every child handle's `orientation`. */
-    direction: "horizontal" | "vertical";
-    private panels;
-    private handles;
-    private isDragging;
-    private activeHandleIndex;
-    private startPointerPos;
-    private startSizes;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
-    private initializeLayout;
-    private calculateInitialSizes;
-    private onPointerDown;
-    private startDrag;
-    private onPointerMove;
-    private onPointerUp;
-    private applyDragResize;
-    private onKeyDown;
-    private applyKeyboardResize;
-    private applySizes;
-    private dispatchResizeEvent;
-    private addGlobalListeners;
-    private removeGlobalListeners;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-resizable-group": RelResizableGroup;
-    }
-}
-
-/**
- * One resizable region inside a `<rel-resizable-group>`: a padded, scrollable (`overflow: auto`) flex column whose size along the group axis is a percentage managed by the group.
- * @slot - The panel's content; slotted `h1`–`h4` get the headings-md role
- */
-declare class RelResizablePanel extends LitElement {
-    /** Initial size as a percentage of the group; panels without one share whatever is left of 100%, then all sizes are normalised to sum to 100. Attribute is `defaultsize`. */
-    defaultSize?: number;
-    /** Smallest size (percentage) the panel can be resized to. Attribute is `minsize`. */
-    minSize: number;
-    /** Largest size (percentage) the panel can be resized to. Attribute is `maxsize`. */
-    maxSize: number;
-    /** Current size as a percentage of the group (also written to the host's `flex-basis`); read-only — the parent group updates it on every resize. */
-    currentSize: number;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-resizable-panel": RelResizablePanel;
-    }
-}
-
-/**
- * Focusable `role="separator"` splitter placed between two `<rel-resizable-panel>`s inside a `<rel-resizable-group>`; the group owns the drag and keyboard logic, the handle only renders the grab bar and exposes the split via ARIA.
- */
-declare class RelResizableHandle extends LitElement {
-    /** Axis the handle separates: `horizontal` = 8px-wide vertical bar with `col-resize` cursor, `vertical` = 8px-tall bar with `row-resize`; set automatically from the parent group's `direction` on first render and mirrored to `aria-orientation`. */
-    orientation: "horizontal" | "vertical";
-    /** @internal Index of this handle in the parent group; assigned by the group on first render. */
-    handleIndex: number;
-    /** Current split of the two neighbouring panels as a percentage 0–100 (share held by the leading panel); read-only — the parent group updates it and mirrors it to `aria-valuenow`. */
-    splitValue: number;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    private updateAriaOrientation;
-    /** @internal Called by the parent group after every resize to store `splitValue` and write `aria-valuenow` / `aria-valuemin` / `aria-valuemax`. */
-    updateAriaValue(value: number): void;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-resizable-handle": RelResizableHandle;
-    }
-}
-
-type SegmentSize = "small" | "medium" | "large";
-type SegmentAlign = "left" | "middle" | "right";
-interface SegmentOption {
-    label: string;
-    value: string;
-    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; 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;
-    /** Control height, matching the TextField ramp: `small` (32px — 28px segments, `action-md` 12px text, 16px icons), `medium` (default, 40px — 36px segments, `action-lg` 14px text, 18px icons) or `large` (48px — 44px segments, `action-xl` 16px text, 20px icons). */
-    size: SegmentSize;
-    /** `justify-content` of the group's inline-flex container: `left` (default), `middle` or `right`. Only visible when the host is made wider than its content. */
-    align: SegmentAlign;
-    /** Accessible name for the radiogroup (it renders no visible group label). */
-    fieldAriaLabel?: string;
-    static styles: lit.CSSResult;
-    private setActive;
-    /** APG radio-group navigation: arrows move focus AND select, the group is
-     *  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>;
-}
-
-type SelectState = "default" | "error" | "disabled";
-type SelectSize = "small" | "medium" | "large";
-type SelectBorder = "rounded" | "sharp";
-/** Alias of the shared field type — kept so existing imports keep resolving. */
-type SelectLabelStyle = FieldLabelStyle;
-interface SelectOptionObject {
-    value: string;
-    label?: string;
-    supportingText?: string;
-    /** rel-icon name rendered as a prefix (leading icon) on the menu item. */
-    icon?: string;
-}
-type SelectOption = string | SelectOptionObject;
-/**
- * `<rel-select>` — combobox-style dropdown (Figma "Dropdown"): single- or multi-select
- * with an optional in-panel search field and width-adaptive selection chips.
- * @csspart label - The visible label above the trigger (default label style)
- * @csspart trigger - The button that opens the panel; styled like a text field
- * @csspart value - The value area inside the trigger (selected label, placeholder or chips)
- * @csspart helper - The supporting / error text below the trigger
- * @csspart panel - The dropdown listbox container (same node as `list`)
- * @csspart list - Alias of `panel`
- * @csspart input - The search input inside the panel
- * @csspart option - A single-select option row
- * @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
- * @cssprop --rel-select-border-error - Trigger border colour when `state="error"`
- * @cssprop --rel-select-radius - Trigger corner radius when `border="rounded"`
- * @cssprop --rel-select-icon-color - Colour of the trigger icons, the search icon and option prefix icons
- * @cssprop --rel-select-label-color - Colour of the static label and of the floated label
- * @cssprop --rel-select-value-color - Colour of the selected value, the search text, option labels and the check mark
- * @cssprop --rel-select-placeholder-color - Placeholder colour (trigger, resting floating label, search field, empty-list message)
- * @cssprop --rel-select-placeholder-disabled-color - Placeholder colour when disabled
- * @cssprop --rel-select-supporting-color - Supporting text colour (non-error)
- * @cssprop --rel-select-menu-border - Panel border colour. The panel is borderless by design and only draws this on dark surfaces, where its shadow alone can't separate it from the page.
- * @cssprop --rel-select-menu-radius - Panel corner radius
- * @cssprop --rel-select-menu-shadow - Panel box-shadow
- * @cssprop --rel-select-search-border - Border colour of the search field inside the panel
- * @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"`. */
-    label: string;
-    /**
-     * Label presentation: `default` static label above the trigger; `floating` label
-     * rests in the value area and floats onto the border when focused, open or filled;
-     * `none` renders no label (supply `fieldAriaLabel` / `fieldAriaLabelledby`).
-     */
-    labelStyle: SelectLabelStyle;
-    /**
-     * Accessible name for the trigger. Required when `labelStyle="none"`, since no
-     * `<label>` renders and a placeholder is not a valid naming mechanism.
-     */
-    fieldAriaLabel?: string;
-    /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
-    fieldAriaLabelledby?: string;
-    /**
-     * 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` 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 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` 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. */
@@ -2621,17 +2617,7 @@ declare class RelSelect extends LitElement {
      * one by one instead of wrapping to a second line.
      */
     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.
-     */
+    /** Hides the in-panel search field. The search row shows in single- and multi-select panels alike unless this is set; use it for short lists that don't need searching (Figma's "Single Option" dropdown has no search bar). */
     noSearch: boolean;
     private open;
     private highlightedIndex;
@@ -2697,7 +2683,12 @@ declare class RelSelect extends LitElement {
     private addGlobalListeners;
     private removeGlobalListeners;
     private onOutsidePointerDown;
-    private onPageScroll;
+    /** Outside scroll: reposition while the trigger is still visible, close
+     *  once it has scrolled out of view or under a sticky header; scrolls of
+     *  the list itself and of unrelated elements are ignored. See
+     *  utils/overlay-scroll.ts. The scroll close keeps focus on the trigger
+     *  without scrolling the page back to it. */
+    private scrollWatch;
     /**
      * BOTH events fire, deliberately — do not delete either.
      *
@@ -2722,6 +2713,13 @@ declare class RelSelect extends LitElement {
     private toggleMultiOption;
     private toggleSelectAll;
     private removeChip;
+    /**
+     * A chip's remove button fired `removed`. When that button had keyboard
+     * focus, the chip is about to disappear and focus would drop to <body>, so
+     * hand it to the next chip's remove button, else the previous one, else the
+     * trigger.
+     */
+    private onChipRemoved;
     private onTriggerClick;
     private onTriggerKeyDown;
     private onSearchInput;
@@ -2745,10 +2743,422 @@ declare class RelSelect extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "rel-select": RelSelect;
+        "rel-select": RelSelect;
+    }
+}
+
+/** The layouts of Figma's Pagination "Type" axis. "Extended with Rows" is `extended` plus `show-rows-per-page`. */
+type PaginationType = "extended" | "compact" | "count-text" | "page-select";
+/**
+ * Page navigation (Figma "Pagination"): prev/next ghost buttons with numbered pages, a compact "Page X of Y" readout, a "1–10 of 50" item-range readout, or a "Page [select] of Y" jump-to-page dropdown, optionally followed by a rows-per-page selector. Use it under tables and lists that load one page of results at a time; it never fetches data itself — listen for `rel-change` (and `rel-per-page-change`).
+ * @csspart base - The `role="navigation"` root of the extended layout (page buttons plus the optional "Viewing page" label).
+ * @csspart label - The `role="navigation"` root row of the count-text layout (item-range text plus prev/next nav).
+ * @csspart page-select - The `rel-select` of the `page-select` layout (the jump-to-page dropdown). New in 1.5.0.
+ * @csspart rows-per-page - The rows-per-page block (its text plus the `rel-select`), rendered with `show-rows-per-page`. New in 1.5.0.
+ */
+declare class RelPagination extends RelElement {
+    /** Figma "Type": `extended` = prev/next + numbered page buttons (auto-collapses to compact under 480px container width), `compact` = prev/next + "Page X of Y", `count-text` = "start–end of total" item range + prev/next around the current page number, `page-select` = prev/next around "Page [select] of Y", a dropdown that jumps to any page (new in 1.5.0). Every type except `page-select` has no jump-to-page control. */
+    type: PaginationType;
+    /** Controlled current page (1-based). When set, the element only emits `rel-change` and waits for the parent to update `page`; leave unset for uncontrolled behaviour. */
+    page?: number;
+    /** Starting page for uncontrolled use (ignored when `page` is set). */
+    defaultPage: number;
+    /** Total number of pages. `0` (the default) lets `totalItems` / `perPage` compute the page count instead. */
+    totalPages: number;
+    /** Total item count; with `perPage` it computes the page count when `totalPages` is `0` and is the "of N" figure in the count-text readout. */
+    totalItems: number;
+    /** Items per page, used to compute the page count from `totalItems` and the "start–end" range in the count-text readout. */
+    perPage: number;
+    /** Shows a "Viewing page X of Y" caption under the extended layout (ignored by the other types). Off by default. */
+    showLabel: boolean;
+    /** 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;
+    /** Accessible name of the `role="navigation"` landmark (attribute `ariaLabel`). Set it when a page contains more than one pagination control. */
+    ariaLabel: string;
+    /** New in 1.5.0. Adds a rows-per-page selector after the navigation, with any `type` (Figma "Extended with Rows" is `type="extended"` with this set). Choosing a value sets `perPage`, fires `rel-per-page-change` and returns to page 1. Off by default: no rows-per-page selector. */
+    showRowsPerPage: boolean;
+    /** New in 1.5.0. The values the rows-per-page selector offers (a number array, or a JSON array in the attribute). The current `perPage` is added to the list when it is not in it. */
+    rowsPerPageOptions: number[];
+    /** New in 1.5.0. Text before the rows-per-page selector, also its accessible name. */
+    rowsPerPageLabel: string;
+    private currentPage;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private get activePage();
+    private get computedTotalPages();
+    private generatePageNumbers;
+    /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+        Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+    private formatPageLabel;
+    private handlePageChange;
+    private renderChevronLeft;
+    private renderChevronRight;
+    private renderNavBtn;
+    private renderExtended;
+    private renderCompact;
+    private renderCountText;
+    /** Pages offered by the page-select dropdown: every page, or for very long
+        ranges a window around the current page plus the first and last. */
+    private pageOptions;
+    /** Both dropdowns' panels may be wider than their 72px trigger: the longest
+        value (`largest`), the row's 12px side padding, the 16px gap, the 18px
+        check and 20px kept for a classic scrollbar (the page list scrolls past
+        9 pages). */
+    private panelMinWidth;
+    private stopInner;
+    private onPageSelect;
+    private onRowsPerPage;
+    private renderPageSelect;
+    private renderRowsPerPage;
+    private renderLayout;
+    render(): lit_html.TemplateResult<1>;
+}
+
+type SideType = "top" | "right" | "bottom" | "left";
+type AlignType = "start" | "center" | "end";
+/**
+ * Click-to-open floating panel anchored to a trigger (Figma "Popover"): the first child is the trigger, the `content` slot is the panel, which is promoted to the browser top layer and positioned in viewport coordinates.
+ * @slot - The trigger: the first slotted element toggles the panel on pointer down / Enter / Space and receives `aria-haspopup` (from `has-popup`), `aria-expanded` and `aria-controls` (a bare `<div>` / `<span>` also gets `tabindex="0"` and `role="button"`).
+ * @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 - **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 RelElement {
+    /** 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. */
+    open?: boolean;
+    /** Initial state in uncontrolled mode (attribute `default-open`); ignored when `open` is set. */
+    defaultOpen: boolean;
+    /** Blocks trigger interaction and dims the host to 60% opacity; does not close an already-open panel. */
+    disabled: boolean;
+    /** Which side of the trigger the panel opens on: `top`, `right`, `bottom` (default) or `left`. The panel is clamped 8px inside the viewport but never flips to another side. */
+    side: SideType;
+    /** Alignment along the cross axis: `start` (left / top edge of the trigger), `center` (default) or `end` (right / bottom edge). */
+    align: AlignType;
+    /** Gap between trigger and panel in pixels (attribute `side-offset`, default 8). With `arrow` the effective gap is at least 13px. */
+    sideOffset: number;
+    /** Extra shift along the alignment axis in pixels (attribute `align-offset`, default 0); positive moves right / down. */
+    alignOffset: number;
+    /** Keep Tab / Shift+Tab cycling inside the panel while open (attribute `trap-focus`); use for forms. */
+    trapFocus: boolean;
+    /** Close on Escape (attribute `close-on-escape`, default true; switch off with `close-on-escape="false"` or `el.closeOnEscape = false`). */
+    closeOnEscape: boolean;
+    /** Close on a pointer-down outside the trigger and panel (attribute `close-on-outside-click`, default true; switch off with `close-on-outside-click="false"` or the property). Also lets another popover's opening dismiss this one. */
+    closeOnOutsideClick: boolean;
+    /**
+     * Opt-in pointer (audit 23a): a 14×11 triangle on the panel edge that faces
+     * the trigger — the Figma Popover "Chevron" — following `side` and tracking
+     * the trigger's centre along the cross axis (clamped inside the panel).
+     * It is drawn with the panel's tokens (`--rel-popover-arrow-bg` /
+     * `--rel-popover-arrow-border`, defaulting to rel-popover-content's
+     * background and border). With the arrow on, the panel keeps at least the
+     * arrow's height plus 2px away from the trigger so the tip never overlaps
+     * it; larger `sideOffset` values still apply. Default off — existing
+     * popovers render exactly as before.
+     */
+    arrow: boolean;
+    /** New in 1.5.0. Value written to the trigger's `aria-haspopup` (attribute `has-popup`): `dialog` (default) for a panel of content, or `menu`, `listbox`, `tree`, `grid` or `true` when the panel holds that widget. A panel holding a `rel-menu` takes `menu`. */
+    hasPopup: "dialog" | "menu" | "listbox" | "tree" | "grid" | "true";
+    /** Figma Popover (6338:563) chevron: 14 wide × 11 tall. */
+    private static readonly ARROW_WIDTH;
+    private static readonly ARROW_HEIGHT;
+    private internalOpen;
+    private contentStyle;
+    private contentWrapper;
+    private contentSlot?;
+    private triggerEl;
+    private wasOpen;
+    /** The last interaction with this popover (trigger, panel or an outside
+     *  dismiss) was a pointer press, not a key. Decides whether the focus moves
+     *  on open and close may draw a focus ring (see focusOptions). */
+    private pointerInteraction;
+    private uniqueId;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private isControlled;
+    private get activeOpen();
+    private setOpen;
+    private onHostPointerDown;
+    private onHostKeyDown;
+    private onOpen;
+    private onClose;
+    /**
+     * Light-dismiss every other open popover that isn't an ancestor of this
+     * one (nested popovers keep their parent open). This is what the outside-
+     * pointerdown listener would do for a click on our trigger — except the
+     * trigger handler stops that pointerdown in the capture phase, and a
+     * keyboard (Enter/Space) or programmatic open never produces one at all.
+     * Honors each popover's own `closeOnOutsideClick` setting.
+     */
+    private closeOtherPopovers;
+    private showNativePopover;
+    private hideNativePopover;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private onOutsidePointerDown;
+    private onKeyDown;
+    /** The panel content is SLOTTED light DOM, often nested inside other
+     *  components' shadow roots (a rel-button in rel-popover-content), so the
+     *  search walks the composed tree — a querySelectorAll on the wrapper never
+     *  saw it, and focus never entered the panel. With nothing focusable, the
+     *  panel itself takes focus so it is announced: a rel-popover-content
+     *  focuses its named role="dialog" box; any other element falls back to the
+     *  wrapper (tabindex="-1"). */
+    private focusFirst;
+    /** After a pointer press the trigger never takes focus (onHostPointerDown
+     *  prevents it), so Chromium counts our scripted focus as :focus-visible and
+     *  a mouse open drew a focus ring in the panel (and on the trigger after a
+     *  mouse close). `focusVisible: false` keeps those moves ring-free; a key
+     *  press inside the panel still shows the focused control's own ring (a
+     *  rel-menu row: its data-keyboard rule). Keyboard and scripted opens pass
+     *  nothing, so the browser decides as before. A browser that doesn't know
+     *  the `focusVisible` option ignores the unknown dictionary member and
+     *  behaves exactly as before this change. */
+    private focusOptions;
+    /** Focus returns to the trigger's own control (APG: back to the invoking
+     *  element) — a rel-button host is not focusable, its inner <button> is.
+     *  Only when focus is in the popover or was dropped to <body> (the panel
+     *  hiding blurs it): a close caused by focus moving elsewhere, or a
+     *  programmatic close, must not pull focus away from where the user is. */
+    private restoreFocus;
+    private triggerControl;
+    /** Whether the deep active element is inside the panel (the wrapper or the
+     *  slotted content) or anywhere in the popover (the trigger included),
+     *  walking the composed tree. */
+    private focusIn;
+    private trapFocusLoop;
+    private updatePosition;
+    private onTriggerSlotChange;
+    private applyTriggerAria;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-popover": RelPopover;
+    }
+}
+
+/** 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, no border, 8px radius, shadow/lg, 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).
+ * @csspart content - The padded `role="dialog"` box that carries the surface, shadow and size padding.
+ */
+declare class RelPopoverContent extends RelElement {
+    /** Accessible name applied to the inner `role="dialog"` box (attribute `aria-label`); describe what the panel is for. */
+    ariaLabel: string;
+    /** 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;
+    /** Focuses the `role="dialog"` box rather than the host (which is not
+     *  focusable). rel-popover lands focus here when the panel has nothing
+     *  focusable, so a screen reader announces the dialog by its `aria-label`. */
+    focus(options?: FocusOptions): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+type ProgressMode = "linear-determinate" | "linear-indeterminate" | "circular-determinate" | "circular-indeterminate";
+/**
+ * Progress indicator (Figma "Progress"): a linear bar or a circular ring, each either value-driven (determinate) or looping (indeterminate).
+ * @csspart track - The linear track `<div>` that carries `role="progressbar"` (linear modes only)
+ * @csspart indicator - The filled / sliding bar inside the linear track (linear modes only)
+ */
+declare class RelProgress extends RelElement {
+    /** 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;
+    /** Accessible name of the progressbar (not rendered visually); defaults to "Progress" for determinate and "Loading" for indeterminate modes. */
+    label: string;
+    private radius;
+    private circumference;
+    static styles: lit.CSSResult;
+    private get safeValue();
+    private get accessibleName();
+    private renderLinearDeterminate;
+    private renderLinearIndeterminate;
+    private renderCircularDeterminate;
+    private renderCircularIndeterminate;
+    render(): lit_html.TemplateResult<1>;
+}
+
+/**
+ * Flex container that lays out direct-child `<rel-resizable-panel>`s along one axis and lets the user drag or keyboard-nudge the `<rel-resizable-handle>` between two neighbours to trade percentage width/height between them.
+ * @slot - The panels and handles, as direct children in display order (panel, handle, panel, …)
+ * @fires rel-resize - Fired continuously while a handle is dragged. Detail: `{ direction, sizes: number[] }` with one percentage per panel.
+ * @fires rel-resize-end - Fired once when a drag ends (pointerup) and after every keyboard resize step. Detail: `{ direction, sizes: number[] }` with one percentage per panel.
+ */
+declare class RelResizableGroup extends RelElement {
+    /** Layout axis: `horizontal` places panels side by side and resizes widths, `vertical` stacks them and resizes heights; also pushed to every child handle's `orientation`. */
+    direction: "horizontal" | "vertical";
+    private panels;
+    private handles;
+    private isDragging;
+    private activeHandleIndex;
+    private startPointerPos;
+    private startSizes;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private initializeLayout;
+    private calculateInitialSizes;
+    private onPointerDown;
+    private startDrag;
+    private onPointerMove;
+    private onPointerUp;
+    private applyDragResize;
+    private onKeyDown;
+    private applyKeyboardResize;
+    private applySizes;
+    private dispatchResizeEvent;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-resizable-group": RelResizableGroup;
+    }
+}
+
+/**
+ * One resizable region inside a `<rel-resizable-group>`: a padded, scrollable (`overflow: auto`) flex column whose size along the group axis is a percentage managed by the group. While its content overflows, the panel becomes a keyboard-focusable named region so it can be scrolled without a mouse.
+ * @slot - The panel's content; slotted `h1`–`h4` get the headings-md role
+ */
+declare class RelResizablePanel extends RelElement {
+    /** Initial size as a percentage of the group; panels without one share whatever is left of 100%, then all sizes are normalised to sum to 100. */
+    defaultSize?: number;
+    /** Smallest size (percentage) the panel can be resized to. */
+    minSize: number;
+    /** Largest size (percentage) the panel can be resized to. */
+    maxSize: number;
+    /** New in 1.5.0. Accessible name the panel carries while its content overflows (it is then a focusable `role="region"`). Defaults to "Panel N", N being its position among the group's panels. Ignored when the page sets its own `aria-label` / `aria-labelledby`. */
+    panelLabel?: string;
+    /** Current size as a percentage of the group (also written to the host's `flex-basis`); read-only — the parent group updates it on every resize. */
+    currentSize: number;
+    /** True while the content overflows the panel in either axis; read-only, kept current by a ResizeObserver. */
+    get scrollable(): boolean;
+    private overflowing;
+    private resizeObserver?;
+    private mutationObserver?;
+    private observedChildren;
+    private frame;
+    /** The page set `tabindex` itself: never touch it, nor role / name. */
+    private pageOwnsTabindex;
+    /** The tabindex value this panel last wrote, or null when it wrote none. */
+    private writtenTabindex;
+    private ownsRole;
+    private ownsLabel;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onSlotChange;
+    private onFocusOut;
+    /** Measures one frame after the change: no layout in the observer callback, no ResizeObserver loop errors. */
+    private scheduleMeasure;
+    private defaultLabel;
+    private applyScrollable;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-resizable-panel": RelResizablePanel;
+    }
+}
+
+/**
+ * Focusable `role="separator"` splitter placed between two `<rel-resizable-panel>`s inside a `<rel-resizable-group>`; the group owns the drag and keyboard logic, the handle only renders the grab bar and exposes the split via ARIA.
+ */
+declare class RelResizableHandle extends RelElement {
+    /** Axis the handle separates: `horizontal` = 8px-wide vertical bar with `col-resize` cursor, `vertical` = 8px-tall bar with `row-resize`; set automatically from the parent group's `direction` on first render and mirrored to `aria-orientation`. */
+    orientation: "horizontal" | "vertical";
+    /** @internal Index of this handle in the parent group; assigned by the group on first render. */
+    handleIndex: number;
+    /** Current split of the two neighbouring panels as a percentage 0–100 (share held by the leading panel); read-only — the parent group updates it and mirrors it to `aria-valuenow`. */
+    splitValue: number;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private updateAriaOrientation;
+    /** @internal Called by the parent group after every resize to store `splitValue` and write `aria-valuenow` / `aria-valuemin` / `aria-valuemax`. */
+    updateAriaValue(value: number): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-resizable-handle": RelResizableHandle;
     }
 }
 
+type SegmentSize = "small" | "medium" | "large";
+type SegmentAlign = "left" | "middle" | "right";
+interface SegmentOption {
+    label: string;
+    value: string;
+    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 RelElement {
+    /** 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;
+    /** Disables the whole group (click and keyboard) without changing individual `options[].disabled` settings. Angular `control.disable()` uses it. New in 1.5.0. */
+    disabled: boolean;
+    /** Control height, matching the TextField ramp: `small` (32px — 28px segments, `action-md` 12px text, 16px icons), `medium` (default, 40px — 36px segments, `action-lg` 14px text, 18px icons) or `large` (48px — 44px segments, `action-xl` 16px text, 20px icons). */
+    size: SegmentSize;
+    /** `justify-content` of the group's inline-flex container: `left` (default), `middle` or `right`. Only visible when the host is made wider than its content. */
+    align: SegmentAlign;
+    /** Accessible name for the radiogroup (it renders no visible group label). */
+    fieldAriaLabel?: string;
+    static styles: lit.CSSResult;
+    private setActive;
+    /** APG radio-group navigation: arrows move focus AND select, the group is
+     *  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>;
+}
+
 type SkeletonShape = "line" | "circle" | "block";
 type SkeletonAnimation = "pulse" | "shimmer" | "none";
 /**
@@ -2758,7 +3168,7 @@ type SkeletonAnimation = "pulse" | "shimmer" | "none";
  * @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 {
+declare class RelSkeleton extends RelElement {
     /** 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, --rel-spacing-xs apart); ignored by the other shapes. */
@@ -2813,7 +3223,7 @@ type ModalVariant = "default" | "text";
  * @cssprop --rel-modal-transition-duration - Open/close animation duration; default `0.3s`
  * @cssprop --rel-modal-transition-timing - Open/close animation easing; default `cubic-bezier(0.32, 0.72, 0, 1)`
  */
-declare class RelModal extends LitElement {
+declare class RelModal extends RelElement {
     /** Whether the modal is shown. Toggle it to open/close; every change fires `rel-open-change`. */
     open: boolean;
     /** Where the panel is anchored: `bottom` (48px above the bottom edge, slides up), `top` (48px below the top edge, slides down) or `center` (fades and scales in). Below 480px with `breakpoint="responsive"` every side collapses to a full-width bottom sheet. */
@@ -2860,20 +3270,29 @@ declare class RelModal extends LitElement {
     private overlayElement;
     private panelElement;
     private previousFocus;
-    private originalBodyOverflow;
-    private originalBodyPaddingRight;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    firstUpdated(): 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.
+     * host as `body-scrolls`.
+     *
+     * What is observed matters. Once the panel reaches its max height (or is
+     * fullscreen, where it is always fixed) `.content` stops resizing as its
+     * content grows, and its only shadow child is the slot, which has no box.
+     * So the observer also watches every element assigned to the default slot
+     * (re-collected on slotchange): content added later, a child growing in
+     * place, an image loading, all resize one of those. Window resizes reach
+     * `.content` itself.
      */
     private bodyScrollObserver?;
-    private watchBodyScroll;
+    private bodyMeasureQueued;
+    private measureBodyScroll;
+    private queueBodyMeasure;
+    private observeBody;
     disconnectedCallback(): void;
     protected willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
@@ -2892,6 +3311,206 @@ declare global {
     }
 }
 
+/** One point of a stroke: `x` and `y` in CSS pixels of the pad (see `strokes`), `t` in epoch milliseconds, and the pointer's `pressure` (0–1; 0.5 for a pressed mouse). */
+type SignaturePoint = [x: number, y: number, t: number, pressure: number];
+/** One pen-down to pen-up stroke of a `rel-signature-pad`. */
+interface SignatureStroke {
+    points: SignaturePoint[];
+    /** The `PointerEvent.pointerType` that drew it. Only `"pen"` strokes vary their width with pressure. */
+    pointerType?: string;
+}
+/** How the signature is given: drawn with a pointer, or typed as a name. */
+type SignaturePadMode = "draw" | "type";
+/** Detail of the `rel-change` event of `rel-signature-pad`. */
+interface SignaturePadChangeDetail {
+    value: string;
+    strokes: SignatureStroke[];
+    signedAt: string;
+    mode: SignaturePadMode;
+}
+/**
+ * Signature capture field. The user signs with a mouse, pen or finger on a 160px pad that fills its container's width; the field has a label, helper text, error and disabled states like `rel-textfield`, and Undo and Clear buttons in its helper row. Undo removes the last stroke and also reverses Clear. `value` is the signature as a trimmed PNG data URL; `strokes` holds the vector record and `toSVG()` exports it. A "Type your name instead" link switches to type mode, where the user types their name and it renders as the signature in Poppins italic: the keyboard alternative to drawing (WCAG 2.2 SC 2.5.7).
+ *
+ * New in 1.5.0.
+ * @csspart label - The label above the pad.
+ * @csspart mode-toggle - The link-style `rel-button` beside the label that switches between drawing ("Type your name instead") and typing ("Draw instead"). Hidden while `readonly`.
+ * @csspart pad - The bordered drawing area. In draw mode it is a focusable `role="img"` named by the label and the signature's state; in type mode it holds the name input.
+ * @csspart canvas - The `<canvas>` the ink is drawn on.
+ * @csspart typed-input - The text input of type mode, drawn on the baseline in Poppins italic.
+ * @csspart placeholder - The "Sign here" text ("Type your full name" in type mode), shown while the pad is empty.
+ * @csspart baseline - The line near the bottom of the pad.
+ * @csspart helper - The helper, error or "Signed …" text below the pad.
+ * @csspart actions - The row that holds the Undo and Clear buttons.
+ * @csspart undo - The Undo `rel-button` (ghost, small).
+ * @csspart clear - The Clear `rel-button` (secondary, small).
+ * @cssprop --rel-signature-pad-height - Height of the pad, border included (default 160px).
+ * @fires rel-begin - The user put the pointer down to start a stroke. Detail: `{}`.
+ * @fires rel-end - The user finished a stroke. Detail: `{}`.
+ * @fires rel-change - The signature changed through the user: a finished stroke, Undo, Clear, a committed typed name (on blur or Enter) or a switch of mode. Detail: `{ value, strokes, signedAt, mode }`. Not fired for property changes or the `undo()` / `clear()` methods.
+ */
+declare class RelSignaturePad extends RelElement {
+    static styles: lit.CSSResult;
+    /** Visible label above the pad. A `required` asterisk is appended. */
+    label?: string;
+    /** Marks the signature as required: the label gets an asterisk. */
+    required: boolean;
+    /** Helper line below the pad. Defaults to "Use a mouse, pen or finger to sign"; once signed, the line shows "Signed {date and time}" instead. */
+    helperText?: string;
+    /** Text in the helper line while disabled (default "Signing is unavailable"). */
+    disabledText?: string;
+    /** Puts the field in the error state: danger border, and `error-message` replacing the helper text. */
+    error: boolean;
+    /** Text shown below the pad, with an alert icon, instead of the helper text while `error` is set. */
+    errorMessage?: string;
+    /** Disables the field: no drawing, Undo and Clear disabled, the pad leaves the Tab order, and the helper line shows `disabled-text`. */
+    disabled: boolean;
+    /** Shows the signature and its timestamp without letting it change: a subtle border, no Undo or Clear buttons, no drawing. */
+    readonly: boolean;
+    /** Text in the empty pad (default "Sign here"). It hides on the first ink; the baseline stays. */
+    placeholder: string;
+    /** Name of the field in a form. */
+    name?: string;
+    /** Accessible name of the pad when there is no visible `label`. */
+    fieldAriaLabel?: string;
+    /**
+     * The signature as a PNG data URL, trimmed to the ink at 2×, with black ink on a transparent background in every theme; `""` when empty. Set it to show a stored signature: it is drawn in the theme's ink colour and replaces the strokes, so Undo cannot take it apart stroke by stroke (Clear removes it, and Undo brings it back). Setting `""` empties the pad.
+     */
+    value: string;
+    /**
+     * The vector record of the signature, one entry per stroke: `{ points: [x, y, t, pressure][], pointerType? }`. Coordinates are CSS pixels of the pad when the first stroke was drawn (a narrower pad later shows the signature scaled down to fit, and the coordinates do not change); `t` is epoch milliseconds. Set it to redraw a stored signature that can be added to; that starts a new Undo history.
+     */
+    strokes: SignatureStroke[];
+    /** `draw` (default) captures the signature with a pointer; `type` takes a typed name and renders it in Poppins italic. The user switches with the link beside the label. Each mode keeps its own content; only the active mode makes the `value`. */
+    mode: SignaturePadMode;
+    /** The name typed in type mode. The `value` in type mode is this name rendered as a PNG, black, in Poppins italic. */
+    typedName: string;
+    private signedAtIso;
+    private typedAtIso;
+    private typedHistory;
+    private drawing;
+    private history;
+    private stored;
+    private padEl?;
+    private canvas?;
+    private typedInput?;
+    private readonly uid;
+    /** The strokes and value this component last set itself; anything else was assigned from outside. */
+    private ownStrokes;
+    private ownValue;
+    private ownTypedName;
+    /** Size of the pad when the current signature began: the space `strokes` coordinates live in. */
+    private ref?;
+    /** Current CSS size of the canvas and its backing-store size in device pixels. */
+    private size?;
+    private pixels?;
+    private current;
+    private activePointer;
+    private frame;
+    private resizeObserver?;
+    private themeObserver?;
+    private mediaQueries;
+    /** The stored signature recoloured to one ink colour, cached across frames. */
+    private tint?;
+    static formAssociated: boolean;
+    private readonly internals;
+    /** An outer `<label>` names the pad and focuses it; a `<fieldset disabled>` disables it. */
+    private readonly outerLabel;
+    /** `disabled`, or an ancestor `<fieldset disabled>`. */
+    private get isDisabled();
+    /** @internal Form-associated lifecycle: an ancestor `<fieldset disabled>` disables the pad too. */
+    formDisabledCallback(): void;
+    /** @internal Form-associated lifecycle: a form reset empties both modes and their Undo history, without `rel-change`. */
+    formResetCallback(): void;
+    /** @internal Form-associated lifecycle: the browser restores the signature (back / forward navigation, autofill) from the state `syncForm()` saved. */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    /** Form value, restore state and validity. A read-only pad, like a read-only input, is not validated. */
+    private syncForm;
+    /** When the signature was started, as an ISO 8601 string; `""` while empty. Set by the first stroke and cleared by Clear. Read-only. */
+    get signedAt(): string;
+    /** True when the active mode has no signature: no strokes and no stored signature in draw mode, a blank name in type mode. */
+    isEmpty(): boolean;
+    /** Removes the last stroke, or restores what Clear removed (in type mode, the cleared name). Does not fire `rel-change`. */
+    undo(): void;
+    /** Removes the whole signature of the active mode; Undo brings it back. Does not fire `rel-change`. */
+    clear(): void;
+    /**
+     * The signature as a data URL of the given type (default `"image/png"`), trimmed to the ink at 2× with black ink; `"image/svg+xml"` returns `toSVG()` as a data URL, and `"image/jpeg"` gets a white background. `""` when empty.
+     */
+    toDataURL(type?: string): string;
+    /** The signature as an SVG document string, in black and trimmed. Draw mode gives smoothed paths in the `strokes` coordinate space (a stored signature from `value` is embedded as an image); type mode gives the name as `<text>` in Poppins italic. `""` when empty. */
+    toSVG(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    private get typing();
+    /** No strokes and no stored signature (draw mode's content, whatever the active mode). */
+    private get drawEmpty();
+    private get canUndo();
+    private snapshot;
+    private restore;
+    private setStrokes;
+    private setTypedName;
+    /** Recomputes `value` from the active mode. */
+    private commit;
+    /** Strokes assigned from outside: a new signature with a fresh history. */
+    private adoptStrokes;
+    /** A value assigned from outside: show it as a stored signature, or empty the pad for `""`. */
+    private adoptValue;
+    /** A typed name assigned from outside: a fresh type-mode history, and no typed-at time. */
+    private adoptTypedName;
+    private undoStep;
+    private clearStep;
+    private emit;
+    private emitChange;
+    private get canEdit();
+    private get canDraw();
+    /** Display scale of the signature: 1, or smaller when the pad is now smaller than when the signature began. */
+    private get viewScale();
+    private addPoint;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerEnd;
+    private onKeyDown;
+    /** Focus target that stays enabled: the pad in draw mode, the name input in type mode. */
+    private focusField;
+    private onUndoClick;
+    private onClearClick;
+    private onToggleMode;
+    private onTypedInput;
+    /** The native change event (blur, or Enter) commits the typed name. */
+    private onTypedChange;
+    private observeSize;
+    private onResize;
+    private scheduleDraw;
+    /** Where a stored signature sits in the `strokes` space: at half its pixel size (it was exported at 2×), shrunk to fit, centred. */
+    private storedPlacement;
+    /** Paints the stored signature and the strokes in one colour. The stored image is recoloured, so it follows the ink colour as strokes do. */
+    private paintInk;
+    private draw;
+    /** Bounding box of the ink in the `strokes` space, line widths included. */
+    private inkBounds;
+    /** The ink trimmed to its bounds plus padding, at 2×, in black. */
+    private renderExport;
+    /** The font of a typed signature: the input's family (our body family, Poppins) in italic. */
+    private typedFont;
+    /** Measures the typed name in its font. Until the font has loaded, measuring (and so the export) uses a fallback; the value is recomputed once it arrives. */
+    private typedMetrics;
+    /** The typed name trimmed to its bounds plus padding, at 2×, in black. */
+    private renderTyped;
+    private typedSVG;
+    private formatSignedAt;
+    /** The pad's accessible name: the field's name, then its state. */
+    private padName;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-signature-pad": RelSignaturePad;
+    }
+}
+
 /**
  * "continuous"/"discrete" are the legacy tick-mode values; Figma's Type axis
  * adds "default" (alias of continuous) and "range" (dual-thumb interval).
@@ -2918,7 +3537,7 @@ type SliderSizeInput = SliderSize | SliderSizeAlias;
  * @cssprop --rel-slider-tick-size - Tick-mark diameter in discrete mode; 4 / 5 / 6px for size sm / md / lg
  * @cssprop --rel-slider-bubble-radius - Corner radius of the value bubble; 8px for size sm, otherwise 10px
  */
-declare class RelSlider extends LitElement {
+declare class RelSlider extends RelElement {
     /** 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;
     /**
@@ -3007,22 +3626,22 @@ type SnackbarType = "default" | "success" | "error" | "warning";
  * Snackbar (Figma "Snackbar"): a dark, elevated message bar with an optional tone accent and leading status icon, an optional action button and a close icon, shown via `show` and auto-dismissed after `duration` milliseconds. It is not positioned — place it (fixed or in-flow) yourself. Use it for brief feedback with a single follow-up action ("Undo", "Retry"); use `rel-alert` for persistent messages.
  * @csspart label - The message text container
  * @csspart action - The action button; rendered only when `action` is set
- * @csspart close-button - The close icon button; rendered while `iconclose` is true
+ * @csspart close-button - The close icon button; rendered while `icon-close` is true
  */
-declare class RelSnackbar extends LitElement {
+declare class RelSnackbar extends RelElement {
     /** Message text. Announced to screen readers through the shared live-region announcer when the snackbar is shown and whenever it changes while shown. The default is a placeholder — always set it. */
     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;
     /**
-     * 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.
+     * Layout and timing (Figma "Type"): `"default"` (the 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. */
+    /** @deprecated — use `variant="longer-action"`. On its own it renders the full longer-action variant (stacked layout and the doubled auto-dismiss delay, `duration * 2`). 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. */
+    /** Shows the trailing close icon button. Defaults to true; `icon-close="false"` (or the property set to `false`) hides the button. */
     iconClose: boolean;
-    /** @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. */
+    /** @deprecated — use `variant`; `lines="double"` maps to `variant="longer-action"` (stacked layout and the doubled auto-dismiss delay). Ignored when `variant` is set. Logs a one-time console notice. */
     lines: SnackbarLines;
     /** 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;
@@ -3053,7 +3672,100 @@ 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. */
+/** One entry of the split button's menu. */
+interface SplitButtonItem {
+    /** Identifies the entry in `rel-select`. Unique within `items`. */
+    value: string;
+    /** Visible text of the menu row. */
+    label: string;
+    /** `rel-icon` name drawn before the label, sized with the menu (20 / 18 / 16px). */
+    icon?: string;
+    /** The row stays in the menu (and reachable with the arrow keys) but cannot be chosen; drawn at 40% opacity. */
+    disabled?: boolean;
+}
+type SplitButtonVariant = "primary" | "secondary" | "ghost" | "static";
+type SplitButtonTone = "neutral" | "brand" | "destructive";
+type SplitButtonSize = "small" | "medium" | "large";
+/**
+ * New in 1.5.0. A button with a main action and a menu of related actions (the "Combo Button"): one pill in two segments with a 1px divider between them, the main action on the left and a chevron on the right that opens a `rel-menu` of `items`, anchored below and end-aligned. Each segment is its own `<button>` with rel-button's styles for the chosen `variant`, `tone` and `size`, so the heights (32 / 40 / 48), padding, hover, pressed, focus ring and disabled look are rel-button's. The chevron follows the WAI-ARIA menu button pattern and shows its pressed look while the menu is open.
+ * @slot - The main action's content (text, or a `rel-icon` and text). Falls back to `label`.
+ * @csspart main - The main action's native `<button>`.
+ * @csspart toggle - The chevron's native `<button>` (`aria-haspopup="menu"`, `aria-expanded`, named by `menu-label`).
+ * @csspart indicator - The loading spinner on the main action, rendered only while `loading` is set.
+ * @csspart list - The menu's `role="menu"` list (rel-menu's list part): restyle the menu's surface here.
+ * @cssprop --rel-split-button-menu-width - Width of the menu (default `max-content`). The menu is never narrower than the split button.
+ * @cssprop --rel-button-min-width - The main action's minimum width, as on rel-button (80 / 100 / 120px by size).
+ * @fires click - The main action was activated (a native click: pointer, Enter or Space). Clicks on the chevron or the menu do not reach the host. Swallowed while `disabled` or `loading`.
+ * @fires rel-select - A menu entry was chosen with a click, Enter or Space; the menu has closed and focus is back on the chevron. Detail: `{ value: string, item: SplitButtonItem }`.
+ * @fires rel-open-change - The menu opened or closed (chevron, keyboard, Escape, an outside click, Tab away, or a choice). Detail: `{ open: boolean }`.
+ */
+declare class RelSplitButton extends RelElement {
+    /** Text of the main action. Slotted content replaces it. */
+    label: string;
+    /** Style of both segments, as rel-button's `variant`: `primary` (filled), `secondary` (outlined, the default), `ghost` (no fill or border) or `static` (transparent with a white label and divider, for dark or coloured surfaces; neutral only, as on rel-button). */
+    variant: SplitButtonVariant;
+    /** Colour of both segments, as rel-button's `tone`: `neutral` (default), `brand` or `destructive`. As on rel-button, `brand` changes only the `primary` style. */
+    tone: SplitButtonTone;
+    /** Height of the pill and size of its text and icons, as rel-button's `size`: `small` = 32px, `medium` = 40px (default), `large` = 48px. The menu rows take the same size. */
+    size: SplitButtonSize;
+    /** Dims both segments to rel-button's disabled look (the divider keeps its colour), removes them from the Tab order and keeps the menu closed. */
+    disabled: boolean;
+    /** The main action shows only rel-button's spinner, at its minimum width; its text stays its accessible name (visually hidden) and it is `aria-busy`. Its clicks are blocked and the chevron is disabled, so nothing else starts mid-request; an open menu closes. */
+    loading: boolean;
+    /** The main action is a square of the button's height (32 / 40 / 48), as rel-button's `icon-only`: give it a single icon (`icon`, or a slotted `rel-icon`) and set `aria-label`. */
+    iconOnly: boolean;
+    /** Accessible name of the main action, forwarded to its native `<button>`. Required with `icon-only`, where the main action has no visible text (a console warning names split buttons without one). */
+    ariaLabel: string | null;
+    /** Accessible name of the chevron button (attribute `menu-label`); it has no visible text. */
+    menuLabel: string;
+    /** `rel-icon` name drawn before the main action's text (16 / 18 / 20px by size). */
+    icon: string;
+    /** The menu entries, each `{ value, label, icon?, disabled? }`. Set as a property (or a JSON array attribute). */
+    items: SplitButtonItem[];
+    /** Whether the menu is open. Updated by the component (and announced with `rel-open-change`); set it to open or close the menu from code. */
+    open: boolean;
+    private popoverEl?;
+    private menu?;
+    /** The menu is at least as wide as the split button; measured on open. */
+    private menuMinWidth;
+    /** Right-to-left: the chevron is on the left, so the menu aligns to its start. */
+    private rtl;
+    static styles: (lit.CSSResult | lit.CSSResult[])[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** One console warning per element for an icon-only main action with no name. */
+    private warnedNoName;
+    willUpdate(changed: PropertyValues<this>): void;
+    private get variantKey();
+    private get toneKey();
+    private get sizeKey();
+    /** rel-button's class contract: the same names rel-button renders, so its
+     *  stylesheet styles both segments. */
+    private segmentClasses;
+    /** Opens or closes the menu and announces it. `focusIndex` picks the row
+     *  the menu opens on (negative counts from the end). */
+    private setOpen;
+    private onHostClick;
+    /** Tab or a click elsewhere moved focus out of the split button (its menu
+     *  included): the menu closes, focus stays where the user put it. */
+    private onFocusOut;
+    /** rel-popover asks (chevron press, Enter, Space, Escape, outside click);
+     *  the split button owns the state and re-emits the event as its own. */
+    private onPopoverOpenChange;
+    private onMenuSideClick;
+    private onToggleKeydown;
+    private onMenuSelect;
+    private onMenuKeydown;
+    render(): lit_html.TemplateResult<1>;
+    private onMainClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-split-button": RelSplitButton;
+    }
+}
+
+/** Control scale, spelled out (Figma Switch "Size": Small / Medium / Large). */
 type SwitchSize = "small" | "medium" | "large";
 /** Alternative spellings, not deprecations — the short names work too. */
 type SwitchSizeAlias = "sm" | "md" | "lg";
@@ -3061,14 +3773,20 @@ 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.
+ * Toggle switch (Figma "Switch", 9059:11244): at the default medium size a
+ * 44×20 control with a thin 10px track and a 20px handle that slides 20px
+ * (`type="line"`), or a 44×24 filled track (`type="pill"`), with the label in
+ * body-md beside it. Hover and pressed cover the whole component, and the
+ * keyboard focus ring is a square 1.5px outline around the control and its
+ * label together. Wraps a native checkbox with `role="switch"`, so keyboard
+ * and screen-reader behaviour are native.
+ * Form-associated, so an outer `<label>` (wrapping it, or `for=`) toggles it
+ * and names it; it still sets no form value and is not submitted.
  * @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 root - The `<label>` holding the control and its optional text; carries the `label-placement` order and the keyboard focus ring
  * @csspart base - The control box around the hidden input and the track
  * @csspart track - The thin rail; the handle is its `::before` pseudo-element
- * @csspart label - The text beside the control; not rendered when there is neither a `label` nor slotted content
+ * @csspart label - The text beside the control (body-sm / body-md / body-lg by `size`; `--rel-text-disabled` while disabled); 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
@@ -3077,23 +3795,23 @@ type SwitchLabelPlacement = "end" | "start";
  * @cssprop --rel-switch-knob-off - Handle colour when unchecked; default `var(--rel-text-static-light)`
  * @cssprop --rel-switch-disabled - Handle colour while disabled; default `var(--rel-bg-neutral-elevated-1)`
  */
-declare class RelSwitch extends LitElement {
+declare class RelSwitch extends RelElement {
+    /** Form-associated only so an outer `<label>` has a control (see utils/outer-label.ts). No form value is set. */
+    static formAssociated: boolean;
     /** Whether the switch is on. Set it to control the state programmatically; user toggles update it and fire `rel-change`. */
     checked: boolean;
     /**
      * 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.
+     * with the handle inside it. Pressing squashes the handle; only `line`
+     * also shows a pressed disc behind it.
      */
     type: "line" | "pill";
-    /** Disables interaction and swaps in the dulled rail / handle fills; the handle shadow is removed. */
+    /** Disables interaction and swaps in the dulled rail / handle fills (for both types, checked or not) and the disabled label colour; the handle shadow is removed. An ancestor `<fieldset disabled>` disables it the same way, without changing this property. */
     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. */
+    /** Accessible name for the native input when the switch has no visible text. Prefer `label`, slotted text or an outer `<label>` (wrapping the switch, or `for=`), which are visible and clickable. */
     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;
@@ -3109,9 +3827,9 @@ declare class RelSwitch extends LitElement {
      * 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.
+     * Matches Figma's Size axis: controls 36 / 44 / 52px wide, labels body-sm /
+     * body-md / body-lg (12 / 14 / 16px). The default stays `medium` (Figma's
+     * own default is Large).
      *
      * It does NOT respond to viewport width. Picking a size per breakpoint is the
      * consuming application's decision — a control that silently resized itself
@@ -3121,8 +3839,15 @@ declare class RelSwitch extends LitElement {
     size: SwitchSizeInput;
     private _onChange;
     private _onTouched;
-    private isFocused;
-    private isPressed;
+    private readonly internals;
+    /** A click on an outer label arrives at the host; route it through the
+     *  native input so it toggles exactly as a direct click does (one
+     *  `change`, one `rel-change`). A disabled input ignores the click. */
+    private readonly outerLabel;
+    /** Own `disabled`, or an ancestor `<fieldset disabled>`. */
+    private get isDisabled();
+    /** @internal Form-associated lifecycle: an ancestor `<fieldset disabled>` disables the control too (utils/outer-label.ts, 3). */
+    formDisabledCallback(): void;
     private hasSlottedLabel;
     /** Alternative spellings, NOT deprecations — no console notice. Normalising
      *  keeps the reflected attribute canonical so the :host([size=…]) rules only
@@ -3136,10 +3861,7 @@ declare class RelSwitch extends LitElement {
     registerOnTouched(fn: () => void): void;
     /** @internal Angular ControlValueAccessor bridge. */
     writeValue(checked: boolean): void;
-    private handleFocus;
     private handleBlur;
-    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
@@ -3161,11 +3883,15 @@ interface TabItem {
  * is an explicit item height — 32 / 40 / 48px (Figma Tab Item S/M/L).
  */
 type TabSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+/** Layout of the tab list: a row above the panel (`horizontal`, default) or a column beside it (`vertical`). */
+type TabOrientation = "horizontal" | "vertical";
+/** Where each tab's icon sits relative to its label. */
+type TabIconPlacement = "start" | "top";
 /**
  * Declarative tab definition for `<rel-tab>`. Renders nothing itself — place
  * it in the parent's `items` slot and the parent reads its properties.
  */
-declare class RelTabItem extends LitElement {
+declare class RelTabItem extends RelElement {
     /** 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. */
@@ -3190,14 +3916,15 @@ declare class RelTabItem extends LitElement {
  * @csspart list - The `role="tablist"` row
  * @csspart item - Each `role="tab"` element
  * @csspart label - The text span inside each tab
+ * @cssprop --rel-tab-list-width - Width of the tab list when `orientation="vertical"`; default `max-content`
  * @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 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-hover - Label colour while hovering an enabled tab; default `var(--rel-text-default)`
  * @cssprop --rel-tab-text-disabled - Label colour of a disabled tab; default `var(--rel-text-disabled)`
- * @cssprop --rel-tab-hover-color - Background of an inactive tab on hover; default `var(--rel-bg-neutral-elevated-1)`
+ * @cssprop --rel-tab-hover-color - Background of an inactive tab on hover; default `transparent` (the design darkens the label instead). Set it to bring a hover fill back.
  */
-declare class RelTab extends LitElement {
+declare class RelTab extends RelElement {
     /** Tab definitions as `{ label, badge?, badgeDot?, disabled? }` objects — normally set as a property (as an attribute it must be a JSON string). Assign a new array to update; mutating in place does not re-render. Ignored when `<rel-tab-item>` children are slotted into `items`. */
     tabs: TabItem[];
     /** Zero-based index of the selected tab. Set it to switch tabs programmatically (no event is fired for programmatic changes). */
@@ -3205,6 +3932,10 @@ declare class RelTab extends LitElement {
     /** Tab size — styled via :host([size]) rules. Explicit item heights
      *  32 / 40 / 48px (audit 34); `small|medium|large` alias `sm|md|lg`. */
     size: TabSize;
+    /** New in 1.5.0. Tab list layout: `horizontal` (default, a row above the panel) or `vertical` (a column beside the panel as wide as its longest label, tabs 24px apart along a rule on the list's inline-start edge, the active bar on that edge, labels that wrap rather than truncate; Up / Down move between tabs). There is no built-in breakpoint: switch to horizontal on small screens in your app. */
+    orientation: TabOrientation;
+    /** New in 1.5.0. Icon position in every tab: `start` (default, before the label) or `top` (stacked above the label, with the badge beside the label). Stacked tabs are 76 / 64 / 52px tall at large / medium / small. Works in both orientations. */
+    iconPlacement: TabIconPlacement;
     private _tabItems;
     /** Stable id prefix linking tabs to the shared tabpanel. */
     private tabsId;
@@ -3244,17 +3975,17 @@ 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.
+ * @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 the other overlays (select, autocomplete, the three pickers) so the whole family can be moved from one place.
  * @fires rel-focus - Fired when the text input receives focus. No detail.
  */
-declare class RelTimePicker extends LitElement {
+declare class RelTimePicker extends RelElement {
     /** Committed time, 24-hour "HH:mm" or "HH:mm:ss" (e.g. "09:30", "17:05:30"). */
     value: string | null;
     /** Placeholder shown in the field while no value is committed and nothing is typed. */
     placeholder: string;
     /** Field label rendered above the trigger; also the input's accessible name (unset → "Select time"). */
     label: string | null;
-    /** Disables the field (0.6 opacity, no pointer events); the panel cannot open. */
+    /** Disables the field (no pointer events) and the panel cannot open. The field looks exactly like a disabled `rel-textfield`: the whole field at 0.65 opacity, an elevated-2 box with the accent border, the label in `--rel-text-label` and the value and placeholder in `--rel-text-caption` (changed in 1.5.0: they were `--rel-text-disabled` under the 0.65, which left them barely readable). */
     disabled: boolean;
     /** Renders the `*` mark after the label and sets `aria-required`; not enforced by the component. */
     required: boolean;
@@ -3288,7 +4019,7 @@ declare class RelTimePicker extends LitElement {
     size: "small" | "medium" | "large";
     /** Visual style; only `"outlined"` exists today. */
     variant: "outlined";
-    /** Fills the parent width (the host is inline-block with intrinsic width otherwise). The attribute is lowercase `fullwidth`. */
+    /** Fills the parent width (the host is inline-block with intrinsic width otherwise). The attribute is `full-width`. */
     fullWidth: boolean;
     private draftHour;
     private draftMinute;
@@ -3316,7 +4047,7 @@ declare class RelTimePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
-    private onPageScroll;
+    private scrollWatch;
     private updatePopoverPosition;
     /** Focus the selected (or first enabled) option in the columns. */
     private focusPanelSelection;
@@ -3393,8 +4124,11 @@ declare global {
     }
 }
 
-/** Canonical semantic tones (Figma "Tone"): neutral | destructive. */
-type ToastTone = "neutral" | "destructive";
+/**
+ * Canonical semantic tones: neutral | info | success | destructive, as on
+ * Figma's Toast "Tone" axis; the filled tones reuse rel-alert's solid tone tokens.
+ */
+type ToastTone = "neutral" | "info" | "success" | "destructive";
 /** Deprecated spellings: "default" → neutral; "error" | "danger" | "critical" → destructive. */
 type ToastToneAlias = "default" | "error" | "danger" | "critical";
 type ToastToneInput = ToastTone | ToastToneAlias;
@@ -3422,22 +4156,23 @@ type ToastSizeInput = ToastSize | ToastSizeAlias;
  * 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 icon - The 20px leading icon of a filled tone (`error` on destructive, `check-circle` on success, `info` on info); a neutral toast has none. New in 1.5.0
  * @csspart label - The message text span
- * @csspart action - The action button; rendered only when `actionlabel` is set
+ * @csspart action - The action button; rendered only when `action-label` is set
  * @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
  */
-declare class RelToast extends LitElement {
+declare class RelToast extends RelElement {
     /** 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 (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.
+     * Semantic tone (Figma "Tone"): `"neutral"` (default: neutral surface) | `"info"` (info fill) | `"success"` (success fill) | `"destructive"` (danger fill, announced assertively). The three filled tones use the same fill and text tokens as rel-alert's solid style, so a toast matches an alert of the same tone; info and success are announced politely. The three filled tones show a 20px leading icon (`error`, `check-circle`, `info`; part `icon`, hidden from assistive technology); the neutral tone has none (new in 1.5.0). Figma's Toast has all four tones. An unknown value renders as `"neutral"`. `"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"` 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 `"neutral"`; deprecated aliases are resolved to `"neutral"` / `"destructive"`. */
+    /** Read-only canonical tone actually rendered: explicit `tone` wins, else `type`, else `"neutral"`; deprecated aliases are resolved to `"neutral"` / `"destructive"`, and an unknown value to `"neutral"`. */
     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;
@@ -3445,7 +4180,7 @@ 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. */
+    /** Shows the trailing dismiss button (Figma "Show Close Button"). Defaults to true; `dismissible="false"` (or the property set to `false`) hides the button. */
     dismissible: boolean;
     /**
      * Where the toast is anchored: `bottom-center` (default, unchanged from
@@ -3513,12 +4248,12 @@ type TooltipType = "single-line" | "multi-line";
 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.
+ * @slot - The trigger element (one focusable element such as a button or icon button). The control that takes focus — the slotted element itself, or the focusable control inside a rel-* trigger such as rel-button — receives `text` as its `aria-description`, so screen readers announce it.
  * @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 {
+declare class RelTooltip extends RelElement {
     /** 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, 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. */
@@ -3530,6 +4265,10 @@ declare class RelTooltip extends LitElement {
     /** 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;
+    /** The element whose description is the tooltip text. */
+    private describedEl;
+    /** The value this component wrote, so it only ever removes its own. */
+    private appliedDescription;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -3538,10 +4277,143 @@ declare class RelTooltip extends LitElement {
     private onKeydown;
     private clearDismissed;
     firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Screen readers announce `text` as the trigger's DESCRIPTION. It used to
+     * be wired with aria-describedby pointing at the bubble's id, but the
+     * trigger is light DOM and the bubble lives in this shadow root: an IDREF
+     * cannot cross that boundary, so nothing was ever announced. aria-description
+     * carries the text itself, and it goes on the element that actually takes
+     * focus — the slotted element, or, for a rel-* trigger such as rel-button,
+     * the first focusable control inside its shadow root (the host itself is
+     * not in the focus order and its description would never be read).
+     */
     private linkTrigger;
+    private syncDescription;
+    private clearDescription;
     render(): lit_html.TemplateResult<1>;
 }
 
+/** One node of a `rel-tree`. */
+interface TreeItem {
+    /** Identifies the item in `selected`, `selected-values`, `expanded-values` and every event. Unique within the tree. */
+    value: string;
+    /** Visible label: one line, truncated with an ellipsis (the full text is the row's tooltip). */
+    label: string;
+    /** `rel-icon` name drawn before the label (Figma "Show Icon"), 16px. */
+    icon?: string;
+    /** Child items. A non-empty array makes the item a parent with an expand / collapse caret. */
+    children?: TreeItem[];
+    /** Seeds `expanded-values` when the tree first gets its items. */
+    expanded?: boolean;
+    /**
+     * Children are loaded on demand. While `children` is undefined the item shows a caret; expanding it fires `rel-load-children` and marks the row `aria-busy` until you set its `children` (an empty array when it has none, which makes it a leaf) and assign `items` again.
+     */
+    lazy?: boolean;
+    /** The row stays focusable but cannot be selected, checked or expanded (Figma State=Disabled, 40% opacity). A parent's check cascade skips it. */
+    disabled?: boolean;
+}
+type TreeSelection = "single" | "multiple" | "none";
+/**
+ * Hierarchical list whose parents expand and collapse (Figma "Nested Tree"), rendered from the `items` array: 24px rows with hierarchy guides, an expand / collapse caret on parents, an optional icon and a one-line label. The tree is one Tab stop; the arrow keys move, expand and collapse as in the WAI-ARIA Tree View pattern. It has no background, padding or radius of its own: place it inside the surface that hosts it.
+ * @csspart tree - The `role="tree"` list.
+ * @csspart item - Each `role="treeitem"` element; it contains the item's row and, when expanded, the group of its children.
+ * @csspart row - The visible row of an item (guides, caret, checkbox, icon, label). Carries the hover, pressed, selected and focus styles.
+ * @csspart guide - One hierarchy-guide column, one per level of indentation.
+ * @csspart caret - The expand / collapse caret of a parent row.
+ * @csspart checkbox - The check glyph of a row in `multiple` mode (Figma .Check Control: unchecked, checked, indeterminate).
+ * @csspart icon - The optional leading icon.
+ * @csspart label - The label text.
+ * @csspart group - The `role="group"` list that holds an expanded item's children.
+ * @cssprop --rel-tree-row-height - Row height (default 24px, Figma .Tree Item).
+ * @cssprop --rel-tree-indent - Width of one level of indentation, one guide column (default 24px).
+ * @cssprop --rel-tree-guide-color - Colour of the hierarchy guides (default `var(--rel-border-subtle)`).
+ * @fires rel-change - The user changed the selection with Enter, Space or a click: picked a row in `single` mode (detail `{ value: string }`) or checked / unchecked one in `multiple` mode (detail `{ value: string[] }`, the new `selected-values`).
+ * @fires rel-expanded-change - The user expanded or collapsed a parent. Detail: `{ value: string; expanded: boolean }`.
+ * @fires rel-load-children - A `lazy` item without `children` was expanded (by the user, `expanded` or `expanded-values`). Load its children, set them on the item and assign `items` again. Fired once per item until its children arrive. Detail: `{ value: string }`.
+ */
+declare class RelTree extends RelElement {
+    /** The tree's items, each `{ value, label, icon?, children?, expanded?, disabled?, lazy? }`. Set as a property or as a JSON array attribute. */
+    items: TreeItem[];
+    /** Selection mode: `single` (default; the selected row has the Figma Active style and `aria-selected="true"`), `multiple` (a checkbox on every row, see `selected-values`) or `none` (navigation only: Enter, Space and clicks on a parent row expand or collapse it). */
+    selection: TreeSelection;
+    /** `value` of the selected item in `single` mode; `""` when nothing is selected. Updated on every user selection. */
+    selected: string;
+    /**
+     * Values of the checked items in `multiple` mode. Checking a parent checks every enabled descendant and unchecking it clears them; a parent is checked when all its children are, and shows the indeterminate glyph (`aria-checked="mixed"`) when only some are. The array lists every checked value, parents included, and is rewritten in that form when you set it: a parent's value checks its whole subtree.
+     */
+    selectedValues: string[];
+    /** Values of the expanded parents. Seeded from the items' `expanded` flags, updated whenever the user expands or collapses a row; set it to control expansion. */
+    expandedValues: string[];
+    /** Draws the hierarchy guides (│ ├ └) in the indentation. On by default; `show-guides="false"` hides them and keeps the indentation. */
+    showGuides: boolean;
+    /** Accessible name of the tree. The tree renders no visible label of its own, so set this (a console warning names trees without one). */
+    fieldAriaLabel?: string;
+    /** The item that holds the Tab stop (roving tabindex). */
+    private focusedValue;
+    private typeahead;
+    private typeaheadTimer?;
+    private seededExpansion;
+    private warnedNoName;
+    private rtl;
+    private labelIds;
+    /** Derived check state of every item in `multiple` mode. */
+    private checks;
+    /** Lazy items whose children were requested and have not arrived (`aria-busy`). */
+    private loading;
+    private pendingLoads;
+    static styles: lit.CSSResult;
+    private isParent;
+    /** A lazy item whose children have not been set yet. */
+    private isUnloaded;
+    /** Shows a caret: has children, or may have them once loaded. */
+    private canExpand;
+    private isExpanded;
+    /** Every item with its parent, depth first. */
+    private allRows;
+    /** The rows the user can see, in reading order. */
+    private visibleRows;
+    /** Check state of every item, from the checked leaves (a parent's value counts as all of its leaves). */
+    private deriveChecks;
+    private checkedValues;
+    /** Normalises `selectedValues` to the derived form: every fully checked value, parents included. */
+    private syncChecks;
+    /** Checks or clears every enabled leaf under `item` (disabled subtrees keep their state). */
+    private toggleCheck;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    /** Expands every parent that has children (lazy items whose children have not been loaded stay closed). */
+    expandAll(): void;
+    /** Collapses every parent. */
+    collapseAll(): void;
+    private emit;
+    private setExpanded;
+    /** Enter, Space or a click on the row. */
+    private activate;
+    private focusRow;
+    private onRowClick;
+    /** A row can get focus without the keyboard or a click (`focus()`, a screen reader's cursor): it takes the Tab stop, so keys act on it. */
+    private onFocusIn;
+    private onKeyDown;
+    /** Moves to the next visible row whose label starts with the typed text; repeating one character cycles through the matches. */
+    private typeAhead;
+    /**
+     * `more[i]` says whether the ancestor at depth i has a sibling below it.
+     * Level 1 has no guide column; below that there is one column per ancestor
+     * level (a line where that ancestor continues, blank where it ended) and
+     * a last column for the row's own connector (branch, or end on a last child).
+     */
+    private renderItems;
+    private renderItem;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-tree": RelTree;
+    }
+}
+
 /** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
 type UploadStatus = "ready" | "uploading" | "success" | "error";
 /**
@@ -3568,7 +4440,8 @@ interface UploadFile {
 }
 interface UploadRejection {
     name: string;
-    reason: "format" | "size";
+    /** `count`: beyond `max-files` (new in 1.5.0). */
+    reason: "format" | "size" | "count";
     message: string;
 }
 interface UploaderContext {
@@ -3608,7 +4481,8 @@ interface UploadState {
  *
  * @element rel-upload
  * @fires rel-files-added - Fired after files are picked or dropped and validated. Detail: `{ added: UploadFile[], rejected: UploadRejection[] }`.
- * @fires rel-invalid - Fired just before `rel-files-added` when at least one picked file fails `accept` / `max-size`. Detail: `{ rejected: UploadRejection[] }`.
+ * @fires rel-invalid - Fired just before `rel-files-added` when at least one picked file fails `accept` / `max-size` / `max-files`. Detail: `{ rejected: UploadRejection[] }`.
+ * @fires rel-file-replaced - New in 1.5.0. Fired once per list entry that a newly picked file with the same name replaced (the replace itself is unchanged: names stay unique). The component also announces it and shows an info notice in its alert slot. Detail: `{ name: string, previous: UploadFile, next: UploadFile }`.
  * @fires rel-change - Fired whenever the file list changes (files added, a row removed, `reset()`). Detail: `{ files: UploadFile[] }`.
  * @fires rel-remove - Fired when a row is removed via its delete button or `removeFile()`. Detail: `{ id: string, file?: File }`.
  * @fires rel-upload - Fired when Upload is pressed (or `upload()` is called) with the rows still `ready`; in controlled mode the app performs the transfer. Detail: `{ files: UploadFile[] }`.
@@ -3617,18 +4491,31 @@ interface UploadState {
  * @fires rel-progress - Fired on every progress tick in self-driving mode. Detail: `{ id: string, progress: number (0–100), loaded: number, total: number }` (bytes).
  * @fires rel-file-complete - Fired when one file finishes uploading in self-driving mode. Detail: `{ id: string, file: File }`.
  * @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-complete - Deprecated: use `rel-upload-complete`, which fires once per batch in both modes; removed in 3.0. It still fires as before, and listening for it logs a one-time console warning. Fired when the whole self-driving batch settles without being cancelled. Detail: `{ succeeded: UploadFile[], failed: UploadFile[] }` (every success and error row in the list). Self-driving mode only; `rel-upload-complete` covers both modes.
+ * @fires rel-upload-complete - New in 1.5.0. Fired once per batch when nothing is uploading any more, in BOTH modes: in self-driving mode when the `uploader` calls settle, in controlled mode when the app moves the last `uploading` row it set to `success` or `error`. Not fired after `cancel()`. The component announces the result politely ("3 files uploaded", "2 uploaded, 1 failed"), and when nothing failed it shows a success alert in its alert slot ("3 files uploaded"; the delay warning and the failure alert come first). It shows no toast: listen for this event to show your own (for example a success `rel-toast`). Detail: `{ succeeded: UploadFile[], failed: UploadFile[] }`, the rows of this batch only.
  * @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. 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 {
+declare class RelUpload extends RelElement {
+    /**
+     * `rel-complete` is deprecated (removal in 3.0): adding a listener for it on
+     * the element logs a one-time notice (once per page). Lit `@rel-complete`,
+     * Angular's EventMapper and React 19 all register here. The event itself is
+     * unchanged; listeners on an ancestor that rely on bubbling are not seen.
+     * @internal DOM plumbing, not component API (kept out of the README and the manifest).
+     */
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    /** @internal */
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
     /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
     accept: string;
     /** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
     maxSize: string;
     /** Allow more than one file. */
     multiple: boolean;
+    /** New in 1.5.0. With `multiple`, the most files the list may hold; `0` (the default) means no limit. Files beyond it become error rows ("only 5 files allowed") and `rel-invalid` rejections with `reason: "count"`. Rows already in the list count first, then new files in selection order; rows rejected by `accept`, `max-size` or the limit hold no place. `retry()` checks the limit again, so removing rows lets a rejected one through. Ignored without `multiple` (one file at a time). */
+    maxFiles: number;
     /** Disables the whole control. */
     disabled: boolean;
     /** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
@@ -3640,6 +4527,9 @@ declare class RelUpload extends LitElement {
     /**
      * The file list. Set it to drive the component in controlled mode; the
      * component also maintains it itself as files are added and removed.
+     * A row whose `file` is an image (`image/*`) shows a 40px preview in place
+     * of the file icon (new in 1.5.0); its object URL is revoked when the row
+     * leaves the list and when the element disconnects.
      */
     files: UploadFile[];
     /** Supply an `Uploader` `(file, { file, signal, onProgress }) => Promise<void>` to switch to self-driving mode: the component runs the batch itself with `concurrency`, progress, the delay alert, abort and retry. Unset (default) the component only emits intents. */
@@ -3650,12 +4540,26 @@ declare class RelUpload extends LitElement {
     delayThreshold: number;
     private dragOver;
     private delayed;
+    /** Names replaced by the latest pick; drives the info notice. */
+    private replacedNames;
+    /** Files in the last batch when it finished with no failures; drives the success alert. */
+    private uploadedCount;
+    /** Rows whose image preview failed to decode; they show the file icon. */
+    private thumbFailed;
+    /** Object URLs of image previews, by row id. Revoked as soon as the row leaves the list, and on disconnect. */
+    private thumbUrls;
     private inputEl;
     private aborter?;
     private delayTimer?;
     private lastSignature;
     private lastHeading;
     private lastAlertText;
+    /** Rows rejected by `max-files`: they hold no place until `retry()` re-checks them. */
+    private overLimit;
+    private batchIds;
+    private wasUploading;
+    private batchCancelled;
+    private settledBatch?;
     static styles: lit.CSSResult;
     /**
      * Aggregate state. Read-only; corresponds to the Figma modal variants.
@@ -3673,6 +4577,12 @@ declare class RelUpload extends LitElement {
      * rather than re-queueing it blindly.
      */
     private get retryable();
+    /** The `max-files` limit in force: none without `multiple` or at `0`. */
+    private get fileLimit();
+    /** Whether a row already in the list holds one of the `max-files` places:
+     *  any row that is not an error, and failed rows that a retry would send
+     *  again (not rejected by `accept`, `max-size` or the limit itself). */
+    private holdsPlace;
     /** Whether the primary action is enabled: not disabled, nothing in flight, and either `ready` rows exist or (in the failed phase) at least one failed row can be retried. */
     get canUpload(): boolean;
     /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
@@ -3719,6 +4629,16 @@ declare class RelUpload extends LitElement {
     private onDrop;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Revoke the previews of rows no longer in `files`. */
+    private pruneThumbs;
+    /** An object URL for an image row's preview, created once per row. */
+    private thumbUrl;
+    /** A preview that cannot be decoded falls back to the file icon. */
+    private onThumbError;
+    /** Batch tracking for `rel-upload-complete`, from the `files` the update
+     *  renders. Self-driving (`patch()`) and controlled (the app writes
+     *  `files`) both end here, so one rule serves both modes. */
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
     updated(): void;
     private rowMeta;
     private renderRow;
@@ -3753,7 +4673,7 @@ declare global {
  * @csspart cancel - The secondary Cancel `rel-button` (absent when `no-cancel` is set)
  * @csspart primary - The primary Upload / Retry `rel-button`
  */
-declare class RelUploadActions extends LitElement {
+declare class RelUploadActions extends RelElement {
     /** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
     for: string;
     /** Cancel button label. */
@@ -3825,6 +4745,7 @@ declare class FocusTrap {
     private getContainer;
     private previousFocus;
     private active;
+    private generation;
     constructor(getContainer: () => Element | ShadowRoot | null);
     activate(options?: {
         initialFocus?: HTMLElement | null;
@@ -3883,6 +4804,69 @@ declare function bindShortcut(shortcut: string, handler: ShortcutHandler, option
  */
 declare function formatShortcutParts(shortcut: string): string[];
 
+/**
+ * New in 1.5.0. Keyboard navigation for a two-dimensional grid of cells
+ * (WAI-ARIA Grid pattern, data grid flavour), framework-free so that plain-JS
+ * recipes can use it as well as components.
+ *
+ * - Roving tabindex: exactly one cell has `tabindex="0"`; a click or any other
+ *   focus on a cell moves the Tab stop there.
+ * - Arrows move one cell (Left / Right swap in a right-to-left grid); Home / End
+ *   go to the row's first / last cell; Ctrl+Home / Ctrl+End (Cmd on a Mac) to the
+ *   grid's first / last cell; PageUp / PageDown move `pageSize` rows when set.
+ * - Enter, Space and a click activate a cell (`onActivate`), except a disabled
+ *   one (`aria-disabled="true"`).
+ *
+ * Only the keys it handles are prevented. The grid's rows and cells are re-read
+ * by `refresh()`: call it after re-rendering them.
+ *
+ * ```js
+ * import { createGridNavigation } from "@reliability-design/web";
+ * const nav = createGridNavigation(document.querySelector('[role="grid"]'), {
+ *   onActivate(cell, pos) { select(pos.row, pos.col) },
+ * });
+ * ```
+ */
+/** A cell's place in the grid: zero-based row and column. */
+interface GridPosition {
+    row: number;
+    col: number;
+}
+interface GridNavigationOptions {
+    /** Selector for the rows, inside the grid. Rows give the grid its shape. Default `'[role="row"]'`. */
+    rowSelector?: string;
+    /** Selector for the cells, inside a row, in DOM order. Default `'[role="gridcell"]'`. Rows with no cells (a header row of `columnheader`s) are not part of the grid. */
+    cellSelector?: string;
+    /** A disabled cell (`aria-disabled="true"`): `"focus"` (default) keeps it reachable, as the WAI-ARIA grid pattern does, but it does not activate; `"skip"` jumps over it. */
+    disabledCells?: "focus" | "skip";
+    /** Arrows past an edge continue at the opposite edge of the same row or column. Default `false`: they stop at the edge. */
+    wrap?: boolean;
+    /** PageUp / PageDown move this many rows (clamped to the grid). Unset: the Page keys are not handled. */
+    pageSize?: number;
+    /** `"auto"` (default) reads the grid's computed `direction` on every key, so Left / Right follow a right-to-left layout. */
+    direction?: "auto" | "ltr" | "rtl";
+    /** Enter, Space or a click on a cell that is not disabled. */
+    onActivate?(cell: HTMLElement, pos: GridPosition, event: KeyboardEvent | MouseEvent): void;
+    /** After a key moved the focus to `cell`. */
+    onMove?(cell: HTMLElement, pos: GridPosition, event: KeyboardEvent): void;
+    /** A custom key map, consulted first: return the target position, `null` to leave the key unhandled, or `undefined` to use the default map. */
+    resolve?(key: string, pos: GridPosition, event: KeyboardEvent): GridPosition | null | undefined;
+}
+interface GridNavigation {
+    /** The cell that holds the Tab stop, or `null` while the grid has no cells. */
+    readonly active: GridPosition | null;
+    /** Moves the Tab stop to `pos` (clamped to the grid) and focuses it, unless `focus: false`. */
+    focusCell(pos: GridPosition, opts?: {
+        focus?: boolean;
+    }): void;
+    /** Re-reads the rows and cells after a re-render; the Tab stop keeps its position, clamped. */
+    refresh(): void;
+    /** Removes the listeners. The cells keep their tabindex. */
+    destroy(): void;
+}
+/** New in 1.5.0. Adds grid keyboard navigation and a roving Tab stop to `grid`. See the module comment. */
+declare function createGridNavigation(grid: HTMLElement, options?: GridNavigationOptions): GridNavigation;
+
 /**
  * Shared screen-reader announcer.
  *
@@ -3904,4 +4888,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 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 };
+export { type AlertTone, type AlertToneAlias, type AlertToneInput, type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type AvatarBadge, 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 GridNavigation, type GridNavigationOptions, type GridPosition, type KbdPlatform, 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 PaginationType, 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, RelAvatarGroup, 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, RelSignaturePad, RelSkeleton, RelSlider, RelSnackbar, RelSplitButton, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTree, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type ShortcutHandler, type SignaturePadChangeDetail, type SignaturePadMode, type SignaturePoint, type SignatureStroke, 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 SplitButtonItem, type SplitButtonSize, type SplitButtonTone, type SplitButtonVariant, type Step, type StepStatus, type StepperConnector, type StepperSize, type StepperType, type SwitchLabelPlacement, type SwitchSize, type SwitchSizeAlias, type SwitchSizeInput, type TabIconPlacement, type TabItem, type TabOrientation, 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 TreeItem, type TreeSelection, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext, announce, bindShortcut, createGridNavigation, detectKbdPlatform, formatShortcutParts, getDeepActiveElement, getFocusableElements, isApplePlatform, isEditableTarget, matchesShortcut, parseShortcut, resolveKbdKey, trapTabKey };