@reliability-design/web 1.4.2 → 1.4.4

package/dist/index.mjs

@@ -681,6 +681,7 @@ var RelTextfield = class extends LitElement3 {
     this.internalState = "default";
     this._wasError = false;
     this.uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
+    this._warnedNoName = false;
   }
   get isDisabled() {
     return this.disabled || this.state === "disabled";
@@ -696,6 +697,15 @@ var RelTextfield = class extends LitElement3 {
   get helper() {
     return this.helperText ?? this.supportingText;
   }
+  /** labelStyle supersedes the deprecated floatingLabel boolean. */
+  get resolvedLabelStyle() {
+    if (this.labelStyle) return this.labelStyle;
+    return this.floatingLabel ? "floating" : "default";
+  }
+  /** True when no visible label renders and the input needs an ARIA name. */
+  get labelHidden() {
+    return this.resolvedLabelStyle === "none";
+  }
   connectedCallback() {
     super.connectedCallback();
     const leftIcon = this.getAttribute("lefticon") || this.getAttribute("leftIcon");
@@ -703,6 +713,20 @@ var RelTextfield = class extends LitElement3 {
     const rightIcon = this.getAttribute("righticon") || this.getAttribute("rightIcon");
     if (rightIcon) this.rightIcon = rightIcon;
   }
+  willUpdate(changed) {
+    if (changed.has("labelStyle") && this.labelStyle) {
+      this.floatingLabel = this.labelStyle === "floating";
+    }
+  }
+  updated() {
+    if (this._warnedNoName || !this.labelHidden) return;
+    if (this.fieldAriaLabel || this.fieldAriaLabelledby || this.getAttribute("aria-label")) return;
+    this._warnedNoName = true;
+    console.warn(
+      '<rel-textfield label-style="none"> has no accessible name. Set `field-aria-label` or `field-aria-labelledby` \u2014 a placeholder is not a valid naming mechanism.',
+      this
+    );
+  }
   /** Focuses the inner input/textarea (the host itself is not focusable). */
   focus(options) {
     this.renderRoot.querySelector("input, textarea")?.focus(options);
@@ -770,15 +794,20 @@ var RelTextfield = class extends LitElement3 {
       !this.multiline && leadingIcon ? "has-left-icon" : "",
       !this.multiline && this.rightIcon && this.variant !== "legend" ? "has-right-icon" : ""
     ].filter(Boolean).join(" ");
+    const labelStyle = this.resolvedLabelStyle;
+    const labelHidden = labelStyle === "none";
     const labelTemplate = (extraClass = "") => {
-      if (!this.label) return "";
+      if (!this.label || labelHidden) return "";
       return html3`<label
         part="label"
         class="textfield-label${extraClass}"
         for="${inputId}"
       >${this.label}${this.required ? html3`<span class="required-mark" aria-hidden="true">*</span>` : ""}</label>`;
     };
-    const ariaLabelledby = this.variant === "legend" && this.label ? legendId : void 0;
+    const legendLabelledby = this.variant === "legend" && this.label && !labelHidden ? legendId : void 0;
+    const ariaLabelledby = this.fieldAriaLabelledby ?? legendLabelledby;
+    const hasVisibleLabel = !labelHidden && !!this.label;
+    const ariaLabel = !hasVisibleLabel && !ariaLabelledby ? this.fieldAriaLabel : void 0;
     const inputTemplate = this.multiline ? html3`<textarea part="input"
           id="${inputId}"
           class="${inputClasses}"
@@ -792,6 +821,7 @@ var RelTextfield = class extends LitElement3 {
           ?required="${this.required}"
           aria-invalid="${isError}"
           aria-required="${this.required}"
+          aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
           aria-describedby="${describedById ?? nothing}"
           @focus="${this.handleFocus}"
@@ -810,6 +840,7 @@ var RelTextfield = class extends LitElement3 {
           ?required="${this.required}"
           aria-invalid="${isError}"
           aria-required="${this.required}"
+          aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
           aria-describedby="${describedById ?? nothing}"
           @focus="${this.handleFocus}"
@@ -831,7 +862,7 @@ var RelTextfield = class extends LitElement3 {
       const fieldsetClass = ["field-fieldset", this.multiline ? "multiline" : ""].filter(Boolean).join(" ");
       return html3`
         <div class="${wrapperClasses}">
-          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${this.label ?? ""}${this.required ? html3`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
+          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${labelHidden ? "" : this.label ?? ""}${this.required && !labelHidden ? html3`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
             ${!this.multiline ? leadingIconTemplate : ""}
             ${inputTemplate}
           </fieldset>
@@ -841,10 +872,10 @@ var RelTextfield = class extends LitElement3 {
     }
     return html3`
       <div class="${wrapperClasses}">
-        ${!this.floatingLabel ? labelTemplate() : ""}
+        ${labelHidden ? html3`<div class="label-reserve" aria-hidden="true"></div>` : labelStyle !== "floating" ? labelTemplate() : ""}
 
         <div part="control" class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
-          ${this.floatingLabel ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "") : ""}
+          ${labelStyle === "floating" ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "") : ""}
           ${!this.multiline ? leadingIconTemplate : ""}
 
           ${inputTemplate}
@@ -903,6 +934,22 @@ RelTextfield.styles = css3`
       margin-left: 2px;
     }
 
+    /* ── labelStyle="none" ──
+       No label renders. An empty spacer holds the label row's full height so the
+       input box still bottom-aligns with labelled siblings in a form row.
+       The reserve covers label line-height + the wrapper gap, and the negative
+       margin cancels the flex gap that would otherwise sit below it — so
+       --rel-field-label-reserve: 0 collapses the row to genuinely zero
+       (toolbars, table cells), not just to the leftover gap. */
+    .label-reserve {
+      flex: none;
+      height: var(
+        --rel-field-label-reserve,
+        calc(var(--rel-body-sm-medium-line-height) + var(--rel-spacing-2xs))
+      );
+      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
+    }
+
     /* Floating label variant */
     :host([floatinglabel]) .textfield-wrapper {
       gap: 0;
@@ -1279,6 +1326,12 @@ RelTextfield.styles = css3`
       box-sizing: border-box;
     }
 
+    /* labelStyle="none" + legend: nothing to seat in the notch, so drop the
+       legend entirely and let the top border run continuous. */
+    :host([label-style="none"][variant="legend"]) .field-legend {
+      display: none;
+    }
+
     /* Prefix icon (legend): vertically centered; input inset via has-left-icon */
     :host([variant="legend"]) .icon.left {
       top: 50%;
@@ -1394,9 +1447,18 @@ __decorateClass([
 __decorateClass([
   property3({ type: String })
 ], RelTextfield.prototype, "size", 2);
+__decorateClass([
+  property3({ type: String, attribute: "label-style", reflect: true })
+], RelTextfield.prototype, "labelStyle", 2);
 __decorateClass([
   property3({ type: Boolean, reflect: true })
 ], RelTextfield.prototype, "floatingLabel", 2);
+__decorateClass([
+  property3({ type: String, attribute: "field-aria-label" })
+], RelTextfield.prototype, "fieldAriaLabel", 2);
+__decorateClass([
+  property3({ type: String, attribute: "field-aria-labelledby" })
+], RelTextfield.prototype, "fieldAriaLabelledby", 2);
 __decorateClass([
   property3({ type: String, reflect: true })
 ], RelTextfield.prototype, "variant", 2);
@@ -1506,12 +1568,26 @@ 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;`;
     };
   }
+  /** Name used for the suggestion panel — the visible label, or fieldAriaLabel
+   *  once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
+  get accessibleName() {
+    return (this.labelStyle === "none" ? this.fieldAriaLabel : this.label) || "";
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     clearTimeout(this.debounceTimer);
   }
   willUpdate(changed) {
@@ -1571,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() {
@@ -1613,17 +1716,17 @@ var RelAutocomplete = class extends LitElement4 {
       this.syncPanel();
     }
   }
-  async runSearch(query10) {
+  async runSearch(query12) {
     const seq = ++this.searchSeq;
     try {
-      const results = await this.searchFn(query10);
+      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: query10, 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) {
@@ -1769,7 +1872,10 @@ var RelAutocomplete = class extends LitElement4 {
           .value="${this.inputText}"
           .size="${this.size}"
           .variant="${this.variant}"
+          .labelStyle="${this.labelStyle}"
           .floatingLabel="${this.floatingLabel}"
+          .fieldAriaLabel="${this.fieldAriaLabel}"
+          .fieldAriaLabelledby="${this.fieldAriaLabelledby}"
           .prefixIcon="${this.prefixIcon}"
           .disabled="${this.disabled}"
           .readonly="${this.readonly}"
@@ -1790,8 +1896,9 @@ var RelAutocomplete = class extends LitElement4 {
         id="${panelId}"
         part="panel list"
         class="ac-panel"
+        popover="manual"
         role="listbox"
-        aria-label="${this.label || "Suggestions"}"
+        aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >
@@ -1844,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));
@@ -1970,9 +2086,18 @@ __decorateClass([
 __decorateClass([
   property4({ type: String })
 ], RelAutocomplete.prototype, "variant", 2);
+__decorateClass([
+  property4({ type: String, attribute: "label-style", reflect: true })
+], RelAutocomplete.prototype, "labelStyle", 2);
 __decorateClass([
   property4({ type: Boolean, attribute: "floating-label" })
 ], RelAutocomplete.prototype, "floatingLabel", 2);
+__decorateClass([
+  property4({ type: String, attribute: "field-aria-label" })
+], RelAutocomplete.prototype, "fieldAriaLabel", 2);
+__decorateClass([
+  property4({ type: String, attribute: "field-aria-labelledby" })
+], RelAutocomplete.prototype, "fieldAriaLabelledby", 2);
 __decorateClass([
   property4({ type: String, attribute: "prefix-icon" })
 ], RelAutocomplete.prototype, "prefixIcon", 2);
@@ -2684,8 +2809,8 @@ RelButton.styles = css8`
          pointer-events:none on the HOST would make it transparent to the
          pointer and suppress the cursor entirely. */
       cursor: not-allowed;
-      /* The disabled tokens are full-contrast pairs (light: #0B0B0B on
-         #C2C2C2, dark: #FFF on #404040), so on their own they render a
+      /* The disabled tokens are full-contrast pairs (light: near-black on
+         gray-300, dark: white on gray-700), so on their own they render a
          crisp button that reads as enabled. Dulling happens here instead —
          same opacity mechanism the rest of the library uses. */
       opacity: 0.5;
@@ -4308,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 = () => {
@@ -4319,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";
@@ -4366,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 part="label" class="label">${this.label}</span>
+            </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>
     `;
   }
@@ -4404,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;
@@ -4546,7 +4718,6 @@ RelCheckbox.styles = css13`
 
     .text {
       color: var(--rel-text-caption);
-      padding-left: 28px;
 
       font-family: var(--rel-body-sm-regular-font-family);
 
@@ -4559,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 })
@@ -4578,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);
@@ -5709,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;
@@ -5751,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;
@@ -6114,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"
       >
@@ -6328,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;
@@ -6352,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);
     }
