@reliability-design/web 1.4.4 → 1.4.6

package/dist/index.d.ts

@@ -11,6 +11,8 @@ declare class RelAccordion extends LitElement {
     /** Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. */
     appearance: "shadow" | "plain";
     static styles: lit.CSSResult;
+    /** Stable id prefix wiring the header to its panel. */
+    private accordionId;
     private toggle;
     render(): lit_html.TemplateResult<1>;
 }
@@ -34,6 +36,13 @@ declare class RelAlert extends LitElement {
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
 type TextFieldVariant = "default" | "underline" | "legend";
+/**
+ * How the prefix block is drawn (Figma `.Preffix` → Style):
+ *   - `"clear"`   — bare icon/text, no separator (the legacy `leftIcon` look)
+ *   - `"divider"` — hairline between the prefix and the input
+ *   - `"fill"`    — tinted block flush with the control's left edge
+ */
+type TextFieldPrefixStyle = "clear" | "divider" | "fill";
 /**
  * How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
  * and `<rel-autocomplete>` so the three stay in step.
@@ -55,6 +64,17 @@ declare class RelTextfield extends LitElement {
     clickableRightIcon: boolean;
     /** Accessible label for the trailing icon when it is clickable. */
     rightIconAriaLabel?: string;
+    /** Short text rendered before the input, e.g. `"http://"` or `"$"`. Sits in
+     *  the same prefix block as `prefixIcon` and is styled by `prefixStyle`. */
+    prefixText?: string;
+    /** Visual treatment of the prefix block — applies to the prefix icon, text
+     *  and slotted `prefix` content alike. See `TextFieldPrefixStyle`. */
+    prefixStyle: TextFieldPrefixStyle;
+    /** Short text rendered after the input, e.g. `"kg"` or `".00"`. Shares the
+     *  suffix block with `rightIcon` and slotted `suffix` content. */
+    suffixText?: string;
+    /** Draws a hairline between the input and the suffix block. */
+    suffixDivider: boolean;
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
@@ -89,7 +109,10 @@ declare class RelTextfield extends LitElement {
     name?: string;
     fullWidth: boolean;
     private internalState;
+    /** Whether the `prefix` / `suffix` named slots currently have content. */
+    private slotted;
     private _wasError;
+    private _prefixObserver?;
     private uniqueId;
     private get isDisabled();
     private get isError();
@@ -101,6 +124,14 @@ declare class RelTextfield extends LitElement {
     private get labelHidden();
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    /** Clicking the (non-interactive) prefix/suffix area focuses the input, as a
+     *  label would. Clickable icons and slotted controls keep their own clicks. */
+    private handleAffixClick;
+    /** Publishes the prefix block's width as --_rel-tf-prefix-w on its parent so
+     *  the floated label can slide back over a clear-style prefix (see CSS). */
+    private observePrefix;
     willUpdate(changed: PropertyValues<this>): void;
     private _warnedNoName;
     updated(): void;
@@ -200,6 +231,8 @@ declare class RelAutocomplete extends LitElement {
     static styles: lit.CSSResult;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
+    private wasLoading;
+    protected updated(): void;
     /** Full normalized source list (remote results while searchFn drives, else items). */
     private get allItems();
     private normalizeItem;
@@ -219,6 +252,7 @@ declare class RelAutocomplete extends LitElement {
     /** Re-evaluates whether the panel should be showing for the current state. */
     private syncPanel;
     private onFieldInput;
+    private announceResults;
     private runSearch;
     private selectItem;
     /** Silent commit when typed text exactly matches an item (label or value, case-insensitive). */
@@ -226,6 +260,7 @@ declare class RelAutocomplete extends LitElement {
     private emitChanged;
     private clear;
     private onKeyDown;
+    private announceHighlighted;
     private onFocusIn;
     private onFocusOut;
     /** Delegates focus to the inner textfield. */
@@ -275,6 +310,7 @@ declare class RelBadge extends LitElement {
     textColor: string;
     static styles: lit.CSSResult;
     private get classes();
+    private get computedAriaLabel();
     updated(changedProperties: Map<PropertyKey, unknown>): void;
     render(): lit_html.TemplateResult<1>;
 }
@@ -352,10 +388,21 @@ declare class RelCalendar extends LitElement {
     private getCalendarDays;
     private getWeekdayLabels;
     private getMonthName;
+    private dayLabelFormatter;
+    private dayLabelLocale;
+    private formatDayLabel;
+    private announceMonth;
     private previousMonth;
     private nextMonth;
     private selectDay;
     private handleKeyDown;
+    /**
+     * Index of the single grid cell carrying tabindex="0". 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.
+     */
+    private getRovingIndex;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -402,6 +449,7 @@ declare class RelCarousel extends LitElement {
     private prefersReducedMotion;
     private clonesBefore;
     private _silentJumping;
+    private _autoplayTick;
     private _ro?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
@@ -424,6 +472,8 @@ declare class RelCarousel extends LitElement {
     private handlePointerMove;
     private handlePointerUp;
     private handleKeyDown;
+    private handleFocusIn;
+    private handleFocusOut;
     private handleMouseEnter;
     private handleMouseLeave;
     updated(changedProperties: Map<string, any>): void;
@@ -523,6 +573,17 @@ declare class RelDatePicker extends LitElement {
     private focusedDate;
     private yearDropdownOpen;
     private monthDropdownOpen;
+    /** Uncommitted typed text; null → the input shows the committed value. */
+    private inputText;
+    /** Parse/range error message for the typed text (cleared on next input). */
+    private inputError;
+    /**
+     * Whether the next popover open should move focus into the calendar grid.
+     * Icon-click / ArrowDown / external `open` do (previous behavior); opening
+     * by clicking into the text input must NOT, or typing would be impossible.
+     */
+    private focusPanelOnOpen;
+    private triggerInput?;
     private triggerButton?;
     private popoverElement?;
     private calendarGrid?;
@@ -532,6 +593,12 @@ declare class RelDatePicker extends LitElement {
     private handleClickOutside;
     private handleEscapeKey;
     updated(changedProperties: Map<string, any>): void;
+    private showTopLayer;
+    private hideTopLayer;
+    private onReposition;
+    private updatePopoverPosition;
+    /** Focus the roving day cell (selected day, else today, else first). */
+    private focusPanelSelection;
     private parseISODate;
     private formatISODate;
     private formatDisplayDate;
@@ -540,6 +607,10 @@ declare class RelDatePicker extends LitElement {
     private getCalendarDays;
     private getWeekdayLabels;
     private getMonthName;
+    private dayLabelFormatter;
+    private dayLabelLocale;
+    private formatDayLabel;
+    private announceMonth;
     private getMonthsList;
     private getYearsList;
     private toggleCalendarPopover;
@@ -547,13 +618,43 @@ declare class RelDatePicker extends LitElement {
     private previousMonth;
     private nextMonth;
     private selectDay;
+    /** Commit a date: set value, reset typed text/error, fire rel-change. */
+    private commitDate;
     private clearValue;
-    private handleTriggerKeydown;
+    /** Ambiguous "a/b" day/month order: display format wins, then locale. */
+    private get dayFirst();
+    /**
+     * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+     * text keeps the field in an error state with the text preserved for
+     * correction; the committed value is untouched (Escape reverts the text).
+     */
+    private commitTypedValue;
+    /** Today ± offset days, committed directly (T shortcuts / popover chips). */
+    private applyDayOffsetShortcut;
+    private handleInputInput;
+    private handleInputKeydown;
+    /** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
+    private handleFieldClick;
+    /** The calendar icon toggles the popover with the previous focus behavior. */
+    private handleIconClick;
+    /** Commit typed text when focus leaves the component entirely. */
+    private handleInputBlur;
+    /** T inside the panel (grid/header focus) applies Today directly. */
+    private handlePanelKeydown;
     private handleDayKeydown;
     private toggleMonthDropdown;
     private toggleYearDropdown;
+    private handleDropdownTriggerKeydown;
+    private focusOpenDropdownSelection;
+    private handleDropdownKeydown;
     private selectMonth;
     private selectYear;
+    /**
+     * 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.
+     */
+    private getRovingIndex;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -575,6 +676,7 @@ declare class RelRangePicker extends LitElement {
     maxHeight: string;
     placeholder: string;
     triggerVariant: "default" | "icon";
+    clearable: boolean;
     private draftFrom;
     private draftTo;
     private draftActivePreset;
@@ -582,7 +684,13 @@ declare class RelRangePicker extends LitElement {
     private viewMonth;
     private isSelectingRange;
     private hoverDate;
-    private triggerButton?;
+    /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
+    private focusedDate;
+    /** Uncommitted typed text; null → the input shows the committed range. */
+    private inputText;
+    /** Parse/range error message for the typed text (cleared on next input). */
+    private inputError;
+    private triggerInput?;
     private popoverEl?;
     private backdropEl?;
     static styles: lit.CSSResult;
@@ -600,6 +708,31 @@ declare class RelRangePicker extends LitElement {
     private cancelPopover;
     private applySelection;
     private resetDraft;
+    private clearRange;
+    /**
+     * Parse "date → date" text into an ISO from/to pair, or null. Each side
+     * goes through rel-date-picker's parseDateInput, so ISO / numeric /
+     * month-name dates and the t / t±N shortcuts all work per side.
+     * Separators: "→", "..", spaced "-", or the word "to" ("t - t+7",
+     * "21/7 to 28/7"). A single date yields a one-day range. Reversed input
+     * is normalized (from ≤ to). dayFirst is hard-coded false because the
+     * displayed format is always MM/DD/YYYY.
+     */
+    private parseRangeText;
+    /**
+     * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+     * text keeps the field in an error state with the text preserved for
+     * correction; the committed range is untouched (Escape reverts the text).
+     */
+    private commitTypedValue;
+    private handleInputInput;
+    private handleInputKeydown;
+    /** Clicking anywhere on the field opens the panel (never closes). */
+    private handleFieldClick;
+    /** The calendar icon toggles the panel (previous trigger behavior). */
+    private handleIconClick;
+    /** Commit typed text when focus leaves the component entirely. */
+    private handleInputBlur;
     private getTriggerLabel;
     /** Formatted "MM/DD/YYYY → MM/DD/YYYY" (or single date / "") for the current committed `from`/`to`. */
     get displayLabel(): string;
@@ -613,10 +746,20 @@ declare class RelRangePicker extends LitElement {
     private previousMonth;
     private nextMonth;
     private getMonthName;
+    private dayLabelFormatter;
+    private formatDayLabel;
     private getWeekdayLabels;
     private getCalendarDays;
     private handleDayClick;
     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.
+     */
+    private getRovingIso;
+    private handleGridKeydown;
+    private moveGridFocusTo;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -651,6 +794,12 @@ declare class RelChip extends LitElement {
     static styles: lit.CSSResult;
     private get classes();
     private handleRemove;
+    /** The chip body is announced as a button, so it must also act on keys:
+     *  Enter/Space re-dispatch as a host click (consumers' @click handlers
+     *  fire), Delete/Backspace remove when removable, and arrow keys ask the
+     *  container to reorder a draggable chip (`chip-move`) — the keyboard
+     *  alternative to pointer drag-and-drop. */
+    private handleKeydown;
     private onDragStart;
     private onDragEnd;
     protected updated(changed: Map<string, unknown>): void;
@@ -723,7 +872,6 @@ declare class RelDrawer extends LitElement {
     private handleClose;
     private lockScroll;
     private unlockScroll;
-    private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
     private handleCloseButtonClick;
@@ -804,6 +952,7 @@ declare class RelStepper extends LitElement {
     private isProgress;
     private isDisabled;
     private getStepClasses;
+    private onStepKeyDown;
     private onStepClick;
     private renderIndicator;
     render(): lit_html.TemplateResult<1>;
@@ -814,30 +963,56 @@ interface RadioOption {
     label: string;
     supportingText?: string;
     disabled?: boolean;
+    /** rel-icon name rendered before the label (Figma Has Icon/Avatar, Type=Icon). */
+    icon?: string;
+    /** 1–2 initials rendered as a circular chip before the label (Type=Avatar).
+     *  Ignored when `icon` is also set. */
+    avatar?: string;
 }
+type RadioSize = "small" | "medium" | "large";
+type RadioDensity = "compact" | "comfortable";
+type RadioAlignment = "leading" | "trailing";
 declare class RelRadio extends LitElement {
     options: RadioOption[];
     name: string;
     /** 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) = 20px circle with body-lg labels;
-     *  `"small"` = 16px circle with body-md labels. */
-    size: "small" | "medium";
+    /** Control scale (Figma Size). `"medium"` (default, Figma M) = 20px control
+     *  with body-lg labels; `"large"` (Figma L) = 24px control with body-xl
+     *  labels; `"small"` (Figma S) = 20px control with body-md labels — S and M
+     *  share the control size in the spec, only typography steps down. */
+    size: RadioSize;
+    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+     *  supporting text on its own line under the row, indented past the control;
+     *  `"comfortable"` stacks label + supporting text beside the control. */
+    density: RadioDensity;
+    /** Control position (Figma Layout). `"leading"` (default) renders the
+     *  control before the label; `"trailing"` pushes it to the far edge of the
+     *  row. Trailing has no compact layout in the spec, so it always renders
+     *  with comfortable density. Meant for vertical orientation — trailing
+     *  options stretch to the group's full width. */
+    alignment: RadioAlignment;
     selectedValue: string | null;
     disabled: boolean;
     error: boolean;
     errorMessage: string;
+    /** Accessible name for the radiogroup (it renders no visible group label). */
+    fieldAriaLabel?: string;
     value: string;
     checked: boolean;
     private _onChange;
     private _onTouched;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Trailing has no compact layout in the spec — trailing wins. */
+    private get effectiveDensity();
     private onChange;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
     writeValue(value: string): void;
     private get hasSelection();
+    private renderPrefix;
     private renderOption;
     render(): lit_html.TemplateResult<1>;
 }
@@ -863,8 +1038,12 @@ declare class RelMenu extends LitElement {
     type: MenuType;
     items: MenuItem[];
     private focusedIndex;
+    /** Index inside the open submenu that virtual focus sits on; -1 = main list. */
+    private subFocusedIndex;
     private _items;
-    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      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\n      min-width: 220px;\n      /* No vertical padding: items fill edge-to-edge so a first/last-item hover\n         reaches the menu's top/bottom. NOT overflow:hidden \u2014 that clips the\n         type=arrow flyout (position:absolute at left:100%). Instead the first\n         and last items carry the outer corner radius so hover backgrounds clip\n         to the rounded shape without any overflow. */\n      padding: 0;\n      outline: none;\n      overflow: visible;\n      font-family: var(--rel-body-lg-regular-font-family);\n      font-weight: var(--rel-body-lg-regular-font-weight);\n      font-size: var(--rel-body-lg-regular-font-size);\n      line-height: var(--rel-body-lg-regular-line-height);\n      letter-spacing: var(--rel-body-lg-regular-letter-spacing);\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 2px;\n    }\n\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-xs);\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-sm-regular-line-height);\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\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-md);\n      border-top-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-md);\n      border-bottom-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu-item:hover {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-bg-neutral-elevated-2);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      color: var(--rel-text-disabled);\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    .rel-menu-item[data-focused=\"true\"] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit) */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      min-width: 0;\n      width: max-content;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    .rel-submenu {\n      border: 1px solid var(--rel-border-subtle);\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 200px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\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-xs) var(--rel-spacing-sm);\n    }\n  ";
+    /** 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      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\n      min-width: 220px;\n      /* No vertical padding: items fill edge-to-edge so a first/last-item hover\n         reaches the menu's top/bottom. NOT overflow:hidden \u2014 that clips the\n         type=arrow flyout (position:absolute at left:100%). Instead the first\n         and last items carry the outer corner radius so hover backgrounds clip\n         to the rounded shape without any overflow. */\n      padding: 0;\n      outline: none;\n      overflow: visible;\n      font-family: var(--rel-body-lg-regular-font-family);\n      font-weight: var(--rel-body-lg-regular-font-weight);\n      font-size: var(--rel-body-lg-regular-font-size);\n      line-height: var(--rel-body-lg-regular-line-height);\n      letter-spacing: var(--rel-body-lg-regular-letter-spacing);\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 2px;\n    }\n\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-xs);\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-sm-regular-line-height);\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\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-md);\n      border-top-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-md);\n      border-bottom-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu-item:hover {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-bg-neutral-elevated-2);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      color: var(--rel-text-disabled);\n      /* Keep the item pointer-interactive so cursor:not-allowed actually\n         renders; clicks are already neutralised by the item.disabled guard in\n         onItemClick/onItemEnter. pointer-events:none here would make the row\n         transparent to the pointer and suppress the cursor. */\n      cursor: not-allowed;\n    }\n\n    /* [data-focused] (presence, not =\"true\"): the ?data-focused boolean\n       binding renders the attribute with an EMPTY value, so a =\"true\"\n       selector never matches. */\n    .rel-menu-item[data-focused] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit) */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      min-width: 0;\n      width: max-content;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    .rel-submenu {\n      border: 1px solid var(--rel-border-subtle);\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 200px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\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-xs) var(--rel-spacing-sm);\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -876,19 +1055,35 @@ declare class RelMenu extends LitElement {
     private onItemLeave;
     private onItemClick;
     private onSubClick;
+    /** Keyboard-open locks the submenu (no hover-out to close it) and moves
+     *  virtual focus onto its first entry. */
+    private openSubmenuAt;
+    private closeSubmenus;
     private onKeydown;
     private renderMenuItem;
     render(): lit_html.TemplateResult<1>;
 }
 
 declare class RelMenubar extends LitElement {
+    /**
+     * Opt-in: actually BIND the keys declared via data-shortcut (e.g.
+     * data-shortcut="Ctrl+Z"), not just display them. "Ctrl" matches Cmd on
+     * Apple platforms when written as "Mod". Keystrokes originating in
+     * inputs/textareas/contenteditable are ignored.
+     */
+    bindShortcuts: boolean;
     private menus;
     private openMenuIndex;
     private focusedTriggerIndex;
     private focusedItemIndex;
+    /** Virtual-focus index inside the open submenu; -1 = focus is in the panel. */
+    private focusedSubItemIndex;
     private openSubmenuElement;
     private hoverSwitchEnabled;
     private _onScroll?;
+    /** 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    }\n\n    rel-menubar-menu {\n      display: none;\n    }\n\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-bg-surface-elevated);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\n      overflow: hidden;\n      padding: 0;\n      gap: var(--rel-spacing-3xs);\n      height: 40px;\n      width: fit-content;\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    .menubar-trigger {\n      display: flex;\n      align-items: center;\n      align-self: stretch;\n      height: 100%;\n      padding: 0 var(--rel-spacing-sm);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--rel-text-label);\n      transition: background 0.15s ease;\n      user-select: none;\n      outline: none;\n    }\n\n    .menubar-trigger:hover,\n    .menubar-trigger.active {\n      background: var(--rel-bg-neutral-elevated-2);\n    }\n\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 2px;\n    }\n\n    .menubar-panel {\n      position: fixed;\n      min-width: 220px;\n      background: var(--rel-bg-surface);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1000;\n      display: none;\n    }\n\n    .menubar-panel.open {\n      display: block;\n    }\n\n    .menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--rel-spacing-sm);\n      padding: var(--rel-spacing-xs) var(--rel-spacing-md);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-text-label);\n      line-height: var(--rel-body-sm-regular-line-height);\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-bg-neutral-elevated-2);\n    }\n\n    .menu-item[data-disabled=\"true\"] {\n      opacity: 0.5;\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    rel-icon {\n      display: inline-flex;\n      pointer-events: none;\n    }\n\n    .menu-submenu-trigger {\n      position: relative;\n    }\n\n    .menu-submenu-trigger rel-icon {\n      opacity: 0.6;\n    }\n\n    .submenu-panel {\n      position: fixed;\n      min-width: 200px;\n      background: var(--rel-bg-surface);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1001;\n      display: none;\n    }\n\n    .submenu-panel.open {\n      display: block;\n    }\n\n    .menu-shortcut {\n      opacity: 0.6;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-3xs);\n      font-family: var(--rel-body-xs-regular-font-family);\n      font-weight: var(--rel-body-xs-regular-font-weight);\n      font-size: var(--rel-body-xs-regular-font-size);\n      line-height: var(--rel-body-xs-regular-line-height);\n      letter-spacing: var(--rel-body-xs-regular-letter-spacing);\n    }\n\n    .menubar-panel rel-checkbox {\n      display: block;\n      width: 100%;\n      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);\n      box-sizing: border-box;\n      cursor: pointer;\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
@@ -896,17 +1091,24 @@ declare class RelMenubar extends LitElement {
     private _repositionOpenSubmenu;
     private _repositionOpenMenu;
     private discoverMenus;
+    private handleShortcutKeyDown;
     private handleOutsideClick;
     private closeAllMenus;
+    /** Close everything and put DOM focus back on the trigger that owned the
+     *  open menu. (Capturing the index BEFORE closing — closeAllMenus resets
+     *  openMenuIndex to -1, which used to drop focus to <body>.) */
+    private closeAllMenusAndRefocusTrigger;
     private openMenu;
     private handleTriggerClick;
     private handleTriggerMouseEnter;
     private handleTriggerKeyDown;
     private focusTrigger;
     private handlePanelKeyDown;
+    private getSubmenuItems;
     private getFocusableItems;
     private focusMenuItem;
     private handleItemClick;
+    private dispatchSelectEvent;
     private openSubmenu;
     private handleSubmenuItemClick;
     private dispatchChangeEvent;
@@ -938,7 +1140,7 @@ declare class RelNavbar extends LitElement {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use a plain
- * `<a>`/logo markup inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `<a>`/logo markup inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarBrand extends LitElement {
     src: string;
@@ -955,7 +1157,7 @@ declare global {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-button` elements inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarActions extends LitElement {
     static styles: lit.CSSResult;
@@ -969,7 +1171,7 @@ declare global {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` (icon variant) elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-button` (icon variant) elements inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarUtilities extends LitElement {
     static styles: lit.CSSResult;
@@ -983,7 +1185,7 @@ declare global {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`
- * for the mobile nav panel in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * for the mobile nav panel in the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarMobilePanel extends LitElement {
     static styles: lit.CSSResult;
@@ -997,7 +1199,7 @@ declare global {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
- * `rel-popover` for nav dropdowns in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-popover` for nav dropdowns in the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarDropdown extends LitElement {
     static styles: lit.CSSResult;
@@ -1011,7 +1213,7 @@ declare global {
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
- * item slots or `rel-popover` content in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * item slots or `rel-popover` content in the "Navbar" recipe at /docs/recipes/navbar.
  */
 declare class RelTopbarDropdownItem extends LitElement {
     label: string;
@@ -1034,7 +1236,7 @@ type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
  *
  * @deprecated This component's fixed slot structure, hardcoded breakpoint,
  * and built-in overflow logic are too rigid for most real layouts. Use the
- * "App Topbar" recipe at /docs/recipes/app-topbar instead, composed from
+ * "Navbar" recipe at /docs/recipes/navbar instead, composed from
  * rel-menu/rel-popover, rel-drawer, and rel-button. Still supported, but
  * will be removed in a future major version.
  *
@@ -1087,8 +1289,7 @@ declare class RelTopbar extends LitElement {
 /**
  * `rel-topbar-item` — A navigation item within rel-topbar.
  *
- * @deprecated Part of the deprecated rel-topbar family. Use the "App
- * Topbar" recipe at /docs/recipes/app-topbar, which composes nav links and
+ * @deprecated Part of the deprecated rel-topbar family. Use the "Navbar" recipe at /docs/recipes/navbar, which composes nav links and
  * `rel-menu`/`rel-popover` dropdowns directly instead of a dedicated item component.
  *
  * Renders as an `<a>` when `href` is supplied, otherwise a `<button>`.
@@ -1138,7 +1339,7 @@ type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
  * `rel-topbar-profile` — Profile / user tile for the topbar right region.
  *
  * @deprecated Part of the deprecated rel-topbar family. Compose `rel-avatar`
- * directly inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * directly inside the "Navbar" recipe at /docs/recipes/navbar.
  *
  * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
  * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
@@ -1279,8 +1480,18 @@ declare class RelPopover extends LitElement {
     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;
@@ -1314,10 +1525,12 @@ type ProgressMode = "linear-determinate" | "linear-indeterminate" | "circular-de
 declare class RelProgress extends LitElement {
     mode: ProgressMode;
     value: number;
+    label: string;
     private radius;
     private circumference;
     static styles: lit.CSSResult;
     private get safeValue();
+    private get accessibleName();
     private renderLinearDeterminate;
     private renderLinearIndeterminate;
     private renderCircularDeterminate;
@@ -1404,8 +1617,13 @@ declare class RelSegmentedButton extends LitElement {
     active: string;
     size: SegmentSize;
     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;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1459,6 +1677,10 @@ declare class RelSelect extends LitElement {
     noSearch: boolean;
     private open;
     private highlightedIndex;
+    /** Virtual highlight on the Select-All header row (multi mode). */
+    private selectAllHighlighted;
+    private typeaheadBuffer;
+    private typeaheadTimer;
     private panelStyle;
     private searchValue;
     private internalState;
@@ -1515,6 +1737,12 @@ declare class RelSelect extends LitElement {
     private onSearchInput;
     private onSearchKeyDown;
     private handleListNavigation;
+    /** APG typeahead for the no-search mode (with a search field, typing
+     *  filters instead). Accumulates printable keys for 500 ms and jumps the
+     *  highlight to the next option whose label starts with the buffer. */
+    private handleTypeahead;
+    private activateHighlighted;
+    private scrollHighlightedIntoView;
     private renderChips;
     /**
      * Hidden, unconstrained copy of every selected chip used purely for width
@@ -1551,19 +1779,40 @@ declare global {
 }
 
 type ModalSide = "top" | "bottom" | "center";
+type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
 declare class RelModal extends LitElement {
     open: boolean;
     side: ModalSide;
     title: string;
     description: string;
+    /** Alias for `description`; rendered only when `description` is empty. */
+    subtitle: string;
     dismissible: boolean;
     modal: boolean;
+    /** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
+    size: ModalSize;
+    closeOnBackdropClick: boolean;
+    closeOnEscape: boolean;
+    showCloseButton: boolean;
+    /** Move focus into the panel when opened (modal mode only). */
+    autoFocus: boolean;
+    /** Return focus to the opener when closed. */
+    restoreFocus: boolean;
+    /** When false, the body no longer scrolls internally — tall content clips at the panel's max height. */
+    scrollable: boolean;
+    /** Shows a spinner overlay and blocks all interaction inside the panel. */
+    loading: boolean;
+    /** Blocks user-initiated closes (X / backdrop / Escape) and footer actions. */
+    disabled: boolean;
+    /** Stacking order of the whole modal (backdrop + panel). */
+    zIndex: number;
     /**
      * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
      * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
      */
     breakpoint: "responsive" | "web";
     private overlayElement;
+    private panelElement;
     private previousFocus;
     private originalBodyOverflow;
     private originalBodyPaddingRight;
@@ -1607,6 +1856,7 @@ declare class RelSlider extends LitElement {
     value: number;
     /** Upper value when type="range" (attribute value-end). */
     valueEnd: number;
+    fieldAriaLabel?: string;
     private ticks;
     private _onChange;
     private _onTouched;
@@ -1669,6 +1919,7 @@ declare class RelSwitch extends LitElement {
     checked: boolean;
     disabled: boolean;
     value: string;
+    fieldAriaLabel?: string;
     private _onChange;
     private _onTouched;
     private isFocused;
@@ -1706,11 +1957,14 @@ declare class RelTab extends LitElement {
     /** Tab size — styled via :host([size]) rules. */
     size: "sm" | "md" | "lg";
     private _tabItems;
+    /** Stable id prefix linking tabs to the shared tabpanel. */
+    private tabsId;
     static styles: lit.CSSResult;
     private _onSlotChange;
     private get _effectiveTabs();
     private selectTab;
     private onKeyDown;
+    private selectAndFocusTab;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -1722,19 +1976,27 @@ declare class RelTab extends LitElement {
  * column selections are held in draft state until Apply is clicked; Cancel,
  * Escape, or an outside click discards the draft.
  *
- * The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
- * `format`, so consumers get a consistent machine-readable string.
+ * The committed `value` is ALWAYS 24-hour "HH:mm" (or "HH:mm:ss" when
+ * `seconds` is enabled) regardless of the display `format`, so consumers get
+ * a consistent machine-readable string.
+ *
+ * Panel visuals follow the Figma "Time Picker" component (Reliability DS
+ * V1.0, node 8301:3771): fixed panel widths 220/250/280 by size, full-bleed
+ * columns with 1px dividers, neutral selected state, and a Now / Cancel / OK
+ * footer whose buttons are always size S.
  */
 declare class RelTimePicker extends LitElement {
-    /** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
+    /** Committed time, 24-hour "HH:mm" or "HH:mm:ss" (e.g. "09:30", "17:05:30"). */
     value: string | null;
     placeholder: string;
     label: string | null;
     disabled: boolean;
     required: boolean;
     readonly: boolean;
-    /** Display format of the trigger text and hour column. Value stays "HH:mm". */
+    /** Display format of the trigger text and hour column. Value stays 24-hour. */
     format: "12h" | "24h";
+    /** Shows the seconds column; committed value becomes "HH:mm:ss". */
+    seconds: boolean;
     /** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
     minuteStep: number;
     /** Earliest selectable time, "HH:mm" (inclusive). */
@@ -1754,7 +2016,20 @@ declare class RelTimePicker extends LitElement {
     fullWidth: boolean;
     private draftHour;
     private draftMinute;
+    private draftSecond;
+    /** Uncommitted typed text; null → the input shows the committed value. */
+    private inputText;
+    /** Parse/range error message for the typed text (cleared on next input). */
+    private inputError;
+    /**
+     * Whether the next popover open should move focus into the columns.
+     * Icon-click / ArrowDown / external `open` do (previous behavior); opening
+     * by clicking into the text input must NOT, or typing would be impossible.
+     */
+    private focusPanelOnOpen;
+    private triggerInput?;
     private triggerButton?;
+    private popoverElement?;
     private columnsElement?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
@@ -1762,6 +2037,12 @@ declare class RelTimePicker extends LitElement {
     private handleClickOutside;
     private handleEscapeKey;
     updated(changedProperties: Map<string, any>): void;
+    private showTopLayer;
+    private hideTopLayer;
+    private onReposition;
+    private updatePopoverPosition;
+    /** Focus the selected (or first enabled) option in the columns. */
+    private focusPanelSelection;
     private parseTime;
     private formatValue;
     private formatDisplay;
@@ -1777,6 +2058,8 @@ declare class RelTimePicker extends LitElement {
     private isPeriodEnabled;
     /** Hour column entries: display label + the 0–23 hour it maps to. */
     private getHourOptions;
+    /** Seconds shown in the seconds column (always step 1). */
+    private getSecondOptions;
     private get draftPeriod();
     private resetDraftFromValue;
     /** Snap the draft minute to the nearest valid step minute for the hour. */
@@ -1785,14 +2068,40 @@ declare class RelTimePicker extends LitElement {
     /** Close discarding the draft (Cancel / Escape / outside click). */
     private cancelPopover;
     private applySelection;
+    /** Commit a time: set value, reset typed text/error, fire rel-change. */
+    private commitTime;
     /** Set the draft to the current time, snapped to the minute step and range. */
     private selectNow;
     private clearValue;
+    /**
+     * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+     * text keeps the field in an error state with the text preserved for
+     * correction; the committed value is untouched (Escape reverts the text).
+     */
+    private commitTypedValue;
+    /** "Now", committed directly (N shortcut / popover chip), clamped to range. */
+    private applyNowShortcut;
     private selectHour;
     private selectMinute;
+    private selectSecond;
     private selectPeriod;
+    /**
+     * Scrolls the column's own scroll container only. scrollIntoView is off
+     * limits here: it walks ALL scrollable ancestors, so it yanked the page
+     * up/down whenever a column recentred (user-reported jump bug).
+     */
+    private scrollOptionInColumn;
     private scrollColumnsToSelection;
-    private handleTriggerKeydown;
+    private handleInputInput;
+    private handleInputKeydown;
+    /** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
+    private handleFieldClick;
+    /** The clock icon toggles the popover with the previous focus behavior. */
+    private handleIconClick;
+    /** Commit typed text when focus leaves the component entirely. */
+    private handleInputBlur;
+    /** N inside the panel (columns/footer focus) applies Now directly. */
+    private handlePanelKeydown;
     /**
      * Column navigation: Up/Down move within the column (and select), Left/Right
      * jump between columns, Home/End go to the first/last option, Enter applies.
@@ -1835,6 +2144,12 @@ declare class RelTooltip extends LitElement {
     type: TooltipType;
     private uniqueId;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** APG: Escape dismisses the tooltip. Not swallowed — an enclosing dialog
+     *  may legitimately close on the same keystroke. */
+    private onKeydown;
+    private clearDismissed;
     firstUpdated(): void;
     private linkTrigger;
     render(): lit_html.TemplateResult<1>;
@@ -1950,6 +2265,8 @@ declare class RelUpload extends LitElement {
     private aborter?;
     private delayTimer?;
     private lastSignature;
+    private lastHeading;
+    private lastAlertText;
     static styles: lit.CSSResult;
     /**
      * Aggregate state. Read-only; corresponds to the Figma modal variants.
@@ -2074,4 +2391,125 @@ declare global {
     }
 }
 
-export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext };
+/**
+ * Shared focus utilities (shadow-DOM aware).
+ *
+ * Most components in this package render into shadow roots, so the classic
+ * `container.querySelectorAll(focusableSelector)` + `document.activeElement`
+ * approach silently fails in two ways:
+ *   1. querySelectorAll never descends into child components' shadow roots,
+ *      so slotted rel-buttons etc. are invisible to a focus trap.
+ *   2. document.activeElement retargets to the outermost host, so equality
+ *      checks against inner elements never match.
+ * These helpers traverse the *composed* tree and resolve the *deep* active
+ * element instead.
+ */
+/**
+ * All keyboard-focusable elements under `root`, in composed tree order —
+ * descends into shadow roots and follows slot assignment.
+ */
+declare function getFocusableElements(root: Element | ShadowRoot): HTMLElement[];
+/** The actually-focused element, resolved through nested shadow roots. */
+declare function getDeepActiveElement(): HTMLElement | null;
+/**
+ * Keep Tab / Shift+Tab cycling inside `container`. Call from a keydown
+ * listener; no-op for non-Tab keys. If focus has already escaped the
+ * container, the next Tab pulls it back in.
+ */
+declare function trapTabKey(e: KeyboardEvent, container: Element | ShadowRoot): void;
+/**
+ * Reusable focus trap for dialog-like components (drawer, modal, popover…).
+ *
+ *   private trap = new FocusTrap(() => this.panelEl);
+ *   onOpen()  { this.trap.activate(); }
+ *   onClose() { this.trap.deactivate(); }
+ *
+ * activate() records the previously focused element, moves focus to the
+ * first focusable inside the container (or the container itself), and wraps
+ * Tab at the edges. deactivate() restores focus to where it was.
+ */
+declare class FocusTrap {
+    private getContainer;
+    private previousFocus;
+    private active;
+    constructor(getContainer: () => Element | ShadowRoot | null);
+    activate(options?: {
+        initialFocus?: HTMLElement | null;
+    }): void;
+    deactivate(options?: {
+        restoreFocus?: boolean;
+    }): void;
+    private onKeyDown;
+}
+
+/**
+ * Shared keyboard-shortcut utilities.
+ *
+ * Shortcut strings are written as "+"-joined tokens, e.g. "mod+b",
+ * "ctrl+shift+p", "escape". The "mod" token means Cmd on Apple platforms
+ * and Ctrl everywhere else (this is the pattern rel-sidebar's Ctrl/Cmd+B
+ * toggle established). Matching is case-insensitive.
+ */
+type ShortcutHandler = (e: KeyboardEvent) => void;
+interface ParsedShortcut {
+    key: string;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+}
+declare function isApplePlatform(): boolean;
+declare function parseShortcut(shortcut: string): ParsedShortcut;
+/** Does this keydown event match the shortcut string? */
+declare function matchesShortcut(e: KeyboardEvent, shortcut: string): boolean;
+/**
+ * True when the event originates from a text-editing context (input,
+ * textarea, select, contenteditable) — global single-key shortcuts should
+ * stay out of the way there. Uses composedPath so it sees through shadow
+ * roots (e.g. the real <input> inside rel-textfield).
+ */
+declare function isEditableTarget(e: Event): boolean;
+interface BindShortcutOptions {
+    /** Listen on this target instead of `document`. */
+    target?: EventTarget;
+    /** Fire even when focus is in an input/textarea/contenteditable. */
+    allowInEditable?: boolean;
+    /** preventDefault on match (default true). */
+    preventDefault?: boolean;
+}
+/**
+ * Bind a shortcut, returns the unbind function.
+ *
+ *   private unbind = bindShortcut("mod+b", () => this.toggle());
+ *   disconnectedCallback() { this.unbind(); }
+ */
+declare function bindShortcut(shortcut: string, handler: ShortcutHandler, options?: BindShortcutOptions): () => void;
+/**
+ * Display labels for a shortcut, one entry per key — feed straight into
+ * <rel-kbd-group .items=${formatShortcutParts("mod+b")}>.
+ * Platform-aware: "mod+b" → ["⌘","B"] on Apple, ["Ctrl","B"] elsewhere.
+ */
+declare function formatShortcutParts(shortcut: string): string[];
+
+/**
+ * Shared screen-reader announcer.
+ *
+ * Maintains two persistent, visually-hidden live regions on document.body
+ * (one polite, one assertive). Because the regions exist before any message
+ * is written into them, text changes are reliably announced — unlike live
+ * regions that are inserted into the DOM at the same moment as their content,
+ * which most screen reader / browser pairs ignore.
+ *
+ * Messages are written on a short delay after clearing the region so that
+ * repeating the same string (e.g. two identical toasts in a row) is
+ * re-announced instead of deduplicated by the browser's accessibility tree.
+ */
+type Politeness = "polite" | "assertive";
+/**
+ * Announce a message to screen reader users without moving focus.
+ * Use "assertive" only for time-sensitive information (errors); everything
+ * else should be "polite" so it does not interrupt the user mid-word.
+ */
+declare function announce(message: string, politeness?: Politeness): void;
+
+export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BindShortcutOptions, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, FocusTrap, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type ModalSize, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type ShortcutHandler, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldPrefixStyle, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, 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 };