@cognivo/components 0.8.0

package/dist/components/cg-date-time-picker/cg-date-time-picker.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-date-time-picker
+ * Single-trigger date+time picker. One dropdown with calendar and time columns side by side.
+ *
+ * @example
+ * ```html
+ * <cg-date-time-picker label="Event start"></cg-date-time-picker>
+ * <cg-date-time-picker label="Deadline" value="2026-04-06T14:30" use12h></cg-date-time-picker>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, date: string, time: string}>} cg-change - When date or time changes
+ */
+export declare class CgDateTimePicker extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    value: string;
+    placeholder: string;
+    helper: string;
+    min: string;
+    max: string;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    use12h: boolean;
+    step: number;
+    private _open;
+    private _viewYear;
+    private _viewMonth;
+    private _selectedHour;
+    private _selectedMinute;
+    private _period;
+    private _weekdays;
+    private _monthNames;
+    private get _date();
+    private get _time();
+    private _toggle;
+    private _close;
+    private _prevMonth;
+    private _nextMonth;
+    private _selectDay;
+    private _isDisabledDate;
+    private _getDays;
+    private _getHours;
+    private _getMinutes;
+    private _selectHour;
+    private _selectMinute;
+    private _setPeriod;
+    private _buildTimeString;
+    private _updateTimeInValue;
+    private _emit;
+    private _formatDisplay;
+    private _handleClickOutside;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-date-time-picker': CgDateTimePicker;
+    }
+}
+//# sourceMappingURL=cg-date-time-picker.d.ts.map

package/dist/components/cg-date-time-picker/cg-date-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-date-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-date-time-picker/cg-date-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA2NnB;IAES,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAwB;IACnC,MAAM,SAAM;IACZ,GAAG,SAAM;IACT,GAAG,SAAM;IACQ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,MAAM,UAAS;IAChB,IAAI,SAAK;IAE5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,OAAO,CAAqB;IAE7C,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,WAAW,CAA8H;IAGjJ,OAAO,KAAK,KAAK,GAGhB;IACD,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,QAAQ;IA8BhB,OAAO,CAAC,SAAS;IAGjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAiGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,qBAAqB,EAAE,gBAAgB,CAAC;KAAE;CAC7E"}

package/dist/components/cg-date-time-picker/cg-date-time-picker.js

@@ -0,0 +1,521 @@
+import { css as _, LitElement as w, nothing as b, html as g } from "lit";
+import { property as l, state as v, customElement as x } from "lit/decorators.js";
+import { h as $, r as k } from "../../chunks/premium.css-9I4kHrsl.js";
+var M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (t, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? S(r, o) : r, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (e = (s ? p(r, o, e) : p(e)) || e);
+  return s && e && M(r, o, e), e;
+};
+let i = class extends w {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.placeholder = "Select date & time", this.helper = "", this.min = "", this.max = "", this.size = "md", this.rounded = "lg", this.disabled = !1, this.error = !1, this.success = !1, this.use12h = !1, this.step = 5, this._open = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._selectedHour = -1, this._selectedMinute = -1, this._period = "AM", this._weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], this._monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], this._handleClickOutside = (t) => {
+      t.composedPath().includes(this) || this._close();
+    };
+  }
+  // ── Parsing ──
+  get _date() {
+    return this.value ? this.value.split("T")[0] ?? "" : "";
+  }
+  get _time() {
+    return !this.value || !this.value.includes("T") ? "" : this.value.split("T")[1] ?? "";
+  }
+  _toggle() {
+    if (!this.disabled && (this._open = !this._open, this._open)) {
+      if (this._date) {
+        const t = /* @__PURE__ */ new Date(this._date + "T00:00:00");
+        this._viewYear = t.getFullYear(), this._viewMonth = t.getMonth();
+      }
+      if (this._time) {
+        const [t, r] = this._time.split(":").map(Number);
+        this.use12h ? (this._period = t >= 12 ? "PM" : "AM", this._selectedHour = t === 0 ? 12 : t > 12 ? t - 12 : t) : this._selectedHour = t, this._selectedMinute = r;
+      }
+    }
+  }
+  _close() {
+    this._open = !1;
+  }
+  // ── Calendar ──
+  _prevMonth() {
+    this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
+  }
+  _nextMonth() {
+    this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
+  }
+  _selectDay(t, r, o) {
+    const s = `${t}-${String(r + 1).padStart(2, "0")}-${String(o).padStart(2, "0")}`, e = this._buildTimeString();
+    this.value = `${s}T${e}`, this._emit();
+  }
+  _isDisabledDate(t, r, o) {
+    const s = `${t}-${String(r + 1).padStart(2, "0")}-${String(o).padStart(2, "0")}`;
+    return !!(this.min && s < this.min.split("T")[0] || this.max && s > this.max.split("T")[0]);
+  }
+  _getDays() {
+    const t = this._viewYear, r = this._viewMonth, o = new Date(t, r, 1).getDay(), s = new Date(t, r + 1, 0).getDate(), e = new Date(t, r, 0).getDate(), c = /* @__PURE__ */ new Date(), p = `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, f = [];
+    for (let n = o - 1; n >= 0; n--) {
+      const d = e - n, u = r === 0 ? 11 : r - 1, h = r === 0 ? t - 1 : t, m = `${h}-${String(u + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+      f.push({ day: d, month: u, year: h, outside: !0, today: m === p, selected: this._date === m, disabled: this._isDisabledDate(h, u, d) });
+    }
+    for (let n = 1; n <= s; n++) {
+      const d = `${t}-${String(r + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+      f.push({ day: n, month: r, year: t, outside: !1, today: d === p, selected: this._date === d, disabled: this._isDisabledDate(t, r, n) });
+    }
+    const y = 42 - f.length;
+    for (let n = 1; n <= y; n++) {
+      const d = r === 11 ? 0 : r + 1, u = r === 11 ? t + 1 : t, h = `${u}-${String(d + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+      f.push({ day: n, month: d, year: u, outside: !0, today: h === p, selected: this._date === h, disabled: this._isDisabledDate(u, d, n) });
+    }
+    return f;
+  }
+  // ── Time ──
+  _getHours() {
+    return this.use12h ? Array.from({ length: 12 }, (t, r) => r + 1) : Array.from({ length: 24 }, (t, r) => r);
+  }
+  _getMinutes() {
+    const t = Math.max(1, Math.min(30, this.step));
+    return Array.from({ length: Math.ceil(60 / t) }, (r, o) => o * t);
+  }
+  _selectHour(t) {
+    this._selectedHour = t, this._updateTimeInValue();
+  }
+  _selectMinute(t) {
+    this._selectedMinute = t, this._updateTimeInValue();
+  }
+  _setPeriod(t) {
+    this._period = t, this._selectedHour >= 0 && this._updateTimeInValue();
+  }
+  _buildTimeString() {
+    if (this._selectedHour < 0 || this._selectedMinute < 0) return "00:00";
+    let t = this._selectedHour;
+    return this.use12h && (this._period === "AM" && t === 12 ? t = 0 : this._period === "PM" && t !== 12 && (t += 12)), `${String(t).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`;
+  }
+  _updateTimeInValue() {
+    if (this._selectedHour < 0 || this._selectedMinute < 0) return;
+    const t = this._date || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), r = this._buildTimeString();
+    this.value = `${t}T${r}`, this._emit();
+  }
+  _emit() {
+    this.dispatchEvent(new CustomEvent("cg-change", {
+      detail: { value: this.value, date: this._date, time: this._time },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  // ── Display ──
+  _formatDisplay() {
+    if (!this.value) return "";
+    const t = [];
+    if (this._date) {
+      const r = /* @__PURE__ */ new Date(this._date + "T00:00:00");
+      t.push(r.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }));
+    }
+    if (this._time) {
+      const [r, o] = this._time.split(":").map(Number);
+      if (this.use12h) {
+        const s = r >= 12 ? "PM" : "AM", e = r === 0 ? 12 : r > 12 ? r - 12 : r;
+        t.push(`${e}:${String(o).padStart(2, "0")} ${s}`);
+      } else
+        t.push(`${String(r).padStart(2, "0")}:${String(o).padStart(2, "0")}`);
+    }
+    return t.join(", ");
+  }
+  _handleKeydown(t) {
+    if (t.key === "Escape") {
+      this._close();
+      return;
+    }
+    (t.key === "Enter" || t.key === " ") && !this._open && (t.preventDefault(), this._toggle());
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
+  }
+  render() {
+    const t = this._formatDisplay(), r = this._getDays(), o = this._getHours(), s = this._getMinutes();
+    return g`
+      ${this.label ? g`<div class="label">${this.label}</div>` : b}
+      <div
+        class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="combobox"
+        aria-expanded=${this._open}
+        aria-haspopup="dialog"
+        aria-label=${this.label || "Date and time picker"}
+        @click=${this._toggle}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="trigger-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+            <line x1="16" y1="2" x2="16" y2="6"></line>
+            <line x1="8" y1="2" x2="8" y2="6"></line>
+            <line x1="3" y1="10" x2="21" y2="10"></line>
+            <circle cx="16" cy="16" r="2.5"></circle>
+            <polyline points="16 14.5 16 16 17 16.5"></polyline>
+          </svg>
+        </span>
+        <span class="trigger-text ${t ? "" : "placeholder"}">${t || this.placeholder}</span>
+      </div>
+
+      <div class="dropdown ${this._open ? "open" : ""}" role="dialog" aria-label="Date and time selector">
+        <div class="dropdown-inner">
+          <!-- Calendar -->
+          <div class="cal-side">
+            <div class="cal-header">
+              <button class="cal-btn" @click=${this._prevMonth} aria-label="Previous month">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 18l-6-6 6-6"></path></svg>
+              </button>
+              <span class="cal-title">${this._monthNames[this._viewMonth]} ${this._viewYear}</span>
+              <button class="cal-btn" @click=${this._nextMonth} aria-label="Next month">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 18l6-6-6-6"></path></svg>
+              </button>
+            </div>
+            <div class="cal-weekdays">${this._weekdays.map((e) => g`<span class="cal-weekday">${e}</span>`)}</div>
+            <div class="cal-days">
+              ${r.map((e) => g`
+                <button class="cal-day ${e.today ? "today" : ""} ${e.selected ? "selected" : ""} ${e.outside ? "outside" : ""} ${e.disabled ? "disabled-day" : ""}"
+                  @click=${(c) => {
+      c.stopPropagation(), this._selectDay(e.year, e.month, e.day);
+    }}
+                  ?disabled=${e.disabled} aria-label="${e.day} ${this._monthNames[e.month]} ${e.year}" aria-selected=${e.selected ? "true" : "false"}
+                >${e.day}</button>
+              `)}
+            </div>
+          </div>
+
+          <div class="panel-divider"></div>
+
+          <!-- Time -->
+          <div class="time-side">
+            <span class="time-side-label">Time</span>
+            <div class="time-columns">
+              <div class="time-column">
+                <span class="time-column-label">Hr</span>
+                <div class="time-scroll">
+                  ${o.map((e) => g`
+                    <button class="time-option ${this._selectedHour === e ? "selected" : ""}"
+                      @click=${(c) => {
+      c.stopPropagation(), this._selectHour(e);
+    }}
+                      aria-selected=${this._selectedHour === e ? "true" : "false"}
+                    >${this.use12h ? e : String(e).padStart(2, "0")}</button>
+                  `)}
+                </div>
+              </div>
+              <div class="time-col-divider"></div>
+              <div class="time-column">
+                <span class="time-column-label">Min</span>
+                <div class="time-scroll">
+                  ${s.map((e) => g`
+                    <button class="time-option ${this._selectedMinute === e ? "selected" : ""}"
+                      @click=${(c) => {
+      c.stopPropagation(), this._selectMinute(e);
+    }}
+                      aria-selected=${this._selectedMinute === e ? "true" : "false"}
+                    >${String(e).padStart(2, "0")}</button>
+                  `)}
+                </div>
+              </div>
+              ${this.use12h ? g`
+                <div class="period-toggle">
+                  <button class="period-btn ${this._period === "AM" ? "active" : ""}" @click=${(e) => {
+      e.stopPropagation(), this._setPeriod("AM");
+    }}>AM</button>
+                  <button class="period-btn ${this._period === "PM" ? "active" : ""}" @click=${(e) => {
+      e.stopPropagation(), this._setPeriod("PM");
+    }}>PM</button>
+                </div>
+              ` : b}
+            </div>
+          </div>
+        </div>
+      </div>
+      ${this.helper ? g`<div class="helper">${this.helper}</div>` : b}
+    `;
+  }
+};
+i.styles = [$, k, _`
+    :host { position: relative; }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+      margin-bottom: var(--cg-spacing-4);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    /* ── Trigger ── */
+    .trigger {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      padding: 0 var(--cg-spacing-4);
+      height: var(--cg-component-input-height-md);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      cursor: pointer;
+      outline: none;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }
+    .trigger:focus-visible { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .trigger.open { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }
+
+    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }
+    :host([error]) .trigger:focus-visible,
+    :host([error]) .trigger.open { border-color: var(--cg-color-status-error-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }
+    :host([success]) .trigger { border-color: var(--cg-color-input-icon-success); }
+    :host([success]) .trigger:focus-visible,
+    :host([success]) .trigger.open { border-color: var(--cg-color-status-success-text-default); box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }
+
+    :host([size="lg"]) .trigger { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-base); }
+
+    :host([rounded="none"]) .trigger { border-radius: 0; }
+    :host([rounded="sm"]) .trigger { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .trigger { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .trigger { border-radius: var(--cg-component-input-radius); }
+
+    .trigger-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-input-icon-default);
+      flex-shrink: 0;
+      width: var(--cg-spacing-40);
+      align-self: stretch;
+      background: var(--cg-overlay-dark-subtle);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);
+      margin-left: calc(-1 * var(--cg-spacing-4));
+    }
+    .trigger-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+    .trigger-text {
+      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      padding: 0 var(--cg-spacing-12);
+    }
+    .placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    /* ── Dropdown ── */
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--cg-z-index-200);
+      margin-top: var(--cg-spacing-4);
+      padding: var(--cg-spacing-16);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);
+      pointer-events: none;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+
+    .dropdown-inner {
+      display: flex;
+      gap: var(--cg-spacing-16);
+    }
+
+    /* ── Calendar side ── */
+    .cal-side { min-width: 252px; }
+
+    .cal-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .cal-title {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .cal-nav { display: flex; align-items: center; gap: var(--cg-spacing-4); }
+    .cal-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: var(--cg-spacing-32); height: var(--cg-spacing-32);
+      border: none; background: transparent; color: var(--cg-color-surface-container-text);
+      border-radius: var(--cg-border-radius-50); cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .cal-btn:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .cal-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .cal-btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+
+    .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--cg-spacing-4); }
+    .cal-weekday {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder); text-align: center; padding: var(--cg-spacing-4) 0;
+    }
+
+    .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cg-spacing-2); }
+    .cal-day {
+      display: flex; align-items: center; justify-content: center;
+      width: var(--cg-spacing-32); height: var(--cg-spacing-32); margin: 0 auto;
+      border: none; background: transparent; color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs); font-family: inherit;
+      border-radius: var(--cg-border-radius-50); cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .cal-day:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .cal-day:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .cal-day.today { border: var(--cg-border-width-50) solid var(--cg-color-input-border-focus); font-weight: var(--cg-font-weight-semibold); }
+    .cal-day.selected { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }
+    .cal-day.selected:hover { background: var(--cg-color-action-primary-background-default); }
+    .cal-day.outside { color: var(--cg-color-input-text-placeholder); opacity: 0.5; }
+    .cal-day.disabled-day { opacity: 0.3; pointer-events: none; }
+    .cal-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }
+
+    /* ── Divider ── */
+    .panel-divider {
+      width: var(--cg-border-width-50);
+      background: var(--cg-color-input-border-default);
+      align-self: stretch;
+    }
+
+    /* ── Time side ── */
+    .time-side { min-width: 100px; display: flex; flex-direction: column; }
+    .time-side-label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text); margin-bottom: var(--cg-spacing-12);
+    }
+    .time-columns { display: flex; gap: var(--cg-spacing-8); flex: 1; }
+
+    .time-column { flex: 1; display: flex; flex-direction: column; align-items: center; }
+    .time-column-label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder); margin-bottom: var(--cg-spacing-8);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .time-scroll {
+      display: flex; flex-direction: column; gap: var(--cg-spacing-2);
+      max-height: 200px; overflow-y: auto; width: 100%;
+      scrollbar-width: thin; scrollbar-color: var(--cg-color-input-border-default) transparent;
+    }
+    .time-option {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--cg-spacing-32); border: none; background: transparent;
+      color: var(--cg-color-surface-base-text); font-size: var(--cg-font-size-sm);
+      font-family: inherit; font-variant-numeric: tabular-nums;
+      border-radius: var(--cg-border-radius-50); cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .time-option:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .time-option:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .time-option.selected { background: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-text-default); font-weight: var(--cg-font-weight-semibold); }
+    .time-option.selected:hover { background: var(--cg-color-action-primary-background-default); }
+    .time-option:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }
+
+    .time-col-divider {
+      width: var(--cg-border-width-50); background: var(--cg-color-input-border-default);
+      align-self: stretch; margin-top: var(--cg-spacing-24);
+    }
+
+    .period-toggle {
+      display: flex; flex-direction: column; gap: var(--cg-spacing-4);
+      align-items: center; padding-top: var(--cg-spacing-24);
+    }
+    .period-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: var(--cg-spacing-48); height: var(--cg-spacing-32);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      background: transparent; color: var(--cg-color-surface-container-text);
+      font-size: var(--cg-font-size-xs); font-family: inherit; font-weight: var(--cg-font-weight-medium);
+      border-radius: var(--cg-border-radius-50); cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .period-btn:hover { border-color: var(--cg-color-input-border-hover); }
+    .period-btn.active {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-background-default);
+    }
+
+    /* ── Helper ── */
+    .helper {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder);
+      padding: var(--cg-spacing-4) 0 0;
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
+  `];
+a([
+  l()
+], i.prototype, "label", 2);
+a([
+  l()
+], i.prototype, "value", 2);
+a([
+  l()
+], i.prototype, "placeholder", 2);
+a([
+  l()
+], i.prototype, "helper", 2);
+a([
+  l()
+], i.prototype, "min", 2);
+a([
+  l()
+], i.prototype, "max", 2);
+a([
+  l({ reflect: !0 })
+], i.prototype, "size", 2);
+a([
+  l({ reflect: !0 })
+], i.prototype, "rounded", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "disabled", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "error", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "success", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "use12h", 2);
+a([
+  l({ type: Number })
+], i.prototype, "step", 2);
+a([
+  v()
+], i.prototype, "_open", 2);
+a([
+  v()
+], i.prototype, "_viewYear", 2);
+a([
+  v()
+], i.prototype, "_viewMonth", 2);
+a([
+  v()
+], i.prototype, "_selectedHour", 2);
+a([
+  v()
+], i.prototype, "_selectedMinute", 2);
+a([
+  v()
+], i.prototype, "_period", 2);
+i = a([
+  x("cg-date-time-picker")
+], i);
+export {
+  i as CgDateTimePicker
+};
+//# sourceMappingURL=cg-date-time-picker.js.map