@editora/ui-core 0.1.8 → 0.1.10

package/dist/date-time-picker.esm.js

@@ -0,0 +1,1062 @@
+import { E as Y } from "./ElementBase-909688f3.mjs";
+import { r as W } from "./calendar-2c11b824.mjs";
+import { r as J, i as v, s as G, b as Q, f as X, t as tt, n as E, d as et, p as F, m as N, a as it, k as L, h as j, j as Z, o as y, l as nt, c as st } from "./date-time-utils-bdceb7af.mjs";
+import "./scroll-lock-9de6d328.mjs";
+let rt = 0;
+const at = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h.5A2.5 2.5 0 0 1 18 6.5v9A2.5 2.5 0 0 1 15.5 18h-11A2.5 2.5 0 0 1 2 15.5v-9A2.5 2.5 0 0 1 4.5 4H5V3a1 1 0 0 1 1-1Zm10 7H4v6.5c0 .276.224.5.5.5h11a.5.5 0 0 0 .5-.5V9ZM4.5 6a.5.5 0 0 0-.5.5V7h12v-.5a.5.5 0 0 0-.5-.5h-11Z" fill="currentColor"/>
+  </svg>
+`, ot = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.12l3.71-3.9a.75.75 0 1 1 1.08 1.04l-4.25 4.47a.75.75 0 0 1-1.08 0L5.2 8.27a.75.75 0 0 1 .02-1.06Z" fill="currentColor"/>
+  </svg>
+`, lt = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06Z" fill="currentColor"/>
+  </svg>
+`, K = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm.75 2.75a.75.75 0 0 0-1.5 0v3.88c0 .2.08.4.22.54l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28V6.25Z" fill="currentColor"/>
+  </svg>
+`, dt = `
+  :host {
+    --ui-dtp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-dtp-surface: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, var(--ui-color-surface-alt, #f8fafc))
+    );
+    --ui-dtp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dtp-accent: var(--ui-color-primary, #2563eb);
+    --ui-dtp-success: var(--ui-color-success, #16a34a);
+    --ui-dtp-error: var(--ui-color-danger, #dc2626);
+    --ui-dtp-radius: 12px;
+    --ui-dtp-panel-radius: 14px;
+    --ui-dtp-z: 1600;
+    --ui-dtp-shadow: none;
+    --ui-dtp-gap: 12px;
+    --ui-dtp-hit: 42px;
+    --ui-dtp-duration: 160ms;
+    --ui-dtp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: min(100%, var(--ui-width, 360px));
+    min-inline-size: min(240px, 100%);
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text);
+  }
+
+  :host([shape="square"]) {
+    --ui-dtp-radius: 6px;
+    --ui-dtp-panel-radius: 8px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-dtp-radius: 16px;
+    --ui-dtp-panel-radius: 18px;
+  }
+
+  :host([size="sm"]) {
+    --ui-dtp-hit: 38px;
+  }
+
+  :host([size="lg"]) {
+    --ui-dtp-hit: 48px;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .label {
+    font: 600 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .label[hidden] { display: none; }
+
+  .required {
+    color: var(--ui-dtp-error);
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .field {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
+    align-items: center;
+    gap: 8px;
+    min-block-size: var(--ui-dtp-hit);
+    border: 1px solid var(--ui-dtp-border);
+    border-radius: var(--ui-dtp-radius);
+    background: var(--ui-dtp-surface);
+    padding: 0 10px;
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
+    transition: border-color var(--ui-dtp-duration) var(--ui-dtp-ease), box-shadow var(--ui-dtp-duration) var(--ui-dtp-ease), transform var(--ui-dtp-duration) var(--ui-dtp-ease);
+  }
+
+  .field[data-open="true"],
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--ui-dtp-accent) 70%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-accent) 22%, transparent), 0 10px 22px rgba(2, 6, 23, 0.12);
+  }
+
+  .field[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-dtp-error) 72%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-error) 20%, transparent);
+  }
+
+  .field[data-state="success"]:not([data-invalid="true"]) {
+    border-color: color-mix(in srgb, var(--ui-dtp-success) 56%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-success) 18%, transparent);
+  }
+
+  .input {
+    border: 0;
+    background: transparent;
+    color: var(--ui-dp-text);
+    outline: none;
+    min-inline-size: 0;
+    inline-size: 100%;
+    padding: 8px 0;
+    font: 500 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+
+  .input::placeholder {
+    color: color-mix(in srgb, var(--ui-dp-text) 44%, transparent);
+  }
+
+  .icon {
+    display: inline-grid;
+    place-items: center;
+    color: color-mix(in srgb, var(--ui-dp-text) 68%, transparent);
+    inline-size: 20px;
+    block-size: 20px;
+  }
+
+  .icon-svg {
+    inline-size: 16px;
+    block-size: 16px;
+    pointer-events: none;
+  }
+
+  .btn {
+    border: 1px solid transparent;
+    background: color-mix(in srgb, var(--ui-dtp-bg) 84%, transparent);
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    color: color-mix(in srgb, var(--ui-dp-text) 72%, transparent);
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    transition: background-color var(--ui-dtp-duration) var(--ui-dtp-ease), color var(--ui-dtp-duration) var(--ui-dtp-ease), border-color var(--ui-dtp-duration) var(--ui-dtp-ease), transform var(--ui-dtp-duration) var(--ui-dtp-ease);
+  }
+
+  .btn:hover {
+    background: color-mix(in srgb, var(--ui-dtp-accent) 10%, transparent);
+    border-color: color-mix(in srgb, var(--ui-dtp-accent) 30%, transparent);
+    color: var(--ui-dp-text);
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dtp-accent) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .btn:active {
+    transform: translateY(1px);
+  }
+
+  .btn[hidden] { display: none; }
+
+  .hint { color: var(--ui-dp-muted); font-size: 12px; line-height: 1.4; }
+  .error { color: var(--ui-dtp-error); font-size: 12px; line-height: 1.4; }
+  .hint[hidden], .error[hidden] { display: none; }
+
+  .inline-panel {
+    border: 1px solid var(--ui-dtp-border);
+    border-radius: var(--ui-dtp-panel-radius);
+    background: var(--ui-dtp-surface);
+    box-shadow: var(--ui-dtp-shadow);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    justify-self: start;
+    padding: 12px;
+    display: grid;
+    gap: var(--ui-dtp-gap);
+  }
+
+  .inline-panel .content {
+    gap: 10px;
+    grid-template-columns: minmax(0, 1fr) minmax(176px, 214px);
+  }
+
+  .inline-panel .time-panel {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .inline-panel .time-grid {
+    gap: 6px;
+  }
+
+  .inline-panel .footer {
+    gap: 6px;
+  }
+
+  .inline-panel[data-bare="true"] {
+    border: 0;
+    border-radius: 0;
+    background: var(--ui-dtp-bare-bg, var(--ui-dtp-bg));
+    box-shadow: none;
+    padding: 0;
+  }
+
+  .inline-panel[hidden] {
+    display: none !important;
+  }
+
+  .panel-title {
+    margin: 0;
+    font: 650 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text);
+  }
+
+  :host([disabled]) .field {
+    opacity: 0.62;
+    pointer-events: none;
+  }
+
+  :host([readonly]) .field {
+    background: color-mix(in srgb, var(--ui-dtp-bg) 90%, var(--ui-color-surface-alt, #f8fafc));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-dtp-bg: #0f172a;
+    --ui-dtp-border: #334155;
+    --ui-dp-text: #e2e8f0;
+    --ui-dp-muted: #94a3b8;
+    --ui-dtp-accent: #93c5fd;
+    --ui-dtp-surface: linear-gradient(180deg, color-mix(in srgb, #0f172a 84%, #1e293b), #0f172a);
+    --ui-dtp-shadow: 0 18px 36px rgba(2, 6, 23, 0.48);
+  }
+
+  @media (max-width: 640px) {
+    :host {
+      inline-size: min(100%, var(--ui-width, 100%));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field,
+    .btn,
+    .action {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .field,
+    .inline-panel {
+      border-color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .btn,
+    .action {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .btn:focus-visible,
+    .action:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+`, ut = `
+  .overlay { position: fixed; z-index: var(--ui-dtp-z, 1600); pointer-events: none; }
+  .panel {
+    pointer-events: auto;
+    min-inline-size: min(560px, calc(100vw - 20px));
+    max-inline-size: min(640px, calc(100vw - 20px));
+    border: 1px solid var(--ui-dtp-border, #cbd5e1);
+    border-radius: var(--ui-dtp-panel-radius, 14px);
+    background: var(--ui-dtp-surface, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    box-shadow: var(--ui-dtp-shadow);
+    padding: 12px;
+    display: grid;
+    gap: 12px;
+    animation: ui-dtp-pop var(--ui-dtp-duration, 160ms) var(--ui-dtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1));
+  }
+  .panel[data-bare="true"], .sheet[data-bare="true"] {
+    border: 0;
+    border-radius: 0;
+    background: var(--ui-dtp-bare-bg, var(--ui-dtp-bg));
+    box-shadow: none;
+    padding: 0;
+  }
+  .sheet-wrap { position: fixed; inset: 0; display: grid; align-items: end; z-index: var(--ui-dtp-z, 1600); }
+  .sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); }
+  .sheet {
+    position: relative;
+    pointer-events: auto;
+    background: var(--ui-dtp-surface, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    border-radius: 16px 16px 0 0;
+    border: 1px solid color-mix(in srgb, var(--ui-dtp-border, #cbd5e1) 84%, transparent);
+    box-shadow: 0 -12px 30px rgba(2, 6, 23, 0.2);
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+    max-block-size: min(82vh, 640px);
+    overflow: auto;
+  }
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+  }
+  .head-title {
+    margin: 0;
+    font: 700 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text, #0f172a);
+  }
+  .head-meta {
+    margin: 0;
+    font: 500 12px/1.3 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-muted, #64748b);
+  }
+  .content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
+    gap: 12px;
+    align-items: start;
+  }
+  .time-panel {
+    border: 1px solid color-mix(in srgb, var(--ui-dtp-border, #cbd5e1) 86%, transparent);
+    border-radius: 12px;
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+    background: color-mix(in srgb, var(--ui-dtp-bg, #fff) 95%, transparent);
+  }
+  .icon {
+    display: inline-grid;
+    place-items: center;
+    color: color-mix(in srgb, var(--ui-dp-text, #0f172a) 70%, transparent);
+  }
+  .icon-svg {
+    inline-size: 16px;
+    block-size: 16px;
+    pointer-events: none;
+  }
+  .time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .time-grid[data-meridiem="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .time-grid label { font-size: 11px; color: var(--ui-dp-muted, #64748b); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
+  .time-grid select {
+    min-block-size: 34px;
+    border: 1px solid color-mix(in srgb, var(--ui-dtp-border, #cbd5e1) 84%, transparent);
+    border-radius: 8px;
+    padding: 0 8px;
+    background: color-mix(in srgb, var(--ui-dtp-bg, #fff) 95%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+    font: 600 13px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+  .footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
+  .footer[hidden] { display: none !important; }
+  .action {
+    border: 1px solid color-mix(in srgb, var(--ui-dtp-border, #cbd5e1) 85%, transparent);
+    background: color-mix(in srgb, var(--ui-dtp-bg, #fff) 95%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+    min-block-size: 32px;
+    border-radius: 8px;
+    padding: 0 12px;
+    font: 650 12px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    cursor: pointer;
+    transition: border-color var(--ui-dtp-duration, 160ms) var(--ui-dtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1)), background-color var(--ui-dtp-duration, 160ms) var(--ui-dtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1)), transform var(--ui-dtp-duration, 160ms) var(--ui-dtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1));
+  }
+  .action:hover {
+    border-color: color-mix(in srgb, var(--ui-dtp-accent, #2563eb) 40%, var(--ui-dtp-border, #cbd5e1));
+    background: color-mix(in srgb, var(--ui-dtp-accent, #2563eb) 10%, transparent);
+  }
+  .action:active { transform: translateY(1px); }
+  .action:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dtp-accent, #2563eb) 66%, transparent);
+    outline-offset: 1px;
+  }
+  .action[data-tone="primary"] { border-color: color-mix(in srgb, var(--ui-dtp-accent, #2563eb) 60%, transparent); background: color-mix(in srgb, var(--ui-dtp-accent, #2563eb) 20%, transparent); }
+  .action:disabled { opacity: .58; cursor: not-allowed; }
+
+  @media (max-width: 760px) {
+    .content {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel, .sheet, .action { animation: none !important; transition: none !important; }
+  }
+
+  @media (forced-colors: active) {
+    .panel,
+    .sheet,
+    .time-panel {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .sheet-backdrop {
+      background: color-mix(in srgb, CanvasText 36%, transparent);
+    }
+
+    .time-grid label,
+    .head-meta {
+      color: CanvasText;
+    }
+
+    .time-grid select,
+    .action {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .time-grid select:focus-visible,
+    .action:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+
+  @keyframes ui-dtp-pop {
+    from { opacity: 0; transform: translateY(6px) scale(0.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+`;
+function p(h) {
+  return String(h).padStart(2, "0");
+}
+function c(h) {
+  return h.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function U(h) {
+  const t = Z(h);
+  return t ? { date: t.date, time: t.time } : { date: null, time: null };
+}
+function x(h) {
+  return j(h.date, h.time);
+}
+class ct extends Y {
+  constructor() {
+    super(...arguments), this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = null, this._releaseScrollLock = null, this._isInitialized = !1, this._hasView = !1, this._restoreFocusEl = null, this._overlayKey = null, this._uid = `ui-dtp-${++rt}`, this._inputId = `${this._uid}-input`, this._labelId = `${this._uid}-label`, this._hintId = `${this._uid}-hint`, this._errorId = `${this._uid}-error`, this._panelId = `${this._uid}-panel`, this._schedulePosition = J(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootInputBound = (t) => this._onRootInput(t), this._onRootChangeBound = (t) => this._onRootChange(t), this._onRootBlurBound = (t) => this._onRootBlur(t), this._onRootKeyDownBound = (t) => this._onRootKeyDown(t), this._onOverlayClickBound = (t) => this._onOverlayClick(t), this._onOverlayChangeBound = (t) => this._onOverlayChange(t), this._onOverlayCalendarBound = (t) => this._onOverlayCalendar(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._schedulePosition.run(), this._onWindowScrollBound = () => this._schedulePosition.run();
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "default-open",
+      "value",
+      "default-value",
+      "min",
+      "max",
+      "locale",
+      "translations",
+      "week-start",
+      "size",
+      "shape",
+      "bare",
+      "variant",
+      "state",
+      "step",
+      "format",
+      "disabled",
+      "readonly",
+      "required",
+      "name",
+      "close-on-select",
+      "clearable",
+      "allow-input",
+      "mode",
+      "label",
+      "hint",
+      "error",
+      "show-footer"
+    ];
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.root.addEventListener("click", this._onRootClickBound), this.root.addEventListener("input", this._onRootInputBound), this.root.addEventListener("change", this._onRootChangeBound), this.root.addEventListener("focusout", this._onRootBlurBound), this.root.addEventListener("keydown", this._onRootKeyDownBound), !this._isInitialized) {
+      const t = U(this.getAttribute("value") || this.getAttribute("default-value"));
+      this._value = t, this._pending = { ...t }, this._draft = this._formatDisplay(t), this._open = this.hasAttribute("open") || v(this.getAttribute("default-open")), this._isInitialized = !0;
+    }
+    this._open && !this._isInlineMode() && this._ensureOverlay();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClickBound), this.root.removeEventListener("input", this._onRootInputBound), this.root.removeEventListener("change", this._onRootChangeBound), this.root.removeEventListener("focusout", this._onRootBlurBound), this.root.removeEventListener("keydown", this._onRootKeyDownBound), this._destroyOverlay(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i && (t === "value" && !this._syncing && (this._value = U(i), this._pending = { ...this._value }, this._draft = this._formatDisplay(this._value), this._inlineError = ""), t === "open" && !this._syncing && (this._open = this.hasAttribute("open"), this._syncOverlay("attribute")), t === "mode" && this._syncOverlay("attribute"), t === "disabled" && this.hasAttribute("disabled") && this._setOpen(!1, "outside"), t === "state" && this._state() === "loading" && this._setOpen(!1, "outside"), !!this.isConnected)) {
+      if (!this._hasView) {
+        this.requestRender();
+        return;
+      }
+      this._updateHostState();
+    }
+  }
+  _isInlineMode() {
+    return (this.getAttribute("mode") || "popover") === "inline";
+  }
+  _isMobileSheet() {
+    return G(this.getAttribute("mode"));
+  }
+  _isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  _state() {
+    const t = (this.getAttribute("state") || "").trim().toLowerCase();
+    return t === "loading" || t === "error" || t === "success" ? t : "idle";
+  }
+  _isInteractionBlocked() {
+    return this._isDisabled() || this._state() === "loading";
+  }
+  _isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  _allowInput() {
+    return v(this.getAttribute("allow-input"), !0);
+  }
+  _clearable() {
+    return v(this.getAttribute("clearable"), !0);
+  }
+  _closeOnSelect() {
+    return v(this.getAttribute("close-on-select"), !1);
+  }
+  _shouldAutoCommit() {
+    return this._closeOnSelect() || !this._showFooter();
+  }
+  _showFooter() {
+    return v(this.getAttribute("show-footer"), !0);
+  }
+  _isBare() {
+    return v(this.getAttribute("bare"), !1);
+  }
+  _locale() {
+    return Q(this.getAttribute("locale"));
+  }
+  _translations() {
+    return W(
+      this.getAttribute("locale"),
+      this.getAttribute("translations")
+    );
+  }
+  _minuteStep() {
+    const t = Number(this.getAttribute("step") || 5);
+    return !Number.isFinite(t) || t < 1 ? 5 : Math.min(60, Math.trunc(t));
+  }
+  _formatDisplay(t) {
+    if (!t.date || !t.time)
+      return "";
+    const e = X(t.date, this._locale(), "locale", null);
+    return this._is12h() ? `${e} ${tt(t.time, this._locale())}` : `${e} ${t.time}`;
+  }
+  _is12h() {
+    return (this.getAttribute("format") || "24h") === "12h";
+  }
+  _parseDateInput(t) {
+    const e = E(t);
+    if (e)
+      return e;
+    const i = et(t, this._locale());
+    if (i)
+      return i;
+    const n = new Date(t);
+    if (!Number.isFinite(n.getTime()))
+      return null;
+    const a = n.getFullYear(), o = String(n.getMonth() + 1).padStart(2, "0"), s = String(n.getDate()).padStart(2, "0");
+    return `${a}-${o}-${s}`;
+  }
+  _syncOpenAttribute(t) {
+    this._syncing = !0;
+    try {
+      t ? this.hasAttribute("open") || this.setAttribute("open", "") : this.hasAttribute("open") && this.removeAttribute("open");
+    } finally {
+      this._syncing = !1;
+    }
+  }
+  _syncValueAttribute(t) {
+    const e = x(t);
+    this._syncing = !0;
+    try {
+      e ? this.getAttribute("value") !== e && this.setAttribute("value", e) : this.hasAttribute("value") && this.removeAttribute("value");
+    } finally {
+      this._syncing = !1;
+    }
+  }
+  _emitInput(t) {
+    const e = {
+      mode: "datetime",
+      value: x(this._pending),
+      date: this._pending.date,
+      time: this._pending.time,
+      source: t
+    };
+    this.dispatchEvent(new CustomEvent("input", { detail: e, bubbles: !0, composed: !0 }));
+  }
+  _emitChange(t) {
+    const e = {
+      mode: "datetime",
+      value: x(this._value),
+      date: this._value.date,
+      time: this._value.time,
+      source: t
+    };
+    this.dispatchEvent(new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 }));
+  }
+  _emitInvalid(t, e) {
+    this.dispatchEvent(new CustomEvent("invalid", { detail: { raw: t, reason: e }, bubbles: !0, composed: !0 }));
+  }
+  _minDate() {
+    return F(this.getAttribute("min"));
+  }
+  _maxDate() {
+    return F(this.getAttribute("max"));
+  }
+  _minDateTime() {
+    const t = N(this.getAttribute("min"));
+    return t ? `${t.date}T${t.time}` : null;
+  }
+  _maxDateTime() {
+    const t = N(this.getAttribute("max"));
+    return t ? `${t.date}T${t.time}` : null;
+  }
+  _clampState(t) {
+    if (!t.date)
+      return { date: null, time: t.time };
+    const e = this._minDate(), i = this._maxDate(), n = it(t.date, e, i), a = t.time || "00:00";
+    let o = this._minDateTime(), s = this._maxDateTime();
+    if (o && s && L(o, s) > 0) {
+      const b = o;
+      o = s, s = b;
+    }
+    let r = j(n, a) || `${n}T00:00`;
+    o && L(r, o) < 0 && (r = o), s && L(r, s) > 0 && (r = s);
+    const d = Z(r);
+    return d ? { date: d.date, time: d.time } : { date: n, time: a };
+  }
+  _commit(t, e) {
+    if (this._isInteractionBlocked() || this._isReadonly())
+      return;
+    if (!t.date && !t.time) {
+      this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
+      return;
+    }
+    const i = y(t.time || "", !0), n = this._clampState({
+      date: E(t.date),
+      time: i ? `${p(i.hours)}:${p(i.minutes)}` : null
+    });
+    if (!n.date || !n.time) {
+      this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(JSON.stringify(t), "parse"), this._updateHostState();
+      return;
+    }
+    this._value = n, this._pending = { ...n }, this._draft = this._formatDisplay(n), this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
+  }
+  _setOpen(t, e) {
+    t && this._isInteractionBlocked() || this._open !== t && (this._open = t, this._syncOpenAttribute(t), this._syncOverlay(e), this._updateHostState(), this.dispatchEvent(new CustomEvent(t ? "open" : "close", { bubbles: !0, composed: !0 })));
+  }
+  _syncOverlay(t) {
+    if (this._isInlineMode()) {
+      this._destroyOverlay();
+      return;
+    }
+    if (this._open) {
+      this._ensureOverlay(), this._syncOverlayState();
+      return;
+    }
+    this._destroyOverlay();
+    const e = this._restoreFocusEl;
+    if (this._restoreFocusEl = null, e && e.isConnected)
+      try {
+        e.focus();
+      } catch {
+      }
+  }
+  _ensureOverlay() {
+    if (this._overlay || typeof document > "u")
+      return;
+    const t = document.createElement("div");
+    t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.zIndex = "1100", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), t.addEventListener("change", this._onOverlayCalendarBound), t.addEventListener("select", this._onOverlayCalendarBound), document.body.appendChild(t), this._overlay = t, document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, !0), this._isMobileSheet() && (this._releaseScrollLock = nt());
+  }
+  _destroyOverlay() {
+    this._overlay && (this._schedulePosition.cancel(), document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound), window.removeEventListener("resize", this._onWindowResizeBound), window.removeEventListener("scroll", this._onWindowScrollBound, !0), this._overlay.removeEventListener("click", this._onOverlayClickBound), this._overlay.removeEventListener("change", this._onOverlayChangeBound), this._overlay.removeEventListener("change", this._onOverlayCalendarBound), this._overlay.removeEventListener("select", this._onOverlayCalendarBound), this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayKey = null, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
+  }
+  _positionOverlay() {
+    if (!this._overlay || !this._open || this._isMobileSheet())
+      return;
+    const t = this.root.querySelector(".field"), e = this._overlay.querySelector(".panel");
+    if (!t || !e)
+      return;
+    const i = st(t.getBoundingClientRect(), e.getBoundingClientRect());
+    e.style.position = "absolute", e.style.top = `${Math.round(i.top)}px`, e.style.left = `${Math.round(i.left)}px`;
+  }
+  _timeOptions() {
+    const t = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (o, s) => {
+      const r = s + 1, d = t.hours % 12 || 12;
+      return `<option value="${r}" ${r === d ? "selected" : ""}>${p(r)}</option>`;
+    }).join("") : Array.from({ length: 24 }, (o, s) => `<option value="${s}" ${s === t.hours ? "selected" : ""}>${p(s)}</option>`).join(""), n = Array.from({ length: Math.ceil(60 / e) }, (o, s) => {
+      const r = Math.min(59, s * e);
+      return `<option value="${r}" ${r === t.minutes ? "selected" : ""}>${p(r)}</option>`;
+    }).join(""), a = t.hours >= 12 ? "pm" : "am";
+    return { hours: i, minutes: n, meridiem: a };
+  }
+  _renderSurfaceInner(t, e = !1) {
+    const i = this._translations(), n = this._timeOptions(), a = (this.getAttribute("label") || "").trim(), o = c(a), s = c(a || i.selectDate), r = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
+      <header class="head">
+        <div>
+          <p class="head-title" ${a ? "" : "hidden"}>${o}</p>
+          <p class="head-meta">${c(r || i.selectDate)}</p>
+        </div>
+      </header>
+      <div class="content">
+        <ui-calendar class="${e ? "dt-calendar-inline" : "dt-calendar"}" part="calendar"></ui-calendar>
+        <section class="time-panel" part="time">
+          <span class="icon" aria-hidden="true">${K}</span>
+          <div class="time-grid" data-meridiem="${this._is12h() ? "true" : "false"}">
+            <div><label>${c(i.hour)}</label><select data-segment="hours">${n.hours}</select></div>
+            <div><label>${c(i.minute)}</label><select data-segment="minutes">${n.minutes}</select></div>
+            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem"><option value="am" ${n.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${n.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
+          </div>
+        </section>
+      </div>
+      <footer class="footer" part="footer">
+        <button type="button" class="action" data-action="now">${c(i.now)}</button>
+        <button type="button" class="action" data-action="clear">${c(i.clear)}</button>
+        ${e ? "" : `<button type="button" class="action" data-action="cancel">${c(i.cancel)}</button>`}
+        <button type="button" class="action" data-action="apply" data-tone="primary">${c(i.apply)}</button>
+      </footer>
+    `;
+    return e ? d : `
+      <style>${ut}</style>
+      ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
+      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${s}" part="${t ? "sheet" : "popover"}">${d}</section>
+    `;
+  }
+  _syncCalendar(t) {
+    const e = (s, r) => {
+      if (r == null || r === "") {
+        t.hasAttribute(s) && t.removeAttribute(s);
+        return;
+      }
+      t.getAttribute(s) !== r && t.setAttribute(s, r);
+    }, i = (s, r) => {
+      r ? e(s, "") : e(s, null);
+    };
+    e("selection", "single"), e("value", this._pending.date), e("min", this.getAttribute("min")), e("max", this.getAttribute("max")), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
+    const a = this.getAttribute("size") || "sm", o = t.classList.contains("dt-calendar-inline");
+    e("size", a === "lg" ? "md" : "sm"), e("variant", this.getAttribute("variant")), i("readonly", this._isReadonly()), i("disabled", this._isInteractionBlocked()), i("bare", this._isBare()), e("tabindex", "-1"), a === "lg" ? (t.style.setProperty("--ui-calendar-day-height", "1.95em"), t.style.setProperty("--ui-calendar-day-padding-block", "0.2em"), t.style.setProperty("--ui-calendar-day-padding-inline", "0.26em"), t.style.setProperty("--ui-calendar-gap", "0.42em"), t.style.setProperty("--ui-calendar-day-font-size", "0.78em"), t.style.setProperty("--ui-calendar-weekday-font-size", "0.7em"), t.style.setProperty("--ui-calendar-title-font-size", "0.88em")) : (t.style.setProperty("--ui-calendar-day-height", "2.4em"), t.style.setProperty("--ui-calendar-day-padding-block", "0.14em"), t.style.setProperty("--ui-calendar-day-padding-inline", "0.22em"), t.style.setProperty("--ui-calendar-gap", "0.34em"), t.style.setProperty("--ui-calendar-day-font-size", "0.72em"), t.style.setProperty("--ui-calendar-weekday-font-size", "0.64em"), t.style.setProperty("--ui-calendar-title-font-size", "0.8em")), o ? (t.style.setProperty("--ui-calendar-frame-padding", "0.32em"), t.style.setProperty("--ui-calendar-week-gap", "0.18em"), t.style.setProperty("--ui-calendar-control-height", "1.72em"), t.style.setProperty("--ui-calendar-gap", "0.24em")) : (t.style.removeProperty("--ui-calendar-frame-padding"), t.style.removeProperty("--ui-calendar-week-gap"), t.style.removeProperty("--ui-calendar-control-height")), e("aria-label", this.getAttribute("label") || this._translations().selectDate);
+  }
+  _overlaySignature(t) {
+    return [
+      t ? "sheet" : "popover",
+      this._minuteStep(),
+      this._is12h() ? "12h" : "24h",
+      this.getAttribute("locale") || "",
+      this.getAttribute("translations") || ""
+    ].join(":");
+  }
+  _ensureOverlayContent(t) {
+    if (!this._overlay)
+      return;
+    const e = this._overlaySignature(t);
+    this._overlayKey === e && this._overlay.querySelector(".dt-calendar") || (this._overlayKey = e, this._overlay.innerHTML = t ? `<div class="sheet-wrap">${this._renderSurfaceInner(!0)}</div>` : `<div class="overlay">${this._renderSurfaceInner(!1)}</div>`);
+  }
+  _setClosestOptionValue(t, e) {
+    const i = Array.from(t.options).map((o) => Number(o.value)).filter((o) => Number.isFinite(o));
+    if (!i.length)
+      return;
+    let n = i[0], a = Math.abs(n - e);
+    for (let o = 1; o < i.length; o += 1) {
+      const s = i[o], r = Math.abs(s - e);
+      r < a && (n = s, a = r);
+    }
+    t.value = String(n);
+  }
+  _syncOverlayState() {
+    if (!this._overlay)
+      return;
+    const t = this._isMobileSheet();
+    this._ensureOverlayContent(t);
+    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), n = this._overlay.querySelector(".footer");
+    i && (i.dataset.bare = this._isBare() ? "true" : "false"), n && (n.hidden = !this._showFooter());
+    const a = this._overlay.querySelector(".head-title");
+    if (a) {
+      const l = (this.getAttribute("label") || "").trim();
+      a.textContent = l, a.hidden = !l;
+    }
+    const o = this._overlay.querySelector(".head-meta");
+    o && (o.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : e.selectDate);
+    const s = this._overlay.querySelector(".dt-calendar");
+    s && this._syncCalendar(s);
+    const r = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, d = this._overlay.querySelector('select[data-segment="hours"]'), b = this._overlay.querySelector('select[data-segment="minutes"]'), m = this._overlay.querySelector('select[data-segment="meridiem"]');
+    if (d) {
+      const l = this._is12h() ? r.hours % 12 || 12 : r.hours;
+      this._setClosestOptionValue(d, l), d.disabled = this._isInteractionBlocked() || this._isReadonly();
+    }
+    b && (this._setClosestOptionValue(b, r.minutes), b.disabled = this._isInteractionBlocked() || this._isReadonly()), m && (m.value = r.hours >= 12 ? "pm" : "am", m.disabled = this._isInteractionBlocked() || this._isReadonly());
+    const S = this._isInteractionBlocked() || this._isReadonly();
+    this._overlay.querySelectorAll(".action").forEach((l) => {
+      l.disabled = S;
+    }), t || this._schedulePosition.run();
+  }
+  _renderOverlay() {
+    this._syncOverlayState();
+  }
+  _applyTimeFromSurface(t) {
+    const e = t.querySelector('select[data-segment="hours"]'), i = t.querySelector('select[data-segment="minutes"]'), n = t.querySelector('select[data-segment="meridiem"]');
+    if (!e || !i)
+      return;
+    const a = Number(e.value), o = Number(i.value);
+    if (!Number.isFinite(a) || !Number.isFinite(o))
+      return;
+    let s = a;
+    if (this._is12h()) {
+      const r = (n == null ? void 0 : n.value) === "pm" ? "pm" : "am";
+      r === "pm" && s < 12 && (s += 12), r === "am" && s === 12 && (s = 0);
+    }
+    this._pending = this._clampState({
+      date: this._pending.date,
+      time: `${p(s)}:${p(o)}`
+    }), this._emitInput("time");
+  }
+  _onRootClick(t) {
+    var n;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    if (i && !(this._isInteractionBlocked() || this._isReadonly())) {
+      if (i === "toggle") {
+        this._restoreFocusEl = e, this._setOpen(!this._open, "toggle");
+        return;
+      }
+      if (i === "clear") {
+        this._isInlineMode() ? (this._pending = { date: null, time: null }, this._emitInput("clear"), this._updateHostState()) : this._commit({ date: null, time: null }, "clear");
+        return;
+      }
+      if (this._isInlineMode() && i === "now") {
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), s = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${s}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._updateHostState();
+        return;
+      }
+      if (this._isInlineMode() && i === "cancel") {
+        this._pending = { ...this._value }, this._updateHostState();
+        return;
+      }
+      this._isInlineMode() && i === "apply" && this._commit(this._pending, "apply");
+    }
+  }
+  _onRootChange(t) {
+    if (!this._isInlineMode())
+      return;
+    const e = t.target;
+    if (e) {
+      if (e.tagName.toLowerCase() === "ui-calendar") {
+        this._onOverlayCalendar(t);
+        return;
+      }
+      if (e instanceof HTMLSelectElement && e.closest(".inline-panel")) {
+        if (!e.matches("select[data-segment]") || this._isInteractionBlocked() || this._isReadonly())
+          return;
+        const i = this.root.querySelector(".inline-panel");
+        if (!i)
+          return;
+        if (this._applyTimeFromSurface(i), this._shouldAutoCommit() && this._pending.date && this._pending.time) {
+          this._commit(this._pending, "time");
+          return;
+        }
+        this._updateHostState();
+      }
+    }
+  }
+  _onRootInput(t) {
+    const e = t.target;
+    e instanceof HTMLInputElement && e.classList.contains("input") && this._allowInput() && (this._isInteractionBlocked() || (this._draft = e.value, this._inlineError = "", this._emitInput("typing")));
+  }
+  _onRootBlur(t) {
+    const e = t.target;
+    if (!(e instanceof HTMLInputElement) || !e.classList.contains("input") || !this._allowInput() || this._isInteractionBlocked())
+      return;
+    const i = this._draft.trim();
+    if (!i) {
+      this._commit({ date: null, time: null }, "blur");
+      return;
+    }
+    const n = /^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);
+    if (!n) {
+      this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
+      return;
+    }
+    const a = this._parseDateInput(n[1]), o = y(n[2], !0) ? n[2] : null;
+    if (!a || !o) {
+      this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
+      return;
+    }
+    this._commit({ date: a, time: o }, "blur");
+  }
+  _onRootKeyDown(t) {
+    const e = t;
+    if (!this._isInteractionBlocked()) {
+      if (e.key === "Escape" && this._open && !this._isInlineMode()) {
+        e.preventDefault(), this._setOpen(!1, "escape");
+        return;
+      }
+      e.key === "ArrowDown" && !this._open && !this._isInlineMode() && (e.preventDefault(), this._setOpen(!0, "keyboard"));
+    }
+  }
+  _onOverlayClick(t) {
+    var n;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    if (i && !this._isInteractionBlocked() && !(this._isReadonly() && i !== "toggle")) {
+      if (i === "backdrop") {
+        this._setOpen(!1, "outside");
+        return;
+      }
+      if (i === "cancel") {
+        this._pending = { ...this._value }, this._setOpen(!1, "cancel");
+        return;
+      }
+      if (i === "clear") {
+        this._pending = { date: null, time: null }, this._emitInput("clear"), this._renderOverlay();
+        return;
+      }
+      if (i === "now") {
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), s = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${s}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._renderOverlay();
+        return;
+      }
+      i === "apply" && (this._commit(this._pending, "apply"), this._setOpen(!1, "apply"));
+    }
+  }
+  _onOverlayChange(t) {
+    const e = t.target;
+    e instanceof HTMLSelectElement && e.matches("select[data-segment]") && (this._isInteractionBlocked() || this._overlay && (this._applyTimeFromSurface(this._overlay), this._shouldAutoCommit() && this._pending.date && this._pending.time && (this._commit(this._pending, "time"), this._setOpen(!1, "time"))));
+  }
+  _onOverlayCalendar(t) {
+    if (this._isInteractionBlocked() || this._isReadonly())
+      return;
+    const e = t.target;
+    if (!e || e.tagName.toLowerCase() !== "ui-calendar")
+      return;
+    const i = t.type, n = t.detail, a = E(i === "select" ? (n == null ? void 0 : n.value) || null : n == null ? void 0 : n.value);
+    if (a) {
+      if (this._pending = this._clampState({ date: a, time: this._pending.time || "09:00" }), this._emitInput("calendar"), this._shouldAutoCommit() && this._pending.time) {
+        this._commit(this._pending, "calendar"), this._setOpen(!1, "calendar");
+        return;
+      }
+      this._updateHostState();
+    }
+  }
+  _onDocumentPointerDown(t) {
+    if (!this._open || !this._overlay)
+      return;
+    const e = t.composedPath();
+    e.includes(this) || e.includes(this._overlay) || this._setOpen(!1, "outside");
+  }
+  _onDocumentKeyDown(t) {
+    this._open && t.key === "Escape" && (t.preventDefault(), this._setOpen(!1, "escape"));
+  }
+  _updateHostState() {
+    if (!this._hasView)
+      return;
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", n = this._inlineError || i, a = !!x(this._value), o = this.getAttribute("name") || "", s = this._allowInput() ? this._draft : this._formatDisplay(this._value), r = this._isInlineMode(), d = this._translations(), b = n ? "error" : this._state();
+    this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
+    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), $ = this.root.querySelector(".required"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), f = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), w = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), $ && ($.hidden = !this.hasAttribute("required")), l && (l.value !== s && (l.value = s), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", r ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", n ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), I && (I.hidden = !(this._clearable() && a), I.setAttribute("aria-label", d.clear), I.disabled = this._isInteractionBlocked()), f && (f.hidden = r, f.setAttribute("aria-label", d.toggleCalendar), f.setAttribute("aria-expanded", r ? "false" : String(this._open)), f.setAttribute("aria-controls", this._panelId), f.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), w && (w.id = this._errorId, w.hidden = !n, w.textContent = n), l) {
+      const _ = [];
+      e && g && !g.hidden && _.push(this._hintId), n && _.push(this._errorId), _.length ? l.setAttribute("aria-describedby", _.join(" ")) : l.removeAttribute("aria-describedby");
+    }
+    k && (k.disabled = !o, k.name = o, k.value = x(this._value) || "");
+    const C = this.root.querySelector(".field");
+    C && (C.dataset.open = this._open && !r ? "true" : "false", C.dataset.invalid = n ? "true" : "false", C.dataset.state = b);
+    const u = this.root.querySelector(".inline-panel");
+    if (u) {
+      u.hidden = !r, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);
+      const _ = u.querySelector(".panel-title");
+      _ && (_.textContent = t, _.hidden = !t);
+      const D = u.querySelector(".head-title");
+      D && (D.textContent = t, D.hidden = !t);
+      const q = u.querySelector(".head-meta");
+      q && (q.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : d.selectDate);
+      const T = u.querySelector('[data-action="now"]');
+      T && (T.textContent = d.now);
+      const M = u.querySelector('[data-action="clear"]');
+      M && (M.textContent = d.clear);
+      const P = u.querySelector('[data-action="apply"]');
+      P && (P.textContent = d.apply);
+      const H = u.querySelector(".footer");
+      H && (H.hidden = !this._showFooter());
+      const V = u.querySelector(".dt-calendar-inline");
+      V && this._syncCalendar(V);
+      const B = u.querySelector('select[data-segment="hours"]'), O = u.querySelector('select[data-segment="minutes"]'), z = u.querySelector('select[data-segment="meridiem"]'), A = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 };
+      if (B) {
+        const R = this._is12h() ? A.hours % 12 || 12 : A.hours;
+        this._setClosestOptionValue(B, R), B.disabled = this._isInteractionBlocked() || this._isReadonly();
+      }
+      O && (this._setClosestOptionValue(O, A.minutes), O.disabled = this._isInteractionBlocked() || this._isReadonly()), z && (z.value = A.hours >= 12 ? "pm" : "am", z.disabled = this._isInteractionBlocked() || this._isReadonly()), u.querySelectorAll(".action").forEach((R) => {
+        R.disabled = this._isInteractionBlocked() || this._isReadonly();
+      });
+    }
+    !r && this._open && this._syncOverlayState(), r && this._destroyOverlay();
+  }
+  render() {
+    if (!this._hasView) {
+      const t = this._translations();
+      this.setContent(`
+        <style>${dt}</style>
+        <div class="root">
+          <label class="label" part="label" id="${this._labelId}">
+            <span class="label-text"></span>
+            <span class="required">*</span>
+          </label>
+          <div class="field" part="field input">
+            <span class="icon" part="icon">${at}</span>
+            <input class="input" id="${this._inputId}" part="input" />
+            <span class="icon" part="icon">${K}</span>
+            <button type="button" class="btn" part="clear" data-action="clear">${lt}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${ot}</button>
+          </div>
+          <div class="hint" id="${this._hintId}" part="hint"></div>
+          <div class="error" id="${this._errorId}" part="error" role="alert"></div>
+          <input class="hidden-input" type="hidden" disabled />
+          <section class="inline-panel" id="${this._panelId}" part="popover" hidden>
+            <p class="panel-title">${c(t.selectDate)}</p>
+            ${this._renderSurfaceInner(!1, !0)}
+          </section>
+        </div>
+      `, { force: !0 }), this._hasView = !0;
+    }
+    this._updateHostState();
+  }
+  shouldRenderOnAttributeChange(t, e, i) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-date-time-picker") && customElements.define("ui-date-time-picker", ct);
+export {
+  ct as UIDateTimePicker
+};