@reliability-design/web 1.4.3 → 1.4.5

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>;
 }
@@ -213,6 +215,8 @@ declare class RelAutocomplete extends LitElement {
     private onPageScroll;
     private openPanel;
     private closePanel;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     /** Re-evaluates whether the panel should be showing for the current state. */
     private syncPanel;
@@ -354,6 +358,13 @@ declare class RelCalendar extends LitElement {
     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>;
 }
 
@@ -422,6 +433,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;
@@ -443,6 +456,9 @@ declare class RelCardMedia extends LitElement {
 
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+type CheckboxSize = "small" | "medium";
+type CheckboxDensity = "compact" | "comfortable";
+type CheckboxAlignment = "leading" | "trailing";
 declare class RelCheckbox extends LitElement {
     label: string;
     /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
@@ -451,11 +467,26 @@ declare class RelCheckbox extends LitElement {
     state: CheckboxState;
     status: CheckboxStatus;
     value: string;
+    /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
+     *  label; `"small"` = 14px box with body-md label. */
+    size: CheckboxSize;
+    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+     *  supporting text on its own line under the row, indented past the box;
+     *  `"comfortable"` stacks label + supporting text beside the box. */
+    density: CheckboxDensity;
+    /** Box position (Figma Alignment). `"leading"` (default) renders the box
+     *  before the label; `"trailing"` pushes it to the far edge of the row.
+     *  Trailing has no compact layout in the spec, so it always renders with
+     *  comfortable density. */
+    alignment: CheckboxAlignment;
     get checked(): boolean;
     set checked(val: boolean);
     private _onChange;
     private _onTouched;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Trailing has no compact layout in the spec — trailing wins. */
+    private get effectiveDensity();
     private toggle;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -532,8 +563,17 @@ declare class RelDatePicker extends LitElement {
     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>;
 }
 
@@ -562,11 +602,19 @@ declare class RelRangePicker extends LitElement {
     private viewMonth;
     private isSelectingRange;
     private hoverDate;
+    /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
+    private focusedDate;
     private triggerButton?;
+    private popoverEl?;
+    private backdropEl?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private showTopLayer;
+    private hideTopLayer;
+    private onReposition;
+    private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
@@ -591,6 +639,14 @@ declare class RelRangePicker extends LitElement {
     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 {
@@ -625,6 +681,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;
@@ -697,7 +759,6 @@ declare class RelDrawer extends LitElement {
     private handleClose;
     private lockScroll;
     private unlockScroll;
-    private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
     private handleCloseButtonClick;
@@ -778,6 +839,7 @@ declare class RelStepper extends LitElement {
     private isProgress;
     private isDisabled;
     private getStepClasses;
+    private onStepKeyDown;
     private onStepClick;
     private renderIndicator;
     render(): lit_html.TemplateResult<1>;
@@ -837,8 +899,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;
@@ -850,19 +916,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;
@@ -870,17 +952,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;
@@ -912,7 +1001,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;
@@ -929,7 +1018,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;
@@ -943,7 +1032,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;
@@ -957,7 +1046,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;
@@ -971,7 +1060,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;
@@ -985,7 +1074,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;
@@ -1008,7 +1097,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.
  *
@@ -1061,8 +1150,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>`.
@@ -1112,7 +1200,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.
@@ -1212,6 +1300,9 @@ declare class RelPagination extends LitElement {
     private get activePage();
     private get computedTotalPages();
     private generatePageNumbers;
+    /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+        Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+    private formatPageLabel;
     private handlePageChange;
     private renderChevronLeft;
     private renderChevronRight;
@@ -1250,6 +1341,7 @@ declare class RelPopover extends LitElement {
     private get activeOpen();
     private setOpen;
     private onHostPointerDown;
+    private onHostKeyDown;
     private onOpen;
     private onClose;
     private showNativePopover;
@@ -1377,6 +1469,9 @@ declare class RelSegmentedButton extends LitElement {
     align: SegmentAlign;
     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>;
 }
@@ -1430,6 +1525,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;
@@ -1474,6 +1573,8 @@ declare class RelSelect extends LitElement {
     private emitChange;
     private openListbox;
     private closeListbox;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     private selectSingleOption;
     private toggleMultiOption;
@@ -1484,6 +1585,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
@@ -1533,6 +1640,7 @@ declare class RelModal extends LitElement {
      */
     breakpoint: "responsive" | "web";
     private overlayElement;
+    private panelElement;
     private previousFocus;
     private originalBodyOverflow;
     private originalBodyPaddingRight;
@@ -1675,11 +1783,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>;
 }
 
@@ -1691,19 +1802,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). */
@@ -1723,6 +1842,9 @@ declare class RelTimePicker extends LitElement {
     fullWidth: boolean;
     private draftHour;
     private draftMinute;
+    private draftSecond;
+    /** Panel opens above the field when there is no viewport space below. */
+    private openUp;
     private triggerButton?;
     private columnsElement?;
     static styles: lit.CSSResult;
@@ -1731,6 +1853,8 @@ declare class RelTimePicker extends LitElement {
     private handleClickOutside;
     private handleEscapeKey;
     updated(changedProperties: Map<string, any>): void;
+    /** Open upward when the panel doesn't fit below but does fit above. */
+    private updatePanelPlacement;
     private parseTime;
     private formatValue;
     private formatDisplay;
@@ -1746,6 +1870,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. */
@@ -1759,7 +1885,14 @@ declare class RelTimePicker extends LitElement {
     private clearValue;
     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;
     /**
@@ -1804,9 +1937,349 @@ 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>;
 }
 
-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, 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 };
+/** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
+type UploadStatus = "ready" | "uploading" | "success" | "error";
+/**
+ * Aggregate state, derived from `files` — never set directly. Drives the list
+ * heading, the alert, and the footer button in `<rel-upload-actions>`, and
+ * corresponds to the Figma "Upload Modal" variants.
+ */
+type UploadPhase = "empty" | "selected" | "uploading" | "delayed" | "failed";
+interface UploadFile {
+    /** Stable identity for keyed rendering and remove/retry targeting. */
+    id: string;
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    status: UploadStatus;
+    /** 0–100, present while uploading and after success. */
+    progress?: number;
+    /** Bytes transferred so far. */
+    loaded?: number;
+    /** Human-readable failure reason, e.g. "file exceeds the 10 MB limit". */
+    error?: string;
+    /** The underlying File. Absent when the app supplies `files` itself. */
+    file?: File;
+}
+interface UploadRejection {
+    name: string;
+    reason: "format" | "size";
+    message: string;
+}
+interface UploaderContext {
+    /** The entry being uploaded. */
+    file: UploadFile;
+    /** Aborted when `cancel()` is called. */
+    signal: AbortSignal;
+    /** Report bytes transferred. `total` defaults to the file size. */
+    onProgress: (loaded: number, total?: number) => void;
+}
+/** Supply this to let `<rel-upload>` drive the whole lifecycle itself. */
+type Uploader = (file: File, ctx: UploaderContext) => Promise<void>;
+/** Snapshot handed to `<rel-upload-actions>` on every `rel-state` event. */
+interface UploadState {
+    phase: UploadPhase;
+    total: number;
+    failed: number;
+    canUpload: boolean;
+    primaryLabel: string;
+}
+/**
+ * `<rel-upload>` — dropzone plus per-file upload list.
+ *
+ * Two modes, chosen by whether `uploader` is set:
+ *
+ * - **Controlled** (default): the component picks and validates files, then
+ *   emits intents (`rel-upload`, `rel-retry`, `rel-cancel`, `rel-remove`). The
+ *   app performs the transfer and writes progress back onto `files`.
+ * - **Self-driving**: with an `uploader` function the component runs the whole
+ *   batch itself — concurrency, progress, the delay warning, abort and retry.
+ *
+ * The Cancel / Upload buttons are NOT rendered here. They live in
+ * `<rel-upload-actions>` so they can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while this body scrolls.
+ *
+ * Emits (bubbling + composed):
+ *   - `rel-files-added`  — `{ added: UploadFile[], rejected: UploadRejection[] }`
+ *   - `rel-invalid`      — `{ rejected: UploadRejection[] }`
+ *   - `rel-change`       — selection changed; `{ files: UploadFile[] }`
+ *   - `rel-remove`       — row removed; `{ id, file }`
+ *   - `rel-upload`       — Upload pressed; `{ files: UploadFile[] }`
+ *   - `rel-retry`        — Retry pressed; `{ files: UploadFile[] }`
+ *   - `rel-cancel`       — Cancel pressed
+ *   - `rel-progress`     — `{ id, progress, loaded, total }`
+ *   - `rel-file-complete`— `{ id, file }`
+ *   - `rel-file-error`   — `{ id, file, error }`
+ *   - `rel-complete`     — batch settled; `{ succeeded, failed }`
+ *   - `rel-state`        — derived snapshot changed; `detail: UploadState`
+ *
+ * @element rel-upload
+ */
+declare class RelUpload extends LitElement {
+    /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
+    accept: string;
+    /** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
+    maxSize: string;
+    /** Allow more than one file. */
+    multiple: boolean;
+    /** Disables the whole control. */
+    disabled: boolean;
+    /** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
+    hint: string;
+    /** Dropzone headline. */
+    dropzoneTitle: string;
+    /** Browse button label. */
+    browseLabel: string;
+    /**
+     * The file list. Set it to drive the component in controlled mode; the
+     * component also maintains it itself as files are added and removed.
+     */
+    files: UploadFile[];
+    /** Supply to run uploads internally. See {@link Uploader}. */
+    uploader?: Uploader;
+    /** Max files transferred at once in self-driving mode. */
+    concurrency: number;
+    /** ms of continuous uploading before the "taking longer than usual" alert. */
+    delayThreshold: number;
+    private dragOver;
+    private delayed;
+    private inputEl;
+    private aborter?;
+    private delayTimer?;
+    private lastSignature;
+    static styles: lit.CSSResult;
+    /**
+     * Aggregate state. Read-only; corresponds to the Figma modal variants.
+     *
+     * `failed` means there is nothing left to send AND something errored — while
+     * any row is still `ready` the primary action is Upload, not Retry.
+     */
+    get phase(): UploadPhase;
+    /** Files still eligible to be sent. */
+    private get pending();
+    private get failedFiles();
+    /**
+     * Failed rows worth sending again. A file rejected by `accept`/`max-size`
+     * will fail validation every time, so retrying it is pointless — re-check
+     * rather than re-queueing it blindly.
+     */
+    private get retryable();
+    get canUpload(): boolean;
+    /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
+    get primaryLabel(): string;
+    /** The snapshot `<rel-upload-actions>` renders from. */
+    get state(): UploadState;
+    private get listHeading();
+    private get hintText();
+    private get acceptDisplay();
+    private get alertContent();
+    private parseMaxBytes;
+    private matchesAccept;
+    static fmtSize(bytes: number): string;
+    private static ext;
+    /**
+     * Validate and append. Invalid files are kept as `error` rows rather than
+     * dropped — that is how the Figma Failure state surfaces them.
+     */
+    private ingest;
+    private patch;
+    private startDelayTimer;
+    private stopDelayTimer;
+    private runBatch;
+    /** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
+    upload(): void;
+    /** Re-queue every retryable failed row and send again. */
+    retry(): void;
+    /** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
+    cancel(): void;
+    /** Remove one row by id. */
+    removeFile(id: string): void;
+    /** Clear everything and abort in-flight transfers. */
+    reset(): void;
+    private emit;
+    /**
+     * Emit `rel-state` only when the derived snapshot actually changes, so
+     * progress ticks don't spam `<rel-upload-actions>`.
+     */
+    private notify;
+    private openPicker;
+    private onInputChange;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private rowMeta;
+    private renderRow;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload": RelUpload;
+    }
+}
+
+/**
+ * `<rel-upload-actions>` — the Cancel / Upload footer for `<rel-upload>`.
+ *
+ * Lives outside `<rel-upload>` so it can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while the upload body scrolls. It mirrors the sibling
+ * `<rel-upload>`'s derived state, so the button label follows the design:
+ * "Upload" → "Upload 3 files" → spinner → "Retry upload".
+ *
+ * ```html
+ * <rel-modal open side="center" title="Upload documents">
+ *   <rel-upload multiple .uploader=${fn}></rel-upload>
+ *   <rel-upload-actions slot="footer"></rel-upload-actions>
+ * </rel-modal>
+ * ```
+ *
+ * The target is found automatically among its siblings. Use `for` to point at a
+ * specific `<rel-upload>` by id when a container holds more than one.
+ *
+ * @element rel-upload-actions
+ */
+declare class RelUploadActions extends LitElement {
+    /** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
+    for: string;
+    /** Cancel button label. */
+    cancelLabel: string;
+    /** Hides Cancel for flows that only ever move forward. */
+    noCancel: boolean;
+    private snapshot;
+    private target;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Listen on our own root rather than `document`: a shared root means no
+     * shadow boundary sits between us and the sibling `<rel-upload>`, so
+     * `event.target` is never retargeted away from it.
+     */
+    private get root();
+    private resolveTarget;
+    private onState;
+    private onCancel;
+    private onPrimary;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload-actions": RelUploadActions;
+    }
+}
+
+/**
+ * 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[];
+
+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 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 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, bindShortcut, formatShortcutParts, getDeepActiveElement, getFocusableElements, isApplePlatform, isEditableTarget, matchesShortcut, parseShortcut, trapTabKey };