@reliability-design/web 1.4.4 → 1.4.5

package/dist/index.js

@@ -29,6 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FocusTrap: () => FocusTrap,
   RelAccordion: () => RelAccordion,
   RelAlert: () => RelAlert,
   RelAutocomplete: () => RelAutocomplete,
@@ -89,7 +90,16 @@ __export(index_exports, {
   RelTopbarProfile: () => RelTopbarProfile,
   RelTopbarUtilities: () => RelTopbarUtilities,
   RelUpload: () => RelUpload,
-  RelUploadActions: () => RelUploadActions
+  RelUploadActions: () => RelUploadActions,
+  bindShortcut: () => bindShortcut,
+  formatShortcutParts: () => formatShortcutParts,
+  getDeepActiveElement: () => getDeepActiveElement,
+  getFocusableElements: () => getFocusableElements,
+  isApplePlatform: () => isApplePlatform,
+  isEditableTarget: () => isEditableTarget,
+  matchesShortcut: () => matchesShortcut,
+  parseShortcut: () => parseShortcut,
+  trapTabKey: () => trapTabKey
 });
 module.exports = __toCommonJS(index_exports);
 var import_vars = require("./vars-XNMTSRVN.css");
@@ -106,6 +116,8 @@ var RelAccordion = class extends import_lit.LitElement {
     this.size = "md";
     this.type = "default";
     this.appearance = "shadow";
+    /** Stable id prefix wiring the header to its panel. */
+    this.accordionId = `rel-accordion-${Math.random().toString(36).slice(2)}`;
   }
   toggle() {
     this.open = !this.open;
@@ -122,9 +134,11 @@ var RelAccordion = class extends import_lit.LitElement {
       <div part="base" class="accordion">
         <div
           part="trigger" class="header"
+          id="${this.accordionId}-header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
+          aria-controls="${this.accordionId}-body"
           @click=${this.toggle}
           @keydown=${(e) => {
       if (e.key === "Enter" || e.key === " ") {
@@ -147,7 +161,14 @@ var RelAccordion = class extends import_lit.LitElement {
             </slot>
           </div>
         </div>
-        <div part="content" class="body ${this.open ? "open" : "closed"}">
+        <div
+          part="content"
+          class="body ${this.open ? "open" : "closed"}"
+          id="${this.accordionId}-body"
+          role="region"
+          aria-labelledby="${this.accordionId}-header"
+          ?inert=${!this.open}
+        >
           <slot></slot>
         </div>
       </div>
@@ -2837,9 +2858,12 @@ RelButton.styles = import_lit8.css`
       }
     }
 
-    /* Sizes */
+    /* Sizes. Min-widths come from the Figma Button master (S/M/L =
+       80/100/120) so short labels like "OK" keep a proper pill shape;
+       --rel-button-min-width lets a consumer override per instance. */
     .size-small {
       height: 32px;
+      min-width: var(--rel-button-min-width, 80px);
       padding: 0 var(--rel-spacing-sm);
       font-family: var(--rel-action-md-font-family);
       font-weight: var(--rel-action-md-font-weight);
@@ -2850,6 +2874,7 @@ RelButton.styles = import_lit8.css`
 
     .size-medium {
       height: 40px;
+      min-width: var(--rel-button-min-width, 100px);
       gap: var(--rel-spacing-xs);
       padding: 0 var(--rel-spacing-md);
       font-family: var(--rel-action-lg-font-family);
@@ -2861,6 +2886,7 @@ RelButton.styles = import_lit8.css`
 
     .size-large {
       height: 48px;
+      min-width: var(--rel-button-min-width, 120px);
       padding: 0 var(--rel-spacing-lg);
       font-family: var(--rel-action-xl-font-family);
       font-weight: var(--rel-action-xl-font-weight);
@@ -2967,6 +2993,11 @@ RelButton.styles = import_lit8.css`
       color: var(--rel-action-neutral-label-icons-ghost);
     }
 
+    /* Figma master: ghost S has a narrower 56px min than primary/outline. */
+    .btn-text.size-small {
+      min-width: var(--rel-button-min-width, 56px);
+    }
+
     .btn-text.tone-critical {
       color: var(--rel-action-danger-label-icons-ghost);
     }
@@ -2975,6 +3006,8 @@ RelButton.styles = import_lit8.css`
       background: transparent;
       color: var(--rel-action-neutral-label-icons-link);
       text-decoration: underline;
+      /* Links are inline actions — no minimum footprint in the Figma master. */
+      min-width: 0;
     }
 
     button.btn-link:hover:not(:disabled) {
@@ -3003,6 +3036,7 @@ RelButton.styles = import_lit8.css`
     /* Icon Only as an independent axis: square button of the current style */
     .btn-icon-only {
       padding: 0;
+      min-width: 0;
     }
 
     .btn-icon-only.size-small {
@@ -3021,6 +3055,7 @@ RelButton.styles = import_lit8.css`
       width: 40px;
       height: 40px;
       padding: 0;
+      min-width: 0;
       border-radius: 50%;
     }
     .btn-icon.tone-default {
@@ -3065,7 +3100,9 @@ RelButton.styles = import_lit8.css`
        .btn-text: ghost gets tone-accent hovers below (this generic grey overlay
        has higher specificity than the per-tone ghost rules and was overriding
        them, which is why every ghost hover looked grey). */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text) {
+    /* Link buttons change label color only (rule above) — the overlay fill
+       here would make a hovered link read as a ghost button. */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text):not(.btn-link) {
       background: var(--rel-action-overlay-hover);
     }
 
@@ -3417,9 +3454,28 @@ var RelCalendar = class extends import_lit9.LitElement {
       });
     }
   }
+  /**
+   * 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.
+   */
+  getRovingIndex(days) {
+    const candidates = [
+      this.focusedDate ? days.findIndex(
+        (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate)
+      ) : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled)
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
+  }
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
+    const rovingIndex = this.getRovingIndex(days);
     return import_lit9.html`
       <div role="grid" aria-label="Calendar">
         <div part="header" class="header">
@@ -3472,7 +3528,7 @@ var RelCalendar = class extends import_lit9.LitElement {
                 ?disabled=${day.isDisabled}
                 @click=${() => this.selectDay(day)}
                 @keydown=${(e) => this.handleKeyDown(e, day, index)}
-                tabindex="${day.isSelected || index === 0 && !this.focusedDate ? 0 : -1}"
+                tabindex="${index === rovingIndex ? 0 : -1}"
               >
                 ${day.day}
               </button>
@@ -3772,12 +3828,23 @@ var RelCarousel = class extends import_lit11.LitElement {
     // Number of clone slides prepended before the real slides
     this.clonesBefore = 0;
     this._silentJumping = false;
+    this.handleFocusIn = () => {
+      if (this.autoplay) this.stopAutoplay();
+    };
+    this.handleFocusOut = (e) => {
+      if (!this.autoplay) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;
+      this.startAutoplay();
+    };
   }
   connectedCallback() {
     super.connectedCallback();
     this.prefersReducedMotion = window.matchMedia(
       "(prefers-reduced-motion: reduce)"
     ).matches;
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
     if (this.autoplay) {
       this.startAutoplay();
     }
@@ -3809,6 +3876,8 @@ var RelCarousel = class extends import_lit11.LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
     this._ro?.disconnect();
     this.stopAutoplay();
     if (this.animationId) {
@@ -4123,6 +4192,7 @@ var RelCarousel = class extends import_lit11.LitElement {
                       class="dot ${i === this.value ? "active" : ""}"
                       part="dot"
                       aria-label="Go to slide ${i + 1}"
+                      aria-current="${i === this.value ? "true" : import_lit11.nothing}"
                       @click=${() => this.goToSlide(i)}
                     ></button>
                   `) : import_lit11.nothing}
@@ -4570,6 +4640,9 @@ var RelCheckbox = class extends import_lit13.LitElement {
         <label class="row">
           <input
             type="checkbox"
+            .checked=${this.status === "checked"}
+            .indeterminate=${this.status === "indeterminate"}
+            aria-checked="${this.status === "indeterminate" ? "mixed" : import_lit13.nothing}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
@@ -4908,6 +4981,109 @@ function formatDatePattern(date, pattern, locale = "en-US") {
   );
 }
 
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = [
+  'a[href]:not([tabindex="-1"])',
+  'button:not([disabled]):not([tabindex="-1"])',
+  'input:not([disabled]):not([tabindex="-1"])',
+  'select:not([disabled]):not([tabindex="-1"])',
+  'textarea:not([disabled]):not([tabindex="-1"])',
+  'audio[controls]:not([tabindex="-1"])',
+  'video[controls]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"]):not([tabindex="-1"])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(el) {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+}
+function getFocusableElements(root) {
+  const out = [];
+  const visit = (el) => {
+    if (el instanceof HTMLElement && el.matches(FOCUSABLE_SELECTOR) && isVisible(el)) {
+      out.push(el);
+    }
+    if (el instanceof HTMLSlotElement) {
+      el.assignedElements({ flatten: true }).forEach(visit);
+    } else if (el.shadowRoot) {
+      Array.from(el.shadowRoot.children).forEach(visit);
+    } else {
+      Array.from(el.children).forEach(visit);
+    }
+  };
+  const start = root instanceof ShadowRoot ? Array.from(root.children) : root.shadowRoot ? Array.from(root.shadowRoot.children) : Array.from(root.children);
+  start.forEach(visit);
+  return out;
+}
+function getDeepActiveElement() {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active instanceof HTMLElement ? active : null;
+}
+function trapTabKey(e, container) {
+  if (e.key !== "Tab") return;
+  const focusable = getFocusableElements(container);
+  if (focusable.length === 0) {
+    e.preventDefault();
+    return;
+  }
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  const active = getDeepActiveElement();
+  const inside = active ? focusable.includes(active) : false;
+  if (e.shiftKey) {
+    if (!inside || active === first) {
+      e.preventDefault();
+      last.focus();
+    }
+  } else {
+    if (!inside || active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+}
+var FocusTrap = class {
+  constructor(getContainer) {
+    this.getContainer = getContainer;
+    this.previousFocus = null;
+    this.active = false;
+    this.onKeyDown = (e) => {
+      const container = this.getContainer();
+      if (container) trapTabKey(e, container);
+    };
+  }
+  activate(options) {
+    if (this.active) return;
+    this.active = true;
+    this.previousFocus = getDeepActiveElement();
+    document.addEventListener("keydown", this.onKeyDown, true);
+    requestAnimationFrame(() => {
+      if (!this.active) return;
+      const container = this.getContainer();
+      if (!container) return;
+      const target = options?.initialFocus ?? getFocusableElements(container)[0] ?? null;
+      if (target) {
+        target.focus();
+      } else if (container instanceof HTMLElement) {
+        container.tabIndex = -1;
+        container.focus();
+      }
+    });
+  }
+  deactivate(options) {
+    if (!this.active) return;
+    this.active = false;
+    document.removeEventListener("keydown", this.onKeyDown, true);
+    const previous = this.previousFocus;
+    this.previousFocus = null;
+    if (options?.restoreFocus !== false && previous?.isConnected) {
+      requestAnimationFrame(() => previous.focus());
+    }
+  }
+};
+
 // src/components/rel-date-picker/rel-date-picker.ts
 var RelDatePicker = class extends import_lit14.LitElement {
   constructor() {
@@ -4945,9 +5121,58 @@ var RelDatePicker = class extends import_lit14.LitElement {
       }
     };
     this.handleEscapeKey = (e) => {
-      if (e.key === "Escape" && this.open) {
+      if (!this.open) return;
+      if (e.key === "Escape") {
         this.closeCalendarPopover();
+        return;
+      }
+      if (e.key === "Tab") {
+        const popover = this.renderRoot.querySelector(".popover");
+        if (popover) trapTabKey(e, popover);
+      }
+    };
+    this.handleDropdownKeydown = (e) => {
+      const menu = e.currentTarget;
+      const items = Array.from(
+        menu.querySelectorAll(".dropdown-item")
+      );
+      if (items.length === 0) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        const trigger = menu.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
+        this.monthDropdownOpen = false;
+        this.yearDropdownOpen = false;
+        trigger?.focus();
+        return;
+      }
+      if (e.key === "Tab") {
+        this.monthDropdownOpen = false;
+        this.yearDropdownOpen = false;
+        return;
+      }
+      const idx = items.indexOf(getDeepActiveElement());
+      let target;
+      switch (e.key) {
+        case "ArrowDown":
+          target = Math.min(items.length - 1, idx + 1);
+          break;
+        case "ArrowUp":
+          target = Math.max(0, idx - 1);
+          break;
+        case "Home":
+          target = 0;
+          break;
+        case "End":
+          target = items.length - 1;
+          break;
+        default:
+          return;
       }
+      e.preventDefault();
+      e.stopPropagation();
+      items[target]?.focus();
+      items[target]?.scrollIntoView({ block: "nearest" });
     };
   }
   // minDate/maxDate supersede the deprecated min/max aliases
@@ -4984,10 +5209,12 @@ var RelDatePicker = class extends import_lit14.LitElement {
     }
     if (changedProperties.has("open") && this.open) {
       setTimeout(() => {
-        const firstDay = this.calendarGrid?.querySelector(
+        const target = this.calendarGrid?.querySelector(
+          '.day-button[tabindex="0"]:not(:disabled)'
+        ) ?? this.calendarGrid?.querySelector(
           ".day-button:not(:disabled)"
         );
-        firstDay?.focus();
+        target?.focus();
       }, 100);
     }
   }
@@ -5285,27 +5512,67 @@ var RelDatePicker = class extends import_lit14.LitElement {
     e.stopPropagation();
     this.monthDropdownOpen = !this.monthDropdownOpen;
     this.yearDropdownOpen = false;
+    if (this.monthDropdownOpen) this.focusOpenDropdownSelection();
   }
   toggleYearDropdown(e) {
     e.stopPropagation();
     this.yearDropdownOpen = !this.yearDropdownOpen;
     this.monthDropdownOpen = false;
+    if (this.yearDropdownOpen) this.focusOpenDropdownSelection();
+  }
+  handleDropdownTriggerKeydown(e, kind) {
+    if (e.key !== "ArrowDown") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.monthDropdownOpen = kind === "month";
+    this.yearDropdownOpen = kind === "year";
+    this.focusOpenDropdownSelection();
+  }
+  async focusOpenDropdownSelection() {
+    await this.updateComplete;
+    const menu = this.renderRoot.querySelector(".dropdown-menu.open");
+    if (!menu) return;
+    const target = menu.querySelector(".dropdown-item.selected") ?? menu.querySelector(".dropdown-item");
+    target?.focus();
+    target?.scrollIntoView({ block: "nearest" });
   }
   selectMonth(month, e) {
     e.stopPropagation();
+    const trigger = e.target.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
     this.viewMonth = month;
     this.monthDropdownOpen = false;
+    this.updateComplete.then(() => trigger?.focus());
   }
   selectYear(year, e) {
     e.stopPropagation();
+    const trigger = e.target.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
     this.viewYear = year;
     this.yearDropdownOpen = false;
+    this.updateComplete.then(() => trigger?.focus());
+  }
+  /**
+   * 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.
+   */
+  getRovingIndex(days) {
+    const candidates = [
+      this.focusedDate ? days.findIndex(
+        (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate)
+      ) : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled)
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
   }
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
     const months = this.getMonthsList();
     const years = this.getYearsList();
+    const rovingIndex = this.getRovingIndex(days);
     const isError = this.error;
     const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
     const describedById = belowText ? "date-picker-desc" : void 0;
@@ -5392,22 +5659,31 @@ var RelDatePicker = class extends import_lit14.LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleMonthDropdown}
+                @keydown=${(e) => this.handleDropdownTriggerKeydown(e, "month")}
                 aria-label="Select month"
+                aria-haspopup="listbox"
                 aria-expanded=${this.monthDropdownOpen}
               >
                 ${this.getMonthName()}
               </button>
-              <div class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Month"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${months.map(
       (m) => import_lit14.html`
-                    <div
+                    <button
                       class="dropdown-item ${m.value === this.viewMonth ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e) => this.selectMonth(m.value, e)}
                       role="option"
                       aria-selected=${m.value === this.viewMonth}
                     >
                       ${m.label}
-                    </div>
+                    </button>
                   `
     )}
               </div>
@@ -5418,22 +5694,31 @@ var RelDatePicker = class extends import_lit14.LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleYearDropdown}
+                @keydown=${(e) => this.handleDropdownTriggerKeydown(e, "year")}
                 aria-label="Select year"
