@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

package/dist/cjs/co-date-time-picker.cjs.entry.js

@@ -0,0 +1,409 @@
+'use strict';
+
+var index = require('./index-DK-2Lzmf.js');
+var requiredMark = require('./requiredMark-C1xcrzSZ.js');
+var dateI18n = require('./dateI18n-wblvKRq_.js');
+var tz = require('./tz-Dgom0W69.js');
+var dates = require('./dates-TQLHlFd2.js');
+var time = require('./time-LBHtzLHe.js');
+
+const coDateTimePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-time-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-time-picker__label{padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-time-picker co-popover{display:block;width:100%}.co-date-time-picker__trigger{display:block;width:100%}.co-date-time-picker__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;min-width:0}.co-date-time-picker__field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-time-picker__field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-time-picker__field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}:host([variant='flat']) .co-date-time-picker__field{background:transparent;border-color:transparent}.co-date-time-picker__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-time-picker__display{flex:1;min-width:0;display:flex;align-items:center;min-height:22px;padding:0;margin:0;border:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);text-align:left;cursor:pointer;outline:none}.co-date-time-picker__text,.co-date-time-picker__placeholder{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-date-time-picker__placeholder{color:var(--co-semantic-text-muted)}.co-date-time-picker__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-date-time-picker__clear--hidden{visibility:hidden;pointer-events:none}.co-date-time-picker__clear:hover{color:var(--co-semantic-text-default)}.co-date-time-picker__field:focus-within{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-time-picker__field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.co-date-time-picker__field--disabled .co-date-time-picker__display,.co-date-time-picker__field--disabled .co-date-time-picker__placeholder,.co-date-time-picker__field--disabled .co-date-time-picker__icon{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-time-picker__field--readonly .co-date-time-picker__display{cursor:default}.co-date-time-picker__field--invalid{border-color:var(--co-semantic-status-error)}.co-date-time-picker__field--invalid:focus-within{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-time-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-time-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-time-picker__panel{display:flex;align-items:stretch;gap:var(--co-spacing-md);padding:var(--co-spacing-md)}.co-date-time-picker__calendar{flex:0 0 auto}.co-date-time-picker__times{position:relative;flex:0 0 auto;width:7.5rem;max-height:17.5rem;overflow-y:auto;overscroll-behavior:contain;padding-left:var(--co-spacing-sm2);border-left:1px solid var(--co-semantic-border-default);outline:none;box-sizing:border-box}.co-date-time-picker__times:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px;border-radius:var(--co-border-radius-xxs)}.co-date-time-picker__time{padding:var(--co-spacing-sm) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xxs);color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap;cursor:pointer;user-select:none}.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected){background:var(--co-semantic-surface-hover)}.co-date-time-picker__time--active:not(.co-date-time-picker__time--selected){box-shadow:inset 0 0 0 1px var(--co-semantic-border-focus)}.co-date-time-picker__time--selected{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);font-weight:600}.co-date-time-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}.co-date-time-picker__panel--touch{flex-direction:column;align-items:center}.co-date-time-picker__panel--touch .co-date-time-picker__times{width:100%;max-width:20rem;max-height:12rem;padding-left:0;padding-top:var(--co-spacing-sm2);border-left:none;border-top:1px solid var(--co-semantic-border-default)}.co-date-time-picker__panel--touch .co-date-time-picker__time{min-height:44px;display:flex;align-items:center}:host([layout='horizontal']) .co-date-time-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-time-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0;white-space:normal}:host([layout='horizontal']) .co-date-time-picker>:not(.co-date-time-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+
+/** Wall-clock minute assumed when the incoming value carries no time of day. */
+const DEFAULT_MINUTES = 9 * 60;
+const CoDateTimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        this.coFocus = index.createEvent(this, "coFocus", 7);
+        this.coBlur = index.createEvent(this, "coBlur", 7);
+        this.coOpen = index.createEvent(this, "coOpen", 3);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        /** 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 : tz.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 || tz.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: tz.zonedDateKey(v, this.zone), minutes: tz.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 tz.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 = tz.wallClockToEpoch({ year, month, day, hour: Math.floor(minutes / 60), minute: minutes % 60, second: 0 }, this.zone);
+        const iso = tz.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
+            ? `${dates.formatDisplay(p.dayKey, this.displayFormat, this.locale)}, ${clockLabel(p.minutes, this.locale, this.hour12)}`
+            : '';
+        const showClear = this.clearable && !!p && !this.disabled && !this.readonly;
+        return (index.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" }, index.h("co-icon", { name: "calendar", size: 16, class: "co-date-time-picker__icon" }), index.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 ? (index.h("span", { class: "co-date-time-picker__text" }, text)) : (index.h("span", { class: "co-date-time-picker__placeholder" }, this.placeholder || t.setDateTime))), this.clearable && (index.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" }, index.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 (index.h("div", { class: {
+                'co-date-time-picker__panel': true,
+                'co-date-time-picker__panel--touch': touch,
+            } }, index.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 }), index.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) => (index.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 (index.h("div", { class: {
+                'co-date-time-picker__helper': true,
+                'co-date-time-picker__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && index.h("co-icon", { name: "warning-circle", size: 14 }), index.h("span", null, helper)));
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (index.h("label", { class: "co-date-time-picker__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })));
+    }
+    render() {
+        var _a;
+        const t = dateI18n.getDateStrings(this.locale);
+        return (index.h("div", { key: '60bb94ab59fc09e96a930a5a615671e8f3eb1baf', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+            index.h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
+            index.h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, index.h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
+        ]) : (index.h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, index.h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && index.h("input", { key: '820935f800a6a1ecb036751e9267edfdad8f574d', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+// ── 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 < time.MINUTES_PER_DAY; m += step)
+        out.push(m);
+    if (extra != null && extra >= 0 && extra < time.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;
+}
+CoDateTimePicker.style = coDateTimePickerCss();
+
+exports.co_date_time_picker = CoDateTimePicker;

package/dist/cjs/co-drive-card.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-kBiXCEE7.js');
+var index = require('./index-DK-2Lzmf.js');
 
-const coDriveCardCss = () => `:host{display:block}.co-drive-card{--dc-accent:var(--co-color-primary-azul, #2563eb);position:relative;box-sizing:border-box;width:100%;border-radius:14px;cursor:pointer;outline:none;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco, #fff);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card:focus-visible{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card--folder{display:flex;align-items:center;gap:12px;transition:box-shadow 0.14s ease, background 0.12s ease}.co-drive-card--folder.co-drive-card--comfy{padding:14px}.co-drive-card--folder.co-drive-card--compact{padding:10px 12px}.co-drive-card--folder:hover:not(.co-drive-card--selected){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--folder.co-drive-card--selected{background:color-mix(in srgb, var(--dc-accent) 7%, white);box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__tile{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:color-mix(in srgb, var(--dc-accent) 12%, white);color:var(--dc-accent)}.co-drive-card--comfy .co-drive-card__tile{width:44px;height:44px}.co-drive-card--compact .co-drive-card__tile{width:38px;height:38px}.co-drive-card__text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__name{font-family:var(--co-font-family-primary);font-size:14px;font-weight:500;line-height:1.3;color:var(--co-color-base-negro, #1f1c1b);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__meta{font-family:var(--co-font-family-primary);font-size:12px;color:var(--co-color-gray-500, #888888);margin-top:2px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__trailing{flex-shrink:0;display:flex;align-items:center;gap:6px}.co-drive-card__star{display:inline-flex;color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card--file{display:flex;flex-direction:column;gap:10px;transition:box-shadow 0.14s ease}.co-drive-card--file.co-drive-card--comfy{padding:10px}.co-drive-card--file.co-drive-card--compact{padding:8px}.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected){box-shadow:inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25))}.co-drive-card--file.co-drive-card--selected{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__thumb{display:block;border-radius:10px;overflow:hidden;background:var(--co-color-gray-100, #f6f6f6)}.co-drive-card--comfy .co-drive-card__thumb{height:132px}.co-drive-card--compact .co-drive-card__thumb{height:96px}.co-drive-card__thumb ::slotted(*){display:block;width:100%;height:100%}.co-drive-card__thumb ::slotted(img){object-fit:cover}.co-drive-card--file .co-drive-card__name{font-size:13px}.co-drive-card__sub{font-family:var(--co-font-family-primary);font-size:11.5px;color:var(--co-color-gray-500, #888888);margin-top:1px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__foot{display:flex;align-items:center;gap:8px;padding:0 2px 2px}.co-drive-card__type{flex-shrink:0;display:inline-flex}.co-drive-card__foot-text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__actions{flex-shrink:0;display:inline-flex;align-items:center;color:var(--co-color-gray-400, #a0a0a0);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__actions{opacity:1}.co-drive-card__star-overlay{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--co-color-base-blanco, #fff);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__star-overlay,.co-drive-card--starred .co-drive-card__star-overlay{opacity:1}.co-drive-card--starred .co-drive-card__star-overlay{color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card__select{position:absolute;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;opacity:0;transition:opacity 0.12s ease;background:rgba(255, 255, 255, 0.9);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16))}.co-drive-card:hover .co-drive-card__select,.co-drive-card--selected .co-drive-card__select{opacity:1}.co-drive-card--folder .co-drive-card__select{top:8px;left:8px;width:20px;height:20px}.co-drive-card--file .co-drive-card__select{top:16px;left:16px;width:22px;height:22px;background:rgba(255, 255, 255, 0.92)}.co-drive-card--selected .co-drive-card__select{background:var(--dc-accent);box-shadow:none}.co-drive-card__check{display:block;pointer-events:none}`;
+const coDriveCardCss = () => `:host{display:block}.co-drive-card{--dc-accent:var(--co-color-primary-azul, #2563eb);position:relative;box-sizing:border-box;width:100%;border-radius:14px;cursor:pointer;outline:none;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco, #fff);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card:focus-visible{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card--folder{display:flex;align-items:center;gap:12px;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-drive-card--folder.co-drive-card--comfy{padding:14px}.co-drive-card--folder.co-drive-card--compact{padding:10px 12px}.co-drive-card--folder:hover:not(.co-drive-card--selected){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--folder.co-drive-card--selected{background:color-mix(in srgb, var(--dc-accent) 7%, white);box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__tile{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:color-mix(in srgb, var(--dc-accent) 12%, white);color:var(--dc-accent)}.co-drive-card--comfy .co-drive-card__tile{width:44px;height:44px}.co-drive-card--compact .co-drive-card__tile{width:38px;height:38px}.co-drive-card__text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__name{font-family:var(--co-font-family-primary);font-size:14px;font-weight:500;line-height:1.3;color:var(--co-color-base-negro, #1f1c1b);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__meta{font-family:var(--co-font-family-primary);font-size:12px;color:var(--co-color-gray-500, #888888);margin-top:2px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__trailing{flex-shrink:0;display:flex;align-items:center;gap:6px}.co-drive-card__star{display:inline-flex;color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card--file{display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-drive-card--file.co-drive-card--comfy{padding:10px}.co-drive-card--file.co-drive-card--compact{padding:8px}.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected){box-shadow:inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25))}.co-drive-card--file.co-drive-card--selected{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__thumb{display:block;border-radius:10px;overflow:hidden;background:var(--co-color-gray-100, #f6f6f6)}.co-drive-card--comfy .co-drive-card__thumb{height:132px}.co-drive-card--compact .co-drive-card__thumb{height:96px}.co-drive-card__thumb ::slotted(*){display:block;width:100%;height:100%}.co-drive-card__thumb ::slotted(img){object-fit:cover}.co-drive-card--file .co-drive-card__name{font-size:13px}.co-drive-card__sub{font-family:var(--co-font-family-primary);font-size:11.5px;color:var(--co-color-gray-500, #888888);margin-top:1px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__foot{display:flex;align-items:center;gap:8px;padding:0 2px 2px}.co-drive-card__type{flex-shrink:0;display:inline-flex}.co-drive-card__foot-text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__actions{flex-shrink:0;display:inline-flex;align-items:center;color:var(--co-color-gray-400, #a0a0a0);opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-drive-card:hover .co-drive-card__actions{opacity:1}.co-drive-card__star-overlay{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--co-color-base-blanco, #fff);opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-drive-card:hover .co-drive-card__star-overlay,.co-drive-card--starred .co-drive-card__star-overlay{opacity:1}.co-drive-card--starred .co-drive-card__star-overlay{color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card__select{position:absolute;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);background:rgba(255, 255, 255, 0.9);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16))}.co-drive-card:hover .co-drive-card__select,.co-drive-card--selected .co-drive-card__select{opacity:1}.co-drive-card--folder .co-drive-card__select{top:8px;left:8px;width:20px;height:20px}.co-drive-card--file .co-drive-card__select{top:16px;left:16px;width:22px;height:22px;background:rgba(255, 255, 255, 0.92)}.co-drive-card--selected .co-drive-card__select{background:var(--dc-accent);box-shadow:none}.co-drive-card__check{display:block;pointer-events:none}`;
 
 const CoDriveCard = class {
     constructor(hostRef) {
@@ -66,7 +66,7 @@ const CoDriveCard = class {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (index.h("div", { key: '942d53fe6341ba7c24665b6f10762eeb8aaad3f7', class: {
+        return (index.h("div", { key: '62056a659681c95fb1bdd8dc471b8543581f1662', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/cjs/co-drop-zone.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kBiXCEE7.js');
+var index = require('./index-DK-2Lzmf.js');
 
 const coDropZoneCss = () => `:host{position:relative;display:block}.co-drop-zone__overlay{position:absolute;inset:12px;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:16px;border:2px dashed var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));background:color-mix(     in srgb,     var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb)) 8%,     rgba(255, 255, 255, 0.85)   );-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}.co-drop-zone__badge{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:var(--co-color-base-blanco, #fff);color:var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04))}.co-drop-zone__label{font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);font-size:18px;font-weight:500;color:var(--co-color-base-negro, #1f1c1b)}`;
 
@@ -55,7 +55,7 @@ const CoDropZone = class {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (index.h(index.Host, { key: '3358f8a880d1105209b5047fe14b49c5c2d67033', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("slot", { key: 'd1fb8f1e918d1ca7d26b40d60903e743855d70e7' }), this.active && (index.h("div", { key: '72a2df7b78205ffa6da676c850fec495ea6e3e68', class: "co-drop-zone__overlay", part: "overlay" }, index.h("div", { key: 'a25910837ccb5d20b16870272780578d2e3229a2', class: "co-drop-zone__badge", part: "badge" }, index.h("co-icon", { key: '5066e11590b64c48d2397be0af1a85d1a353a952', name: this.icon, size: 34 })), index.h("span", { key: '53237cbb8ec4c607ac7c7846419d65e63a8cfef6', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (index.h(index.Host, { key: 'a5bf9dd9d62d7d7d2ec1b0d277a267b721ea430d', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("slot", { key: '609343dd414c752617e50f73f36f55d4edfc773f' }), this.active && (index.h("div", { key: '03f38f63b2cf7d9a166d31541f1c21bb2953c80f', class: "co-drop-zone__overlay", part: "overlay" }, index.h("div", { key: '7b8cd9daa821d224e40507646a166190ea5f917f', class: "co-drop-zone__badge", part: "badge" }, index.h("co-icon", { key: 'f5f201175801233c4d32772dab7f947c8886ca34', name: this.icon, size: 34 })), index.h("span", { key: '766d7defd61ab35ab07b6b51c3fe177eb3afee2e', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
 };
 CoDropZone.style = coDropZoneCss();

package/dist/cjs/co-empty-state.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kBiXCEE7.js');
+var index = require('./index-DK-2Lzmf.js');
 
 const coEmptyStateCss = () => `:host{display:block}.co-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--co-spacing-2xl) var(--co-spacing-xl);font-family:var(--co-font-family-primary);max-width:492px;margin:0 auto}.co-empty-state__icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--co-color-gray-100, #f6f6f6);color:var(--co-semantic-text-muted);margin-bottom:var(--co-spacing-xl)}.co-empty-state__heading{font-size:var(--co-font-size-20);font-weight:600;color:var(--co-semantic-text-default);margin-bottom:var(--co-spacing-sm)}.co-empty-state__description{font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);line-height:1.5;margin-bottom:var(--co-spacing-xl)}.co-empty-state__actions{display:flex;gap:var(--co-spacing-md);flex-wrap:wrap;justify-content:center}.co-empty-state__actions:empty{display:none}.co-empty-state--card{gap:var(--co-spacing-3xl, 32px);padding:var(--co-spacing-5xl, 48px) var(--co-spacing-3xl, 32px);background:var(--co-color-base-blanco, #fff);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-lg, 16px)}.co-empty-state--card .co-empty-state__icon{margin-bottom:0;background:var(--co-color-gray-100, #f6f6f6);color:var(--co-color-gray-600, #585858)}.co-empty-state--card .co-empty-state__heading{margin-bottom:0}.co-empty-state--card .co-empty-state__description{margin-bottom:0;line-height:1.35;color:var(--co-color-gray-600, #585858);max-width:366px}.co-empty-state--l .co-empty-state__icon{width:98px;height:98px}.co-empty-state--l .co-empty-state__heading{font-size:var(--co-font-size-24, 24px);font-weight:500;line-height:1.25}`;
 
@@ -15,11 +15,11 @@ const CoEmptyState = class {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (index.h("div", { key: 'f43461cfe3b4336f099a164130201842eb4c9634', class: {
+        return (index.h("div", { key: 'fd0802c7ab379e2ff69d181a89e82f9af50c7eb7', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (index.h("div", { key: 'c8232663644d30471b3cf7bba67798baa0a0d75a', class: "co-empty-state__icon" }, index.h("co-icon", { key: '0bbd66e7d8b930fa33f52039e90714b4d0e436a8', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (index.h("div", { key: '17df7252b0cb40161798ce3b677efb7a2c1247f2', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: '52226dbdab22fc0524f6b49b4628dc68daf6a7fc', class: "co-empty-state__description" }, this.description)), index.h("div", { key: '9a27fe8be272eb5b6c0f820bd8671842a7ae4487', class: "co-empty-state__actions" }, index.h("slot", { key: '0cd1c07318977ac5aa3b55602f31c51a71682ee4' }))));
+            }, part: "empty-state" }, this.icon && (index.h("div", { key: '0e37fbc4e087c5bc5ac69eee01cecd9fcde09f49', class: "co-empty-state__icon" }, index.h("co-icon", { key: '0e75bba07af87b883e7cb236800282af51c4b84f', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (index.h("div", { key: '69ea3039e73b48f77fa6e58d673802d34506c4ef', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: '223d8321af110cbde025a59e3677338abee0cc33', class: "co-empty-state__description" }, this.description)), index.h("div", { key: 'bfba2044eacf53aae426fb99dc1f2d5314a0b8e6', class: "co-empty-state__actions" }, index.h("slot", { key: 'b22df42a753f9ca5797b373a611421e07881d3e1' }))));
     }
 };
 CoEmptyState.style = coEmptyStateCss();