@reliability-design/web 1.4.8 → 1.4.9

package/dist/index.d.ts

@@ -118,7 +118,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 (the fieldset in the legend variant)
+ * @csspart control - The bordered control box. Changed in 1.4.9: in `variant="legend"` this is now the same `div` as every other variant, not the `fieldset` — the fieldset was demoted to a decorative outline layer behind the content so the control sits on the 32/40/48 size ladder and centres its value like the other variants. `::part(control)` still matches; only rules that depended on it being a fieldset do not.
  * @csspart input - The native input / textarea
  * @csspart prefix - The prefix block (leading icon, prefix text and the `prefix` slot)
  * @csspart suffix - The suffix block (suffix text, trailing icon and the `suffix` slot)
@@ -126,7 +126,7 @@ type FieldLabelStyle = "default" | "floating" | "none";
  * @csspart helper - The helper / error text line below the control
  * @csspart helper-icon - The leading `rel-icon` in the helper line; rendered only when `helper-icon` is set and there is helper text
  * @cssprop --rel-field-label-reserve - Height held for the label row whenever no label renders above the control — `labelStyle="none"`, and `labelStyle="floating"` where the label sits inside the control — so the control still lines up with labelled siblings in a form row. Defaults to that size's label line-height plus the wrapper gap (24px at `small`, 26px at `medium` and `large`). Set to `0` to collapse the row entirely (toolbars, table cells).