+                aria-haspopup="listbox"
                 aria-expanded=${this.yearDropdownOpen}
               >
                 ${this.viewYear}
               </button>
-              <div class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Year"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${years.map(
       (y) => import_lit14.html`
-                    <div
+                    <button
                       class="dropdown-item ${y === this.viewYear ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e) => this.selectYear(y, e)}
                       role="option"
                       aria-selected=${y === this.viewYear}
                     >
                       ${y}
-                    </div>
+                    </button>
                   `
     )}
               </div>
@@ -5476,7 +5761,7 @@ var RelDatePicker = class extends import_lit14.LitElement {
                   ?disabled=${day.isDisabled}
                   @click=${() => this.selectDay(day)}
                   @keydown=${(e) => this.handleDayKeydown(e, day, index)}
-                  tabindex="${day.isSelected || index === 0 && !this.value ? 0 : -1}"
+                  tabindex="${index === rovingIndex ? 0 : -1}"
                 >
                   ${day.day}
                 </button>
@@ -5770,6 +6055,11 @@ RelDatePicker.styles = import_lit14.css`
     }
 
     .dropdown-item {
+      display: block;
+      width: 100%;
+      border: none;
+      background: transparent;
+      text-align: left;
       padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       cursor: pointer;
       color: var(--rel-text-default);
@@ -5781,6 +6071,11 @@ RelDatePicker.styles = import_lit14.css`
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    .dropdown-item:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+    }
+
     .dropdown-item:hover {
       background: var(--rel-bg-surface-elevated);
     }
