@helixui/library 2.1.2 → 3.0.0

package/dist/shared/{hx-time-picker-CZvmihHD.js → hx-time-picker-tPUfgElQ.js}

@@ -1,15 +1,242 @@
-import { css as C, LitElement as E, nothing as _, html as x } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as h, state as p, query as w, customElement as L } from "lit/decorators.js";
-import { classMap as $ } from "lit/directives/class-map.js";
+import { css as C, nothing as _, html as x } from "lit";
+import { property as h, state as p, query as w, customElement as E } from "lit/decorators.js";
+import { F as L } from "./FormMixin-B8PXk5RQ.js";
+import { classMap as I } from "lit/directives/class-map.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
-import { live as V } from "lit/directives/live.js";
-import { repeat as D } from "lit/directives/repeat.js";
-const M = C`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif))}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-time-picker-label-color, var(--hx-color-neutral-700));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__combobox{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-time-picker-bg, var(--hx-color-neutral-0));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:visible}.field__combobox:focus-within{border-color:var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__combobox{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500))}.field--error .field__combobox:focus-within{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-error-color, var(--hx-color-error-500)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-time-picker-color, var(--hx-color-neutral-800));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:text}.field__input::placeholder{color:var(--hx-color-neutral-400)}.field__input:disabled{cursor:not-allowed}.field__toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0 var(--hx-space-3, .75rem);color:var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));cursor:pointer;height:100%;min-height:var(--hx-size-10, 2.5rem);flex-shrink:0;border-inline-start:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300))}.field__toggle:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));outline-offset:-2px;border-radius:0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem))}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));inset-inline-start:0;inset-inline-end:0;z-index:var(--hx-z-index-dropdown, 1000);background-color:var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-time-picker-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent) );max-height:var(--hx-time-picker-listbox-max-height, 16rem);overflow-y:auto;padding:var(--hx-space-1, .25rem) 0;list-style:none;margin:0}@media(prefers-reduced-motion:no-preference){.field__listbox{animation:hx-listbox-enter var(--hx-transition-fast, .15s ease) forwards}}@keyframes hx-listbox-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.field__option{display:flex;align-items:center;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);font-family:inherit;color:var(--hx-time-picker-option-color, var(--hx-color-neutral-800));cursor:pointer;transition:background-color var(--hx-transition-fast, .15s ease);line-height:var(--hx-line-height-normal, 1.5)}.field__option:hover,.field__option--active{background-color:var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));color:var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700))}.field__option--selected{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));color:var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));font-weight:var(--hx-font-weight-medium, 500)}.field__option--selected.field__option--active{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100))}@media(prefers-reduced-motion:reduce){.field__combobox,.field__option{transition:none}}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500)}.field__error{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c))}`;
-var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? A(t, o) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (r = (i ? n(t, o, r) : n(r)) || r);
-  return i && r && O(t, o, r), r;
+import { live as D } from "lit/directives/live.js";
+import { repeat as M } from "lit/directives/repeat.js";
+import { H } from "./helix-element-BNEYeiys.js";
+import { c as O } from "./id-counter-DuX8vsui.js";
+const V = C`
+  :host {
+    display: block;
+    position: relative;
+  }
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: visible;
+  }
+  .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__combobox {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+  }
+  .field--error .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: text;
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+  .field__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    cursor: pointer;
+    height: 100%;
+    min-height: var(--hx-size-10, 2.5rem);
+    flex-shrink: 0;
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+  }
+  .field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+    border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-time-picker-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)
+    );
+    max-height: var(--hx-time-picker-listbox-max-height, 16rem);
+    overflow-y: auto;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    list-style: none;
+    margin: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .field__listbox {
+      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+  @keyframes hx-listbox-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .field__option {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    font-family: inherit;
+    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__option:hover,
+  .field__option--active {
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+  }
+  .field__option--selected {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--selected.field__option--active {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__combobox,
+    .field__option {
+      transition: none;
+    }
+  }
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__help-text {
+    color: var(--hx-color-neutral-500);
+  }
+  .field__error {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+  @media (forced-colors: active) {
+    .field__combobox {
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+    .field__combobox:focus-within {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+      box-shadow: none;
+    }
+    .field--error .field__combobox {
+      border-color: LinkText;
+    }
+    .field--error .field__combobox:focus-within {
+      outline-color: Highlight;
+      box-shadow: none;
+    }
+    .field__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+    }
+    .field__listbox {
+      border-color: ButtonText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .field__option:hover,
+    .field__option--active {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }
+`;
+var A = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? T(t, o) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (i ? n(t, o, r) : n(r)) || r);
+  return i && r && A(t, o, r), r;
 };
 function d(e) {
   const t = /^(\d{1,2}):(\d{2})$/.exec(e.trim());
@@ -23,13 +250,13 @@ function m(e, t) {
 function k(e) {
   const t = d(e);
   if (!t) return e;
-  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", l = o % 12 === 0 ? 12 : o % 12;
-  return `${String(l).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
+  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", a = o % 12 === 0 ? 12 : o % 12;
+  return `${String(a).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
 }
 function P(e, t, o, i) {
-  const r = d(e) ?? { hours: 0, minutes: 0 }, l = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = l.hours * 60 + l.minutes, u = Math.max(1, Math.round(o)), f = [];
+  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, u = Math.max(1, Math.round(o)), f = [];
   for (let v = n; v <= c; v += u) {
-    const I = Math.floor(v / 60) % 24, S = v % 60, g = m(I, S);
+    const $ = Math.floor(v / 60) % 24, S = v % 60, g = m($, S);
     f.push({
       value: g,
       label: i === "12h" ? k(g) : g
@@ -41,8 +268,8 @@ function y(e, t, o) {
   if (!e) return "";
   const i = d(e);
   if (!i) return "";
-  const r = i.hours * 60 + i.minutes, l = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = l.hours * 60 + l.minutes, u = n.hours * 60 + n.minutes;
-  return r < c ? m(l.hours, l.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
+  const r = i.hours * 60 + i.minutes, a = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = a.hours * 60 + a.minutes, u = n.hours * 60 + n.minutes;
+  return r < c ? m(a.hours, a.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
 }
 function q(e) {
   const t = e.trim().toUpperCase(), o = d(t);
@@ -50,17 +277,18 @@ function q(e) {
   const i = /^(\d{1,2})(?::(\d{2}))?\s*(AM|PM)$/.exec(t) ?? /^(\d{1,2})(\d{2})\s*(AM|PM)$/.exec(t);
   if (i) {
     let r = parseInt(i[1] ?? "0", 10);
-    const l = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
-    return r < 1 || r > 12 || l < 0 || l > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, l));
+    const a = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
+    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, a));
   }
   return null;
 }
-let s = class extends E {
+const z = O("hx-time-picker");
+let s = class extends L(H) {
   constructor() {
-    super(), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = `hx-time-picker-${++s._instanceCount}`, this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
+    super(...arguments), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = z(), this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
       var t;
       this.isConnected && !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
-    }, this._internals = this.attachInternals();
+    };
   }
   /**
    * Lazily generates and caches the list of time slots based on current min, max, step, and format.
@@ -81,29 +309,20 @@ let s = class extends E {
     (e.has("value") || e.has("format")) && (this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "");
   }
   updated(e) {
-    super.updated(e), e.has("value") && (this._internals.setFormValue(this.value || null), this._updateValidity()), e.has("_open") && this._open && this._scrollActiveOptionIntoView();
+    var t;
+    if (super.updated(e), e.has("value") && this._internals.setFormValue(this.value || null), e.has("_open") && this._open && this._scrollActiveOptionIntoView(), e.has("error") && this.error) {
+      const o = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
+      if (o) {
+        const i = this.error;
+        requestAnimationFrame(() => {
+          o.textContent = "", requestAnimationFrame(() => {
+            o.textContent = i;
+          });
+        });
+      }
+    }
   }
   // ─── Form Integration ───
-  /** Returns the associated form element, if any. */
-  get form() {
-    return this._internals.form;
-  }
-  /** Returns the validation message. */
-  get validationMessage() {
-    return this._internals.validationMessage;
-  }
-  /** Returns the ValidityState object. */
-  get validity() {
-    return this._internals.validity;
-  }
-  /** Checks whether the field satisfies its constraints. */
-  checkValidity() {
-    return this._internals.checkValidity();
-  }
-  /** Reports validity and shows the browser's constraint validation UI. */
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
   /** @internal */
   _updateValidity() {
     this.required && !this.value ? this._internals.setValidity(
@@ -113,17 +332,17 @@ let s = class extends E {
     ) : this._internals.setValidity({});
   }
   /** @internal */
-  formResetCallback() {
-    this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox();
+  _onFormReset() {
+    this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox(), this._resetInteractionState();
   }
   /** @internal */
-  formStateRestoreCallback(e, t = "restore") {
+  _onFormStateRestore(e, t) {
     if (typeof e != "string") return;
     const o = y(e, this.min, this.max);
     this.value = o;
   }
   /** @internal */
-  formDisabledCallback(e) {
+  _onFormDisabled(e) {
     this.disabled = e;
   }
   // ─── Listbox helpers ───
@@ -135,7 +354,7 @@ let s = class extends E {
   }
   /** @internal */
   _closeListbox() {
-    this._open && (this._open = !1, this._activeIndex = -1);
+    this._open && (this._open = !1, this._activeIndex = -1, this._handleInteractionBlur());
   }
   /** @internal */
   _scrollActiveOptionIntoView() {
@@ -146,7 +365,7 @@ let s = class extends E {
   /** @internal */
   _selectSlot(e) {
     const t = y(e.value, this.min, this.max);
-    this.value = t, this._closeListbox(), this._dispatchChange(t);
+    this.value = t, this._handleInteractionInput(), this._closeListbox(), this._dispatchChange(t);
   }
   // ─── Slot tracking ───
   /** @internal */
@@ -198,13 +417,13 @@ let s = class extends E {
   _handleInputChange(e) {
     const o = e.target.value.trim();
     if (!o) {
-      this.value = "", this._internals.setFormValue(null), this._updateValidity(), this._dispatchChange("");
+      this.value = "", this._handleInteractionInput(), this._handleInteractionBlur(), this._internals.setFormValue(null), this._dispatchChange("");
       return;
     }
     const i = q(o);
     if (i) {
       const r = y(i, this.min, this.max);
-      this.value = r, this._dispatchChange(r);
+      this.value = r, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(r);
     } else
       this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "";
   }
@@ -264,9 +483,9 @@ let s = class extends E {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", l = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
+    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", a = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
     return x`
-      <div part="field" class=${$(o)}>
+      <div part="field" class=${I(o)}>
         <!-- Label -->
         <slot name="label" @slotchange=${this._handleLabelSlotChange}>
           ${this.label ? x`
@@ -290,7 +509,7 @@ let s = class extends E {
             role="combobox"
             aria-expanded=${this._open ? "true" : "false"}
             aria-haspopup="listbox"
-            .value=${V(this._inputDisplayValue)}
+            .value=${D(this._inputDisplayValue)}
             placeholder=${r}
             ?required=${this.required}
             ?disabled=${this.disabled}
@@ -299,7 +518,7 @@ let s = class extends E {
             aria-controls=${this._listboxId}
             aria-activedescendant=${b(i)}
             aria-invalid=${e ? "true" : _}
-            aria-describedby=${b(l)}
+            aria-describedby=${b(a)}
             aria-required=${this.required ? "true" : _}
             aria-labelledby=${b(
       this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
@@ -349,7 +568,7 @@ let s = class extends E {
             aria-label=${this.label || "Time options"}
             ?hidden=${!this._open}
           >
-            ${this._open ? D(
+            ${this._open ? M(
       t,
       (n) => n.value,
       (n, c) => {
@@ -357,7 +576,7 @@ let s = class extends E {
         return x`
                       <li
                         part="option"
-                        class=${$({
+                        class=${I({
           field__option: !0,
           "field__option--selected": u,
           "field__option--active": f
@@ -394,70 +613,69 @@ let s = class extends E {
     `;
   }
 };
-s.styles = [M];
+s.styles = [V];
 s.formAssociated = !0;
-s._instanceCount = 0;
-a([
-  h({ type: String })
+l([
+  h({ type: String, reflect: !0 })
 ], s.prototype, "name", 2);
-a([
+l([
   h({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "min", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "max", 2);
-a([
+l([
   h({ type: Number })
 ], s.prototype, "step", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "label", 2);
-a([
+l([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "required", 2);
-a([
+l([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "error", 2);
-a([
+l([
   h({ type: String, reflect: !0 })
 ], s.prototype, "format", 2);
-a([
+l([
   p()
 ], s.prototype, "_open", 2);
-a([
+l([
   p()
 ], s.prototype, "_activeIndex", 2);
-a([
+l([
   p()
 ], s.prototype, "_inputDisplayValue", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasLabelSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasErrorSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasHelpSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_slottedLabelId", 2);
-a([
+l([
   w(".field__input")
 ], s.prototype, "_inputEl", 2);
-a([
+l([
   w(".field__listbox")
 ], s.prototype, "_listboxEl", 2);
-s = a([
-  L("hx-time-picker")
+s = l([
+  E("hx-time-picker")
 ], s);
 export {
   s as H
 };
-//# sourceMappingURL=hx-time-picker-CZvmihHD.js.map
+//# sourceMappingURL=hx-time-picker-tPUfgElQ.js.map