@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

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

@@ -2,13 +2,15 @@ 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";
+import { 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.
+ * panel, outside-click) + `co-calendar` (day grid) + a side panel with
+ * shortcuts (`presetIds`: morning/noon/afternoon/endOfDay/now) and a segmented
+ * `co-time-field` (hh:mm, PageUp/PageDown stepping by `stepMinutes`) for the
+ * exact hour, plus a "Listo" button.
  *
  * 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
@@ -21,16 +23,26 @@ const DEFAULT_MINUTES = 9 * 60;
  * 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.
+ *   - Click the field → opens. Picking a DAY commits (with the current DRAFT
+ *     hour, not the previously committed one) and keeps the panel open — you
+ *     almost always want to set the hour next.
+ *   - The exact time is a DRAFT (`draftMinutes`) while `co-time-field` is
+ *     edited (`coInput`) — editing alone never commits. It only commits (and
+ *     closes) on: clicking a shortcut, Enter/`coCommit` from the time field,
+ *     or the "Listo" button.
+ *   - Outside click — and, on mobile, swiping the bottom sheet down — commits
+ *     the draft if it changed, then closes: the same "apply on blur" model a
+ *     text field uses.
+ *   - Escape is the opposite: an explicit DISCARD. It closes WITHOUT applying
+ *     the draft and returns focus to the trigger field.
  *   - 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.
+ *   - Mobile (viewport ≤ `mobileBreakpoint`) renders the same panel as a
+ *     bottom sheet (`co-drawer position="bottom"`) instead of the desktop
+ *     popover; the draft/commit/discard model is identical.
  *
- * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return to
- * the field; outside-click stays with co-popover.
+ * Escape is owned here (co-popover `closeOnEscape=false`) so focus can return
+ * to the field; outside-click/sheet-dismiss stay with co-popover/co-drawer and
+ * are handled by `closeApplyingDraft` (see its doc for the Escape asymmetry).
  *
  * @part field - The bordered trigger row
  * @part label - The field label
@@ -42,8 +54,10 @@ 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. */
+        /** Paso de PageUp/PageDown del campo de hora (antes: paso de la lista). */
         this.stepMinutes = 15;
+        /** Atajos del panel, en orden. Ids del catálogo: morning|noon|afternoon|endOfDay|now. */
+        this.presetIds = ['morning', 'noon', 'afternoon', 'endOfDay', 'now'];
         /** 12-hour clock (Google style). `false` renders a 24h clock. */
         this.hour12 = true;
         this.locale = 'es-CO';
@@ -69,12 +83,10 @@ export class CoDateTimePicker {
         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;
+        /** Minutes-of-day drafted in the exact-time field (co-time-field), not yet committed. */
+        this.draftMinutes = 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;
         };
@@ -101,65 +113,44 @@ export class CoDateTimePicker {
             this.coClear.emit();
             this.coChange.emit(null);
         };
-        // ── Calendar / time list ───────────────────────────────────
+        // ── Calendar / exact time ──────────────────────────────────
         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';
+            // Google: el día committea sin cerrar. La hora que acompaña es el DRAFT
+            // (lo último editado en el campo), no la committeada — así "cambio la hora
+            // y después el día" no pisa la edición.
+            this.commit(dayKey, this.draftMinutes);
         };
         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;
+            this.draftMinutes = 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';
+        this.onTimeFieldInput = (e) => {
+            // null = draft incompleto (segmento vaciado): se conserva el último draft
+            // válido, así Listo/Enter nunca committean basura ni quedan bloqueados.
+            if (e.detail != null)
+                this.draftMinutes = e.detail;
+        };
+        this.onTimeFieldCommit = (e) => {
+            this.pickTime(e.detail);
         };
+        // co-time-field emits `coEscape` on Escape but the host does NOT wire it: its
+        // own onSegKeyDown does NOT stopPropagation on the native keydown on purpose
+        // ("el host también escucha Escape en su root; acá solo se anuncia la
+        // intención"), so the ONLY owner of Escape is `onRootKeyDown` below — it must
+        // still see `this.open === true` when the (still-bubbling) native keydown
+        // reaches it. Wiring a synchronous host handler to `coEscape` would flip
+        // `open` to false BEFORE the native keydown finishes bubbling, so the root's
+        // `this.open` guard would already be false, skip `stopPropagation()`, and
+        // let Escape reach `document` — closing a host co-drawer wrapped around this
+        // picker (co-drawer's default `closeOnEscape=true`).
         // ── Popover lifecycle ──────────────────────────────────────
         this.onPopoverOpen = () => {
             var _a, _b;
@@ -170,15 +161,30 @@ export class CoDateTimePicker {
                 return;
             }
             if (!this.open) {
-                this.open = true; // triggers @Watch('open') → active hour + scroll
+                this.open = true; // triggers @Watch('open') → seeds the draft hour
                 this.coOpen.emit();
             }
         };