- * @cssprop --rel-textfield-surface - Colour the floating label's strip paints to mask the border behind it; defaults to the control's own fill (`--rel-bg-neutral`). Set it when the field sits on a tinted or elevated surface, otherwise the strip shows as a light dash across the border.
+ * @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 {
     /**
@@ -290,10 +290,11 @@ declare class RelCheckbox extends LitElement {
     value: string;
     /** Control scale (Figma Size), on Figma's four-step ramp of control frames:
      *  `"small"` 16px / body-sm, `"medium"` (default) 18px / body-md,
-     *  `"large"` 20px / body-lg, `"extra-large"` 24px / body-xl. The drawn
-     *  square is inset to 80% of the frame, so the frame is the layout
-     *  footprint (what the row gap and the compact indent measure from) rather
-     *  than the visible square. */
+     *  `"large"` 20px / body-lg, `"extra-large"` 24px / body-xl. Supporting
+     *  text sits one body step below the label at every size (body-xs / sm /
+     *  md / lg, i.e. 10 / 12 / 14 / 16px). The drawn square is inset to 80% of
+     *  the frame, so the frame is the layout footprint (what the row gap and the
+     *  compact indent measure from) rather than the visible square. */
     size: CheckboxSize;
     /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
      *  supporting text on its own line under the row, indented past the box;
@@ -304,6 +305,17 @@ declare class RelCheckbox extends LitElement {
      *  Trailing has no compact layout in the spec, so it always renders with
      *  comfortable density. */
     alignment: CheckboxAlignment;
+    /** Accessible name for the native checkbox, for when the visible `label` is
+     *  absent or not a usable name on its own — a checkbox in a table row, or one
+     *  whose meaning comes from its column header.
+     *
+     *  Normally you do not need it: the input is wrapped in the `<label>` that
+     *  renders `label`, so the visible text already names it natively. Setting
+     *  this puts an `aria-label` on the input, which OVERRIDES that wrapping
+     *  label — so set it only when the visible text is the wrong name, not to
+     *  repeat it. Left unset the attribute is not emitted at all and the native
+     *  labelling is untouched. */
+    fieldAriaLabel?: string;
     /** Boolean view of `status`: `true` when `status === "checked"`; setting it writes `"checked"` / `"unchecked"`. */
     get checked(): boolean;
     set checked(val: boolean);
@@ -486,6 +498,7 @@ 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.
  */
 declare class RelAutocomplete extends LitElement {
     /** 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. */
@@ -627,6 +640,11 @@ declare class RelAutocomplete extends LitElement {
      * and once that ramp was realigned to Figma the compensation became the bug.
      */
     private get optionCheckboxSize();
+    /** Native tooltip carrying the row's full text. Both lines truncate to one
+     *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+     *  by sight; hovering the row reveals it. Only rows that carry a second line
+     *  get one, so plain lists do not sprout tooltips. */
+    private rowTitle;
     private get selectAllStatus();
     private toggleMultiOption;
     private toggleSelectAll;
@@ -869,6 +887,7 @@ declare class RelCard extends LitElement {
  * @cssprop --rel-carousel-dot-size - Diameter of an inactive dot (default 8px).
  * @cssprop --rel-carousel-dot-size-active - Width of the active (brand-coloured, pill-shaped) dot (default 16px).
  * @cssprop --rel-carousel-slide-width - Written by the component on its own host to the computed panel width (viewport width for `panels="1"`, a fraction of it above that); not meant to be set by consumers (an inline value is overwritten on resize).
+ * @cssprop --rel-carousel-slide-display - `display` given to each slide in `orientation="vertical"` only; defaults to `flex`, which is what centres the slide's content in the fixed-height viewport as Figma draws it. Set it to `block` to opt out if forcing flex reflows your slide's own children. Horizontal slides are never touched.
  * @cssprop --rel-carousel-slide-height - Written by the component on its own host to the computed panel height (used for vertical slides); not meant to be set by consumers.
  */
 declare class RelCarousel extends LitElement {
@@ -1010,6 +1029,7 @@ 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.
  */
 declare class RelDatePicker extends LitElement {
     /** Selected date as an ISO `YYYY-MM-DD` string, or `null` when empty; setting it also moves the popover to that month. */
@@ -1110,6 +1130,7 @@ declare class RelDatePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     /** Focus the roving day cell (selected day, else today, else first). */
     private focusPanelSelection;
@@ -1193,6 +1214,28 @@ declare class RelDatePicker extends LitElement {
      * Index of the single grid cell carrying tabindex="0". The old expression
      * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
      * stops once the user arrowed around without a selection.
+     *
+     * KNOWN GAP (deferred from 1.4.9, needs a ticket covering BOTH calendars):
+     * `focusedDate` is read here as the first candidate but is never assigned
+     * anywhere in this file, so it is permanently null and the tab stop tracks
+     * the SELECTION rather than focus. Tab out of the grid and back and you
+     * return to the selected day, not the day you left.
+     *
+     * Wiring it from each cell's `@focus` was tried and is NOT sufficient, which
+     * is why this is still open. Measured 2026-09-25 by driving real keys: from
+     * Sun 27 Sep, one ArrowDown lands focus on Sun 25 Oct instead of Sun 4 Oct,
+     * because handleDayKeydown moves by grid INDEX and then lets the view flip
+     * month, so index+7 addresses a different date in the new grid. lit reuses
+     * the same button elements across that re-render, so the focused element
+     * never changes and NO focus event fires — the handler cannot observe the
+     * move it is supposed to record.
+     *
+     * The real fix is to navigate by DATE and set the rove explicitly before
+     * focusing, the way rel-range-picker.moveGridFocusTo already does (verified
+     * correct in the same run: Sep 27 → Oct 4 → Oct 11, tab stop and focus
+     * agreeing at every step). That is a rewrite of this component's arrow-key
+     * model, not a contained fix, and it must land on both calendars together or
+     * they diverge again.
      */
     private getRovingIndex;
     /** Days view: weekday header + the six week rows. */
@@ -1222,6 +1265,7 @@ 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.
  */
 declare class RelRangePicker extends LitElement {
     /** Committed range start as an ISO `YYYY-MM-DD` string; empty string when no range is set. */
@@ -1297,6 +1341,7 @@ declare class RelRangePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
@@ -1399,6 +1444,21 @@ declare class RelRangePicker extends LitElement {
      * The cell that carries tabindex="0". Prefers the last roved date, then the
      * draft start, then today, then the first selectable day — always exactly
      * one Tab stop, even after arrowing away with nothing selected.
+     *
+     * `focusedDate` is written by moveGridFocusTo, which sets it from the DATE
+     * before moving focus rather than reading it back off a focus event. That
+     * ordering is what makes the arrow keys correct across a month boundary —
+     * verified 2026-09-25 by driving real keys: Sep 27 → Oct 4 → Oct 11 with the
+     * tab stop and focus agreeing at every step, including the view change.
+     * rel-date-picker moves by grid INDEX instead and lands on the wrong date
+     * there; see the note on its getRovingIndex. Do not "simplify" this to a
+     * focus listener — lit reuses the same cell elements across the re-render, so
+     * the focused element does not change and no focus event fires.
+     *
+     * Still open for BOTH calendars: focus arriving from a click or from Tab does
+     * not update the rove, only the arrow keys do. Deferred from 1.4.9 as a
+     * shared ticket, since fixing one calendar alone reintroduces the divergence
+     * the shared period-page module exists to prevent.
      */
     private getRovingIso;
     private handleGridKeydown;
@@ -1633,6 +1693,9 @@ type Orientation = "horizontal" | "vertical";
 type StepperSize = "small" | "large";
 /** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
 type StepperType = "default" | "dot" | "number" | "icon";
+/** How the line BETWEEN steps is drawn (Figma ".Line Types"). Distinct from
+ *  `StepperType`, which is the indicator disc — both spell one value "dot". */
+type StepperConnector = "solid" | "dot";
 /** Figma "Typel": label placement relative to the indicator. */
 type LabelPlacement = "top" | "centered" | "inverted";
 interface Step {
@@ -1673,8 +1736,26 @@ declare class RelStepper extends LitElement {
      * with `--rel-stepper-connector-length` instead. Logs a one-time notice.
      */
     size: StepperSize;
-    /** Figma "Type" axis — what the indicator shows: `default` (step number, check mark once done), `dot` (8px dot, no glyph), `number` (always the number) or `icon` (always the check mark). */
+    /**
+     * Figma "Type" axis — what the INDICATOR shows: `default` (step number, check
+     * mark once done), `dot` (8px dot, no glyph), `number` (always the number) or
+     * `icon` (always the check mark).
+     *
+     * Note `type="dot"` and `connector="dot"` are different axes that both use the
+     * word "dot": this one replaces the numbered disc, `connector` dashes the line
+     * BETWEEN discs. They are independent and can be combined.
+     */
     type: StepperType;
+    /**
+     * Figma ".Line Types" axis — how the connector line between steps is drawn:
+     * `solid` (default, an unbroken 1px rule) or `dot` (a 1px rule dashed 2px on,
+     * 2px off).
+     *
+     * Not to be confused with `type="dot"`, which is the INDICATOR disc. This axis
+     * only ever affects the line between steps, and it applies to both
+     * orientations.
+     */
+    connector: StepperConnector;
     /** Figma "Typel" axis — where the label sits: `top` (top-aligned beside the indicator), `centered` (vertically centred beside it) or `inverted` (indicator above the label). When unset, the deprecated `textAlign` prop drives the layout (`below` ≈ `inverted`, `right` ≈ `centered`). Figma marks Top + Horizontal as an unsupported combination. */
     labelPlacement?: LabelPlacement;
     static styles: lit.CSSResult;
@@ -1725,17 +1806,20 @@ declare class RelRadio extends LitElement {
     /** Layout axis of the option list. `"vertical"` (default) stacks options in
      *  a column; `"horizontal"` lays them out in a wrapping row. */
     orientation: Orientation;
-    /** Control scale. `"medium"` (default, Figma M) = 20px control with body-lg
-     *  labels; `"large"` (Figma L) = 24px control with body-xl labels;
-     *  `"small"` = 16px control with body-md labels. `sm` / `md` / `lg` are
+    /** Control scale, matching Figma's Size axis. `"small"` and `"medium"`
+     *  (default) both draw a 20px control — they differ by TYPE, body-md labels
+     *  against body-lg — and `"large"` steps the control to 24px with body-xl
+     *  labels. Supporting text sits one body step below the label at every
+     *  size (body-sm / md / lg, i.e. 12 / 14 / 16px). `sm` / `md` / `lg` are
      *  alternative spellings and stay supported — normalised to the full words,
      *  not deprecated.
      *
-     *  DELIBERATE FIGMA DIVERGENCE on Small. Figma's `.Radio Control` has one
-     *  size (20x20) and its row variants pin Small AND Medium to 20, so the two
-     *  rendered identically and the Size axis did nothing between them. 16px is
-     *  not invented: it is rel-checkbox's Small, and checkbox is radio's sibling
-     *  selection control. See the size ramp in the styles below. */
+     *  Small and Medium sharing a control is Figma's design, not an oversight:
+     *  verified against the live Published DS file on 2026-09-25, `.Radio
+     *  Control` measures 20x20 in all 15 Small variants and all 15 Medium ones.
+     *  v1.4.8 briefly gave Small its own 16px control on the mistaken premise
+     *  that the ramp was 16/20/24; 1.4.9 reverts that. Do not reintroduce it
+     *  without re-reading the live file. */
     size: RadioSizeInput;
     /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
      *  supporting text on its own line under the row, indented past the control;
@@ -1773,6 +1857,11 @@ declare class RelRadio extends LitElement {
     private _onTouched;
     static styles: lit.CSSResult;
     protected willUpdate(changed: PropertyValues<this>): void;
+    /** Whether the author wrote `density` themselves, as opposed to inheriting
+     *  the default. Read once at connect: Lit reflects during update, which is
+     *  after this runs, so the attribute is present here only if authored. */
+    private densityExplicit;
+    connectedCallback(): void;
     /** Trailing has no compact layout in the spec — trailing wins. */
     private get effectiveDensity();
     private onChange;
@@ -1875,7 +1964,7 @@ declare class RelMenu extends LitElement {
     private _items;
     /** Stable id prefix for aria-activedescendant targets. */
     private menuId;
-    static readonly _css = "\n    :host {\n      color: var(--rel-text-default);\n      display: inline-block;\n    }\n\n    .rel-menu {\n      position: relative;\n      display: inline-block;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      /* Audit 17: 8px (border-radius/sm), was 16px; Figma Menu (6326:2931) = shadow/md */\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      /* 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    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    /* 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    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 0;\n    }\n\n    /* Rows follow Figma \".Menu Item\" (6326:616) per size:\n       Large  48px = pad 12/12 + body-lg (24 line-height)\n       Medium 40px = pad 8/12  + body-md (22)\n       Small  32px = pad 4/8   + body-sm (20)\n       (audit 17a \u2014 before 1.4.7 every row was 36px: pad 8/12 + a 20px line-height) */\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-md);\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n      line-height: var(--rel-body-lg-regular-line-height);\n      min-height: 48px;\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\n      box-sizing: border-box;\n      /* Figma strokes every item with --rel-border-subtle. Drawn as an inset\n         shadow on the BOTTOM edge only (the pattern rel-menubar already uses)\n         so the rows read as a divided list rather than 45 boxed cells, and so\n         it costs no layout height. */\n      box-shadow: inset 0 calc(-1 * var(--rel-stroke-sm)) 0 var(--rel-border-subtle);\n    }\n\n    .rel-menu-item:last-child {\n      box-shadow: none;\n    }\n\n    /* Light-DOM component: :host never matches here, so size rules key off the\n       reflected attribute on the <rel-menu> element itself. */\n    rel-menu[size=\"medium\"] .rel-menu,\n    rel-menu[size=\"medium\"] .rel-submenu {\n      font-family: var(--rel-body-md-regular-font-family);\n      font-weight: var(--rel-body-md-regular-font-weight);\n      font-size: var(--rel-body-md-regular-font-size);\n      line-height: var(--rel-body-md-regular-line-height);\n      letter-spacing: var(--rel-body-md-regular-letter-spacing);\n    }\n\n    /* Figma Medium / Small frames are fixed at 40 / 32 (content sums to 38 / 28) */\n    rel-menu[size=\"medium\"] .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-md-regular-line-height);\n      min-height: 40px;\n    }\n\n    rel-menu[size=\"small\"] .rel-menu,\n    rel-menu[size=\"small\"] .rel-submenu {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n    }\n\n    rel-menu[size=\"small\"] .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n      line-height: var(--rel-body-sm-regular-line-height);\n      min-height: 32px;\n    }\n\n    /* First/last items carry the menu's outer radius so their hover fill clips\n       to the rounded corners (replaces the removed overflow:hidden). */\n    .rel-menu > .rel-menu-item:first-child {\n      border-top-left-radius: var(--rel-border-radius-sm);\n      border-top-right-radius: var(--rel-border-radius-sm);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-sm);\n      border-bottom-right-radius: var(--rel-border-radius-sm);\n    }\n\n    /* Figma states (6326:616): Hover = action overlay 0.05, Pressed = 0.10\n       (nearest token: overlay-pressed), Active/selected list row = the hover\n       overlay + medium label; Checkbox / Select Option rows keep no fill when\n       selected. Disabled = 40% opacity. (audit 17) */\n    .rel-menu-item:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-action-overlay-pressed);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    /* The active weight bump follows the row's own size, and applies to plain\n       rows only \u2014 a checkbox row carries its state in the control, and Figma\n       does not bold its label. */\n    .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    rel-menu[size=\"medium\"] .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-md-medium-font-weight);\n    }\n\n    /* Small's active row is Figma's mixed tuple: an xs-medium WEIGHT with\n       sm-medium METRICS on the sm-regular family. Large and Medium step only\n       their weight and keep regular metrics, which is why they are one line\n       each and this one is four. */\n    rel-menu[size=\"small\"] .rel-menu:not(.type-checkbox) .rel-menu-item.active {\n      font-weight: var(--rel-body-xs-medium-font-weight);\n      font-size: var(--rel-body-sm-medium-font-size);\n      line-height: var(--rel-body-sm-medium-line-height);\n      letter-spacing: var(--rel-body-sm-medium-letter-spacing);\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active,\n    .rel-menu.type-select-option .rel-menu-item.active {\n      background: transparent;\n    }\n\n    .rel-menu.type-checkbox .rel-menu-item.active:hover,\n    .rel-menu.type-select-option .rel-menu-item.active:hover {\n      background: var(--rel-action-overlay-hover);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      opacity: 0.4;\n      /* Keep the item pointer-interactive so cursor:not-allowed actually\n         renders; clicks are already neutralised by the item.disabled guard in\n         onItemClick/onItemEnter. pointer-events:none here would make the row\n         transparent to the pointer and suppress the cursor. */\n      cursor: not-allowed;\n    }\n\n    /* [data-focused] (presence, not =\"true\"): the ?data-focused boolean\n       binding renders the attribute with an EMPTY value, so a =\"true\"\n       selector never matches. */\n    /* Inset ring: items run the full width of the panel and butt against its\n       padding, so an outside ring would cross the panel edge. rel-menu has no\n       State=Focused variant in Figma; kept deliberately. */\n    .rel-menu-item[data-focused] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit). BOTH are 300px wide \u2014\n       COMPONENT \"Type=Fixed\" is 300x500 sizing=FIXED/FIXED and\n       COMPONENT \"Type=Fit\" is 300x48 sizing=FIXED/HUG \u2014 so the axis varies the\n       HEIGHT, not the width: Fixed pins a scrolling panel, Fit hugs its rows.\n       This had it inverted: fit varied the width (max-content) and neither mode\n       constrained the height, so the two modes differed on the wrong dimension. */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      height: var(--rel-menu-height, 500px);\n      overflow-y: auto;\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses.\n\n       No opacity here: verified against the live Figma file, \"Chevron Right\"\n       is opacity 1 on both the instance and its vector, on every State and\n       Size, bound to the same colour variable as the row label beside it.\n       The 0.6 that used to sit here dulled it to a mid grey.\n\n       The colour is declared rather than inherited on purpose. rel-menu\n       renders to the LIGHT DOM (createRenderRoot returns this), so these\n       selectors are unscoped globals and an inherited colour would travel\n       through the consumer's page cascade \u2014 an app setting a colour on any\n       ancestor would have been repainting this chevron. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      color: var(--rel-text-default);\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    /* No border: the flyout is the same surface as the parent menu, which has\n       none \u2014 overlapping surfaces are separated by shadow. Min-width tracks the\n       parent's 300px rather than a narrower 200px. */\n    .rel-submenu {\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 300px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-md);\n      /* padding:0 + overflow:hidden \u2014 safe here (a submenu has no further nested\n         flyout to clip) \u2014 so sub-item hovers fill fully and clip to the corners */\n      padding: 0;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      z-index: 20;\n    }\n\n    .rel-submenu.visible {\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-sm) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"medium\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n    }\n\n    rel-menu[size=\"small\"] .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -2438,8 +2527,10 @@ type SelectOption = string | SelectOptionObject;
  * @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 floating label, the panel and its sticky header
+ * @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
@@ -2458,6 +2549,7 @@ type SelectOption = string | SelectOptionObject;
  * @cssprop --rel-select-divider - Hairline under the search field, the Select-all row and every option row
  * @cssprop --rel-select-option-hover - Background of the hovered / keyboard-highlighted / selected option and Select-all row
  * @cssprop --rel-select-option-pressed - Background of an option row while it is being pressed
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  */
 declare class RelSelect extends LitElement {
     /** Visible label. Rendered above the trigger (`labelStyle="default"`) or floating inside it; omitted under `labelStyle="none"`. */
@@ -2596,11 +2688,30 @@ declare class RelSelect extends LitElement {
      * through their own padding and min-height.
      */
     private get optionCheckboxSize();
+    /** Native tooltip carrying the row's full text. Both lines truncate to one
+     *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+     *  by sight; hovering the row reveals it. Only rows that carry a second line
+     *  get one, so plain lists do not sprout tooltips. */
+    private rowTitle;
     private get selectAllStatus();
     private addGlobalListeners;
     private removeGlobalListeners;
     private onOutsidePointerDown;
     private onPageScroll;
+    /**
+     * BOTH events fire, deliberately — do not delete either.
+     *
+     * This repo is split down the middle on the convention, not inconsistent in
+     * one place: rel-select and rel-segmented-button emit `changed`, while
+     * rel-switch, rel-checkbox and rel-radio emit `rel-change`. Renaming
+     * `changed` would break every existing rel-select consumer, so 1.4.9 adds
+     * the prefixed name alongside it rather than moving anyone. New code should
+     * listen for `rel-change`; `changed` stays for as long as 1.x does.
+     *
+     * One `detail` object is shared by both dispatches so the two events cannot
+     * drift apart — a listener on one sees exactly what a listener on the other
+     * sees.
+     */
     private emitChange;
     private openListbox;
     private closeListbox;
@@ -3133,6 +3244,7 @@ declare class RelTab extends LitElement {
  * @csspart option - Each hour / minute / second / AM-PM entry button
  * @csspart footer - The Now / Cancel / OK row
  * @csspart helper - The helper / error text live region under the field
+ * @cssprop --rel-overlay-fallback-z - z-index of the panel on the NO-POPOVER-API fallback path only. Wherever the browser top layer is available the panel is promoted into it and this value is inert, because top-layer elements are not in the page stacking order at all. Shared with rel-select, rel-autocomplete and the other pickers so the whole overlay family can be moved from one place; default 1001.
  * @fires rel-focus - Fired when the text input receives focus. No detail.
  */
 declare class RelTimePicker extends LitElement {
@@ -3204,6 +3316,7 @@ declare class RelTimePicker extends LitElement {
     private showTopLayer;
     private hideTopLayer;
     private onReposition;
+    private onPageScroll;
     private updatePopoverPosition;
     /** Focus the selected (or first enabled) option in the columns. */
     private focusPanelSelection;
@@ -3791,4 +3904,4 @@ type Politeness = "polite" | "assertive";
  */
 declare function announce(message: string, politeness?: Politeness): void;
 
-export { type AlertTone, type AlertToneAlias, type AlertToneInput, type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type 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 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 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 };