@reliability-design/web 1.4.4 → 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>;
 }
@@ -356,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>;
 }
 
@@ -424,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;
@@ -552,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>;
 }
 
@@ -582,6 +602,8 @@ 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?;
@@ -617,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 {
@@ -651,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;
@@ -723,7 +759,6 @@ declare class RelDrawer extends LitElement {
     private handleClose;
     private lockScroll;
     private unlockScroll;
-    private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
     private handleCloseButtonClick;
@@ -804,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>;
@@ -863,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;
@@ -876,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;
@@ -896,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;
@@ -938,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;
@@ -955,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;
@@ -969,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;
@@ -983,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;
@@ -997,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;
@@ -1011,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;
@@ -1034,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.
  *
@@ -1087,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>`.
@@ -1138,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.
@@ -1279,6 +1341,7 @@ declare class RelPopover extends LitElement {
     private get activeOpen();
     private setOpen;
     private onHostPointerDown;
+    private onHostKeyDown;
     private onOpen;
     private onClose;
     private showNativePopover;
@@ -1406,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>;
 }
@@ -1459,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;
@@ -1515,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
@@ -1564,6 +1640,7 @@ declare class RelModal extends LitElement {
      */
     breakpoint: "responsive" | "web";
     private overlayElement;
+    private panelElement;
     private previousFocus;
     private originalBodyOverflow;
     private originalBodyPaddingRight;
@@ -1706,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>;
 }
 
@@ -1722,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). */
@@ -1754,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;
@@ -1762,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;
@@ -1777,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. */
@@ -1790,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;
     /**
@@ -1835,6 +1937,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>;
@@ -2074,4 +2182,104 @@ 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[];
+
+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 };