@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.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: '4cf85c1fd72560c3fde039901adbac86a4fc147f', class: {
+        return (index.h("div", { key: '20c49e1fdadfe4813274a443b13686e9bf628449', 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: '4f8e8922631a5b88a9e158c2a6235515e8d09022', class: "co-empty-state__icon" }, index.h("co-icon", { key: '66fe90f142047bd3c03f901443e91b9a654e2bfa', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (index.h("div", { key: 'fba5fe8abb82a90902e069d2f06730a3240b3cff', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: '82bb5115feb16737e9a6658a508ba6faa1ab1e24', class: "co-empty-state__description" }, this.description)), index.h("div", { key: '048fb44e84e107232753f0d203f512dba556338b', class: "co-empty-state__actions" }, index.h("slot", { key: 'd7b1111baa84f9eeda18606f18b721865678bfd5' }))));
+            }, part: "empty-state" }, this.icon && (index.h("div", { key: 'd8a2167915f146c1de68475f8c0852c3dfc87a01', class: "co-empty-state__icon" }, index.h("co-icon", { key: '13d13be52c5754baf96fe7b699169e2f0a3761ab', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (index.h("div", { key: 'ef0b94049516827ba30b63022c591b367f2d4081', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: '25a21c6d97a387ac36eb8ff9abfc00806becab46', class: "co-empty-state__description" }, this.description)), index.h("div", { key: '6118e691a0d6ad780f06b23fae588cae43a6fa74', class: "co-empty-state__actions" }, index.h("slot", { key: 'dbd56768f75258c08bc9958ea4665c1d95500bfe' }))));
     }
 };
 CoEmptyState.style = coEmptyStateCss();

package/dist/cjs/co-event-calendar.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var dateI18n = require('./dateI18n-BdiNAl0_.js');
-var dates = require('./dates-D8D-aS5d.js');
+var index = require('./index-kBiXCEE7.js');
+var dateI18n = require('./dateI18n-wblvKRq_.js');
+var dates = require('./dates-TQLHlFd2.js');
 var tz = require('./tz-Dgom0W69.js');
 
 /**
@@ -104,6 +104,7 @@ function normalizeEvent(raw, options = {}) {
         startMs,
         endMs,
         status: raw.status,
+        responseState: raw.responseState,
         backgroundColor,
         borderColor,
         className: raw.className,
@@ -127,7 +128,7 @@ function normalizeEvents(raw, options = {}) {
     return out;
 }
 
-const coEventCalendarCss = () => `:host{display:flex;flex-direction:column;gap:var(--co-spacing-md);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);block-size:100%;min-block-size:0}.cal{display:flex;flex-direction:column;gap:var(--co-spacing-md);block-size:100%;min-block-size:0}.cal__toolbar{display:flex;align-items:center;gap:var(--co-spacing-md)}.cal__nav-group{display:inline-flex;align-items:center;gap:var(--co-spacing-xs)}.cal__title{flex:1 1 auto;margin:0;text-align:center;font-size:var(--co-font-size-16, 16px);font-weight:600;text-transform:capitalize;color:var(--co-semantic-text-default)}.cal__views-spacer{flex:0 0 auto;inline-size:1px}.cal__btn{height:32px;padding:0 var(--co-spacing-md);background:none;border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);font-family:inherit;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.cal__btn:hover{background:var(--co-semantic-surface-hover)}.cal__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__icon-btn{height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--co-border-radius-xs);color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.cal__icon-btn:hover{background:var(--co-semantic-surface-hover)}.cal__icon-btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__views{display:inline-flex;gap:2px;padding:2px;background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-xs)}.cal__view-btn{height:28px;padding:0 var(--co-spacing-md);background:none;border:0;border-radius:var(--co-border-radius-xxs);font-family:inherit;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-secondary);cursor:pointer;text-transform:capitalize}.cal__view-btn--active{background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default);font-weight:600;box-shadow:0 1px 2px rgba(0, 0, 0, 0.08)}.cal__view-btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__body{flex:1 1 auto;min-block-size:0;display:flex;flex-direction:column}.cal__body co-calendar-month{flex:1 1 auto;min-block-size:0}.cal__placeholder{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-sm);color:var(--co-semantic-text-muted);text-transform:capitalize}`;
+const coEventCalendarCss = () => `:host{display:flex;flex-direction:column;gap:var(--co-spacing-md);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);block-size:100%;min-block-size:0}.cal{display:flex;flex-direction:column;gap:var(--co-spacing-md);block-size:100%;min-block-size:0}.cal__toolbar{display:flex;align-items:center;gap:var(--co-spacing-md)}.cal__title-group{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-xs)}.cal__title{margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--co-font-size-20, 20px);font-weight:400;letter-spacing:-0.01em;text-transform:capitalize;color:var(--co-semantic-text-default)}.cal__views-spacer{flex:0 0 auto;inline-size:1px}.cal__btn{height:32px;padding:0 var(--co-spacing-md);background:none;border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-full);font-family:inherit;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.cal__btn:hover{background:var(--co-semantic-surface-hover)}.cal__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__icon-btn{height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--co-border-radius-xs);color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.cal__icon-btn:hover{background:var(--co-semantic-surface-hover)}.cal__icon-btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__views{display:inline-flex;gap:2px;padding:2px;background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-xs)}.cal__view-btn{height:28px;padding:0 var(--co-spacing-md);background:none;border:0;border-radius:var(--co-border-radius-xxs);font-family:inherit;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-secondary);cursor:pointer;text-transform:capitalize}.cal__view-btn--active{background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default);font-weight:600;box-shadow:0 1px 2px rgba(0, 0, 0, 0.08)}.cal__view-btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal__body{flex:1 1 auto;min-block-size:0;display:flex;flex-direction:column}.cal__body co-calendar-month{flex:1 1 auto;min-block-size:0}.cal__body co-calendar-timegrid{flex:1 1 auto;min-block-size:0}.cal__placeholder{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-sm);color:var(--co-semantic-text-muted);text-transform:capitalize}`;
 
 const CoEventCalendar = class {
     constructor(hostRef) {
@@ -135,10 +136,11 @@ const CoEventCalendar = class {
         this.coEventClick = index.createEvent(this, "coEventClick", 3);
         this.coDateSelect = index.createEvent(this, "coDateSelect", 3);
         this.coEventDrop = index.createEvent(this, "coEventDrop", 3);
+        this.coEventDblClick = index.createEvent(this, "coEventDblClick", 3);
         this.coDatesSet = index.createEvent(this, "coDatesSet", 3);
         this.coViewChange = index.createEvent(this, "coViewChange", 3);
         this.coMoreClick = index.createEvent(this, "coMoreClick", 3);
-        /** Active view. Phase 1 ships `month`; week/day/agenda land in later phases. */
+        /** Active view. `month`/`week`/`day` are implemented; `agenda` is pending. */
         this.view = 'month';
         /** Events: an array or a JSON string (raw-HTML use). */
         this.events = [];
@@ -156,18 +158,52 @@ const CoEventCalendar = class {
         this.availableViews = ['month'];
         /** Default minutes for a timed event missing an end. */
         this.defaultDurationMinutes = 60;
+        /** Show the all-day lane in week/day views. */
+        this.allDaySlot = true;
+        /** Visible-hours window for week/day (minutes-of-day bounds as "HH:mm"). */
+        this.minTime = '00:00';
+        this.maxTime = '24:00';
+        /** Slot/snap granularity (minutes) for week/day. */
+        this.slotMinutes = 15;
+        this.snapMinutes = 15;
+        /** Initial scroll position for week/day ("HH:mm"). */
+        this.scrollTime = '07:00';
+        /** Show the current-time indicator in week/day. */
+        this.nowIndicator = true;
+        /** Cargando eventos: se propaga a la grilla (mes/timegrid), que reemplaza
+         *  SUS chips por bloques skeleton y conserva toda su estructura — bordes,
+         *  cabecera de días, eje de horas. El toolbar sigue operable y nada se
+         *  desmonta, así no se pierde el scroll de semana/día. */
+        this.loading = false;
         this.goToday = () => this.setAnchor(dates.todayYMD());
         this.goPrev = () => this.step(-1);
         this.goNext = () => this.step(1);
-        // ── Month delegation handlers ───────────────────────────────────────────
+        // ── View delegation handlers ─────────────────────────────────────────────
         this.handleDaySelect = (e) => {
+            var _a;
             const date = e.detail.date;
-            this.coDateSelect.emit({ start: date, end: dates.addDays(date, 1), allDay: true });
+            this.coDateSelect.emit({ start: date, end: dates.addDays(date, 1), allDay: true, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
+        };
+        this.handleRangeSelect = (e) => {
+            var _a;
+            this.coDateSelect.emit({
+                start: e.detail.start,
+                end: e.detail.end,
+                allDay: false,
+                rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null,
+            });
         };
         this.handleEventClick = (e) => {
+            var _a;
             const ev = this.normalized.find((x) => x.id === e.detail.id);
             if (ev)
-                this.coEventClick.emit({ event: ev });
+                this.coEventClick.emit({ event: ev, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
+        };
+        this.handleEventDblClick = (e) => {
+            var _a;
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (ev)
+                this.coEventDblClick.emit({ event: ev, rect: (_a = e.detail.rect) !== null && _a !== void 0 ? _a : null });
         };
         this.handleEventDrop = (e) => {
             const ev = this.normalized.find((x) => x.id === e.detail.id);
@@ -195,6 +231,13 @@ const CoEventCalendar = class {
             this.coMoreClick.emit({ date, events });
         };
     }
+    /** Limpia el resaltado persistente de selección de la vista activa (timegrid
+     * o month) — lo llama el host al cerrar su bubble/form de creación. */
+    async clearRangeSelection() {
+        var _a, _b;
+        const view = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('co-calendar-timegrid, co-calendar-month');
+        await ((_b = view === null || view === void 0 ? void 0 : view.clearSelection) === null || _b === void 0 ? void 0 : _b.call(view));
+    }
     componentWillLoad() {
         this.anchor = this.date && dates.parseISO(this.date) ? this.date : dates.todayYMD();
     }
@@ -211,20 +254,60 @@ const CoEventCalendar = class {
         return this.timeZone || tz.getLocalTimeZone();
     }
     get normalized() {
+        const c = this._normCache;
+        if (c &&
+            c.events === this.events &&
+            c.dd === this.defaultDurationMinutes &&
+            c.sc === this.statusColors) {
+            return c.result;
+        }
         const raw = parseEventsProp(this.events);
         const opts = {
             defaultDurationMinutes: this.defaultDurationMinutes,
             statusColors: parseStatusColors(this.statusColors),
         };
-        return normalizeEvents(raw, opts);
+        const result = normalizeEvents(raw, opts);
+        this._normCache = {
+            events: this.events,
+            dd: this.defaultDurationMinutes,
+            sc: this.statusColors,
+            result,
+        };
+        return result;
     }
     get viewsList() {
         return Array.isArray(this.availableViews)
             ? this.availableViews
             : String(this.availableViews).split(',').map((s) => s.trim()).filter(Boolean);
     }
-    /** Visible [start, end) of the current month view, as date strings. */
+    /** Sunday=0 UTC day-of-week of a date-only key (tz-independent). */
+    dowOf(dateKey) {
+        const [y, mo, d] = dateKey.split('-').map(Number);
+        return new Date(Date.UTC(y, mo - 1, d)).getUTCDay();
+    }
+    weekStart(dateKey) {
+        const diff = (this.dowOf(dateKey) - this.firstDayOfWeek + 7) % 7;
+        return dates.addDays(dateKey, -diff);
+    }
+    /** Day keys the active view renders: 7 for week, 1 for day, [] for month. */
+    get visibleDates() {
+        if (this.view === 'week') {
+            const start = this.weekStart(this.anchor);
+            return Array.from({ length: 7 }, (_, i) => dates.addDays(start, i));
+        }
+        if (this.view === 'day')
+            return [this.anchor];
+        return [];
+    }
+    /** Visible [start, end) of the active view, as date strings. */
     visibleRange() {
+        if (this.view === 'week') {
+            const start = this.weekStart(this.anchor);
+            return { start, end: dates.addDays(start, 7) };
+        }
+        if (this.view === 'day') {
+            return { start: this.anchor, end: dates.addDays(this.anchor, 1) };
+        }
         const a = dates.parseISO(this.anchor);
         const matrix = dates.getMonthMatrix(a.year, a.month, this.firstDayOfWeek);
         const start = matrix[0][0].value;
@@ -241,12 +324,12 @@ const CoEventCalendar = class {
         this.emitDatesSet();
     }
     step(dir) {
-        if (this.view === 'month') {
+        if (this.view === 'month')
             this.setAnchor(dates.addMonths(this.anchor, dir));
-        }
-        else {
-            this.setAnchor(dates.addDays(this.anchor, dir * 7));
-        }
+        else if (this.view === 'day')
+            this.setAnchor(dates.addDays(this.anchor, dir));
+        else
+            this.setAnchor(dates.addDays(this.anchor, dir * 7)); // week (and agenda fallback)
     }
     switchView(next) {
         if (next === this.view)
@@ -257,18 +340,31 @@ const CoEventCalendar = class {
     }
     title() {
         const a = dates.parseISO(this.anchor);
-        return dates.getMonthLabel(a.year, a.month, this.locale, 'long');
+        if (this.view === 'month')
+            return dates.getMonthLabel(a.year, a.month, this.locale, 'long');
+        if (this.view === 'day') {
+            return new Intl.DateTimeFormat(this.locale, {
+                weekday: 'short', day: 'numeric', month: 'short', year: 'numeric',
+            }).format(utcDate(this.anchor));
+        }
+        // week: "13 – 19 jul 2026"
+        const start = this.weekStart(this.anchor);
+        const end = dates.addDays(start, 6);
+        const fmt = new Intl.DateTimeFormat(this.locale, { day: 'numeric', month: 'short' });
+        const yr = new Intl.DateTimeFormat(this.locale, { year: 'numeric' }).format(utcDate(end));
+        return `${fmt.format(utcDate(start))} – ${fmt.format(utcDate(end))} ${yr}`;
     }
     render() {
         var _a;
         const t = dateI18n.getDateStrings(this.locale);
         const views = this.viewsList;
         const a = dates.parseISO(this.anchor);
-        return (index.h("div", { key: 'dce81390ee349de59285e31506ec397aead8c1c5', class: "cal" }, index.h("div", { key: '58f3acb8a74558505aab88e95fbea15bc65cce2f', class: "cal__toolbar", part: "toolbar" }, index.h("div", { key: '9249edf79de99180871667f813aa40e288f130b7', class: "cal__nav-group" }, index.h("button", { key: '2cb250065f64860466b141b6dcaffeef60158dcc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), index.h("button", { key: '15ebc01c5be71b48042735ee6247ad16a957493b', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, index.h("co-icon", { key: 'dc74fc8780144c952c7012cf0e984998650e96a7', name: "caret-left", size: 16 })), index.h("button", { key: 'e4d2ee75a2c8fa818d327a9d82fa23051ec8a24c', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, index.h("co-icon", { key: 'd489365423552d000655898ac267fdbfddd216c0', name: "caret-right", size: 16 }))), index.h("h2", { key: '370e61c61a12860d36b4a04cdbc5dee447fdfe46', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (index.h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (index.h("div", { key: '12c11a1954cd53034be9717fc5fdd80c4195ae6f', class: "cal" }, index.h("div", { key: '44e56be42b6ac944983a6ba29e4aba95c67589ab', class: "cal__toolbar", part: "toolbar" }, index.h("button", { key: '26db9f5e32e604bf6d3f5645b14a92510d224f4c', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), index.h("div", { key: '40878237f7d076531fa210b0b765087923e0256f', class: "cal__title-group" }, index.h("button", { key: '59bb0f5d15e834f95f54a7a2575dc097d213d5ce', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, index.h("co-icon", { key: '0db880709e17ab918507bcf9ee0377dd260fbb10', name: "caret-left", size: 16 })), index.h("h2", { key: '772eb75bb0f749c78da037e0fb918cfa2dd3bc12', class: "cal__title", "aria-live": "polite" }, this.title()), index.h("button", { key: '3ec51c2cd9485841aee0b7b9145756e1721791e3', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, index.h("co-icon", { key: '95d54c3fcd198d16ae8d874afe558480323b993c', name: "caret-right", size: 16 }))), views.length > 1 ? (index.h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (index.h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (index.h("span", { class: "cal__views-spacer" }))), index.h("div", { key: '26677d79d63d957315c09df9b18597009c9681cc', class: "cal__body", part: "body" }, this.view === 'month' ? (index.h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (index.h("div", { class: "cal__placeholder" }, index.h("co-icon", { name: "calendar-dots", size: 32 }), index.h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (index.h("span", { class: "cal__views-spacer" }))), index.h("div", { key: 'c866ef7e6117d662309e57805511a024640fd18d', class: "cal__body", part: "body" }, this.view === 'month' ? (index.h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (index.h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (index.h("div", { class: "cal__placeholder" }, index.h("co-icon", { name: "calendar-dots", size: 32 }), index.h("p", null, `${this.view} view — coming soon`))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "date": [{
                 "onDateChange": 0
@@ -313,6 +409,11 @@ function zonedDay(ms, timeZone) {
     }).format(new Date(ms));
     return parts; // en-CA → "YYYY-MM-DD"
 }
+/** UTC Date for a date-only key — safe for Intl formatting (no tz drift). */
+function utcDate(dateKey) {
+    const [y, mo, d] = dateKey.split('-').map(Number);
+    return new Date(Date.UTC(y, mo - 1, d, 12)); // noon UTC avoids any date rollover
+}
 CoEventCalendar.style = coEventCalendarCss();
 
 exports.co_event_calendar = CoEventCalendar;

package/dist/cjs/co-event-popover.cjs.entry.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var index = require('./index-kBiXCEE7.js');
+var positioning = require('./positioning-DCj_AJ2T.js');
+
+const coEventPopoverCss = () => `:host{display:contents}.pop{position:fixed;margin:0;inset:auto;width:400px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-md, 14px);box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));padding:0;z-index:1000;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);animation:co-pop-in 0.15s cubic-bezier(0.05, 0.7, 0.1, 1);outline:none}@media (prefers-reduced-motion: reduce){.pop{animation:none}}@keyframes co-pop-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}.pop__actions{display:flex;justify-content:flex-end;gap:var(--co-spacing-xxs);padding:var(--co-spacing-sm2) var(--co-spacing-sm2) 0}.pop__head{display:flex;gap:var(--co-spacing-md);padding:var(--co-spacing-xs) var(--co-spacing-xl) var(--co-spacing-xl)}.pop__dot{flex:0 0 auto;width:14px;height:14px;border-radius:var(--co-border-radius-xxs);margin-top:5px;background:var(--co-color-primary-azul)}.pop__body{min-width:0;flex:1 1 auto}`;
+
+const CoEventPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        this.open = false;
+        this.placement = 'right-start';
+        /** Render the leading color dot. Set false for dot-less content (quick-create). */
+        this.dot = true;
+        this.closeOnEscape = true;
+        this.closeOnClickOutside = true;
+        this.position = () => {
+            if (!this.open || !this.panelEl || !this.anchorRect)
+                return;
+            const a = this.anchorRect;
+            const triggerRect = {
+                top: a.top, left: a.left, right: a.left + a.width, bottom: a.top + a.height,
+                width: a.width, height: a.height,
+            };
+            const panelRect = this.panelEl.getBoundingClientRect();
+            const { top, left } = positioning.computePosition(triggerRect, panelRect, {
+                placement: this.placement, offset: 8, flip: true,
+            });
+            this.panelEl.style.top = `${top}px`;
+            this.panelEl.style.left = `${left}px`;
+        };
+        // The anchor rect is a point-in-time snapshot: once the page scrolls or resizes
+        // it's stale, and a top-layer panel would stay pinned to a chip that has moved
+        // (or disappeared). Google Calendar closes the popover in that case — match it.
+        this.onScroll = () => {
+            if (this.open)
+                this.requestClose();
+        };
+        this.onKeydown = (e) => {
+            if (!this.open)
+                return;
+            if (this.closeOnEscape && e.key === 'Escape') {
+                e.stopPropagation();
+                this.requestClose();
+            }
+        };
+        this.onPointerDown = (e) => {
+            if (!this.open || !this.closeOnClickOutside || !this.panelEl)
+                return;
+            const path = e.composedPath();
+            if (path.includes(this.panelEl) || path.includes(this.el))
+                return;
+            this.requestClose();
+        };
+    }
+    componentDidLoad() {
+        // Stencil no dispara @Watch para el valor inicial (gotcha conocido del DS).
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    onOpenChange(v) {
+        var _a;
+        if (v) {
+            this.prevFocus = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            requestAnimationFrame(() => this.promoteAndPosition());
+        }
+        else {
+            this.dismissPanel();
+            if (this.prevFocus)
+                this.prevFocus.focus();
+        }
+    }
+    onAnchorChange() {
+        if (this.open)
+            this.position();
+    }
+    disconnectedCallback() {
+        this.teardownListeners();
+    }
+    promoteAndPosition() {
+        var _a, _b;
+        if (!this.open || !this.panelEl)
+            return;
+        // Promote to the top-layer so contain:layout ancestors don't re-anchor us.
+        try {
+            (_b = (_a = this.panelEl).showPopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch ( /* already shown */_c) { /* already shown */ }
+        this.position();
+        // Dialog-pattern focus: focus the panel itself (tabIndex=-1). Slotted actions
+        // live in light DOM and co-icon-button is shadow — querySelector here can't
+        // reach them; Tab from the panel lands on the first slotted action naturally.
+        this.panelEl.focus();
+        window.addEventListener('resize', this.onScroll);
+        window.addEventListener('scroll', this.onScroll, true);
+        window.addEventListener('keydown', this.onKeydown, true);
+        window.addEventListener('pointerdown', this.onPointerDown, true);
+    }
+    dismissPanel() {
+        var _a, _b;
+        try {
+            (_b = (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.hidePopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch ( /* noop */_c) { /* noop */ }
+        this.teardownListeners();
+    }
+    teardownListeners() {
+        window.removeEventListener('resize', this.onScroll);
+        window.removeEventListener('scroll', this.onScroll, true);
+        window.removeEventListener('keydown', this.onKeydown, true);
+        window.removeEventListener('pointerdown', this.onPointerDown, true);
+    }
+    requestClose() {
+        this.coClose.emit();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ac4fad8add6f42cd02cd516f32e0820f1bc7b1c6' }, index.h("div", { key: 'bd0f4d1adb5d21d329ec5b6dd06c08ef13e86cf4', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, index.h("div", { key: '22599ea7ff5fdc39c38b0546ecc6869f6a6e0036', class: "pop__actions", part: "actions" }, index.h("slot", { key: 'fd9fd75cce78007b7407be5e7a0ef54f49ce2dcc', name: "actions" })), index.h("div", { key: '16b5af287977fbab204b69cc94e1591c5db963fb', class: "pop__head" }, this.dot && index.h("span", { key: '6bb8f39ef10c5a81ee461557e42837f43cd44c20', class: "pop__dot", style: this.color ? { background: this.color } : {} }), index.h("div", { key: '0dcd02e0da924f914015ada88388ddc1d9732447', class: "pop__body", part: "body" }, index.h("slot", { key: 'b00ade5c89b5a1e908e9cb463c6b461720609121' }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "anchorRect": [{
+                "onAnchorChange": 0
+            }]
+    }; }
+};
+CoEventPopover.style = coEventPopoverCss();
+
+exports.co_event_popover = CoEventPopover;

package/dist/cjs/co-fab.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
-const coFabCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);line-height:1}.co-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:none;border-radius:var(--co-border-radius-full);cursor:pointer;font-family:inherit;font-weight:500;white-space:nowrap;box-sizing:border-box;transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;box-shadow:0 4px 12px rgba(31, 28, 27, 0.15)}.co-fab--xl{width:64px;height:64px;font-size:var(--co-font-size-16)}.co-fab--l{width:56px;height:56px;font-size:var(--co-font-size-16)}.co-fab--m{width:48px;height:48px;font-size:var(--co-font-size-14)}.co-fab--s{width:40px;height:40px;font-size:var(--co-font-size-14)}.co-fab--extended{width:auto;border-radius:var(--co-border-radius-lg)}.co-fab--extended.co-fab--xl{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--l{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--m{padding:0 var(--co-spacing-lg)}.co-fab--extended.co-fab--s{padding:0 var(--co-spacing-md)}.co-fab--primary{background:var(--co-fab-bg, var(--co-color-opacity-negro-80, rgba(31, 28, 27, 0.8)));color:var(--co-semantic-on-primary);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}.co-fab--primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(31, 28, 27, 0.2);transform:translateY(-1px)}.co-fab--secondary{background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-subtle)}.co-fab--secondary:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab--stroke{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-fab--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab:active:not(:disabled){transform:translateY(0) scale(0.96)}.co-fab--disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.co-fab--bottom-right{position:fixed;bottom:24px;right:24px;z-index:1000}.co-fab--bottom-left{position:fixed;bottom:24px;left:24px;z-index:1000}.co-fab--top-right{position:fixed;top:24px;right:24px;z-index:1000}.co-fab--top-left{position:fixed;top:24px;left:24px;z-index:1000}.co-fab__label{line-height:1}`;
+const coFabCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);line-height:1}.co-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:none;border-radius:var(--co-border-radius-full);cursor:pointer;font-family:inherit;font-weight:500;white-space:nowrap;box-sizing:border-box;transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;box-shadow:0 4px 12px rgba(31, 28, 27, 0.15)}.co-fab--xl{--co-fab-size:64px;width:64px;height:64px;font-size:var(--co-font-size-16)}.co-fab--l{--co-fab-size:56px;width:56px;height:56px;font-size:var(--co-font-size-16)}.co-fab--m{--co-fab-size:48px;width:48px;height:48px;font-size:var(--co-font-size-14)}.co-fab--s{--co-fab-size:40px;width:40px;height:40px;font-size:var(--co-font-size-14)}.co-fab--extended{width:auto;border-radius:var(--co-border-radius-lg)}.co-fab--extended.co-fab--xl{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--l{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--m{padding:0 var(--co-spacing-lg)}.co-fab--extended.co-fab--s{padding:0 var(--co-spacing-md)}.co-fab--hover-expand{justify-content:flex-start;overflow:hidden;transition:width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease,     box-shadow 0.15s ease, transform 0.1s ease}.co-fab--hover-expand.co-fab--xl{padding:0 20px}.co-fab--hover-expand.co-fab--l{padding:0 16px}.co-fab--hover-expand.co-fab--m{padding:0 14px}.co-fab--hover-expand.co-fab--s{padding:0 11px}.co-fab--hover-expand:hover:not(:disabled),.co-fab--hover-expand:focus-visible{width:calc(var(--co-fab-size) + var(--co-spacing-sm2) + var(--co-fab-label-w, 0px));transition:width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease,     box-shadow 0.15s ease, transform 0.1s ease}.co-fab--hover-expand co-icon{flex-shrink:0;transition:transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1)}.co-fab--hover-expand:hover:not(:disabled) co-icon,.co-fab--hover-expand:focus-visible co-icon{transform:rotate(90deg)}.co-fab--hover-expand .co-fab__label{flex-shrink:0;opacity:0;transform:translateX(-6px);transition:opacity 0.12s ease, transform 0.12s ease}.co-fab--hover-expand:hover:not(:disabled) .co-fab__label,.co-fab--hover-expand:focus-visible .co-fab__label{opacity:1;transform:translateX(0);transition:opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s}@media (prefers-reduced-motion: reduce){.co-fab--hover-expand,.co-fab--hover-expand co-icon,.co-fab--hover-expand .co-fab__label{transition:none}}.co-fab--primary{background:var(--co-fab-bg, var(--co-color-base-negro, #1f1c1b));color:var(--co-semantic-on-primary)}.co-fab--primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(31, 28, 27, 0.2);transform:translateY(-1px)}.co-fab--secondary{background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-subtle)}.co-fab--secondary:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab--stroke{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-fab--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab:active:not(:disabled){transform:translateY(0) scale(0.96)}.co-fab--disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.co-fab--bottom-right{position:fixed;bottom:24px;right:24px;z-index:1000}.co-fab--bottom-left{position:fixed;bottom:24px;left:24px;z-index:1000}.co-fab--top-right{position:fixed;top:24px;right:24px;z-index:1000}.co-fab--top-left{position:fixed;top:24px;left:24px;z-index:1000}.co-fab__label{line-height:1}`;
 
 const CoFab = class {
     constructor(hostRef) {
@@ -14,23 +14,38 @@ const CoFab = class {
         this.disabled = false;
         /** Fixed position on screen */
         this.position = 'none';
+        /** With `label`: icon-only circle at rest that stretches into the extended
+         *  pill on hover/focus-visible (springy "liquid" morph). */
+        this.expandOnHover = false;
         this.handleClick = () => {
             if (!this.disabled)
                 this.coClick.emit();
         };
+        /* width:auto no anima — el CSS necesita el ancho expandido explícito. Se mide
+           el label (nowrap + flex-shrink:0 → offsetWidth = ancho completo aunque esté
+           clipeado) en cada entrada de hover/foco: barato y siempre fresco aunque la
+           fuente web cargue después del primer render. */
+        this.handleExpandMeasure = () => {
+            if (!this.expandOnHover || !this.labelEl)
+                return;
+            this.el.style.setProperty('--co-fab-label-w', `${this.labelEl.offsetWidth}px`);
+        };
     }
     render() {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
-        const isExtended = !!this.label;
-        return (index.h("button", { key: '508484d86d0d65218b8e5039ce81b6a1860347db', class: {
+        const hasLabel = !!this.label;
+        const hoverExpand = hasLabel && this.expandOnHover;
+        return (index.h("button", { key: 'ffedc2aea8b7b813b8e646872f4a0814589f80ab', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
-                'co-fab--extended': isExtended,
+                'co-fab--extended': hasLabel && !this.expandOnHover,
+                'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabelText || this.label || this.icon }, index.h("co-icon", { key: '47e47f74b93a1cdbe706d6e0a577f4396a68507c', name: this.icon, size: iconSize }), this.label && index.h("span", { key: 'a4fd981b11c467261eba9de0731b37e01aae0ed2', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, index.h("co-icon", { key: '34242af8b8de622400507b106e566b8214f53534', name: this.icon, size: iconSize }), this.label && (index.h("span", { key: '56cd6e22505608ebf909a1c0356ecba5c0bae418', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
+    get el() { return index.getElement(this); }
 };
 CoFab.style = coFabCss();
 

package/dist/cjs/co-file-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var requiredMark = require('./requiredMark-B3pKyqYI.js');
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
 
 /**
  * Built-in UI string dictionary for co-file-field.
@@ -128,7 +128,7 @@ function previewSrc(item) {
     return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
 }
 
-const coFileFieldCss = () => `: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-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.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)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-default);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color 0.15s ease, background 0.15s ease}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow 0.15s ease, transform 0.15s ease}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 282px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.2s ease}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-border-focus);transition:width 0.2s ease}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-secondary);transition:color 0.15s ease}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
+const coFileFieldCss = () => `: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-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.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)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color 0.15s ease, background 0.15s ease}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow 0.15s ease, transform 0.15s ease}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 282px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.2s ease}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width 0.2s ease}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-secondary);transition:color 0.15s ease}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
 
 const CoFileField = class {
     constructor(hostRef) {
@@ -452,12 +452,12 @@ const CoFileField = class {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (index.h("div", { key: '31d820478276fee18bf2df79dd277ef1cbcf2ac2', class: {
+        return (index.h("div", { key: 'd69adf5472c920d9fda750d390c8d66495c7d912', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (index.h("div", { key: 'b7df2e7f427fb6306191c07aebd41b2a2c7303c6', class: "co-file-field__labels" }, index.h("label", { key: 'd3dcd5886777a09fea5d4082f4a941a24056184e', class: "co-file-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '6cf4505b762c9335798de30362e1eac8bc6e123c', required: this.required })))), showDropzone && (index.h("div", { key: 'af761f6f87b10397bc3e5ebf3ee4c43c0c815449', class: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: '3e084a96b7fbd714fa07aeeea09146c3782af2b0', class: "co-file-field__labels" }, index.h("label", { key: '6618041eec9358983794238014f49ae8ad724d79', class: "co-file-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '16aa21951eedafb190180ee40c1cba13230ef128', required: this.required })))), showDropzone && (index.h("div", { key: '33bfe60be00c270fe9861f0250ffe6e4ddcf820b', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -465,7 +465,7 @@ const CoFileField = class {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("button", { key: '72ab595ccd9a7f275cd214fcb17c15972057557a', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, index.h("co-icon", { key: '686287ddfba61763e98e8753f078f8bc1ac98460', name: "file-arrow-up", size: 18 }), index.h("span", { key: '8faab79ab89c6a2fc83069ae7bcafb4b21feb416' }, this.uploadButtonText || s.uploadButton)), index.h("span", { key: '761ab4b4e58490fe8e0024e6881a8d73fef5e7fd', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && index.h("span", { key: 'c6a88193c0aacefa6bd1534600ad56d3577b2228', class: "co-file-field__dropzone-hint" }, capacity), index.h("div", { key: 'ecd504e94b4ab9a1784868a357399e766b2dd68c', class: "co-file-field__actions", part: "actions" }, index.h("slot", { key: '4e6572288387694e7e43cfa7fd58b4fb1952be2c', name: "actions" })), index.h("input", { key: '708ef841bab08935f125e6aa4338f67502b8689f', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (index.h("div", { key: 'f7423a91e47af3fbc4eb8257569df98da889bebf', class: "co-file-field__uploaded" }, this.multiple && (index.h("div", { key: 'da179d8d456ac934ee0d88679cb9866f3d9af3a9', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (index.h("div", { key: '73ffb49c6090eb21c471f9cfe145df23b8fb8592', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (index.h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, index.h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), index.h("ul", { key: 'ecbc35245db8e66eca656423657a0223e33a156e', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("button", { key: '219538469e33b0e5e2a1e26e1591d2b578b548ef', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, index.h("co-icon", { key: '5021d06fe31100f7b4c6028a868b707aeb3df0c8', name: "file-arrow-up", size: 18 }), index.h("span", { key: 'ba785ab9e8cd6173f367ebf0a4320a37fa4b0832' }, this.uploadButtonText || s.uploadButton)), index.h("span", { key: '1fae290aace7b669b27cd53529ea30c36e009805', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && index.h("span", { key: '999ac1eda129973f4b8710bd252337786e4eb99c', class: "co-file-field__dropzone-hint" }, capacity), index.h("div", { key: 'd2ce4783e5eba96fdf59e998f37411ef0f418458', class: "co-file-field__actions", part: "actions" }, index.h("slot", { key: '55e22bcaff045708471a2837d1c0345d53a0a748', name: "actions" })), index.h("input", { key: '773880ce9b881512d03eac3be0465942c6376843', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (index.h("div", { key: '57164ac1e53062957a99ef182394ae9da7636c3e', class: "co-file-field__uploaded" }, this.multiple && (index.h("div", { key: '91894d7e208c62e0aa9407812bbaf7ad491ca275', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (index.h("div", { key: 'c7f74b97051085770677b6433adb7b54fcf4405d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (index.h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, index.h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), index.h("ul", { key: '4c55ead3dcdff97d502c2f41af86d372712ba478', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (index.h("li", { class: {
@@ -486,10 +486,10 @@ const CoFileField = class {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, index.h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (index.h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, index.h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (index.h("div", { key: 'e171dcd572d9b82734433eaa20f44c85c2c24735', class: {
+        })))), helper && (index.h("div", { key: 'ba03c24a5c7e6e0c774b68af85f60ec2fc4a2f0e', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '3ba44c6324cd56a470dc4668a15b31c61b58b990', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '24c06c19e336ddb0f6a5266d9a9b84f7fbf3b80e', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: 'ed936a52670f30b4626a1339ce7e6a246bdb65dd', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '295f5de6a6dda88246441816f636cce156aefbe8', class: "co-file-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-file-type-tile.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coFileTypeTileCss = () => `:host{display:inline-flex}.co-file-type-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}`;
 
@@ -60,7 +60,7 @@ const CoFileTypeTile = class {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (index.h("span", { key: 'e894b848be911777d8a91388050c10a678bdaa1c', class: {
+        return (index.h("span", { key: '5eb049a7b3503d2bc82245403da53bdd7fab0ee5', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -70,7 +70,7 @@ const CoFileTypeTile = class {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, index.h("co-icon", { key: 'd7dd6f61ba7155b4e2c0f38cc59a93ea647217b1', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, index.h("co-icon", { key: 'ebb6d9ea5ffc35daefab825ad26519cb42ce2293', name: meta.icon, size: iconSize, weight: "fill" })));
     }
 };
 CoFileTypeTile.style = coFileTypeTileCss();