@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

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

@@ -211,50 +211,109 @@
   flex: 0 0 auto;
 }
 
-.co-date-time-picker__times {
-  position: relative; /* offsetTop anchor for the open-scroll */
-  flex: 0 0 auto;
-  width: 7.5rem;
-  max-height: 17.5rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-left: var(--co-spacing-sm2);
+/* ---- Columna derecha: atajos + hora exacta + footer ---- */
+.co-date-time-picker__side {
+  width: 12.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+  padding-left: var(--co-spacing-md);
   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__sect {
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm2) 0;
+  font-size: var(--co-font-size-11);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--co-semantic-text-muted);
 }
 
-.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);
+.co-date-time-picker__sect--time {
+  padding-top: var(--co-spacing-sm2);
+  border-top: 1px solid var(--co-semantic-border-subtle);
+}
+
+.co-date-time-picker__presets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xxs);
+}
+
+.co-date-time-picker__preset {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  min-height: 32px;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm2);
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  background: transparent;
+  font-family: inherit;
   font-size: var(--co-font-size-14);
-  line-height: 1;
+  letter-spacing: inherit;
+  color: var(--co-semantic-text-default);
+  text-align: left;
   white-space: nowrap;
   cursor: pointer;
-  user-select: none;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
-.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected) {
+.co-date-time-picker__preset:hover {
   background: var(--co-semantic-surface-hover);
 }
 
-/* Keyboard cursor — distinct from the committed selection. */
-.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__preset:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+.co-date-time-picker__preset-icon {
+  color: var(--co-semantic-text-muted);
+}
+
+.co-date-time-picker__preset-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* SELECTED — solid fill + inverse text, same treatment as co-calendar's day. */
-.co-date-time-picker__time--selected {
+.co-date-time-picker__preset-hint {
+  margin-left: auto;
+  font-size: var(--co-font-size-12);
+  color: var(--co-semantic-text-muted);
+}
+
+.co-date-time-picker__footer {
+  margin-top: auto;
+  padding-top: var(--co-spacing-sm2);
+  border-top: 1px solid var(--co-semantic-border-subtle);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.co-date-time-picker__btn {
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  height: 28px;
+  padding: 0 var(--co-spacing-md);
+  font-family: inherit;
+  font-size: var(--co-font-size-13);
+  font-weight: 500;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+.co-date-time-picker__btn--primary {
   background: var(--co-semantic-surface-primary);
   color: var(--co-semantic-on-primary);
-  font-weight: 600;
+}
+
+.co-date-time-picker__btn--primary:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
 }
 
 /* ---- Mobile bottom sheet: calendar on top, hours below ---- */
@@ -269,20 +328,57 @@
   align-items: center;
 }
 
-.co-date-time-picker__panel--touch .co-date-time-picker__times {
+/* ---- Bottom sheet: columna → calendario arriba, atajos como chips, campo y
+   Listo full-width. Targets ≥44px. ---- */
+.co-date-time-picker__panel--touch .co-date-time-picker__side {
   width: 100%;
   max-width: 20rem;
-  max-height: 12rem;
   padding-left: 0;
-  padding-top: var(--co-spacing-sm2);
   border-left: none;
+  padding-top: var(--co-spacing-sm2);
   border-top: 1px solid var(--co-semantic-border-default);
 }
 
-.co-date-time-picker__panel--touch .co-date-time-picker__time {
+.co-date-time-picker__panel--touch .co-date-time-picker__sect {
+  display: none; /* el sheet respira menos: los grupos se leen solos */
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__sect--time {
+  display: none;
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__presets {
+  flex-direction: row;
+  gap: var(--co-spacing-sm);
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-inline-end: var(--co-spacing-2xl);
+  scroll-padding-inline-end: var(--co-spacing-2xl);
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--co-spacing-2xl)), transparent);
+  mask-image: linear-gradient(90deg, #000 calc(100% - var(--co-spacing-2xl)), transparent);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__preset {
+  flex: 0 0 auto;
   min-height: 44px;
-  display: flex;
-  align-items: center;
+  padding: 0 var(--co-spacing-md);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-full);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__preset-hint {
+  display: none; /* el chip queda corto; la hora la muestra el campo al elegir */
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__footer {
+  margin-top: var(--co-spacing-sm2);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__btn--primary {
+  width: 100%;
+  height: 44px;
+  font-size: var(--co-font-size-15, 15px);
+  border-radius: var(--co-border-radius-sm);
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

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;
-}