@@ -6725,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);
@@ -8230,6 +8548,8 @@ var RelRadio = class extends LitElement23 {
     super(...arguments);
     this.options = [];
     this.name = "radio-group";
+    this.orientation = "vertical";
+    this.size = "medium";
     this.selectedValue = null;
     this.disabled = false;
     this.error = false;
@@ -8295,7 +8615,12 @@ var RelRadio = class extends LitElement23 {
   }
   render() {
     return html23`
-      <div part="base" class="rel-radio-group">
+      <div
+        part="base"
+        class="rel-radio-group"
+        role="radiogroup"
+        aria-orientation="${this.orientation}"
+      >
         ${this.options.map((o) => this.renderOption(o))}
       </div>
       ${this.error && this.errorMessage ? html23`<div class="error-message">${this.errorMessage}</div>` : ""}
@@ -8316,6 +8641,15 @@ RelRadio.styles = css23`
       gap: var(--rel-spacing-xs);
     }
 
+    /* Horizontal orientation — options flow in a wrapping row. Wider column
+       gap than the vertical rhythm so adjacent option labels read as separate
+       choices; row gap keeps the vertical value for wrapped lines. */
+    :host([orientation="horizontal"]) .rel-radio-group {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--rel-spacing-xs) var(--rel-spacing-xl);
+    }
+
     .rel-radio-option {
       display: inline-flex;
       flex-direction: column;
@@ -8418,6 +8752,34 @@ RelRadio.styles = css23`
 
     }
 
+    /* Size variant (medium is the base scale above). Supporting-text indent =
+       circle width + the radio-main gap, so it stays aligned under the label. */
+    :host([size="small"]) .radio-custom {
+      width: 16px;
+      height: 16px;
+    }
+
+    :host([size="small"]) input:checked + .radio-custom::after {
+      inset: 3px;
+    }
+
+    :host([size="small"]) .radio-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"]) .radio-supporting {
+      margin-left: 24px;
+      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);
+    }
+
     /* Error state (Figma State=Error, both Is Checked values) */
     .rel-radio-option.error-unchecked .radio-custom,
     .rel-radio-option.error-checked .radio-custom {
@@ -8461,6 +8823,12 @@ __decorateClass([
 __decorateClass([
   property22({ type: String })
 ], RelRadio.prototype, "name", 2);
+__decorateClass([
+  property22({ type: String, reflect: true })
+], RelRadio.prototype, "orientation", 2);
+__decorateClass([
+  property22({ type: String, reflect: true })
+], RelRadio.prototype, "size", 2);
 __decorateClass([
   property22({ type: String, reflect: true })
 ], RelRadio.prototype, "selectedValue", 2);
@@ -11208,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() {
@@ -11279,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;
@@ -11324,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>
@@ -11485,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);
@@ -13020,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";
@@ -13060,6 +13442,7 @@ var RelSelect = class extends LitElement46 {
     this.internalState = "default";
     this.visibleChipCount = Infinity;
     this.uniqueId = `select-${Math.random().toString(36).slice(2)}`;
+    this._warnedNoName = false;
     this.onOutsidePointerDown = (e) => {
       if (!this.open) return;
       const path = e.composedPath();
@@ -13089,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) => {
@@ -13106,6 +13497,7 @@ var RelSelect = class extends LitElement46 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.chipResizeObserver?.disconnect();
   }
   firstUpdated() {
@@ -13118,6 +13510,13 @@ var RelSelect = class extends LitElement46 {
     }
   }
   updated(changed) {
+    if (!this._warnedNoName && this.labelStyle === "none" && !this.fieldAriaLabel && !this.fieldAriaLabelledby && !this.getAttribute("aria-label")) {
+      this._warnedNoName = true;
+      console.warn(
+        '<rel-select label-style="none"> has no accessible name. Set `field-aria-label` or `field-aria-labelledby` \u2014 a placeholder is not a valid naming mechanism.',
+        this
+      );
+    }
     if (changed.has("selectedValues") || changed.has("options") || changed.has("multiple") || changed.has("size")) {
       requestAnimationFrame(() => this.computeVisibleChips());
     }
@@ -13215,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 });
@@ -13225,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";
@@ -13331,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>
     `;
   }
