@editora/ui-core 0.1.8 → 0.1.10

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

@@ -0,0 +1,1137 @@
+import { E as tt } from "./ElementBase-909688f3.mjs";
+import { r as et } from "./calendar-2c11b824.mjs";
+import { r as it, i as C, s as rt, b as st, h as A, j as D, f as nt, k as I, m as P, l as at, c as ot, o as k, e as lt, g as dt } from "./date-time-utils-bdceb7af.mjs";
+import "./scroll-lock-9de6d328.mjs";
+let ut = 0;
+const ct = `
+  <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>
+`, pt = `
+  <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>
+`, ht = `
+  <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>
+`, B = `
+  <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>
+`, mt = `
+  :host {
+    --ui-drtp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-drtp-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-drtp-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-drtp-accent: var(--ui-color-primary, #2563eb);
+    --ui-drtp-success: var(--ui-color-success, #16a34a);
+    --ui-drtp-error: var(--ui-color-danger, #dc2626);
+    --ui-drtp-radius: 12px;
+    --ui-drtp-panel-radius: 14px;
+    --ui-drtp-z: 1600;
+    --ui-drtp-shadow: none;
+    --ui-drtp-hit: 42px;
+    --ui-drtp-duration: 160ms;
+    --ui-drtp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: min(100%, var(--ui-width, 420px));
+    min-inline-size: min(260px, 100%);
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text);
+  }
+
+  :host([shape="square"]) {
+    --ui-drtp-radius: 6px;
+    --ui-drtp-panel-radius: 8px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-drtp-radius: 16px;
+    --ui-drtp-panel-radius: 18px;
+  }
+
+  :host([size="sm"]) {
+    --ui-drtp-hit: 38px;
+  }
+
+  :host([size="lg"]) {
+    --ui-drtp-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-drtp-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-drtp-hit);
+    border: 1px solid var(--ui-drtp-border);
+    border-radius: var(--ui-drtp-radius);
+    background: var(--ui-drtp-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-drtp-duration) var(--ui-drtp-ease), box-shadow var(--ui-drtp-duration) var(--ui-drtp-ease), transform var(--ui-drtp-duration) var(--ui-drtp-ease);
+  }
+
+  .field[data-open="true"],
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--ui-drtp-accent) 70%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-drtp-accent) 22%, transparent), 0 10px 22px rgba(2, 6, 23, 0.12);
+  }
+
+  .field[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-drtp-error) 72%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-drtp-error) 20%, transparent);
+  }
+
+  .field[data-state="success"]:not([data-invalid="true"]) {
+    border-color: color-mix(in srgb, var(--ui-drtp-success) 56%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-drtp-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-drtp-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-drtp-duration) var(--ui-drtp-ease), color var(--ui-drtp-duration) var(--ui-drtp-ease), border-color var(--ui-drtp-duration) var(--ui-drtp-ease), transform var(--ui-drtp-duration) var(--ui-drtp-ease);
+  }
+  .btn:hover {
+    background: color-mix(in srgb, var(--ui-drtp-accent) 10%, transparent);
+    border-color: color-mix(in srgb, var(--ui-drtp-accent) 30%, transparent);
+    color: var(--ui-dp-text);
+  }
+  .btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-drtp-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-drtp-error); font-size: 12px; line-height: 1.4; }
+  .hint[hidden], .error[hidden] { display: none; }
+
+  .inline-panel {
+    border: 1px solid var(--ui-drtp-border);
+    border-radius: var(--ui-drtp-panel-radius);
+    background: var(--ui-drtp-surface);
+    box-shadow: var(--ui-drtp-shadow);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    justify-self: start;
+    padding: 12px;
+    display: grid;
+    gap: 12px;
+  }
+
+  .inline-panel .content {
+    gap: 8px;
+    grid-template-columns: minmax(0, 1fr) 248px;
+  }
+
+  .inline-panel .time-groups {
+    gap: 8px;
+  }
+
+  .inline-panel .time-card {
+    padding: 8px;
+    gap: 6px;
+  }
+
+  .inline-panel .time-table {
+    gap: 4px;
+  }
+
+  .inline-panel .time-row + .time-row {
+    padding-top: 6px;
+  }
+
+  .inline-panel .footer,
+  .inline-panel .presets {
+    gap: 6px;
+  }
+
+  .inline-panel[data-bare="true"] {
+    border: 0;
+    border-radius: 0;
+    background: var(--ui-drtp-bare-bg, var(--ui-drtp-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-drtp-bg) 90%, var(--ui-color-surface-alt, #f8fafc));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-drtp-bg: #0f172a;
+    --ui-drtp-border: #334155;
+    --ui-dp-text: #e2e8f0;
+    --ui-dp-muted: #94a3b8;
+    --ui-drtp-accent: #93c5fd;
+    --ui-drtp-surface: linear-gradient(180deg, color-mix(in srgb, #0f172a 84%, #1e293b), #0f172a);
+    --ui-drtp-shadow: 0 18px 36px rgba(2, 6, 23, 0.48);
+  }
+
+  @media (forced-colors: active) {
+    .field,
+    .inline-panel {
+      border-color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .btn,
+    .preset,
+    .action {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .btn:focus-visible,
+    .action:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+`, bt = `
+  .overlay { position: fixed; z-index: var(--ui-drtp-z, 1600); pointer-events: none; }
+  .panel {
+    pointer-events: auto;
+    min-inline-size: min(680px, calc(100vw - 20px));
+    max-inline-size: min(760px, calc(100vw - 20px));
+    border: 1px solid var(--ui-drtp-border, #cbd5e1);
+    border-radius: var(--ui-drtp-panel-radius, 14px);
+    background: var(--ui-drtp-surface, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    box-shadow: var(--ui-drtp-shadow);
+    padding: 12px;
+    display: grid;
+    gap: 12px;
+    animation: ui-drtp-pop var(--ui-drtp-duration, 160ms) var(--ui-drtp-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-drtp-bare-bg, var(--ui-drtp-bg));
+    box-shadow: none;
+    padding: 0;
+  }
+  .sheet-wrap { position: fixed; inset: 0; display: grid; align-items: end; z-index: var(--ui-drtp-z, 1600); }
+  .sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); }
+  .sheet {
+    position: relative;
+    pointer-events: auto;
+    background: var(--ui-drtp-surface, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    border-radius: 16px 16px 0 0;
+    border: 1px solid color-mix(in srgb, var(--ui-drtp-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, 680px);
+    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);
+  }
+  .presets {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .presets[hidden] { display: none !important; }
+  .preset {
+    border: 1px dashed color-mix(in srgb, var(--ui-drtp-border, #cbd5e1) 86%, transparent);
+    border-radius: 999px;
+    padding: 0 10px;
+    min-block-size: 28px;
+    font: 600 11px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-muted, #64748b);
+    background: color-mix(in srgb, var(--ui-drtp-bg, #fff) 96%, transparent);
+    cursor: pointer;
+  }
+  .preset:hover {
+    border-color: color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 44%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+  }
+  .content { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; align-items: start; }
+  .time-groups { display: grid; gap: 10px; align-content: start; }
+  .time-card {
+    border: 1px solid color-mix(in srgb, var(--ui-drtp-border, #cbd5e1) 85%, transparent);
+    border-radius: 12px;
+    padding: 10px;
+    display: grid;
+    gap: 8px;
+    background: color-mix(in srgb, var(--ui-drtp-bg, #fff) 95%, transparent);
+  }
+  .time-title {
+    margin: 0;
+    font: 700 12px/1.25 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-dp-text, #0f172a);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .time-table {
+    display: grid;
+    gap: 6px;
+  }
+  .time-table-head {
+    display: grid;
+    grid-template-columns: minmax(100px, 1fr) repeat(2, minmax(74px, 1fr));
+    gap: 8px;
+    align-items: center;
+  }
+  .time-col-label {
+    font-size: 10px;
+    color: var(--ui-dp-muted, #64748b);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    text-align: center;
+  }
+  .time-row {
+    display: grid;
+    grid-template-columns: minmax(100px, 1fr) repeat(2, minmax(74px, 1fr));
+    gap: 8px;
+    align-items: center;
+  }
+  .time-row + .time-row {
+    border-top: 1px dashed color-mix(in srgb, var(--ui-drtp-border, #cbd5e1) 70%, transparent);
+    padding-top: 8px;
+  }
+  .time-row-label {
+    margin: 0;
+    font: 600 12px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: color-mix(in srgb, var(--ui-dp-text, #0f172a) 86%, transparent);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .time-row select {
+    min-block-size: 34px;
+    border: 1px solid color-mix(in srgb, var(--ui-drtp-border, #cbd5e1) 84%, transparent);
+    border-radius: 8px;
+    padding: 0 8px;
+    background: color-mix(in srgb, var(--ui-drtp-bg, #fff) 95%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+    font: 600 13px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+  .time-row select:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 66%, transparent);
+    outline-offset: 1px;
+  }
+  .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-drtp-border, #cbd5e1) 85%, transparent);
+    background: color-mix(in srgb, var(--ui-drtp-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-drtp-duration, 160ms) var(--ui-drtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1)), background-color var(--ui-drtp-duration, 160ms) var(--ui-drtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1)), transform var(--ui-drtp-duration, 160ms) var(--ui-drtp-ease, cubic-bezier(0.2, 0.9, 0.24, 1));
+  }
+  .action:hover {
+    border-color: color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 40%, var(--ui-drtp-border, #cbd5e1));
+    background: color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 10%, transparent);
+  }
+  .action:active { transform: translateY(1px); }
+  .action:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 66%, transparent);
+    outline-offset: 1px;
+  }
+  .action[data-tone="primary"] { border-color: color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 60%, transparent); background: color-mix(in srgb, var(--ui-drtp-accent, #2563eb) 20%, transparent); }
+  .action:disabled { opacity: .58; cursor: not-allowed; }
+
+  .icon-inline {
+    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;
+  }
+
+  @media (max-width: 900px) {
+    .content { grid-template-columns: 1fr; }
+  }
+
+  @media (max-width: 560px) {
+    .time-table-head {
+      display: none;
+    }
+    .time-row {
+      grid-template-columns: 1fr 1fr;
+    }
+    .time-row-label {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel, .sheet, .action, .preset { animation: none !important; transition: none !important; }
+  }
+
+  @media (forced-colors: active) {
+    .panel,
+    .sheet,
+    .time-card {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .sheet-backdrop {
+      background: color-mix(in srgb, CanvasText 36%, transparent);
+    }
+
+    .head-meta,
+    .time-col-label,
+    .time-row-label {
+      color: CanvasText;
+    }
+
+    .time-row select,
+    .preset,
+    .action {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .time-row select:focus-visible,
+    .action:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+
+  @keyframes ui-drtp-pop {
+    from { opacity: 0; transform: translateY(6px) scale(0.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+`;
+function Q(h) {
+  if (!h)
+    return { start: null, end: null };
+  try {
+    const t = JSON.parse(h), e = typeof (t == null ? void 0 : t.start) == "string" ? t.start : null, i = typeof (t == null ? void 0 : t.end) == "string" ? t.end : null;
+    return { start: e, end: i };
+  } catch {
+    return { start: null, end: null };
+  }
+}
+function X(h) {
+  return !h.start && !h.end ? null : JSON.stringify({
+    ...h.start ? { start: h.start } : {},
+    ...h.end ? { end: h.end } : {}
+  });
+}
+function S(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 w(h) {
+  var n, s;
+  const t = /* @__PURE__ */ new Date(), e = `${S(t.getHours())}:${S(t.getMinutes())}`, i = `${S((t.getHours() + 1) % 24)}:${S(t.getMinutes())}`, r = D(h.start || null), o = D(h.end || null);
+  return {
+    startDate: (r == null ? void 0 : r.date) || null,
+    endDate: (o == null ? void 0 : o.date) || null,
+    startTime: ((n = r == null ? void 0 : r.time) == null ? void 0 : n.slice(0, 5)) || e,
+    endTime: ((s = o == null ? void 0 : o.time) == null ? void 0 : s.slice(0, 5)) || i
+  };
+}
+class gt extends tt {
+  constructor() {
+    super(...arguments), this._value = { start: null, end: null }, this._pending = w({ start: null, end: null }), this._display = "", 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-drtp-${++ut}`, 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 = it(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootChangeBound = (t) => this._onRootChange(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",
+      "auto-normalize",
+      "allow-partial",
+      "disabled",
+      "readonly",
+      "required",
+      "name",
+      "close-on-select",
+      "clearable",
+      "mode",
+      "label",
+      "hint",
+      "error",
+      "show-footer"
+    ];
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.root.addEventListener("click", this._onRootClickBound), this.root.addEventListener("change", this._onRootChangeBound), this.root.addEventListener("keydown", this._onRootKeyDownBound), !this._isInitialized) {
+      const t = Q(this.getAttribute("value") || this.getAttribute("default-value"));
+      this._value = t, this._pending = w(t), this._display = this._formatDisplay(), this._open = this.hasAttribute("open") || C(this.getAttribute("default-open")), this._isInitialized = !0;
+    }
+    this._open && !this._isInlineMode() && this._ensureOverlay();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClickBound), this.root.removeEventListener("change", this._onRootChangeBound), this.root.removeEventListener("keydown", this._onRootKeyDownBound), this._destroyOverlay(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i && (t === "value" && !this._syncing && (this._value = Q(i), this._pending = w(this._value), this._display = this._formatDisplay(), 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 rt(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";
+  }
+  _locale() {
+    return st(this.getAttribute("locale"));
+  }
+  _isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  _clearable() {
+    return C(this.getAttribute("clearable"), !0);
+  }
+  _showFooter() {
+    return C(this.getAttribute("show-footer"), !0);
+  }
+  _shouldAutoCommit() {
+    return C(this.getAttribute("close-on-select"), !1) || !this._showFooter();
+  }
+  _isBare() {
+    return C(this.getAttribute("bare"), !1);
+  }
+  _allowPartial() {
+    return C(this.getAttribute("allow-partial"), !0);
+  }
+  _autoNormalize() {
+    return C(this.getAttribute("auto-normalize"), !0);
+  }
+  _step() {
+    const t = Number(this.getAttribute("step") || 5);
+    return !Number.isFinite(t) || t < 1 ? 5 : Math.min(60, Math.trunc(t));
+  }
+  _translations() {
+    return et(
+      this.getAttribute("locale"),
+      this.getAttribute("translations")
+    );
+  }
+  _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 = this._valueFromPending(), i = {
+      mode: "datetimerange",
+      start: e.start,
+      end: e.end,
+      value: e.start && e.end ? { start: e.start, end: e.end } : null,
+      source: t
+    };
+    this.dispatchEvent(new CustomEvent("input", { detail: i, bubbles: !0, composed: !0 }));
+  }
+  _emitChange(t) {
+    const e = {
+      mode: "datetimerange",
+      start: this._value.start,
+      end: this._value.end,
+      value: this._value.start && this._value.end ? { start: this._value.start, end: this._value.end } : null,
+      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 }));
+  }
+  _valueFromPending() {
+    return {
+      start: A(this._pending.startDate, this._pending.startTime),
+      end: A(this._pending.endDate, this._pending.endTime)
+    };
+  }
+  _formatDateTimeDisplay(t) {
+    const e = D(t);
+    return e ? `${nt(e.date, this._locale(), "locale", null)} ${e.time}` : t || "";
+  }
+  _formatDisplay() {
+    const t = this._value.start, e = this._value.end;
+    return !t && !e ? "" : t && e ? `${this._formatDateTimeDisplay(t)} — ${this._formatDateTimeDisplay(e)}` : this._formatDateTimeDisplay(t || e);
+  }
+  _normalizePendingState(t) {
+    var p, m;
+    let e = A(t.startDate, t.startTime), i = A(t.endDate, t.endTime);
+    if (e && i && I(e, i) > 0 && this._autoNormalize()) {
+      const g = e;
+      e = i, i = g;
+    }
+    const r = P(this.getAttribute("min")), o = P(this.getAttribute("max"));
+    let n = r ? `${r.date}T${r.time}` : null, s = o ? `${o.date}T${o.time}` : null;
+    if (n && s && I(n, s) > 0) {
+      const g = n;
+      n = s, s = g;
+    }
+    e && n && I(e, n) < 0 && (e = n), e && s && I(e, s) > 0 && (e = s), i && n && I(i, n) < 0 && (i = n), i && s && I(i, s) > 0 && (i = s);
+    const a = D(e || ""), l = D(i || "");
+    return {
+      startDate: (a == null ? void 0 : a.date) || null,
+      endDate: (l == null ? void 0 : l.date) || null,
+      startTime: ((p = a == null ? void 0 : a.time) == null ? void 0 : p.slice(0, 5)) || t.startTime,
+      endTime: ((m = l == null ? void 0 : l.time) == null ? void 0 : m.slice(0, 5)) || t.endTime
+    };
+  }
+  _commit(t, e) {
+    if (this._isInteractionBlocked() || this._isReadonly())
+      return;
+    const i = this._normalizePendingState(t), r = {
+      start: A(i.startDate, i.startTime),
+      end: A(i.endDate, i.endTime)
+    };
+    if (!this._allowPartial() && (!r.start || !r.end)) {
+      this._inlineError = this.getAttribute("error") || this._translations().rangeIncomplete, this._emitInvalid(JSON.stringify(r), "partial"), this._updateHostState();
+      return;
+    }
+    if (r.start && r.end && I(r.start, r.end) > 0) {
+      this._inlineError = this.getAttribute("error") || this._translations().invalidRangeOrder, this._emitInvalid(JSON.stringify(r), "order"), this._updateHostState();
+      return;
+    }
+    this._value = r, this._pending = i, this._display = this._formatDisplay(), this._inlineError = "", this._syncValueAttribute(r), 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), 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 = at());
+  }
+  _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.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 = ot(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(t) {
+    const e = k(t, !0) || { hours: 0, minutes: 0, seconds: 0 }, i = this._step(), r = Array.from({ length: 24 }, (n, s) => `<option value="${s}" ${s === e.hours ? "selected" : ""}>${S(s)}</option>`).join(""), o = Array.from({ length: Math.ceil(60 / i) }, (n, s) => {
+      const a = Math.min(59, s * i);
+      return `<option value="${a}" ${a === e.minutes ? "selected" : ""}>${S(a)}</option>`;
+    }).join("");
+    return { hours: r, minutes: o };
+  }
+  _renderSurfaceInner(t, e = !1) {
+    const i = this._translations(), r = this._timeOptions(this._pending.startTime), o = this._timeOptions(this._pending.endTime), n = (this.getAttribute("label") || "").trim(), s = c(n), a = c(n || i.selectDateRange), l = this._valueFromPending(), p = l.start && l.end ? `${this._formatDateTimeDisplay(l.start)} — ${this._formatDateTimeDisplay(l.end)}` : i.selectDateRange, m = c(`${i.startTime} ${i.hour}`), g = c(`${i.startTime} ${i.minute}`), v = c(`${i.endTime} ${i.hour}`), d = c(`${i.endTime} ${i.minute}`), f = `
+      <header class="head">
+        <div>
+          <p class="head-title" ${n ? "" : "hidden"}>${s}</p>
+          <p class="head-meta">${c(p)}</p>
+        </div>
+      </header>
+      <div class="content">
+        <ui-calendar class="${e ? "drtp-calendar-inline" : "drtp-calendar"}" part="calendar"></ui-calendar>
+        <section class="time-groups" part="time">
+          <div class="time-card">
+            <p class="time-title"><span class="icon-inline">${B}</span>${c(i.startTime)} / ${c(i.endTime)}</p>
+            <div class="time-table" role="group" aria-label="${c(i.dateRangeTimePlaceholder)}">
+              <div class="time-table-head" aria-hidden="true">
+                <span></span>
+                <span class="time-col-label">${c(i.hour)}</span>
+                <span class="time-col-label">${c(i.minute)}</span>
+              </div>
+              <div class="time-row">
+                <p class="time-row-label"><span class="icon-inline">${B}</span>${c(i.startTime)}</p>
+                <select data-time="start" data-segment="hours" aria-label="${m}">${r.hours}</select>
+                <select data-time="start" data-segment="minutes" aria-label="${g}">${r.minutes}</select>
+              </div>
+              <div class="time-row">
+                <p class="time-row-label"><span class="icon-inline">${B}</span>${c(i.endTime)}</p>
+                <select data-time="end" data-segment="hours" aria-label="${v}">${o.hours}</select>
+                <select data-time="end" data-segment="minutes" aria-label="${d}">${o.minutes}</select>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div class="presets" part="presets">
+        <button type="button" class="preset" data-action="preset-today">${c(i.today)}</button>
+        <button type="button" class="preset" data-action="preset-last7">${c(i.last7Days)}</button>
+        <button type="button" class="preset" data-action="preset-month">${c(i.thisMonth)}</button>
+      </div>
+      <footer class="footer" part="footer">
+        <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 ? f : `
+      <style>${bt}</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="${a}" part="${t ? "sheet" : "popover"}">${f}</section>
+    `;
+  }
+  _syncCalendar(t) {
+    const e = (l, p) => {
+      if (p == null || p === "") {
+        t.hasAttribute(l) && t.removeAttribute(l);
+        return;
+      }
+      t.getAttribute(l) !== p && t.setAttribute(l, p);
+    }, i = (l, p) => {
+      p ? e(l, "") : e(l, null);
+    };
+    e("selection", "range"), e("value", JSON.stringify({
+      ...this._pending.startDate ? { start: this._pending.startDate } : {},
+      ...this._pending.endDate ? { end: this._pending.endDate } : {}
+    }));
+    const r = P(this.getAttribute("min")), o = P(this.getAttribute("max"));
+    e("min", (r == null ? void 0 : r.date) || null), e("max", (o == null ? void 0 : o.date) || null), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
+    const s = this.getAttribute("size") || "sm", a = t.classList.contains("drtp-calendar-inline");
+    e("size", s === "lg" ? "md" : "sm"), e("variant", this.getAttribute("variant")), i("readonly", this._isReadonly()), i("disabled", this._isInteractionBlocked()), i("bare", this._isBare()), e("tabindex", "-1"), s === "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")), a ? (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().selectDateRange);
+  }
+  _overlaySignature(t) {
+    return [
+      t ? "sheet" : "popover",
+      this._step(),
+      this.getAttribute("locale") || "",
+      this.getAttribute("label") || "",
+      this.getAttribute("translations") || ""
+    ].join(":");
+  }
+  _ensureOverlayContent(t) {
+    if (!this._overlay)
+      return;
+    const e = this._overlaySignature(t);
+    this._overlayKey === e && this._overlay.querySelector(".drtp-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((n) => Number(n.value)).filter((n) => Number.isFinite(n));
+    if (!i.length)
+      return;
+    let r = i[0], o = Math.abs(r - e);
+    for (let n = 1; n < i.length; n += 1) {
+      const s = i[n], a = Math.abs(s - e);
+      a < o && (r = s, o = a);
+    }
+    t.value = String(r);
+  }
+  _syncOverlayState() {
+    if (!this._overlay)
+      return;
+    const t = this._isMobileSheet();
+    this._ensureOverlayContent(t);
+    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), r = this._overlay.querySelector(".presets"), o = this._overlay.querySelector(".footer");
+    i && (i.dataset.bare = this._isBare() ? "true" : "false");
+    const n = this._showFooter();
+    r && (r.hidden = !n), o && (o.hidden = !n);
+    const s = this._overlay.querySelector(".head-title");
+    if (s) {
+      const b = (this.getAttribute("label") || "").trim();
+      s.textContent = b, s.hidden = !b;
+    }
+    const a = this._overlay.querySelector(".head-meta"), l = this._valueFromPending();
+    a && (a.textContent = l.start && l.end ? `${this._formatDateTimeDisplay(l.start)} — ${this._formatDateTimeDisplay(l.end)}` : e.selectDateRange);
+    const p = this._overlay.querySelector(".drtp-calendar");
+    p && this._syncCalendar(p);
+    const m = k(this._pending.startTime, !0) || { hours: 0, minutes: 0, seconds: 0 }, g = k(this._pending.endTime, !0) || { hours: 0, minutes: 0, seconds: 0 }, v = this._overlay.querySelector('select[data-time="start"][data-segment="hours"]'), d = this._overlay.querySelector('select[data-time="start"][data-segment="minutes"]'), f = this._overlay.querySelector('select[data-time="end"][data-segment="hours"]'), _ = this._overlay.querySelector('select[data-time="end"][data-segment="minutes"]');
+    v && this._setClosestOptionValue(v, m.hours), d && this._setClosestOptionValue(d, m.minutes), f && this._setClosestOptionValue(f, g.hours), _ && this._setClosestOptionValue(_, g.minutes);
+    const y = this._isInteractionBlocked() || this._isReadonly();
+    [v, d, f, _].forEach((b) => {
+      b && (b.disabled = y);
+    }), this._overlay.querySelectorAll(".action, .preset").forEach((b) => {
+      b.disabled = y;
+    }), t || this._schedulePosition.run();
+  }
+  _renderOverlay() {
+    this._syncOverlayState();
+  }
+  _applyTimeFromOverlay(t) {
+    var a, l;
+    const e = t.getAttribute("data-time"), i = (a = this._overlay) == null ? void 0 : a.querySelector(`select[data-time="${e}"][data-segment="hours"]`), r = (l = this._overlay) == null ? void 0 : l.querySelector(`select[data-time="${e}"][data-segment="minutes"]`);
+    if (!e || !i || !r)
+      return;
+    const o = Number(i.value), n = Number(r.value);
+    if (!Number.isFinite(o) || !Number.isFinite(n))
+      return;
+    const s = `${S(o)}:${S(n)}`;
+    e === "start" && (this._pending.startTime = s), e === "end" && (this._pending.endTime = s), this._pending = this._normalizePendingState(this._pending), this._emitInput("time");
+  }
+  _todayIso() {
+    const t = /* @__PURE__ */ new Date(), e = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0");
+    return `${t.getFullYear()}-${e}-${i}`;
+  }
+  _applyPreset(t) {
+    const e = this._todayIso();
+    if (t === "preset-today") {
+      this._pending.startDate = e, this._pending.endDate = e, this._pending = this._normalizePendingState(this._pending), this._emitInput("preset-today");
+      return;
+    }
+    if (t === "preset-last7") {
+      const r = lt(e, 7);
+      this._pending.startDate = r.start, this._pending.endDate = r.end, this._pending = this._normalizePendingState(this._pending), this._emitInput("preset-last7");
+      return;
+    }
+    const i = dt(e);
+    this._pending.startDate = i.start, this._pending.endDate = i.end, this._pending = this._normalizePendingState(this._pending), this._emitInput("preset-month");
+  }
+  _onRootClick(t) {
+    var r;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (r = e.closest("[data-action]")) == null ? void 0 : r.getAttribute("data-action");
+    if (i && !this._isInteractionBlocked() && !(this._isReadonly() && i !== "toggle")) {
+      if (i === "toggle") {
+        this._restoreFocusEl = e, this._setOpen(!this._open, "toggle");
+        return;
+      }
+      if (i === "clear") {
+        this._isInlineMode() ? (this._pending = w({ start: null, end: null }), this._emitInput("clear"), this._updateHostState()) : (this._pending = w({ start: null, end: null }), this._commit(this._pending, "clear"));
+        return;
+      }
+      if (this._isInlineMode() && (i === "preset-today" || i === "preset-last7" || i === "preset-month")) {
+        this._applyPreset(i), this._updateHostState();
+        return;
+      }
+      if (this._isInlineMode() && i === "cancel") {
+        this._pending = w(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-time][data-segment]") || this._isInteractionBlocked() || this._isReadonly())
+          return;
+        if (this._applyTimeFromOverlay(e), this._shouldAutoCommit()) {
+          const i = this._valueFromPending();
+          if (i.start && i.end) {
+            this._commit(this._pending, "time");
+            return;
+          }
+        }
+        this._updateHostState();
+      }
+    }
+  }
+  _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 r;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (r = e.closest("[data-action]")) == null ? void 0 : r.getAttribute("data-action");
+    if (i && !(this._isInteractionBlocked() || this._isReadonly())) {
+      if (i === "backdrop") {
+        this._setOpen(!1, "outside");
+        return;
+      }
+      if (i === "cancel") {
+        this._pending = w(this._value), this._setOpen(!1, "cancel");
+        return;
+      }
+      if (i === "clear") {
+        this._pending = w({ start: null, end: null }), this._emitInput("clear"), this._renderOverlay();
+        return;
+      }
+      if (i === "preset-today" || i === "preset-last7" || i === "preset-month") {
+        this._applyPreset(i), this._renderOverlay();
+        return;
+      }
+      i === "apply" && (this._commit(this._pending, "apply"), this._setOpen(!1, "apply"));
+    }
+  }
+  _onOverlayChange(t) {
+    const e = t.target;
+    if (e instanceof HTMLSelectElement && e.matches("select[data-time][data-segment]") && !(this._isInteractionBlocked() || this._isReadonly()) && (this._applyTimeFromOverlay(e), this._shouldAutoCommit())) {
+      const i = this._valueFromPending();
+      i.start && i.end && (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.detail;
+    if (!(!i || i.mode !== "range")) {
+      if (this._pending.startDate = i.start || null, this._pending.endDate = i.end || null, this._pending = this._normalizePendingState(this._pending), this._emitInput("calendar"), this._shouldAutoCommit() && this._pending.startDate && this._pending.endDate) {
+        this._commit(this._pending, "calendar"), this._setOpen(!1, "calendar");
+        return;
+      }
+      this._isInlineMode() ? this._updateHostState() : this._renderOverlay();
+    }
+  }
+  _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") || "", r = this._inlineError || i, o = !!(this._value.start || this._value.end), n = this.getAttribute("name") || "", s = this._isInlineMode(), a = this._translations(), l = r ? "error" : this._state(), p = this._formatDisplay();
+    this._display = p, this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
+    const m = this.root.querySelector(".label"), g = this.root.querySelector(".label-text"), v = this.root.querySelector(".required"), d = this.root.querySelector(".input"), f = this.root.querySelector('.btn[data-action="clear"]'), _ = this.root.querySelector('.btn[data-action="toggle"]'), y = this.root.querySelector(".hint"), b = this.root.querySelector(".error"), $ = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t, m.id = this._labelId, m.setAttribute("for", this._inputId)), g && (g.textContent = t), v && (v.hidden = !this.hasAttribute("required")), d && (d.value !== p && (d.value = p), d.id = this._inputId, d.placeholder = a.dateRangeTimePlaceholder, d.readOnly = !0, d.disabled = this._isInteractionBlocked(), d.required = this.hasAttribute("required"), d.autocomplete = "off", d.setAttribute("role", "combobox"), d.setAttribute("aria-haspopup", "dialog"), d.setAttribute("aria-expanded", s ? "false" : String(this._open)), d.setAttribute("aria-controls", this._panelId), d.setAttribute("aria-invalid", r ? "true" : "false"), t ? d.setAttribute("aria-labelledby", this._labelId) : d.removeAttribute("aria-labelledby")), f && (f.hidden = !(this._clearable() && o), f.setAttribute("aria-label", a.clearDateRange), f.disabled = this._isInteractionBlocked()), _ && (_.hidden = s, _.setAttribute("aria-label", a.toggleCalendar), _.setAttribute("aria-expanded", s ? "false" : String(this._open)), _.setAttribute("aria-controls", this._panelId), _.disabled = this._isInteractionBlocked()), y && (y.id = this._hintId, y.hidden = !e, y.textContent = e), b && (b.id = this._errorId, b.hidden = !r, b.textContent = r), d) {
+      const x = [];
+      e && y && !y.hidden && x.push(this._hintId), r && x.push(this._errorId), x.length ? d.setAttribute("aria-describedby", x.join(" ")) : d.removeAttribute("aria-describedby");
+    }
+    $ && ($.disabled = !n, $.name = n, $.value = X(this._value) || "");
+    const O = this.root.querySelector(".field");
+    O && (O.dataset.open = this._open && !s ? "true" : "false", O.dataset.invalid = r ? "true" : "false", O.dataset.state = l);
+    const u = this.root.querySelector(".inline-panel");
+    if (u) {
+      u.hidden = !s, 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 || a.selectDateRange);
+      const x = u.querySelector(".panel-title");
+      x && (x.textContent = t, x.hidden = !t);
+      const R = u.querySelector(".head-title");
+      R && (R.textContent = t, R.hidden = !t);
+      const H = u.querySelector(".head-meta"), T = this._valueFromPending();
+      H && (H.textContent = T.start && T.end ? `${this._formatDateTimeDisplay(T.start)} — ${this._formatDateTimeDisplay(T.end)}` : a.selectDateRange);
+      const V = u.querySelector(".drtp-calendar-inline");
+      V && this._syncCalendar(V);
+      const q = u.querySelector('select[data-time="start"][data-segment="hours"]'), L = u.querySelector('select[data-time="start"][data-segment="minutes"]'), M = u.querySelector('select[data-time="end"][data-segment="hours"]'), E = u.querySelector('select[data-time="end"][data-segment="minutes"]'), F = k(this._pending.startTime, !0) || { hours: 0, minutes: 0, seconds: 0 }, N = k(this._pending.endTime, !0) || { hours: 0, minutes: 0, seconds: 0 };
+      q && this._setClosestOptionValue(q, F.hours), L && this._setClosestOptionValue(L, F.minutes), M && this._setClosestOptionValue(M, N.hours), E && this._setClosestOptionValue(E, N.minutes), [q, L, M, E].forEach((z) => {
+        z && (z.disabled = this._isInteractionBlocked() || this._isReadonly());
+      });
+      const K = u.querySelector('[data-action="preset-today"]');
+      K && (K.textContent = a.today);
+      const U = u.querySelector('[data-action="preset-last7"]');
+      U && (U.textContent = a.last7Days);
+      const j = u.querySelector('[data-action="preset-month"]');
+      j && (j.textContent = a.thisMonth);
+      const Z = u.querySelector('[data-action="clear"]');
+      Z && (Z.textContent = a.clear);
+      const W = u.querySelector('[data-action="apply"]');
+      W && (W.textContent = a.apply);
+      const J = u.querySelector(".presets"), Y = u.querySelector(".footer"), G = this._showFooter();
+      J && (J.hidden = !G), Y && (Y.hidden = !G), u.querySelectorAll(".action, .preset").forEach((z) => {
+        z.disabled = this._isInteractionBlocked() || this._isReadonly();
+      });
+    }
+    !s && this._open && this._syncOverlayState(), s && this._destroyOverlay();
+  }
+  render() {
+    if (!this._hasView) {
+      const t = this._translations();
+      this.setContent(`
+        <style>${mt}</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">${ct}</span>
+            <input class="input" id="${this._inputId}" part="input" readonly />
+            <span class="icon" part="icon">${B}</span>
+            <button type="button" class="btn" part="clear" data-action="clear">${ht}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${pt}</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.selectDateRange)}</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-range-time-picker") && customElements.define("ui-date-range-time-picker", gt);
+export {
+  gt as UIDateRangeTimePicker
+};