@reliability-design/web 1.4.3 → 1.4.5

package/dist/index.js

@@ -29,6 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FocusTrap: () => FocusTrap,
   RelAccordion: () => RelAccordion,
   RelAlert: () => RelAlert,
   RelAutocomplete: () => RelAutocomplete,
@@ -87,7 +88,18 @@ __export(index_exports, {
   RelTopbarItem: () => RelTopbarItem,
   RelTopbarMobilePanel: () => RelTopbarMobilePanel,
   RelTopbarProfile: () => RelTopbarProfile,
-  RelTopbarUtilities: () => RelTopbarUtilities
+  RelTopbarUtilities: () => RelTopbarUtilities,
+  RelUpload: () => RelUpload,
+  RelUploadActions: () => RelUploadActions,
+  bindShortcut: () => bindShortcut,
+  formatShortcutParts: () => formatShortcutParts,
+  getDeepActiveElement: () => getDeepActiveElement,
+  getFocusableElements: () => getFocusableElements,
+  isApplePlatform: () => isApplePlatform,
+  isEditableTarget: () => isEditableTarget,
+  matchesShortcut: () => matchesShortcut,
+  parseShortcut: () => parseShortcut,
+  trapTabKey: () => trapTabKey
 });
 module.exports = __toCommonJS(index_exports);
 var import_vars = require("./vars-XNMTSRVN.css");