@@ -13366,7 +13790,9 @@ var RelSelect = class extends LitElement46 {
     const opts = this.normalizedOptions;
     const filtered = this.filteredOptions;
     const isDisabled = this.state === "disabled";
+    const labelHidden = this.labelStyle === "none";
     const showFloatingChrome = this.labelStyle === "floating" && !!this.label;
+    const accessibleName = (labelHidden ? this.fieldAriaLabel : this.label) || "";
     const wrapperClasses = [
       "select-wrapper",
       this.size,
@@ -13382,7 +13808,7 @@ var RelSelect = class extends LitElement46 {
     const selectedSingle = opts.find((o) => o.value === this.selected);
     return html46`
       <div class="${wrapperClasses}">
-        ${!showFloatingChrome && this.label ? html46`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>` : ""}
+        ${labelHidden ? html46`<div class="label-reserve" aria-hidden="true"></div>` : !showFloatingChrome && this.label ? html46`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>` : ""}
 
         <div class="select-container">
           ${showFloatingChrome ? html46`<span class="floating-label${this.leftIcon ? " has-left-icon" : ""}"
@@ -13399,7 +13825,8 @@ var RelSelect = class extends LitElement46 {
             aria-controls="${listboxId}"
             aria-activedescendant="${activeOptionId}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.label || this.placeholder}"
+            aria-label="${this.fieldAriaLabelledby ? nothing10 : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing10}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -13423,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" : ""}">
@@ -13434,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="${this.label || "Options"}"
+        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,
@@ -13513,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>` : ""}
@@ -13565,6 +13995,22 @@ RelSelect.styles = css43`
 
     }
 
+    /* ── labelStyle="none" ──
+       No label renders. An empty spacer holds the label row's full height so the
+       trigger still bottom-aligns with labelled siblings in a form row.
+       The reserve covers label line-height + the wrapper gap, and the negative
+       margin cancels the flex gap that would otherwise sit below it — so
+       --rel-field-label-reserve: 0 collapses the row to genuinely zero
+       (toolbars, table cells), not just to the leftover gap. */
+    .label-reserve {
+      flex: none;
+      height: var(
+        --rel-field-label-reserve,
+        calc(var(--rel-body-sm-regular-line-height) + var(--rel-spacing-2xs))
+      );
+      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
+    }
+
     /* Error only colors the border/focus ring and the supporting text below
        the field — label, floating label, placeholder, and icons stay normal. */
 
@@ -13793,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));
@@ -13809,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));
     }
@@ -13958,8 +14421,14 @@ __decorateClass([
   property40({ type: String })
 ], RelSelect.prototype, "label", 2);
 __decorateClass([
-  property40({ type: String, attribute: "label-style" })
+  property40({ type: String, attribute: "label-style", reflect: true })
 ], RelSelect.prototype, "labelStyle", 2);
+__decorateClass([
+  property40({ type: String, attribute: "field-aria-label" })
+], RelSelect.prototype, "fieldAriaLabel", 2);
+__decorateClass([
+  property40({ type: String, attribute: "field-aria-labelledby" })
+], RelSelect.prototype, "fieldAriaLabelledby", 2);
 __decorateClass([
   property40({ type: Array })
 ], RelSelect.prototype, "options", 2);
@@ -16558,111 +17027,627 @@ RelTab = __decorateClass([
   customElement53("rel-tab")
 ], RelTab);
 
