@helixui/library 0.1.0

package/dist/shared/hx-time-picker-CA58UCqx.js

@@ -0,0 +1,651 @@
+import { css as C, LitElement as E, nothing as u, html as x } from "lit";
+import { property as h, state as _, query as $, customElement as L } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { live as V } from "lit/directives/live.js";
+import { repeat as D } from "lit/directives/repeat.js";
+import { t as M } from "./lit-Dpo7RLp4.js";
+const O = 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));
+  }
+
+  /* ─── Label ─── */
+
+  .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);
+  }
+
+  /* ─── Combobox Wrapper ─── */
+
+  .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));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      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
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .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));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      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
+      );
+  }
+
+  /* ─── Native Input ─── */
+
+  .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;
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .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))
+      var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
+  }
+
+  /* ─── Listbox Dropdown ─── */
+
+  .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) {
+      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+
+  @keyframes hx-listbox-enter {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--hx-space-1, 0.25rem)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ─── Option Items ─── */
+
+  .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));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+`;
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? P(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());
+  if (!t) return null;
+  const o = parseInt(t[1] ?? "0", 10), i = parseInt(t[2] ?? "0", 10);
+  return o < 0 || o > 23 || i < 0 || i > 59 ? null : { hours: o, minutes: i };
+}
+function m(e, t) {
+  return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
+}
+function k(e) {
+  const t = d(e);
+  if (!t) return e;
+  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 z(e, t, o, i) {
+  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, p = Math.max(1, Math.round(o)), v = [];
+  for (let b = n; b <= c; b += p) {
+    const I = Math.floor(b / 60) % 24, S = b % 60, g = m(I, S);
+    v.push({
+      value: g,
+      label: i === "12h" ? k(g) : g
+    });
+  }
+  return v;
+}
+function y(e, t, o) {
+  if (!e) return "";
+  const i = d(e);
+  if (!i) return "";
+  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, p = n.hours * 60 + n.minutes;
+  return r < c ? m(a.hours, a.minutes) : r > p ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
+}
+function T(e) {
+  const t = e.trim().toUpperCase(), o = d(t);
+  if (o) return m(o.hours, o.minutes);
+  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 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 {
+  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._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) => {
+      var t;
+      !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
+    }, this._internals = this.attachInternals();
+  }
+  get _slots() {
+    const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
+    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = z(this.min, this.max, this.step, this.format)), this._cachedSlots;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  willUpdate(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();
+  }
+  // ─── 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();
+  }
+  _updateValidity() {
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0 },
+      this.error || "Please select a time.",
+      this._inputEl ?? void 0
+    ) : this._internals.setValidity({});
+  }
+  formResetCallback() {
+    this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox();
+  }
+  formStateRestoreCallback(e, t = "restore") {
+    if (typeof e != "string") return;
+    const o = y(e, this.min, this.max);
+    this.value = o;
+  }
+  // ─── Listbox helpers ───
+  _openListbox() {
+    if (this._open) return;
+    const e = this._slots.findIndex((t) => t.value === this.value);
+    this._activeIndex = e >= 0 ? e : 0, this._open = !0;
+  }
+  _closeListbox() {
+    this._open && (this._open = !1, this._activeIndex = -1);
+  }
+  _scrollActiveOptionIntoView() {
+    if (!this._listboxEl) return;
+    const e = this._listboxEl.querySelector(".field__option--active");
+    e == null || e.scrollIntoView({ block: "nearest" });
+  }
+  _selectSlot(e) {
+    const t = y(e.value, this.min, this.max);
+    this.value = t, this._closeListbox(), this._dispatchChange(t);
+  }
+  // ─── Slot tracking ───
+  _handleLabelSlotChange(e) {
+    const o = e.target.assignedNodes({ flatten: !0 });
+    if (this._hasLabelSlot = o.length > 0, this._hasLabelSlot) {
+      const i = o.find((r) => r.nodeType === Node.ELEMENT_NODE);
+      i && (i.id || (i.id = `${this._id}-slotted-label`), this._slottedLabelId = i.id);
+    } else
+      this._slottedLabelId = "";
+  }
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Event Dispatch ───
+  _dispatchChange(e) {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    );
+  }
+  // ─── Input Handlers ───
+  _handleInputClick() {
+    this.disabled || this._openListbox();
+  }
+  _handleToggleClick(e) {
+    var t;
+    e.stopPropagation(), !this.disabled && (this._open ? this._closeListbox() : (this._openListbox(), (t = this._inputEl) == null || t.focus()));
+  }
+  _handleInputInput(e) {
+    const t = e.target;
+    this._inputDisplayValue = t.value, this._open || this._openListbox();
+  }
+  _handleInputChange(e) {
+    const o = e.target.value.trim();
+    if (!o) {
+      this.value = "", this._internals.setFormValue(null), this._updateValidity(), this._dispatchChange("");
+      return;
+    }
+    const i = T(o);
+    if (i) {
+      const r = y(i, this.min, this.max);
+      this.value = r, this._dispatchChange(r);
+    } else
+      this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "";
+  }
+  _handleInputKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this._open ? (this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1), this._scrollActiveOptionIntoView()) : this._openListbox();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this._open && (this._activeIndex = Math.max(this._activeIndex - 1, 0), this._scrollActiveOptionIntoView());
+        break;
+      case "Enter":
+        if (this._open && this._activeIndex >= 0) {
+          e.preventDefault();
+          const t = this._slots[this._activeIndex];
+          t && this._selectSlot(t);
+        }
+        break;
+      case "Escape":
+        e.preventDefault(), this._closeListbox();
+        break;
+      case "Home":
+        this._open && (e.preventDefault(), this._activeIndex = 0, this._scrollActiveOptionIntoView());
+        break;
+      case "End":
+        this._open && (e.preventDefault(), this._activeIndex = this._slots.length - 1, this._scrollActiveOptionIntoView());
+        break;
+      case "Tab":
+        this._closeListbox();
+        break;
+    }
+  }
+  _handleOptionPointerDown(e) {
+    e.preventDefault();
+  }
+  _handleOptionClick(e) {
+    var t;
+    this._selectSlot(e), (t = this._inputEl) == null || t.focus();
+  }
+  _handleOptionMouseEnter(e) {
+    this._activeIndex = e;
+  }
+  // ─── Public API ───
+  /** Moves focus to the time input element. */
+  focus(e) {
+    var t;
+    (t = this._inputEl) == null || t.focus(e);
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = this._slots, o = {
+      field: !0,
+      "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", a = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
+    return x`
+      <div part="field" class=${w(o)}>
+        <!-- Label -->
+        <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+          ${this.label ? x`
+                <label part="label" class="field__label" for=${this._id}>
+                  ${this.label}
+                  ${this.required ? x`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                </label>
+              ` : u}
+        </slot>
+
+        <!-- Combobox wrapper; role="combobox" lives on the input per ARIA 1.2 -->
+        <div class="field__combobox">
+          <input
+            part="input"
+            class="field__input"
+            id=${this._id}
+            type="text"
+            inputmode="text"
+            autocomplete="off"
+            spellcheck="false"
+            role="combobox"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-haspopup="listbox"
+            .value=${V(this._inputDisplayValue)}
+            placeholder=${r}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            name=${f(this.name || void 0)}
+            aria-autocomplete="list"
+            aria-controls=${f(this._open ? this._listboxId : void 0)}
+            aria-activedescendant=${f(i)}
+            aria-invalid=${e ? "true" : u}
+            aria-describedby=${f(a)}
+            aria-required=${this.required ? "true" : u}
+            aria-labelledby=${f(
+      this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
+    )}
+            @click=${this._handleInputClick}
+            @input=${this._handleInputInput}
+            @change=${this._handleInputChange}
+            @keydown=${this._handleInputKeyDown}
+          />
+
+          <!-- Toggle button -->
+          <button
+            part="toggle"
+            type="button"
+            class="field__toggle"
+            tabindex="-1"
+            aria-label=${this._open ? "Close time picker" : "Open time picker"}
+            ?disabled=${this.disabled}
+            @click=${this._handleToggleClick}
+          >
+            <!-- Clock icon -->
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.25" />
+              <path
+                d="M8 4.5V8L10.5 10"
+                stroke="currentColor"
+                stroke-width="1.25"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Dropdown listbox -->
+          ${this._open ? x`
+                <ul
+                  part="listbox"
+                  class="field__listbox"
+                  id=${this._listboxId}
+                  role="listbox"
+                  aria-label=${this.label || "Time options"}
+                >
+                  ${D(
+      t,
+      (n) => n.value,
+      (n, c) => {
+        const p = n.value === this.value, v = c === this._activeIndex;
+        return x`
+                        <li
+                          part="option"
+                          class=${w({
+          field__option: !0,
+          "field__option--selected": p,
+          "field__option--active": v
+        })}
+                          id="${this._listboxId}-option-${c}"
+                          role="option"
+                          aria-selected=${p ? "true" : "false"}
+                          @pointerdown=${this._handleOptionPointerDown}
+                          @click=${() => this._handleOptionClick(n)}
+                          @mouseenter=${() => this._handleOptionMouseEnter(c)}
+                        >
+                          ${n.label}
+                        </li>
+                      `;
+      }
+    )}
+                </ul>
+              ` : u}
+        </div>
+
+        <!-- Error slot / property -->
+        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
+          ${this.error ? x`
+                <div part="error" class="field__error" id=${this._errorId} role="alert">
+                  ${this.error}
+                </div>
+              ` : u}
+        </slot>
+
+        <!-- Help slot -->
+        <div part="help-text" class="field__help-text" id=${this._helpId}>
+          <slot name="help"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [M, O];
+s.formAssociated = !0;
+s._instanceCount = 0;
+l([
+  h({ type: String })
+], s.prototype, "name", 2);
+l([
+  h({ type: String, reflect: !0 })
+], s.prototype, "value", 2);
+l([
+  h({ type: String })
+], s.prototype, "min", 2);
+l([
+  h({ type: String })
+], s.prototype, "max", 2);
+l([
+  h({ type: Number })
+], s.prototype, "step", 2);
+l([
+  h({ type: String })
+], s.prototype, "label", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+l([
+  h({ type: String })
+], s.prototype, "error", 2);
+l([
+  h({ type: String, reflect: !0 })
+], s.prototype, "format", 2);
+l([
+  _()
+], s.prototype, "_open", 2);
+l([
+  _()
+], s.prototype, "_activeIndex", 2);
+l([
+  _()
+], s.prototype, "_inputDisplayValue", 2);
+l([
+  _()
+], s.prototype, "_hasLabelSlot", 2);
+l([
+  _()
+], s.prototype, "_hasErrorSlot", 2);
+l([
+  _()
+], s.prototype, "_slottedLabelId", 2);
+l([
+  $(".field__input")
+], s.prototype, "_inputEl", 2);
+l([
+  $(".field__listbox")
+], s.prototype, "_listboxEl", 2);
+s = l([
+  L("hx-time-picker")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-time-picker-CA58UCqx.js.map