@reliability-design/web 1.4.3 → 1.4.4

package/dist/index.mjs

@@ -1568,6 +1568,14 @@ var RelAutocomplete = class extends LitElement4 {
       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;`;
     };
   }
@@ -1579,6 +1587,7 @@ var RelAutocomplete = class extends LitElement4 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     clearTimeout(this.debounceTimer);
   }
   willUpdate(changed) {
@@ -1638,13 +1647,40 @@ var RelAutocomplete = class extends LitElement4 {
     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() {
@@ -1680,17 +1716,17 @@ var RelAutocomplete = class extends LitElement4 {
       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) {
@@ -1860,6 +1896,7 @@ var RelAutocomplete = class extends LitElement4 {
         id="${panelId}"
         part="panel list"
         class="ac-panel"
+        popover="manual"
         role="listbox"
         aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
@@ -1914,6 +1951,15 @@ RelAutocomplete.styles = css4`
       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));
@@ -4387,6 +4433,9 @@ var RelCheckbox = class extends LitElement13 {
     this.state = "default";
     this.status = "unchecked";
     this.value = "";
+    this.size = "medium";
+    this.density = "compact";
+    this.alignment = "leading";
     this._onChange = () => {
     };
     this._onTouched = () => {
@@ -4398,6 +4447,17 @@ var RelCheckbox = class extends LitElement13 {
   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";
@@ -4445,12 +4505,22 @@ var RelCheckbox = class extends LitElement13 {
             </svg>
           </span>
 
-          ${this.icon ? html13`<rel-icon name="${this.icon}" size="md" class="icon-prefix"></rel-icon>` : null}
+          <span class="content">
+            <span class="label-line">
+              ${this.icon ? html13`<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 ? html13`<span part="helper" class="text">${this.supportingtext}</span>` : null}
+          </span>
         </label>
 
-        ${this.supportingtext ? html13`<span part="helper" class="text">${this.supportingtext}</span>` : null}
+        ${this.effectiveDensity === "compact" && this.supportingtext ? html13`<span part="helper" class="text text-below">${this.supportingtext}</span>` : null}
       </div>
     `;
   }
@@ -4483,6 +4553,29 @@ RelCheckbox.styles = css13`
       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;
@@ -4625,7 +4718,6 @@ RelCheckbox.styles = css13`
 
     .text {
       color: var(--rel-text-caption);
-      padding-left: 28px;
 
       font-family: var(--rel-body-sm-regular-font-family);
 
@@ -4638,6 +4730,44 @@ RelCheckbox.styles = css13`
       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([
   property13({ type: String })
@@ -4657,6 +4787,15 @@ __decorateClass([
 __decorateClass([
   property13({ type: String })
 ], RelCheckbox.prototype, "value", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], RelCheckbox.prototype, "size", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], RelCheckbox.prototype, "density", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], RelCheckbox.prototype, "alignment", 2);
 RelCheckbox = __decorateClass([
   customElement13("rel-checkbox")
 ], RelCheckbox);
@@ -5788,6 +5927,31 @@ var RelRangePicker = class extends LitElement15 {
     this.viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     this.isSelectingRange = false;
     this.hoverDate = 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;
@@ -5830,14 +5994,64 @@ var RelRangePicker = class extends LitElement15 {
     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;
@@ -6193,10 +6407,11 @@ var RelRangePicker = class extends LitElement15 {
             </button>
           `}
 
-      ${isPopup && this.open ? html15`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>` : nothing7}
+      ${isPopup && this.open ? html15`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>` : nothing7}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        popover="manual"
         role="dialog"
         aria-label="Select date range"
       >
@@ -6407,6 +6622,17 @@ RelRangePicker.styles = css15`
 
     /* ── 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;
@@ -6431,6 +6657,13 @@ RelRangePicker.styles = css15`
     .backdrop {
       position: fixed;
       inset: 0;
+      /* 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);
     }
@@ -6804,6 +7037,12 @@ __decorateClass([
 __decorateClass([
   query4(".trigger-button")
 ], RelRangePicker.prototype, "triggerButton", 2);
+__decorateClass([
+  query4(".popover")
+], RelRangePicker.prototype, "popoverEl", 2);
+__decorateClass([
+  query4(".backdrop")
+], RelRangePicker.prototype, "backdropEl", 2);
 RelRangePicker = __decorateClass([
   customElement15("rel-range-picker")
 ], RelRangePicker);
@@ -11337,7 +11576,7 @@ RelOtp = __decorateClass([
 ], RelOtp);
 
 // src/components/rel-pagination/rel-pagination.ts
-import { LitElement as LitElement38, html as html38, css as css35 } from "lit";
+import { LitElement as LitElement38, html as html38, css as css35, nothing as nothing9 } from "lit";
 import { customElement as customElement38, property as property32, state as state14 } from "lit/decorators.js";
 var RelPagination = class extends LitElement38 {
   constructor() {
@@ -11408,6 +11647,14 @@ var RelPagination = class extends LitElement38 {
     }
     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;
@@ -11453,15 +11700,20 @@ var RelPagination = class extends LitElement38 {
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
-            ${pages.map(
-      (p) => p === -1 ? html38`<span class="pag-ellipsis">...</span>` : html38`<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 html38`<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 html38`<button
+                type="button"
+                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
+                aria-label="Page ${p}"
+                title="${label === String(p) ? nothing9 : `Page ${p}`}"
+                aria-current="${p === current ? "page" : "false"}"
+                @click="${() => this.handlePageChange(p)}"
+              >${label}</button>`;
+    })}
           </div>
           ${this.renderNavBtn("next")}
         </div>
@@ -11614,9 +11866,10 @@ RelPagination.styles = css35`
       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);
@@ -13149,7 +13402,7 @@ RelSegmentedButton = __decorateClass([
 ], RelSegmentedButton);
 
 // src/components/rel-select/rel-select.ts
-import { LitElement as LitElement46, html as html46, css as css43, nothing as nothing9 } from "lit";
+import { LitElement as LitElement46, html as html46, css as css43, nothing as nothing10 } from "lit";
 import { customElement as customElement46, property as property40, state as state16, query as query8 } from "lit/decorators.js";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
@@ -13219,6 +13472,14 @@ var RelSelect = class extends LitElement46 {
       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) => {
@@ -13236,6 +13497,7 @@ var RelSelect = class extends LitElement46 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.chipResizeObserver?.disconnect();
   }
   firstUpdated() {
@@ -13352,6 +13614,7 @@ var RelSelect = class extends LitElement46 {
     this.highlightedIndex = -1;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
+      this.showNativePopover();
       this.updatePosition();
       if (!this.noSearch) {
         this.searchInputEl?.focus({ preventScroll: true });
@@ -13362,8 +13625,32 @@ var RelSelect = class extends LitElement46 {
     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";
@@ -13468,7 +13755,7 @@ var RelSelect = class extends LitElement46 {
             `;
       }
     )}
-        ${overflow > 0 ? html46`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>` : nothing9}
+        ${overflow > 0 ? html46`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>` : nothing10}
       </span>
     `;
   }
@@ -13538,8 +13825,8 @@ var RelSelect = class extends LitElement46 {
             aria-controls="${listboxId}"
             aria-activedescendant="${activeOptionId}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.fieldAriaLabelledby ? nothing9 : accessibleName || this.placeholder}"
-            aria-labelledby="${this.fieldAriaLabelledby ?? nothing9}"
+            aria-label="${this.fieldAriaLabelledby ? nothing10 : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing10}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -13563,7 +13850,7 @@ var RelSelect = class extends LitElement46 {
             ></rel-icon>
           </button>
 
-          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing9}
+          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing10}
         </div>
 
         ${this.supportingText ? html46`<span part="helper" class="select-support ${this.state === "error" ? "error" : ""}">
@@ -13574,39 +13861,42 @@ var RelSelect = class extends LitElement46 {
       <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 ? html46`<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>
+        ${!this.noSearch || this.multiple && filtered.length > 0 ? html46`<div class="select-header">
+              ${!this.noSearch ? html46`<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 ? html46`<div class="select-all-row">
+                    <rel-checkbox
+                      label="${this.selectAllLabel}"
+                      status="${this.selectAllStatus}"
+                      @rel-change=${(e) => {
+      e.stopPropagation();
+      this.toggleSelectAll();
+    }}
+                    ></rel-checkbox>
+                  </div>` : ""}
             </div>` : ""}
 
         ${filtered.length === 0 ? html46`<div class="select-empty">
               ${opts.length === 0 ? "No options available" : "No matches found"}
             </div>` : this.multiple ? html46`
-              <div class="select-all-row">
-                <rel-checkbox
-                  label="${this.selectAllLabel}"
-                  status="${this.selectAllStatus}"
-                  @rel-change=${(e) => {
-      e.stopPropagation();
-      this.toggleSelectAll();
-    }}
-                ></rel-checkbox>
-              </div>
               <div class="select-options">
                 ${repeat2(
       filtered,
@@ -13653,7 +13943,7 @@ var RelSelect = class extends LitElement46 {
                               name="${option.icon}"
                               size="sm"
                               class="select-option-icon"
-                            ></rel-icon>` : nothing9}
+                            ></rel-icon>` : nothing10}
                         <span class="select-option-label">${option.label}</span>
                       </span>
                       ${option.value === this.selected ? html46`<rel-icon name="check" size="sm" class="select-option-check"></rel-icon>` : ""}
@@ -13949,6 +14239,15 @@ RelSelect.styles = css43`
       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));
@@ -13965,10 +14264,18 @@ RelSelect.styles = css43`
       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));
     }
@@ -16721,7 +17028,7 @@ RelTab = __decorateClass([
 ], RelTab);
 
 // src/components/rel-time-picker/rel-time-picker.ts
-import { LitElement as LitElement54, html as html54, css as css51, nothing as nothing10 } from "lit";
+import { LitElement as LitElement54, html as html54, css as css51, nothing as nothing11 } from "lit";
 import { customElement as customElement54, property as property48, state as state21, query as query10 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 var RelTimePicker = class extends LitElement54 {
@@ -17084,10 +17391,10 @@ var RelTimePicker = class extends LitElement54 {
     return html54`
       <div part="base" class="${wrapperClasses}">
         ${this.label ? html54`<label part="label" class="label" id="time-picker-label"
-              >${this.label}${this.required ? html54`<span class="required-mark" aria-hidden="true">*</span>` : nothing10}</label
-            >` : nothing10}
+              >${this.label}${this.required ? html54`<span class="required-mark" aria-hidden="true">*</span>` : nothing11}</label
+            >` : nothing11}
 
-        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing10}
+        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing11}
 
         <button
           part="trigger"
@@ -17108,8 +17415,8 @@ var RelTimePicker = class extends LitElement54 {
           aria-required=${this.required}
           aria-invalid=${isError}
           aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing10}
-          aria-labelledby=${this.label ? "time-picker-label" : nothing10}
+          aria-describedby=${describedById ?? nothing11}
+          aria-labelledby=${this.label ? "time-picker-label" : nothing11}
         >
           <span part="value" class="trigger-content ${displayText ? "" : "placeholder"}">
             ${displayText || this.placeholder}
@@ -17131,7 +17438,7 @@ var RelTimePicker = class extends LitElement54 {
                       />
                     </svg>
                   </button>
-                ` : nothing10}
+                ` : nothing11}
             <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
           </span>
         </button>
@@ -17219,7 +17526,7 @@ var RelTimePicker = class extends LitElement54 {
     )}
                     </div>
                   </div>
-                ` : nothing10}
+                ` : nothing11}
           </div>
 
           <div part="footer" class="time-footer">
@@ -17260,7 +17567,7 @@ var RelTimePicker = class extends LitElement54 {
               id=${describedById}
             >
               ${belowText}
-            </div>` : nothing10}
+            </div>` : nothing11}
       </div>
     `;
   }
@@ -18045,6 +18352,909 @@ RelTooltip = __decorateClass([
   customElement56("rel-tooltip")
 ], RelTooltip);
 
+// src/components/rel-upload/rel-upload.ts
+import { LitElement as LitElement57, html as html57, css as css54, nothing as nothing12 } from "lit";
+import { customElement as customElement57, property as property51, state as state23, query as query11 } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
+var uid = 0;
+var RelUpload = class extends LitElement57 {
+  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 html57`
+      <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" ? html57`<rel-progress
+                mode="linear-determinate"
+                .value=${f.progress ?? 0}
+              ></rel-progress>` : nothing12}
+          <span class="row-meta">${this.rowMeta(f)}</span>
+        </div>
+
+        <div class="row-trailing">
+          ${f.status === "success" ? html57`<rel-icon
+                class="status-success"
+                name="check-circle"
+                size="md"
+                role="img"
+                aria-label="Uploaded"
+              ></rel-icon>` : nothing12}
+          ${f.status === "error" ? html57`<rel-icon
+                class="status-error"
+                name="error"
+                size="md"
+                role="img"
+                aria-label="Failed"
+              ></rel-icon>` : nothing12}
+          <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 html57`
+      <div class="body">
+        ${alert ? html57`<rel-alert
+              type=${alert.type}
+              appearance="subtle"
+              message1=${alert.message1}
+              message2=${alert.message2}
+            ></rel-alert>` : nothing12}
+
+        <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 ? html57`<div class="file-list">
+              <p class="list-heading">${this.listHeading}</p>
+              <div class="rows" role="list">${this.files.map((f) => this.renderRow(f))}</div>
+            </div>` : nothing12}
+
+        <input
+          class="file-input"
+          type="file"
+          ?multiple=${this.multiple}
+          accept=${this.accept || nothing12}
+          @change=${this.onInputChange}
+        />
+      </div>
+    `;
+  }
+};
+RelUpload.styles = css54`
+    :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([
+  property51({ type: String })
+], RelUpload.prototype, "accept", 2);
+__decorateClass([
+  property51({ type: String, attribute: "max-size" })
+], RelUpload.prototype, "maxSize", 2);
+__decorateClass([
+  property51({ type: Boolean })
+], RelUpload.prototype, "multiple", 2);
+__decorateClass([
+  property51({ type: Boolean, reflect: true })
+], RelUpload.prototype, "disabled", 2);
+__decorateClass([
+  property51({ type: String })
+], RelUpload.prototype, "hint", 2);
+__decorateClass([
+  property51({ type: String, attribute: "dropzone-title" })
+], RelUpload.prototype, "dropzoneTitle", 2);
+__decorateClass([
+  property51({ type: String, attribute: "browse-label" })
+], RelUpload.prototype, "browseLabel", 2);
+__decorateClass([
+  property51({ attribute: false })
+], RelUpload.prototype, "files", 2);
+__decorateClass([
+  property51({ attribute: false })
+], RelUpload.prototype, "uploader", 2);
+__decorateClass([
+  property51({ type: Number })
+], RelUpload.prototype, "concurrency", 2);
+__decorateClass([
+  property51({ type: Number, attribute: "delay-threshold" })
+], RelUpload.prototype, "delayThreshold", 2);
+__decorateClass([
+  state23()
+], RelUpload.prototype, "dragOver", 2);
+__decorateClass([
+  state23()
+], RelUpload.prototype, "delayed", 2);
+__decorateClass([
+  query11(".file-input")
+], RelUpload.prototype, "inputEl", 2);
+RelUpload = __decorateClass([
+  customElement57("rel-upload")
+], RelUpload);
+
+// src/components/rel-upload/rel-upload-actions.ts
+import { LitElement as LitElement58, html as html58, css as css55, nothing as nothing13 } from "lit";
+import { customElement as customElement58, property as property52, state as state24 } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
+var EMPTY_STATE = {
+  phase: "empty",
+  total: 0,
+  failed: 0,
+  canUpload: false,
+  primaryLabel: "Upload"
+};
+var RelUploadActions = class extends LitElement58 {
+  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 html58`
+      <div class="actions" part="base">
+        ${this.noCancel ? nothing13 : html58`<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 ? nothing13 : html58`${phase === "failed" ? html58`<rel-icon name="refresh" size="sm"></rel-icon>` : nothing13}${primaryLabel}`}
+        </rel-button>
+      </div>
+    `;
+  }
+};
+RelUploadActions.styles = css55`
+    :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([
+  property52({ type: String })
+], RelUploadActions.prototype, "for", 2);
+__decorateClass([
+  property52({ type: String, attribute: "cancel-label" })
+], RelUploadActions.prototype, "cancelLabel", 2);
+__decorateClass([
+  property52({ type: Boolean, attribute: "no-cancel" })
+], RelUploadActions.prototype, "noCancel", 2);
+__decorateClass([
+  state24()
+], RelUploadActions.prototype, "snapshot", 2);
+RelUploadActions = __decorateClass([
+  customElement58("rel-upload-actions")
+], RelUploadActions);
+
 // src/index.ts
 export * from "@reliability-design/icons";
 export {
@@ -18106,6 +19316,8 @@ export {
   RelTopbarItem,
   RelTopbarMobilePanel,
   RelTopbarProfile,
-  RelTopbarUtilities
+  RelTopbarUtilities,
+  RelUpload,
+  RelUploadActions
 };
 //# sourceMappingURL=index.mjs.map