-// src/components/rel-toast/rel-toast.ts
-import { LitElement as LitElement54, html as html54, css as css51 } from "lit";
-import { customElement as customElement54, property as property48, state as state21 } from "lit/decorators.js";
-var RelToast = class extends LitElement54 {
+// src/components/rel-time-picker/rel-time-picker.ts
+import { LitElement as LitElement54, html as html54, css as css51, nothing as nothing11 } from "lit";
+import { customElement as customElement54, property as property48, state as state21, query as query10 } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
+var RelTimePicker = class extends LitElement54 {
   constructor() {
     super(...arguments);
-    this.message = "";
-    this.type = "default";
-    this.duration = 4e3;
-    this.show = false;
-    this.visible = false;
-    this._dismissTimer = null;
-  }
-  willUpdate(changed) {
-    if (!changed.has("show")) return;
-    if (this.show) {
-      this.visible = true;
-      if (this._dismissTimer) clearTimeout(this._dismissTimer);
-      if (this.duration > 0) {
-        this._dismissTimer = setTimeout(() => this.close(), this.duration);
-      }
-    } else {
-      this.visible = false;
-      if (this._dismissTimer) {
-        clearTimeout(this._dismissTimer);
-        this._dismissTimer = null;
+    this.value = null;
+    this.placeholder = "Select time";
+    this.label = null;
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.format = "12h";
+    this.minuteStep = 1;
+    this.minTime = null;
+    this.maxTime = null;
+    this.open = false;
+    this.clearable = false;
+    this.error = false;
+    this.invalid = false;
+    this.size = "medium";
+    this.variant = "outlined";
+    this.fullWidth = false;
+    this.draftHour = null;
+    this.draftMinute = null;
+    this.handleClickOutside = (e) => {
+      if (!this.open) return;
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this.cancelPopover();
       }
-    }
+    };
+    this.handleEscapeKey = (e) => {
+      if (e.key === "Escape" && this.open) {
+        this.cancelPopover();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleClickOutside);
+    document.addEventListener("keydown", this.handleEscapeKey);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this._dismissTimer) clearTimeout(this._dismissTimer);
+    document.removeEventListener("click", this.handleClickOutside);
+    document.removeEventListener("keydown", this.handleEscapeKey);
   }
-  open() {
-    this.show = true;
+  updated(changedProperties) {
+    if (changedProperties.has("open") && this.open) {
+      this.resetDraftFromValue();
+      setTimeout(() => {
+        this.scrollColumnsToSelection();
+        const target = this.columnsElement?.querySelector(
+          ".option-button.selected:not(:disabled)"
+        ) ?? this.columnsElement?.querySelector(
+          ".option-button:not(:disabled)"
+        );
+        target?.focus();
+      }, 0);
+    }
   }
-  close() {
-    this.show = false;
-    this.visible = false;
-    if (this._dismissTimer) {
-      clearTimeout(this._dismissTimer);
-      this._dismissTimer = null;
+  // ── Parsing / formatting ──
+  parseTime(time) {
+    if (!time) return null;
+    const match = time.match(/^(\d{1,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 };
+  }
+  formatValue(hour, minute) {
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+  formatDisplay(hour, minute) {
+    const mm = String(minute).padStart(2, "0");
+    if (this.format === "24h") {
+      return `${String(hour).padStart(2, "0")}:${mm}`;
+    }
+    const period = hour < 12 ? "AM" : "PM";
+    const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    return `${hour12}:${mm} ${period}`;
+  }
+  toMinutes(hour, minute) {
+    return hour * 60 + minute;
+  }
+  get minuteStepSafe() {
+    const step = Math.floor(this.minuteStep);
+    return step >= 1 && step <= 60 ? step : 1;
+  }
+  get minBoundMinutes() {
+    const parsed = this.parseTime(this.minTime);
+    return parsed ? this.toMinutes(parsed.hour, parsed.minute) : 0;
+  }
+  get maxBoundMinutes() {
+    const parsed = this.parseTime(this.maxTime);
+    return parsed ? this.toMinutes(parsed.hour, parsed.minute) : 23 * 60 + 59;
+  }
+  isTimeInRange(hour, minute) {
+    const total = this.toMinutes(hour, minute);
+    return total >= this.minBoundMinutes && total <= this.maxBoundMinutes;
+  }
+  /** Minutes shown in the minutes column (respecting minuteStep). */
+  getMinuteOptions() {
+    const minutes = [];
+    for (let m = 0; m < 60; m += this.minuteStepSafe) {
+      minutes.push(m);
+    }
+    return minutes;
+  }
+  /** An hour is enabled if at least one of its step minutes is in range. */
+  isHourEnabled(hour) {
+    return this.getMinuteOptions().some((m) => this.isTimeInRange(hour, m));
+  }
+  isPeriodEnabled(period) {
+    const start = period === "AM" ? 0 : 12;
+    for (let h = start; h < start + 12; h++) {
+      if (this.isHourEnabled(h)) return true;
+    }
+    return false;
+  }
+  /** Hour column entries: display label + the 0–23 hour it maps to. */
+  getHourOptions() {
+    if (this.format === "24h") {
+      return Array.from({ length: 24 }, (_, h) => ({
+        label: String(h).padStart(2, "0"),
+        hour24: h
+      }));
+    }
+    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
+    }));
+  }
+  get draftPeriod() {
+    if (this.draftHour === null) return null;
+    return this.draftHour < 12 ? "AM" : "PM";
+  }
+  resetDraftFromValue() {
+    const parsed = this.parseTime(this.value);
+    this.draftHour = parsed ? parsed.hour : null;
+    this.draftMinute = parsed ? parsed.minute : null;
+  }
+  /** Snap the draft minute to the nearest valid step minute for the hour. */
+  clampDraftToRange() {
+    if (this.draftHour === null || this.draftMinute === null) return;
+    if (this.isTimeInRange(this.draftHour, this.draftMinute)) return;
+    const hour = this.draftHour;
+    const valid = this.getMinuteOptions().filter((m) => this.isTimeInRange(hour, m));
+    if (valid.length === 0) {
+      this.draftMinute = null;
+      return;
     }
+    const current = this.draftMinute;
+    this.draftMinute = valid.reduce(
+      (best, m) => Math.abs(m - current) < Math.abs(best - current) ? m : best
+    );
+  }
+  // ── Open / close / commit ──
+  toggleTimePopover() {
+    if (this.disabled || this.readonly) return;
+    this.open = !this.open;
     this.dispatchEvent(
-      new CustomEvent("dismissed", {
+      new CustomEvent("rel-open-change", {
+        detail: { open: this.open },
         bubbles: true,
         composed: true
       })
     );
   }
-  handleActionClick(event) {
-    event.stopPropagation();
+  /** Close discarding the draft (Cancel / Escape / outside click). */
+  cancelPopover() {
+    this.open = false;
+    this.triggerButton?.focus();
     this.dispatchEvent(
-      new CustomEvent("action", {
+      new CustomEvent("rel-open-change", {
+        detail: { open: false },
         bubbles: true,
         composed: true
       })
     );
-    this.close();
   }
+  applySelection() {
+    if (this.draftHour === null) return;
+    const newValue = this.formatValue(this.draftHour, this.draftMinute ?? 0);
+    this.value = newValue;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { value: newValue },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.cancelPopover();
+  }
+  /** Set the draft to the current time, snapped to the minute step and range. */
+  selectNow() {
+    const now = /* @__PURE__ */ new Date();
+    const step = this.minuteStepSafe;
+    this.draftHour = now.getHours();
+    this.draftMinute = Math.round(now.getMinutes() / step) * step;
+    if (this.draftMinute >= 60) {
+      this.draftMinute = 0;
+      this.draftHour = (this.draftHour + 1) % 24;
+    }
+    if (!this.isHourEnabled(this.draftHour)) {
+      const enabled = [];
+      for (let h = 0; h < 24; h++) if (this.isHourEnabled(h)) enabled.push(h);
+      if (enabled.length === 0) return;
+      const currentHour = this.draftHour;
+      this.draftHour = enabled.reduce(
+        (best, h) => Math.abs(h - currentHour) < Math.abs(best - currentHour) ? h : best
+      );
+    }
+    this.clampDraftToRange();
+    this.scrollColumnsToSelection();
+  }
+  clearValue(e) {
+    e.stopPropagation();
+    this.value = null;
+    this.draftHour = null;
+    this.draftMinute = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { value: null },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ── Column selection ──
+  selectHour(hour24) {
+    if (!this.isHourEnabled(hour24)) return;
+    this.draftHour = hour24;
+    if (this.draftMinute === null) this.draftMinute = 0;
+    this.clampDraftToRange();
+  }
+  selectMinute(minute) {
+    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.isTimeInRange(this.draftHour, minute)) return;
+    this.draftMinute = minute;
+  }
+  selectPeriod(period) {
+    if (!this.isPeriodEnabled(period)) return;
+    const base = period === "AM" ? 0 : 12;
+    const hour12 = this.draftHour === null ? 0 : this.draftHour % 12;
+    this.draftHour = base + hour12;
+    if (this.draftMinute === null) this.draftMinute = 0;
+    if (!this.isHourEnabled(this.draftHour)) {
+      const enabled = [];
+      for (let h = base; h < base + 12; h++) if (this.isHourEnabled(h)) enabled.push(h);
+      const currentHour = this.draftHour;
+      this.draftHour = enabled.reduce(
+        (best, h) => Math.abs(h - currentHour) < Math.abs(best - currentHour) ? h : best
+      );
+    }
+    this.clampDraftToRange();
+    this.scrollColumnsToSelection();
+  }
+  scrollColumnsToSelection() {
+    this.updateComplete.then(() => {
+      this.columnsElement?.querySelectorAll(".option-button.selected").forEach((btn) => btn.scrollIntoView({ block: "center" }));
+    });
+  }
+  // ── Keyboard ──
+  handleTriggerKeydown(e) {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!this.open) {
+        this.toggleTimePopover();
+      }
+    }
+  }
+  /**
+   * Column navigation: Up/Down move within the column (and select), Left/Right
+   * jump between columns, Home/End go to the first/last option, Enter applies.
+   */
+  handleOptionKeydown(e, column) {
+    const list = e.currentTarget.closest(".column-list");
+    if (!list) return;
+    const buttons = Array.from(
+      list.querySelectorAll(".option-button:not(:disabled)")
+    );
+    const index = buttons.indexOf(e.currentTarget);
+    let target;
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        target = buttons[Math.max(0, index - 1)];
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        target = buttons[Math.min(buttons.length - 1, index + 1)];
+        break;
+      case "Home":
+        e.preventDefault();
+        target = buttons[0];
+        break;
+      case "End":
+        e.preventDefault();
+        target = buttons[buttons.length - 1];
+        break;
+      case "ArrowLeft":
+      case "ArrowRight": {
+        e.preventDefault();
+        this.focusAdjacentColumn(column, e.key === "ArrowRight" ? 1 : -1);
+        return;
+      }
+      case "Enter":
+        e.preventDefault();
+        e.currentTarget.click();
+        this.applySelection();
+        return;
+      default:
+        return;
+    }
+    if (target && target !== buttons[index]) {
+      target.click();
+      target.focus();
+      target.scrollIntoView({ block: "nearest" });
+    }
+  }
+  focusAdjacentColumn(from, direction) {
+    const order = this.format === "12h" ? ["hour", "minute", "period"] : ["hour", "minute"];
+    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" });
+  }
+  // ── Render ──
   render() {
+    const isError = this.error || this.invalid;
+    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 hourOptions = this.getHourOptions();
+    const minuteOptions = this.getMinuteOptions();
+    const draftPeriod = this.draftPeriod;
+    const wrapperClasses = [
+      "time-picker-wrapper",
+      this.size,
+      isError ? "error" : "",
+      this.readonly ? "readonly" : ""
+    ].filter(Boolean).join(" ");
     return html54`
-      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
-        <span part="label" class="toast-message">${this.message}</span>
+      <div part="base" class="${wrapperClasses}">
+        ${this.label ? html54`<label part="label" class="label" id="time-picker-label"
+              >${this.label}${this.required ? html54`<span class="required-mark" aria-hidden="true">*</span>` : nothing11}</label
+            >` : nothing11}
 
-        ${this.actionLabel ? html54`<button
-              part="action" class="toast-action"
-              @click="${this.handleActionClick}"
+        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing11}
+
+        <button
+          part="trigger"
+          class="trigger-button ${isError ? "error" : ""}"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${this.toggleTimePopover}
+          @keydown=${this.handleTriggerKeydown}
+          @focus=${() => this.dispatchEvent(
+      new CustomEvent("rel-focus", { bubbles: true, composed: true })
+    )}
+          @blur=${() => this.dispatchEvent(
+      new CustomEvent("rel-blur", { bubbles: true, composed: true })
+    )}
+          aria-label=${this.label || "Select time"}
+          aria-haspopup="dialog"
+          aria-expanded=${this.open}
+          aria-required=${this.required}
+          aria-invalid=${isError}
+          aria-readonly=${this.readonly}
+          aria-describedby=${describedById ?? nothing11}
+          aria-labelledby=${this.label ? "time-picker-label" : nothing11}
+        >
+          <span part="value" class="trigger-content ${displayText ? "" : "placeholder"}">
+            ${displayText || this.placeholder}
+          </span>
+          <span class="trigger-icons">
+            ${this.clearable && this.value ? html54`
+                  <button
+                    class="icon-button"
+                    type="button"
+                    aria-label="Clear time"
+                    @click=${this.clearValue}
+                  >
+                    <svg viewBox="0 0 16 16" fill="currentColor">
+                      <path
+                        d="M4 4l8 8M12 4l-8 8"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </button>
+                ` : nothing11}
+            <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
+          </span>
+        </button>
+
+        <div
+          part="panel"
+          class="popover ${this.open ? "open" : ""}"
+          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(
+      (opt, i) => html54`
+                    <button
+                      part="option"
+                      class="option-button ${this.draftHour === opt.hour24 ? "selected" : ""}"
+                      type="button"
+                      role="option"
+                      aria-selected=${this.draftHour === opt.hour24}
+                      ?disabled=${!this.isHourEnabled(opt.hour24)}
+                      @click=${() => this.selectHour(opt.hour24)}
+                      @keydown=${(e) => this.handleOptionKeydown(e, "hour")}
+                      tabindex=${this.draftHour === opt.hour24 || this.draftHour === null && i === 0 ? 0 : -1}
+                    >
+                      ${opt.label}
+                    </button>
+                  `
+    )}
+              </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(
+      (m, i) => html54`
+                    <button
+                      part="option"
+                      class="option-button ${this.draftMinute === m ? "selected" : ""}"
+                      type="button"
+                      role="option"
+                      aria-selected=${this.draftMinute === m}
+                      ?disabled=${this.draftHour !== null && !this.isTimeInRange(this.draftHour, m)}
+                      @click=${() => this.selectMinute(m)}
+                      @keydown=${(e) => this.handleOptionKeydown(e, "minute")}
+                      tabindex=${this.draftMinute === m || this.draftMinute === null && i === 0 ? 0 : -1}
+                    >
+                      ${String(m).padStart(2, "0")}
+                    </button>
+                  `
+    )}
+              </div>
+            </div>
+
+            ${this.format === "12h" ? html54`
+                  <div class="column">
+                    <div class="column-header" aria-hidden="true">AM/PM</div>
+                    <div class="column-list" role="listbox" aria-label="AM or PM">
+                      ${["AM", "PM"].map(
+      (p) => html54`
+                          <button
+                            part="option"
+                            class="option-button ${draftPeriod === p ? "selected" : ""}"
+                            type="button"
+                            role="option"
+                            aria-selected=${draftPeriod === p}
+                            ?disabled=${!this.isPeriodEnabled(p)}
+                            @click=${() => this.selectPeriod(p)}
+                            @keydown=${(e) => this.handleOptionKeydown(e, "period")}
+                            tabindex=${draftPeriod === p || draftPeriod === null && p === "AM" ? 0 : -1}
+                          >
+                            ${p}
+                          </button>
+                        `
+    )}
+                    </div>
+                  </div>
+                ` : nothing11}
+          </div>
+
+          <div part="footer" class="time-footer">
+            <rel-button
+              variant="secondary"
+              size="small"
+              border="corner-radius"
+              @click=${() => this.selectNow()}
             >
-              ${this.actionLabel}
-            </button>` : ""}
+              Now
+            </rel-button>
+            <div class="footer-right">
+              <rel-button
+                variant="secondary"
+                size="small"
+                border="corner-radius"
+                @click=${() => this.cancelPopover()}
+              >
+                Cancel
+              </rel-button>
+              <rel-button
+                variant="primary"
+                tone="default"
+                size="small"
+                border="corner-radius"
+                ?disabled=${this.draftHour === null}
+                @click=${() => this.applySelection()}
+              >
+                Apply
+              </rel-button>
+            </div>
+          </div>
+        </div>
 
-        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
+        ${belowText ? html54`<div
+              part="helper"
+              class="time-picker-support ${isError ? "error" : ""}"
+              id=${describedById}
+            >
+              ${belowText}
+            </div>` : nothing11}
       </div>
     `;
   }
 };
-RelToast.styles = css51`
+RelTimePicker.styles = css51`
     :host {
       color: var(--rel-text-default);
-      position: fixed;
-      bottom: 24px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      pointer-events: none;
-      z-index: var(--rel-z-toast, 9000);
+      display: block;
       font-family: var(--rel-fonts-font-family);
+      position: relative;
     }
 
-    /* Toast container */
-    .toast {
-      display: inline-flex;
-      align-items: center;
+    /* Intrinsic width by default; set fullWidth to fill the parent. */
+    :host(:not([fullwidth])) {
+      display: inline-block;
+      width: auto;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) * {
+      pointer-events: none;
+    }
+
+    :host([readonly]) .trigger-button {
+      cursor: default;
+    }
+
+    .time-picker-wrapper {
+      display: flex;
+      flex-direction: column;
       gap: var(--rel-spacing-xs);
-      background-color: var(--rel-bg-neutral-inverse-1);
-      color: var(--rel-text-inverse);
+    }
 
-      border-radius: var(--rel-border-radius-sm);
+    .label {
+      color: var(--rel-text-label);
+      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);
+    }
+
+    .required-mark {
+      color: var(--rel-text-danger);
+      margin-left: 2px;
+    }
+
+    /* Support text (helperText / errorMessage) */
+    .time-picker-support {
+      color: var(--rel-text-placeholder);
+      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);
+    }
+
+    .time-picker-support.error {
+      color: var(--rel-text-danger);
+    }
+
+    .trigger-button {
+      width: 100%;
+      min-width: 160px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rel-spacing-xs);
       padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      box-shadow: var(--rel-shadows-shadow-300);
-      pointer-events: all;
-      animation: fadeInUp 0.25s ease;
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
+      color: var(--rel-text-default);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-align: left;
       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);
@@ -16670,276 +17655,1605 @@ RelToast.styles = css51`
       letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
-    .toast.error {
-      background-color: var(--rel-bg-danger);
-      color: var(--rel-text-static-light);
+    .trigger-button:hover:not(:disabled) {
+      border-color: var(--rel-border-strong);
+    }
+
+    .trigger-button:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+      border-color: var(--rel-border-focus);
+    }
+
+    .trigger-button:disabled {
+      cursor: not-allowed;
+      background: var(--rel-bg-surface-elevated);
+    }
+
+    /* Error state */
+    .trigger-button.error,
+    .trigger-button.error:hover:not(:disabled) {
+      border-color: var(--rel-border-danger);
+    }
+
+    .trigger-button.error:focus-visible {
+      outline-color: var(--rel-border-danger);
+      border-color: var(--rel-border-danger);
+    }
+
+    /* Size variants (medium is the base .trigger-button style) */
+    .time-picker-wrapper.small .trigger-button {
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+      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.large .trigger-button {
+      padding: var(--rel-spacing-md) var(--rel-spacing-md);
+      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);
+    }
+
+    .trigger-content {
+      flex: 1;
+      color: var(--rel-text-default);
+    }
+
+    .trigger-content.placeholder {
+      color: var(--rel-text-placeholder);
+    }
+
+    .trigger-icons {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-2xs);
+      color: var(--rel-text-placeholder);
+    }
+
+    .icon-button {
+      background: none;
+      border: none;
+      padding: var(--rel-spacing-3xs);
+      cursor: pointer;
+      color: var(--rel-text-placeholder);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--rel-border-radius-xs);
+      transition: all 0.15s ease;
+    }
+
+    .icon-button:hover {
+      background: var(--rel-bg-surface-elevated);
+      color: var(--rel-text-default);
+    }
+
+    .icon-button svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .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-radius: var(--rel-border-radius-sm);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-md);
+      display: none;
+    }
+
+    .popover.open {
+      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);
+    }
+
+    .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;
+    }
+
+    .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-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-3xs);
+      max-height: 224px;
+      overflow-y: auto;
+      padding: var(--rel-spacing-3xs);
+      scrollbar-width: thin;
+    }
+
+    .option-button {
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-border-radius-sm);
+      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);
+    }
+
+    .option-button:hover:not(:disabled):not(.selected) {
+      background: var(--rel-bg-surface-elevated);
+    }
+
+    .option-button:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
+    .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);
+    }
+
+    .option-button:disabled {
+      color: var(--rel-text-disabled);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .option-button:disabled:hover {
+      background: transparent;
+    }
+
+    /* Footer (mirrors the range-picker calendar-footer) */
+    .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);
+      border-top: 1px solid var(--rel-border-subtle);
+    }
+
+    .footer-right {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .trigger-button,
+      .icon-button,
+      .option-button {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property48({ type: String, reflect: true })
+], RelTimePicker.prototype, "value", 2);
+__decorateClass([
+  property48({ type: String })
+], RelTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property48({ type: String })
+], RelTimePicker.prototype, "label", 2);
+__decorateClass([
+  property48({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  property48({ type: Boolean })
+], RelTimePicker.prototype, "required", 2);
+__decorateClass([
+  property48({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "readonly", 2);
+__decorateClass([
+  property48({ type: String })
+], RelTimePicker.prototype, "format", 2);
+__decorateClass([
+  property48({ type: Number, attribute: "minute-step" })
+], RelTimePicker.prototype, "minuteStep", 2);
+__decorateClass([
+  property48({ type: String, attribute: "min-time" })
+], RelTimePicker.prototype, "minTime", 2);
+__decorateClass([
+  property48({ type: String, attribute: "max-time" })
+], RelTimePicker.prototype, "maxTime", 2);
+__decorateClass([
+  property48({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "open", 2);
+__decorateClass([
+  property48({ type: Boolean })
+], RelTimePicker.prototype, "clearable", 2);
+__decorateClass([
+  property48({ type: Boolean })
+], RelTimePicker.prototype, "error", 2);
+__decorateClass([
+  property48({ type: Boolean })
+], RelTimePicker.prototype, "invalid", 2);
+__decorateClass([
+  property48({ type: String, attribute: "error-message" })
+], RelTimePicker.prototype, "errorMessage", 2);
+__decorateClass([
+  property48({ type: String, attribute: "helper-text" })
+], RelTimePicker.prototype, "helperText", 2);
+__decorateClass([
+  property48({ type: String })
+], RelTimePicker.prototype, "name", 2);
+__decorateClass([
+  property48({ type: String })
+], RelTimePicker.prototype, "size", 2);
+__decorateClass([
+  property48({ type: String, reflect: true })
+], RelTimePicker.prototype, "variant", 2);
+__decorateClass([
+  property48({ type: Boolean, reflect: true })
+], RelTimePicker.prototype, "fullWidth", 2);
+__decorateClass([
+  state21()
+], RelTimePicker.prototype, "draftHour", 2);
+__decorateClass([
+  state21()
+], RelTimePicker.prototype, "draftMinute", 2);
+__decorateClass([
+  query10(".trigger-button")
+], RelTimePicker.prototype, "triggerButton", 2);
+__decorateClass([
+  query10(".columns")
+], RelTimePicker.prototype, "columnsElement", 2);
+RelTimePicker = __decorateClass([
+  customElement54("rel-time-picker")
+], RelTimePicker);
+
+// src/components/rel-toast/rel-toast.ts
+import { LitElement as LitElement55, html as html55, css as css52 } from "lit";
+import { customElement as customElement55, property as property49, state as state22 } from "lit/decorators.js";
+var RelToast = class extends LitElement55 {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.type = "default";
+    this.duration = 4e3;
+    this.show = false;
+    this.visible = false;
+    this._dismissTimer = null;
+  }
+  willUpdate(changed) {
+    if (!changed.has("show")) return;
+    if (this.show) {
+      this.visible = true;
+      if (this._dismissTimer) clearTimeout(this._dismissTimer);
+      if (this.duration > 0) {
+        this._dismissTimer = setTimeout(() => this.close(), this.duration);
+      }
+    } else {
+      this.visible = false;
+      if (this._dismissTimer) {
+        clearTimeout(this._dismissTimer);
+        this._dismissTimer = null;
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._dismissTimer) clearTimeout(this._dismissTimer);
+  }
+  open() {
+    this.show = true;
+  }
+  close() {
+    this.show = false;
+    this.visible = false;
+    if (this._dismissTimer) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
+    }
+    this.dispatchEvent(
+      new CustomEvent("dismissed", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleActionClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("action", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.close();
+  }
+  render() {
+    return html55`
+      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
+        <span part="label" class="toast-message">${this.message}</span>
+
+        ${this.actionLabel ? html55`<button
+              part="action" class="toast-action"
+              @click="${this.handleActionClick}"
+            >
+              ${this.actionLabel}
+            </button>` : ""}
+
+        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
+      </div>
+    `;
+  }
+};
+RelToast.styles = css52`
+    :host {
+      color: var(--rel-text-default);
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      pointer-events: none;
+      z-index: var(--rel-z-toast, 9000);
+      font-family: var(--rel-fonts-font-family);
+    }
+
+    /* Toast container */
+    .toast {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+      background-color: var(--rel-bg-neutral-inverse-1);
+      color: var(--rel-text-inverse);
+
+      border-radius: var(--rel-border-radius-sm);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
+      box-shadow: var(--rel-shadows-shadow-300);
+      pointer-events: all;
+      animation: fadeInUp 0.25s 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);
+    }
+
+    .toast.error {
+      background-color: var(--rel-bg-danger);
+      color: var(--rel-text-static-light);
+    }
+
+    .toast.hidden {
+      display: none;
+    }
+
+    /* Message */
+    .toast-message {
+      flex: 1;
+    }
+
+    /* Action button */
+    .toast-action {
+      background: transparent;
+      border: none;
+      color: var(--rel-action-neutral-label-icons-fill-inverse);
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
+      cursor: pointer;
+      transition: opacity 0.2s;
+    }
+
+    .toast-action:hover {
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-default);
+      opacity: 0.75;
+    }
+
+    .toast-action:focus-visible {
+      outline: 2px solid var(--rel-text-static-light);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs);
+    }
+
+    /* Close button */
+    .toast-close {
+      background: transparent;
+      color: var(--rel-action-neutral-label-icons-ghost);
+      border: none;
+      color: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+      line-height: 1;
+      padding: var(--rel-spacing-2xs);
+      margin-left: var(--rel-spacing-2xs);
+    }
+
+    .toast-close:hover {
+      opacity: 0.75;
+    }
+
+    .toast-close:focus-visible {
+      outline: 2px solid var(--rel-text-static-light);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs);
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+      .toast {
+        animation: none;
+      }
+    }
+
+    /* Animations */
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+__decorateClass([
+  property49({ type: String })
+], RelToast.prototype, "message", 2);
+__decorateClass([
+  property49({ type: String })
+], RelToast.prototype, "type", 2);
+__decorateClass([
+  property49({ type: String })
+], RelToast.prototype, "actionLabel", 2);
+__decorateClass([
+  property49({ type: Number })
+], RelToast.prototype, "duration", 2);
+__decorateClass([
+  property49({ type: Boolean, reflect: true })
+], RelToast.prototype, "show", 2);
+__decorateClass([
+  state22()
+], RelToast.prototype, "visible", 2);
+RelToast = __decorateClass([
+  customElement55("rel-toast")
+], RelToast);
+
+// src/components/rel-tooltip/rel-tooltip.ts
+import { LitElement as LitElement56, html as html56, css as css53 } from "lit";
+import { customElement as customElement56, property as property50 } from "lit/decorators.js";
+var RelTooltip = class extends LitElement56 {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.position = "above";
+    this.showTail = false;
+    this.type = "single-line";
+    // Stable id so aria-describedby can reference the bubble across renders.
+    this.uniqueId = Math.random().toString(36).slice(2);
+  }
+  firstUpdated() {
+    this.linkTrigger();
+  }
+  linkTrigger() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const trigger = slot.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+    }
+  }
+  render() {
+    return html56`
+      <slot @slotchange="${this.linkTrigger}"></slot>
+      <div
+        part="panel" class="tooltip-bubble ${this.position}"
+        id="tooltip-${this.uniqueId}"
+        role="tooltip"
+      >
+        ${this.text}
+        ${this.showTail ? html56`<span part="indicator" class="tooltip-tail"></span>` : ""}
+      </div>
+    `;
+  }
+};
+RelTooltip.styles = css53`
+    :host {
+      color: var(--rel-text-default);
+      display: inline-block;
+      position: relative;
+    }
+
+    /* Tooltip container */
+    .tooltip-bubble {
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-medium-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);
+      position: absolute;
+      background-color: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
+      padding: var(--rel-spacing-xs, 8px)
+        var(--rel-spacing-sm, 12px);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+      overflow: visible;
+    }
+
+    /* Figma Type=Multi Line: wrap inside a bounded bubble */
+    :host([type="multi-line"]) .tooltip-bubble {
+      white-space: normal;
+      max-width: 220px;
+      width: max-content;
+    }
+
+    :host(:hover) .tooltip-bubble,
+    :host(:focus-within) .tooltip-bubble {
+      opacity: 1;
+    }
+
+    /* Positioning */
+    .tooltip-bubble.above {
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip-bubble.below {
+      top: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip-bubble.left {
+      right: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .tooltip-bubble.right {
+      left: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Tail/Arrow */
+    .tooltip-tail {
+      position: absolute;
+      width: 0;
+      height: 0;
+      display: block;
+    }
+
+    .tooltip-bubble.above .tooltip-tail,
+    .tooltip-bubble.below .tooltip-tail {
+      left: 50%;
+      transform: translateX(-50%);
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    .tooltip-bubble.above .tooltip-tail {
+      bottom: -6px;
+      border-top: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-bottom: none;
+    }
+
+    .tooltip-bubble.below .tooltip-tail {
+      top: -6px;
+      border-bottom: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-top: none;
+    }
+
+    .tooltip-bubble.left .tooltip-tail,
+    .tooltip-bubble.right .tooltip-tail {
+      top: 50%;
+      transform: translateY(-50%);
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+    }
+
+    .tooltip-bubble.left .tooltip-tail {
+      right: -6px;
+      border-left: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-right: none;
+    }
+
+    .tooltip-bubble.right .tooltip-tail {
+      left: -6px;
+      border-right: 6px solid var(--rel-bg-neutral-inverse-2);
+      border-left: none;
+    }
+  `;
+__decorateClass([
+  property50({ type: String })
+], RelTooltip.prototype, "text", 2);
+__decorateClass([
+  property50({ type: String })
+], RelTooltip.prototype, "position", 2);
+__decorateClass([
+  property50({ type: Boolean, attribute: "show-tail" })
+], RelTooltip.prototype, "showTail", 2);
+__decorateClass([
+  property50({ type: String, reflect: true })
+], RelTooltip.prototype, "type", 2);
+RelTooltip = __decorateClass([
+  customElement56("rel-tooltip")
+], RelTooltip);
+
+// src/components/rel-upload/rel-upload.ts
+import { LitElement as LitElement57, html as html57, css as css54, nothing as nothing12 } from "lit";
+import { customElement as customElement57, property as property51, state as state23, query as query11 } from "lit/decorators.js";
+import "@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);
     }
 
