@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

package/dist/collection/components/co-date-time-picker/co-date-time-picker.js

@@ -0,0 +1,1079 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { getDateStrings } from "../../utils/dateI18n";
+import { formatDisplay } from "@prolibu-suite/cobalt-date-utils";
+import { MINUTES_PER_DAY, getLocalTimeZone, toUtcISO, wallClockToEpoch, zonedDateKey, zonedMinutesOfDay, } from "@prolibu-suite/cobalt-calendar-utils";
+/** Wall-clock minute assumed when the incoming value carries no time of day. */
+const DEFAULT_MINUTES = 9 * 60;
+/**
+ * Date + TIME picker: one field, one popover. Composes `co-popover` (floating
+ * panel, outside-click) + `co-calendar` (day grid) + a scrollable list of times
+ * beside it — the Google Calendar layout.
+ *
+ * VALUE CONTRACT — the committed `value` is a UTC ISO instant
+ * ("2026-07-25T21:30:00.000Z"), never a wall-clock string. The wall clock the
+ * user sees and edits is rendered in `timeZone` (IANA; browser zone when
+ * omitted). All ISO↔wall-clock conversion goes through the calendar engine
+ * (`@prolibu-suite/cobalt-calendar-utils`), so DST comes from the platform tz
+ * database — the same boundary `co-calendar-timegrid` uses. A date-only value
+ * ("2026-07-25") is NOT an instant: it is read as that wall-clock day in
+ * `timeZone` at {@link DEFAULT_MINUTES} (09:00), never as UTC midnight (which
+ * would shift the day west of UTC).
+ *
+ * INTERACTION (Google):
+ *   - Click the field → opens. Picking a DAY commits and keeps the panel open
+ *     (you almost always want to set the hour next); picking a TIME commits and
+ *     closes. So there is no draft/apply step and no confirm button.
+ *   - ArrowDown on the field → moves focus into the calendar grid.
+ *   - The time list is a listbox: Arrow/Home/End/PageUp/PageDown move the active
+ *     option, Enter/Space selects it.
+ *   - Escape → closes and returns focus to the field. Outside click → closes.
+ *
+ * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return to
+ * the field; outside-click stays with co-popover.
+ *
+ * @part field - The bordered trigger row
+ * @part label - The field label
+ * @part display - The button that shows the formatted value
+ * @part clear - The clear button
+ * @part helper - The helper/error text row
+ */
+export class CoDateTimePicker {
+    constructor() {
+        /** Committed value: UTC ISO instant ("2026-07-25T21:30:00.000Z") or null. */
+        this.value = null;
+        /** Minutes between consecutive options in the time list. */
+        this.stepMinutes = 15;
+        /** 12-hour clock (Google style). `false` renders a 24h clock. */
+        this.hour12 = true;
+        this.locale = 'es-CO';
+        /** Date part of the trigger text (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+        this.displayFormat = 'd MMM yyyy';
+        this.firstDayOfWeek = 1;
+        /** Field size, mirrors co-input/co-date-field: s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** `flat` strips the trigger's border/background so it reads as content. */
+        this.variant = 'default';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside). */
+        this.layout = 'vertical';
+        /** Popover placement relative to the field. */
+        this.placement = 'bottom-start';
+        /** Whether the panel is open. */
+        this.open = false;
+        /** Max viewport width (px) that renders the panel as a bottom sheet. */
+        this.mobileBreakpoint = 600;
+        /** True when the viewport is at/under `mobileBreakpoint`. */
+        this.isMobile = false;
+        /** Minutes-of-day highlighted by the keyboard in the time list. */
+        this.activeMinutes = DEFAULT_MINUTES;
+        this.pendingFocusGrid = false;
+        this.pendingFocusTrigger = false;
+        /** 'center' when the list is (re)opened, 'nearest' while arrowing through it. */
+        this.pendingScroll = null;
+        this.mqlHandler = (e) => {
+            this.isMobile = e.matches;
+        };
+        // ── Trigger ────────────────────────────────────────────────
+        this.onTriggerKeyDown = (e) => {
+            if (e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            if (this.disabled || this.readonly)
+                return;
+            if (!this.open)
+                this.setOpen(true);
+            this.pendingFocusGrid = true;
+            if (this.calendarEl)
+                this.focusGridSoon();
+        };
+        this.onClearClick = (e) => {
+            // The clear button lives INSIDE co-popover's trigger box, which toggles the
+            // panel on any click it sees — clearing must not open/close it.
+            e.stopPropagation();
+            if (this.disabled || this.readonly)
+                return;
+            this.value = null;
+            this.coClear.emit();
+            this.coChange.emit(null);
+        };
+        // ── Calendar / time list ───────────────────────────────────
+        this.onCalendarSelect = (e) => {
+            var _a, _b;
+            const dayKey = e.detail;
+            if (!dayKey)
+                return;
+            // Google behaviour: the day commits but the panel STAYS open so the hour can
+            // be picked next. The previously chosen hour is preserved (09:00 if none).
+            const minutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
+            this.commit(dayKey, minutes);
+            this.activeMinutes = minutes;
+            this.pendingScroll = 'center';
+        };
+        this.pickTime = (minutes) => {
+            var _a, _b;
+            const dayKey = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.dayKey) !== null && _b !== void 0 ? _b : zonedDateKey(Date.now(), this.zone);
+            this.commit(dayKey, minutes);
+            this.activeMinutes = minutes;
+            // Picking the hour is the terminal step → apply and close.
+            this.setOpen(false);
+            this.pendingFocusTrigger = true;
+        };
+        this.onListKeyDown = (e) => {
+            const opts = this.options;
+            const hourStep = Math.max(1, Math.round(60 / this.step));
+            let i = opts.indexOf(this.activeMinutes);
+            if (i < 0)
+                i = 0;
+            switch (e.key) {
+                case 'ArrowDown':
+                    i += 1;
+                    break;
+                case 'ArrowUp':
+                    i -= 1;
+                    break;
+                case 'PageDown':
+                    i += hourStep;
+                    break;
+                case 'PageUp':
+                    i -= hourStep;
+                    break;
+                case 'Home':
+                    i = 0;
+                    break;
+                case 'End':
+                    i = opts.length - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.pickTime(this.activeMinutes);
+                    return;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.activeMinutes = opts[Math.min(opts.length - 1, Math.max(0, i))];
+            this.pendingScroll = 'nearest';
+        };
+        // ── Popover lifecycle ──────────────────────────────────────
+        this.onPopoverOpen = () => {
+            var _a, _b;
+            if (this.disabled || this.readonly) {
+                // co-popover toggles itself on trigger click; a non-interactive field must
+                // not open, so push it back closed instead of mirroring the state.
+                (_b = (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
+            if (!this.open) {
+                this.open = true; // triggers @Watch('open') → active hour + scroll
+                this.coOpen.emit();
+            }
+        };
+        this.onPopoverClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.coClose.emit();
+            }
+        };
+        this.onRootKeyDown = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.stopPropagation();
+                this.setOpen(false);
+                this.pendingFocusTrigger = true;
+            }
+        };
+    }
+    connectedCallback() {
+        // Guarded: jsdom-style hosts (unit tests, SSR shims) have no matchMedia —
+        // the desktop popover is the right fallback there.
+        if (typeof window.matchMedia !== 'function')
+            return;
+        this.mql = window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`);
+        this.isMobile = this.mql.matches;
+        this.mql.addEventListener('change', this.mqlHandler);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mqlHandler);
+    }
+    onOpenChange(next) {
+        var _a, _b;
+        if (!next)
+            return;
+        // Opening: highlight (and scroll to) the committed hour, 09:00 when empty.
+        this.activeMinutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
+        this.pendingScroll = 'center';
+    }
+    // ── Derived value ──────────────────────────────────────────
+    get zone() {
+        return this.timeZone || getLocalTimeZone();
+    }
+    get isInvalid() {
+        return this.invalid;
+    }
+    /** Wall clock of the committed value in `zone`, or null when empty/invalid. */
+    get parts() {
+        const v = this.value;
+        if (!v)
+            return null;
+        // Date-only: a calendar day, not an instant (see the class doc).
+        if (/^\d{4}-\d{2}-\d{2}$/.test(v))
+            return { dayKey: v, minutes: DEFAULT_MINUTES };
+        try {
+            return { dayKey: zonedDateKey(v, this.zone), minutes: zonedMinutesOfDay(v, this.zone) };
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    /** Calendar bounds are date-only; accept an instant and reduce it to its day. */
+    dayBound(v) {
+        if (!v)
+            return undefined;
+        if (/^\d{4}-\d{2}-\d{2}$/.test(v))
+            return v;
+        try {
+            return zonedDateKey(v, this.zone);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        if (next)
+            this.coOpen.emit();
+        else
+            this.coClose.emit();
+    }
+    /** Write day+minutes as a UTC instant and notify. */
+    commit(dayKey, minutes) {
+        const [year, month, day] = dayKey.split('-').map(Number);
+        if (!year || !month || !day)
+            return;
+        const epoch = wallClockToEpoch({ year, month, day, hour: Math.floor(minutes / 60), minute: minutes % 60, second: 0 }, this.zone);
+        const iso = toUtcISO(epoch);
+        this.value = iso;
+        this.coChange.emit(iso);
+    }
+    // ── Focus / scroll bookkeeping ─────────────────────────────
+    focusGridSoon() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.calendarEl) === null || _a === void 0 ? void 0 : _a.focusGrid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    scrollActiveIntoView(mode) {
+        const list = this.listEl;
+        if (!list)
+            return;
+        const el = list.querySelector('[data-active="true"]');
+        if (!el)
+            return;
+        // Manual scrollTop (not scrollIntoView): the panel lives in the top layer and
+        // scrollIntoView would also scroll the page behind it.
+        if (mode === 'center') {
+            list.scrollTop = Math.max(0, el.offsetTop - list.clientHeight / 2 + el.offsetHeight / 2);
+            return;
+        }
+        // Arrowing: only reveal when the option fell out of view, so the list does
+        // not jump under the cursor on every keystroke.
+        const top = el.offsetTop;
+        const bottom = top + el.offsetHeight;
+        if (top < list.scrollTop)
+            list.scrollTop = top;
+        else if (bottom > list.scrollTop + list.clientHeight) {
+            list.scrollTop = bottom - list.clientHeight;
+        }
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocusGrid && this.open && this.calendarEl) {
+            this.pendingFocusGrid = false;
+            this.focusGridSoon();
+        }
+        if (this.pendingScroll && this.open && this.listEl) {
+            const mode = this.pendingScroll;
+            this.pendingScroll = null;
+            this.scrollActiveIntoView(mode);
+        }
+        if (this.pendingFocusTrigger) {
+            this.pendingFocusTrigger = false;
+            (_a = this.triggerBtn) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    // ── Options ────────────────────────────────────────────────
+    get step() {
+        const s = Math.round(Number(this.stepMinutes));
+        return Number.isFinite(s) && s > 0 ? Math.min(720, s) : 15;
+    }
+    /** Grid of minutes-of-day, plus the committed hour when it falls off-grid
+     *  (an imported 16:37 meeting must stay visible and selectable). */
+    get options() {
+        var _a, _b;
+        return timeOptions(this.step, (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : null);
+    }
+    // ── Render ─────────────────────────────────────────────────
+    renderTrigger(t) {
+        const p = this.parts;
+        const text = p
+            ? `${formatDisplay(p.dayKey, this.displayFormat, this.locale)}, ${clockLabel(p.minutes, this.locale, this.hour12)}`
+            : '';
+        const showClear = this.clearable && !!p && !this.disabled && !this.readonly;
+        return (h("div", { class: {
+                'co-date-time-picker__field': true,
+                'co-date-time-picker__field--disabled': this.disabled,
+                'co-date-time-picker__field--readonly': this.readonly,
+                'co-date-time-picker__field--invalid': this.isInvalid,
+                [`co-date-time-picker__field--${this.size}`]: true,
+            }, part: "field" }, h("co-icon", { name: "calendar", size: 16, class: "co-date-time-picker__icon" }), h("button", { ref: (el) => (this.triggerBtn = el), type: "button", class: "co-date-time-picker__display", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onKeyDown: this.onTriggerKeyDown, onFocus: () => this.coFocus.emit(), onBlur: () => this.coBlur.emit(), part: "display" }, text ? (h("span", { class: "co-date-time-picker__text" }, text)) : (h("span", { class: "co-date-time-picker__placeholder" }, this.placeholder || t.setDateTime))), this.clearable && (h("button", { class: {
+                'co-date-time-picker__clear': true,
+                'co-date-time-picker__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: this.onClearClick, "aria-label": t.clearDateTime, part: "clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" })))));
+    }
+    renderPanel(t, touch) {
+        var _a, _b, _c, _d;
+        const selected = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : null;
+        return (h("div", { class: {
+                'co-date-time-picker__panel': true,
+                'co-date-time-picker__panel--touch': touch,
+            } }, h("co-calendar", { ref: (el) => (this.calendarEl = el), class: "co-date-time-picker__calendar", "data-touch": touch ? '' : undefined, value: (_d = (_c = this.parts) === null || _c === void 0 ? void 0 : _c.dayKey) !== null && _d !== void 0 ? _d : null, min: this.dayBound(this.min), max: this.dayBound(this.max), disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, onCoSelect: this.onCalendarSelect }), h("div", { ref: (el) => (this.listEl = el), class: "co-date-time-picker__times", role: "listbox", tabIndex: 0, "aria-label": t.timeLabel, "aria-activedescendant": `co-dtp-time-${this.activeMinutes}`, onKeyDown: this.onListKeyDown }, this.options.map((m) => (h("div", { key: m, id: `co-dtp-time-${m}`, role: "option", "aria-selected": m === selected ? 'true' : 'false', "data-active": m === this.activeMinutes ? 'true' : undefined, class: {
+                'co-date-time-picker__time': true,
+                'co-date-time-picker__time--selected': m === selected,
+                'co-date-time-picker__time--active': m === this.activeMinutes,
+            }, onClick: () => this.pickTime(m) }, clockLabel(m, this.locale, this.hour12)))))));
+    }
+    renderHelper() {
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        if (!helper)
+            return null;
+        return (h("div", { class: {
+                'co-date-time-picker__helper': true,
+                'co-date-time-picker__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && h("co-icon", { name: "warning-circle", size: 14 }), h("span", null, helper)));
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("label", { class: "co-date-time-picker__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })));
+    }
+    render() {
+        var _a;
+        const t = getDateStrings(this.locale);
+        return (h("div", { key: '45d0284c91912bd5ee6f2c6a348611e0ef7c0dfc', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+            h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
+            h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
+        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '1afc6190afea10f2dc7c9a04ed2624cc3a80e0f5', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+    }
+    static get is() { return "co-date-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-date-time-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-date-time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed value: UTC ISO instant (\"2026-07-25T21:30:00.000Z\") or null."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "timeZone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "IANA zone the wall clock is rendered in. Defaults to the browser zone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-zone"
+            },
+            "stepMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minutes between consecutive options in the time list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-minutes",
+                "defaultValue": "15"
+            },
+            "hour12": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "12-hour clock (Google style). `false` renders a 24h clock."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-1-2",
+                "defaultValue": "true"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest selectable day. Date-only \"YYYY-MM-DD\" or an instant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest selectable day. Date-only \"YYYY-MM-DD\" or an instant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-dates"
+            },
+            "disabledDaysOfWeek": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-days-of-week"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date part of the trigger text (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format",
+                "defaultValue": "'d MMM yyyy'"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size, mirrors co-input/co-date-field: s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`flat` strips the trigger's border/background so it reads as content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "true"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/positioning",
+                            "id": "src/utils/positioning.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Popover placement relative to the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max viewport width (px) that renders the panel as a bottom sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "600"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "activeMinutes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed instant (UTC ISO) or null."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coFocus",
+                "name": "coFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coBlur",
+                "name": "coBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coOpen",
+                "name": "coOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+// ── Module-level caches ──────────────────────────────────────
+// Intl.DateTimeFormat is expensive to construct and these labels are recomputed
+// on every render over a BOUNDED domain (≤96 minutes-of-day × 1-2 locales): the
+// RESULT is cached (and the formatter, for the miss). Hygiene clear at 2000
+// entries — unreachable in normal use, it only guards pathological iteration.
+const LABEL_CACHE = new Map();
+const LABEL_FMT_CACHE = new Map();
+const OPTIONS_CACHE = new Map();
+/** Minutes-of-day → localized clock label ("4:30 p. m." / "16:30"). */
+function clockLabel(minutes, locale, hour12) {
+    const key = `${locale}|${hour12 ? 12 : 24}|${minutes}`;
+    const hit = LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = LABEL_FMT_CACHE.get(`${locale}|${hour12 ? 12 : 24}`);
+    if (!fmt) {
+        // hour12 forced (not left to the locale): "es" bare is a 24h locale and
+        // would render bare numbers with no am/pm marker.
+        fmt = new Intl.DateTimeFormat(locale, Object.assign({ hour: 'numeric', minute: '2-digit' }, (hour12 ? { hour12: true } : { hourCycle: 'h23' })));
+        LABEL_FMT_CACHE.set(`${locale}|${hour12 ? 12 : 24}`, fmt);
+    }
+    const out = fmt.format(new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60));
+    if (LABEL_CACHE.size > 2000)
+        LABEL_CACHE.clear();
+    LABEL_CACHE.set(key, out);
+    return out;
+}
+/** Minutes-of-day grid at `step`, plus `extra` when it falls off-grid. */
+function timeOptions(step, extra) {
+    const key = `${step}|${extra !== null && extra !== void 0 ? extra : ''}`;
+    const hit = OPTIONS_CACHE.get(key);
+    if (hit)
+        return hit;
+    const out = [];
+    for (let m = 0; m < MINUTES_PER_DAY; m += step)
+        out.push(m);
+    if (extra != null && extra >= 0 && extra < MINUTES_PER_DAY && !out.includes(extra)) {
+        out.push(extra);
+        out.sort((a, b) => a - b);
+    }
+    if (OPTIONS_CACHE.size > 200)
+        OPTIONS_CACHE.clear();
+    OPTIONS_CACHE.set(key, out);
+    return out;
+}