@reliability-design/web 1.4.4 → 1.4.5

package/dist/index.mjs

@@ -24,6 +24,8 @@ var RelAccordion = class extends 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;
@@ -40,9 +42,11 @@ var RelAccordion = class extends 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 === " ") {
@@ -65,7 +69,14 @@ var RelAccordion = class extends 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>
@@ -2755,9 +2766,12 @@ RelButton.styles = css8`
       }
     }
 
-    /* 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);
@@ -2768,6 +2782,7 @@ RelButton.styles = css8`
 
     .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);
@@ -2779,6 +2794,7 @@ RelButton.styles = css8`
 
     .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);
@@ -2885,6 +2901,11 @@ RelButton.styles = css8`
       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);
     }
@@ -2893,6 +2914,8 @@ RelButton.styles = css8`
       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) {
@@ -2921,6 +2944,7 @@ RelButton.styles = css8`
     /* 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 {
@@ -2939,6 +2963,7 @@ RelButton.styles = css8`
       width: 40px;
       height: 40px;
       padding: 0;
+      min-width: 0;
       border-radius: 50%;
     }
     .btn-icon.tone-default {
@@ -2983,7 +3008,9 @@ RelButton.styles = css8`
        .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);
     }
 
@@ -3335,9 +3362,28 @@ var RelCalendar = class extends LitElement9 {
       });
     }
   }
+  /**
+   * 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 html9`
       <div role="grid" aria-label="Calendar">
         <div part="header" class="header">
@@ -3390,7 +3436,7 @@ var RelCalendar = class extends LitElement9 {
                 ?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>
@@ -3690,12 +3736,23 @@ var RelCarousel = class extends LitElement11 {
     // 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();
     }
@@ -3727,6 +3784,8 @@ var RelCarousel = class extends LitElement11 {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
     this._ro?.disconnect();
     this.stopAutoplay();
     if (this.animationId) {
@@ -4041,6 +4100,7 @@ var RelCarousel = class extends LitElement11 {
                       class="dot ${i === this.value ? "active" : ""}"
                       part="dot"
                       aria-label="Go to slide ${i + 1}"
+                      aria-current="${i === this.value ? "true" : nothing5}"
                       @click=${() => this.goToSlide(i)}
                     ></button>
                   `) : nothing5}
@@ -4421,7 +4481,7 @@ RelCardMedia = __decorateClass([
 ], RelCardMedia);
 
 // src/components/rel-checkbox/rel-checkbox.ts
-import { LitElement as LitElement13, html as html13, css as css13 } from "lit";
+import { LitElement as LitElement13, html as html13, css as css13, nothing as nothing6 } from "lit";
 import { customElement as customElement13, property as property13 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelCheckbox = class extends LitElement13 {
@@ -4488,6 +4548,9 @@ var RelCheckbox = class extends LitElement13 {
         <label class="row">
           <input
             type="checkbox"
+            .checked=${this.status === "checked"}
+            .indeterminate=${this.status === "indeterminate"}
+            aria-checked="${this.status === "indeterminate" ? "mixed" : nothing6}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
@@ -4801,7 +4864,7 @@ RelCheckbox = __decorateClass([
 ], RelCheckbox);
 
 // src/components/rel-date-picker/rel-date-picker.ts
-import { LitElement as LitElement14, html as html14, css as css14, nothing as nothing6 } from "lit";
+import { LitElement as LitElement14, html as html14, css as css14, nothing as nothing7 } from "lit";
 import { customElement as customElement14, property as property14, state as state5, query as query3 } from "lit/decorators.js";
 
 // src/components/rel-date-picker/date-format.ts
@@ -4826,6 +4889,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 LitElement14 {
   constructor() {
@@ -4863,9 +5029,58 @@ var RelDatePicker = class extends LitElement14 {
       }
     };
     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
@@ -4902,10 +5117,12 @@ var RelDatePicker = class extends LitElement14 {
     }
     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);
     }
   }
@@ -5203,27 +5420,67 @@ var RelDatePicker = class extends LitElement14 {
     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;
@@ -5236,10 +5493,10 @@ var RelDatePicker = class extends LitElement14 {
     return html14`
       <div part="base" class="${wrapperClasses}">
         ${this.label ? html14`<label part="label" class="label" id="date-picker-label"
-              >${this.label}${this.required ? html14`<span class="required-mark" aria-hidden="true">*</span>` : nothing6}</label
-            >` : nothing6}
+              >${this.label}${this.required ? html14`<span class="required-mark" aria-hidden="true">*</span>` : nothing7}</label
+            >` : nothing7}
 
-        ${this.name ? html14`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing6}
+        ${this.name ? html14`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing7}
 
         <button
           class="trigger-button ${isError ? "error" : ""}"
@@ -5253,8 +5510,8 @@ var RelDatePicker = class extends LitElement14 {
           aria-required=${this.required}
           aria-invalid=${isError}
           aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing6}
-          aria-labelledby=${this.label ? "date-picker-label" : nothing6}
+          aria-describedby=${describedById ?? nothing7}
+          aria-labelledby=${this.label ? "date-picker-label" : nothing7}
         >
           <span class="trigger-content ${this.value ? "" : "placeholder"}">
             ${this.value ? this.formatDisplayDate(this.value) : this.placeholder}
@@ -5276,7 +5533,7 @@ var RelDatePicker = class extends LitElement14 {
                       />
                     </svg>
                   </button>
-                ` : nothing6}
+                ` : nothing7}
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path
                 d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"
@@ -5310,22 +5567,31 @@ var RelDatePicker = class extends LitElement14 {
                 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) => html14`
-                    <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>
@@ -5336,22 +5602,31 @@ var RelDatePicker = class extends LitElement14 {
                 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) => html14`
-                    <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>
@@ -5394,7 +5669,7 @@ var RelDatePicker = class extends LitElement14 {
                   ?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>
@@ -5405,7 +5680,7 @@ var RelDatePicker = class extends LitElement14 {
 
         ${belowText ? html14`<div class="date-picker-support ${isError ? "error" : ""}" id=${describedById}>
               ${belowText}
-            </div>` : nothing6}
+            </div>` : nothing7}
       </div>
     `;
   }
@@ -5688,6 +5963,11 @@ RelDatePicker.styles = css14`
     }
 
     .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);
@@ -5699,6 +5979,11 @@ RelDatePicker.styles = css14`
       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);
     }
@@ -5897,7 +6182,7 @@ RelDatePicker = __decorateClass([
 ], RelDatePicker);
 
 // src/components/rel-range-picker/rel-range-picker.ts
-import { LitElement as LitElement15, html as html15, css as css15, nothing as nothing7 } from "lit";
+import { LitElement as LitElement15, html as html15, css as css15, nothing as nothing8 } from "lit";
 import { customElement as customElement15, property as property15, state as state6, query as query4 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelRangePicker = class extends LitElement15 {
@@ -5927,6 +6212,7 @@ var RelRangePicker = class extends LitElement15 {
     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();
     };
@@ -5983,6 +6269,69 @@ var RelRangePicker = class extends LitElement15 {
       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() {
@@ -6067,6 +6416,7 @@ var RelRangePicker = class extends LitElement15 {
     this.draftActivePreset = null;
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
     if (this.draftFrom) {
       const date = this.parseISODate(this.draftFrom);
       if (date) {
@@ -6365,10 +6715,45 @@ var RelRangePicker = class extends LitElement15 {
     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) : "";
@@ -6407,7 +6792,7 @@ var RelRangePicker = class extends LitElement15 {
             </button>
           `}
 
-      ${isPopup && this.open ? html15`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>` : nothing7}
+      ${isPopup && this.open ? html15`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>` : nothing8}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
@@ -6435,7 +6820,7 @@ var RelRangePicker = class extends LitElement15 {
                           <circle cx="12" cy="12" r="12" fill="var(--rel-bg-brand)"/>
                           <path d="M7 12.5l3.5 3.5 6.5-7" stroke="var(--rel-text-static-dark)" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>` : nothing7}
+                        </svg>` : nothing8}
                   </button>
                 `
     )}
@@ -6497,8 +6882,10 @@ var RelRangePicker = class extends LitElement15 {
               @mouseleave=${() => {
       this.hoverDate = null;
     }}
+              @keydown=${this.handleGridKeydown}
             >
               ${days.map((day) => {
+      const iso = this.formatISODate(day.date);
       const cellClasses = [
         "day-cell",
         day.isInRange ? "in-range" : "",
@@ -6513,8 +6900,11 @@ var RelRangePicker = class extends LitElement15 {
                   <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" : nothing8}"
                     @click=${() => this.handleDayClick(day)}
                     @mouseenter=${() => this.handleDayHover(day)}
                   >
@@ -6859,6 +7249,12 @@ RelRangePicker.styles = css15`
       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;
@@ -7034,6 +7430,9 @@ __decorateClass([
 __decorateClass([
   state6()
 ], RelRangePicker.prototype, "hoverDate", 2);
+__decorateClass([
+  state6()
+], RelRangePicker.prototype, "focusedDate", 2);
 __decorateClass([
   query4(".trigger-button")
 ], RelRangePicker.prototype, "triggerButton", 2);
@@ -7063,6 +7462,33 @@ var RelChip = class extends LitElement16 {
     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;
@@ -7116,6 +7542,7 @@ var RelChip = class extends LitElement16 {
         role="button"
         tabindex="0"
         aria-label="${this.label}"
+        @keydown=${this.handleKeydown}
       >
         ${showAvatar ? html16`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>` : null}
         ${showLeadingIcon ? html16`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>` : null}
@@ -7707,26 +8134,8 @@ var RelDrawer = class extends LitElement20 {
         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
@@ -7785,12 +8194,19 @@ var RelDrawer = class extends LitElement20 {
     }
   }
   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);
@@ -7852,29 +8268,6 @@ var RelDrawer = class extends LitElement20 {
     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) {
@@ -8282,7 +8675,7 @@ RelDrawer = __decorateClass([
 ], RelDrawer);
 
 // src/components/rel-kbd/rel-kbd.ts
-import { LitElement as LitElement21, html as html21, css as css21, nothing as nothing8 } from "lit";
+import { LitElement as LitElement21, html as html21, css as css21, nothing as nothing9 } from "lit";
 import { customElement as customElement21, property as property20 } from "lit/decorators.js";
 var RelKbd = class extends LitElement21 {
   constructor() {
@@ -8436,7 +8829,7 @@ var RelKbdGroup = class extends LitElement21 {
     return html21`
       ${this.items.map(
       (key, i) => html21`
-          ${i > 0 ? html21`<span part="label" class="separator" aria-hidden="true">+</span>` : nothing8}
+          ${i > 0 ? html21`<span part="label" class="separator" aria-hidden="true">+</span>` : nothing9}
           <rel-kbd part="item" size=${this.size} variant=${this.variant}>${key}</rel-kbd>
         `
     )}
@@ -8536,7 +8929,7 @@ RelLayout = __decorateClass([
 ], RelLayout);
 
 // src/components/rel-menu/rel-menu.ts
-import { LitElement as LitElement24, html as html24 } from "lit";
+import { LitElement as LitElement24, html as html24, nothing as nothing10 } from "lit";
 import { customElement as customElement24, property as property23, state as state9 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
@@ -8885,12 +9278,16 @@ var RelMenu = class extends LitElement24 {
     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 }));
       }
     };
@@ -8977,35 +9374,95 @@ var RelMenu = class extends LitElement24 {
       })
     );
   }
+  /** 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) : nothing10;
     const control = this.type === "checkbox" ? html24`<rel-checkbox
             class="menu-control"
             label="${item.label}"
@@ -9023,8 +9480,13 @@ var RelMenu = class extends LitElement24 {
           `;
     return html24`
       <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" : nothing10}"
+        aria-haspopup="${hasSubmenu ? "menu" : nothing10}"
+        aria-expanded="${hasSubmenu ? String(!!item.open) : nothing10}"
         ?data-focused="${isFocused}"
         @mouseenter="${() => this.onItemEnter(item, index)}"
         @mouseleave="${() => this.onItemLeave(item, index)}"
@@ -9033,12 +9495,16 @@ var RelMenu = class extends LitElement24 {
         ${hasSubmenu ? html24`
               <div
                 part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
+                role="menu"
                 @click="${(e) => e.stopPropagation()}">
                 ${item.submenu.map(
       (sub, subIndex) => html24`
                     <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" : nothing10}"
+                      ?data-focused="${this.focusedIndex === index && this.subFocusedIndex === subIndex}"
                       @click="${(e) => this.onSubClick(index, subIndex, e)}">
                       <span class="menu-label">${sub.label}</span>
                     </div>
@@ -9050,12 +9516,14 @@ var RelMenu = class extends LitElement24 {
     `;
   }
   render() {
+    const activeDescendant = this._items.length === 0 ? nothing10 : this.subFocusedIndex >= 0 ? `${this.menuId}-item-${this.focusedIndex}-sub-${this.subFocusedIndex}` : `${this.menuId}-item-${this.focusedIndex}`;
     return html24`
       <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))}
@@ -9145,7 +9613,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;
     }
@@ -9236,6 +9707,9 @@ __decorateClass([
 __decorateClass([
   state9()
 ], RelMenu.prototype, "focusedIndex", 2);
+__decorateClass([
+  state9()
+], RelMenu.prototype, "subFocusedIndex", 2);
 __decorateClass([
   state9()
 ], RelMenu.prototype, "_items", 2);
@@ -9244,18 +9718,161 @@ RelMenu = __decorateClass([
 ], RelMenu);
 
 // src/components/rel-menubar/rel-menubar.ts
-import { LitElement as LitElement25, html as html25 } from "lit";
-import { customElement as customElement25, state as state10 } from "lit/decorators.js";
+import { LitElement as LitElement25, html as html25, nothing as nothing11 } from "lit";
+import { customElement as customElement25, property as property24, state as state10 } from "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
 import "@reliability-design/icons/rel-icon";
 var RelMenubar = class extends LitElement25 {
   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();
@@ -9269,6 +9886,7 @@ var RelMenubar = class extends LitElement25 {
     super.connectedCallback();
     this.discoverMenus();
     document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("keydown", this.handleShortcutKeyDown);
     this._onScroll = () => {
       this._repositionOpenMenu();
       this._repositionOpenSubmenu();
@@ -9278,6 +9896,7 @@ var RelMenubar = class extends LitElement25 {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("keydown", this.handleShortcutKeyDown);
     if (this._onScroll) {
       window.removeEventListener("scroll", this._onScroll, { capture: true });
     }
@@ -9311,12 +9930,26 @@ var RelMenubar = class extends LitElement25 {
   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(() => {
@@ -9358,27 +9991,20 @@ var RelMenubar = class extends LitElement25 {
       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) {
@@ -9391,6 +10017,36 @@ var RelMenubar = class extends LitElement25 {
     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();
@@ -9400,30 +10056,56 @@ var RelMenubar = class extends LitElement25 {
       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")
@@ -9460,27 +10142,41 @@ var RelMenubar = class extends LitElement25 {
     } 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 };
@@ -9492,16 +10188,21 @@ var RelMenubar = class extends LitElement25 {
       })
     );
   }
-  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}` : nothing11;
     if (item.hasAttribute("data-item")) {
       const button = item;
       const disabled = button.disabled;
       const shortcut = button.getAttribute("data-shortcut") || "";
       return html25`
         <div
+          id="${itemId}"
           class="menu-item ${isFocused ? "focused" : ""}"
+          role="menuitem"
+          data-focus-index="${focusIndex}"
           data-disabled="${disabled}"
+          aria-disabled="${disabled ? "true" : nothing11}"
           @click="${() => !disabled && this.handleItemClick(item)}"
         >
           <span>${button.textContent}</span>
@@ -9510,7 +10211,7 @@ var RelMenubar = class extends LitElement25 {
       `;
     }
     if (item.hasAttribute("data-separator")) {
-      return html25`<div class="menu-separator"></div>`;
+      return html25`<div class="menu-separator" role="separator"></div>`;
     }
     if (item.hasAttribute("data-checkbox")) {
       const label = item;
@@ -9518,6 +10219,8 @@ var RelMenubar = class extends LitElement25 {
       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 html25`
         <rel-checkbox
+          id="${itemId}"
+          data-focus-index="${focusIndex}"
           label=${labelText}
           .status=${checkbox?.checked ? "checked" : "unchecked"}
           @rel-change=${(e) => {
@@ -9529,17 +10232,21 @@ var RelMenubar = class extends LitElement25 {
     }
     if (item.hasAttribute("data-submenu")) {
       const label = item.getAttribute("label") || item.textContent?.trim() || "";
-      const submenuId = `submenu-${index}`;
       return html25`
         <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")) {
@@ -9564,24 +10271,23 @@ var RelMenubar = class extends LitElement25 {
     }
     return null;
   }
-  renderSubmenu(submenuElement, submenuId) {
+  renderSubmenu(submenuElement) {
     const isOpen = this.openSubmenuElement === submenuElement;
-    const submenuItems = Array.from(submenuElement.children);
+    const submenuItems = this.getSubmenuItems(submenuElement);
     return html25`
-      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
-        ${submenuItems.map((subItem) => {
-      if (subItem.hasAttribute("data-item")) {
-        const button = subItem;
-        return html25`
-              <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 html25`
+            <div
+              id="${isOpen ? `${this.menubarId}-sub-${subIdx}` : nothing11}"
+              class="menu-item ${isOpen && subIdx === this.focusedSubItemIndex ? "focused" : ""}"
+              role="menuitem"
+              @click="${() => this.handleSubmenuItemClick(subItem)}"
+            >
+              <span>${button.textContent}</span>
+            </div>
+          `;
     })}
       </div>
     `;
@@ -9589,28 +10295,40 @@ var RelMenubar = class extends LitElement25 {
   renderMenuPanel(menuState, index) {
     const isOpen = index === this.openMenuIndex;
     const items = Array.from(menuState.menu.children);
+    const focusables = this.getFocusableItems(menuState.menu);
+    const activeDescendant = !isOpen ? nothing11 : this.focusedSubItemIndex >= 0 ? `${this.menubarId}-sub-${this.focusedSubItemIndex}` : this.focusedItemIndex >= 0 ? `${this.menubarId}-m${index}-i${this.focusedItemIndex}` : nothing11;
     return html25`
       <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 html25`
       <style>${RelMenubar._css}</style>
-      <div class="menubar-container">
+      <div class="menubar-container" role="menubar">
         ${this.menus.map(
       (menuState, index) => html25`
             <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}
@@ -9781,6 +10499,9 @@ RelMenubar._css = `
       cursor: pointer;
     }
   `;
+__decorateClass([
+  property24({ type: Boolean, attribute: "bind-shortcuts" })
+], RelMenubar.prototype, "bindShortcuts", 2);
 __decorateClass([
   state10()
 ], RelMenubar.prototype, "menus", 2);
@@ -9793,6 +10514,9 @@ __decorateClass([
 __decorateClass([
   state10()
 ], RelMenubar.prototype, "focusedItemIndex", 2);
+__decorateClass([
+  state10()
+], RelMenubar.prototype, "focusedSubItemIndex", 2);
 __decorateClass([
   state10()
 ], RelMenubar.prototype, "openSubmenuElement", 2);
@@ -9802,7 +10526,7 @@ RelMenubar = __decorateClass([
 
 // src/components/rel-menubar/rel-menubar-menu.ts
 import { LitElement as LitElement26, html as html26 } from "lit";
-import { customElement as customElement26, property as property24 } from "lit/decorators.js";
+import { customElement as customElement26, property as property25 } from "lit/decorators.js";
 import "./rel-menubar-menu-BEEQDAXW.css";
 var RelMenubarMenu = class extends LitElement26 {
   constructor() {
@@ -9818,7 +10542,7 @@ var RelMenubarMenu = class extends LitElement26 {
   }
 };
 __decorateClass([
-  property24({ type: String })
+  property25({ type: String })
 ], RelMenubarMenu.prototype, "label", 2);
 RelMenubarMenu = __decorateClass([
   customElement26("rel-menubar-menu")
@@ -9826,7 +10550,7 @@ RelMenubarMenu = __decorateClass([
 
 // src/components/rel-navbar/rel-navbar.ts
 import { LitElement as LitElement27, html as html27, css as css24 } from "lit";
-import { customElement as customElement27, property as property25 } from "lit/decorators.js";
+import { customElement as customElement27, property as property26 } from "lit/decorators.js";
 var RelNavbar = class extends LitElement27 {
   constructor() {
     super();
@@ -9917,10 +10641,10 @@ RelNavbar.styles = css24`
     }
   `;
 __decorateClass([
-  property25({ type: Boolean, reflect: true })
+  property26({ type: Boolean, reflect: true })
 ], RelNavbar.prototype, "sticky", 2);
 __decorateClass([
-  property25({ type: String })
+  property26({ type: String })
 ], RelNavbar.prototype, "device", 2);
 RelNavbar = __decorateClass([
   customElement27("rel-navbar")
@@ -9928,12 +10652,12 @@ RelNavbar = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar.ts
 import { LitElement as LitElement34, html as html34, css as css31 } from "lit";
-import { customElement as customElement34, property as property28, state as state11 } from "lit/decorators.js";
+import { customElement as customElement34, property as property29, state as state11 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
 // src/components/rel-topbar/rel-topbar-brand.ts
 import { LitElement as LitElement28, html as html28, css as css25 } from "lit";
-import { customElement as customElement28, property as property26 } from "lit/decorators.js";
+import { customElement as customElement28, property as property27 } from "lit/decorators.js";
 var RelTopbarBrand = class extends LitElement28 {
   constructor() {
     super(...arguments);
@@ -9974,13 +10698,13 @@ RelTopbarBrand.styles = css25`
     }
   `;
 __decorateClass([
-  property26({ type: String })
+  property27({ type: String })
 ], RelTopbarBrand.prototype, "src", 2);
 __decorateClass([
-  property26({ type: String })
+  property27({ type: String })
 ], RelTopbarBrand.prototype, "href", 2);
 __decorateClass([
-  property26({ type: String })
+  property27({ type: String })
 ], RelTopbarBrand.prototype, "label", 2);
 RelTopbarBrand = __decorateClass([
   customElement28("rel-topbar-brand")
@@ -10068,7 +10792,7 @@ RelTopbarDropdown = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar-dropdown-item.ts
 import { LitElement as LitElement33, html as html33, css as css30 } from "lit";
-import { customElement as customElement33, property as property27 } from "lit/decorators.js";
+import { customElement as customElement33, property as property28 } from "lit/decorators.js";
 var RelTopbarDropdownItem = class extends LitElement33 {
   constructor() {
     super(...arguments);
@@ -10127,13 +10851,13 @@ RelTopbarDropdownItem.styles = css30`
 
   `;
 __decorateClass([
-  property27({ type: String })
+  property28({ type: String })
 ], RelTopbarDropdownItem.prototype, "label", 2);
 __decorateClass([
-  property27({ type: String })
+  property28({ type: String })
 ], RelTopbarDropdownItem.prototype, "href", 2);
 __decorateClass([
-  property27({ type: Boolean, reflect: true })
+  property28({ type: Boolean, reflect: true })
 ], RelTopbarDropdownItem.prototype, "active", 2);
 RelTopbarDropdownItem = __decorateClass([
   customElement33("rel-topbar-dropdown-item")
@@ -10461,7 +11185,6 @@ RelTopbar.styles = css31`
       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);
@@ -10516,22 +11239,22 @@ RelTopbar.styles = css31`
     }
   `;
 __decorateClass([
-  property28({ type: String, reflect: true })
+  property29({ type: String, reflect: true })
 ], RelTopbar.prototype, "variant", 2);
 __decorateClass([
-  property28({ type: Boolean, reflect: true })
+  property29({ type: Boolean, reflect: true })
 ], RelTopbar.prototype, "mobileOpen", 2);
 __decorateClass([
-  property28({ type: Boolean, reflect: true })
+  property29({ type: Boolean, reflect: true })
 ], RelTopbar.prototype, "showMenuToggle", 2);
 __decorateClass([
-  property28({ type: Boolean, reflect: true })
+  property29({ type: Boolean, reflect: true })
 ], RelTopbar.prototype, "compact", 2);
 __decorateClass([
-  property28({ type: Boolean, reflect: true })
+  property29({ type: Boolean, reflect: true })
 ], RelTopbar.prototype, "sticky", 2);
 __decorateClass([
-  property28({ type: String })
+  property29({ type: String })
 ], RelTopbar.prototype, "forceLayout", 2);
 __decorateClass([
   state11()
@@ -10545,7 +11268,7 @@ RelTopbar = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar-item.ts
 import { LitElement as LitElement35, html as html35, css as css32 } from "lit";
-import { customElement as customElement35, property as property29, state as state12 } from "lit/decorators.js";
+import { customElement as customElement35, property as property30, state as state12 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelTopbarItem = class extends LitElement35 {
   constructor() {
@@ -10711,8 +11434,6 @@ RelTopbarItem.styles = css32`
       color: var(--_item-color);
 
 
-
-
       text-decoration: none;
       white-space: nowrap;
       position: relative;
@@ -10813,25 +11534,25 @@ RelTopbarItem.styles = css32`
     }
   `;
 __decorateClass([
-  property29({ type: String })
+  property30({ type: String })
 ], RelTopbarItem.prototype, "label", 2);
 __decorateClass([
-  property29({ type: String })
+  property30({ type: String })
 ], RelTopbarItem.prototype, "href", 2);
 __decorateClass([
-  property29({ type: Boolean, reflect: true })
+  property30({ type: Boolean, reflect: true })
 ], RelTopbarItem.prototype, "active", 2);
 __decorateClass([
-  property29({ type: Boolean, reflect: true })
+  property30({ type: Boolean, reflect: true })
 ], RelTopbarItem.prototype, "disabled", 2);
 __decorateClass([
-  property29({ type: Boolean, reflect: true })
+  property30({ type: Boolean, reflect: true })
 ], RelTopbarItem.prototype, "expandable", 2);
 __decorateClass([
-  property29({ type: Boolean, reflect: true })
+  property30({ type: Boolean, reflect: true })
 ], RelTopbarItem.prototype, "open", 2);
 __decorateClass([
-  property29({ type: String })
+  property30({ type: String })
 ], RelTopbarItem.prototype, "value", 2);
 __decorateClass([
   state12()
@@ -10842,7 +11563,7 @@ RelTopbarItem = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar-profile.ts
 import { LitElement as LitElement36, html as html36, css as css33 } from "lit";
-import { customElement as customElement36, property as property30 } from "lit/decorators.js";
+import { customElement as customElement36, property as property31 } from "lit/decorators.js";
 var RelTopbarProfile = class extends LitElement36 {
   constructor() {
     super(...arguments);
@@ -10944,9 +11665,7 @@ RelTopbarProfile.styles = css33`
 
     .name {
 
-
       color: var(--rel-text-default);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -10965,9 +11684,7 @@ RelTopbarProfile.styles = css33`
 
     .subtitle {
 
-
       color: var(--rel-text-placeholder);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -10992,9 +11709,7 @@ RelTopbarProfile.styles = css33`
       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);
@@ -11060,22 +11775,22 @@ RelTopbarProfile.styles = css33`
     }
   `;
 __decorateClass([
-  property30({ type: String, reflect: true })
+  property31({ type: String, reflect: true })
 ], RelTopbarProfile.prototype, "type", 2);
 __decorateClass([
-  property30({ type: String })
+  property31({ type: String })
 ], RelTopbarProfile.prototype, "initials", 2);
 __decorateClass([
-  property30({ type: String })
+  property31({ type: String })
 ], RelTopbarProfile.prototype, "name", 2);
 __decorateClass([
-  property30({ type: String })
+  property31({ type: String })
 ], RelTopbarProfile.prototype, "subtitle", 2);
 __decorateClass([
-  property30({ type: String, reflect: true })
+  property31({ type: String, reflect: true })
 ], RelTopbarProfile.prototype, "reward", 2);
 __decorateClass([
-  property30({ type: Boolean, reflect: true })
+  property31({ type: Boolean, reflect: true })
 ], RelTopbarProfile.prototype, "compact", 2);
 RelTopbarProfile = __decorateClass([
   customElement36("rel-topbar-profile")
@@ -11083,7 +11798,7 @@ RelTopbarProfile = __decorateClass([
 
 // src/components/rel-otp/rel-otp.ts
 import { LitElement as LitElement37, html as html37, css as css34 } from "lit";
-import { customElement as customElement37, property as property31, state as state13, query as query6 } from "lit/decorators.js";
+import { customElement as customElement37, property as property32, state as state13, query as query6 } from "lit/decorators.js";
 var RelOtp = class extends LitElement37 {
   constructor() {
     super(...arguments);
@@ -11341,7 +12056,7 @@ var RelOtp = class extends LitElement37 {
                     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"
@@ -11404,7 +12119,6 @@ RelOtp.styles = css34`
       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);
@@ -11425,7 +12139,6 @@ RelOtp.styles = css34`
       border-radius: var(--rel-border-radius-sm);
       background: var(--rel-bg-neutral);
 
-
       text-align: center;
       color: var(--rel-text-default);
       outline: none;
@@ -11515,55 +12228,55 @@ RelOtp.styles = css34`
 
   `;
 __decorateClass([
-  property31({ type: String, reflect: true })
+  property32({ type: String, reflect: true })
 ], RelOtp.prototype, "value", 2);
 __decorateClass([
-  property31({ type: Number })
+  property32({ type: Number })
 ], RelOtp.prototype, "length", 2);
 __decorateClass([
-  property31({ type: Number, attribute: "group-size" })
+  property32({ type: Number, attribute: "group-size" })
 ], RelOtp.prototype, "groupSize", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "placeholder", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "type", 2);
 __decorateClass([
-  property31({ type: Boolean })
+  property32({ type: Boolean })
 ], RelOtp.prototype, "mask", 2);
 __decorateClass([
-  property31({ type: Boolean, reflect: true })
+  property32({ type: Boolean, reflect: true })
 ], RelOtp.prototype, "disabled", 2);
 __decorateClass([
-  property31({ type: Boolean, reflect: true })
+  property32({ type: Boolean, reflect: true })
 ], RelOtp.prototype, "readonly", 2);
 __decorateClass([
-  property31({ type: Boolean })
+  property32({ type: Boolean })
 ], RelOtp.prototype, "required", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "name", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "autocomplete", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "inputmode", 2);
 __decorateClass([
-  property31({ type: String })
+  property32({ type: String })
 ], RelOtp.prototype, "pattern", 2);
 __decorateClass([
-  property31({ type: String, attribute: "aria-label" })
+  property32({ type: String, attribute: "aria-label" })
 ], RelOtp.prototype, "ariaLabel", 2);
 __decorateClass([
-  property31({ type: Boolean, reflect: true })
+  property32({ type: Boolean, reflect: true })
 ], RelOtp.prototype, "invalid", 2);
 __decorateClass([
-  property31({ type: Boolean, attribute: "show-separator" })
+  property32({ type: Boolean, attribute: "show-separator" })
 ], RelOtp.prototype, "showSeparator", 2);
 __decorateClass([
-  property31({ type: String, reflect: true })
+  property32({ type: String, reflect: true })
 ], RelOtp.prototype, "size", 2);
 __decorateClass([
   state13()
@@ -11576,8 +12289,8 @@ RelOtp = __decorateClass([
 ], RelOtp);
 
 // src/components/rel-pagination/rel-pagination.ts
-import { LitElement as LitElement38, html as html38, css as css35, nothing as nothing9 } from "lit";
-import { customElement as customElement38, property as property32, state as state14 } from "lit/decorators.js";
+import { LitElement as LitElement38, html as html38, css as css35, nothing as nothing12 } from "lit";
+import { customElement as customElement38, property as property33, state as state14 } from "lit/decorators.js";
 var RelPagination = class extends LitElement38 {
   constructor() {
     super(...arguments);
@@ -11709,7 +12422,7 @@ var RelPagination = class extends LitElement38 {
                 type="button"
                 class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
                 aria-label="Page ${p}"
-                title="${label === String(p) ? nothing9 : `Page ${p}`}"
+                title="${label === String(p) ? nothing12 : `Page ${p}`}"
                 aria-current="${p === current ? "page" : "false"}"
                 @click="${() => this.handlePageChange(p)}"
               >${label}</button>`;
@@ -12050,34 +12763,34 @@ RelPagination.styles = css35`
     }
   `;
 __decorateClass([
-  property32({ type: String, reflect: true })
+  property33({ type: String, reflect: true })
 ], RelPagination.prototype, "type", 2);
 __decorateClass([
-  property32({ type: Number })
+  property33({ type: Number })
 ], RelPagination.prototype, "page", 2);
 __decorateClass([
-  property32({ type: Number })
+  property33({ type: Number })
 ], RelPagination.prototype, "defaultPage", 2);
 __decorateClass([
-  property32({ type: Number })
+  property33({ type: Number })
 ], RelPagination.prototype, "totalPages", 2);
 __decorateClass([
-  property32({ type: Number })
+  property33({ type: Number })
 ], RelPagination.prototype, "totalItems", 2);
 __decorateClass([
-  property32({ type: Number })
+  property33({ type: Number })
 ], RelPagination.prototype, "perPage", 2);
 __decorateClass([
-  property32({ type: Boolean })
+  property33({ type: Boolean })
 ], RelPagination.prototype, "showLabel", 2);
 __decorateClass([
-  property32({ type: Boolean, reflect: true })
+  property33({ type: Boolean, reflect: true })
 ], RelPagination.prototype, "disabled", 2);
 __decorateClass([
-  property32({ type: String })
+  property33({ type: String })
 ], RelPagination.prototype, "hrefTemplate", 2);
 __decorateClass([
-  property32({ type: String })
+  property33({ type: String })
 ], RelPagination.prototype, "ariaLabel", 2);
 __decorateClass([
   state14()
@@ -12088,7 +12801,7 @@ RelPagination = __decorateClass([
 
 // src/components/rel-popover/rel-popover.ts
 import { LitElement as LitElement39, html as html39, css as css36 } from "lit";
-import { customElement as customElement39, property as property33, state as state15, query as query7 } from "lit/decorators.js";
+import { customElement as customElement39, property as property34, state as state15, query as query7 } from "lit/decorators.js";
 var RelPopover = class extends LitElement39 {
   constructor() {
     super(...arguments);
@@ -12117,6 +12830,14 @@ var RelPopover = class extends LitElement39 {
       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();
@@ -12190,10 +12911,12 @@ var RelPopover = class extends LitElement39 {
     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();
   }
@@ -12234,7 +12957,7 @@ var RelPopover = class extends LitElement39 {
    * OPEN / CLOSE
    * ======================= */
   onOpen() {
-    this.returnFocusEl = document.activeElement ?? this.triggerEl;
+    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
     this.addGlobalListeners();
     this.showNativePopover();
     requestAnimationFrame(() => {
@@ -12342,6 +13065,12 @@ var RelPopover = class extends LitElement39 {
     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
@@ -12402,34 +13131,34 @@ RelPopover.styles = css36`
     }
   `;
 __decorateClass([
-  property33({ type: Boolean, reflect: true })
+  property34({ type: Boolean, reflect: true })
 ], RelPopover.prototype, "open", 2);
 __decorateClass([
-  property33({ type: Boolean, attribute: "defaultopen" })
+  property34({ type: Boolean, attribute: "defaultopen" })
 ], RelPopover.prototype, "defaultOpen", 2);
 __decorateClass([
-  property33({ type: Boolean, reflect: true })
+  property34({ type: Boolean, reflect: true })
 ], RelPopover.prototype, "disabled", 2);
 __decorateClass([
-  property33({ type: String, reflect: true })
+  property34({ type: String, reflect: true })
 ], RelPopover.prototype, "side", 2);
 __decorateClass([
-  property33({ type: String, reflect: true })
+  property34({ type: String, reflect: true })
 ], RelPopover.prototype, "align", 2);
 __decorateClass([
-  property33({ type: Number, attribute: "sideoffset" })
+  property34({ type: Number, attribute: "sideoffset" })
 ], RelPopover.prototype, "sideOffset", 2);
 __decorateClass([
-  property33({ type: Number, attribute: "alignoffset" })
+  property34({ type: Number, attribute: "alignoffset" })
 ], RelPopover.prototype, "alignOffset", 2);
 __decorateClass([
-  property33({ type: Boolean, attribute: "trapfocus" })
+  property34({ type: Boolean, attribute: "trapfocus" })
 ], RelPopover.prototype, "trapFocus", 2);
 __decorateClass([
-  property33({ type: Boolean, attribute: "closeonescape" })
+  property34({ type: Boolean, attribute: "closeonescape" })
 ], RelPopover.prototype, "closeOnEscape", 2);
 __decorateClass([
-  property33({ type: Boolean, attribute: "closeonoutsideclick" })
+  property34({ type: Boolean, attribute: "closeonoutsideclick" })
 ], RelPopover.prototype, "closeOnOutsideClick", 2);
 __decorateClass([
   state15()
@@ -12446,7 +13175,7 @@ RelPopover = __decorateClass([
 
 // src/components/rel-popover/rel-popover-content.ts
 import { LitElement as LitElement40, html as html40, css as css37 } from "lit";
-import { customElement as customElement40, property as property34 } from "lit/decorators.js";
+import { customElement as customElement40, property as property35 } from "lit/decorators.js";
 var RelPopoverContent = class extends LitElement40 {
   constructor() {
     super(...arguments);
@@ -12524,10 +13253,10 @@ RelPopoverContent.styles = css37`
     }
   `;
 __decorateClass([
-  property34({ type: String, attribute: "aria-label" })
+  property35({ type: String, attribute: "aria-label" })
 ], RelPopoverContent.prototype, "ariaLabel", 2);
 __decorateClass([
-  property34({ type: String, reflect: true })
+  property35({ type: String, reflect: true })
 ], RelPopoverContent.prototype, "size", 2);
 RelPopoverContent = __decorateClass([
   customElement40("rel-popover-content")
@@ -12535,7 +13264,7 @@ RelPopoverContent = __decorateClass([
 
 // src/components/rel-progress/rel-progress.ts
 import { LitElement as LitElement41, html as html41, css as css38 } from "lit";
-import { customElement as customElement41, property as property35 } from "lit/decorators.js";
+import { customElement as customElement41, property as property36 } from "lit/decorators.js";
 var RelProgress = class extends LitElement41 {
   constructor() {
     super(...arguments);
@@ -12742,10 +13471,10 @@ RelProgress.styles = css38`
     }
   `;
 __decorateClass([
-  property35({ type: String, reflect: true })
+  property36({ type: String, reflect: true })
 ], RelProgress.prototype, "mode", 2);
 __decorateClass([
-  property35({ type: Number })
+  property36({ type: Number })
 ], RelProgress.prototype, "value", 2);
 RelProgress = __decorateClass([
   customElement41("rel-progress")
@@ -12753,7 +13482,7 @@ RelProgress = __decorateClass([
 
 // src/components/rel-resizable/rel-resizable-group.ts
 import { LitElement as LitElement42, html as html42, css as css39 } from "lit";
-import { customElement as customElement42, property as property36 } from "lit/decorators.js";
+import { customElement as customElement42, property as property37 } from "lit/decorators.js";
 var RelResizableGroup = class extends LitElement42 {
   constructor() {
     super(...arguments);
@@ -12821,6 +13550,14 @@ var RelResizableGroup = class extends LitElement42 {
         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");
@@ -12860,6 +13597,13 @@ var RelResizableGroup = class extends LitElement42 {
     });
     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 = [];
@@ -13030,7 +13774,7 @@ RelResizableGroup.styles = css39`
     }
   `;
 __decorateClass([
-  property36({ type: String, reflect: true })
+  property37({ type: String, reflect: true })
 ], RelResizableGroup.prototype, "direction", 2);
 RelResizableGroup = __decorateClass([
   customElement42("rel-resizable-group")
@@ -13038,7 +13782,7 @@ RelResizableGroup = __decorateClass([
 
 // src/components/rel-resizable/rel-resizable-panel.ts
 import { LitElement as LitElement43, html as html43, css as css40 } from "lit";
-import { customElement as customElement43, property as property37 } from "lit/decorators.js";
+import { customElement as customElement43, property as property38 } from "lit/decorators.js";
 var RelResizablePanel = class extends LitElement43 {
   constructor() {
     super(...arguments);
@@ -13080,13 +13824,13 @@ RelResizablePanel.styles = css40`
     }
   `;
 __decorateClass([
-  property37({ type: Number, attribute: "defaultsize" })
+  property38({ type: Number, attribute: "defaultsize" })
 ], RelResizablePanel.prototype, "defaultSize", 2);
 __decorateClass([
-  property37({ type: Number, attribute: "minsize" })
+  property38({ type: Number, attribute: "minsize" })
 ], RelResizablePanel.prototype, "minSize", 2);
 __decorateClass([
-  property37({ type: Number, attribute: "maxsize" })
+  property38({ type: Number, attribute: "maxsize" })
 ], RelResizablePanel.prototype, "maxSize", 2);
 RelResizablePanel = __decorateClass([
   customElement43("rel-resizable-panel")
@@ -13094,7 +13838,7 @@ RelResizablePanel = __decorateClass([
 
 // src/components/rel-resizable/rel-resizable-handle.ts
 import { LitElement as LitElement44, html as html44, css as css41 } from "lit";
-import { customElement as customElement44, property as property38 } from "lit/decorators.js";
+import { customElement as customElement44, property as property39 } from "lit/decorators.js";
 var RelResizableHandle = class extends LitElement44 {
   constructor() {
     super(...arguments);
@@ -13222,7 +13966,7 @@ RelResizableHandle.styles = css41`
     }
   `;
 __decorateClass([
-  property38({ type: String, reflect: true })
+  property39({ type: String, reflect: true })
 ], RelResizableHandle.prototype, "orientation", 2);
 RelResizableHandle = __decorateClass([
   customElement44("rel-resizable-handle")
@@ -13230,7 +13974,7 @@ RelResizableHandle = __decorateClass([
 
 // src/components/rel-segmented-button/rel-segmented-button.ts
 import { LitElement as LitElement45, html as html45, css as css42 } from "lit";
-import { customElement as customElement45, property as property39 } from "lit/decorators.js";
+import { customElement as customElement45, property as property40 } from "lit/decorators.js";
 var RelSegmentedButton = class extends LitElement45 {
   constructor() {
     super(...arguments);
@@ -13238,6 +13982,26 @@ var RelSegmentedButton = class extends LitElement45 {
     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) {
@@ -13251,7 +14015,7 @@ var RelSegmentedButton = class extends LitElement45 {
       );
     }
   }
-  renderSegment(option) {
+  renderSegment(option, rovingValue) {
     const isActive = this.active === option.value;
     const classes = [
       "segment",
@@ -13261,6 +14025,9 @@ var RelSegmentedButton = class extends LitElement45 {
     return html45`
       <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}
@@ -13273,9 +14040,15 @@ var RelSegmentedButton = class extends LitElement45 {
       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 html45`
-      <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>
     `;
   }
@@ -13386,24 +14159,24 @@ RelSegmentedButton.styles = css42`
     }
   `;
 __decorateClass([
-  property39({ type: Array })
+  property40({ type: Array })
 ], RelSegmentedButton.prototype, "options", 2);
 __decorateClass([
-  property39({ type: String })
+  property40({ type: String })
 ], RelSegmentedButton.prototype, "active", 2);
 __decorateClass([
-  property39({ type: String })
+  property40({ type: String })
 ], RelSegmentedButton.prototype, "size", 2);
 __decorateClass([
-  property39({ type: String })
+  property40({ type: String })
 ], RelSegmentedButton.prototype, "align", 2);
 RelSegmentedButton = __decorateClass([
   customElement45("rel-segmented-button")
 ], RelSegmentedButton);
 
 // src/components/rel-select/rel-select.ts
-import { LitElement as LitElement46, html as html46, css as css43, nothing as nothing10 } from "lit";
-import { customElement as customElement46, property as property40, state as state16, query as query8 } from "lit/decorators.js";
+import { LitElement as LitElement46, html as html46, css as css43, nothing as nothing13 } from "lit";
+import { customElement as customElement46, property as property41, state as state16, query as query8 } from "lit/decorators.js";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
 function normalizeOption(o) {
@@ -13437,6 +14210,8 @@ var RelSelect = class extends LitElement46 {
     this.noSearch = false;
     this.open = false;
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
+    this.typeaheadBuffer = "";
     this.panelStyle = "";
     this.searchValue = "";
     this.internalState = "default";
@@ -13485,6 +14260,7 @@ var RelSelect = class extends LitElement46 {
     this.onSearchInput = (e) => {
       this.searchValue = e.target.value;
       this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+      this.selectAllHighlighted = false;
       requestAnimationFrame(() => this.updatePosition());
     };
   }
@@ -13612,6 +14388,7 @@ var RelSelect = class extends LitElement46 {
     this.open = true;
     this.searchValue = "";
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
       this.showNativePopover();
@@ -13687,6 +14464,11 @@ var RelSelect = class extends LitElement46 {
   }
   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();
@@ -13697,26 +14479,60 @@ var RelSelect = class extends LitElement46 {
     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();
@@ -13725,8 +14541,55 @@ var RelSelect = class extends LitElement46 {
       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));
@@ -13755,7 +14618,7 @@ var RelSelect = class extends LitElement46 {
             `;
       }
     )}
-        ${overflow > 0 ? html46`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>` : nothing10}
+        ${overflow > 0 ? html46`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>` : nothing13}
       </span>
     `;
   }
@@ -13804,7 +14667,7 @@ var RelSelect = class extends LitElement46 {
       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 html46`
       <div class="${wrapperClasses}">
@@ -13825,8 +14688,8 @@ var RelSelect = class extends LitElement46 {
             aria-controls="${listboxId}"
             aria-activedescendant="${activeOptionId}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.fieldAriaLabelledby ? nothing10 : accessibleName || this.placeholder}"
-            aria-labelledby="${this.fieldAriaLabelledby ?? nothing10}"
+            aria-label="${this.fieldAriaLabelledby ? nothing13 : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing13}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -13850,7 +14713,7 @@ var RelSelect = class extends LitElement46 {
             ></rel-icon>
           </button>
 
-          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing10}
+          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing13}
         </div>
 
         ${this.supportingText ? html46`<span part="helper" class="select-support ${this.state === "error" ? "error" : ""}">
@@ -13882,7 +14745,17 @@ var RelSelect = class extends LitElement46 {
                       />
                     </div>
                   </div>` : ""}
-              ${this.multiple && filtered.length > 0 ? html46`<div class="select-all-row">
+              ${this.multiple && filtered.length > 0 ? html46`<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}"
@@ -13907,7 +14780,10 @@ var RelSelect = class extends LitElement46 {
                       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}"
@@ -13943,7 +14819,7 @@ var RelSelect = class extends LitElement46 {
                               name="${option.icon}"
                               size="sm"
                               class="select-option-icon"
-                            ></rel-icon>` : nothing10}
+                            ></rel-icon>` : nothing13}
                         <span class="select-option-label">${option.label}</span>
                       </span>
                       ${option.value === this.selected ? html46`<rel-icon name="check" size="sm" class="select-option-check"></rel-icon>` : ""}
@@ -14406,6 +15282,10 @@ RelSelect.styles = css43`
       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));
@@ -14418,61 +15298,61 @@ RelSelect.styles = css43`
 
   `;
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSelect.prototype, "label", 2);
 __decorateClass([
-  property40({ type: String, attribute: "label-style", reflect: true })
+  property41({ type: String, attribute: "label-style", reflect: true })
 ], RelSelect.prototype, "labelStyle", 2);
 __decorateClass([
-  property40({ type: String, attribute: "field-aria-label" })
+  property41({ type: String, attribute: "field-aria-label" })
 ], RelSelect.prototype, "fieldAriaLabel", 2);
 __decorateClass([
-  property40({ type: String, attribute: "field-aria-labelledby" })
+  property41({ type: String, attribute: "field-aria-labelledby" })
 ], RelSelect.prototype, "fieldAriaLabelledby", 2);
 __decorateClass([
-  property40({ type: Array })
+  property41({ type: Array })
 ], RelSelect.prototype, "options", 2);
 __decorateClass([
-  property40({ type: Boolean })
+  property41({ type: Boolean })
 ], RelSelect.prototype, "multiple", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSelect.prototype, "selected", 2);
 __decorateClass([
-  property40({ type: Array, attribute: "selected-values" })
+  property41({ type: Array, attribute: "selected-values" })
 ], RelSelect.prototype, "selectedValues", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSelect.prototype, "state", 2);
 __decorateClass([
-  property40({ type: String, attribute: "supporting-text" })
+  property41({ type: String, attribute: "supporting-text" })
 ], RelSelect.prototype, "supportingText", 2);
 __decorateClass([
-  property40({ type: String, reflect: true })
+  property41({ type: String, reflect: true })
 ], RelSelect.prototype, "size", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSelect.prototype, "border", 2);
 __decorateClass([
-  property40({ type: String, attribute: "left-icon" })
+  property41({ type: String, attribute: "left-icon" })
 ], RelSelect.prototype, "leftIcon", 2);
 __decorateClass([
-  property40({ type: String, attribute: "right-icon" })
+  property41({ type: String, attribute: "right-icon" })
 ], RelSelect.prototype, "rightIcon", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSelect.prototype, "placeholder", 2);
 __decorateClass([
-  property40({ type: String, attribute: "search-placeholder" })
+  property41({ type: String, attribute: "search-placeholder" })
 ], RelSelect.prototype, "searchPlaceholder", 2);
 __decorateClass([
-  property40({ type: String, attribute: "select-all-label" })
+  property41({ type: String, attribute: "select-all-label" })
 ], RelSelect.prototype, "selectAllLabel", 2);
 __decorateClass([
-  property40({ type: Number, attribute: "max-visible-chips" })
+  property41({ type: Number, attribute: "max-visible-chips" })
 ], RelSelect.prototype, "maxVisibleChips", 2);
 __decorateClass([
-  property40({ type: Boolean, attribute: "no-search" })
+  property41({ type: Boolean, attribute: "no-search" })
 ], RelSelect.prototype, "noSearch", 2);
 __decorateClass([
   state16()
@@ -14480,6 +15360,9 @@ __decorateClass([
 __decorateClass([
   state16()
 ], RelSelect.prototype, "highlightedIndex", 2);
+__decorateClass([
+  state16()
+], RelSelect.prototype, "selectAllHighlighted", 2);
 __decorateClass([
   state16()
 ], RelSelect.prototype, "panelStyle", 2);
@@ -14513,7 +15396,7 @@ RelSelect = __decorateClass([
 
 // src/components/rel-skeleton/rel-skeleton.ts
 import { LitElement as LitElement47, html as html47, css as css44 } from "lit";
-import { customElement as customElement47, property as property41 } from "lit/decorators.js";
+import { customElement as customElement47, property as property42 } from "lit/decorators.js";
 var RelSkeleton = class extends LitElement47 {
   constructor() {
     super(...arguments);
@@ -14634,22 +15517,22 @@ RelSkeleton.styles = css44`
     }
   `;
 __decorateClass([
-  property41({ type: String, reflect: true })
+  property42({ type: String, reflect: true })
 ], RelSkeleton.prototype, "shape", 2);
 __decorateClass([
-  property41({ type: Number })
+  property42({ type: Number })
 ], RelSkeleton.prototype, "lines", 2);
 __decorateClass([
-  property41({ type: String })
+  property42({ type: String })
 ], RelSkeleton.prototype, "width", 2);
 __decorateClass([
-  property41({ type: String })
+  property42({ type: String })
 ], RelSkeleton.prototype, "height", 2);
 __decorateClass([
-  property41({ type: String, reflect: true })
+  property42({ type: String, reflect: true })
 ], RelSkeleton.prototype, "animation", 2);
 __decorateClass([
-  property41({ type: Boolean, reflect: true })
+  property42({ type: Boolean, reflect: true })
 ], RelSkeleton.prototype, "loaded", 2);
 RelSkeleton = __decorateClass([
   customElement47("rel-skeleton")
@@ -14657,7 +15540,7 @@ RelSkeleton = __decorateClass([
 
 // src/components/rel-sheet/rel-sheet.ts
 import { LitElement as LitElement48, html as html48, css as css45 } from "lit";
-import { customElement as customElement48, property as property42, query as query9 } from "lit/decorators.js";
+import { customElement as customElement48, property as property43, query as query9 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelModal = class extends LitElement48 {
   constructor() {
@@ -14677,6 +15560,10 @@ var RelModal = class extends LitElement48 {
       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) => {
@@ -14727,9 +15614,18 @@ var RelModal = class extends LitElement48 {
     }
   }
   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,
@@ -15066,36 +15962,39 @@ RelModal.styles = css45`
     }
   `;
 __decorateClass([
-  property42({ type: Boolean, reflect: true })
+  property43({ type: Boolean, reflect: true })
 ], RelModal.prototype, "open", 2);
 __decorateClass([
-  property42({ type: String })
+  property43({ type: String })
 ], RelModal.prototype, "side", 2);
 __decorateClass([
-  property42({ type: String })
+  property43({ type: String })
 ], RelModal.prototype, "title", 2);
 __decorateClass([
-  property42({ type: String })
+  property43({ type: String })
 ], RelModal.prototype, "description", 2);
 __decorateClass([
-  property42({ type: Boolean })
+  property43({ type: Boolean })
 ], RelModal.prototype, "dismissible", 2);
 __decorateClass([
-  property42({ type: Boolean })
+  property43({ type: Boolean })
 ], RelModal.prototype, "modal", 2);
 __decorateClass([
-  property42({ type: String, reflect: true })
+  property43({ type: String, reflect: true })
 ], RelModal.prototype, "breakpoint", 2);
 __decorateClass([
   query9(".overlay")
 ], RelModal.prototype, "overlayElement", 2);
+__decorateClass([
+  query9(".panel")
+], RelModal.prototype, "panelElement", 2);
 RelModal = __decorateClass([
   customElement48("rel-modal")
 ], RelModal);
 
 // src/components/rel-slider/rel-slider.ts
 import { LitElement as LitElement49, html as html49, css as css46 } from "lit";
-import { customElement as customElement49, property as property43, state as state17 } from "lit/decorators.js";
+import { customElement as customElement49, property as property44, state as state17 } from "lit/decorators.js";
 var RelSlider = class extends LitElement49 {
   constructor() {
     super(...arguments);
@@ -15704,37 +16603,37 @@ RelSlider.styles = css46`
 
   `;
 __decorateClass([
-  property43({ type: String, reflect: true })
+  property44({ type: String, reflect: true })
 ], RelSlider.prototype, "type", 2);
 __decorateClass([
-  property43({ type: String, reflect: true })
+  property44({ type: String, reflect: true })
 ], RelSlider.prototype, "size", 2);
 __decorateClass([
-  property43({ type: Number })
+  property44({ type: Number })
 ], RelSlider.prototype, "min", 2);
 __decorateClass([
-  property43({ type: Number })
+  property44({ type: Number })
 ], RelSlider.prototype, "max", 2);
 __decorateClass([
-  property43({ type: Number })
+  property44({ type: Number })
 ], RelSlider.prototype, "step", 2);
 __decorateClass([
-  property43({ type: Boolean })
+  property44({ type: Boolean })
 ], RelSlider.prototype, "disabled", 2);
 __decorateClass([
-  property43({ type: String })
+  property44({ type: String })
 ], RelSlider.prototype, "track", 2);
 __decorateClass([
-  property43({ type: Boolean })
+  property44({ type: Boolean })
 ], RelSlider.prototype, "showTickLabels", 2);
 __decorateClass([
-  property43({ type: Boolean })
+  property44({ type: Boolean })
 ], RelSlider.prototype, "showBubble", 2);
 __decorateClass([
-  property43({ type: Number })
+  property44({ type: Number })
 ], RelSlider.prototype, "value", 2);
 __decorateClass([
-  property43({ type: Number, attribute: "value-end" })
+  property44({ type: Number, attribute: "value-end" })
 ], RelSlider.prototype, "valueEnd", 2);
 __decorateClass([
   state17()
@@ -15745,7 +16644,7 @@ RelSlider = __decorateClass([
 
 // src/components/rel-snackbar/rel-snackbar.ts
 import { LitElement as LitElement50, html as html50, css as css47 } from "lit";
-import { customElement as customElement50, property as property44, state as state18 } from "lit/decorators.js";
+import { customElement as customElement50, property as property45, state as state18 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelSnackbar = class extends LitElement50 {
   constructor() {
@@ -16046,28 +16945,28 @@ RelSnackbar.styles = css47`
     }
   `;
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelSnackbar.prototype, "message", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelSnackbar.prototype, "action", 2);
 __decorateClass([
-  property44({ type: Boolean })
+  property45({ type: Boolean })
 ], RelSnackbar.prototype, "longerAction", 2);
 __decorateClass([
-  property44({ type: Boolean })
+  property45({ type: Boolean })
 ], RelSnackbar.prototype, "iconClose", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelSnackbar.prototype, "lines", 2);
 __decorateClass([
-  property44({ type: Number })
+  property45({ type: Number })
 ], RelSnackbar.prototype, "duration", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelSnackbar.prototype, "type", 2);
 __decorateClass([
-  property44({ type: Boolean, reflect: true })
+  property45({ type: Boolean, reflect: true })
 ], RelSnackbar.prototype, "show", 2);
 __decorateClass([
   state18()
@@ -16077,8 +16976,8 @@ RelSnackbar = __decorateClass([
 ], RelSnackbar);
 
 // src/components/rel-stepper/rel-stepper.ts
-import { LitElement as LitElement51, html as html51, css as css48 } from "lit";
-import { customElement as customElement51, property as property45 } from "lit/decorators.js";
+import { LitElement as LitElement51, html as html51, css as css48, nothing as nothing14 } from "lit";
+import { customElement as customElement51, property as property46 } from "lit/decorators.js";
 var RelStepper = class extends LitElement51 {
   constructor() {
     super(...arguments);
@@ -16104,6 +17003,28 @@ var RelStepper = class extends LitElement51 {
     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(
@@ -16156,7 +17077,12 @@ var RelStepper = class extends LitElement51 {
       (step, idx) => html51`
             <div
               class="${this.getStepClasses(step)}"
+              role="button"
+              tabindex="${this.isDisabled(step) ? -1 : 0}"
+              aria-disabled="${this.isDisabled(step) ? "true" : nothing14}"
+              aria-current="${this.isProgress(step) ? "step" : nothing14}"
               @click="${() => this.onStepClick(step, idx)}"
+              @keydown="${(e) => this.onStepKeyDown(e, step, idx)}"
             >
               ${isVertical && isTextRight ? html51`
                     <!-- Indicator with connector below -->
@@ -16243,6 +17169,17 @@ RelStepper.styles = css48`
     .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 {
@@ -16546,22 +17483,22 @@ RelStepper.styles = css48`
     }
   `;
 __decorateClass([
-  property45({ type: Array })
+  property46({ type: Array })
 ], RelStepper.prototype, "steps", 2);
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelStepper.prototype, "textAlign", 2);
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelStepper.prototype, "orientation", 2);
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelStepper.prototype, "size", 2);
 __decorateClass([
-  property45({ type: String, reflect: true })
+  property46({ type: String, reflect: true })
 ], RelStepper.prototype, "type", 2);
 __decorateClass([
-  property45({ type: String, reflect: true, attribute: "label-placement" })
+  property46({ type: String, reflect: true, attribute: "label-placement" })
 ], RelStepper.prototype, "labelPlacement", 2);
 RelStepper = __decorateClass([
   customElement51("rel-stepper")
@@ -16569,7 +17506,7 @@ RelStepper = __decorateClass([
 
 // src/components/rel-switch/rel-switch.ts
 import { LitElement as LitElement52, html as html52, css as css49 } from "lit";
-import { customElement as customElement52, property as property46, state as state19 } from "lit/decorators.js";
+import { customElement as customElement52, property as property47, state as state19 } from "lit/decorators.js";
 var RelSwitch = class extends LitElement52 {
   constructor() {
     super(...arguments);
@@ -16760,13 +17697,13 @@ RelSwitch.styles = css49`
     }
   `;
 __decorateClass([
-  property46({ type: Boolean })
+  property47({ type: Boolean })
 ], RelSwitch.prototype, "checked", 2);
 __decorateClass([
-  property46({ type: Boolean })
+  property47({ type: Boolean })
 ], RelSwitch.prototype, "disabled", 2);
 __decorateClass([
-  property46({ type: String })
+  property47({ type: String })
 ], RelSwitch.prototype, "value", 2);
 __decorateClass([
   state19()
@@ -16780,7 +17717,7 @@ RelSwitch = __decorateClass([
 
 // src/components/rel-tab/rel-tab.ts
 import { LitElement as LitElement53, html as html53, css as css50 } from "lit";
-import { customElement as customElement53, property as property47, state as state20 } from "lit/decorators.js";
+import { customElement as customElement53, property as property48, state as state20 } from "lit/decorators.js";
 var RelTabItem = class extends LitElement53 {
   constructor() {
     super(...arguments);
@@ -16795,19 +17732,19 @@ var RelTabItem = class extends LitElement53 {
   }
 };
 __decorateClass([
-  property47({ type: String })
+  property48({ type: String })
 ], RelTabItem.prototype, "label", 2);
 __decorateClass([
-  property47({ type: String })
+  property48({ type: String })
 ], RelTabItem.prototype, "value", 2);
 __decorateClass([
-  property47({ type: Number })
+  property48({ type: Number })
 ], RelTabItem.prototype, "badge", 2);
 __decorateClass([
-  property47({ type: Boolean, attribute: "badge-dot" })
+  property48({ type: Boolean, attribute: "badge-dot" })
 ], RelTabItem.prototype, "badgeDot", 2);
 __decorateClass([
-  property47({ type: Boolean })
+  property48({ type: Boolean })
 ], RelTabItem.prototype, "disabled", 2);
 RelTabItem = __decorateClass([
   customElement53("rel-tab-item")
@@ -16819,6 +17756,8 @@ var RelTab = class extends LitElement53 {
     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;
@@ -16862,13 +17801,25 @@ var RelTab = class extends LitElement53 {
         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;
     return html53`
@@ -16878,9 +17829,11 @@ var RelTab = class extends LitElement53 {
       (tab, i) => html53`
             <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)}"
@@ -16892,7 +17845,13 @@ var RelTab = class extends LitElement53 {
           `
     )}
       </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>
     `;
@@ -16923,7 +17882,6 @@ RelTab.styles = css50`
       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;
@@ -17012,13 +17970,13 @@ RelTab.styles = css50`
     }
   `;
 __decorateClass([
-  property47({ type: Array })
+  property48({ type: Array })
 ], RelTab.prototype, "tabs", 2);
 __decorateClass([
-  property47({ type: Number, reflect: true })
+  property48({ type: Number, reflect: true })
 ], RelTab.prototype, "activeIndex", 2);
 __decorateClass([
-  property47({ type: String, reflect: true })
+  property48({ type: String, reflect: true })
 ], RelTab.prototype, "size", 2);
 __decorateClass([
   state20()
@@ -17028,8 +17986,8 @@ RelTab = __decorateClass([
 ], RelTab);
 
 // src/components/rel-time-picker/rel-time-picker.ts
-import { LitElement as LitElement54, html as html54, css as css51, nothing as nothing11 } from "lit";
-import { customElement as customElement54, property as property48, state as state21, query as query10 } from "lit/decorators.js";
+import { LitElement as LitElement54, html as html54, css as css51, nothing as nothing15 } from "lit";
+import { customElement as customElement54, property as property49, state as state21, query as query10 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelTimePicker = class extends LitElement54 {
   constructor() {
@@ -17041,7 +17999,8 @@ var RelTimePicker = class extends LitElement54 {
     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;
@@ -17053,6 +18012,8 @@ var RelTimePicker = class extends LitElement54 {
     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();
@@ -17077,40 +18038,58 @@ var RelTimePicker = class extends LitElement54 {
     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;
@@ -17160,10 +18139,17 @@ var RelTimePicker = class extends LitElement54 {
     }
     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;
@@ -17173,6 +18159,7 @@ var RelTimePicker = class extends LitElement54 {
     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() {
@@ -17215,7 +18202,11 @@ var RelTimePicker = class extends LitElement54 {
   }
   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", {
@@ -17231,6 +18222,7 @@ var RelTimePicker = class extends LitElement54 {
     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;
@@ -17253,6 +18245,7 @@ var RelTimePicker = class extends LitElement54 {
     this.value = null;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: null },
@@ -17281,6 +18274,20 @@ var RelTimePicker = class extends LitElement54 {
     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;
@@ -17298,9 +18305,27 @@ var RelTimePicker = class extends LitElement54 {
     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 ──
@@ -17357,19 +18382,23 @@ var RelTimePicker = class extends LitElement54 {
     }
     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() {
@@ -17377,10 +18406,10 @@ var RelTimePicker = class extends LitElement54 {
     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",
@@ -17391,10 +18420,10 @@ var RelTimePicker = class extends LitElement54 {
     return html54`
       <div part="base" class="${wrapperClasses}">
         ${this.label ? html54`<label part="label" class="label" id="time-picker-label"
-              >${this.label}${this.required ? html54`<span class="required-mark" aria-hidden="true">*</span>` : nothing11}</label
-            >` : nothing11}
+              >${this.label}${this.required ? html54`<span class="required-mark" aria-hidden="true">*</span>` : nothing15}</label
+            >` : nothing15}
 
-        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing11}
+        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing15}
 
         <button
           part="trigger"
@@ -17415,8 +18444,8 @@ var RelTimePicker = class extends LitElement54 {
           aria-required=${this.required}
           aria-invalid=${isError}
           aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing11}
-          aria-labelledby=${this.label ? "time-picker-label" : nothing11}
+          aria-describedby=${describedById ?? nothing15}
+          aria-labelledby=${this.label ? "time-picker-label" : nothing15}
         >
           <span part="value" class="trigger-content ${displayText ? "" : "placeholder"}">
             ${displayText || this.placeholder}
@@ -17438,111 +18467,113 @@ var RelTimePicker = class extends LitElement54 {
                       />
                     </svg>
                   </button>
-                ` : nothing11}
+                ` : nothing15}
             <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
           </span>
         </button>
 
         <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) => html54`
-                    <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) => html54`
-                    <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 ? html54`
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="Seconds">
+                    ${secondOptions.map(
+      (s, i) => html54`
+                        <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>
+                ` : nothing15}
             ${this.format === "12h" ? html54`
-                  <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) => html54`
-                          <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>
-                ` : nothing11}
+                ` : nothing15}
           </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
@@ -17551,11 +18582,10 @@ var RelTimePicker = class extends LitElement54 {
                 variant="primary"
                 tone="default"
                 size="small"
-                border="corner-radius"
                 ?disabled=${this.draftHour === null}
                 @click=${() => this.applySelection()}
               >
-                Apply
+                OK
               </rel-button>
             </div>
           </div>
@@ -17567,7 +18597,7 @@ var RelTimePicker = class extends LitElement54 {
               id=${describedById}
             >
               ${belowText}
-            </div>` : nothing11}
+            </div>` : nothing15}
       </div>
     `;
   }
@@ -17739,16 +18769,19 @@ RelTimePicker.styles = css51`
       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;
     }
 
@@ -17756,94 +18789,79 @@ RelTimePicker.styles = css51`
       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 {
@@ -17853,9 +18871,9 @@ RelTimePicker.styles = css51`
     }
 
     .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 {
@@ -17868,14 +18886,15 @@ RelTimePicker.styles = css51`
       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);
     }
 
@@ -17885,6 +18904,56 @@ RelTimePicker.styles = css51`
       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,
@@ -17894,64 +18963,67 @@ RelTimePicker.styles = css51`
     }
   `;
 __decorateClass([
-  property48({ type: String, reflect: true })
+  property49({ type: String, reflect: true })
 ], RelTimePicker.prototype, "value", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelTimePicker.prototype, "placeholder", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelTimePicker.prototype, "label", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
+  property49({ type: Boolean, reflect: true })
 ], RelTimePicker.prototype, "disabled", 2);
 __decorateClass([
-  property48({ type: Boolean })
+  property49({ type: Boolean })
 ], RelTimePicker.prototype, "required", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
+  property49({ type: Boolean, reflect: true })
 ], RelTimePicker.prototype, "readonly", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelTimePicker.prototype, "format", 2);
 __decorateClass([
-  property48({ type: Number, attribute: "minute-step" })
+  property49({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "seconds", 2);
+__decorateClass([
+  property49({ type: Number, attribute: "minute-step" })
 ], RelTimePicker.prototype, "minuteStep", 2);
 __decorateClass([
-  property48({ type: String, attribute: "min-time" })
+  property49({ type: String, attribute: "min-time" })
 ], RelTimePicker.prototype, "minTime", 2);
 __decorateClass([
-  property48({ type: String, attribute: "max-time" })
+  property49({ type: String, attribute: "max-time" })
 ], RelTimePicker.prototype, "maxTime", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
+  property49({ type: Boolean, reflect: true })
 ], RelTimePicker.prototype, "open", 2);
 __decorateClass([
-  property48({ type: Boolean })
+  property49({ type: Boolean })
 ], RelTimePicker.prototype, "clearable", 2);
 __decorateClass([
-  property48({ type: Boolean })
+  property49({ type: Boolean })
 ], RelTimePicker.prototype, "error", 2);
 __decorateClass([
-  property48({ type: Boolean })
+  property49({ type: Boolean })
 ], RelTimePicker.prototype, "invalid", 2);
 __decorateClass([
-  property48({ type: String, attribute: "error-message" })
+  property49({ type: String, attribute: "error-message" })
 ], RelTimePicker.prototype, "errorMessage", 2);
 __decorateClass([
-  property48({ type: String, attribute: "helper-text" })
+  property49({ type: String, attribute: "helper-text" })
 ], RelTimePicker.prototype, "helperText", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelTimePicker.prototype, "name", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelTimePicker.prototype, "size", 2);
 __decorateClass([
-  property48({ type: String, reflect: true })
+  property49({ type: String, reflect: true })
 ], RelTimePicker.prototype, "variant", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
+  property49({ type: Boolean, reflect: true })
 ], RelTimePicker.prototype, "fullWidth", 2);
 __decorateClass([
   state21()
@@ -17959,6 +19031,12 @@ __decorateClass([
 __decorateClass([
   state21()
 ], RelTimePicker.prototype, "draftMinute", 2);
+__decorateClass([
+  state21()
+], RelTimePicker.prototype, "draftSecond", 2);
+__decorateClass([
+  state21()
+], RelTimePicker.prototype, "openUp", 2);
 __decorateClass([
   query10(".trigger-button")
 ], RelTimePicker.prototype, "triggerButton", 2);
@@ -17971,7 +19049,7 @@ RelTimePicker = __decorateClass([
 
 // src/components/rel-toast/rel-toast.ts
 import { LitElement as LitElement55, html as html55, css as css52 } from "lit";
-import { customElement as customElement55, property as property49, state as state22 } from "lit/decorators.js";
+import { customElement as customElement55, property as property50, state as state22 } from "lit/decorators.js";
 var RelToast = class extends LitElement55 {
   constructor() {
     super(...arguments);
@@ -18164,19 +19242,19 @@ RelToast.styles = css52`
     }
   `;
 __decorateClass([
-  property49({ type: String })
+  property50({ type: String })
 ], RelToast.prototype, "message", 2);
 __decorateClass([
-  property49({ type: String })
+  property50({ type: String })
 ], RelToast.prototype, "type", 2);
 __decorateClass([
-  property49({ type: String })
+  property50({ type: String })
 ], RelToast.prototype, "actionLabel", 2);
 __decorateClass([
-  property49({ type: Number })
+  property50({ type: Number })
 ], RelToast.prototype, "duration", 2);
 __decorateClass([
-  property49({ type: Boolean, reflect: true })
+  property50({ type: Boolean, reflect: true })
 ], RelToast.prototype, "show", 2);
 __decorateClass([
   state22()
@@ -18187,7 +19265,7 @@ RelToast = __decorateClass([
 
 // src/components/rel-tooltip/rel-tooltip.ts
 import { LitElement as LitElement56, html as html56, css as css53 } from "lit";
-import { customElement as customElement56, property as property50 } from "lit/decorators.js";
+import { customElement as customElement56, property as property51 } from "lit/decorators.js";
 var RelTooltip = class extends LitElement56 {
   constructor() {
     super(...arguments);
@@ -18197,6 +19275,26 @@ var RelTooltip = class extends LitElement56 {
     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();
@@ -18263,6 +19361,12 @@ RelTooltip.styles = css53`
       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);
@@ -18337,24 +19441,24 @@ RelTooltip.styles = css53`
     }
   `;
 __decorateClass([
-  property50({ type: String })
+  property51({ type: String })
 ], RelTooltip.prototype, "text", 2);
 __decorateClass([
-  property50({ type: String })
+  property51({ type: String })
 ], RelTooltip.prototype, "position", 2);
 __decorateClass([
-  property50({ type: Boolean, attribute: "show-tail" })
+  property51({ type: Boolean, attribute: "show-tail" })
 ], RelTooltip.prototype, "showTail", 2);
 __decorateClass([
-  property50({ type: String, reflect: true })
+  property51({ type: String, reflect: true })
 ], RelTooltip.prototype, "type", 2);
 RelTooltip = __decorateClass([
   customElement56("rel-tooltip")
 ], RelTooltip);
 
 // src/components/rel-upload/rel-upload.ts
-import { LitElement as LitElement57, html as html57, css as css54, nothing as nothing12 } from "lit";
-import { customElement as customElement57, property as property51, state as state23, query as query11 } from "lit/decorators.js";
+import { LitElement as LitElement57, html as html57, css as css54, nothing as nothing16 } from "lit";
+import { customElement as customElement57, property as property52, state as state23, query as query11 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var uid = 0;
 var RelUpload = class extends LitElement57 {
@@ -18751,7 +19855,7 @@ var RelUpload = class extends LitElement57 {
           ${f.status === "uploading" ? html57`<rel-progress
                 mode="linear-determinate"
                 .value=${f.progress ?? 0}
-              ></rel-progress>` : nothing12}
+              ></rel-progress>` : nothing16}
           <span class="row-meta">${this.rowMeta(f)}</span>
         </div>
 
@@ -18762,14 +19866,14 @@ var RelUpload = class extends LitElement57 {
                 size="md"
                 role="img"
                 aria-label="Uploaded"
-              ></rel-icon>` : nothing12}
+              ></rel-icon>` : nothing16}
           ${f.status === "error" ? html57`<rel-icon
                 class="status-error"
                 name="error"
                 size="md"
                 role="img"
                 aria-label="Failed"
-              ></rel-icon>` : nothing12}
+              ></rel-icon>` : nothing16}
           <button
             class="remove"
             aria-label="Remove ${f.name}"
@@ -18791,7 +19895,7 @@ var RelUpload = class extends LitElement57 {
               appearance="subtle"
               message1=${alert.message1}
               message2=${alert.message2}
-            ></rel-alert>` : nothing12}
+            ></rel-alert>` : nothing16}
 
         <div
           class="dropzone ${this.dragOver ? "dragover" : ""}"
@@ -18825,13 +19929,13 @@ var RelUpload = class extends LitElement57 {
         ${this.files.length ? html57`<div class="file-list">
               <p class="list-heading">${this.listHeading}</p>
               <div class="rows" role="list">${this.files.map((f) => this.renderRow(f))}</div>
-            </div>` : nothing12}
+            </div>` : nothing16}
 
         <input
           class="file-input"
           type="file"
           ?multiple=${this.multiple}
-          accept=${this.accept || nothing12}
+          accept=${this.accept || nothing16}
           @change=${this.onInputChange}
         />
       </div>
@@ -19087,37 +20191,37 @@ RelUpload.styles = css54`
     }
   `;
 __decorateClass([
-  property51({ type: String })
+  property52({ type: String })
 ], RelUpload.prototype, "accept", 2);
 __decorateClass([
-  property51({ type: String, attribute: "max-size" })
+  property52({ type: String, attribute: "max-size" })
 ], RelUpload.prototype, "maxSize", 2);
 __decorateClass([
-  property51({ type: Boolean })
+  property52({ type: Boolean })
 ], RelUpload.prototype, "multiple", 2);
 __decorateClass([
-  property51({ type: Boolean, reflect: true })
+  property52({ type: Boolean, reflect: true })
 ], RelUpload.prototype, "disabled", 2);
 __decorateClass([
-  property51({ type: String })
+  property52({ type: String })
 ], RelUpload.prototype, "hint", 2);
 __decorateClass([
-  property51({ type: String, attribute: "dropzone-title" })
+  property52({ type: String, attribute: "dropzone-title" })
 ], RelUpload.prototype, "dropzoneTitle", 2);
 __decorateClass([
-  property51({ type: String, attribute: "browse-label" })
+  property52({ type: String, attribute: "browse-label" })
 ], RelUpload.prototype, "browseLabel", 2);
 __decorateClass([
-  property51({ attribute: false })
+  property52({ attribute: false })
 ], RelUpload.prototype, "files", 2);
 __decorateClass([
-  property51({ attribute: false })
+  property52({ attribute: false })
 ], RelUpload.prototype, "uploader", 2);
 __decorateClass([
-  property51({ type: Number })
+  property52({ type: Number })
 ], RelUpload.prototype, "concurrency", 2);
 __decorateClass([
-  property51({ type: Number, attribute: "delay-threshold" })
+  property52({ type: Number, attribute: "delay-threshold" })
 ], RelUpload.prototype, "delayThreshold", 2);
 __decorateClass([
   state23()
@@ -19133,8 +20237,8 @@ RelUpload = __decorateClass([
 ], RelUpload);
 
 // src/components/rel-upload/rel-upload-actions.ts
-import { LitElement as LitElement58, html as html58, css as css55, nothing as nothing13 } from "lit";
-import { customElement as customElement58, property as property52, state as state24 } from "lit/decorators.js";
+import { LitElement as LitElement58, html as html58, css as css55, nothing as nothing17 } from "lit";
+import { customElement as customElement58, property as property53, state as state24 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var EMPTY_STATE = {
   phase: "empty",
@@ -19204,7 +20308,7 @@ var RelUploadActions = class extends LitElement58 {
     const busy = phase === "uploading" || phase === "delayed";
     return html58`
       <div class="actions" part="base">
-        ${this.noCancel ? nothing13 : html58`<rel-button part="cancel" variant="secondary" @click=${this.onCancel}>
+        ${this.noCancel ? nothing17 : html58`<rel-button part="cancel" variant="secondary" @click=${this.onCancel}>
               ${this.cancelLabel}
             </rel-button>`}
 
@@ -19216,7 +20320,7 @@ var RelUploadActions = class extends LitElement58 {
           aria-label=${busy ? "Uploading" : primaryLabel}
           @click=${this.onPrimary}
         >
-          ${busy ? nothing13 : html58`${phase === "failed" ? html58`<rel-icon name="refresh" size="sm"></rel-icon>` : nothing13}${primaryLabel}`}
+          ${busy ? nothing17 : html58`${phase === "failed" ? html58`<rel-icon name="refresh" size="sm"></rel-icon>` : nothing17}${primaryLabel}`}
         </rel-button>
       </div>
     `;
@@ -19240,13 +20344,13 @@ RelUploadActions.styles = css55`
     }
   `;
 __decorateClass([
-  property52({ type: String })
+  property53({ type: String })
 ], RelUploadActions.prototype, "for", 2);
 __decorateClass([
-  property52({ type: String, attribute: "cancel-label" })
+  property53({ type: String, attribute: "cancel-label" })
 ], RelUploadActions.prototype, "cancelLabel", 2);
 __decorateClass([
-  property52({ type: Boolean, attribute: "no-cancel" })
+  property53({ type: Boolean, attribute: "no-cancel" })
 ], RelUploadActions.prototype, "noCancel", 2);
 __decorateClass([
   state24()
@@ -19258,6 +20362,7 @@ RelUploadActions = __decorateClass([
 // src/index.ts
 export * from "@reliability-design/icons";
 export {
+  FocusTrap,
   RelAccordion,
   RelAlert,
   RelAutocomplete,
@@ -19318,6 +20423,15 @@ export {
   RelTopbarProfile,
   RelTopbarUtilities,
   RelUpload,
-  RelUploadActions
+  RelUploadActions,
+  bindShortcut,
+  formatShortcutParts,
+  getDeepActiveElement,
+  getFocusableElements,
+  isApplePlatform,
+  isEditableTarget,
+  matchesShortcut,
+  parseShortcut,
+  trapTabKey
 };
 //# sourceMappingURL=index.mjs.map