-    .toast.hidden {
-      display: none;
+    /* 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);
     }
 
-    /* Message */
-    .toast-message {
-      flex: 1;
+    rel-progress::part(indicator) {
+      background: var(--rel-bg-success);
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
     }
 
-    /* Action button */
-    .toast-action {
-      background: transparent;
-      border: none;
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
-      cursor: pointer;
-      transition: opacity 0.2s;
+    .row-trailing {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-sm, 12px);
+      flex-shrink: 0;
     }
 
-    .toast-action:hover {
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-      opacity: 0.75;
+    .status-success {
+      color: var(--rel-text-success);
     }
 
-    .toast-action:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
+    .status-error {
+      color: var(--rel-text-danger);
     }
 
-    /* Close button */
-    .toast-close {
-      background: transparent;
-      color: var(--rel-action-neutral-label-icons-ghost);
+    .remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      background: none;
       border: none;
-      color: inherit;
-      font-size: 1rem;
       cursor: pointer;
-      line-height: 1;
-      padding: var(--rel-spacing-2xs);
-      margin-left: var(--rel-spacing-2xs);
-    }
-
-    .toast-close:hover {
-      opacity: 0.75;
+      color: var(--rel-text-default);
     }
 
-    .toast-close:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
+    .remove:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
+      border-radius: var(--rel-border-radius-xs, 4px);
     }
 
-
-    @media (prefers-reduced-motion: reduce) {
-      .toast {
-        animation: none;
-      }
+    .file-input {
+      display: none;
     }
 
-    /* Animations */
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
+    @media (prefers-reduced-motion: reduce) {
+      .dropzone {
+        transition: none;
       }
     }
   `;
 __decorateClass([
-  property48({ type: String })
-], RelToast.prototype, "message", 2);
+  property51({ type: String })
+], RelUpload.prototype, "accept", 2);
 __decorateClass([
-  property48({ type: String })
-], RelToast.prototype, "type", 2);
+  property51({ type: String, attribute: "max-size" })
+], RelUpload.prototype, "maxSize", 2);
 __decorateClass([
-  property48({ type: String })
-], RelToast.prototype, "actionLabel", 2);
+  property51({ type: Boolean })
+], RelUpload.prototype, "multiple", 2);
 __decorateClass([
-  property48({ type: Number })
-], RelToast.prototype, "duration", 2);
+  property51({ type: Boolean, reflect: true })
+], RelUpload.prototype, "disabled", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
-], RelToast.prototype, "show", 2);
+  property51({ type: String })
+], RelUpload.prototype, "hint", 2);
 __decorateClass([
-  state21()
-], RelToast.prototype, "visible", 2);
-RelToast = __decorateClass([
-  customElement54("rel-toast")
-], RelToast);
+  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-tooltip/rel-tooltip.ts
-import { LitElement as LitElement55, html as html55, css as css52 } from "lit";
-import { customElement as customElement55, property as property49 } from "lit/decorators.js";
-var RelTooltip = class extends LitElement55 {
+// 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.text = "";
-    this.position = "above";
-    this.showTail = false;
-    this.type = "single-line";
-    // Stable id so aria-describedby can reference the bubble across renders.
-    this.uniqueId = Math.random().toString(36).slice(2);
+    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();
+    };
   }
-  firstUpdated() {
-    this.linkTrigger();
+  connectedCallback() {
+    super.connectedCallback();
+    queueMicrotask(() => this.resolveTarget());
+    this.root.addEventListener("rel-state", this.onState);
   }
-  linkTrigger() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) return;
-    const trigger = slot.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+  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() {
-    return html55`
-      <slot @slotchange="${this.linkTrigger}"></slot>
-      <div
-        part="panel" class="tooltip-bubble ${this.position}"
-        id="tooltip-${this.uniqueId}"
-        role="tooltip"
-      >
-        ${this.text}
-        ${this.showTail ? html55`<span part="indicator" class="tooltip-tail"></span>` : ""}
+    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>
     `;
   }
 };
-RelTooltip.styles = css52`
+RelUploadActions.styles = css55`
     :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-medium-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);
-      position: absolute;
-      background-color: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-      padding: var(--rel-spacing-xs, 8px)
-        var(--rel-spacing-sm, 12px);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      overflow: visible;
-    }
-
-    /* Figma Type=Multi Line: wrap inside a bounded bubble */
-    :host([type="multi-line"]) .tooltip-bubble {
-      white-space: normal;
-      max-width: 220px;
-      width: max-content;
-    }
-
-    :host(:hover) .tooltip-bubble,
-    :host(:focus-within) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.left {
-      right: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .tooltip-bubble.right {
-      left: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      width: 0;
-      height: 0;
       display: block;
+      font-family: var(--rel-fonts-font-family);
     }
 
-    .tooltip-bubble.above .tooltip-tail,
-    .tooltip-bubble.below .tooltip-tail {
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-bottom: none;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-top: none;
-    }
-
-    .tooltip-bubble.left .tooltip-tail,
-    .tooltip-bubble.right .tooltip-tail {
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-    }
-
-    .tooltip-bubble.left .tooltip-tail {
-      right: -6px;
-      border-left: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-right: none;
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--rel-spacing-xs, 8px);
     }
 
-    .tooltip-bubble.right .tooltip-tail {
-      left: -6px;
-      border-right: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-left: none;
+    rel-button rel-icon {
+      margin-inline-end: var(--rel-spacing-xs, 8px);
     }
   `;
 __decorateClass([
-  property49({ type: String })
-], RelTooltip.prototype, "text", 2);
+  property52({ type: String })
+], RelUploadActions.prototype, "for", 2);
 __decorateClass([
-  property49({ type: String })
-], RelTooltip.prototype, "position", 2);
+  property52({ type: String, attribute: "cancel-label" })
+], RelUploadActions.prototype, "cancelLabel", 2);
 __decorateClass([
-  property49({ type: Boolean, attribute: "show-tail" })
-], RelTooltip.prototype, "showTail", 2);
+  property52({ type: Boolean, attribute: "no-cancel" })
+], RelUploadActions.prototype, "noCancel", 2);
 __decorateClass([
-  property49({ type: String, reflect: true })
-], RelTooltip.prototype, "type", 2);
-RelTooltip = __decorateClass([
-  customElement55("rel-tooltip")
-], RelTooltip);
+  state24()
+], RelUploadActions.prototype, "snapshot", 2);
+RelUploadActions = __decorateClass([
+  customElement58("rel-upload-actions")
+], RelUploadActions);
 
 // src/index.ts
 export * from "@reliability-design/icons";
@@ -16991,6 +19305,7 @@ export {
   RelTab,
   RelTabItem,
   RelTextfield,
+  RelTimePicker,
   RelToast,
   RelTooltip,
   RelTopbar,
@@ -17001,6 +19316,8 @@ export {
   RelTopbarItem,
   RelTopbarMobilePanel,
   RelTopbarProfile,
-  RelTopbarUtilities
+  RelTopbarUtilities,
+  RelUpload,
+  RelUploadActions
 };
 //# sourceMappingURL=index.mjs.map