@reliability-design/web 1.4.2 → 1.4.3

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);
@@ -1509,6 +1571,11 @@ var RelAutocomplete = class extends LitElement4 {
       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();
@@ -1613,17 +1680,17 @@ var RelAutocomplete = class extends LitElement4 {
       this.syncPanel();
     }
   }
-  async runSearch(query10) {
+  async runSearch(query11) {
     const seq = ++this.searchSeq;
     try {
-      const results = await this.searchFn(query10);
+      const results = await this.searchFn(query11);
       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: query11, error: err }, bubbles: true, composed: true })
       );
     } finally {
       if (seq === this.searchSeq) {
@@ -1769,7 +1836,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}"
@@ -1791,7 +1861,7 @@ var RelAutocomplete = class extends LitElement4 {
         part="panel list"
         class="ac-panel"
         role="listbox"
-        aria-label="${this.label || "Suggestions"}"
+        aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >
@@ -1970,9 +2040,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 +2763,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;
@@ -8230,6 +8309,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 +8376,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 +8402,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 +8513,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 +8584,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);
@@ -13060,6 +13189,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();
@@ -13118,6 +13248,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());
     }
@@ -13366,7 +13503,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 +13521,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 +13538,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 ? nothing9 : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing9}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -13436,7 +13576,7 @@ var RelSelect = class extends LitElement46 {
         part="panel list" class="select-listbox"
         role="listbox"
         aria-multiselectable="${this.multiple}"
-        aria-label="${this.label || "Options"}"
+        aria-label="${accessibleName || "Options"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >
@@ -13565,6 +13705,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. */
 
@@ -13958,8 +14114,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,88 +16720,1030 @@ 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 nothing10 } 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);
+    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();
       }
-    } else {
-      this.visible = false;
-      if (this._dismissTimer) {
-        clearTimeout(this._dismissTimer);
-        this._dismissTimer = null;
+    };
+    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>` : nothing10}</label
+            >` : nothing10}
 
-        ${this.actionLabel ? html54`<button
-              part="action" class="toast-action"
-              @click="${this.handleActionClick}"
-            >
-              ${this.actionLabel}
-            </button>` : ""}
+        ${this.name ? html54`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : nothing10}
 
-        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
-      </div>
-    `;
-  }
-};
-RelToast.styles = css51`
-    :host {
-      color: var(--rel-text-default);
-      position: fixed;
-      bottom: 24px;
+        <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 ?? nothing10}
+          aria-labelledby=${this.label ? "time-picker-label" : nothing10}
+        >
+          <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>
+                ` : nothing10}
+            <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>
+                ` : nothing10}
+          </div>
+
+          <div part="footer" class="time-footer">
+            <rel-button
+              variant="secondary"
+              size="small"
+              border="corner-radius"
+              @click=${() => this.selectNow()}
+            >
+              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>
+
+        ${belowText ? html54`<div
+              part="helper"
+              class="time-picker-support ${isError ? "error" : ""}"
+              id=${describedById}
+            >
+              ${belowText}
+            </div>` : nothing10}
+      </div>
+    `;
+  }
+};
+RelTimePicker.styles = css51`
+    :host {
+      color: var(--rel-text-default);
+      display: block;
+      font-family: var(--rel-fonts-font-family);
+      position: relative;
+    }
+
+    /* 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);
+    }
+
+    .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);
+      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);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+    }
+
+    .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;
@@ -16753,31 +17857,31 @@ RelToast.styles = css51`
     }
   `;
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelToast.prototype, "message", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelToast.prototype, "type", 2);
 __decorateClass([
-  property48({ type: String })
+  property49({ type: String })
 ], RelToast.prototype, "actionLabel", 2);
 __decorateClass([
-  property48({ type: Number })
+  property49({ type: Number })
 ], RelToast.prototype, "duration", 2);
 __decorateClass([
-  property48({ type: Boolean, reflect: true })
+  property49({ type: Boolean, reflect: true })
 ], RelToast.prototype, "show", 2);
 __decorateClass([
-  state21()
+  state22()
 ], RelToast.prototype, "visible", 2);
 RelToast = __decorateClass([
-  customElement54("rel-toast")
+  customElement55("rel-toast")
 ], RelToast);
 
 // 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 {
+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 = "";
@@ -16799,7 +17903,7 @@ var RelTooltip = class extends LitElement55 {
     }
   }
   render() {
-    return html55`
+    return html56`
       <slot @slotchange="${this.linkTrigger}"></slot>
       <div
         part="panel" class="tooltip-bubble ${this.position}"
@@ -16807,12 +17911,12 @@ var RelTooltip = class extends LitElement55 {
         role="tooltip"
       >
         ${this.text}
-        ${this.showTail ? html55`<span part="indicator" class="tooltip-tail"></span>` : ""}
+        ${this.showTail ? html56`<span part="indicator" class="tooltip-tail"></span>` : ""}
       </div>
     `;
   }
 };
-RelTooltip.styles = css52`
+RelTooltip.styles = css53`
     :host {
       color: var(--rel-text-default);
       display: inline-block;
@@ -16926,19 +18030,19 @@ RelTooltip.styles = css52`
     }
   `;
 __decorateClass([
-  property49({ type: String })
+  property50({ type: String })
 ], RelTooltip.prototype, "text", 2);
 __decorateClass([
-  property49({ type: String })
+  property50({ type: String })
 ], RelTooltip.prototype, "position", 2);
 __decorateClass([
-  property49({ type: Boolean, attribute: "show-tail" })
+  property50({ type: Boolean, attribute: "show-tail" })
 ], RelTooltip.prototype, "showTail", 2);
 __decorateClass([
-  property49({ type: String, reflect: true })
+  property50({ type: String, reflect: true })
 ], RelTooltip.prototype, "type", 2);
 RelTooltip = __decorateClass([
-  customElement55("rel-tooltip")
+  customElement56("rel-tooltip")
 ], RelTooltip);
 
 // src/index.ts
@@ -16991,6 +18095,7 @@ export {
   RelTab,
   RelTabItem,
   RelTextfield,
+  RelTimePicker,
   RelToast,
   RelTooltip,
   RelTopbar,