@@ -104,6 +116,8 @@ var RelAccordion = class extends import_lit.LitElement {
     this.size = "md";
     this.type = "default";
     this.appearance = "shadow";
+    /** Stable id prefix wiring the header to its panel. */
+    this.accordionId = `rel-accordion-${Math.random().toString(36).slice(2)}`;
   }
   toggle() {
     this.open = !this.open;
@@ -120,9 +134,11 @@ var RelAccordion = class extends import_lit.LitElement {
       <div part="base" class="accordion">
         <div
           part="trigger" class="header"
+          id="${this.accordionId}-header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
+          aria-controls="${this.accordionId}-body"
           @click=${this.toggle}
           @keydown=${(e) => {
       if (e.key === "Enter" || e.key === " ") {
@@ -145,7 +161,14 @@ var RelAccordion = class extends import_lit.LitElement {
             </slot>
           </div>
         </div>
-        <div part="content" class="body ${this.open ? "open" : "closed"}">
+        <div
+          part="content"
+          class="body ${this.open ? "open" : "closed"}"
+          id="${this.accordionId}-body"
+          role="region"
+          aria-labelledby="${this.accordionId}-header"
+          ?inert=${!this.open}
+        >
           <slot></slot>
         </div>
       </div>
@@ -1648,6 +1671,14 @@ var RelAutocomplete = class extends import_lit4.LitElement {
       if (left + t.width > window.innerWidth - 8) {
         left = Math.max(8, window.innerWidth - t.width - 8);
       }
+      this.panelEl.style.top = `${top}px`;
+      this.panelEl.style.left = `${left}px`;
+      this.panelEl.style.width = `${t.width}px`;
+      const applied = this.panelEl.getBoundingClientRect();
+      top -= applied.top - top;
+      left -= applied.left - left;
+      this.panelEl.style.top = `${top}px`;
+      this.panelEl.style.left = `${left}px`;
       this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
     };
   }
@@ -1659,6 +1690,7 @@ var RelAutocomplete = class extends import_lit4.LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     clearTimeout(this.debounceTimer);
   }
   willUpdate(changed) {
@@ -1718,13 +1750,40 @@ var RelAutocomplete = class extends import_lit4.LitElement {
     this.open = true;
     this.highlightedIndex = -1;
     this.addGlobalListeners();
-    requestAnimationFrame(() => this.updatePosition());
+    requestAnimationFrame(() => {
+      this.showNativePopover();
+      this.updatePosition();
+    });
   }
   closePanel() {
     if (!this.open) return;
     this.open = false;
     this.highlightedIndex = -1;
     this.removeGlobalListeners();
+    this.hideNativePopover();
+  }
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, breaking viewport-based coordinates and letting the
+   * panel's overflow:hidden clip the suggestions. Promoting the panel to
+   * the browser top layer sidesteps both — same fix as rel-popover.
+   * `manual` keeps light-dismiss and Escape handling under this
+   * component's own control. */
+  showNativePopover() {
+    const p = this.panelEl;
+    if (!p || typeof p.showPopover !== "function") return;
+    try {
+      if (!p.matches(":popover-open")) p.showPopover();
+    } catch {
+    }
+  }
+  hideNativePopover() {
+    const p = this.panelEl;
+    if (!p || typeof p.hidePopover !== "function") return;
+    try {
+      if (p.matches(":popover-open")) p.hidePopover();
+    } catch {
+    }
   }
   /** Re-evaluates whether the panel should be showing for the current state. */
   syncPanel() {
@@ -1760,17 +1819,17 @@ var RelAutocomplete = class extends import_lit4.LitElement {
       this.syncPanel();
     }
   }
-  async runSearch(query11) {
+  async runSearch(query12) {
     const seq = ++this.searchSeq;
     try {
-      const results = await this.searchFn(query11);
+      const results = await this.searchFn(query12);
       if (seq !== this.searchSeq) return;
       this.remoteItems = results ?? [];
     } catch (err) {
       if (seq !== this.searchSeq) return;
       this.remoteItems = [];
       this.dispatchEvent(
-        new CustomEvent("rel-search-error", { detail: { query: query11, error: err }, bubbles: true, composed: true })
+        new CustomEvent("rel-search-error", { detail: { query: query12, error: err }, bubbles: true, composed: true })
       );
     } finally {
       if (seq === this.searchSeq) {
@@ -1940,6 +1999,7 @@ var RelAutocomplete = class extends import_lit4.LitElement {
         id="${panelId}"
         part="panel list"
         class="ac-panel"
+        popover="manual"
         role="listbox"
         aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
@@ -1994,6 +2054,15 @@ RelAutocomplete.styles = import_lit4.css`
       position: fixed;
       z-index: 1001;
       display: none;
+      /* Reset native [popover] UA styles (the panel is promoted to the
+         top layer so transformed ancestors — e.g. a centered rel-modal
+         panel — can't hijack its containing block or clip it). */
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       box-sizing: border-box;
       background: var(--rel-autocomplete-bg, var(--rel-bg-neutral));
       border: 1px solid var(--rel-autocomplete-menu-border, var(--rel-border-default));
@@ -2789,9 +2858,12 @@ RelButton.styles = import_lit8.css`
       }
     }
 
-    /* Sizes */
+    /* Sizes. Min-widths come from the Figma Button master (S/M/L =
+       80/100/120) so short labels like "OK" keep a proper pill shape;
+       --rel-button-min-width lets a consumer override per instance. */
     .size-small {
       height: 32px;
+      min-width: var(--rel-button-min-width, 80px);
       padding: 0 var(--rel-spacing-sm);
       font-family: var(--rel-action-md-font-family);
       font-weight: var(--rel-action-md-font-weight);
@@ -2802,6 +2874,7 @@ RelButton.styles = import_lit8.css`
 
     .size-medium {
       height: 40px;
+      min-width: var(--rel-button-min-width, 100px);
       gap: var(--rel-spacing-xs);
       padding: 0 var(--rel-spacing-md);
       font-family: var(--rel-action-lg-font-family);
@@ -2813,6 +2886,7 @@ RelButton.styles = import_lit8.css`
 
     .size-large {
       height: 48px;
+      min-width: var(--rel-button-min-width, 120px);
       padding: 0 var(--rel-spacing-lg);
       font-family: var(--rel-action-xl-font-family);
       font-weight: var(--rel-action-xl-font-weight);
@@ -2919,6 +2993,11 @@ RelButton.styles = import_lit8.css`
       color: var(--rel-action-neutral-label-icons-ghost);
     }
 
+    /* Figma master: ghost S has a narrower 56px min than primary/outline. */
+    .btn-text.size-small {
+      min-width: var(--rel-button-min-width, 56px);
+    }
+
     .btn-text.tone-critical {
       color: var(--rel-action-danger-label-icons-ghost);
     }
@@ -2927,6 +3006,8 @@ RelButton.styles = import_lit8.css`
       background: transparent;
       color: var(--rel-action-neutral-label-icons-link);
       text-decoration: underline;
+      /* Links are inline actions — no minimum footprint in the Figma master. */
+      min-width: 0;
     }
 
     button.btn-link:hover:not(:disabled) {
@@ -2955,6 +3036,7 @@ RelButton.styles = import_lit8.css`
     /* Icon Only as an independent axis: square button of the current style */
     .btn-icon-only {
       padding: 0;
+      min-width: 0;
     }
 
     .btn-icon-only.size-small {
@@ -2973,6 +3055,7 @@ RelButton.styles = import_lit8.css`
       width: 40px;
       height: 40px;
       padding: 0;
+      min-width: 0;
       border-radius: 50%;
     }
     .btn-icon.tone-default {
@@ -3017,7 +3100,9 @@ RelButton.styles = import_lit8.css`
        .btn-text: ghost gets tone-accent hovers below (this generic grey overlay
        has higher specificity than the per-tone ghost rules and was overriding
        them, which is why every ghost hover looked grey). */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text) {
+    /* Link buttons change label color only (rule above) — the overlay fill
+       here would make a hovered link read as a ghost button. */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text):not(.btn-link) {
       background: var(--rel-action-overlay-hover);
     }
 
@@ -3369,9 +3454,28 @@ var RelCalendar = class extends import_lit9.LitElement {
       });
     }
   }
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !focusedDate)`) left the grid with ZERO
+   * tab stops once the user arrowed around without a selection — Tab could
+   * never re-enter the calendar.
+   */
+  getRovingIndex(days) {
+    const candidates = [
+      this.focusedDate ? days.findIndex(
+        (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate)
+      ) : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled)
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
+  }
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
+    const rovingIndex = this.getRovingIndex(days);
     return import_lit9.html`
       <div role="grid" aria-label="Calendar">
         <div part="header" class="header">
@@ -3424,7 +3528,7 @@ var RelCalendar = class extends import_lit9.LitElement {
                 ?disabled=${day.isDisabled}
                 @click=${() => this.selectDay(day)}
                 @keydown=${(e) => this.handleKeyDown(e, day, index)}
-                tabindex="${day.isSelected || index === 0 && !this.focusedDate ? 0 : -1}"
+                tabindex="${index === rovingIndex ? 0 : -1}"
               >
                 ${day.day}
               </button>
@@ -3724,12 +3828,23 @@ var RelCarousel = class extends import_lit11.LitElement {
     // Number of clone slides prepended before the real slides
     this.clonesBefore = 0;
     this._silentJumping = false;
+    this.handleFocusIn = () => {
+      if (this.autoplay) this.stopAutoplay();
+    };
+    this.handleFocusOut = (e) => {
+      if (!this.autoplay) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;
+      this.startAutoplay();
+    };
   }
   connectedCallback() {
     super.connectedCallback();
     this.prefersReducedMotion = window.matchMedia(
       "(prefers-reduced-motion: reduce)"
     ).matches;
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
     if (this.autoplay) {
       this.startAutoplay();
     }
@@ -3761,6 +3876,8 @@ var RelCarousel = class extends import_lit11.LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
     this._ro?.disconnect();
     this.stopAutoplay();
     if (this.animationId) {
@@ -4075,6 +4192,7 @@ var RelCarousel = class extends import_lit11.LitElement {
                       class="dot ${i === this.value ? "active" : ""}"
                       part="dot"
                       aria-label="Go to slide ${i + 1}"
+                      aria-current="${i === this.value ? "true" : import_lit11.nothing}"
                       @click=${() => this.goToSlide(i)}
                     ></button>
                   `) : import_lit11.nothing}
@@ -4467,6 +4585,9 @@ var RelCheckbox = class extends import_lit13.LitElement {
     this.state = "default";
     this.status = "unchecked";
     this.value = "";
+    this.size = "medium";
+    this.density = "compact";
+    this.alignment = "leading";
     this._onChange = () => {
     };
     this._onTouched = () => {
@@ -4478,6 +4599,17 @@ var RelCheckbox = class extends import_lit13.LitElement {
   set checked(val) {
     this.status = val ? "checked" : "unchecked";
   }
+  willUpdate(changed) {
+    if ((changed.has("alignment") || changed.has("density")) && this.alignment === "trailing" && this.density === "compact") {
+      console.warn(
+        '[rel-checkbox] density="compact" has no trailing layout; rendering comfortable density.'
+      );
+    }
+  }
+  /** Trailing has no compact layout in the spec — trailing wins. */
+  get effectiveDensity() {
+    return this.alignment === "trailing" ? "comfortable" : this.density;
+  }
   toggle() {
     if (this.state === "disabled") return;
     this.status = this.status === "checked" ? "unchecked" : "checked";
@@ -4508,6 +4640,9 @@ var RelCheckbox = class extends import_lit13.LitElement {
         <label class="row">
           <input
             type="checkbox"
+            .checked=${this.status === "checked"}
+            .indeterminate=${this.status === "indeterminate"}
+            aria-checked="${this.status === "indeterminate" ? "mixed" : import_lit13.nothing}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
@@ -4525,12 +4660,22 @@ var RelCheckbox = class extends import_lit13.LitElement {
             </svg>
           </span>
 
-          ${this.icon ? import_lit13.html`<rel-icon name="${this.icon}" size="md" class="icon-prefix"></rel-icon>` : null}
+          <span class="content">
+            <span class="label-line">
+              ${this.icon ? import_lit13.html`<rel-icon
+                    name="${this.icon}"
+                    size="${this.size === "small" ? "sm" : "md"}"
+                    class="icon-prefix"
+                  ></rel-icon>` : null}
+
+              <span part="label" class="label">${this.label}</span>
+            </span>
 
-          <span part="label" class="label">${this.label}</span>
+            ${this.effectiveDensity === "comfortable" && this.supportingtext ? import_lit13.html`<span part="helper" class="text">${this.supportingtext}</span>` : null}
+          </span>
         </label>
 
-        ${this.supportingtext ? import_lit13.html`<span part="helper" class="text">${this.supportingtext}</span>` : null}
+        ${this.effectiveDensity === "compact" && this.supportingtext ? import_lit13.html`<span part="helper" class="text text-below">${this.supportingtext}</span>` : null}
       </div>
     `;
   }
@@ -4563,6 +4708,29 @@ RelCheckbox.styles = import_lit13.css`
       cursor: pointer;
     }
 
+    /* Trailing alignment — box moves to the far edge, label stack to the
+       start. row-reverse keeps the box first in DOM order (input + .box
+       adjacency drives the focus ring) while space-between stretches the
+       row to its container. */
+    :host([alignment="trailing"]) .row {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    /* Comfortable density — label and supporting text stack beside the box. */
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-3xs);
+      min-width: 0;
+    }
+
+    .label-line {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+    }
+
     input {
       position: absolute;
       inset: 0;
@@ -4705,7 +4873,6 @@ RelCheckbox.styles = import_lit13.css`
 
     .text {
       color: var(--rel-text-caption);
-      padding-left: 28px;
 
       font-family: var(--rel-body-sm-regular-font-family);
 
@@ -4718,6 +4885,44 @@ RelCheckbox.styles = import_lit13.css`
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
 
     }
+
+    /* Compact density — supporting text sits under the whole row, indented
+       past the box (box width + row gap, matching the pre-existing 28px). */
+    .text-below {
+      padding-left: 28px;
+    }
+
+    /* Size variant (medium is the base scale above). */
+    :host([size="small"]) .box {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+    }
+
+    :host([size="small"]) svg {
+      width: 10px;
+      height: 10px;
+    }
+
+    :host([size="small"]) .label {
+      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);
+    }
+
+    :host([size="small"]) .text {
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
+    :host([size="small"]) .text-below {
+      padding-left: 24px;
+    }
   `;
 __decorateClass([
   (0, import_decorators13.property)({ type: String })
@@ -4737,6 +4942,15 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators13.property)({ type: String })
 ], RelCheckbox.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: String, reflect: true })
+], RelCheckbox.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: String, reflect: true })
+], RelCheckbox.prototype, "density", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: String, reflect: true })
+], RelCheckbox.prototype, "alignment", 2);
 RelCheckbox = __decorateClass([
   (0, import_decorators13.customElement)("rel-checkbox")
 ], RelCheckbox);
@@ -4767,6 +4981,109 @@ function formatDatePattern(date, pattern, locale = "en-US") {
   );
 }
 
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = [
+  'a[href]:not([tabindex="-1"])',
+  'button:not([disabled]):not([tabindex="-1"])',
+  'input:not([disabled]):not([tabindex="-1"])',
+  'select:not([disabled]):not([tabindex="-1"])',
+  'textarea:not([disabled]):not([tabindex="-1"])',
+  'audio[controls]:not([tabindex="-1"])',
+  'video[controls]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"]):not([tabindex="-1"])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(el) {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+}
+function getFocusableElements(root) {
+  const out = [];
+  const visit = (el) => {
+    if (el instanceof HTMLElement && el.matches(FOCUSABLE_SELECTOR) && isVisible(el)) {
+      out.push(el);
+    }
+    if (el instanceof HTMLSlotElement) {
+      el.assignedElements({ flatten: true }).forEach(visit);
+    } else if (el.shadowRoot) {
+      Array.from(el.shadowRoot.children).forEach(visit);
+    } else {
+      Array.from(el.children).forEach(visit);
+    }
+  };
+  const start = root instanceof ShadowRoot ? Array.from(root.children) : root.shadowRoot ? Array.from(root.shadowRoot.children) : Array.from(root.children);
+  start.forEach(visit);
+  return out;
+}
+function getDeepActiveElement() {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active instanceof HTMLElement ? active : null;
+}
+function trapTabKey(e, container) {
+  if (e.key !== "Tab") return;
+  const focusable = getFocusableElements(container);
+  if (focusable.length === 0) {
+    e.preventDefault();
+    return;
+  }
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  const active = getDeepActiveElement();
+  const inside = active ? focusable.includes(active) : false;
+  if (e.shiftKey) {
+    if (!inside || active === first) {
+      e.preventDefault();
+      last.focus();
+    }
+  } else {
+    if (!inside || active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+}
+var FocusTrap = class {
+  constructor(getContainer) {
+    this.getContainer = getContainer;
+    this.previousFocus = null;
+    this.active = false;
+    this.onKeyDown = (e) => {
+      const container = this.getContainer();
+      if (container) trapTabKey(e, container);
+    };
+  }
+  activate(options) {
+    if (this.active) return;
+    this.active = true;
+    this.previousFocus = getDeepActiveElement();
+    document.addEventListener("keydown", this.onKeyDown, true);
+    requestAnimationFrame(() => {
+      if (!this.active) return;
+      const container = this.getContainer();
+      if (!container) return;
+      const target = options?.initialFocus ?? getFocusableElements(container)[0] ?? null;
+      if (target) {
+        target.focus();
+      } else if (container instanceof HTMLElement) {
+        container.tabIndex = -1;
+        container.focus();
+      }
+    });
+  }
+  deactivate(options) {
+    if (!this.active) return;
+    this.active = false;
+    document.removeEventListener("keydown", this.onKeyDown, true);
+    const previous = this.previousFocus;
+    this.previousFocus = null;
+    if (options?.restoreFocus !== false && previous?.isConnected) {
+      requestAnimationFrame(() => previous.focus());
+    }
+  }
+};
+
 // src/components/rel-date-picker/rel-date-picker.ts
 var RelDatePicker = class extends import_lit14.LitElement {
   constructor() {
@@ -4804,9 +5121,58 @@ var RelDatePicker = class extends import_lit14.LitElement {
       }
     };
     this.handleEscapeKey = (e) => {
-      if (e.key === "Escape" && this.open) {
+      if (!this.open) return;
+      if (e.key === "Escape") {
         this.closeCalendarPopover();
+        return;
+      }
+      if (e.key === "Tab") {
+        const popover = this.renderRoot.querySelector(".popover");
+        if (popover) trapTabKey(e, popover);
+      }
+    };
+    this.handleDropdownKeydown = (e) => {
+      const menu = e.currentTarget;
+      const items = Array.from(
+        menu.querySelectorAll(".dropdown-item")
+      );
+      if (items.length === 0) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        const trigger = menu.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
+        this.monthDropdownOpen = false;
+        this.yearDropdownOpen = false;
+        trigger?.focus();
+        return;
+      }
+      if (e.key === "Tab") {
+        this.monthDropdownOpen = false;
+        this.yearDropdownOpen = false;
+        return;
       }
+      const idx = items.indexOf(getDeepActiveElement());
+      let target;
+      switch (e.key) {
+        case "ArrowDown":
+          target = Math.min(items.length - 1, idx + 1);
+          break;
+        case "ArrowUp":
+          target = Math.max(0, idx - 1);
+          break;
+        case "Home":
+          target = 0;
+          break;
+        case "End":
+          target = items.length - 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      items[target]?.focus();
+      items[target]?.scrollIntoView({ block: "nearest" });
     };
   }
   // minDate/maxDate supersede the deprecated min/max aliases
@@ -4843,10 +5209,12 @@ var RelDatePicker = class extends import_lit14.LitElement {
     }
     if (changedProperties.has("open") && this.open) {
       setTimeout(() => {
-        const firstDay = this.calendarGrid?.querySelector(
+        const target = this.calendarGrid?.querySelector(
+          '.day-button[tabindex="0"]:not(:disabled)'
+        ) ?? this.calendarGrid?.querySelector(
           ".day-button:not(:disabled)"
         );
-        firstDay?.focus();
+        target?.focus();
       }, 100);
     }
   }
@@ -5144,27 +5512,67 @@ var RelDatePicker = class extends import_lit14.LitElement {
     e.stopPropagation();
     this.monthDropdownOpen = !this.monthDropdownOpen;
     this.yearDropdownOpen = false;
+    if (this.monthDropdownOpen) this.focusOpenDropdownSelection();
   }
   toggleYearDropdown(e) {
     e.stopPropagation();
     this.yearDropdownOpen = !this.yearDropdownOpen;
     this.monthDropdownOpen = false;
+    if (this.yearDropdownOpen) this.focusOpenDropdownSelection();
+  }
+  handleDropdownTriggerKeydown(e, kind) {
+    if (e.key !== "ArrowDown") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.monthDropdownOpen = kind === "month";
+    this.yearDropdownOpen = kind === "year";
+    this.focusOpenDropdownSelection();
+  }
+  async focusOpenDropdownSelection() {
+    await this.updateComplete;
+    const menu = this.renderRoot.querySelector(".dropdown-menu.open");
+    if (!menu) return;
+    const target = menu.querySelector(".dropdown-item.selected") ?? menu.querySelector(".dropdown-item");
+    target?.focus();
+    target?.scrollIntoView({ block: "nearest" });
   }
   selectMonth(month, e) {
     e.stopPropagation();
+    const trigger = e.target.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
     this.viewMonth = month;
     this.monthDropdownOpen = false;
+    this.updateComplete.then(() => trigger?.focus());
   }
   selectYear(year, e) {
     e.stopPropagation();
+    const trigger = e.target.closest(".dropdown-container")?.querySelector(".dropdown-trigger");
     this.viewYear = year;
     this.yearDropdownOpen = false;
+    this.updateComplete.then(() => trigger?.focus());
+  }
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
+   * stops once the user arrowed around without a selection.
+   */
+  getRovingIndex(days) {
+    const candidates = [
+      this.focusedDate ? days.findIndex(
+        (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate)
+      ) : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled)
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
   }
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
     const months = this.getMonthsList();
     const years = this.getYearsList();
+    const rovingIndex = this.getRovingIndex(days);
     const isError = this.error;
     const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
     const describedById = belowText ? "date-picker-desc" : void 0;
@@ -5251,22 +5659,31 @@ var RelDatePicker = class extends import_lit14.LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleMonthDropdown}
+                @keydown=${(e) => this.handleDropdownTriggerKeydown(e, "month")}
                 aria-label="Select month"
+                aria-haspopup="listbox"
                 aria-expanded=${this.monthDropdownOpen}
               >
                 ${this.getMonthName()}
               </button>
-              <div class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Month"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${months.map(
       (m) => import_lit14.html`
-                    <div
+                    <button
                       class="dropdown-item ${m.value === this.viewMonth ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e) => this.selectMonth(m.value, e)}
                       role="option"
                       aria-selected=${m.value === this.viewMonth}
                     >
                       ${m.label}
-                    </div>
+                    </button>
                   `
     )}
               </div>
@@ -5277,22 +5694,31 @@ var RelDatePicker = class extends import_lit14.LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleYearDropdown}
+                @keydown=${(e) => this.handleDropdownTriggerKeydown(e, "year")}
                 aria-label="Select year"
+                aria-haspopup="listbox"
                 aria-expanded=${this.yearDropdownOpen}
               >
                 ${this.viewYear}
               </button>
-              <div class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Year"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${years.map(
       (y) => import_lit14.html`
-                    <div
+                    <button
                       class="dropdown-item ${y === this.viewYear ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e) => this.selectYear(y, e)}
                       role="option"
                       aria-selected=${y === this.viewYear}
                     >
                       ${y}
-                    </div>
+                    </button>
                   `
     )}
               </div>
@@ -5335,7 +5761,7 @@ var RelDatePicker = class extends import_lit14.LitElement {
                   ?disabled=${day.isDisabled}
                   @click=${() => this.selectDay(day)}
                   @keydown=${(e) => this.handleDayKeydown(e, day, index)}
-                  tabindex="${day.isSelected || index === 0 && !this.value ? 0 : -1}"
+                  tabindex="${index === rovingIndex ? 0 : -1}"
                 >
                   ${day.day}
                 </button>
@@ -5629,6 +6055,11 @@ RelDatePicker.styles = import_lit14.css`
     }
 
     .dropdown-item {
+      display: block;
+      width: 100%;
+      border: none;
+      background: transparent;
+      text-align: left;
       padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       cursor: pointer;
       color: var(--rel-text-default);
@@ -5640,6 +6071,11 @@ RelDatePicker.styles = import_lit14.css`
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    .dropdown-item:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+    }
+
     .dropdown-item:hover {
       background: var(--rel-bg-surface-elevated);
     }
@@ -5868,6 +6304,32 @@ var RelRangePicker = class extends import_lit15.LitElement {
     this.viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
+    this.onReposition = () => {
+      if (this.open && this.mode === "popover") this.updatePopoverPosition();
+    };
+    this.updatePopoverPosition = () => {
+      const panel = this.popoverEl;
+      if (!panel || !this.open || this.mode !== "popover") return;
+      const t = this.getBoundingClientRect();
+      const c = panel.getBoundingClientRect();
+      let top = t.bottom + 4;
+      if (top + c.height > window.innerHeight - 8) {
+        top = Math.max(8, t.top - c.height - 4);
+      }
+      let left = t.left;
+      if (left + c.width > window.innerWidth - 8) {
+        left = Math.max(8, window.innerWidth - c.width - 8);
+      }
+      panel.style.position = "fixed";
+      panel.style.top = `${top}px`;
+      panel.style.left = `${left}px`;
+      const applied = panel.getBoundingClientRect();
+      top -= applied.top - top;
+      left -= applied.left - left;
+      panel.style.top = `${top}px`;
+      panel.style.left = `${left}px`;
+    };
     // ── Open / close ──
     this.handleClickOutside = (e) => {
       if (!this.open) return;
@@ -5899,6 +6361,69 @@ var RelRangePicker = class extends import_lit15.LitElement {
       const qs = this.getQuickSelects().find((q) => q.label === label);
       if (qs) this.selectQuickSelect(qs);
     };
+    this.handleGridKeydown = (e) => {
+      const cell = e.target.closest?.(".day-cell");
+      const iso = cell?.dataset.iso;
+      if (!iso) return;
+      const date = this.parseISODate(iso);
+      if (!date) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const isDisabled = this.isDateDisabled(date);
+        if (!isDisabled) {
+          this.handleDayClick({
+            date,
+            day: date.getDate(),
+            isCurrentMonth: true,
+            isToday: false,
+            isDraftFrom: false,
+            isDraftTo: false,
+            isInRange: false,
+            isDisabled,
+            isWeekend: false
+          });
+        }
+        return;
+      }
+      const next = new Date(date);
+      const dow = next.getDay();
+      switch (e.key) {
+        case "ArrowLeft":
+          next.setDate(next.getDate() - 1);
+          break;
+        case "ArrowRight":
+          next.setDate(next.getDate() + 1);
+          break;
+        case "ArrowUp":
+          next.setDate(next.getDate() - 7);
+          break;
+        case "ArrowDown":
+          next.setDate(next.getDate() + 7);
+          break;
+        case "Home":
+          next.setDate(
+            next.getDate() - (this.weekStart === "mon" ? dow === 0 ? 6 : dow - 1 : dow)
+          );
+          break;
+        case "End":
+          next.setDate(
+            next.getDate() + (this.weekStart === "mon" ? dow === 0 ? 0 : 7 - dow : 6 - dow)
+          );
+          break;
+        case "PageUp":
+          if (e.shiftKey) next.setFullYear(next.getFullYear() - 1);
+          else next.setMonth(next.getMonth() - 1);
+          break;
+        case "PageDown":
+          if (e.shiftKey) next.setFullYear(next.getFullYear() + 1);
+          else next.setMonth(next.getMonth() + 1);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      this.moveGridFocusTo(next);
+    };
   }
   // ── Lifecycle ──
   connectedCallback() {
@@ -5910,14 +6435,64 @@ var RelRangePicker = class extends import_lit15.LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
-  updated() {
+  updated(changed) {
     this.style.width = this.width;
     this.style.minWidth = this.minWidth;
     this.style.maxWidth = this.maxWidth;
     this.style.height = this.height;
     this.style.minHeight = this.minHeight;
     this.style.maxHeight = this.maxHeight;
+    if (changed.has("open")) {
+      if (this.open) {
+        this.showTopLayer();
+        window.addEventListener("resize", this.onReposition);
+        window.addEventListener("scroll", this.onReposition, true);
+      } else {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+      }
+    }
+  }
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, and its overflow:hidden clips position:absolute ones —
+   * either way the picker shell breaks inside a modal. Promoting shell
+   * (and popup-mode backdrop) to the browser top layer sidesteps both —
+   * same fix as rel-popover / rel-autocomplete / rel-select. `manual`
+   * keeps outside-click and Escape handling under this component's own
+   * control. While in the top layer the CSS anchoring (absolute, below
+   * the trigger) is meaningless, so popover mode gets inline fixed
+   * coordinates from updatePopoverPosition(). */
+  showTopLayer() {
+    for (const el of [this.mode === "popup" ? this.backdropEl : void 0, this.popoverEl]) {
+      if (!el || typeof el.showPopover !== "function") continue;
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+      }
+    }
+    if (this.mode === "popover") {
+      requestAnimationFrame(() => this.updatePopoverPosition());
+    }
+  }
+  hideTopLayer() {
+    for (const el of [this.popoverEl, this.backdropEl]) {
+      if (!el || typeof el.hidePopover !== "function") continue;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+      }
+    }
+    if (this.popoverEl) {
+      this.popoverEl.style.position = "";
+      this.popoverEl.style.top = "";
+      this.popoverEl.style.left = "";
+    }
   }
   toggleOpen() {
     if (this.disabled) return;
@@ -5933,6 +6508,7 @@ var RelRangePicker = class extends import_lit15.LitElement {
     this.draftActivePreset = null;
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
     if (this.draftFrom) {
       const date = this.parseISODate(this.draftFrom);
       if (date) {
@@ -6231,10 +6807,45 @@ var RelRangePicker = class extends import_lit15.LitElement {
     if (!this.isSelectingRange || day.isDisabled) return;
     this.hoverDate = this.formatISODate(day.date);
   }
+  // ── Grid keyboard navigation (APG grid pattern) ──
+  /**
+   * The cell that carries tabindex="0". Prefers the last roved date, then the
+   * draft start, then today, then the first selectable day — always exactly
+   * one Tab stop, even after arrowing away with nothing selected.
+   */
+  getRovingIso(days) {
+    const inView = days.filter((d) => d.isCurrentMonth);
+    if (inView.length === 0) return "";
+    const candidates = [
+      this.focusedDate,
+      this.draftFrom,
+      this.formatISODate(/* @__PURE__ */ new Date())
+    ];
+    for (const iso of candidates) {
+      if (iso && inView.some((d) => this.formatISODate(d.date) === iso)) {
+        return iso;
+      }
+    }
+    const firstEnabled = inView.find((d) => !d.isDisabled) ?? inView[0];
+    return this.formatISODate(firstEnabled.date);
+  }
+  async moveGridFocusTo(date) {
+    this.focusedDate = this.formatISODate(date);
+    if (date.getMonth() !== this.viewMonth || date.getFullYear() !== this.viewYear) {
+      this.viewMonth = date.getMonth();
+      this.viewYear = date.getFullYear();
+    }
+    if (this.isSelectingRange && !this.isDateDisabled(date)) {
+      this.hoverDate = this.focusedDate;
+    }
+    await this.updateComplete;
+    this.renderRoot.querySelector(`.day-cell[data-iso="${this.focusedDate}"]`)?.focus();
+  }
   // ── Render ──
   render() {
     const quickSelects = this.getQuickSelects();
     const days = this.getCalendarDays();
+    const rovingIso = this.getRovingIso(days);
     const weekdayLabels = this.getWeekdayLabels();
     const draftFromDisplay = this.draftFrom ? this.formatDisplayDate(this.draftFrom) : "";
     const draftToDisplay = this.draftTo ? this.formatDisplayDate(this.draftTo) : "";
@@ -6273,10 +6884,11 @@ var RelRangePicker = class extends import_lit15.LitElement {
             </button>
           `}
 
-      ${isPopup && this.open ? import_lit15.html`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>` : import_lit15.nothing}
+      ${isPopup && this.open ? import_lit15.html`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>` : import_lit15.nothing}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        popover="manual"
         role="dialog"
         aria-label="Select date range"
       >
@@ -6362,8 +6974,10 @@ var RelRangePicker = class extends import_lit15.LitElement {
               @mouseleave=${() => {
       this.hoverDate = null;
     }}
+              @keydown=${this.handleGridKeydown}
             >
               ${days.map((day) => {
+      const iso = this.formatISODate(day.date);
       const cellClasses = [
         "day-cell",
         day.isInRange ? "in-range" : "",
@@ -6378,8 +6992,11 @@ var RelRangePicker = class extends import_lit15.LitElement {
                   <div
                     class="${cellClasses}"
                     role="gridcell"
-                    aria-label="${this.formatISODate(day.date)}"
+                    tabindex="${day.isCurrentMonth && iso === rovingIso ? 0 : -1}"
+                    data-iso="${iso}"
+                    aria-label="${iso}"
                     aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
+                    aria-disabled="${day.isDisabled ? "true" : import_lit15.nothing}"
                     @click=${() => this.handleDayClick(day)}
                     @mouseenter=${() => this.handleDayHover(day)}
                   >
@@ -6487,6 +7104,17 @@ RelRangePicker.styles = import_lit15.css`
 
     /* ── Popover shell ── */
     .popover {
+      /* Reset native [popover] UA styles first (the shell is promoted to
+         the top layer so transformed / overflow:hidden ancestors — e.g. a
+         centered rel-modal panel — can't hijack or clip it). While in the
+         top layer, JS overrides the anchored position below with inline
+         fixed coordinates; the CSS anchoring is the no-Popover-API
+         fallback. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
@@ -6511,9 +7139,16 @@ RelRangePicker.styles = import_lit15.css`
     .backdrop {
       position: fixed;
       inset: 0;
-      z-index: 2147483646;
-      background: rgba(0,0,0,0.4);
-    }
+      /* Reset native [popover] UA styles — the backdrop is promoted to the
+         top layer right before the panel so the panel stacks above it. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      border: none;
+      z-index: 2147483646;
+      background: rgba(0,0,0,0.4);
+    }
 
     /* ── Two-panel wrapper ── */
     .picker-wrapper {
@@ -6706,6 +7341,12 @@ RelRangePicker.styles = import_lit15.css`
       cursor: pointer;
     }
 
+    .day-cell:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+      z-index: 2;
+    }
+
     .day-cell.other-month {
       opacity: 0.35;
       pointer-events: none;
@@ -6881,9 +7522,18 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators15.state)()
 ], RelRangePicker.prototype, "hoverDate", 2);
+__decorateClass([
+  (0, import_decorators15.state)()
+], RelRangePicker.prototype, "focusedDate", 2);
 __decorateClass([
   (0, import_decorators15.query)(".trigger-button")
 ], RelRangePicker.prototype, "triggerButton", 2);
+__decorateClass([
+  (0, import_decorators15.query)(".popover")
+], RelRangePicker.prototype, "popoverEl", 2);
+__decorateClass([
+  (0, import_decorators15.query)(".backdrop")
+], RelRangePicker.prototype, "backdropEl", 2);
 RelRangePicker = __decorateClass([
   (0, import_decorators15.customElement)("rel-range-picker")
 ], RelRangePicker);
@@ -6904,6 +7554,33 @@ var RelChip = class extends import_lit16.LitElement {
     this.removed = false;
     this.draggableChip = false;
     this.dragging = false;
+    /** The chip body is announced as a button, so it must also act on keys:
+     *  Enter/Space re-dispatch as a host click (consumers' @click handlers
+     *  fire), Delete/Backspace remove when removable, and arrow keys ask the
+     *  container to reorder a draggable chip (`chip-move`) — the keyboard
+     *  alternative to pointer drag-and-drop. */
+    this.handleKeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && this.removable) {
+        e.preventDefault();
+        this.handleRemove(e);
+        return;
+      }
+      if (this.draggableChip && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        e.preventDefault();
+        this.dispatchEvent(
+          new CustomEvent("chip-move", {
+            detail: { direction: e.key === "ArrowLeft" ? -1 : 1 },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
     this.onDragStart = (e) => {
       if (!this.draggableChip) return;
       this.dragging = true;
@@ -6957,6 +7634,7 @@ var RelChip = class extends import_lit16.LitElement {
         role="button"
         tabindex="0"
         aria-label="${this.label}"
+        @keydown=${this.handleKeydown}
       >
         ${showAvatar ? import_lit16.html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>` : null}
         ${showLeadingIcon ? import_lit16.html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>` : null}
@@ -7548,26 +8226,8 @@ var RelDrawer = class extends import_lit20.LitElement {
         this.close("escape");
         return;
       }
-      if (e.key === "Tab" && this.modal) {
-        const focusable = this.getFocusableElements();
-        if (focusable.length === 0) {
-          e.preventDefault();
-          return;
-        }
-        const firstFocusable = focusable[0];
-        const lastFocusable = focusable[focusable.length - 1];
-        const activeElement = document.activeElement;
-        if (e.shiftKey) {
-          if (activeElement === firstFocusable) {
-            e.preventDefault();
-            lastFocusable.focus();
-          }
-        } else {
-          if (activeElement === lastFocusable) {
-            e.preventDefault();
-            firstFocusable.focus();
-          }
-        }
+      if (e.key === "Tab" && this.modal && this.panelElement) {
+        trapTabKey(e, this.panelElement);
       }
     };
     // Drag-to-close handlers
@@ -7626,12 +8286,19 @@ var RelDrawer = class extends import_lit20.LitElement {
     }
   }
   handleOpen() {
-    this.previousFocus = document.activeElement;
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     if (this.modal) {
       this.updateComplete.then(() => {
-        const focusTarget = this.querySelector("[autofocus]") ?? this.querySelector(".close-button") ?? this.querySelector(".panel");
-        focusTarget?.focus();
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) {
+          focusTarget.focus();
+        } else {
+          panel.tabIndex = -1;
+          panel.focus();
+        }
       });
     }
     document.addEventListener("keydown", this.handleKeydown);
@@ -7693,29 +8360,6 @@ var RelDrawer = class extends import_lit20.LitElement {
     document.body.style.overflow = this.originalBodyOverflow;
     document.body.style.paddingRight = this.originalBodyPaddingRight;
   }
-  getFocusableElements() {
-    if (!this.panelElement) return [];
-    const selectors = [
-      "a[href]",
-      "button:not([disabled])",
-      "textarea:not([disabled])",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(",");
-    const elements = Array.from(
-      this.panelElement.querySelectorAll(selectors)
-    );
-    const slots = this.panelElement.querySelectorAll("slot");
-    slots.forEach((slot) => {
-      const assigned = slot.assignedElements({ flatten: true });
-      assigned.forEach((el) => {
-        const focusableInSlot = el.querySelectorAll(selectors);
-        elements.push(...Array.from(focusableInSlot));
-      });
-    });
-    return elements;
-  }
   handleOverlayClick(e) {
     if (!this.dismissible || !this.closeOnBackdrop) return;
     if (e.target === this.overlayElement) {
@@ -8726,12 +9370,16 @@ var RelMenu = class extends import_lit24.LitElement {
     this.type = "default";
     this.items = [];
     this.focusedIndex = 0;
+    this.subFocusedIndex = -1;
     this._items = [];
+    /** Stable id prefix for aria-activedescendant targets. */
+    this.menuId = `rel-menu-${Math.random().toString(36).slice(2)}`;
     /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
     this.lockedIndex = -1;
     this.handleDocumentClick = (e) => {
       if (!e.composedPath().includes(this)) {
         this.lockedIndex = -1;
+        this.subFocusedIndex = -1;
         this._items = this._items.map((i) => ({ ...i, open: false }));
       }
     };
@@ -8818,35 +9466,95 @@ var RelMenu = class extends import_lit24.LitElement {
       })
     );
   }
+  /** Keyboard-open locks the submenu (no hover-out to close it) and moves
+   *  virtual focus onto its first entry. */
+  openSubmenuAt(index) {
+    this.lockedIndex = index;
+    this.subFocusedIndex = 0;
+    this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
+  }
+  closeSubmenus() {
+    this.lockedIndex = -1;
+    this.subFocusedIndex = -1;
+    this._items = this._items.map((i) => ({ ...i, open: false }));
+  }
   onKeydown(ev) {
     const last = this._items.length - 1;
+    const focusedItem = this._items[this.focusedIndex];
+    if (this.subFocusedIndex >= 0 && this.type === "arrow" && focusedItem?.open && focusedItem.submenu?.length) {
+      const subLast = focusedItem.submenu.length - 1;
+      switch (ev.key) {
+        case "ArrowDown":
+          this.subFocusedIndex = Math.min(subLast, this.subFocusedIndex + 1);
+          ev.preventDefault();
+          return;
+        case "ArrowUp":
+          this.subFocusedIndex = Math.max(0, this.subFocusedIndex - 1);
+          ev.preventDefault();
+          return;
+        case "Home":
+          this.subFocusedIndex = 0;
+          ev.preventDefault();
+          return;
+        case "End":
+          this.subFocusedIndex = subLast;
+          ev.preventDefault();
+          return;
+        case "ArrowLeft":
+        case "Escape":
+          this.closeSubmenus();
+          ev.preventDefault();
+          ev.stopPropagation();
+          return;
+        case "Enter":
+        case " ":
+          this.onSubClick(this.focusedIndex, this.subFocusedIndex);
+          ev.preventDefault();
+          return;
+        default:
+          return;
+      }
+    }
     if (ev.key === "ArrowDown") {
       this.focusedIndex = Math.min(last, this.focusedIndex + 1);
       ev.preventDefault();
     } else if (ev.key === "ArrowUp") {
       this.focusedIndex = Math.max(0, this.focusedIndex - 1);
       ev.preventDefault();
+    } else if (ev.key === "Home") {
+      this.focusedIndex = 0;
+      ev.preventDefault();
+    } else if (ev.key === "End") {
+      this.focusedIndex = last;
+      ev.preventDefault();
     } else if (ev.key === "ArrowRight") {
       const item = this._items[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length) {
-        this.lockedIndex = this.focusedIndex;
-        this._items = this._items.map((i, idx) => ({
-          ...i,
-          open: idx === this.focusedIndex ? true : i.open
-        }));
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+        ev.preventDefault();
       }
     } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      this.lockedIndex = -1;
-      this._items = this._items.map((i) => ({ ...i, open: false }));
+      const anyOpen = this._items.some((i) => i.open);
+      if (anyOpen) {
+        this.closeSubmenus();
+        ev.preventDefault();
+        if (ev.key === "Escape") ev.stopPropagation();
+      }
     } else if (ev.key === "Enter" || ev.key === " ") {
       const item = this._items[this.focusedIndex];
-      this.onItemClick(item, this.focusedIndex);
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+      } else {
+        this.onItemClick(item, this.focusedIndex);
+      }
       ev.preventDefault();
     }
   }
   renderMenuItem(item, index) {
-    const isFocused = this.focusedIndex === index;
+    const isFocused = this.focusedIndex === index && this.subFocusedIndex < 0;
     const hasSubmenu = this.type === "arrow" && !!item.submenu?.length;
+    const role = this.type === "checkbox" ? "menuitemcheckbox" : this.type === "select-option" ? "menuitemradio" : "menuitem";
+    const ariaChecked = this.type === "checkbox" ? String(!!item.checked) : this.type === "select-option" ? String(!!item.active) : import_lit24.nothing;
     const control = this.type === "checkbox" ? import_lit24.html`<rel-checkbox
             class="menu-control"
             label="${item.label}"
@@ -8864,8 +9572,13 @@ var RelMenu = class extends import_lit24.LitElement {
           `;
     return import_lit24.html`
       <div
+        id="${this.menuId}-item-${index}"
         class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
-        role="menuitem"
+        role="${role}"
+        aria-checked="${ariaChecked}"
+        aria-disabled="${item.disabled ? "true" : import_lit24.nothing}"
+        aria-haspopup="${hasSubmenu ? "menu" : import_lit24.nothing}"
+        aria-expanded="${hasSubmenu ? String(!!item.open) : import_lit24.nothing}"
         ?data-focused="${isFocused}"
         @mouseenter="${() => this.onItemEnter(item, index)}"
         @mouseleave="${() => this.onItemLeave(item, index)}"
@@ -8874,12 +9587,16 @@ var RelMenu = class extends import_lit24.LitElement {
         ${hasSubmenu ? import_lit24.html`
               <div
                 part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
+                role="menu"
                 @click="${(e) => e.stopPropagation()}">
                 ${item.submenu.map(
       (sub, subIndex) => import_lit24.html`
                     <div
-                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      id="${this.menuId}-item-${index}-sub-${subIndex}"
+                      class="rel-menu-item ${sub.active ? "active" : ""} ${sub.disabled ? "disabled" : ""}"
                       role="menuitem"
+                      aria-disabled="${sub.disabled ? "true" : import_lit24.nothing}"
+                      ?data-focused="${this.focusedIndex === index && this.subFocusedIndex === subIndex}"
                       @click="${(e) => this.onSubClick(index, subIndex, e)}">
                       <span class="menu-label">${sub.label}</span>
                     </div>
@@ -8891,12 +9608,14 @@ var RelMenu = class extends import_lit24.LitElement {
     `;
   }
   render() {
+    const activeDescendant = this._items.length === 0 ? import_lit24.nothing : this.subFocusedIndex >= 0 ? `${this.menuId}-item-${this.focusedIndex}-sub-${this.subFocusedIndex}` : `${this.menuId}-item-${this.focusedIndex}`;
     return import_lit24.html`
       <style>${RelMenu._css}</style>
       <div
         part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
         role="menu"
         tabindex="0"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.onKeydown}"
         @click="${(e) => e.stopPropagation()}">
         ${this._items.map((item, index) => this.renderMenuItem(item, index))}
@@ -8986,7 +9705,10 @@ RelMenu._css = `
       cursor: not-allowed;
     }
 
-    .rel-menu-item[data-focused="true"] {
+    /* [data-focused] (presence, not ="true"): the ?data-focused boolean
+       binding renders the attribute with an EMPTY value, so a ="true"
+       selector never matches. */
+    .rel-menu-item[data-focused] {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
     }
@@ -9077,6 +9799,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators24.state)()
 ], RelMenu.prototype, "focusedIndex", 2);
+__decorateClass([
+  (0, import_decorators24.state)()
+], RelMenu.prototype, "subFocusedIndex", 2);
 __decorateClass([
   (0, import_decorators24.state)()
 ], RelMenu.prototype, "_items", 2);
@@ -9087,16 +9812,159 @@ RelMenu = __decorateClass([
 // src/components/rel-menubar/rel-menubar.ts
 var import_lit25 = require("lit");
 var import_decorators25 = require("lit/decorators.js");
+
+// src/utils/shortcuts.ts
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+}
+var KEY_ALIASES = {
+  esc: "escape",
+  space: " ",
+  plus: "+",
+  return: "enter",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+function parseShortcut(shortcut) {
+  const parsed = {
+    key: "",
+    ctrl: false,
+    meta: false,
+    alt: false,
+    shift: false
+  };
+  const tokens = shortcut.split("+").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (shortcut.endsWith("+") && !shortcut.endsWith("++")) tokens.push("+");
+  for (const token of tokens) {
+    switch (token) {
+      case "mod":
+        if (isApplePlatform()) parsed.meta = true;
+        else parsed.ctrl = true;
+        break;
+      case "ctrl":
+      case "control":
+        parsed.ctrl = true;
+        break;
+      case "meta":
+      case "cmd":
+      case "command":
+      case "win":
+        parsed.meta = true;
+        break;
+      case "alt":
+      case "option":
+        parsed.alt = true;
+        break;
+      case "shift":
+        parsed.shift = true;
+        break;
+      default:
+        parsed.key = KEY_ALIASES[token] ?? token;
+    }
+  }
+  return parsed;
+}
+function matchesShortcut(e, shortcut) {
+  const parsed = parseShortcut(shortcut);
+  if (!parsed.key) return false;
+  return e.key.toLowerCase() === parsed.key && e.ctrlKey === parsed.ctrl && e.metaKey === parsed.meta && e.altKey === parsed.alt && e.shiftKey === parsed.shift;
+}
+function isEditableTarget(e) {
+  const target = e.composedPath()[0];
+  if (!(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+    return true;
+  }
+  return target.isContentEditable;
+}
+function bindShortcut(shortcut, handler, options = {}) {
+  const target = options.target ?? document;
+  const listener = (event) => {
+    const e = event;
+    if (!matchesShortcut(e, shortcut)) return;
+    if (!options.allowInEditable && isEditableTarget(e)) return;
+    if (options.preventDefault !== false) e.preventDefault();
+    handler(e);
+  };
+  target.addEventListener("keydown", listener);
+  return () => target.removeEventListener("keydown", listener);
+}
+var APPLE_LABELS = {
+  mod: "\u2318",
+  meta: "\u2318",
+  cmd: "\u2318",
+  command: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  option: "\u2325",
+  shift: "\u21E7"
+};
+var GENERIC_LABELS = {
+  mod: "Ctrl",
+  meta: "Win",
+  cmd: "Win",
+  command: "Win",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  shift: "Shift"
+};
+var KEY_LABELS = {
+  arrowup: "\u2191",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  escape: "Esc",
+  " ": "Space"
+};
+function formatShortcutParts(shortcut) {
+  const labels = isApplePlatform() ? APPLE_LABELS : GENERIC_LABELS;
+  return shortcut.split("+").map((t) => t.trim()).filter(Boolean).map((token) => {
+    const lower = token.toLowerCase();
+    if (labels[lower]) return labels[lower];
+    const key = KEY_ALIASES[lower] ?? lower;
+    if (KEY_LABELS[key]) return KEY_LABELS[key];
+    return key.length === 1 ? key.toUpperCase() : key[0].toUpperCase() + key.slice(1);
+  });
+}
+
+// src/components/rel-menubar/rel-menubar.ts
 var import_rel_icon10 = require("@reliability-design/icons/rel-icon");
 var RelMenubar = class extends import_lit25.LitElement {
   constructor() {
     super(...arguments);
+    this.bindShortcuts = false;
     this.menus = [];
     this.openMenuIndex = -1;
     this.focusedTriggerIndex = 0;
     this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.openSubmenuElement = null;
     this.hoverSwitchEnabled = false;
+    /** Stable id prefix for aria-activedescendant targets (light DOM, so ids
+     *  must be unique per menubar instance on the page). */
+    this.menubarId = `rel-menubar-${Math.random().toString(36).slice(2)}`;
+    this.handleShortcutKeyDown = (e) => {
+      if (!this.bindShortcuts || e.defaultPrevented) return;
+      if (isEditableTarget(e)) return;
+      for (const { menu } of this.menus) {
+        for (const item of this.getFocusableItems(menu)) {
+          const shortcut = item.getAttribute("data-shortcut");
+          if (!shortcut) continue;
+          if (item.disabled) continue;
+          if (matchesShortcut(e, shortcut)) {
+            e.preventDefault();
+            this.handleItemClick(item);
+            return;
+          }
+        }
+      }
+    };
     this.handleOutsideClick = (e) => {
       if (!e.composedPath().includes(this)) {
         this.closeAllMenus();
@@ -9110,6 +9978,7 @@ var RelMenubar = class extends import_lit25.LitElement {
     super.connectedCallback();
     this.discoverMenus();
     document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("keydown", this.handleShortcutKeyDown);
     this._onScroll = () => {
       this._repositionOpenMenu();
       this._repositionOpenSubmenu();
@@ -9119,6 +9988,7 @@ var RelMenubar = class extends import_lit25.LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("keydown", this.handleShortcutKeyDown);
     if (this._onScroll) {
       window.removeEventListener("scroll", this._onScroll, { capture: true });
     }
@@ -9152,12 +10022,26 @@ var RelMenubar = class extends import_lit25.LitElement {
   closeAllMenus() {
     this.openMenuIndex = -1;
     this.openSubmenuElement = null;
+    this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.hoverSwitchEnabled = false;
     this.requestUpdate();
   }
+  /** Close everything and put DOM focus back on the trigger that owned the
+   *  open menu. (Capturing the index BEFORE closing — closeAllMenus resets
+   *  openMenuIndex to -1, which used to drop focus to <body>.) */
+  closeAllMenusAndRefocusTrigger() {
+    const idx = this.openMenuIndex;
+    this.closeAllMenus();
+    if (idx !== -1) {
+      this.focusedTriggerIndex = idx;
+      this.focusTrigger(idx);
+    }
+  }
   openMenu(index, triggerElement) {
     this.openMenuIndex = index;
     this.focusedItemIndex = -1;
+    this.focusedSubItemIndex = -1;
     this.openSubmenuElement = null;
     this.requestUpdate();
     this.updateComplete.then(() => {
@@ -9199,27 +10083,20 @@ var RelMenubar = class extends import_lit25.LitElement {
       event.preventDefault();
       this.focusedTriggerIndex = Math.max(0, this.focusedTriggerIndex - 1);
       this.focusTrigger(this.focusedTriggerIndex);
-    } else if (key === "Enter" || key === " ") {
+    } else if (key === "Enter" || key === " " || key === "ArrowDown") {
       event.preventDefault();
       const trigger = this.querySelector(
         `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
       );
       if (trigger) {
-        this.openMenu(this.focusedTriggerIndex, trigger);
-        this.updateComplete.then(() => {
-          const focusTarget = this.querySelector(
-            "[autofocus], [role='menuitem']"
-          );
-          if (focusTarget) {
-            focusTarget.focus();
-          } else {
-            this.focusMenuItem(0);
-          }
-        });
+        if (this.openMenuIndex !== this.focusedTriggerIndex) {
+          this.openMenu(this.focusedTriggerIndex, trigger);
+        }
+        this.updateComplete.then(() => this.focusMenuItem(0));
       }
-    } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
+    } else if (key === "Escape" && this.openMenuIndex !== -1) {
       event.preventDefault();
-      this.focusMenuItem(0);
+      this.closeAllMenusAndRefocusTrigger();
     }
   }
   focusTrigger(index) {
@@ -9232,6 +10109,36 @@ var RelMenubar = class extends import_lit25.LitElement {
     const { key } = event;
     const menuContent = this.menus[this.openMenuIndex]?.menu;
     if (!menuContent) return;
+    if (this.openSubmenuElement) {
+      const subItems = this.getSubmenuItems(this.openSubmenuElement);
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        this.focusedSubItemIndex = Math.min(
+          subItems.length - 1,
+          this.focusedSubItemIndex + 1
+        );
+      } else if (key === "ArrowUp") {
+        event.preventDefault();
+        this.focusedSubItemIndex = Math.max(0, this.focusedSubItemIndex - 1);
+      } else if (key === "Home") {
+        event.preventDefault();
+        this.focusedSubItemIndex = 0;
+      } else if (key === "End") {
+        event.preventDefault();
+        this.focusedSubItemIndex = subItems.length - 1;
+      } else if (key === "ArrowLeft" || key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openSubmenuElement = null;
+        this.focusedSubItemIndex = -1;
+      } else if (key === "Enter" || key === " ") {
+        event.preventDefault();
+        const subItem = subItems[this.focusedSubItemIndex];
+        if (subItem) this.handleSubmenuItemClick(subItem);
+      }
+      this.requestUpdate();
+      return;
+    }
     const items = this.getFocusableItems(menuContent);
     if (key === "ArrowDown") {
       event.preventDefault();
@@ -9241,30 +10148,56 @@ var RelMenubar = class extends import_lit25.LitElement {
       event.preventDefault();
       this.focusedItemIndex = Math.max(0, this.focusedItemIndex - 1);
       this.requestUpdate();
+    } else if (key === "Home") {
+      event.preventDefault();
+      this.focusedItemIndex = 0;
+      this.requestUpdate();
+    } else if (key === "End") {
+      event.preventDefault();
+      this.focusedItemIndex = items.length - 1;
+      this.requestUpdate();
     } else if (key === "ArrowRight") {
       event.preventDefault();
       const currentItem = items[this.focusedItemIndex];
       if (currentItem?.hasAttribute("data-submenu")) {
-        this.openSubmenu(currentItem);
+        const panel = this.querySelector(
+          `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+        );
+        const renderedTrigger = panel?.querySelector(
+          `[data-focus-index="${this.focusedItemIndex}"]`
+        );
+        this.focusedSubItemIndex = 0;
+        this.openSubmenu(currentItem, renderedTrigger ?? void 0);
       }
     } else if (key === "ArrowLeft") {
       event.preventDefault();
-      if (this.openSubmenuElement) {
-        this.openSubmenuElement = null;
-        this.requestUpdate();
-      }
     } else if (key === "Escape") {
       event.preventDefault();
-      this.closeAllMenus();
-      this.focusTrigger(this.openMenuIndex);
+      this.closeAllMenusAndRefocusTrigger();
     } else if (key === "Enter" || key === " ") {
       event.preventDefault();
       const currentItem = items[this.focusedItemIndex];
       if (currentItem) {
-        this.handleItemClick(currentItem);
+        if (currentItem.hasAttribute("data-submenu")) {
+          const panel = this.querySelector(
+            `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+          );
+          const renderedTrigger = panel?.querySelector(
+            `[data-focus-index="${this.focusedItemIndex}"]`
+          );
+          this.focusedSubItemIndex = 0;
+          this.openSubmenu(currentItem, renderedTrigger ?? void 0);
+        } else {
+          this.handleItemClick(currentItem);
+        }
       }
     }
   }
+  getSubmenuItems(submenuElement) {
+    return Array.from(submenuElement.children).filter(
+      (el) => el.hasAttribute("data-item")
+    );
+  }
   getFocusableItems(menuContent) {
     return Array.from(menuContent.children).filter(
       (el) => el.hasAttribute("data-item") || el.hasAttribute("data-checkbox") || el.hasAttribute("data-radio") || el.hasAttribute("data-submenu")
@@ -9301,27 +10234,41 @@ var RelMenubar = class extends import_lit25.LitElement {
     } else if (item.hasAttribute("data-submenu")) {
       this.openSubmenu(item);
     } else {
-      this.closeAllMenus();
+      this.dispatchSelectEvent(item);
+      this.closeAllMenusAndRefocusTrigger();
     }
   }
-  openSubmenu(submenuTrigger, renderedTrigger, submenuIndex) {
+  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 submenuId = `submenu-${submenuIndex ?? 0}`;
-      const submenuPanel = this.querySelector(
-        `.submenu-panel[data-submenu-id="${submenuId}"]`
-      );
+      const submenuPanel = this.querySelector(".submenu-panel.open");
       if (submenuPanel) {
-        const positionTarget = renderedTrigger ?? submenuTrigger;
-        const rect = positionTarget.getBoundingClientRect();
-        submenuPanel.style.top = `${rect.top}px`;
-        submenuPanel.style.left = `${rect.right + 4}px`;
+        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 };
@@ -9333,16 +10280,21 @@ var RelMenubar = class extends import_lit25.LitElement {
       })
     );
   }
-  renderMenuItem(item, index) {
-    const isFocused = index === this.focusedItemIndex;
+  renderMenuItem(item, focusIndex, menuIndex) {
+    const isFocused = focusIndex >= 0 && focusIndex === this.focusedItemIndex;
+    const itemId = focusIndex >= 0 ? `${this.menubarId}-m${menuIndex}-i${focusIndex}` : import_lit25.nothing;
     if (item.hasAttribute("data-item")) {
       const button = item;
       const disabled = button.disabled;
       const shortcut = button.getAttribute("data-shortcut") || "";
       return import_lit25.html`
         <div
+          id="${itemId}"
           class="menu-item ${isFocused ? "focused" : ""}"
+          role="menuitem"
+          data-focus-index="${focusIndex}"
           data-disabled="${disabled}"
+          aria-disabled="${disabled ? "true" : import_lit25.nothing}"
           @click="${() => !disabled && this.handleItemClick(item)}"
         >
           <span>${button.textContent}</span>
@@ -9351,7 +10303,7 @@ var RelMenubar = class extends import_lit25.LitElement {
       `;
     }
     if (item.hasAttribute("data-separator")) {
-      return import_lit25.html`<div class="menu-separator"></div>`;
+      return import_lit25.html`<div class="menu-separator" role="separator"></div>`;
     }
     if (item.hasAttribute("data-checkbox")) {
       const label = item;
@@ -9359,6 +10311,8 @@ var RelMenubar = class extends import_lit25.LitElement {
       const labelText = Array.from(label.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent?.trim()).filter(Boolean).join(" ") || label.getAttribute("label") || "";
       return import_lit25.html`
         <rel-checkbox
+          id="${itemId}"
+          data-focus-index="${focusIndex}"
           label=${labelText}
           .status=${checkbox?.checked ? "checked" : "unchecked"}
           @rel-change=${(e) => {
@@ -9370,17 +10324,21 @@ var RelMenubar = class extends import_lit25.LitElement {
     }
     if (item.hasAttribute("data-submenu")) {
       const label = item.getAttribute("label") || item.textContent?.trim() || "";
-      const submenuId = `submenu-${index}`;
       return import_lit25.html`
         <div
+          id="${itemId}"
           class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
-          @click="${(e) => this.openSubmenu(item, e.currentTarget, index)}"
-          @mouseenter="${(e) => this.openSubmenu(item, e.currentTarget, index)}"
+          role="menuitem"
+          data-focus-index="${focusIndex}"
+          aria-haspopup="menu"
+          aria-expanded="${this.openSubmenuElement === item}"
+          @click="${(e) => this.openSubmenu(item, e.currentTarget)}"
+          @mouseenter="${(e) => this.openSubmenu(item, e.currentTarget)}"
         >
           <span>${label}</span>
           <rel-icon name="chevron-right"></rel-icon>
         </div>
-        ${this.renderSubmenu(item, submenuId)}
+        ${this.renderSubmenu(item)}
       `;
     }
     if (item.hasAttribute("data-radio-group")) {
@@ -9405,24 +10363,23 @@ var RelMenubar = class extends import_lit25.LitElement {
     }
     return null;
   }
-  renderSubmenu(submenuElement, submenuId) {
+  renderSubmenu(submenuElement) {
     const isOpen = this.openSubmenuElement === submenuElement;
-    const submenuItems = Array.from(submenuElement.children);
+    const submenuItems = this.getSubmenuItems(submenuElement);
     return import_lit25.html`
-      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
-        ${submenuItems.map((subItem) => {
-      if (subItem.hasAttribute("data-item")) {
-        const button = subItem;
-        return import_lit25.html`
-              <div
-                class="menu-item"
-                @click="${() => this.handleSubmenuItemClick(subItem)}"
-              >
-                <span>${button.textContent}</span>
-              </div>
-            `;
-      }
-      return null;
+      <div class="submenu-panel ${isOpen ? "open" : ""}" role="menu">
+        ${submenuItems.map((subItem, subIdx) => {
+      const button = subItem;
+      return import_lit25.html`
+            <div
+              id="${isOpen ? `${this.menubarId}-sub-${subIdx}` : import_lit25.nothing}"
+              class="menu-item ${isOpen && subIdx === this.focusedSubItemIndex ? "focused" : ""}"
+              role="menuitem"
+              @click="${() => this.handleSubmenuItemClick(subItem)}"
+            >
+              <span>${button.textContent}</span>
+            </div>
+          `;
     })}
       </div>
     `;
@@ -9430,28 +10387,40 @@ var RelMenubar = class extends import_lit25.LitElement {
   renderMenuPanel(menuState, index) {
     const isOpen = index === this.openMenuIndex;
     const items = Array.from(menuState.menu.children);
+    const focusables = this.getFocusableItems(menuState.menu);
+    const activeDescendant = !isOpen ? import_lit25.nothing : this.focusedSubItemIndex >= 0 ? `${this.menubarId}-sub-${this.focusedSubItemIndex}` : this.focusedItemIndex >= 0 ? `${this.menubarId}-m${index}-i${this.focusedItemIndex}` : import_lit25.nothing;
     return import_lit25.html`
       <div
         class="menubar-panel ${isOpen ? "open" : ""}"
         data-menu-index="${index}"
         tabindex="-1"
+        role="menu"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.handlePanelKeyDown}"
       >
-        ${items.map((item, idx) => this.renderMenuItem(item, idx))}
+        ${items.map(
+      (item) => this.renderMenuItem(item, focusables.indexOf(item), index)
+    )}
       </div>
     `;
   }
   render() {
     return import_lit25.html`
       <style>${RelMenubar._css}</style>
-      <div class="menubar-container">
+      <div class="menubar-container" role="menubar">
         ${this.menus.map(
       (menuState, index) => import_lit25.html`
             <button
               class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
               data-index="${index}"
+              role="menuitem"
+              aria-haspopup="menu"
+              aria-expanded="${index === this.openMenuIndex}"
               @click="${(e) => this.handleTriggerClick(index, e)}"
               @mouseenter="${(e) => this.handleTriggerMouseEnter(index, e)}"
+              @focus="${() => {
+        this.focusedTriggerIndex = index;
+      }}"
               @keydown="${this.handleTriggerKeyDown}"
             >
               ${menuState.menu.label}
@@ -9622,6 +10591,9 @@ RelMenubar._css = `
       cursor: pointer;
     }
   `;
+__decorateClass([
+  (0, import_decorators25.property)({ type: Boolean, attribute: "bind-shortcuts" })
+], RelMenubar.prototype, "bindShortcuts", 2);
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "menus", 2);
@@ -9634,6 +10606,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "focusedItemIndex", 2);
+__decorateClass([
+  (0, import_decorators25.state)()
+], RelMenubar.prototype, "focusedSubItemIndex", 2);
 __decorateClass([
   (0, import_decorators25.state)()
 ], RelMenubar.prototype, "openSubmenuElement", 2);
@@ -10302,7 +11277,6 @@ RelTopbar.styles = import_lit34.css`
       color: var(--rel-topbar-item-color);
 
 
-
       text-decoration: none;
       font-family: var(--rel-body-md-medium-font-family);
       font-weight: var(--rel-body-md-medium-font-weight);
@@ -10552,8 +11526,6 @@ RelTopbarItem.styles = import_lit35.css`
       color: var(--_item-color);
 
 
-
-
       text-decoration: none;
       white-space: nowrap;
       position: relative;
@@ -10785,9 +11757,7 @@ RelTopbarProfile.styles = import_lit36.css`
 
     .name {
 
-
       color: var(--rel-text-default);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -10806,9 +11776,7 @@ RelTopbarProfile.styles = import_lit36.css`
 
     .subtitle {
 
-
       color: var(--rel-text-placeholder);
-
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -10833,9 +11801,7 @@ RelTopbarProfile.styles = import_lit36.css`
       padding: 2px var(--rel-spacing-2xs, 4px);
       border-radius: var(--rel-border-radius-xs, 2px);
 
-
       text-transform: uppercase;
-
       flex-shrink: 0;
       font-family: var(--rel-body-xs-semibold-font-family);
       font-weight: var(--rel-body-xs-semibold-font-weight);
@@ -11182,7 +12148,7 @@ var RelOtp = class extends import_lit37.LitElement {
                     data-index="${index}"
                     type="${this.mask ? "password" : "text"}"
                     inputmode="${this.getInputMode()}"
-                    autocomplete="new-password"
+                    autocomplete="one-time-code"
                     pattern="${this.pattern || ""}"
                     placeholder="${this.placeholder}"
                     maxlength="1"
@@ -11245,7 +12211,6 @@ RelOtp.styles = import_lit37.css`
       align-items: center;
       justify-content: center;
       color: var(--rel-border-default);
-
       user-select: none;
       padding: 0 var(--rel-spacing-3xs);
       font-family: var(--rel-action-xl-font-family);
@@ -11266,7 +12231,6 @@ RelOtp.styles = import_lit37.css`
       border-radius: var(--rel-border-radius-sm);
       background: var(--rel-bg-neutral);
 
-
       text-align: center;
       color: var(--rel-text-default);
       outline: none;
@@ -11488,6 +12452,14 @@ var RelPagination = class extends import_lit38.LitElement {
     }
     return pages;
   }
+  /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+      Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+  formatPageLabel(n) {
+    if (n < 1e4) return String(n);
+    if (n < 1e6) return `${Math.floor(n / 1e3)}k`;
+    const m = Math.floor(n / 1e5) / 10;
+    return `${Number.isInteger(m) ? m.toFixed(0) : m}M`;
+  }
   handlePageChange(newPage) {
     const total = this.computedTotalPages;
     if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
@@ -11533,15 +12505,20 @@ var RelPagination = class extends import_lit38.LitElement {
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
-            ${pages.map(
-      (p) => p === -1 ? import_lit38.html`<span class="pag-ellipsis">...</span>` : import_lit38.html`<button
-                    type="button"
-                    class="pag-page-btn ${Math.abs(p - current) <= 1 ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
-                    aria-label="Page ${p}"
-                    aria-current="${p === current ? "page" : "false"}"
-                    @click="${() => this.handlePageChange(p)}"
-                  >${p}</button>`
-    )}
+            ${pages.map((p) => {
+      if (p === -1) return import_lit38.html`<span class="pag-ellipsis">...</span>`;
+      const isNear = Math.abs(p - current) <= 1;
+      const isEdge = p === 1 || p === total;
+      const label = isEdge && !isNear ? this.formatPageLabel(p) : String(p);
+      return import_lit38.html`<button
+                type="button"
+                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
+                aria-label="Page ${p}"
+                title="${label === String(p) ? import_lit38.nothing : `Page ${p}`}"
+                aria-current="${p === current ? "page" : "false"}"
+                @click="${() => this.handlePageChange(p)}"
+              >${label}</button>`;
+    })}
           </div>
           ${this.renderNavBtn("next")}
         </div>
@@ -11694,9 +12671,10 @@ RelPagination.styles = import_lit38.css`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 40px;
+      width: auto;
+      min-width: 40px;
       height: 40px;
-      padding: var(--rel-spacing-xs);
+      padding: 0 var(--rel-spacing-xs);
       border-radius: var(--rel-border-radius-sm);
       border: 1px solid var(--rel-border-default);
       background: var(--rel-bg-neutral);
@@ -11944,6 +12922,14 @@ var RelPopover = class extends import_lit39.LitElement {
       e.stopPropagation();
       this.setOpen(!this.activeOpen);
     };
+    this.onHostKeyDown = (e) => {
+      if (this.disabled) return;
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (!this.triggerEl || !e.composedPath().includes(this.triggerEl)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.setOpen(!this.activeOpen);
+    };
     this.onOutsidePointerDown = (e) => {
       if (!this.activeOpen) return;
       const path = e.composedPath();
@@ -12017,10 +13003,12 @@ var RelPopover = class extends import_lit39.LitElement {
     super.connectedCallback();
     this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
     this.addEventListener("pointerdown", this.onHostPointerDown, true);
+    this.addEventListener("keydown", this.onHostKeyDown, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
+    this.removeEventListener("keydown", this.onHostKeyDown, true);
     this.removeGlobalListeners();
     this.hideNativePopover();
   }
@@ -12061,7 +13049,7 @@ var RelPopover = class extends import_lit39.LitElement {
    * OPEN / CLOSE
    * ======================= */
   onOpen() {
-    this.returnFocusEl = document.activeElement ?? this.triggerEl;
+    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
     this.addGlobalListeners();
     this.showNativePopover();
     requestAnimationFrame(() => {
@@ -12169,6 +13157,12 @@ var RelPopover = class extends import_lit39.LitElement {
     this.triggerEl.setAttribute("aria-haspopup", "dialog");
     this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
     this.triggerEl.setAttribute("aria-controls", this.uniqueId);
+    if (this.triggerEl.tabIndex < 0 && !this.triggerEl.hasAttribute("tabindex") && getFocusableElements(this.triggerEl).length === 0) {
+      this.triggerEl.setAttribute("tabindex", "0");
+      if (!this.triggerEl.hasAttribute("role")) {
+        this.triggerEl.setAttribute("role", "button");
+      }
+    }
   }
   /* =======================
    * RENDER
@@ -12648,6 +13642,14 @@ var RelResizableGroup = class extends import_lit42.LitElement {
         const delta = e.key === "ArrowUp" ? -step : step;
         this.applyKeyboardResize(handleIndex, delta);
         applied = true;
+      } else if (e.key === "Home" || e.key === "End") {
+        const leftPanel = this.panels[handleIndex];
+        if (leftPanel && handleIndex + 1 < this.panels.length) {
+          e.preventDefault();
+          const target2 = e.key === "Home" ? leftPanel.minSize : leftPanel.maxSize;
+          this.applyKeyboardResize(handleIndex, target2 - leftPanel.currentSize);
+          applied = true;
+        }
       }
       if (applied) {
         this.dispatchResizeEvent("rel-resize-end");
@@ -12687,6 +13689,13 @@ var RelResizableGroup = class extends import_lit42.LitElement {
     });
     const sizes = this.calculateInitialSizes();
     this.applySizes(sizes);
+    this.handles.forEach((handle, idx) => {
+      const left = sizes[idx];
+      const right = sizes[idx + 1];
+      if (left !== void 0 && right !== void 0 && left + right > 0) {
+        handle.updateAriaValue(left / (left + right) * 100);
+      }
+    });
   }
   calculateInitialSizes() {
     const sizes = [];
@@ -13065,6 +14074,26 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
     this.active = "";
     this.size = "medium";
     this.align = "left";
+    /** APG radio-group navigation: arrows move focus AND select, the group is
+     *  one Tab stop (roving tabindex on the selected segment). */
+    this.onKeyDown = (e) => {
+      const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
+      const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
+      if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
+      const enabled = this.options.filter((o) => !o.disabled);
+      if (enabled.length === 0) return;
+      e.preventDefault();
+      const currentIdx = enabled.findIndex((o) => o.value === this.active);
+      let target;
+      if (e.key === "Home") target = 0;
+      else if (e.key === "End") target = enabled.length - 1;
+      else if (prevKey) target = currentIdx <= 0 ? enabled.length - 1 : currentIdx - 1;
+      else target = (currentIdx + 1) % enabled.length;
+      this.setActive(enabled[target]);
+      this.updateComplete.then(() => {
+        this.shadowRoot?.querySelector('button[tabindex="0"]')?.focus();
+      });
+    };
   }
   setActive(option) {
     if (!option.disabled) {
@@ -13078,7 +14107,7 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
       );
     }
   }
-  renderSegment(option) {
+  renderSegment(option, rovingValue) {
     const isActive = this.active === option.value;
     const classes = [
       "segment",
@@ -13088,6 +14117,9 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
     return import_lit45.html`
       <button
         part="option" class="${classes}"
+        role="radio"
+        aria-checked="${isActive}"
+        tabindex="${!option.disabled && option.value === rovingValue ? 0 : -1}"
         ?disabled="${option.disabled}"
         @click="${() => this.setActive(option)}">
         ${option.label}
@@ -13100,9 +14132,15 @@ var RelSegmentedButton = class extends import_lit45.LitElement {
       this.size,
       `align-${this.align}`
     ].join(" ");
+    const enabled = this.options.filter((o) => !o.disabled);
+    const rovingValue = enabled.some((o) => o.value === this.active) ? this.active : enabled[0]?.value ?? null;
     return import_lit45.html`
-      <div part="base" class="${containerClasses}">
-        ${this.options.map((option) => this.renderSegment(option))}
+      <div
+        part="base" class="${containerClasses}"
+        role="radiogroup"
+        @keydown="${this.onKeyDown}"
+      >
+        ${this.options.map((option) => this.renderSegment(option, rovingValue))}
       </div>
     `;
   }
@@ -13264,6 +14302,8 @@ var RelSelect = class extends import_lit46.LitElement {
     this.noSearch = false;
     this.open = false;
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
+    this.typeaheadBuffer = "";
     this.panelStyle = "";
     this.searchValue = "";
     this.internalState = "default";
@@ -13299,11 +14339,20 @@ var RelSelect = class extends import_lit46.LitElement {
       if (left + t.width > window.innerWidth - 8) {
         left = Math.max(8, window.innerWidth - t.width - 8);
       }
+      this.listboxEl.style.top = `${top}px`;
+      this.listboxEl.style.left = `${left}px`;
+      this.listboxEl.style.width = `${t.width}px`;
+      const applied = this.listboxEl.getBoundingClientRect();
+      top -= applied.top - top;
+      left -= applied.left - left;
+      this.listboxEl.style.top = `${top}px`;
+      this.listboxEl.style.left = `${left}px`;
       this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
     };
     this.onSearchInput = (e) => {
       this.searchValue = e.target.value;
       this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+      this.selectAllHighlighted = false;
       requestAnimationFrame(() => this.updatePosition());
     };
   }
@@ -13316,6 +14365,7 @@ var RelSelect = class extends import_lit46.LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.chipResizeObserver?.disconnect();
   }
   firstUpdated() {
@@ -13430,8 +14480,10 @@ var RelSelect = class extends import_lit46.LitElement {
     this.open = true;
     this.searchValue = "";
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
+      this.showNativePopover();
       this.updatePosition();
       if (!this.noSearch) {
         this.searchInputEl?.focus({ preventScroll: true });
@@ -13442,8 +14494,32 @@ var RelSelect = class extends import_lit46.LitElement {
     if (!this.open) return;
     this.open = false;
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.triggerEl?.focus();
   }
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, breaking viewport-based coordinates and letting the
+   * panel's overflow:hidden clip the listbox. Promoting the listbox to
+   * the browser top layer sidesteps both — same fix as rel-popover /
+   * rel-autocomplete. `manual` keeps light-dismiss and Escape handling
+   * under this component's own control. */
+  showNativePopover() {
+    const p = this.listboxEl;
+    if (!p || typeof p.showPopover !== "function") return;
+    try {
+      if (!p.matches(":popover-open")) p.showPopover();
+    } catch {
+    }
+  }
+  hideNativePopover() {
+    const p = this.listboxEl;
+    if (!p || typeof p.hidePopover !== "function") return;
+    try {
+      if (p.matches(":popover-open")) p.hidePopover();
+    } catch {
+    }
+  }
   selectSingleOption(option) {
     this.selected = option.value;
     if (this.state === "error") this.state = "default";
@@ -13480,6 +14556,11 @@ var RelSelect = class extends import_lit46.LitElement {
   }
   onTriggerKeyDown(e) {
     if (this.state === "disabled") return;
+    if (this.multiple && (e.key === "Backspace" || e.key === "Delete") && this.selectedValues.length > 0) {
+      e.preventDefault();
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     if (!this.open) {
       if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
         e.preventDefault();
@@ -13490,26 +14571,60 @@ var RelSelect = class extends import_lit46.LitElement {
     if (this.noSearch) this.handleListNavigation(e);
   }
   onSearchKeyDown(e) {
+    if (this.multiple && e.key === "Backspace" && this.searchValue === "" && this.selectedValues.length > 0) {
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     this.handleListNavigation(e);
   }
   handleListNavigation(e) {
     const filtered = this.filteredOptions;
+    const hasSelectAll = this.multiple && filtered.length > 0;
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        if (this.selectAllHighlighted) {
+          this.selectAllHighlighted = false;
+          this.highlightedIndex = filtered.length > 0 ? 0 : -1;
+        } else if (this.highlightedIndex === -1 && hasSelectAll) {
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        }
+        this.scrollHighlightedIntoView();
         break;
       case "ArrowUp":
         e.preventDefault();
-        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        if (!this.selectAllHighlighted && this.highlightedIndex <= 0 && hasSelectAll) {
+          this.highlightedIndex = -1;
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        }
+        this.scrollHighlightedIntoView();
+        break;
+      case "Home":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = 0;
+        this.scrollHighlightedIntoView();
+        break;
+      case "End":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = filtered.length - 1;
+        this.scrollHighlightedIntoView();
+        break;
+      case " ":
+        if (!this.noSearch) return;
+        e.preventDefault();
+        this.activateHighlighted();
         break;
       case "Enter":
         e.preventDefault();
-        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-          const opt = filtered[this.highlightedIndex];
-          if (this.multiple) this.toggleMultiOption(opt);
-          else this.selectSingleOption(opt);
-        }
+        this.activateHighlighted();
         break;
       case "Escape":
         e.preventDefault();
@@ -13518,8 +14633,55 @@ var RelSelect = class extends import_lit46.LitElement {
       case "Tab":
         this.closeListbox();
         break;
+      default:
+        this.handleTypeahead(e);
+        break;
+    }
+  }
+  /** APG typeahead for the no-search mode (with a search field, typing
+   *  filters instead). Accumulates printable keys for 500 ms and jumps the
+   *  highlight to the next option whose label starts with the buffer. */
+  handleTypeahead(e) {
+    if (!this.noSearch) return;
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+    e.preventDefault();
+    const isNewQuery = this.typeaheadBuffer === "";
+    this.typeaheadBuffer += e.key.toLowerCase();
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadTimer = window.setTimeout(() => {
+      this.typeaheadBuffer = "";
+    }, 500);
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return;
+    const start = Math.max(0, this.highlightedIndex) + (isNewQuery ? 1 : 0);
+    for (let offset = 0; offset < filtered.length; offset++) {
+      const idx = (start + offset) % filtered.length;
+      if (filtered[idx].label.toLowerCase().startsWith(this.typeaheadBuffer)) {
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = idx;
+        this.scrollHighlightedIntoView();
+        return;
+      }
+    }
+  }
+  activateHighlighted() {
+    if (this.selectAllHighlighted) {
+      this.toggleSelectAll();
+      return;
+    }
+    const filtered = this.filteredOptions;
+    if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+      const opt = filtered[this.highlightedIndex];
+      if (this.multiple) this.toggleMultiOption(opt);
+      else this.selectSingleOption(opt);
     }
   }
+  scrollHighlightedIntoView() {
+    if (this.highlightedIndex < 0) return;
+    requestAnimationFrame(() => {
+      this.renderRoot.querySelector(`#${this.uniqueId}-option-${this.highlightedIndex}`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
   renderChips() {
     const values = this.selectedValues;
     const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
@@ -13597,7 +14759,7 @@ var RelSelect = class extends import_lit46.LitElement {
       this.open ? "open" : ""
     ].filter(Boolean).join(" ");
     const listboxId = `${this.uniqueId}-listbox`;
-    const activeOptionId = this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+    const activeOptionId = !this.open ? "" : this.selectAllHighlighted ? `${this.uniqueId}-select-all` : this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
     const selectedSingle = opts.find((o) => o.value === this.selected);
     return import_lit46.html`
       <div class="${wrapperClasses}">
@@ -13654,39 +14816,52 @@ var RelSelect = class extends import_lit46.LitElement {
       <div
         id="${listboxId}"
         part="panel list" class="select-listbox"
+        popover="manual"
         role="listbox"
         aria-multiselectable="${this.multiple}"
         aria-label="${accessibleName || "Options"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >
-        ${!this.noSearch ? import_lit46.html`<div class="select-search">
-              <div class="search-input-wrap">
-                <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
-                <input
-                  part="input" class="search-input"
-                  type="text"
-                  placeholder="${this.searchPlaceholder}"
-                  .value="${this.searchValue}"
-                  @input="${this.onSearchInput}"
-                  @keydown="${(e) => this.onSearchKeyDown(e)}"
-                />
-              </div>
-            </div>` : ""}
-
-        ${filtered.length === 0 ? import_lit46.html`<div class="select-empty">
-              ${opts.length === 0 ? "No options available" : "No matches found"}
-            </div>` : this.multiple ? import_lit46.html`
-              <div class="select-all-row">
-                <rel-checkbox
-                  label="${this.selectAllLabel}"
-                  status="${this.selectAllStatus}"
-                  @rel-change=${(e) => {
+        ${!this.noSearch || this.multiple && filtered.length > 0 ? import_lit46.html`<div class="select-header">
+              ${!this.noSearch ? import_lit46.html`<div class="select-search">
+                    <div class="search-input-wrap">
+                      <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
+                      <input
+                        part="input" class="search-input"
+                        type="text"
+                        placeholder="${this.searchPlaceholder}"
+                        .value="${this.searchValue}"
+                        @input="${this.onSearchInput}"
+                        @keydown="${(e) => this.onSearchKeyDown(e)}"
+                      />
+                    </div>
+                  </div>` : ""}
+              ${this.multiple && filtered.length > 0 ? import_lit46.html`<div
+                    id="${this.uniqueId}-select-all"
+                    class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
+                    role="option"
+                    aria-selected="${this.selectAllStatus === "checked"}"
+                    @pointerenter="${() => {
+      this.selectAllHighlighted = true;
+      this.highlightedIndex = -1;
+    }}"
+                    @pointerleave="${() => this.selectAllHighlighted = false}"
+                  >
+                    <rel-checkbox
+                      label="${this.selectAllLabel}"
+                      status="${this.selectAllStatus}"
+                      @rel-change=${(e) => {
       e.stopPropagation();
       this.toggleSelectAll();
     }}
-                ></rel-checkbox>
-              </div>
+                    ></rel-checkbox>
+                  </div>` : ""}
+            </div>` : ""}
+
+        ${filtered.length === 0 ? import_lit46.html`<div class="select-empty">
+              ${opts.length === 0 ? "No options available" : "No matches found"}
+            </div>` : this.multiple ? import_lit46.html`
               <div class="select-options">
                 ${(0, import_repeat2.repeat)(
       filtered,
@@ -13697,7 +14872,10 @@ var RelSelect = class extends import_lit46.LitElement {
                       class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
-                      @pointerenter="${() => this.highlightedIndex = index}"
+                      @pointerenter="${() => {
+        this.highlightedIndex = index;
+        this.selectAllHighlighted = false;
+      }}"
                     >
                       <rel-checkbox
                         label="${option.label}"
@@ -14029,6 +15207,15 @@ RelSelect.styles = import_lit46.css`
       position: fixed;
       z-index: 1001;
       display: none;
+      /* Reset native [popover] UA styles (the listbox is promoted to the
+         top layer so transformed ancestors — e.g. a centered rel-modal
+         panel — can't hijack its containing block or clip it). */
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       box-sizing: border-box;
       background: var(--rel-select-bg, var(--rel-bg-neutral));
       border: 1px solid var(--rel-select-menu-border, var(--rel-border-default));
@@ -14045,10 +15232,18 @@ RelSelect.styles = import_lit46.css`
       display: block;
     }
 
-    .select-search {
+    /* Search and Select All pin together while the options scroll beneath.
+       z-index is load-bearing: multiselect rows contain rel-checkbox, whose
+       .row wrapper is position:relative (Tab-scroll fix), so without it the
+       positioned rows paint over the sticky header in DOM order. */
+    .select-header {
       position: sticky;
       top: 0;
+      z-index: 1;
       background: var(--rel-select-bg, var(--rel-bg-neutral));
+    }
+
+    .select-search {
       padding: var(--rel-spacing-xs);
       border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
     }
@@ -14179,6 +15374,10 @@ RelSelect.styles = import_lit46.css`
       padding: 12px;
     }
 
+    .select-all-row.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
     .select-empty {
       padding: var(--rel-spacing-xs) 12px;
       color: var(--rel-select-placeholder-color, var(--rel-text-body));
@@ -14253,6 +15452,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators46.state)()
 ], RelSelect.prototype, "highlightedIndex", 2);
+__decorateClass([
+  (0, import_decorators46.state)()
+], RelSelect.prototype, "selectAllHighlighted", 2);
 __decorateClass([
   (0, import_decorators46.state)()
 ], RelSelect.prototype, "panelStyle", 2);
@@ -14450,6 +15652,10 @@ var RelModal = class extends import_lit48.LitElement {
       if (e.key === "Escape" && this.dismissible) {
         e.preventDefault();
         this.open = false;
+        return;
+      }
+      if (e.key === "Tab" && this.modal && this.panelElement) {
+        trapTabKey(e, this.panelElement);
       }
     };
     this.handleOverlayClick = (e) => {
@@ -14500,9 +15706,18 @@ var RelModal = class extends import_lit48.LitElement {
     }
   }
   handleOpen() {
-    this.previousFocus = document.activeElement;
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     document.addEventListener("keydown", this.handleKeydown);
+    if (this.modal) {
+      this.updateComplete.then(() => {
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) focusTarget.focus();
+        else panel.focus();
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: true,
@@ -14862,6 +16077,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators48.query)(".overlay")
 ], RelModal.prototype, "overlayElement", 2);
+__decorateClass([
+  (0, import_decorators48.query)(".panel")
+], RelModal.prototype, "panelElement", 2);
 RelModal = __decorateClass([
   (0, import_decorators48.customElement)("rel-modal")
 ], RelModal);
@@ -15877,6 +17095,28 @@ var RelStepper = class extends import_lit51.LitElement {
     if (this.isDisabled(step)) classes.push("disabled");
     return classes.join(" ");
   }
+  onStepKeyDown(e, step, index) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.onStepClick(step, index);
+      return;
+    }
+    const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
+    const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
+    if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
+    const steps = Array.from(
+      this.renderRoot.querySelectorAll(".rel-step:not(.disabled)")
+    );
+    if (steps.length === 0) return;
+    e.preventDefault();
+    const current = steps.indexOf(e.currentTarget);
+    let target;
+    if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = steps.length - 1;
+    else if (prevKey) target = (current - 1 + steps.length) % steps.length;
+    else target = (current + 1) % steps.length;
+    steps[target]?.focus();
+  }
   onStepClick(step, index) {
     if (step.status === "disabled") return;
     this.dispatchEvent(
@@ -15929,7 +17169,12 @@ var RelStepper = class extends import_lit51.LitElement {
       (step, idx) => import_lit51.html`
             <div
               class="${this.getStepClasses(step)}"
+              role="button"
+              tabindex="${this.isDisabled(step) ? -1 : 0}"
+              aria-disabled="${this.isDisabled(step) ? "true" : import_lit51.nothing}"
+              aria-current="${this.isProgress(step) ? "step" : import_lit51.nothing}"
               @click="${() => this.onStepClick(step, idx)}"
+              @keydown="${(e) => this.onStepKeyDown(e, step, idx)}"
             >
               ${isVertical && isTextRight ? import_lit51.html`
                     <!-- Indicator with connector below -->
@@ -16016,6 +17261,17 @@ RelStepper.styles = import_lit51.css`
     .rel-step {
       display: flex;
       position: relative;
+      cursor: pointer;
+    }
+
+    .rel-step.disabled {
+      cursor: not-allowed;
+    }
+
+    .rel-step:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .rel-stepper.horizontal.text-below .rel-step {
@@ -16592,6 +17848,8 @@ var RelTab = class extends import_lit53.LitElement {
     this.activeIndex = 0;
     this.size = "md";
     this._tabItems = [];
+    /** Stable id prefix linking tabs to the shared tabpanel. */
+    this.tabsId = `rel-tab-${Math.random().toString(36).slice(2)}`;
   }
   _onSlotChange(e) {
     const slot = e.target;
@@ -16635,13 +17893,25 @@ var RelTab = class extends import_lit53.LitElement {
         next = (next + dir + tabs.length) % tabs.length;
         if (!tabs[next]?.disabled) break;
       }
-      this.selectTab(next);
-      this.updateComplete.then(() => {
-        const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
-        tabEls?.[next]?.focus();
-      });
+      this.selectAndFocusTab(next);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const tabs = this._effectiveTabs;
+      const order = [...tabs.keys()];
+      if (event.key === "End") order.reverse();
+      const next = order.find((i) => !tabs[i]?.disabled);
+      if (next !== void 0) this.selectAndFocusTab(next);
     }
   }
+  selectAndFocusTab(index) {
+    this.selectTab(index);
+    this.updateComplete.then(() => {
+      const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
+      tabEls?.[index]?.focus();
+    });
+  }
   render() {
     const tabs = this._effectiveTabs;
     return import_lit53.html`
@@ -16651,9 +17921,11 @@ var RelTab = class extends import_lit53.LitElement {
       (tab, i) => import_lit53.html`
             <div
               part="item" class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled ? "disabled" : ""}"
+              id="${this.tabsId}-tab-${i}"
               role="tab"
               aria-selected="${i === this.activeIndex}"
               aria-disabled="${tab.disabled ?? false}"
+              aria-controls="${this.tabsId}-panel"
               tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e) => this.onKeyDown(e, i)}"
@@ -16665,7 +17937,13 @@ var RelTab = class extends import_lit53.LitElement {
           `
     )}
       </div>
-      <div class="tab-content">
+      <div
+        class="tab-content"
+        id="${this.tabsId}-panel"
+        role="tabpanel"
+        aria-labelledby="${this.tabsId}-tab-${this.activeIndex}"
+        tabindex="0"
+      >
         <slot></slot>
       </div>
     `;
@@ -16696,7 +17974,6 @@ RelTab.styles = import_lit53.css`
       padding: var(--rel-spacing-sm) var(--rel-spacing-md);
       cursor: pointer;
       color: var(--rel-text-body);
-
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
@@ -16814,7 +18091,8 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.required = false;
     this.readonly = false;
     this.format = "12h";
-    this.minuteStep = 1;
+    this.seconds = false;
+    this.minuteStep = 5;
     this.minTime = null;
     this.maxTime = null;
     this.open = false;
@@ -16826,6 +18104,8 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.fullWidth = false;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
+    this.openUp = false;
     this.handleClickOutside = (e) => {
       if (!this.open) return;
       const path = e.composedPath();
@@ -16850,40 +18130,58 @@ var RelTimePicker = class extends import_lit54.LitElement {
     document.removeEventListener("keydown", this.handleEscapeKey);
   }
   updated(changedProperties) {
-    if (changedProperties.has("open") && this.open) {
+    if (changedProperties.has("open")) {
+      if (!this.open) {
+        this.openUp = false;
+        return;
+      }
       this.resetDraftFromValue();
       setTimeout(() => {
+        this.updatePanelPlacement();
         this.scrollColumnsToSelection();
         const target = this.columnsElement?.querySelector(
           ".option-button.selected:not(:disabled)"
         ) ?? this.columnsElement?.querySelector(
           ".option-button:not(:disabled)"
         );
-        target?.focus();
+        target?.focus({ preventScroll: true });
       }, 0);
     }
   }
+  /** Open upward when the panel doesn't fit below but does fit above. */
+  updatePanelPlacement() {
+    const panel = this.renderRoot.querySelector(".popover");
+    if (!panel) return;
+    const rect = this.getBoundingClientRect();
+    const panelHeight = panel.offsetHeight;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    this.openUp = spaceBelow < panelHeight + 8 && rect.top > panelHeight + 8;
+  }
   // ── Parsing / formatting ──
   parseTime(time) {
     if (!time) return null;
-    const match = time.match(/^(\d{1,2}):(\d{2})$/);
+    const match = time.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
     if (!match) return null;
     const hour = parseInt(match[1], 10);
     const minute = parseInt(match[2], 10);
-    if (hour > 23 || minute > 59) return null;
-    return { hour, minute };
+    const second = match[3] ? parseInt(match[3], 10) : 0;
+    if (hour > 23 || minute > 59 || second > 59) return null;
+    return { hour, minute, second };
   }
-  formatValue(hour, minute) {
-    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  formatValue(hour, minute, second = 0) {
+    const hh = String(hour).padStart(2, "0");
+    const mm = String(minute).padStart(2, "0");
+    return this.seconds ? `${hh}:${mm}:${String(second).padStart(2, "0")}` : `${hh}:${mm}`;
   }
-  formatDisplay(hour, minute) {
+  formatDisplay(hour, minute, second = 0) {
     const mm = String(minute).padStart(2, "0");
+    const ss = this.seconds ? `:${String(second).padStart(2, "0")}` : "";
     if (this.format === "24h") {
-      return `${String(hour).padStart(2, "0")}:${mm}`;
+      return `${String(hour).padStart(2, "0")}:${mm}${ss}`;
     }
     const period = hour < 12 ? "AM" : "PM";
     const hour12 = hour % 12 === 0 ? 12 : hour % 12;
-    return `${hour12}:${mm} ${period}`;
+    return `${hour12}:${mm}${ss} ${period}`;
   }
   toMinutes(hour, minute) {
     return hour * 60 + minute;
@@ -16933,10 +18231,17 @@ var RelTimePicker = class extends import_lit54.LitElement {
     }
     const period = this.draftPeriod ?? "AM";
     const base = period === "AM" ? 0 : 12;
-    return Array.from({ length: 12 }, (_, i) => ({
-      label: i === 0 ? "12" : String(i).padStart(2, "0"),
-      hour24: base + i
-    }));
+    return Array.from({ length: 12 }, (_, i) => {
+      const display = i + 1;
+      return {
+        label: String(display).padStart(2, "0"),
+        hour24: base + display % 12
+      };
+    });
+  }
+  /** Seconds shown in the seconds column (always step 1). */
+  getSecondOptions() {
+    return Array.from({ length: 60 }, (_, s) => s);
   }
   get draftPeriod() {
     if (this.draftHour === null) return null;
@@ -16946,6 +18251,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const parsed = this.parseTime(this.value);
     this.draftHour = parsed ? parsed.hour : null;
     this.draftMinute = parsed ? parsed.minute : null;
+    this.draftSecond = parsed ? parsed.second : null;
   }
   /** Snap the draft minute to the nearest valid step minute for the hour. */
   clampDraftToRange() {
@@ -16988,7 +18294,11 @@ var RelTimePicker = class extends import_lit54.LitElement {
   }
   applySelection() {
     if (this.draftHour === null) return;
-    const newValue = this.formatValue(this.draftHour, this.draftMinute ?? 0);
+    const newValue = this.formatValue(
+      this.draftHour,
+      this.draftMinute ?? 0,
+      this.draftSecond ?? 0
+    );
     this.value = newValue;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
@@ -17004,6 +18314,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const now = /* @__PURE__ */ new Date();
     const step = this.minuteStepSafe;
     this.draftHour = now.getHours();
+    this.draftSecond = this.seconds ? now.getSeconds() : null;
     this.draftMinute = Math.round(now.getMinutes() / step) * step;
     if (this.draftMinute >= 60) {
       this.draftMinute = 0;
@@ -17026,6 +18337,7 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.value = null;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: null },
@@ -17054,6 +18366,20 @@ var RelTimePicker = class extends import_lit54.LitElement {
     if (!this.isTimeInRange(this.draftHour, minute)) return;
     this.draftMinute = minute;
   }
+  selectSecond(second) {
+    if (this.draftHour === null) {
+      for (let h = 0; h < 24; h++) {
+        if (this.isHourEnabled(h)) {
+          this.draftHour = h;
+          break;
+        }
+      }
+      if (this.draftHour === null) return;
+    }
+    if (this.draftMinute === null) this.draftMinute = 0;
+    this.draftSecond = second;
+    this.clampDraftToRange();
+  }
   selectPeriod(period) {
     if (!this.isPeriodEnabled(period)) return;
     const base = period === "AM" ? 0 : 12;
@@ -17071,9 +18397,27 @@ var RelTimePicker = class extends import_lit54.LitElement {
     this.clampDraftToRange();
     this.scrollColumnsToSelection();
   }
+  /**
+   * Scrolls the column's own scroll container only. scrollIntoView is off
+   * limits here: it walks ALL scrollable ancestors, so it yanked the page
+   * up/down whenever a column recentred (user-reported jump bug).
+   */
+  scrollOptionInColumn(btn, block) {
+    const list = btn.parentElement;
+    if (!list) return;
+    const top = btn.offsetTop;
+    const height = btn.offsetHeight;
+    if (block === "center") {
+      list.scrollTop = top - (list.clientHeight - height) / 2;
+    } else if (top < list.scrollTop) {
+      list.scrollTop = top;
+    } else if (top + height > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + height - list.clientHeight;
+    }
+  }
   scrollColumnsToSelection() {
     this.updateComplete.then(() => {
-      this.columnsElement?.querySelectorAll(".option-button.selected").forEach((btn) => btn.scrollIntoView({ block: "center" }));
+      this.columnsElement?.querySelectorAll(".option-button.selected").forEach((btn) => this.scrollOptionInColumn(btn, "center"));
     });
   }
   // ── Keyboard ──
@@ -17130,19 +18474,23 @@ var RelTimePicker = class extends import_lit54.LitElement {
     }
     if (target && target !== buttons[index]) {
       target.click();
-      target.focus();
-      target.scrollIntoView({ block: "nearest" });
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
     }
   }
   focusAdjacentColumn(from, direction) {
-    const order = this.format === "12h" ? ["hour", "minute", "period"] : ["hour", "minute"];
+    const order = ["hour", "minute"];
+    if (this.seconds) order.push("second");
+    if (this.format === "12h") order.push("period");
     const nextIndex = order.indexOf(from) + direction;
     if (nextIndex < 0 || nextIndex >= order.length) return;
     const lists = this.columnsElement?.querySelectorAll(".column-list");
     const list = lists?.[nextIndex];
     const target = list?.querySelector(".option-button.selected:not(:disabled)") ?? list?.querySelector(".option-button:not(:disabled)");
-    target?.focus();
-    target?.scrollIntoView({ block: "nearest" });
+    if (target) {
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
+    }
   }
   // ── Render ──
   render() {
@@ -17150,10 +18498,10 @@ var RelTimePicker = class extends import_lit54.LitElement {
     const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
     const describedById = belowText ? "time-picker-desc" : void 0;
     const parsedValue = this.parseTime(this.value);
-    const displayText = parsedValue ? this.formatDisplay(parsedValue.hour, parsedValue.minute) : "";
-    const draftDisplay = this.draftHour !== null ? this.formatDisplay(this.draftHour, this.draftMinute ?? 0) : "";
+    const displayText = parsedValue ? this.formatDisplay(parsedValue.hour, parsedValue.minute, parsedValue.second) : "";
     const hourOptions = this.getHourOptions();
     const minuteOptions = this.getMinuteOptions();
+    const secondOptions = this.seconds ? this.getSecondOptions() : [];
     const draftPeriod = this.draftPeriod;
     const wrapperClasses = [
       "time-picker-wrapper",
@@ -17218,104 +18566,106 @@ var RelTimePicker = class extends import_lit54.LitElement {
 
         <div
           part="panel"
-          class="popover ${this.open ? "open" : ""}"
+          class="popover ${this.open ? "open" : ""} ${this.openUp ? "open-up" : ""}"
           role="dialog"
           aria-label="Choose time"
         >
-          <div class="time-readout">
-            <span class="time-readout-label">Time</span>
-            <span class="time-readout-value ${draftDisplay ? "" : "empty"}">
-              ${draftDisplay || (this.format === "24h" ? "--:--" : "--:-- --")}
-            </span>
-          </div>
-
           <div class="columns">
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Hour</div>
-              <div class="column-list" role="listbox" aria-label="Hours">
-                ${hourOptions.map(
+            <div class="column-list" role="listbox" aria-label="Hours">
+              ${hourOptions.map(
       (opt, i) => import_lit54.html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftHour === opt.hour24 ? "selected" : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftHour === opt.hour24}
-                      ?disabled=${!this.isHourEnabled(opt.hour24)}
-                      @click=${() => this.selectHour(opt.hour24)}
-                      @keydown=${(e) => this.handleOptionKeydown(e, "hour")}
-                      tabindex=${this.draftHour === opt.hour24 || this.draftHour === null && i === 0 ? 0 : -1}
-                    >
-                      ${opt.label}
-                    </button>
-                  `
+                  <button
+                    part="option"
+                    class="option-button ${this.draftHour === opt.hour24 ? "selected" : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftHour === opt.hour24}
+                    ?disabled=${!this.isHourEnabled(opt.hour24)}
+                    @click=${() => this.selectHour(opt.hour24)}
+                    @keydown=${(e) => this.handleOptionKeydown(e, "hour")}
+                    tabindex=${this.draftHour === opt.hour24 || this.draftHour === null && i === 0 ? 0 : -1}
+                  >
+                    ${opt.label}
+                  </button>
+                `
     )}
-              </div>
             </div>
 
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Min</div>
-              <div class="column-list" role="listbox" aria-label="Minutes">
-                ${minuteOptions.map(
+            <div class="column-divider" aria-hidden="true"></div>
+
+            <div class="column-list" role="listbox" aria-label="Minutes">
+              ${minuteOptions.map(
       (m, i) => import_lit54.html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftMinute === m ? "selected" : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftMinute === m}
-                      ?disabled=${this.draftHour !== null && !this.isTimeInRange(this.draftHour, m)}
-                      @click=${() => this.selectMinute(m)}
-                      @keydown=${(e) => this.handleOptionKeydown(e, "minute")}
-                      tabindex=${this.draftMinute === m || this.draftMinute === null && i === 0 ? 0 : -1}
-                    >
-                      ${String(m).padStart(2, "0")}
-                    </button>
-                  `
+                  <button
+                    part="option"
+                    class="option-button ${this.draftMinute === m ? "selected" : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftMinute === m}
+                    ?disabled=${this.draftHour !== null && !this.isTimeInRange(this.draftHour, m)}
+                    @click=${() => this.selectMinute(m)}
+                    @keydown=${(e) => this.handleOptionKeydown(e, "minute")}
+                    tabindex=${this.draftMinute === m || this.draftMinute === null && i === 0 ? 0 : -1}
+                  >
+                    ${String(m).padStart(2, "0")}
+                  </button>
+                `
     )}
-              </div>
             </div>
 
+            ${this.seconds ? import_lit54.html`
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="Seconds">
+                    ${secondOptions.map(
+      (s, i) => import_lit54.html`
+                        <button
+                          part="option"
+                          class="option-button ${this.draftSecond === s ? "selected" : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${this.draftSecond === s}
+                          @click=${() => this.selectSecond(s)}
+                          @keydown=${(e) => this.handleOptionKeydown(e, "second")}
+                          tabindex=${this.draftSecond === s || this.draftSecond === null && i === 0 ? 0 : -1}
+                        >
+                          ${String(s).padStart(2, "0")}
+                        </button>
+                      `
+    )}
+                  </div>
+                ` : import_lit54.nothing}
             ${this.format === "12h" ? import_lit54.html`
-                  <div class="column">
-                    <div class="column-header" aria-hidden="true">AM/PM</div>
-                    <div class="column-list" role="listbox" aria-label="AM or PM">
-                      ${["AM", "PM"].map(
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="AM or PM">
+                    ${["AM", "PM"].map(
       (p) => import_lit54.html`
-                          <button
-                            part="option"
-                            class="option-button ${draftPeriod === p ? "selected" : ""}"
-                            type="button"
-                            role="option"
-                            aria-selected=${draftPeriod === p}
-                            ?disabled=${!this.isPeriodEnabled(p)}
-                            @click=${() => this.selectPeriod(p)}
-                            @keydown=${(e) => this.handleOptionKeydown(e, "period")}
-                            tabindex=${draftPeriod === p || draftPeriod === null && p === "AM" ? 0 : -1}
-                          >
-                            ${p}
-                          </button>
-                        `
+                        <button
+                          part="option"
+                          class="option-button ${draftPeriod === p ? "selected" : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${draftPeriod === p}
+                          ?disabled=${!this.isPeriodEnabled(p)}
+                          @click=${() => this.selectPeriod(p)}
+                          @keydown=${(e) => this.handleOptionKeydown(e, "period")}
+                          tabindex=${draftPeriod === p || draftPeriod === null && p === "AM" ? 0 : -1}
+                        >
+                          ${p}
+                        </button>
+                      `
     )}
-                    </div>
                   </div>
                 ` : import_lit54.nothing}
           </div>
 
           <div part="footer" class="time-footer">
-            <rel-button
-              variant="secondary"
-              size="small"
-              border="corner-radius"
-              @click=${() => this.selectNow()}
-            >
+            <rel-button variant="link" size="small" @click=${() => this.selectNow()}>
               Now
             </rel-button>
             <div class="footer-right">
               <rel-button
-                variant="secondary"
+                variant="ghost"
                 size="small"
-                border="corner-radius"
                 @click=${() => this.cancelPopover()}
               >
                 Cancel
@@ -17324,11 +18674,10 @@ var RelTimePicker = class extends import_lit54.LitElement {
                 variant="primary"
                 tone="default"
                 size="small"
-                border="corner-radius"
                 ?disabled=${this.draftHour === null}
                 @click=${() => this.applySelection()}
               >
-                Apply
+                OK
               </rel-button>
             </div>
           </div>
@@ -17512,16 +18861,19 @@ RelTimePicker.styles = import_lit54.css`
       height: 16px;
     }
 
+    /* Panel (Figma "Time Picker"): fixed width per size, full-bleed content. */
     .popover {
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
       z-index: 1000;
       background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
+      border: 1px solid var(--rel-border-subtle);
       border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-md);
+      overflow: hidden;
+      min-width: 220px;
+      width: 250px;
       display: none;
     }
 
@@ -17529,94 +18881,79 @@ RelTimePicker.styles = import_lit54.css`
       display: block;
     }
 
-    /* Draft readout (mirrors the range-picker FROM/TO block) */
-    .time-readout {
-      display: flex;
-      align-items: baseline;
-      gap: var(--rel-spacing-sm);
-      padding-bottom: var(--rel-spacing-sm);
-      margin-bottom: var(--rel-spacing-sm);
-      border-bottom: 1px solid var(--rel-border-subtle);
-    }
-
-    .time-readout-label {
-      color: var(--rel-text-placeholder);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    .time-readout-value {
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
-    }
-
-    .time-readout-value.empty {
-      color: var(--rel-text-placeholder);
+    /* Flip above the field when the viewport has no room below. */
+    .popover.open-up {
+      top: auto;
+      bottom: calc(100% + 4px);
     }
 
+    /* Full-bleed column row with 1px dividers (Figma "Columns"). */
     .columns {
       display: flex;
-      gap: var(--rel-spacing-xs);
-    }
-
-    /* Columns share the panel width equally, so the two-column 24h layout
-       fills the same footprint the footer dictates instead of bunching left. */
-    .column {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 64px;
+      align-items: stretch;
+      height: 260px;
     }
 
-    .column-header {
-      text-align: center;
-      color: var(--rel-text-placeholder);
-      padding: var(--rel-spacing-xs);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+    .column-divider {
+      flex-shrink: 0;
+      width: 1px;
+      background: var(--rel-border-subtle);
     }
 
+    /* Each column scrolls independently. The 4px rail is always reserved
+       (scrollbar-gutter) so columns stay aligned whether or not they
+       overflow; the thumb only appears on overflow. */
     .column-list {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-      max-height: 224px;
+      /* Positioned so option offsetTop is list-relative — the in-column
+         scroll math depends on it (we never scrollIntoView: it scrolls every
+         ancestor, page included). */
+      position: relative;
       overflow-y: auto;
-      padding: var(--rel-spacing-3xs);
+      padding: var(--rel-spacing-2xs);
       scrollbar-width: thin;
+      scrollbar-color: var(--rel-border-default) transparent;
+      scrollbar-gutter: stable;
+    }
+
+    .column-list::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .column-list::-webkit-scrollbar-track {
+      background: transparent;
     }
 
+    .column-list::-webkit-scrollbar-thumb {
+      background: var(--rel-border-default);
+      border-radius: var(--rel-border-radius-full-rounded);
+    }
+
+    /* Option cell (Figma ".Time Option"): selected uses the neutral
+       elevated-2 fill + medium weight, NOT the brand color. */
     .option-button {
       border: none;
       background: transparent;
-      border-radius: var(--rel-border-radius-sm);
+      border-radius: var(--rel-border-radius-xs);
       color: var(--rel-text-default);
       cursor: pointer;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      text-align: center;
       flex-shrink: 0;
-      transition: all 0.15s ease;
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      height: 36px;
+      padding: 0 var(--rel-spacing-xs);
+      text-align: center;
+      transition: background 0.15s ease;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .option-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-surface-elevated);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .option-button:focus-visible {
@@ -17626,9 +18963,9 @@ RelTimePicker.styles = import_lit54.css`
     }
 
     .option-button.selected {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      font-weight: var(--rel-body-md-semibold-font-weight);
+      background: var(--rel-bg-neutral-elevated-2);
+      color: var(--rel-text-default);
+      font-weight: var(--rel-body-md-medium-font-weight);
     }
 
     .option-button:disabled {
@@ -17641,14 +18978,15 @@ RelTimePicker.styles = import_lit54.css`
       background: transparent;
     }
 
-    /* Footer (mirrors the range-picker calendar-footer) */
+    /* Footer (Figma "Footer"): 8px padding + 8px extra left so the "Now"
+       link aligns with the buttons' inner padding. Buttons are always S. */
     .time-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-sm);
-      padding-top: var(--rel-spacing-sm);
-      margin-top: var(--rel-spacing-sm);
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-xs);
+      padding-left: calc(var(--rel-spacing-xs) * 2);
       border-top: 1px solid var(--rel-border-subtle);
     }
 
@@ -17658,35 +18996,88 @@ RelTimePicker.styles = import_lit54.css`
       gap: var(--rel-spacing-xs);
     }
 
-    @media (prefers-reduced-motion: reduce) {
-      .trigger-button,
-      .icon-button,
-      .option-button {
-        transition: none;
-      }
+    /* 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;
     }
-  `;
-__decorateClass([
-  (0, import_decorators54.property)({ type: String, reflect: true })
-], RelTimePicker.prototype, "value", 2);
-__decorateClass([
-  (0, import_decorators54.property)({ type: String })
-], RelTimePicker.prototype, "placeholder", 2);
-__decorateClass([
-  (0, import_decorators54.property)({ type: String })
-], RelTimePicker.prototype, "label", 2);
-__decorateClass([
-  (0, import_decorators54.property)({ type: Boolean, reflect: true })
-], RelTimePicker.prototype, "disabled", 2);
-__decorateClass([
-  (0, import_decorators54.property)({ type: Boolean })
-], RelTimePicker.prototype, "required", 2);
+
+    /* 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,
+      .option-button {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  (0, import_decorators54.property)({ type: String, reflect: true })
+], RelTimePicker.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: String })
+], RelTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: String })
+], RelTimePicker.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: Boolean })
+], RelTimePicker.prototype, "required", 2);
 __decorateClass([
   (0, import_decorators54.property)({ type: Boolean, reflect: true })
 ], RelTimePicker.prototype, "readonly", 2);
 __decorateClass([
   (0, import_decorators54.property)({ type: String })
 ], RelTimePicker.prototype, "format", 2);
+__decorateClass([
+  (0, import_decorators54.property)({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "seconds", 2);
 __decorateClass([
   (0, import_decorators54.property)({ type: Number, attribute: "minute-step" })
 ], RelTimePicker.prototype, "minuteStep", 2);
@@ -17732,6 +19123,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators54.state)()
 ], RelTimePicker.prototype, "draftMinute", 2);
+__decorateClass([
+  (0, import_decorators54.state)()
+], RelTimePicker.prototype, "draftSecond", 2);
+__decorateClass([
+  (0, import_decorators54.state)()
+], RelTimePicker.prototype, "openUp", 2);
 __decorateClass([
   (0, import_decorators54.query)(".trigger-button")
 ], RelTimePicker.prototype, "triggerButton", 2);
@@ -17970,6 +19367,26 @@ var RelTooltip = class extends import_lit56.LitElement {
     this.type = "single-line";
     // Stable id so aria-describedby can reference the bubble across renders.
     this.uniqueId = Math.random().toString(36).slice(2);
+    /** APG: Escape dismisses the tooltip. Not swallowed — an enclosing dialog
+     *  may legitimately close on the same keystroke. */
+    this.onKeydown = (e) => {
+      if (e.key === "Escape") this.toggleAttribute("data-dismissed", true);
+    };
+    this.clearDismissed = () => {
+      this.removeAttribute("data-dismissed");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.onKeydown);
+    this.addEventListener("mouseleave", this.clearDismissed);
+    this.addEventListener("focusout", this.clearDismissed);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.onKeydown);
+    this.removeEventListener("mouseleave", this.clearDismissed);
+    this.removeEventListener("focusout", this.clearDismissed);
   }
   firstUpdated() {
     this.linkTrigger();
@@ -18036,6 +19453,12 @@ RelTooltip.styles = import_lit56.css`
       opacity: 1;
     }
 
+    /* Escape-dismissed (APG): stays hidden until hover/focus leaves and
+       returns. Declared after the hover/focus rules so source order wins. */
+    :host([data-dismissed]) .tooltip-bubble {
+      opacity: 0;
+    }
+
     /* Positioning */
     .tooltip-bubble.above {
       bottom: calc(100% + 6px);
@@ -18125,10 +19548,914 @@ RelTooltip = __decorateClass([
   (0, import_decorators56.customElement)("rel-tooltip")
 ], RelTooltip);
 
+// src/components/rel-upload/rel-upload.ts
+var import_lit57 = require("lit");
+var import_decorators57 = require("lit/decorators.js");
+var import_rel_icon17 = require("@reliability-design/icons/rel-icon");
+var uid = 0;
+var RelUpload = class extends import_lit57.LitElement {
+  constructor() {
+    super(...arguments);
+    this.accept = "";
+    this.maxSize = "";
+    this.multiple = false;
+    this.disabled = false;
+    this.hint = "";
+    this.dropzoneTitle = "Drag and drop your files here";
+    this.browseLabel = "Browse files";
+    this.files = [];
+    this.concurrency = 3;
+    this.delayThreshold = 15e3;
+    this.dragOver = false;
+    this.delayed = false;
+    this.lastSignature = "";
+    this.openPicker = () => {
+      if (this.disabled) return;
+      this.inputEl?.click();
+    };
+    this.onInputChange = (e) => {
+      const input = e.target;
+      this.ingest(input.files);
+      input.value = "";
+    };
+    this.onDragOver = (e) => {
+      if (this.disabled) return;
+      e.preventDefault();
+      this.dragOver = true;
+    };
+    this.onDragLeave = (e) => {
+      e.preventDefault();
+      this.dragOver = false;
+    };
+    this.onDrop = (e) => {
+      e.preventDefault();
+      this.dragOver = false;
+      if (this.disabled) return;
+      this.ingest(e.dataTransfer?.files ?? null);
+    };
+  }
+  // ── derived ───────────────────────────────────────────────────────────────
+  /**
+   * Aggregate state. Read-only; corresponds to the Figma modal variants.
+   *
+   * `failed` means there is nothing left to send AND something errored — while
+   * any row is still `ready` the primary action is Upload, not Retry.
+   */
+  get phase() {
+    if (this.files.length === 0) return "empty";
+    if (this.files.some((f) => f.status === "uploading")) {
+      return this.delayed ? "delayed" : "uploading";
+    }
+    if (this.pending.length > 0) return "selected";
+    if (this.files.some((f) => f.status === "error")) return "failed";
+    return "selected";
+  }
+  /** Files still eligible to be sent. */
+  get pending() {
+    return this.files.filter((f) => f.status === "ready");
+  }
+  get failedFiles() {
+    return this.files.filter((f) => f.status === "error");
+  }
+  /**
+   * Failed rows worth sending again. A file rejected by `accept`/`max-size`
+   * will fail validation every time, so retrying it is pointless — re-check
+   * rather than re-queueing it blindly.
+   */
+  get retryable() {
+    const maxBytes = this.parseMaxBytes();
+    return this.failedFiles.filter(
+      (f) => !!f.file && this.matchesAccept(f.file) && f.file.size <= maxBytes
+    );
+  }
+  get canUpload() {
+    if (this.disabled) return false;
+    const phase = this.phase;
+    if (phase === "uploading" || phase === "delayed") return false;
+    if (phase === "failed") return this.retryable.length > 0;
+    return this.pending.length > 0;
+  }
+  /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
+  get primaryLabel() {
+    if (this.phase === "failed") return "Retry upload";
+    const n = this.files.length;
+    return n > 1 ? `Upload ${n} files` : "Upload";
+  }
+  /** The snapshot `<rel-upload-actions>` renders from. */
+  get state() {
+    return {
+      phase: this.phase,
+      total: this.files.length,
+      failed: this.failedFiles.length,
+      canUpload: this.canUpload,
+      primaryLabel: this.primaryLabel
+    };
+  }
+  get listHeading() {
+    const n = this.files.length;
+    switch (this.phase) {
+      case "uploading":
+      case "delayed":
+        return `Uploading ${n} ${n === 1 ? "file" : "files"}`;
+      case "failed":
+        return `${n} ${n === 1 ? "file" : "files"} - ${this.failedFiles.length} failed`;
+      default:
+        return n === 1 ? "Selected file (1)" : `Selected files (${n})`;
+    }
+  }
+  get hintText() {
+    if (this.hint) return this.hint;
+    const formats = this.acceptDisplay;
+    const size = this.maxSize ? ` - up to ${this.maxSize} per file` : "";
+    return `${formats}${size}`;
+  }
+  get acceptDisplay() {
+    const tokens = this.accept.split(",").map((s) => s.trim()).filter(Boolean).map((tok) => {
+      if (tok.startsWith(".")) return tok.slice(1).toUpperCase();
+      if (tok.endsWith("/*")) return tok.slice(0, -2).toUpperCase();
+      return (tok.split("/").pop() ?? tok).toUpperCase();
+    });
+    if (tokens.length === 0) return "Any file type";
+    if (tokens.length === 1) return tokens[0];
+    return `${tokens.slice(0, -1).join(", ")} or ${tokens[tokens.length - 1]}`;
+  }
+  get alertContent() {
+    if (this.phase === "delayed") {
+      return {
+        type: "warning",
+        message1: "This is taking longer than usual",
+        message2: "Large files can take a few minutes on a slow connection. You can leave this open or come back later."
+      };
+    }
+    const failed = this.failedFiles.length;
+    if (failed > 0 && this.phase !== "uploading") {
+      const limit = this.maxSize ? `under ${this.maxSize} and ` : "";
+      return {
+        type: "error",
+        message1: failed === 1 && this.files.length === 1 ? "We couldn't upload your file" : `We couldn't upload ${failed} of your files`,
+        message2: `Check that each file is ${limit}in a supported format, then try again.`
+      };
+    }
+    return null;
+  }
+  // ── validation ────────────────────────────────────────────────────────────
+  parseMaxBytes() {
+    const s = this.maxSize.trim().toLowerCase();
+    if (!s) return Infinity;
+    const m = s.match(/^([\d.]+)\s*(b|kb|mb|gb)?$/);
+    if (!m) return Infinity;
+    const n = parseFloat(m[1]);
+    const unit = m[2] || "b";
+    const mult = unit === "gb" ? 1e9 : unit === "mb" ? 1e6 : unit === "kb" ? 1e3 : 1;
+    return n * mult;
+  }
+  matchesAccept(file) {
+    const raw = this.accept.trim();
+    if (!raw) return true;
+    const tokens = raw.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    const name = file.name.toLowerCase();
+    const type = (file.type || "").toLowerCase();
+    return tokens.some((tok) => {
+      if (tok.startsWith(".")) return name.endsWith(tok);
+      if (tok.endsWith("/*")) return type.startsWith(tok.slice(0, -1));
+      return type === tok;
+    });
+  }
+  static fmtSize(bytes) {
+    if (bytes < 1e3) return `${bytes} B`;
+    if (bytes < 1e6) return `${(bytes / 1e3).toFixed(0)} KB`;
+    return `${(bytes / 1e6).toFixed(1)} MB`;
+  }
+  static ext(name) {
+    const i = name.lastIndexOf(".");
+    return i > -1 ? name.slice(i + 1).toUpperCase() : "FILE";
+  }
+  /**
+   * Validate and append. Invalid files are kept as `error` rows rather than
+   * dropped — that is how the Figma Failure state surfaces them.
+   */
+  ingest(list) {
+    if (!list || list.length === 0) return;
+    const maxBytes = this.parseMaxBytes();
+    const incoming = this.multiple ? Array.from(list) : Array.from(list).slice(0, 1);
+    const added = [];
+    const rejected = [];
+    for (const f of incoming) {
+      const entry = {
+        id: `rel-upload-${++uid}`,
+        name: f.name,
+        size: f.size,
+        status: "ready",
+        file: f
+      };
+      if (!this.matchesAccept(f)) {
+        entry.status = "error";
+        entry.error = "unsupported file type";
+        rejected.push({ name: f.name, reason: "format", message: `${f.name}: unsupported file type` });
+      } else if (f.size > maxBytes) {
+        entry.status = "error";
+        entry.error = `file exceeds the ${this.maxSize} limit`;
+        rejected.push({
+          name: f.name,
+          reason: "size",
+          message: `${f.name}: exceeds ${this.maxSize}`
+        });
+      }
+      added.push(entry);
+    }
+    const names = new Set(added.map((f) => f.name));
+    const kept = this.multiple ? this.files.filter((f) => !names.has(f.name)) : [];
+    this.files = [...kept, ...added];
+    if (rejected.length) this.emit("rel-invalid", { rejected });
+    this.emit("rel-files-added", { added, rejected });
+    this.emit("rel-change", { files: this.files });
+    this.notify();
+  }
+  // ── upload orchestration (self-driving mode) ──────────────────────────────
+  patch(id, partial) {
+    this.files = this.files.map((f) => f.id === id ? { ...f, ...partial } : f);
+    this.notify();
+  }
+  startDelayTimer() {
+    this.stopDelayTimer();
+    if (this.delayThreshold <= 0) return;
+    this.delayTimer = setTimeout(() => {
+      if (this.files.some((f) => f.status === "uploading")) {
+        this.delayed = true;
+        this.notify();
+      }
+    }, this.delayThreshold);
+  }
+  stopDelayTimer() {
+    if (this.delayTimer) clearTimeout(this.delayTimer);
+    this.delayTimer = void 0;
+  }
+  async runBatch(targets) {
+    const uploader = this.uploader;
+    if (!uploader || targets.length === 0) return;
+    this.aborter = new AbortController();
+    const signal = this.aborter.signal;
+    this.startDelayTimer();
+    const queue = [...targets];
+    const workers = Array.from({ length: Math.max(1, this.concurrency) }, async () => {
+      while (queue.length) {
+        if (signal.aborted) return;
+        const item = queue.shift();
+        if (!item || !item.file) continue;
+        this.patch(item.id, { status: "uploading", progress: 0, loaded: 0, error: void 0 });
+        try {
+          await uploader(item.file, {
+            file: item,
+            signal,
+            onProgress: (loaded, total) => {
+              const t = total ?? item.size;
+              const progress = t > 0 ? Math.min(100, Math.round(loaded / t * 100)) : 0;
+              this.patch(item.id, { loaded, progress });
+              this.emit("rel-progress", { id: item.id, progress, loaded, total: t });
+            }
+          });
+          if (signal.aborted) {
+            this.patch(item.id, { status: "ready", progress: void 0, loaded: void 0 });
+            return;
+          }
+          this.patch(item.id, { status: "success", progress: 100, loaded: item.size });
+          this.emit("rel-file-complete", { id: item.id, file: item.file });
+        } catch (err) {
+          if (signal.aborted) {
+            this.patch(item.id, { status: "ready", progress: void 0, loaded: void 0 });
+            return;
+          }
+          const message = err instanceof Error ? err.message : String(err);
+          this.patch(item.id, { status: "error", error: message, progress: void 0 });
+          this.emit("rel-file-error", { id: item.id, file: item.file, error: message });
+        }
+      }
+    });
+    await Promise.all(workers);
+    this.stopDelayTimer();
+    this.delayed = false;
+    this.aborter = void 0;
+    if (!signal.aborted) {
+      this.emit("rel-complete", {
+        succeeded: this.files.filter((f) => f.status === "success"),
+        failed: this.failedFiles
+      });
+    }
+    this.notify();
+  }
+  // ── public API ────────────────────────────────────────────────────────────
+  /** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
+  upload() {
+    if (!this.canUpload) return;
+    const targets = this.pending;
+    this.emit("rel-upload", { files: targets });
+    if (this.uploader) void this.runBatch(targets);
+    else this.notify();
+  }
+  /** Re-queue every retryable failed row and send again. */
+  retry() {
+    const targets = this.retryable;
+    if (targets.length === 0) return;
+    const ids = new Set(targets.map((f) => f.id));
+    this.files = this.files.map(
+      (f) => ids.has(f.id) ? { ...f, status: "ready", error: void 0, progress: void 0 } : f
+    );
+    const requeued = this.files.filter((f) => ids.has(f.id));
+    this.emit("rel-retry", { files: requeued });
+    if (this.uploader) void this.runBatch(requeued);
+    else this.notify();
+  }
+  /** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
+  cancel() {
+    this.aborter?.abort();
+    this.stopDelayTimer();
+    this.delayed = false;
+    this.emit("rel-cancel");
+    this.notify();
+  }
+  /** Remove one row by id. */
+  removeFile(id) {
+    const target = this.files.find((f) => f.id === id);
+    this.files = this.files.filter((f) => f.id !== id);
+    this.emit("rel-remove", { id, file: target?.file });
+    this.emit("rel-change", { files: this.files });
+    this.notify();
+  }
+  /** Clear everything and abort in-flight transfers. */
+  reset() {
+    this.aborter?.abort();
+    this.stopDelayTimer();
+    this.files = [];
+    this.delayed = false;
+    if (this.inputEl) this.inputEl.value = "";
+    this.emit("rel-change", { files: this.files });
+    this.notify();
+  }
+  // ── events ────────────────────────────────────────────────────────────────
+  emit(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+  /**
+   * Emit `rel-state` only when the derived snapshot actually changes, so
+   * progress ticks don't spam `<rel-upload-actions>`.
+   */
+  notify() {
+    const s = this.state;
+    const signature = `${s.phase}|${s.total}|${s.failed}|${s.canUpload}|${s.primaryLabel}`;
+    if (signature === this.lastSignature) return;
+    this.lastSignature = signature;
+    this.emit("rel-state", s);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    queueMicrotask(() => this.emit("rel-state", this.state));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopDelayTimer();
+    this.aborter?.abort();
+  }
+  updated() {
+    this.notify();
+  }
+  // ── render ────────────────────────────────────────────────────────────────
+  rowMeta(f) {
+    switch (f.status) {
+      case "uploading": {
+        const pct = f.progress ?? 0;
+        const loaded = RelUpload.fmtSize(f.loaded ?? 0);
+        return `${pct}% - ${loaded} of ${RelUpload.fmtSize(f.size)}`;
+      }
+      case "success":
+        return `${RelUpload.ext(f.name)} - ${RelUpload.fmtSize(f.size)} - Uploaded`;
+      case "error":
+        return `Upload failed - ${f.error ?? "please try again"}`;
+      default: {
+        const base = `${RelUpload.ext(f.name)} - ${RelUpload.fmtSize(f.size)}`;
+        const busy = this.phase === "uploading" || this.phase === "delayed";
+        return busy ? `${base} - Waiting` : base;
+      }
+    }
+  }
+  renderRow(f) {
+    return import_lit57.html`
+      <div class="row ${f.status}">
+        <rel-icon name="document" size="md"></rel-icon>
+
+        <div class="row-content">
+          <span class="row-name" title=${f.name}>${f.name}</span>
+          ${f.status === "uploading" ? import_lit57.html`<rel-progress
+                mode="linear-determinate"
+                .value=${f.progress ?? 0}
+              ></rel-progress>` : import_lit57.nothing}
+          <span class="row-meta">${this.rowMeta(f)}</span>
+        </div>
+
+        <div class="row-trailing">
+          ${f.status === "success" ? import_lit57.html`<rel-icon
+                class="status-success"
+                name="check-circle"
+                size="md"
+                role="img"
+                aria-label="Uploaded"
+              ></rel-icon>` : import_lit57.nothing}
+          ${f.status === "error" ? import_lit57.html`<rel-icon
+                class="status-error"
+                name="error"
+                size="md"
+                role="img"
+                aria-label="Failed"
+              ></rel-icon>` : import_lit57.nothing}
+          <button
+            class="remove"
+            aria-label="Remove ${f.name}"
+            ?disabled=${this.disabled}
+            @click=${() => this.removeFile(f.id)}
+          >
+            <rel-icon name="delete" size="md"></rel-icon>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const alert = this.alertContent;
+    return import_lit57.html`
+      <div class="body">
+        ${alert ? import_lit57.html`<rel-alert
+              type=${alert.type}
+              appearance="subtle"
+              message1=${alert.message1}
+              message2=${alert.message2}
+            ></rel-alert>` : import_lit57.nothing}
+
+        <div
+          class="dropzone ${this.dragOver ? "dragover" : ""}"
+          @click=${this.openPicker}
+          @dragover=${this.onDragOver}
+          @dragleave=${this.onDragLeave}
+          @drop=${this.onDrop}
+        >
+          <span class="icon-badge">
+            <rel-icon name="upload" size="md"></rel-icon>
+          </span>
+
+          <div class="dz-copy">
+            <p class="dz-title">${this.dropzoneTitle}</p>
+            <p class="dz-hint">${this.hintText}</p>
+          </div>
+
+          <button
+            class="browse"
+            type="button"
+            ?disabled=${this.disabled}
+            @click=${(e) => {
+      e.stopPropagation();
+      this.openPicker();
+    }}
+          >
+            ${this.browseLabel}
+          </button>
+        </div>
+
+        ${this.files.length ? import_lit57.html`<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>` : import_lit57.nothing}
+
+        <input
+          class="file-input"
+          type="file"
+          ?multiple=${this.multiple}
+          accept=${this.accept || import_lit57.nothing}
+          @change=${this.onInputChange}
+        />
+      </div>
+    `;
+  }
+};
+RelUpload.styles = import_lit57.css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      color: var(--rel-text-default);
+      font-family: var(--rel-fonts-font-family);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+    }
+
+    :host([disabled]) .body {
+      pointer-events: none;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-lg, 20px);
+    }
+
+    /* ── Dropzone ─────────────────────────────────────────────────────────── */
+
+    .dropzone {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--rel-spacing-md, 16px);
+      padding: var(--rel-spacing-2xl, 32px) var(--rel-spacing-xl, 24px);
+      background: var(--rel-bg-surface);
+      border: 1px dashed var(--rel-border-accent);
+      border-radius: var(--rel-border-radius-md, 16px);
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }
+
+    /* Design gap: no drag-over frame exists in Figma. */
+    .dropzone.dragover {
+      border-style: solid;
+      border-color: var(--rel-border-brand);
+      background: color-mix(in srgb, var(--rel-bg-brand) 8%, var(--rel-bg-surface));
+    }
+
+    .icon-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--rel-spacing-sm, 12px);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-subtle);
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
+    }
+
+    .dz-copy {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--rel-spacing-2xs, 4px);
+    }
+
+    .dz-title {
+      margin: 0;
+      color: var(--rel-text-default);
+      font-family: var(--rel-body-lg-medium-font-family);
+      font-weight: var(--rel-body-lg-medium-font-weight);
+      font-size: var(--rel-body-lg-medium-font-size);
+      line-height: var(--rel-body-lg-medium-line-height);
+    }
+
+    .dz-hint {
+      margin: 0;
+      color: var(--rel-text-caption);
+      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);
+    }
+
+    /* The dropzone is a mouse affordance only — the Browse button is the sole
+       focusable control, so there are no nested interactive elements. */
+    .browse {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs, 8px);
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
+      background: transparent;
+      color: var(--rel-text-default);
+      border: 1px solid var(--rel-action-neutral-border-outline, var(--rel-border-accent));
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
+      cursor: pointer;
+      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);
+    }
+
+    .browse:hover:not(:disabled) {
+      background: var(--rel-action-neutral-outline-hover, var(--rel-bg-surface-elevated));
+    }
+
+    .browse:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+    }
+
+    .browse:disabled {
+      cursor: not-allowed;
+    }
+
+    /* ── File list ────────────────────────────────────────────────────────── */
+
+    .file-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-sm, 12px);
+    }
+
+    .list-heading {
+      margin: 0;
+      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);
+    }
+
+    .rows {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-xs, 8px);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-sm, 12px);
+      box-sizing: border-box;
+      padding: var(--rel-spacing-sm, 12px) var(--rel-spacing-md, 16px);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
+    }
+
+    .row.error {
+      background: var(--rel-bg-danger-light);
+      border-color: var(--rel-border-danger);
+    }
+
+    .row > rel-icon {
+      flex-shrink: 0;
+    }
+
+    .row-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-3xs, 2px);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .row.uploading .row-content {
+      gap: var(--rel-spacing-2xs, 4px);
+    }
+
+    .row-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--rel-text-default);
+      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);
+    }
+
+    .row-meta {
+      color: var(--rel-text-caption);
+      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);
+    }
+
+    .row.success .row-meta {
+      color: var(--rel-text-success);
+    }
+
+    .row.error .row-meta {
+      color: var(--rel-text-danger);
+    }
+
+    /* Figma's 4px rounded track; rel-progress ships a 6px square one. */
+    rel-progress::part(track) {
+      height: 4px;
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
+    }
+
+    rel-progress::part(indicator) {
+      background: var(--rel-bg-success);
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
+    }
+
+    .row-trailing {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-sm, 12px);
+      flex-shrink: 0;
+    }
+
+    .status-success {
+      color: var(--rel-text-success);
+    }
+
+    .status-error {
+      color: var(--rel-text-danger);
+    }
+
+    .remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--rel-text-default);
+    }
+
+    .remove:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs, 4px);
+    }
+
+    .file-input {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .dropzone {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  (0, import_decorators57.property)({ type: String })
+], RelUpload.prototype, "accept", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: String, attribute: "max-size" })
+], RelUpload.prototype, "maxSize", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: Boolean })
+], RelUpload.prototype, "multiple", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: Boolean, reflect: true })
+], RelUpload.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: String })
+], RelUpload.prototype, "hint", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: String, attribute: "dropzone-title" })
+], RelUpload.prototype, "dropzoneTitle", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: String, attribute: "browse-label" })
+], RelUpload.prototype, "browseLabel", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ attribute: false })
+], RelUpload.prototype, "files", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ attribute: false })
+], RelUpload.prototype, "uploader", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: Number })
+], RelUpload.prototype, "concurrency", 2);
+__decorateClass([
+  (0, import_decorators57.property)({ type: Number, attribute: "delay-threshold" })
+], RelUpload.prototype, "delayThreshold", 2);
+__decorateClass([
+  (0, import_decorators57.state)()
+], RelUpload.prototype, "dragOver", 2);
+__decorateClass([
+  (0, import_decorators57.state)()
+], RelUpload.prototype, "delayed", 2);
+__decorateClass([
+  (0, import_decorators57.query)(".file-input")
+], RelUpload.prototype, "inputEl", 2);
+RelUpload = __decorateClass([
+  (0, import_decorators57.customElement)("rel-upload")
+], RelUpload);
+
+// src/components/rel-upload/rel-upload-actions.ts
+var import_lit58 = require("lit");
+var import_decorators58 = require("lit/decorators.js");
+var import_rel_icon18 = require("@reliability-design/icons/rel-icon");
+var EMPTY_STATE = {
+  phase: "empty",
+  total: 0,
+  failed: 0,
+  canUpload: false,
+  primaryLabel: "Upload"
+};
+var RelUploadActions = class extends import_lit58.LitElement {
+  constructor() {
+    super(...arguments);
+    this.for = "";
+    this.cancelLabel = "Cancel";
+    this.noCancel = false;
+    this.snapshot = EMPTY_STATE;
+    this.target = null;
+    this.onState = (e) => {
+      if (!this.target) this.resolveTarget();
+      if (e.target !== this.target) return;
+      this.snapshot = e.detail;
+    };
+    this.onCancel = () => {
+      this.target?.cancel();
+      this.dispatchEvent(new CustomEvent("rel-cancel", { bubbles: true, composed: true }));
+    };
+    this.onPrimary = () => {
+      if (!this.target) return;
+      if (this.snapshot.phase === "failed") this.target.retry();
+      else this.target.upload();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    queueMicrotask(() => this.resolveTarget());
+    this.root.addEventListener("rel-state", this.onState);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.root.removeEventListener("rel-state", this.onState);
+    this.target = null;
+  }
+  updated(changed) {
+    if (changed.has("for")) this.resolveTarget();
+  }
+  /**
+   * Listen on our own root rather than `document`: a shared root means no
+   * shadow boundary sits between us and the sibling `<rel-upload>`, so
+   * `event.target` is never retargeted away from it.
+   */
+  get root() {
+    const node = this.getRootNode();
+    return node instanceof ShadowRoot ? node : this.ownerDocument;
+  }
+  resolveTarget() {
+    const root = this.getRootNode();
+    let found = null;
+    if (this.for) {
+      found = root.querySelector(`#${CSS.escape(this.for)}`);
+    } else {
+      found = this.parentElement?.querySelector("rel-upload") ?? root.querySelector("rel-upload");
+    }
+    this.target = found;
+    if (found) this.snapshot = found.state;
+  }
+  render() {
+    const { phase, canUpload, primaryLabel } = this.snapshot;
+    const busy = phase === "uploading" || phase === "delayed";
+    return import_lit58.html`
+      <div class="actions" part="base">
+        ${this.noCancel ? import_lit58.nothing : import_lit58.html`<rel-button part="cancel" variant="secondary" @click=${this.onCancel}>
+              ${this.cancelLabel}
+            </rel-button>`}
+
+        <rel-button
+          part="primary"
+          variant="primary"
+          ?loading=${busy}
+          ?disabled=${!canUpload}
+          aria-label=${busy ? "Uploading" : primaryLabel}
+          @click=${this.onPrimary}
+        >
+          ${busy ? import_lit58.nothing : import_lit58.html`${phase === "failed" ? import_lit58.html`<rel-icon name="refresh" size="sm"></rel-icon>` : import_lit58.nothing}${primaryLabel}`}
+        </rel-button>
+      </div>
+    `;
+  }
+};
+RelUploadActions.styles = import_lit58.css`
+    :host {
+      display: block;
+      font-family: var(--rel-fonts-font-family);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--rel-spacing-xs, 8px);
+    }
+
+    rel-button rel-icon {
+      margin-inline-end: var(--rel-spacing-xs, 8px);
+    }
+  `;
+__decorateClass([
+  (0, import_decorators58.property)({ type: String })
+], RelUploadActions.prototype, "for", 2);
+__decorateClass([
+  (0, import_decorators58.property)({ type: String, attribute: "cancel-label" })
+], RelUploadActions.prototype, "cancelLabel", 2);
+__decorateClass([
+  (0, import_decorators58.property)({ type: Boolean, attribute: "no-cancel" })
+], RelUploadActions.prototype, "noCancel", 2);
+__decorateClass([
+  (0, import_decorators58.state)()
+], RelUploadActions.prototype, "snapshot", 2);
+RelUploadActions = __decorateClass([
+  (0, import_decorators58.customElement)("rel-upload-actions")
+], RelUploadActions);
+
 // src/index.ts
 __reExport(index_exports, require("@reliability-design/icons"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FocusTrap,
   RelAccordion,
   RelAlert,
   RelAutocomplete,
@@ -18188,6 +20515,17 @@ __reExport(index_exports, require("@reliability-design/icons"), module.exports);
   RelTopbarMobilePanel,
   RelTopbarProfile,
   RelTopbarUtilities,
+  RelUpload,
+  RelUploadActions,
+  bindShortcut,
+  formatShortcutParts,
+  getDeepActiveElement,
+  getFocusableElements,
+  isApplePlatform,
+  isEditableTarget,
+  matchesShortcut,
+  parseShortcut,
+  trapTabKey,
   ...require("@reliability-design/icons")
 });
 //# sourceMappingURL=index.js.map