-        this.onPopoverClose = () => {
-            if (this.open) {
-                this.open = false;
-                this.coClose.emit();
+        /**
+         * Closes applying whatever is drafted (R7) — outside click / drawer
+         * swipe-down behave like a field's blur: what you typed sticks. This is
+         * the ONLY path that commits the draft on close; Escape is the opposite —
+         * an explicit discard — and it does NOT go through here: `onRootKeyDown`
+         * flips `this.open` to `false` via `setOpen()` FIRST, so by the time the
+         * real co-popover/co-drawer finish closing and bubble their own `coClose`
+         * back to `onPopoverClose`/this drawer's `onCoClose`, the guard below
+         * already reads `false` and no-ops — the draft is discarded, not applied.
+         */
+        this.closeApplyingDraft = () => {
+            if (!this.open)
+                return;
+            if (this.parts && this.draftMinutes !== this.parts.minutes) {
+                this.commit(this.parts.dayKey, this.draftMinutes);
             }
+            this.setOpen(false);
+        };
+        this.onPopoverClose = () => {
+            this.closeApplyingDraft();
         };
         this.onRootKeyDown = (e) => {
             if (e.key === 'Escape' && this.open) {
@@ -201,13 +207,20 @@ export class CoDateTimePicker {
         var _a;
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mqlHandler);
     }
+    componentWillLoad() {
+        var _a, _b;
+        // Seeds the draft once at load: @Watch('open') below only fires on a
+        // LATER open transition, not for a host mounted with open=true from the
+        // start (a bound `open` prop that's already true at construction) — that
+        // mount path would otherwise leave `draftMinutes` unset.
+        this.draftMinutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
+    }
     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';
+        // Opening: seed the draft with the committed hour, 09:00 when empty.
+        this.draftMinutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
     }
     // ── Derived value ──────────────────────────────────────────
     get zone() {
@@ -263,6 +276,21 @@ export class CoDateTimePicker {
         this.value = iso;
         this.coChange.emit(iso);
     }
+    get presets() {
+        const raw = typeof this.presetIds === 'string'
+            ? this.presetIds.split(',').map((s) => s.trim()).filter(Boolean)
+            : this.presetIds;
+        // Dedupe: a repeated id in presetIds would otherwise render duplicate
+        // buttons with the SAME `key`, which Stencil's vdom can't reconcile.
+        const ids = Array.from(new Set(raw !== null && raw !== void 0 ? raw : []));
+        return ids
+            .filter((id) => id in CoDateTimePicker.PRESET_CATALOG)
+            .map((id) => {
+            const def = CoDateTimePicker.PRESET_CATALOG[id];
+            const minutes = def.minutes === 'now' ? zonedMinutesOfDay(Date.now(), this.zone) : def.minutes;
+            return { id, icon: def.icon, minutes };
+        });
+    }
     // ── Focus / scroll bookkeeping ─────────────────────────────
     focusGridSoon() {
         requestAnimationFrame(() => {
@@ -270,56 +298,22 @@ export class CoDateTimePicker {
             (_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 ────────────────────────────────────────────────
+    // ── Time field paging ─────────────────────────────────────
     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;
@@ -339,16 +333,17 @@ export class CoDateTimePicker {
             }, 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;
+        var _a, _b;
         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)))))));
+            } }, h("co-calendar", { ref: (el) => (this.calendarEl = el), class: "co-date-time-picker__calendar", "data-touch": touch ? '' : undefined, value: (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.dayKey) !== null && _b !== void 0 ? _b : 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", { class: "co-date-time-picker__side" }, h("div", { class: "co-date-time-picker__sect" }, t.shortcuts), h("div", { class: "co-date-time-picker__presets" }, this.presets.map((p) => (h("button", { key: p.id, type: "button", class: "co-date-time-picker__preset", disabled: this.disabled || this.readonly, onClick: () => {
+                // 'now' is resolved fresh AT CLICK, not frozen at the render
+                // that computed `p.minutes` for the hint — a panel left open
+                // past the minute must still commit the current time.
+                const m = p.id === 'now' ? zonedMinutesOfDay(Date.now(), this.zone) : p.minutes;
+                this.pickTime(m);
+            } }, h("co-icon", { name: p.icon, size: 16, class: "co-date-time-picker__preset-icon" }), h("span", { class: "co-date-time-picker__preset-label" }, t[p.id]), h("span", { class: "co-date-time-picker__preset-hint" }, clockLabel(p.minutes, this.locale, this.hour12)))))), h("div", { class: "co-date-time-picker__sect co-date-time-picker__sect--time" }, t.timeExact), h("co-time-field", { "data-touch": touch ? '' : undefined, value: this.draftMinutes, hour12: this.hour12, locale: this.locale, pageStep: this.step, disabled: this.disabled || this.readonly, onCoInput: this.onTimeFieldInput, onCoCommit: this.onTimeFieldCommit }), h("div", { class: "co-date-time-picker__footer" }, h("button", { type: "button", class: "co-date-time-picker__btn co-date-time-picker__btn--primary", disabled: this.disabled || this.readonly, onClick: () => this.pickTime(this.draftMinutes) }, t.done)))));
     }
     renderHelper() {
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
@@ -367,10 +362,10 @@ export class CoDateTimePicker {
     render() {
         var _a;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '8ccc0e31d77dfce13ab5fdd27294d6a93944f5ae', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+        return (h("div", { key: 'a128077a99e226422be0ce805cfa16db44212cd1', 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: 'c54ad2d2ebeccc0f6f4c836d25b5de0bee6376fc', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+            h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: this.closeApplyingDraft }, 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: '18d0a3100dcb58c86fd7081b654fdf7d8d7e5e19', 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"; }
@@ -437,7 +432,7 @@ export class CoDateTimePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Minutes between consecutive options in the time list."
+                    "text": "Paso de PageUp/PageDown del campo de hora (antes: paso de la lista)."
                 },
                 "getter": false,
                 "setter": false,
@@ -445,6 +440,26 @@ export class CoDateTimePicker {
                 "attribute": "step-minutes",
                 "defaultValue": "15"
             },
+            "presetIds": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Atajos del panel, en orden. Ids del cat\u00E1logo: morning|noon|afternoon|endOfDay|now."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-ids",
+                "defaultValue": "['morning', 'noon', 'afternoon', 'endOfDay', 'now']"
+            },
             "hour12": {
                 "type": "boolean",
                 "mutable": false,
@@ -928,7 +943,7 @@ export class CoDateTimePicker {
     static get states() {
         return {
             "isMobile": {},
-            "activeMinutes": {}
+            "draftMinutes": {}
         };
     }
     static get events() {
@@ -1032,14 +1047,21 @@ export class CoDateTimePicker {
             }];
     }
 }
+CoDateTimePicker.PRESET_CATALOG = {
+    morning: { icon: 'sun-horizon', minutes: 9 * 60 },
+    noon: { icon: 'sun', minutes: 12 * 60 },
+    afternoon: { icon: 'coffee', minutes: 15 * 60 },
+    endOfDay: { icon: 'moon', minutes: 18 * 60 },
+    now: { icon: 'clock', minutes: 'now' },
+};
 // ── 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.
+// on every render over a BOUNDED domain (the trigger's 1 value + up to 5
+// presets, ≤6 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}`;
@@ -1059,21 +1081,3 @@ function clockLabel(minutes, locale, hour12) {
     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;
-}

package/dist/collection/components/co-drawer/co-drawer.css

@@ -1,3 +1,88 @@
+/* squircle-surface.css — receta ÚNICA de superficie squircle (co-app-shell,
+   co-drawer, co-modal). Se @import-a desde el CSS del componente como PRIMER
+   statement (Stencil inlinea @import relativos; precedente co-select.css:3) y
+   el tsx agrega las clases. Spec: prolibu-front-v2/docs/superpowers/specs/
+   2026-09-02-suite-v2-intel-perf-remediation-design.md §7 (E1, E5).
+
+   Variables que declara CADA consumidor sobre el elemento (o un ancestro):
+     --co-sq-r            radio de esquina
+     --co-sq-shadow       box-shadow (rama Chromium ≥139, sigue el corner-shape)
+     --co-sq-drop-shadow  filter drop-shadow (fallback Safari/Firefox)
+   Conversión entre ambas: drop-shadow(x y σ) ≡ box-shadow x y 2σ.
+
+   Clases:
+     .co-sq-elevation           sombra que sigue la silueta squircle
+     .co-sq-clip                recorte superelíptico SIN máscara
+     .co-sq-elevation-fallback  SIEMPRE en un ancestro del .co-sq-clip: en el
+                                fallback la sombra es un `filter`, y `filter` se
+                                aplica antes que `mask` en el mismo elemento →
+                                la máscara la recortaría.
+
+   Reglas: (1) el componente NO redeclara border-radius / overflow / filter /
+   mask / box-shadow en esos elementos (una redeclaración posterior le gana al
+   partial por cascada; guard squircle-surface-guard.test.ts); (2)
+   .co-sq-elevation y .co-sq-clip pueden ir en el MISMO elemento (co-modal) o
+   en padre/hijo (shell, drawer); (3) `contain: layout` NO va acá: lo declara
+   cada componente donde E2/E20 lo piden.
+
+   Las 4 rutas SVG son una superelipse de exponente 4 = `corner-shape: squircle`
+   (superellipse(2)): misma silueta, error máx 1e-4 — a 14 px de radio la
+   diferencia con un círculo es ≤1.87 px en la punta. Sin `+2px` anti-costura en
+   la rama Chromium: sin máscara no hay costura posible (historia del hack: nota
+   de memoria cobalt-squircle-mask-seam). */
+
+.co-sq-elevation {
+  border-radius: var(--co-sq-r);
+  corner-shape: squircle;
+  box-shadow: var(--co-sq-shadow);
+}
+
+.co-sq-clip {
+  overflow: hidden;
+  border-radius: var(--co-sq-r);
+  corner-shape: squircle;
+}
+
+/* F2 (E1): Safari/Firefox = píxel-idéntico a la receta anterior (filter
+   drop-shadow en el ancestro + máscara de 6 capas en el clip). */
+@supports not (corner-shape: squircle) {
+  .co-sq-elevation {
+    box-shadow: none;
+  }
+
+  .co-sq-elevation-fallback {
+    filter: var(--co-sq-drop-shadow);
+  }
+
+  /* Declarado DESPUÉS de .co-sq-elevation a propósito: cuando ambas clases van
+     en el mismo elemento (co-modal) gana el radius 0 y la máscara define la
+     forma. 4 esquinas + cruz de 2 barras (H full-width, V full-height); las
+     barras van `calc(... + 2px)` para solapar cada esquina ~1px y evitar la
+     costura sub-píxel que flickeaba con el zoom. */
+  .co-sq-clip {
+    border-radius: 0;
+    --co-sq-tl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");
+    --co-sq-tr: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");
+    --co-sq-bl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");
+    --co-sq-br: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");
+    -webkit-mask:
+      var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,
+      linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;
+            mask:
+      var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,
+      linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,
+      linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;
+  }
+}
+
+
 :host {
   display: contents;
 }
@@ -8,22 +93,20 @@
   flex-direction: column;
   font-family: var(--co-font-family-primary);
   transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
-  will-change: transform;
+  will-change: transform; /* se conserva (E2): capa compuesta propia para el slide */
   z-index: 1;
-  /* Elevation: a layered soft drop-shadow that follows the squircle silhouette
-     of the inner card (drop-shadow respects the child mask; a box-shadow here
-     would be rectangular and the inner mask would clip it away). Same recipe
-     as co-app-shell .main / co-modal .co-modal__frame. */
-  filter:
-    drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))
-    drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));
-  /* Squircle geometry — shared with .co-drawer__card. Match the app-shell
-     surface radius (same knob co-app-shell uses). */
+  /* E2: containing block para el `position: fixed` interno que ancla
+     DealVersionHistoryDialog a la card del drawer (antes lo daba el filter). */
+  contain: layout;
+  /* Squircle + sombra: receta en global/squircle-surface.css. El ASIDE lleva
+     .co-sq-elevation (+ fallback): la sombra se rasteriza una vez en la capa
+     compuesta y viaja con el translate; la card lleva .co-sq-clip. Radio =
+     el mismo knob que co-app-shell. DrawerShell (suite-v2) apaga la sombra
+     por ::part(drawer){filter:none; box-shadow:none} en sus modos transparentes. */
   --co-drawer-r: var(--co-shell-r, var(--co-border-radius-md));