@@ -6009,6 +6304,7 @@ var RelRangePicker = class extends import_lit15.LitElement {
     this.viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
     this.onReposition = () => {
       if (this.open && this.mode === "popover") this.updatePopoverPosition();
     };
@@ -6065,6 +6361,69 @@ var RelRangePicker = class extends import_lit15.LitElement {
       const qs = this.getQuickSelects().find((q) => q.label === label);
       if (qs) this.selectQuickSelect(qs);
     };
+    this.handleGridKeydown = (e) => {
+      const cell = e.target.closest?.(".day-cell");
+      const iso = cell?.dataset.iso;
+      if (!iso) return;
+      const date = this.parseISODate(iso);
+      if (!date) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const isDisabled = this.isDateDisabled(date);
+        if (!isDisabled) {
+          this.handleDayClick({
+            date,
+            day: date.getDate(),
+            isCurrentMonth: true,
+            isToday: false,
+            isDraftFrom: false,
+            isDraftTo: false,
+            isInRange: false,
+            isDisabled,
+            isWeekend: false
+          });
+        }
+        return;
+      }
+      const next = new Date(date);
+      const dow = next.getDay();
+      switch (e.key) {
+        case "ArrowLeft":
+          next.setDate(next.getDate() - 1);
+          break;
+        case "ArrowRight":
+          next.setDate(next.getDate() + 1);
+          break;
+        case "ArrowUp":
+          next.setDate(next.getDate() - 7);
+          break;
+        case "ArrowDown":
+          next.setDate(next.getDate() + 7);
+          break;
+        case "Home":
+          next.setDate(
+            next.getDate() - (this.weekStart === "mon" ? dow === 0 ? 6 : dow - 1 : dow)
+          );
+          break;
+        case "End":
+          next.setDate(
+            next.getDate() + (this.weekStart === "mon" ? dow === 0 ? 0 : 7 - dow : 6 - dow)
+          );
+          break;
+        case "PageUp":
+          if (e.shiftKey) next.setFullYear(next.getFullYear() - 1);
+          else next.setMonth(next.getMonth() - 1);
+          break;
+        case "PageDown":
+          if (e.shiftKey) next.setFullYear(next.getFullYear() + 1);
+          else next.setMonth(next.getMonth() + 1);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      this.moveGridFocusTo(next);
+    };
   }
   // ── Lifecycle ──
   connectedCallback() {
@@ -6149,6 +6508,7 @@ var RelRangePicker = class extends import_lit15.LitElement {
     this.draftActivePreset = null;
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
     if (this.draftFrom) {
       const date = this.parseISODate(this.draftFrom);
       if (date) {
@@ -6447,10 +6807,45 @@ var RelRangePicker = class extends import_lit15.LitElement {
     if (!this.isSelectingRange || day.isDisabled) return;
     this.hoverDate = this.formatISODate(day.date);
   }
+  // ── Grid keyboard navigation (APG grid pattern) ──
+  /**
+   * 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.
+   */
+  getRovingIso(days) {
+    const inView = days.filter((d) => d.isCurrentMonth);
+    if (inView.length === 0) return "";
+    const candidates = [
+      this.focusedDate,
+      this.draftFrom,
+      this.formatISODate(/* @__PURE__ */ new Date())
+    ];
+    for (const iso of candidates) {
+      if (iso && inView.some((d) => this.formatISODate(d.date) === iso)) {
+        return iso;
+      }
+    }
+    const firstEnabled = inView.find((d) => !d.isDisabled) ?? inView[0];
+    return this.formatISODate(firstEnabled.date);
+  }
+  async moveGridFocusTo(date) {
+    this.focusedDate = this.formatISODate(date);
+    if (date.getMonth() !== this.viewMonth || date.getFullYear() !== this.viewYear) {
+      this.viewMonth = date.getMonth();
+      this.viewYear = date.getFullYear();
+    }
+    if (this.isSelectingRange && !this.isDateDisabled(date)) {
+      this.hoverDate = this.focusedDate;
+    }
+    await this.updateComplete;
+    this.renderRoot.querySelector(`.day-cell[data-iso="${this.focusedDate}"]`)?.focus();
+  }
   // ── Render ──
   render() {
     const quickSelects = this.getQuickSelects();
     const days = this.getCalendarDays();
+    const rovingIso = this.getRovingIso(days);
     const weekdayLabels = this.getWeekdayLabels();
     const draftFromDisplay = this.draftFrom ? this.formatDisplayDate(this.draftFrom) : "";
     const draftToDisplay = this.draftTo ? this.formatDisplayDate(this.draftTo) : "";
@@ -6579,8 +6974,10 @@ var RelRangePicker = class extends import_lit15.LitElement {
               @mouseleave=${() => {
       this.hoverDate = null;
     }}
+              @keydown=${this.handleGridKeydown}
             >
               ${days.map((day) => {
+      const iso = this.formatISODate(day.date);
       const cellClasses = [
         "day-cell",
         day.isInRange ? "in-range" : "",
@@ -6595,8 +6992,11 @@ var RelRangePicker = class extends import_lit15.LitElement {
                   <div
                     class="${cellClasses}"
                     role="gridcell"
-                    aria-label="${this.formatISODate(day.date)}"
+                    tabindex="${day.isCurrentMonth && iso === rovingIso ? 0 : -1}"
+                    data-iso="${iso}"
+                    aria-label="${iso}"
                     aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
+                    aria-disabled="${day.isDisabled ? "true" : import_lit15.nothing}"
                     @click=${() => this.handleDayClick(day)}
                     @mouseenter=${() => this.handleDayHover(day)}
                   >
@@ -6941,6 +7341,12 @@ RelRangePicker.styles = import_lit15.css`
       cursor: pointer;
     }
 
+    .day-cell:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+      z-index: 2;
+    }
+
     .day-cell.other-month {
       opacity: 0.35;
       pointer-events: none;
@@ -7116,6 +7522,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators15.state)()
 ], RelRangePicker.prototype, "hoverDate", 2);
+__decorateClass([
+  (0, import_decorators15.state)()
+], RelRangePicker.prototype, "focusedDate", 2);
 __decorateClass([
   (0, import_decorators15.query)(".trigger-button")
 ], RelRangePicker.prototype, "triggerButton", 2);
@@ -7145,6 +7554,33 @@ var RelChip = class extends import_lit16.LitElement {
     this.removed = false;
     this.draggableChip = false;
     this.dragging = false;
+    /** 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. */
+    this.handleKeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && this.removable) {
+        e.preventDefault();
+        this.handleRemove(e);
+        return;
+      }
+      if (this.draggableChip && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        e.preventDefault();
+        this.dispatchEvent(
+          new CustomEvent("chip-move", {
+            detail: { direction: e.key === "ArrowLeft" ? -1 : 1 },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
     this.onDragStart = (e) => {
       if (!this.draggableChip) return;
       this.dragging = true;
@@ -7198,6 +7634,7 @@ var RelChip = class extends import_lit16.LitElement {
         role="button"
         tabindex="0"
         aria-label="${this.label}"
+        @keydown=${this.handleKeydown}
       >
         ${showAvatar ? import_lit16.html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>` : null}
         ${showLeadingIcon ? import_lit16.html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>` : null}
@@ -7789,26 +8226,8 @@ var RelDrawer = class extends import_lit20.LitElement {
         this.close("escape");
         return;
       }
-      if (e.key === "Tab" && this.modal) {
-        const focusable = this.getFocusableElements();
-        if (focusable.length === 0) {
-          e.preventDefault();
-          return;
-        }
-        const firstFocusable = focusable[0];
-        const lastFocusable = focusable[focusable.length - 1];
-        const activeElement = document.activeElement;
-        if (e.shiftKey) {
-          if (activeElement === firstFocusable) {
-            e.preventDefault();
-            lastFocusable.focus();
-          }
-        } else {
-          if (activeElement === lastFocusable) {
-            e.preventDefault();
-            firstFocusable.focus();
-          }
-        }
+      if (e.key === "Tab" && this.modal && this.panelElement) {
+        trapTabKey(e, this.panelElement);
       }
     };
     // Drag-to-close handlers
@@ -7867,12 +8286,19 @@ var RelDrawer = class extends import_lit20.LitElement {
     }
   }
   handleOpen() {
-    this.previousFocus = document.activeElement;
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     if (this.modal) {
       this.updateComplete.then(() => {
-        const focusTarget = this.querySelector("[autofocus]") ?? this.querySelector(".close-button") ?? this.querySelector(".panel");
-        focusTarget?.focus();
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) {
+          focusTarget.focus();
+        } else {
+          panel.tabIndex = -1;
+          panel.focus();
+        }
       });
     }
     document.addEventListener("keydown", this.handleKeydown);
@@ -7934,29 +8360,6 @@ var RelDrawer = class extends import_lit20.LitElement {
     document.body.style.overflow = this.originalBodyOverflow;
     document.body.style.paddingRight = this.originalBodyPaddingRight;
   }
-  getFocusableElements() {
-    if (!this.panelElement) return [];
-    const selectors = [
-      "a[href]",
-      "button:not([disabled])",
-      "textarea:not([disabled])",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(",");
-    const elements = Array.from(
-      this.panelElement.querySelectorAll(selectors)
-    );
-    const slots = this.panelElement.querySelectorAll("slot");
-    slots.forEach((slot) => {
-      const assigned = slot.assignedElements({ flatten: true });
-      assigned.forEach((el) => {
-        const focusableInSlot = el.querySelectorAll(selectors);
-        elements.push(...Array.from(focusableInSlot));
-      });
-    });
-    return elements;
-  }
   handleOverlayClick(e) {
     if (!this.dismissible || !this.closeOnBackdrop) return;
     if (e.target === this.overlayElement) {
@@ -8967,12 +9370,16 @@ var RelMenu = class extends import_lit24.LitElement {
     this.type = "default";
     this.items = [];
     this.focusedIndex = 0;
+    this.subFocusedIndex = -1;
     this._items = [];
+    /** Stable id prefix for aria-activedescendant targets. */
+    this.menuId = `rel-menu-${Math.random().toString(36).slice(2)}`;
     /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
     this.lockedIndex = -1;
     this.handleDocumentClick = (e) => {
       if (!e.composedPath().includes(this)) {
         this.lockedIndex = -1;
+        this.subFocusedIndex = -1;
         this._items = this._items.map((i) => ({ ...i, open: false }));
       }
     };
@@ -9059,35 +9466,95 @@ var RelMenu = class extends import_lit24.LitElement {
       })
     );
   }
+  /** Keyboard-open locks the submenu (no hover-out to close it) and moves
+   *  virtual focus onto its first entry. */
+  openSubmenuAt(index) {
+    this.lockedIndex = index;
+    this.subFocusedIndex = 0;
+    this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
+  }
+  closeSubmenus() {
+    this.lockedIndex = -1;
+    this.subFocusedIndex = -1;
+    this._items = this._items.map((i) => ({ ...i, open: false }));
+  }
   onKeydown(ev) {
     const last = this._items.length - 1;
+    const focusedItem = this._items[this.focusedIndex];
+    if (this.subFocusedIndex >= 0 && this.type === "arrow" && focusedItem?.open && focusedItem.submenu?.length) {
+      const subLast = focusedItem.submenu.length - 1;
+      switch (ev.key) {
+        case "ArrowDown":
+          this.subFocusedIndex = Math.min(subLast, this.subFocusedIndex + 1);
+          ev.preventDefault();
+          return;
+        case "ArrowUp":
+          this.subFocusedIndex = Math.max(0, this.subFocusedIndex - 1);
+          ev.preventDefault();
+          return;
+        case "Home":
+          this.subFocusedIndex = 0;
+          ev.preventDefault();
+          return;
+        case "End":
+          this.subFocusedIndex = subLast;
+          ev.preventDefault();
+          return;
+        case "ArrowLeft":
+        case "Escape":
+          this.closeSubmenus();
+          ev.preventDefault();
+          ev.stopPropagation();
+          return;
+        case "Enter":
+        case " ":
+          this.onSubClick(this.focusedIndex, this.subFocusedIndex);
+          ev.preventDefault();
+          return;
+        default:
+          return;
+      }
+    }
     if (ev.key === "ArrowDown") {
       this.focusedIndex = Math.min(last, this.focusedIndex + 1);
       ev.preventDefault();
     } else if (ev.key === "ArrowUp") {
       this.focusedIndex = Math.max(0, this.focusedIndex - 1);
       ev.preventDefault();
+    } else if (ev.key === "Home") {
+      this.focusedIndex = 0;
+      ev.preventDefault();
+    } else if (ev.key === "End") {
+      this.focusedIndex = last;
+      ev.preventDefault();
     } else if (ev.key === "ArrowRight") {
       const item = this._items[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length) {
-        this.lockedIndex = this.focusedIndex;
-        this._items = this._items.map((i, idx) => ({
-          ...i,
-          open: idx === this.focusedIndex ? true : i.open
-        }));
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+        ev.preventDefault();
       }
     } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      this.lockedIndex = -1;
-      this._items = this._items.map((i) => ({ ...i, open: false }));
+      const anyOpen = this._items.some((i) => i.open);
+      if (anyOpen) {
+        this.closeSubmenus();
+        ev.preventDefault();
+        if (ev.key === "Escape") ev.stopPropagation();
+      }
     } else if (ev.key === "Enter" || ev.key === " ") {
       const item = this._items[this.focusedIndex];
-      this.onItemClick(item, this.focusedIndex);
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+      } else {
+        this.onItemClick(item, this.focusedIndex);
+      }
       ev.preventDefault();
     }
   }
   renderMenuItem(item, index) {
-    const isFocused = this.focusedIndex === index;
+    const isFocused = this.focusedIndex === index && this.subFocusedIndex < 0;
     const hasSubmenu = this.type === "arrow" && !!item.submenu?.length;
+    const role = this.type === "checkbox" ? "menuitemcheckbox" : this.type === "select-option" ? "menuitemradio" : "menuitem";
+    const ariaChecked = this.type === "checkbox" ? String(!!item.checked) : this.type === "select-option" ? String(!!item.active) : import_lit24.nothing;
     const control = this.type === "checkbox" ? import_lit24.html`<rel-checkbox
             class="menu-control"
             label="${item.label}"
@@ -9105,8 +9572,13 @@ var RelMenu = class extends import_lit24.LitElement {
           `;
     return import_lit24.html`
       <div
+        id="${this.menuId}-item-${index}"
         class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
-        role="menuitem"
+        role="${role}"
+        aria-checked="${ariaChecked}"
+        aria-disabled="${item.disabled ? "true" : import_lit24.nothing}"
+        aria-haspopup="${hasSubmenu ? "menu" : import_lit24.nothing}"
+        aria-expanded="${hasSubmenu ? String(!!item.open) : import_lit24.nothing}"
         ?data-focused="${isFocused}"
         @mouseenter="${() => this.onItemEnter(item, index)}"
         @mouseleave="${() => this.onItemLeave(item, index)}"
@@ -9115,12 +9587,16 @@ var RelMenu = class extends import_lit24.LitElement {
         ${hasSubmenu ? import_lit24.html`
               <div
                 part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
+                role="menu"
                 @click="${(e) => e.stopPropagation()}">
                 ${item.submenu.map(
       (sub, subIndex) => import_lit24.html`
                     <div
-                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      id="${this.menuId}-item-${index}-sub-${subIndex}"
+                      class="rel-menu-item ${sub.active ? "active" : ""} ${sub.disabled ? "disabled" : ""}"
                       role="menuitem"
+                      aria-disabled="${sub.disabled ? "true" : import_lit24.nothing}"
+                      ?data-focused="${this.focusedIndex === index && this.subFocusedIndex === subIndex}"
                       @click="${(e) => this.onSubClick(index, subIndex, e)}">
                       <span class="menu-label">${sub.label}</span>
                     </div>
@@ -9132,12 +9608,14 @@ var RelMenu = class extends import_lit24.LitElement {
     `;
   }
   render() {
+    const activeDescendant = this._items.length === 0 ? import_lit24.nothing : this.subFocusedIndex >= 0 ? `${this.menuId}-item-${this.focusedIndex}-sub-${this.subFocusedIndex}` : `${this.menuId}-item-${this.focusedIndex}`;
     return import_lit24.html`
       <style>${RelMenu._css}</style>
       <div
         part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
         role="menu"
         tabindex="0"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.onKeydown}"
         @click="${(e) => e.stopPropagation()}">
         ${this._items.map((item, index) => this.renderMenuItem(item, index))}
@@ -9227,7 +9705,10 @@ RelMenu._css = `
       cursor: not-allowed;
     }
 
-    .rel-menu-item[data-focused="true"] {
+    /* [data-focused] (presence, not ="true"): the ?data-focused boolean
+       binding renders the attribute with an EMPTY value, so a ="true"
+       selector never matches. */
+    .rel-menu-item[data-focused] {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
     }
@@ -9318,6 +9799,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators24.state)()
 ], RelMenu.prototype, "focusedIndex", 2);
+__decorateClass([
+  (0, import_decorators24.state)()
+], RelMenu.prototype, "subFocusedIndex", 2);
 __decorateClass([
   (0, import_decorators24.state)()
 ], RelMenu.prototype, "_items", 2);
@@ -9328,16 +9812,159 @@ RelMenu = __decorateClass([
 // src/components/rel-menubar/rel-menubar.ts
 var import_lit25 = require("lit");
 var import_decorators25 = require("lit/decorators.js");
+
+// src/utils/shortcuts.ts
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+}
+var KEY_ALIASES = {
+  esc: "escape",
+  space: " ",
+  plus: "+",
+  return: "enter",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+function parseShortcut(shortcut) {
+  const parsed = {
+    key: "",
+    ctrl: false,
+    meta: false,
+    alt: false,
+    shift: false
+  };
+  const tokens = shortcut.split("+").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (shortcut.endsWith("+") && !shortcut.endsWith("++")) tokens.push("+");
+  for (const token of tokens) {
+    switch (token) {
+      case "mod":
+        if (isApplePlatform()) parsed.meta = true;
+        else parsed.ctrl = true;
+        break;
+      case "ctrl":
+      case "control":
+        parsed.ctrl = true;
+        break;
+      case "meta":
+      case "cmd":
+      case "command":
+      case "win":
+        parsed.meta = true;
+        break;
+      case "alt":
+      case "option":
+        parsed.alt = true;
+        break;
+      case "shift":
+        parsed.shift = true;
+        break;
+      default:
+        parsed.key = KEY_ALIASES[token] ?? token;
+    }
+  }
+  return parsed;
+}
+function matchesShortcut(e, shortcut) {
+  const parsed = parseShortcut(shortcut);
+  if (!parsed.key) return false;
+  return e.key.toLowerCase() === parsed.key && e.ctrlKey === parsed.ctrl && e.metaKey === parsed.meta && e.altKey === parsed.alt && e.shiftKey === parsed.shift;
+}
+function isEditableTarget(e) {
+  const target = e.composedPath()[0];
+  if (!(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+    return true;
+  }
+  return target.isContentEditable;
+}
+function bindShortcut(shortcut, handler, options = {}) {
+  const target = options.target ?? document;
+  const listener = (event) => {
+    const e = event;
+    if (!matchesShortcut(e, shortcut)) return;
+    if (!options.allowInEditable && isEditableTarget(e)) return;
+    if (options.preventDefault !== false) e.preventDefault();
+    handler(e);
+  };
+  target.addEventListener("keydown", listener);
+  return () => target.removeEventListener("keydown", listener);
+}
+var APPLE_LABELS = {
+  mod: "\u2318",
+  meta: "\u2318",
+  cmd: "\u2318",
+  command: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  option: "\u2325",
+  shift: "\u21E7"
+};
+var GENERIC_LABELS = {
+  mod: "Ctrl",
+  meta: "Win",
+  cmd: "Win",
+  command: "Win",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  shift: "Shift"
+};
+var KEY_LABELS = {
+  arrowup: "\u2191",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  escape: "Esc",
+  " ": "Space"
+};
+function formatShortcutParts(shortcut) {
+  const labels = isApplePlatform() ? APPLE_LABELS : GENERIC_LABELS;
+  return shortcut.split("+").map((t) => t.trim()).filter(Boolean).map((token) => {
+    const lower = token.toLowerCase();
+    if (labels[lower]) return labels[lower];
+    const key = KEY_ALIASES[lower] ?? lower;
+    if (KEY_LABELS[key]) return KEY_LABELS[key];
+    return key.length === 1 ? key.toUpperCase() : key[0].toUpperCase() + key.slice(1);
+  });
+}
+
+// src/components/rel-menubar/rel-menubar.ts
 var import_rel_icon10 = require("@reliability-design/icons/rel-icon");
 var RelMenubar = class extends import_lit25.LitElement {
   constructor() {
     super(...arguments);
+    this.bindShortcuts = false;
     this.menus = [];
     this.openMenuIndex = -1;
     this.focusedTriggerIndex = 0;
     this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.openSubmenuElement = null;
     this.hoverSwitchEnabled = false;
+    /** Stable id prefix for aria-activedescendant targets (light DOM, so ids
+     *  must be unique per menubar instance on the page). */
+    this.menubarId = `rel-menubar-${Math.random().toString(36).slice(2)}`;
+    this.handleShortcutKeyDown = (e) => {
+      if (!this.bindShortcuts || e.defaultPrevented) return;
+      if (isEditableTarget(e)) return;
+      for (const { menu } of this.menus) {
+        for (const item of this.getFocusableItems(menu)) {
+          const shortcut = item.getAttribute("data-shortcut");
+          if (!shortcut) continue;
+          if (item.disabled) continue;
+          if (matchesShortcut(e, shortcut)) {
+            e.preventDefault();
+            this.handleItemClick(item);
+            return;
+          }
+        }
+      }
+    };
     this.handleOutsideClick = (e) => {
       if (!e.composedPath().includes(this)) {
         this.closeAllMenus();
@@ -9351,6 +9978,7 @@ var RelMenubar = class extends import_lit25.LitElement {
     super.connectedCallback();
     this.discoverMenus();
     document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("keydown", this.handleShortcutKeyDown);
     this._onScroll = () => {
       this._repositionOpenMenu();
       this._repositionOpenSubmenu();
@@ -9360,6 +9988,7 @@ var RelMenubar = class extends import_lit25.LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("keydown", this.handleShortcutKeyDown);
     if (this._onScroll) {
       window.removeEventListener("scroll", this._onScroll, { capture: true });
     }
@@ -9393,12 +10022,26 @@ var RelMenubar = class extends import_lit25.LitElement {
   closeAllMenus() {
     this.openMenuIndex = -1;
     this.openSubmenuElement = null;
+    this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.hoverSwitchEnabled = false;
     this.requestUpdate();
   }
+  /** 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>.) */
+  closeAllMenusAndRefocusTrigger() {
+    const idx = this.openMenuIndex;
+    this.closeAllMenus();
+    if (idx !== -1) {
+      this.focusedTriggerIndex = idx;
+      this.focusTrigger(idx);
+    }
+  }
   openMenu(index, triggerElement) {
     this.openMenuIndex = index;
     this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.openSubmenuElement = null;
     this.requestUpdate();
     this.updateComplete.then(() => {
@@ -9440,27 +10083,20 @@ var RelMenubar = class extends import_lit25.LitElement {
       event.preventDefault();
       this.focusedTriggerIndex = Math.max(0, this.focusedTriggerIndex - 1);
       this.focusTrigger(this.focusedTriggerIndex);
-    } else if (key === "Enter" || key === " ") {
+    } else if (key === "Enter" || key === " " || key === "ArrowDown") {
       event.preventDefault();
       const trigger = this.querySelector(
         `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
       );
       if (trigger) {
-        this.openMenu(this.focusedTriggerIndex, trigger);
-        this.updateComplete.then(() => {
-          const focusTarget = this.querySelector(
-            "[autofocus], [role='menuitem']"
-          );
-          if (focusTarget) {
-            focusTarget.focus();
-          } else {
-            this.focusMenuItem(0);
-          }
-        });
+        if (this.openMenuIndex !== this.focusedTriggerIndex) {
+          this.openMenu(this.focusedTriggerIndex, trigger);
+        }
+        this.updateComplete.then(() => this.focusMenuItem(0));
       }
-    } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
+    } else if (key === "Escape" && this.openMenuIndex !== -1) {
       event.preventDefault();
-      this.focusMenuItem(0);
+      this.closeAllMenusAndRefocusTrigger();
     }
   }
   focusTrigger(index) {
@@ -9473,6 +10109,36 @@ var RelMenubar = class extends import_lit25.LitElement {
     const { key } = event;
     const menuContent = this.menus[this.openMenuIndex]?.menu;
     if (!menuContent) return;
+    if (this.openSubmenuElement) {
+      const subItems = this.getSubmenuItems(this.openSubmenuElement);
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        this.focusedSubItemIndex = Math.min(
+          subItems.length - 1,
+          this.focusedSubItemIndex + 1
+        );
+      } else if (key === "ArrowUp") {
+        event.preventDefault();
+        this.focusedSubItemIndex = Math.max(0, this.focusedSubItemIndex - 1);
+      } else if (key === "Home") {
+        event.preventDefault();
+        this.focusedSubItemIndex = 0;
+      } else if (key === "End") {
+        event.preventDefault();
+        this.focusedSubItemIndex = subItems.length - 1;
+      } else if (key === "ArrowLeft" || key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openSubmenuElement = null;
+        this.focusedSubItemIndex = -1;
+      } else if (key === "Enter" || key === " ") {
+        event.preventDefault();
+        const subItem = subItems[this.focusedSubItemIndex];
+        if (subItem) this.handleSubmenuItemClick(subItem);
+      }
+      this.requestUpdate();
+      return;
+    }
     const items = this.getFocusableItems(menuContent);
     if (key === "ArrowDown") {
       event.preventDefault();
@@ -9482,30 +10148,56 @@ var RelMenubar = class extends import_lit25.LitElement {
       event.preventDefault();
       this.focusedItemIndex = Math.max(0, this.focusedItemIndex - 1);
       this.requestUpdate();
+    } else if (key === "Home") {
+      event.preventDefault();
+      this.focusedItemIndex = 0;
+      this.requestUpdate();
+    } else if (key === "End") {
+      event.preventDefault();
+      this.focusedItemIndex = items.length - 1;
+      this.requestUpdate();
     } else if (key === "ArrowRight") {
       event.preventDefault();
       const currentItem = items[this.focusedItemIndex];
       if (currentItem?.hasAttribute("data-submenu")) {
-        this.openSubmenu(currentItem);
+        const panel = this.querySelector(
+          `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+        );
+        const renderedTrigger = panel?.querySelector(
+          `[data-focus-index="${this.focusedItemIndex}"]`
+        );
+        this.focusedSubItemIndex = 0;
+        this.openSubmenu(currentItem, renderedTrigger ?? void 0);
       }
     } else if (key === "ArrowLeft") {
       event.preventDefault();
-      if (this.openSubmenuElement) {
-        this.openSubmenuElement = null;
-        this.requestUpdate();
-      }
     } else if (key === "Escape") {
       event.preventDefault();
-      this.closeAllMenus();
-      this.focusTrigger(this.openMenuIndex);
+      this.closeAllMenusAndRefocusTrigger();
     } else if (key === "Enter" || key === " ") {
       event.preventDefault();
       const currentItem = items[this.focusedItemIndex];
       if (currentItem) {
-        this.handleItemClick(currentItem);
+        if (currentItem.hasAttribute("data-submenu")) {
+          const panel = this.querySelector(
+            `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+          );
+          const renderedTrigger = panel?.querySelector(
+            `[data-focus-index="${this.focusedItemIndex}"]`
+          );
+          this.focusedSubItemIndex = 0;
+          this.openSubmenu(currentItem, renderedTrigger ?? void 0);
+        } else {
+          this.handleItemClick(currentItem);
+        }
       }
     }
   }
+  getSubmenuItems(submenuElement) {
+    return Array.from(submenuElement.children).filter(
+      (el) => el.hasAttribute("data-item")
+    );
+  }
   getFocusableItems(menuContent) {
     return Array.from(menuContent.children).filter(
       (el) => el.hasAttribute("data-item") || el.hasAttribute("data-checkbox") || el.hasAttribute("data-radio") || el.hasAttribute("data-submenu")
@@ -9542,27 +10234,41 @@ var RelMenubar = class extends import_lit25.LitElement {
     } else if (item.hasAttribute("data-submenu")) {
       this.openSubmenu(item);
     } else {
-      this.closeAllMenus();
+      this.dispatchSelectEvent(item);
+      this.closeAllMenusAndRefocusTrigger();
     }
   }
-  openSubmenu(submenuTrigger, renderedTrigger, submenuIndex) {
-    this.openSubmenuElement = submenuTrigger;
-    this.requestUpdate();
-    this.updateComplete.then(() => {
-      const submenuId = `submenu-${submenuIndex ?? 0}`;
-      const submenuPanel = this.querySelector(
-        `.submenu-panel[data-submenu-id="${submenuId}"]`
-      );
-      if (submenuPanel) {
-        const positionTarget = renderedTrigger ?? submenuTrigger;
-        const rect = positionTarget.getBoundingClientRect();
-        submenuPanel.style.top = `${rect.top}px`;
-        submenuPanel.style.left = `${rect.right + 4}px`;
+  dispatchSelectEvent(item) {
+    this.dispatchEvent(
+      new CustomEvent("rel-menubar-select", {
+        detail: {
+          label: item.textContent?.trim() ?? "",
+          value: item.getAttribute("value") ?? void 0,
+          shortcut: item.getAttribute("data-shortcut") ?? void 0
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  openSubmenu(submenuTrigger, renderedTrigger) {
+    this.openSubmenuElement = submenuTrigger;
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const submenuPanel = this.querySelector(".submenu-panel.open");
+      if (submenuPanel) {
+        const positionTarget = renderedTrigger ?? submenuPanel.previousElementSibling;
+        const rect = positionTarget?.getBoundingClientRect();
+        if (rect) {
+          submenuPanel.style.top = `${rect.top}px`;
+          submenuPanel.style.left = `${rect.right + 4}px`;
+        }
       }
     });
   }
-  handleSubmenuItemClick(_item) {
-    this.closeAllMenus();
+  handleSubmenuItemClick(item) {
+    this.dispatchSelectEvent(item);
+    this.closeAllMenusAndRefocusTrigger();
   }
   dispatchChangeEvent(type, labelOrName, value) {
     const detail = type === "checkbox" ? { type, label: labelOrName, name: "", checked: value } : { type, label: "", name: labelOrName, value };
@@ -9574,16 +10280,21 @@ var RelMenubar = class extends import_lit25.LitElement {
       })
     );
   }
-  renderMenuItem(item, index) {
-    const isFocused = index === this.focusedItemIndex;
+  renderMenuItem(item, focusIndex, menuIndex) {
+    const isFocused = focusIndex >= 0 && focusIndex === this.focusedItemIndex;
+    const itemId = focusIndex >= 0 ? `${this.menubarId}-m${menuIndex}-i${focusIndex}` : import_lit25.nothing;
     if (item.hasAttribute("data-item")) {
       const button = item;
       const disabled = button.disabled;
       const shortcut = button.getAttribute("data-shortcut") || "";
       return import_lit25.html`
         <div
+          id="${itemId}"
           class="menu-item ${isFocused ? "focused" : ""}"
+          role="menuitem"
+          data-focus-index="${focusIndex}"
           data-disabled="${disabled}"
+          aria-disabled="${disabled ? "true" : import_lit25.nothing}"
           @click="${() => !disabled && this.handleItemClick(item)}"
         >
           <span>${button.textContent}</span>
@@ -9592,7 +10303,7 @@ var RelMenubar = class extends import_lit25.LitElement {
       `;
     }
     if (item.hasAttribute("data-separator")) {
-      return import_lit25.html`<div class="menu-separator"></div>`;
+      return import_lit25.html`<div class="menu-separator" role="separator"></div>`;
     }
     if (item.hasAttribute("data-checkbox")) {
       const label = item;
@@ -9600,6 +10311,8 @@ var RelMenubar = class extends import_lit25.LitElement {
       const labelText = Array.from(label.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent?.trim()).filter(Boolean).join(" ") || label.getAttribute("label") || "";
       return import_lit25.html`
         <rel-checkbox
+          id="${itemId}"
+          data-focus-index="${focusIndex}"
           label=${labelText}
           .status=${checkbox?.checked ? "checked" : "unchecked"}
           @rel-change=${(e) => {
@@ -9611,17 +10324,21 @@ var RelMenubar = class extends import_lit25.LitElement {
     }
     if (item.hasAttribute("data-submenu")) {
       const label = item.getAttribute("label") || item.textContent?.trim() || "";
-      const submenuId = `submenu-${index}`;
       return import_lit25.html`
         <div
+          id="${itemId}"
           class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
-          @click="${(e) => this.openSubmenu(item, e.currentTarget, index)}"
-          @mouseenter="${(e) => this.openSubmenu(item, e.currentTarget, index)}"
+          role="menuitem"
+          data-focus-index="${focusIndex}"
+          aria-haspopup="menu"
+          aria-expanded="${this.openSubmenuElement === item}"
+          @click="${(e) => this.openSubmenu(item, e.currentTarget)}"
+          @mouseenter="${(e) => this.openSubmenu(item, e.currentTarget)}"
         >
           <span>${label}</span>
           <rel-icon name="chevron-right"></rel-icon>
         </div>
-        ${this.renderSubmenu(item, submenuId)}
+        ${this.renderSubmenu(item)}
       `;
     }
     if (item.hasAttribute("data-radio-group")) {
@@ -9646,24 +10363,23 @@ var RelMenubar = class extends import_lit25.LitElement {
     }
     return null;
   }
-  renderSubmenu(submenuElement, submenuId) {
+  renderSubmenu(submenuElement) {
     const isOpen = this.openSubmenuElement === submenuElement;
-    const submenuItems = Array.from(submenuElement.children);
+    const submenuItems = this.getSubmenuItems(submenuElement);
     return import_lit25.html`
-      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
-        ${submenuItems.map((subItem) => {
-      if (subItem.hasAttribute("data-item")) {
-        const button = subItem;
-        return import_lit25.html`
-              <div
-                class="menu-item"
-                @click="${() => this.handleSubmenuItemClick(subItem)}"
-              >
-                <span>${button.textContent}</span>
-              </div>
-            `;
-      }
-      return null;
+      <div class="submenu-panel ${isOpen ? "open" : ""}" role="menu">
+        ${submenuItems.map((subItem, subIdx) => {
+      const button = subItem;
+      return import_lit25.html`
+            <div
+              id="${isOpen ? `${this.menubarId}-sub-${subIdx}` : import_lit25.nothing}"
+              class="menu-item ${isOpen && subIdx === this.focusedSubItemIndex ? "focused" : ""}"
+              role="menuitem"
+              @click="${() => this.handleSubmenuItemClick(subItem)}"
+            >
+              <span>${button.textContent}</span>
+            </div>
+          `;
     })}
       </div>
     `;
@@ -9671,28 +10387,40 @@ var RelMenubar = class extends import_lit25.LitElement {
   renderMenuPanel(menuState, index) {
     const isOpen = index === this.openMenuIndex;
     const items = Array.from(menuState.menu.children);
+    const focusables = this.getFocusableItems(menuState.menu);
+    const activeDescendant = !isOpen ? import_lit25.nothing : this.focusedSubItemIndex >= 0 ? `${this.menubarId}-sub-${this.focusedSubItemIndex}` : this.focusedItemIndex >= 0 ? `${this.menubarId}-m${index}-i${this.focusedItemIndex}` : import_lit25.nothing;
     return import_lit25.html`
       <div
         class="menubar-panel ${isOpen ? "open" : ""}"
         data-menu-index="${index}"
         tabindex="-1"
+        role="menu"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.handlePanelKeyDown}"
       >
-        ${items.map((item, idx) => this.renderMenuItem(item, idx))}
+        ${items.map(
+      (item) => this.renderMenuItem(item, focusables.indexOf(item), index)
+    )}
       </div>
     `;
   }
   render() {
     return import_lit25.html`
       <style>${RelMenubar._css}</style>
-      <div class="menubar-container">
+      <div class="menubar-container" role="menubar">
         ${this.menus.map(
       (menuState, index) => import_lit25.html`
             <button
               class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
               data-index="${index}"
+              role="menuitem"
+              aria-haspopup="menu"
+              aria-expanded="${index === this.openMenuIndex}"
               @click="${(e) => this.handleTriggerClick(index, e)}"
               @mouseenter="${(e) => this.handleTriggerMouseEnter(index, e)}"
+              @focus="${() => {
+        this.focusedTriggerIndex = index;
+      }}"
               @keydown="${this.handleTriggerKeyDown}"
             >
               ${menuState.menu.label}
@@ -9863,6 +10591,9 @@ RelMenubar._css = `
       cursor: pointer;
     }
   `;
+__decorateClass([
+  (0, import_decorators25.property)({ type: Boolean, attribute: "bind-shortcuts" })
+], RelMenubar.prototype, "bindShortcuts", 2);
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "menus", 2);
@@ -9875,6 +10606,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "focusedItemIndex", 2);
+__decorateClass([
+  (0, import_decorators25.state)()
+], RelMenubar.prototype, "focusedSubItemIndex", 2);
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "openSubmenuElement", 2);
@@ -10543,7 +11277,6 @@ RelTopbar.styles = import_lit34.css`
       color: var(--rel-topbar-item-color);
 
 
-
       text-decoration: none;
       font-family: var(--rel-body-md-medium-font-family);
       font-weight: var(--rel-body-md-medium-font-weight);
@@ -10793,8 +11526,6 @@ RelTopbarItem.styles = import_lit35.css`
       color: var(--_item-color);
 
 
-
-
       text-decoration: none;
       white-space: nowrap;
       position: relative;
@@ -11026,9 +11757,7 @@ RelTopbarProfile.styles = import_lit36.css`
 
     .name {
 
-
       color: var(--rel-text-default);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -11047,9 +11776,7 @@ RelTopbarProfile.styles = import_lit36.css`
 
     .subtitle {
 
-
       color: var(--rel-text-placeholder);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -11074,9 +11801,7 @@ RelTopbarProfile.styles = import_lit36.css`
       padding: 2px var(--rel-spacing-2xs, 4px);
       border-radius: var(--rel-border-radius-xs, 2px);
 
-
       text-transform: uppercase;
-
       flex-shrink: 0;
       font-family: var(--rel-body-xs-semibold-font-family);
       font-weight: var(--rel-body-xs-semibold-font-weight);
@@ -11423,7 +12148,7 @@ var RelOtp = class extends import_lit37.LitElement {
                     data-index="${index}"
                     type="${this.mask ? "password" : "text"}"
                     inputmode="${this.getInputMode()}"
-                    autocomplete="new-password"
+                    autocomplete="one-time-code"
                     pattern="${this.pattern || ""}"
                     placeholder="${this.placeholder}"
                     maxlength="1"
@@ -11486,7 +12211,6 @@ RelOtp.styles = import_lit37.css`
       align-items: center;
       justify-content: center;
       color: var(--rel-border-default);
-
       user-select: none;
       padding: 0 var(--rel-spacing-3xs);
       font-family: var(--rel-action-xl-font-family);
@@ -11507,7 +12231,6 @@ RelOtp.styles = import_lit37.css`
       border-radius: var(--rel-border-radius-sm);
       background: var(--rel-bg-neutral);
 
-
       text-align: center;
       color: var(--rel-text-default);
       outline: none;
@@ -12199,6 +12922,14 @@ var RelPopover = class extends import_lit39.LitElement {
       e.stopPropagation();
       this.setOpen(!this.activeOpen);
     };
+    this.onHostKeyDown = (e) => {
+      if (this.disabled) return;
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (!this.triggerEl || !e.composedPath().includes(this.triggerEl)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.setOpen(!this.activeOpen);
+    };
     this.onOutsidePointerDown = (e) => {
       if (!this.activeOpen) return;
       const path = e.composedPath();
@@ -12272,10 +13003,12 @@ var RelPopover = class extends import_lit39.LitElement {
     super.connectedCallback();
     this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
     this.addEventListener("pointerdown", this.onHostPointerDown, true);
+    this.addEventListener("keydown", this.onHostKeyDown, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
+    this.removeEventListener("keydown", this.onHostKeyDown, true);
     this.removeGlobalListeners();
     this.hideNativePopover();
   }
@@ -12316,7 +13049,7 @@ var RelPopover = class extends import_lit39.LitElement {
    * OPEN / CLOSE
    * ======================= */
   onOpen() {
-    this.returnFocusEl = document.activeElement ?? this.triggerEl;
+    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
     this.addGlobalListeners();
     this.showNativePopover();
     requestAnimationFrame(() => {
@@ -12424,6 +13157,12 @@ var RelPopover = class extends import_lit39.LitElement {
     this.triggerEl.setAttribute("aria-haspopup", "dialog");
     this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
     this.triggerEl.setAttribute("aria-controls", this.uniqueId);
+    if (this.triggerEl.tabIndex < 0 && !this.triggerEl.hasAttribute("tabindex") && getFocusableElements(this.triggerEl).length === 0) {
+      this.triggerEl.setAttribute("tabindex", "0");
+      if (!this.triggerEl.hasAttribute("role")) {
+        this.triggerEl.setAttribute("role", "button");
+      }
+    }
   }
   /* =======================
    * RENDER
@@ -12903,6 +13642,14 @@ var RelResizableGroup = class extends import_lit42.LitElement {
         const delta = e.key === "ArrowUp" ? -step : step;
         this.applyKeyboardResize(handleIndex, delta);
         applied = true;
+      } else if (e.key === "Home" || e.key === "End") {
+        const leftPanel = this.panels[handleIndex];
+        if (leftPanel && handleIndex + 1 < this.panels.length) {
+          e.preventDefault();
+          const target2 = e.key === "Home" ? leftPanel.minSize : leftPanel.maxSize;
+          this.applyKeyboardResize(handleIndex, target2 - leftPanel.currentSize);
+          applied = true;
+        }
       }
       if (applied) {
         this.dispatchResizeEvent("rel-resize-end");
@@ -12942,6 +13689,13 @@ var RelResizableGroup = class extends import_lit42.LitElement {
     });
     const sizes = this.calculateInitialSizes();
     this.applySizes(sizes);
+    this.handles.forEach((handle, idx) => {
+      const left = sizes[idx];
+      const right = sizes[idx + 1];
+      if (left !== void 0 && right !== void 0 && left + right > 0) {
+        handle.updateAriaValue(left / (left + right) * 100);
+      }
+    });
   }
   calculateInitialSizes() {
     const sizes = [];
@@ -13320,6 +14074,26 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
     this.active = "";
     this.size = "medium";
     this.align = "left";
+    /** APG radio-group navigation: arrows move focus AND select, the group is
+     *  one Tab stop (roving tabindex on the selected segment). */
+    this.onKeyDown = (e) => {
+      const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
+      const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
+      if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
+      const enabled = this.options.filter((o) => !o.disabled);
+      if (enabled.length === 0) return;
+      e.preventDefault();
+      const currentIdx = enabled.findIndex((o) => o.value === this.active);
+      let target;
+      if (e.key === "Home") target = 0;
+      else if (e.key === "End") target = enabled.length - 1;
+      else if (prevKey) target = currentIdx <= 0 ? enabled.length - 1 : currentIdx - 1;
+      else target = (currentIdx + 1) % enabled.length;
+      this.setActive(enabled[target]);
+      this.updateComplete.then(() => {
+        this.shadowRoot?.querySelector('button[tabindex="0"]')?.focus();
+      });
+    };
   }
   setActive(option) {
     if (!option.disabled) {
@@ -13333,7 +14107,7 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
       );
     }
   }
-  renderSegment(option) {
+  renderSegment(option, rovingValue) {
     const isActive = this.active === option.value;
     const classes = [
       "segment",
@@ -13343,6 +14117,9 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
     return import_lit45.html`
       <button
         part="option" class="${classes}"
+        role="radio"
+        aria-checked="${isActive}"
+        tabindex="${!option.disabled && option.value === rovingValue ? 0 : -1}"
         ?disabled="${option.disabled}"
         @click="${() => this.setActive(option)}">
         ${option.label}
@@ -13355,9 +14132,15 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
       this.size,
       `align-${this.align}`
     ].join(" ");
+    const enabled = this.options.filter((o) => !o.disabled);
+    const rovingValue = enabled.some((o) => o.value === this.active) ? this.active : enabled[0]?.value ?? null;
     return import_lit45.html`
-      <div part="base" class="${containerClasses}">
-        ${this.options.map((option) => this.renderSegment(option))}
+      <div
+        part="base" class="${containerClasses}"
+        role="radiogroup"
+        @keydown="${this.onKeyDown}"
+      >
+        ${this.options.map((option) => this.renderSegment(option, rovingValue))}
       </div>
     `;
   }
@@ -13519,6 +14302,8 @@ var RelSelect = class extends import_lit46.LitElement {
     this.noSearch = false;
     this.open = false;
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
+    this.typeaheadBuffer = "";
     this.panelStyle = "";
     this.searchValue = "";
     this.internalState = "default";
@@ -13567,6 +14352,7 @@ var RelSelect = class extends import_lit46.LitElement {
     this.onSearchInput = (e) => {
       this.searchValue = e.target.value;
       this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+      this.selectAllHighlighted = false;
       requestAnimationFrame(() => this.updatePosition());
     };
   }
@@ -13694,6 +14480,7 @@ var RelSelect = class extends import_lit46.LitElement {
     this.open = true;
     this.searchValue = "";
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
       this.showNativePopover();
@@ -13769,6 +14556,11 @@ var RelSelect = class extends import_lit46.LitElement {
   }
   onTriggerKeyDown(e) {
     if (this.state === "disabled") return;
+    if (this.multiple && (e.key === "Backspace" || e.key === "Delete") && this.selectedValues.length > 0) {
+      e.preventDefault();
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     if (!this.open) {
       if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
         e.preventDefault();
@@ -13779,26 +14571,60 @@ var RelSelect = class extends import_lit46.LitElement {
     if (this.noSearch) this.handleListNavigation(e);
   }
   onSearchKeyDown(e) {
+    if (this.multiple && e.key === "Backspace" && this.searchValue === "" && this.selectedValues.length > 0) {
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     this.handleListNavigation(e);
   }
   handleListNavigation(e) {
     const filtered = this.filteredOptions;
+    const hasSelectAll = this.multiple && filtered.length > 0;
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        if (this.selectAllHighlighted) {
+          this.selectAllHighlighted = false;
+          this.highlightedIndex = filtered.length > 0 ? 0 : -1;
+        } else if (this.highlightedIndex === -1 && hasSelectAll) {
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        }
+        this.scrollHighlightedIntoView();
         break;
       case "ArrowUp":
         e.preventDefault();
-        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        if (!this.selectAllHighlighted && this.highlightedIndex <= 0 && hasSelectAll) {
+          this.highlightedIndex = -1;
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        }
+        this.scrollHighlightedIntoView();
+        break;
+      case "Home":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = 0;
+        this.scrollHighlightedIntoView();
+        break;
+      case "End":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = filtered.length - 1;
+        this.scrollHighlightedIntoView();
+        break;
+      case " ":
+        if (!this.noSearch) return;
+        e.preventDefault();
+        this.activateHighlighted();
         break;
       case "Enter":
         e.preventDefault();
-        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-          const opt = filtered[this.highlightedIndex];
-          if (this.multiple) this.toggleMultiOption(opt);
-          else this.selectSingleOption(opt);
-        }
+        this.activateHighlighted();
         break;
       case "Escape":
         e.preventDefault();
@@ -13807,8 +14633,55 @@ var RelSelect = class extends import_lit46.LitElement {
       case "Tab":
         this.closeListbox();
         break;
+      default:
+        this.handleTypeahead(e);
+        break;
+    }
+  }
+  /** 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. */
+  handleTypeahead(e) {
+    if (!this.noSearch) return;
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+    e.preventDefault();
+    const isNewQuery = this.typeaheadBuffer === "";
+    this.typeaheadBuffer += e.key.toLowerCase();
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadTimer = window.setTimeout(() => {
+      this.typeaheadBuffer = "";
+    }, 500);
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return;
+    const start = Math.max(0, this.highlightedIndex) + (isNewQuery ? 1 : 0);
+    for (let offset = 0; offset < filtered.length; offset++) {
+      const idx = (start + offset) % filtered.length;
+      if (filtered[idx].label.toLowerCase().startsWith(this.typeaheadBuffer)) {
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = idx;
+        this.scrollHighlightedIntoView();
+        return;
+      }
     }
   }
+  activateHighlighted() {
+    if (this.selectAllHighlighted) {
+      this.toggleSelectAll();
+      return;
+    }
+    const filtered = this.filteredOptions;
+    if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+      const opt = filtered[this.highlightedIndex];
+      if (this.multiple) this.toggleMultiOption(opt);
+      else this.selectSingleOption(opt);
+    }
+  }
+  scrollHighlightedIntoView() {
+    if (this.highlightedIndex < 0) return;
+    requestAnimationFrame(() => {
+      this.renderRoot.querySelector(`#${this.uniqueId}-option-${this.highlightedIndex}`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
   renderChips() {
     const values = this.selectedValues;
     const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
@@ -13886,7 +14759,7 @@ var RelSelect = class extends import_lit46.LitElement {
       this.open ? "open" : ""
     ].filter(Boolean).join(" ");
     const listboxId = `${this.uniqueId}-listbox`;
-    const activeOptionId = this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+    const activeOptionId = !this.open ? "" : this.selectAllHighlighted ? `${this.uniqueId}-select-all` : this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
     const selectedSingle = opts.find((o) => o.value === this.selected);
     return import_lit46.html`
       <div class="${wrapperClasses}">
@@ -13964,7 +14837,17 @@ var RelSelect = class extends import_lit46.LitElement {
                       />
                     </div>
                   </div>` : ""}
-              ${this.multiple && filtered.length > 0 ? import_lit46.html`<div class="select-all-row">
+              ${this.multiple && filtered.length > 0 ? import_lit46.html`<div
+                    id="${this.uniqueId}-select-all"
+                    class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
+                    role="option"
+                    aria-selected="${this.selectAllStatus === "checked"}"
+                    @pointerenter="${() => {
+      this.selectAllHighlighted = true;
+      this.highlightedIndex = -1;
+    }}"
+                    @pointerleave="${() => this.selectAllHighlighted = false}"
+                  >
                     <rel-checkbox
                       label="${this.selectAllLabel}"
                       status="${this.selectAllStatus}"
@@ -13989,7 +14872,10 @@ var RelSelect = class extends import_lit46.LitElement {
                       class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
-                      @pointerenter="${() => this.highlightedIndex = index}"
+                      @pointerenter="${() => {
+        this.highlightedIndex = index;
+        this.selectAllHighlighted = false;
+      }}"
                     >
                       <rel-checkbox
                         label="${option.label}"
@@ -14488,6 +15374,10 @@ RelSelect.styles = import_lit46.css`
       padding: 12px;
     }
 
+    .select-all-row.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
     .select-empty {
       padding: var(--rel-spacing-xs) 12px;
       color: var(--rel-select-placeholder-color, var(--rel-text-body));
@@ -14562,6 +15452,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators46.state)()
 ], RelSelect.prototype, "highlightedIndex", 2);
+__decorateClass([
+  (0, import_decorators46.state)()
+], RelSelect.prototype, "selectAllHighlighted", 2);
 __decorateClass([
   (0, import_decorators46.state)()
 ], RelSelect.prototype, "panelStyle", 2);
@@ -14759,6 +15652,10 @@ var RelModal = class extends import_lit48.LitElement {
       if (e.key === "Escape" && this.dismissible) {
         e.preventDefault();
         this.open = false;
+        return;
+      }
+      if (e.key === "Tab" && this.modal && this.panelElement) {
+        trapTabKey(e, this.panelElement);
       }
     };
     this.handleOverlayClick = (e) => {
@@ -14809,9 +15706,18 @@ var RelModal = class extends import_lit48.LitElement {
     }
   }
   handleOpen() {
-    this.previousFocus = document.activeElement;
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     document.addEventListener("keydown", this.handleKeydown);
+    if (this.modal) {
+      this.updateComplete.then(() => {
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) focusTarget.focus();
+        else panel.focus();
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: true,
@@ -15171,6 +16077,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators48.query)(".overlay")
 ], RelModal.prototype, "overlayElement", 2);
+__decorateClass([
+  (0, import_decorators48.query)(".panel")
+], RelModal.prototype, "panelElement", 2);
 RelModal = __decorateClass([
   (0, import_decorators48.customElement)("rel-modal")
 ], RelModal);
@@ -16186,6 +17095,28 @@ var RelStepper = class extends import_lit51.LitElement {
     if (this.isDisabled(step)) classes.push("disabled");
     return classes.join(" ");
   }
+  onStepKeyDown(e, step, index) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.onStepClick(step, index);
+      return;
+    }
+    const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
+    const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
+    if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
+    const steps = Array.from(
+      this.renderRoot.querySelectorAll(".rel-step:not(.disabled)")
+    );
+    if (steps.length === 0) return;
+    e.preventDefault();
+    const current = steps.indexOf(e.currentTarget);
+    let target;
+    if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = steps.length - 1;
+    else if (prevKey) target = (current - 1 + steps.length) % steps.length;
+    else target = (current + 1) % steps.length;
+    steps[target]?.focus();
+  }
   onStepClick(step, index) {
     if (step.status === "disabled") return;
     this.dispatchEvent(
@@ -16238,7 +17169,12 @@ var RelStepper = class extends import_lit51.LitElement {
       (step, idx) => import_lit51.html`
             <div
               class="${this.getStepClasses(step)}"
+              role="button"
+              tabindex="${this.isDisabled(step) ? -1 : 0}"
+              aria-disabled="${this.isDisabled(step) ? "true" : import_lit51.nothing}"
+              aria-current="${this.isProgress(step) ? "step" : import_lit51.nothing}"
               @click="${() => this.onStepClick(step, idx)}"
+              @keydown="${(e) => this.onStepKeyDown(e, step, idx)}"
             >
               ${isVertical && isTextRight ? import_lit51.html`
                     <!-- Indicator with connector below -->
@@ -16325,6 +17261,17 @@ RelStepper.styles = import_lit51.css`
     .rel-step {
       display: flex;
       position: relative;
+      cursor: pointer;
+    }
+
+    .rel-step.disabled {
+      cursor: not-allowed;
+    }
+
+    .rel-step:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .rel-stepper.horizontal.text-below .rel-step {
@@ -16901,6 +17848,8 @@ var RelTab = class extends import_lit53.LitElement {
     this.activeIndex = 0;
     this.size = "md";
     this._tabItems = [];
+    /** Stable id prefix linking tabs to the shared tabpanel. */
+    this.tabsId = `rel-tab-${Math.random().toString(36).slice(2)}`;
   }
   _onSlotChange(e) {
     const slot = e.target;
@@ -16944,12 +17893,24 @@ var RelTab = class extends import_lit53.LitElement {
         next = (next + dir + tabs.length) % tabs.length;
         if (!tabs[next]?.disabled) break;
       }
-      this.selectTab(next);
-      this.updateComplete.then(() => {
-        const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
-        tabEls?.[next]?.focus();
-      });
+      this.selectAndFocusTab(next);
+      return;
     }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const tabs = this._effectiveTabs;
+      const order = [...tabs.keys()];
+      if (event.key === "End") order.reverse();
+      const next = order.find((i) => !tabs[i]?.disabled);
+      if (next !== void 0) this.selectAndFocusTab(next);
+    }
+  }
+  selectAndFocusTab(index) {
+    this.selectTab(index);
+    this.updateComplete.then(() => {
+      const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
+      tabEls?.[index]?.focus();
+    });
   }
   render() {
     const tabs = this._effectiveTabs;
@@ -16960,9 +17921,11 @@ var RelTab = class extends import_lit53.LitElement {
       (tab, i) => import_lit53.html`
             <div
               part="item" class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled ? "disabled" : ""}"
+              id="${this.tabsId}-tab-${i}"
               role="tab"
               aria-selected="${i === this.activeIndex}"
               aria-disabled="${tab.disabled ?? false}"
+              aria-controls="${this.tabsId}-panel"
               tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e) => this.onKeyDown(e, i)}"
@@ -16974,7 +17937,13 @@ var RelTab = class extends import_lit53.LitElement {
           `
     )}
       </div>
-      <div class="tab-content">
+      <div
+        class="tab-content"
+        id="${this.tabsId}-panel"
+        role="tabpanel"
+        aria-labelledby="${this.tabsId}-tab-${this.activeIndex}"
+        tabindex="0"
+      >
         <slot></slot>
       </div>
     `;
@@ -17005,7 +17974,6 @@ RelTab.styles = import_lit53.css`
       padding: var(--rel-spacing-sm) var(--rel-spacing-md);
       cursor: pointer;
       color: var(--rel-text-body);
-
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
@@ -17123,7 +18091,8 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.required = false;
     this.readonly = false;
     this.format = "12h";
-    this.minuteStep = 1;
+    this.seconds = false;
+    this.minuteStep = 5;
     this.minTime = null;
     this.maxTime = null;
     this.open = false;
@@ -17135,6 +18104,8 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.fullWidth = false;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
+    this.openUp = false;
     this.handleClickOutside = (e) => {
       if (!this.open) return;
       const path = e.composedPath();
@@ -17159,40 +18130,58 @@ var RelTimePicker = class extends import_lit54.LitElement {
     document.removeEventListener("keydown", this.handleEscapeKey);
   }
   updated(changedProperties) {
-    if (changedProperties.has("open") && this.open) {
+    if (changedProperties.has("open")) {
+      if (!this.open) {
+        this.openUp = false;
+        return;
+      }
       this.resetDraftFromValue();
       setTimeout(() => {
+        this.updatePanelPlacement();
         this.scrollColumnsToSelection();
         const target = this.columnsElement?.querySelector(
           ".option-button.selected:not(:disabled)"
         ) ?? this.columnsElement?.querySelector(
           ".option-button:not(:disabled)"
         );
-        target?.focus();
+        target?.focus({ preventScroll: true });
       }, 0);
     }
   }
+  /** Open upward when the panel doesn't fit below but does fit above. */
+  updatePanelPlacement() {
+    const panel = this.renderRoot.querySelector(".popover");
+    if (!panel) return;
+    const rect = this.getBoundingClientRect();
+    const panelHeight = panel.offsetHeight;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    this.openUp = spaceBelow < panelHeight + 8 && rect.top > panelHeight + 8;
+  }
   // ── Parsing / formatting ──
   parseTime(time) {
     if (!time) return null;
-    const match = time.match(/^(\d{1,2}):(\d{2})$/);
+    const match = time.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
     if (!match) return null;
     const hour = parseInt(match[1], 10);
     const minute = parseInt(match[2], 10);
-    if (hour > 23 || minute > 59) return null;
-    return { hour, minute };
+    const second = match[3] ? parseInt(match[3], 10) : 0;
+    if (hour > 23 || minute > 59 || second > 59) return null;
+    return { hour, minute, second };
   }
-  formatValue(hour, minute) {
-    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  formatValue(hour, minute, second = 0) {
+    const hh = String(hour).padStart(2, "0");
+    const mm = String(minute).padStart(2, "0");
+    return this.seconds ? `${hh}:${mm}:${String(second).padStart(2, "0")}` : `${hh}:${mm}`;
   }
-  formatDisplay(hour, minute) {
+  formatDisplay(hour, minute, second = 0) {
     const mm = String(minute).padStart(2, "0");
+    const ss = this.seconds ? `:${String(second).padStart(2, "0")}` : "";
     if (this.format === "24h") {
-      return `${String(hour).padStart(2, "0")}:${mm}`;
+      return `${String(hour).padStart(2, "0")}:${mm}${ss}`;
     }
     const period = hour < 12 ? "AM" : "PM";
     const hour12 = hour % 12 === 0 ? 12 : hour % 12;
-    return `${hour12}:${mm} ${period}`;
+    return `${hour12}:${mm}${ss} ${period}`;
   }
   toMinutes(hour, minute) {
     return hour * 60 + minute;
@@ -17242,10 +18231,17 @@ var RelTimePicker = class extends import_lit54.LitElement {
     }
     const period = this.draftPeriod ?? "AM";
     const base = period === "AM" ? 0 : 12;
-    return Array.from({ length: 12 }, (_, i) => ({
-      label: i === 0 ? "12" : String(i).padStart(2, "0"),
-      hour24: base + i
-    }));
+    return Array.from({ length: 12 }, (_, i) => {
+      const display = i + 1;
+      return {
+        label: String(display).padStart(2, "0"),
+        hour24: base + display % 12
+      };
+    });
+  }
+  /** Seconds shown in the seconds column (always step 1). */
+  getSecondOptions() {
+    return Array.from({ length: 60 }, (_, s) => s);
   }
   get draftPeriod() {
     if (this.draftHour === null) return null;
@@ -17255,6 +18251,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const parsed = this.parseTime(this.value);
     this.draftHour = parsed ? parsed.hour : null;
     this.draftMinute = parsed ? parsed.minute : null;
+    this.draftSecond = parsed ? parsed.second : null;
   }
   /** Snap the draft minute to the nearest valid step minute for the hour. */
   clampDraftToRange() {
@@ -17297,7 +18294,11 @@ var RelTimePicker = class extends import_lit54.LitElement {
   }
   applySelection() {
     if (this.draftHour === null) return;
-    const newValue = this.formatValue(this.draftHour, this.draftMinute ?? 0);
+    const newValue = this.formatValue(
+      this.draftHour,
+      this.draftMinute ?? 0,
+      this.draftSecond ?? 0
+    );
     this.value = newValue;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
@@ -17313,6 +18314,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const now = /* @__PURE__ */ new Date();
     const step = this.minuteStepSafe;
     this.draftHour = now.getHours();
+    this.draftSecond = this.seconds ? now.getSeconds() : null;
     this.draftMinute = Math.round(now.getMinutes() / step) * step;
     if (this.draftMinute >= 60) {
       this.draftMinute = 0;
@@ -17335,6 +18337,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.value = null;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: null },
@@ -17363,6 +18366,20 @@ var RelTimePicker = class extends import_lit54.LitElement {
     if (!this.isTimeInRange(this.draftHour, minute)) return;
     this.draftMinute = minute;
   }
+  selectSecond(second) {
+    if (this.draftHour === null) {
+      for (let h = 0; h < 24; h++) {
+        if (this.isHourEnabled(h)) {
+          this.draftHour = h;
+          break;
+        }
+      }
+      if (this.draftHour === null) return;
+    }
+    if (this.draftMinute === null) this.draftMinute = 0;
+    this.draftSecond = second;
+    this.clampDraftToRange();
+  }
   selectPeriod(period) {
     if (!this.isPeriodEnabled(period)) return;
     const base = period === "AM" ? 0 : 12;
@@ -17380,9 +18397,27 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.clampDraftToRange();
     this.scrollColumnsToSelection();
   }
+  /**
+   * 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).
+   */
+  scrollOptionInColumn(btn, block) {
+    const list = btn.parentElement;
+    if (!list) return;
+    const top = btn.offsetTop;
+    const height = btn.offsetHeight;
+    if (block === "center") {
+      list.scrollTop = top - (list.clientHeight - height) / 2;
+    } else if (top < list.scrollTop) {
+      list.scrollTop = top;
+    } else if (top + height > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + height - list.clientHeight;
+    }
+  }
   scrollColumnsToSelection() {
     this.updateComplete.then(() => {
-      this.columnsElement?.querySelectorAll(".option-button.selected").forEach((btn) => btn.scrollIntoView({ block: "center" }));
+      this.columnsElement?.querySelectorAll(".option-button.selected").forEach((btn) => this.scrollOptionInColumn(btn, "center"));
     });
   }
   // ── Keyboard ──
@@ -17439,19 +18474,23 @@ var RelTimePicker = class extends import_lit54.LitElement {
     }
     if (target && target !== buttons[index]) {
       target.click();
-      target.focus();
-      target.scrollIntoView({ block: "nearest" });
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
     }
   }
   focusAdjacentColumn(from, direction) {
-    const order = this.format === "12h" ? ["hour", "minute", "period"] : ["hour", "minute"];
+    const order = ["hour", "minute"];
+    if (this.seconds) order.push("second");
+    if (this.format === "12h") order.push("period");
     const nextIndex = order.indexOf(from) + direction;
     if (nextIndex < 0 || nextIndex >= order.length) return;
     const lists = this.columnsElement?.querySelectorAll(".column-list");
     const list = lists?.[nextIndex];
     const target = list?.querySelector(".option-button.selected:not(:disabled)") ?? list?.querySelector(".option-button:not(:disabled)");
-    target?.focus();
-    target?.scrollIntoView({ block: "nearest" });
+    if (target) {
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
+    }
   }
   // ── Render ──
   render() {
@@ -17459,10 +18498,10 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
     const describedById = belowText ? "time-picker-desc" : void 0;
     const parsedValue = this.parseTime(this.value);
-    const displayText = parsedValue ? this.formatDisplay(parsedValue.hour, parsedValue.minute) : "";
-    const draftDisplay = this.draftHour !== null ? this.formatDisplay(this.draftHour, this.draftMinute ?? 0) : "";
+    const displayText = parsedValue ? this.formatDisplay(parsedValue.hour, parsedValue.minute, parsedValue.second) : "";
     const hourOptions = this.getHourOptions();
     const minuteOptions = this.getMinuteOptions();
+    const secondOptions = this.seconds ? this.getSecondOptions() : [];
     const draftPeriod = this.draftPeriod;
     const wrapperClasses = [
       "time-picker-wrapper",
@@ -17527,104 +18566,106 @@ var RelTimePicker = class extends import_lit54.LitElement {
 
         <div
           part="panel"
-          class="popover ${this.open ? "open" : ""}"
+          class="popover ${this.open ? "open" : ""} ${this.openUp ? "open-up" : ""}"
           role="dialog"
           aria-label="Choose time"
         >
-          <div class="time-readout">
-            <span class="time-readout-label">Time</span>
-            <span class="time-readout-value ${draftDisplay ? "" : "empty"}">
-              ${draftDisplay || (this.format === "24h" ? "--:--" : "--:-- --")}
-            </span>
-          </div>
-
           <div class="columns">
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Hour</div>
-              <div class="column-list" role="listbox" aria-label="Hours">
-                ${hourOptions.map(
+            <div class="column-list" role="listbox" aria-label="Hours">
+              ${hourOptions.map(
       (opt, i) => import_lit54.html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftHour === opt.hour24 ? "selected" : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftHour === opt.hour24}
-                      ?disabled=${!this.isHourEnabled(opt.hour24)}
-                      @click=${() => this.selectHour(opt.hour24)}
-                      @keydown=${(e) => this.handleOptionKeydown(e, "hour")}
-                      tabindex=${this.draftHour === opt.hour24 || this.draftHour === null && i === 0 ? 0 : -1}
-                    >
-                      ${opt.label}
-                    </button>
-                  `
+                  <button
+                    part="option"
+                    class="option-button ${this.draftHour === opt.hour24 ? "selected" : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftHour === opt.hour24}
+                    ?disabled=${!this.isHourEnabled(opt.hour24)}
+                    @click=${() => this.selectHour(opt.hour24)}
+                    @keydown=${(e) => this.handleOptionKeydown(e, "hour")}
+                    tabindex=${this.draftHour === opt.hour24 || this.draftHour === null && i === 0 ? 0 : -1}
+                  >
+                    ${opt.label}
+                  </button>
+                `
     )}
-              </div>
             </div>
 
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Min</div>
-              <div class="column-list" role="listbox" aria-label="Minutes">
-                ${minuteOptions.map(
+            <div class="column-divider" aria-hidden="true"></div>
+
+            <div class="column-list" role="listbox" aria-label="Minutes">
+              ${minuteOptions.map(
       (m, i) => import_lit54.html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftMinute === m ? "selected" : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftMinute === m}
-                      ?disabled=${this.draftHour !== null && !this.isTimeInRange(this.draftHour, m)}
-                      @click=${() => this.selectMinute(m)}
-                      @keydown=${(e) => this.handleOptionKeydown(e, "minute")}
-                      tabindex=${this.draftMinute === m || this.draftMinute === null && i === 0 ? 0 : -1}
-                    >
-                      ${String(m).padStart(2, "0")}
-                    </button>
-                  `
+                  <button
+                    part="option"
+                    class="option-button ${this.draftMinute === m ? "selected" : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftMinute === m}
+                    ?disabled=${this.draftHour !== null && !this.isTimeInRange(this.draftHour, m)}
+                    @click=${() => this.selectMinute(m)}
+                    @keydown=${(e) => this.handleOptionKeydown(e, "minute")}
+                    tabindex=${this.draftMinute === m || this.draftMinute === null && i === 0 ? 0 : -1}
+                  >
+                    ${String(m).padStart(2, "0")}
+                  </button>
+                `
     )}
-              </div>
             </div>
 
+            ${this.seconds ? import_lit54.html`
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="Seconds">
+                    ${secondOptions.map(
+      (s, i) => import_lit54.html`
+                        <button
+                          part="option"
+                          class="option-button ${this.draftSecond === s ? "selected" : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${this.draftSecond === s}
+                          @click=${() => this.selectSecond(s)}
+                          @keydown=${(e) => this.handleOptionKeydown(e, "second")}
+                          tabindex=${this.draftSecond === s || this.draftSecond === null && i === 0 ? 0 : -1}
+                        >
+                          ${String(s).padStart(2, "0")}
+                        </button>
+                      `
+    )}
+                  </div>
+                ` : import_lit54.nothing}
             ${this.format === "12h" ? import_lit54.html`
-                  <div class="column">
-                    <div class="column-header" aria-hidden="true">AM/PM</div>
-                    <div class="column-list" role="listbox" aria-label="AM or PM">
-                      ${["AM", "PM"].map(
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="AM or PM">
+                    ${["AM", "PM"].map(
       (p) => import_lit54.html`
-                          <button
-                            part="option"
-                            class="option-button ${draftPeriod === p ? "selected" : ""}"
-                            type="button"
-                            role="option"
-                            aria-selected=${draftPeriod === p}
-                            ?disabled=${!this.isPeriodEnabled(p)}
-                            @click=${() => this.selectPeriod(p)}
-                            @keydown=${(e) => this.handleOptionKeydown(e, "period")}
-                            tabindex=${draftPeriod === p || draftPeriod === null && p === "AM" ? 0 : -1}
-                          >
-                            ${p}
-                          </button>
-                        `
+                        <button
+                          part="option"
+                          class="option-button ${draftPeriod === p ? "selected" : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${draftPeriod === p}
+                          ?disabled=${!this.isPeriodEnabled(p)}
+                          @click=${() => this.selectPeriod(p)}
+                          @keydown=${(e) => this.handleOptionKeydown(e, "period")}
+                          tabindex=${draftPeriod === p || draftPeriod === null && p === "AM" ? 0 : -1}
+                        >
+                          ${p}
+                        </button>
+                      `
     )}
-                    </div>
                   </div>
                 ` : import_lit54.nothing}
           </div>
 
           <div part="footer" class="time-footer">
-            <rel-button
-              variant="secondary"
-              size="small"
-              border="corner-radius"
-              @click=${() => this.selectNow()}
-            >
+            <rel-button variant="link" size="small" @click=${() => this.selectNow()}>
               Now
             </rel-button>
             <div class="footer-right">
               <rel-button
-                variant="secondary"
+                variant="ghost"
                 size="small"
-                border="corner-radius"
                 @click=${() => this.cancelPopover()}
               >
                 Cancel
@@ -17633,11 +18674,10 @@ var RelTimePicker = class extends import_lit54.LitElement {
                 variant="primary"
                 tone="default"
                 size="small"
-                border="corner-radius"
                 ?disabled=${this.draftHour === null}
                 @click=${() => this.applySelection()}
               >
-                Apply
+                OK
               </rel-button>
             </div>
           </div>
@@ -17821,16 +18861,19 @@ RelTimePicker.styles = import_lit54.css`
       height: 16px;
     }
 
+    /* Panel (Figma "Time Picker"): fixed width per size, full-bleed content. */
     .popover {
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
       z-index: 1000;
       background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
+      border: 1px solid var(--rel-border-subtle);
       border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-md);
+      overflow: hidden;
+      min-width: 220px;
+      width: 250px;
       display: none;
     }
 
@@ -17838,94 +18881,79 @@ RelTimePicker.styles = import_lit54.css`
       display: block;
     }
 
-    /* Draft readout (mirrors the range-picker FROM/TO block) */
-    .time-readout {
-      display: flex;
-      align-items: baseline;
-      gap: var(--rel-spacing-sm);
-      padding-bottom: var(--rel-spacing-sm);
-      margin-bottom: var(--rel-spacing-sm);
-      border-bottom: 1px solid var(--rel-border-subtle);
-    }
-
-    .time-readout-label {
-      color: var(--rel-text-placeholder);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    .time-readout-value {
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
-    }
-
-    .time-readout-value.empty {
-      color: var(--rel-text-placeholder);
+    /* Flip above the field when the viewport has no room below. */
+    .popover.open-up {
+      top: auto;
+      bottom: calc(100% + 4px);
     }
 
+    /* Full-bleed column row with 1px dividers (Figma "Columns"). */
     .columns {
       display: flex;
-      gap: var(--rel-spacing-xs);
-    }
-
-    /* Columns share the panel width equally, so the two-column 24h layout
-       fills the same footprint the footer dictates instead of bunching left. */
-    .column {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 64px;
+      align-items: stretch;
+      height: 260px;
     }
 
-    .column-header {
-      text-align: center;
-      color: var(--rel-text-placeholder);
-      padding: var(--rel-spacing-xs);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+    .column-divider {
+      flex-shrink: 0;
+      width: 1px;
+      background: var(--rel-border-subtle);
     }
 
+    /* Each column scrolls independently. The 4px rail is always reserved
+       (scrollbar-gutter) so columns stay aligned whether or not they
+       overflow; the thumb only appears on overflow. */
     .column-list {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-      max-height: 224px;
+      /* Positioned so option offsetTop is list-relative — the in-column
+         scroll math depends on it (we never scrollIntoView: it scrolls every
+         ancestor, page included). */
+      position: relative;
       overflow-y: auto;
-      padding: var(--rel-spacing-3xs);
+      padding: var(--rel-spacing-2xs);
       scrollbar-width: thin;
+      scrollbar-color: var(--rel-border-default) transparent;
+      scrollbar-gutter: stable;
     }
 
+    .column-list::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .column-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .column-list::-webkit-scrollbar-thumb {
+      background: var(--rel-border-default);
+      border-radius: var(--rel-border-radius-full-rounded);
+    }
+
+    /* Option cell (Figma ".Time Option"): selected uses the neutral
+       elevated-2 fill + medium weight, NOT the brand color. */
     .option-button {
       border: none;
       background: transparent;
-      border-radius: var(--rel-border-radius-sm);
+      border-radius: var(--rel-border-radius-xs);
       color: var(--rel-text-default);
       cursor: pointer;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      text-align: center;
       flex-shrink: 0;
-      transition: all 0.15s ease;
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      height: 36px;
+      padding: 0 var(--rel-spacing-xs);
+      text-align: center;
+      transition: background 0.15s ease;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .option-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-surface-elevated);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .option-button:focus-visible {
@@ -17935,9 +18963,9 @@ RelTimePicker.styles = import_lit54.css`
     }
 
     .option-button.selected {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      font-weight: var(--rel-body-md-semibold-font-weight);
+      background: var(--rel-bg-neutral-elevated-2);
+      color: var(--rel-text-default);
+      font-weight: var(--rel-body-md-medium-font-weight);
     }
 
     .option-button:disabled {
@@ -17950,14 +18978,15 @@ RelTimePicker.styles = import_lit54.css`
       background: transparent;
     }
 
-    /* Footer (mirrors the range-picker calendar-footer) */
+    /* Footer (Figma "Footer"): 8px padding + 8px extra left so the "Now"
+       link aligns with the buttons' inner padding. Buttons are always S. */
     .time-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-sm);
-      padding-top: var(--rel-spacing-sm);
-      margin-top: var(--rel-spacing-sm);
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-xs);
+      padding-left: calc(var(--rel-spacing-xs) * 2);
       border-top: 1px solid var(--rel-border-subtle);
     }
 
@@ -17967,6 +18996,56 @@ RelTimePicker.styles = import_lit54.css`
       gap: var(--rel-spacing-xs);
     }
 
+    /* The design narrows OK below the DS small min-width (60 vs 80) so the
+       compact footer fits the 220px panel. */
+    .footer-right rel-button[variant="primary"] {
+      --rel-button-min-width: 60px;
+    }
+
+    /* Panel size variants (Figma S/M/L): width 220/250/280, option height
+       32/36/40, body-sm/md/lg type. Medium is the base above. */
+    .time-picker-wrapper.small .popover {
+      width: 220px;
+    }
+
+    .time-picker-wrapper.small .columns {
+      height: 232px;
+    }
+
+    .time-picker-wrapper.small .option-button {
+      height: 32px;
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+    .time-picker-wrapper.small .option-button.selected {
+      font-weight: var(--rel-body-sm-medium-font-weight);
+    }
+
+    .time-picker-wrapper.large .popover {
+      width: 280px;
+    }
+
+    .time-picker-wrapper.large .columns {
+      height: 288px;
+    }
+
+    .time-picker-wrapper.large .option-button {
+      height: 40px;
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+    }
+
+    .time-picker-wrapper.large .option-button.selected {
+      font-weight: var(--rel-body-lg-medium-font-weight);
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .trigger-button,
       .icon-button,
@@ -17996,6 +19075,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators54.property)({ type: String })
 ], RelTimePicker.prototype, "format", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "seconds", 2);
 __decorateClass([
   (0, import_decorators54.property)({ type: Number, attribute: "minute-step" })
 ], RelTimePicker.prototype, "minuteStep", 2);
@@ -18041,6 +19123,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators54.state)()
 ], RelTimePicker.prototype, "draftMinute", 2);
+__decorateClass([
+  (0, import_decorators54.state)()
+], RelTimePicker.prototype, "draftSecond", 2);
+__decorateClass([
+  (0, import_decorators54.state)()
+], RelTimePicker.prototype, "openUp", 2);
 __decorateClass([
   (0, import_decorators54.query)(".trigger-button")
 ], RelTimePicker.prototype, "triggerButton", 2);
@@ -18279,6 +19367,26 @@ var RelTooltip = class extends import_lit56.LitElement {
     this.type = "single-line";
     // Stable id so aria-describedby can reference the bubble across renders.
     this.uniqueId = Math.random().toString(36).slice(2);
+    /** APG: Escape dismisses the tooltip. Not swallowed — an enclosing dialog
+     *  may legitimately close on the same keystroke. */
+    this.onKeydown = (e) => {
+      if (e.key === "Escape") this.toggleAttribute("data-dismissed", true);
+    };
+    this.clearDismissed = () => {
+      this.removeAttribute("data-dismissed");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.onKeydown);
+    this.addEventListener("mouseleave", this.clearDismissed);
+    this.addEventListener("focusout", this.clearDismissed);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.onKeydown);
+    this.removeEventListener("mouseleave", this.clearDismissed);
+    this.removeEventListener("focusout", this.clearDismissed);
   }
   firstUpdated() {
     this.linkTrigger();
@@ -18345,6 +19453,12 @@ RelTooltip.styles = import_lit56.css`
       opacity: 1;
     }
 
+    /* Escape-dismissed (APG): stays hidden until hover/focus leaves and
+       returns. Declared after the hover/focus rules so source order wins. */
+    :host([data-dismissed]) .tooltip-bubble {
+      opacity: 0;
+    }
+
     /* Positioning */
     .tooltip-bubble.above {
       bottom: calc(100% + 6px);
@@ -19341,6 +20455,7 @@ RelUploadActions = __decorateClass([
 __reExport(index_exports, require("@reliability-design/icons"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FocusTrap,
   RelAccordion,
   RelAlert,
   RelAutocomplete,
@@ -19402,6 +20517,15 @@ __reExport(index_exports, require("@reliability-design/icons"), module.exports);
   RelTopbarUtilities,
   RelUpload,
   RelUploadActions,
+  bindShortcut,
+  formatShortcutParts,
+  getDeepActiveElement,
+  getFocusableElements,
+  isApplePlatform,
+  isEditableTarget,
+  matchesShortcut,
+  parseShortcut,
+  trapTabKey,
   ...require("@reliability-design/icons")
 });
 //# sourceMappingURL=index.js.map