-  --co-sq-tl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");
-  --co-sq-tr: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");
-  --co-sq-bl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");
-  --co-sq-br: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-r: var(--co-drawer-r);
+  --co-sq-shadow: 0 1px 4px rgba(31, 28, 27, 0.06), 0 10px 56px rgba(31, 28, 27, 0.12);
+  --co-sq-drop-shadow: drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));
 }
 
 /* ─── Position: right (default) ───────────────────────────── */
@@ -83,34 +166,14 @@
 .co-drawer--bottom.co-drawer--xl   { height: 95vh; }
 .co-drawer--bottom.co-drawer--full { height: 100vh; }
 
-/* The visible card: smooth (squircle) corners, background + clip live here
-   (not on .co-drawer) so .co-drawer's drop-shadow isn't clipped by the mask. */
+/* The visible card: background acá; el recorte squircle lo da .co-sq-clip
+   (partial) — no redeclarar overflow / border-radius / mask. */
 .co-drawer__card {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   background: var(--co-semantic-surface-page);
-  border-radius: 0; /* the mask defines the (smooth) shape */
-  /* Squircle via 4 corner pieces + a cross of 2 bars (H full-width, V full-height).
-     The bars are sized `calc(... + 2px)` so they OVERLAP each corner by ~1px on
-     every side — same anti-seam trick as co-app-shell .main__card / co-modal
-     .co-modal (prevents a sub-pixel transparent seam that flickers with zoom). */
-  -webkit-mask:
-    var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,
-    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat;
-          mask:
-    var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
-    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,
-    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat;
 }
 
 /* ─── Header ──────────────────────────────────────────────── */