@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+
+const coDriveCardCss = () => `:host{display:block}.co-drive-card{--dc-accent:var(--co-color-primary-azul, #2563eb);position:relative;box-sizing:border-box;width:100%;border-radius:14px;cursor:pointer;outline:none;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco, #fff);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card:focus-visible{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card--folder{display:flex;align-items:center;gap:12px;transition:box-shadow 0.14s ease, background 0.12s ease}.co-drive-card--folder.co-drive-card--comfy{padding:14px}.co-drive-card--folder.co-drive-card--compact{padding:10px 12px}.co-drive-card--folder:hover:not(.co-drive-card--selected){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--folder.co-drive-card--selected{background:color-mix(in srgb, var(--dc-accent) 7%, white);box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__tile{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:color-mix(in srgb, var(--dc-accent) 12%, white);color:var(--dc-accent)}.co-drive-card--comfy .co-drive-card__tile{width:44px;height:44px}.co-drive-card--compact .co-drive-card__tile{width:38px;height:38px}.co-drive-card__text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__name{font-family:var(--co-font-family-primary);font-size:14px;font-weight:500;line-height:1.3;color:var(--co-color-base-negro, #1f1c1b);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__meta{font-family:var(--co-font-family-primary);font-size:12px;color:var(--co-color-gray-500, #888888);margin-top:2px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__trailing{flex-shrink:0;display:flex;align-items:center;gap:6px}.co-drive-card__star{display:inline-flex;color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card--file{display:flex;flex-direction:column;gap:10px;transition:box-shadow 0.14s ease}.co-drive-card--file.co-drive-card--comfy{padding:10px}.co-drive-card--file.co-drive-card--compact{padding:8px}.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected){box-shadow:inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25))}.co-drive-card--file.co-drive-card--selected{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__thumb{display:block;border-radius:10px;overflow:hidden;background:var(--co-color-gray-100, #f6f6f6)}.co-drive-card--comfy .co-drive-card__thumb{height:132px}.co-drive-card--compact .co-drive-card__thumb{height:96px}.co-drive-card__thumb ::slotted(*){display:block;width:100%;height:100%}.co-drive-card__thumb ::slotted(img){object-fit:cover}.co-drive-card--file .co-drive-card__name{font-size:13px}.co-drive-card__sub{font-family:var(--co-font-family-primary);font-size:11.5px;color:var(--co-color-gray-500, #888888);margin-top:1px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__foot{display:flex;align-items:center;gap:8px;padding:0 2px 2px}.co-drive-card__type{flex-shrink:0;display:inline-flex}.co-drive-card__foot-text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__actions{flex-shrink:0;display:inline-flex;align-items:center;color:var(--co-color-gray-400, #a0a0a0);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__actions{opacity:1}.co-drive-card__star-overlay{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--co-color-base-blanco, #fff);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__star-overlay,.co-drive-card--starred .co-drive-card__star-overlay{opacity:1}.co-drive-card--starred .co-drive-card__star-overlay{color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card__select{position:absolute;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;opacity:0;transition:opacity 0.12s ease;background:rgba(255, 255, 255, 0.9);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16))}.co-drive-card:hover .co-drive-card__select,.co-drive-card--selected .co-drive-card__select{opacity:1}.co-drive-card--folder .co-drive-card__select{top:8px;left:8px;width:20px;height:20px}.co-drive-card--file .co-drive-card__select{top:16px;left:16px;width:22px;height:22px;background:rgba(255, 255, 255, 0.92)}.co-drive-card--selected .co-drive-card__select{background:var(--dc-accent);box-shadow:none}.co-drive-card__check{display:block;pointer-events:none}`;
+
+const CoDriveCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coOpen = createEvent(this, "coOpen", 7);
+        this.coToggleSelect = createEvent(this, "coToggleSelect", 7);
+        this.coStar = createEvent(this, "coStar", 7);
+        /** Which layout to render. */
+        this.variant = 'folder';
+        /** Vertical rhythm / sizing. */
+        this.density = 'comfy';
+        /** Accent CSS color driving the icon tile, selection ring and select chip. */
+        this.accent = 'var(--co-color-primary-azul)';
+        /** Primary label (name). */
+        this.name = '';
+        /** Muted secondary line (meta). */
+        this.meta = '';
+        /** Whether the item is selected. Controlled — parent updates it on coToggleSelect. */
+        this.selected = false;
+        /** Whether the item is starred. */
+        this.starred = false;
+        /** (file) Whether the item is the active/current item — draws a heavier inset ring. */
+        this.active = false;
+        this.handleOpen = () => {
+            this.coOpen.emit();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.coOpen.emit();
+            }
+        };
+        this.handleToggleSelect = (e) => {
+            e.stopPropagation();
+            this.coToggleSelect.emit(!this.selected);
+        };
+        this.handleStar = (e) => {
+            e.stopPropagation();
+            this.coStar.emit();
+        };
+    }
+    renderSelectChip(checkSize) {
+        return (h("span", { class: "co-drive-card__select", part: "select", role: "checkbox", "aria-checked": String(this.selected), "aria-label": "Select item", onClick: this.handleToggleSelect }, this.selected && (h("svg", { class: "co-drive-card__check", width: checkSize, height: checkSize, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    renderFolder() {
+        const iconSize = this.density === 'compact' ? 20 : 24;
+        return [
+            this.renderSelectChip(12),
+            h("span", { class: "co-drive-card__tile", part: "tile" }, h("co-icon", { name: "folder", size: iconSize, weight: "fill" })),
+            h("div", { class: "co-drive-card__text" }, h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && h("span", { class: "co-drive-card__meta", part: "meta" }, this.meta)),
+            h("div", { class: "co-drive-card__trailing", part: "trailing" }, this.starred && (h("co-icon", { class: "co-drive-card__star", name: "star", size: 15, weight: "fill" })), h("slot", { name: "trailing" })),
+        ];
+    }
+    renderFile() {
+        return [
+            h("div", { class: "co-drive-card__thumb", part: "thumb" }, h("slot", { name: "thumb" })),
+            this.renderSelectChip(13),
+            h("span", { class: "co-drive-card__star-overlay", part: "star", role: "button", "aria-label": this.starred ? 'Unstar item' : 'Star item', onClick: this.handleStar }, h("co-icon", { name: "star", size: 17, weight: this.starred ? 'fill' : 'regular' })),
+            h("div", { class: "co-drive-card__foot", part: "foot" }, h("span", { class: "co-drive-card__type" }, h("slot", { name: "type" }, this.ext ? h("co-file-type-tile", { ext: this.ext, size: 26, radius: 7 }) : null)), h("div", { class: "co-drive-card__foot-text" }, h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && h("span", { class: "co-drive-card__sub", part: "meta" }, this.meta)), h("span", { class: "co-drive-card__actions", part: "actions" }, h("slot", { name: "actions" }))),
+        ];
+    }
+    render() {
+        const isFile = this.variant === 'file';
+        return (h("div", { key: 'f9e2b706825032260ad30201232bd9cf0d04d1ac', class: {
+                'co-drive-card': true,
+                [`co-drive-card--${this.variant}`]: true,
+                [`co-drive-card--${this.density}`]: true,
+                'co-drive-card--selected': this.selected,
+                'co-drive-card--starred': this.starred,
+                'co-drive-card--active': this.active && isFile,
+            }, part: "card", role: "button", tabIndex: 0, style: { '--dc-accent': this.accent }, onClick: this.handleOpen, onKeyDown: this.handleKeyDown }, isFile ? this.renderFile() : this.renderFolder()));
+    }
+};
+CoDriveCard.style = coDriveCardCss();
+
+export { CoDriveCard as co_drive_card };

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

@@ -0,0 +1,61 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Es9IUmmt.js';
+
+const coDropZoneCss = () => `:host{position:relative;display:block}.co-drop-zone__overlay{position:absolute;inset:12px;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:16px;border:2px dashed var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));background:color-mix(     in srgb,     var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb)) 8%,     rgba(255, 255, 255, 0.85)   );-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}.co-drop-zone__badge{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:var(--co-color-base-blanco, #fff);color:var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04))}.co-drop-zone__label{font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);font-size:18px;font-weight:500;color:var(--co-color-base-negro, #1f1c1b)}`;
+
+const CoDropZone = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coDrop = createEvent(this, "coDrop", 7);
+        this.coDragStateChange = createEvent(this, "coDragStateChange", 7);
+        /** Whether the drag-to-upload overlay is visible. */
+        this.active = false;
+        /** Accent color for the dashed border, badge icon and tinted background. */
+        this.accent = 'var(--co-color-primary-azul)';
+        /** Overlay label text. */
+        this.label = 'Suelta para subir';
+        /** Phosphor icon name shown in the badge. */
+        this.icon = 'upload-simple';
+        /**
+         * Nested dragenter/dragleave counter. Without it, moving the cursor over a
+         * slotted child fires `dragleave` (from the parent) then `dragenter` (from the
+         * child), which would flicker the overlay off and on.
+         */
+        this.dragDepth = 0;
+        this.handleDragEnter = (e) => {
+            e.preventDefault();
+            this.dragDepth++;
+            this.setActive(true);
+        };
+        this.handleDragOver = (e) => {
+            // Required so the browser will fire a `drop` event on this element.
+            e.preventDefault();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = 'copy';
+        };
+        this.handleDragLeave = (e) => {
+            e.preventDefault();
+            this.dragDepth = Math.max(0, this.dragDepth - 1);
+            if (this.dragDepth === 0)
+                this.setActive(false);
+        };
+        this.handleDrop = (e) => {
+            e.preventDefault();
+            this.dragDepth = 0;
+            const files = e.dataTransfer ? Array.from(e.dataTransfer.files) : [];
+            this.setActive(false);
+            this.coDrop.emit(files);
+        };
+    }
+    setActive(next) {
+        if (this.active === next)
+            return;
+        this.active = next;
+        this.coDragStateChange.emit(next);
+    }
+    render() {
+        return (h(Host, { key: 'd226ecd72105f1d7123224a73cbd97815278d92a', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'bd89c2a02c19a463bbd1123b359a1c96f4652454' }), this.active && (h("div", { key: '7293c928999e6be658f79f653d2a886933250a8b', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'd30b7f79f026830e838a4814cd0c6e37f0fea5d5', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'e9e7276fb71e4b7af92f4408342ac0da95ab349b', name: this.icon, size: 34 })), h("span", { key: 'd7384806639985414c1178d4b239e1a52d7af87f', class: "co-drop-zone__label", part: "label" }, this.label)))));
+    }
+};
+CoDropZone.style = coDropZoneCss();
+
+export { CoDropZone as co_drop_zone };

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

@@ -1,13 +1,23 @@
-import { r as registerInstance, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, h } from './index-Es9IUmmt.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-semantic-surface-subtle);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}`;
+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-semantic-surface-subtle);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}`;
 
 const CoEmptyState = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Visual style: `plain` (default, current behavior) or `card` (framed white card). */
+        this.variant = 'plain';
+        /** Size scale. `l` grows the medallion (98px) and heading (24/500). */
+        this.size = 'm';
     }
     render() {
-        return (h("div", { key: '6ceb9e648d3afd9d00d235be09c062b2271abf81', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '126201691f3b95f58c2e1e6a299bd76c6e2469a8', class: "co-empty-state__icon" }, h("co-icon", { key: '60e803bec3cac493264240203003f0b76a58b751', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '9b3a6fc68f92680fe93af4e17defd01979117e92', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'b78224486e9c3b12bb6c4ecccf937f613cc9853e', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b7c66fe9a617b553244f33d35ec515b2c00511ff', class: "co-empty-state__actions" }, h("slot", { key: '6e5cf479c0ecc6ccb0c718d5a062fbbc0836e6d8' }))));
+        var _a;
+        const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
+        return (h("div", { key: 'c7336e586fbce927c39b6f7e8d852849e0312e83', class: {
+                'co-empty-state': true,
+                [`co-empty-state--${this.variant}`]: true,
+                [`co-empty-state--${this.size}`]: true,
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'f58b6073926822e44fa22862ea907b664a61395e', class: "co-empty-state__icon" }, h("co-icon", { key: 'a4269c6f9926407f22dd1200b75186c0f37f7af1', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '94f7bc1e6c270253ab80c7dc54b2c3b080826d2f', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'fa263779ebe981cdbe4944883337a9daf8eaef2f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'e41f7fa89d2ee5d99793dedc377c50c0f983e8ab', class: "co-empty-state__actions" }, h("slot", { key: 'f81de2fc06cd14a6793fc1e5613d73f499482df3' }))));
     }
 };
 CoEmptyState.style = coEmptyStateCss();

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

@@ -0,0 +1,316 @@
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+import { g as getDateStrings } from './dateI18n-C1DCLOEl.js';
+import { a as todayYMD, d as addDays, p as parseISO, g as getMonthMatrix, b as addMonths, e as getMonthLabel } from './dates-tPYikBRJ.js';
+import { t as toEpoch, a as toUtcISO, g as getLocalTimeZone } from './tz-B6JZk8fL.js';
+
+/**
+ * model.ts — the calendar event model and its normalization.
+ *
+ * Hosts feed loosely-shaped events (`CoCalendarEvent`); the engine works on a
+ * strict `NormalizedEvent`. Normalization happens ONCE here so every gotcha that
+ * bit V1 is fixed in a single place:
+ *   - `allDay` is an EXPLICIT field — never inferred from a ≥24h duration.
+ *   - `end` is END-EXCLUSIVE (the instant the event stops); a missing end is
+ *     filled from a default duration, not a "+1s inclusive" hack.
+ *   - status→color is NOT hardcoded to any product palette; the host either sets
+ *     colors directly or passes a `statusColors` map. The engine stays generic.
+ *
+ * Instants for timed events are ISO-8601 strings WITH an offset/Z. All-day
+ * events use bare "YYYY-MM-DD" date strings (timezone-independent by definition).
+ */
+const DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+const MS_PER_DAY = 86400000;
+/** Parse a bare "YYYY-MM-DD" to the UTC-midnight epoch (safe integer arithmetic). */
+function dateOnlyToUtcMs(ymd) {
+    const m = DATE_ONLY_RE.exec(ymd);
+    if (!m)
+        return null;
+    const [y, mo, d] = ymd.split('-').map(Number);
+    if (mo < 1 || mo > 12 || d < 1 || d > 31)
+        return null;
+    return Date.UTC(y, mo - 1, d);
+}
+/** Format a UTC-midnight epoch back to "YYYY-MM-DD". */
+function utcMsToDateOnly(ms) {
+    return toUtcISO(ms).slice(0, 10);
+}
+/**
+ * Normalize a single loose event. Returns `null` when the event is unusable
+ * (invalid/missing start), so callers can filter without throwing.
+ */
+function normalizeEvent(raw, options = {}) {
+    if (!raw || !raw.id || !raw.start)
+        return null;
+    const defaultDuration = options.defaultDurationMinutes ?? 60;
+    const allDay = raw.allDay === true;
+    let startMs;
+    let endMs;
+    let startStr;
+    let endStr;
+    if (allDay) {
+        const sMs = dateOnlyToUtcMs(raw.start.slice(0, 10));
+        if (sMs === null)
+            return null;
+        startMs = sMs;
+        startStr = utcMsToDateOnly(sMs);
+        if (raw.end) {
+            const eMs = dateOnlyToUtcMs(raw.end.slice(0, 10));
+            // End-exclusive: an end <= start collapses to a single day.
+            endMs = eMs !== null && eMs > sMs ? eMs : sMs + MS_PER_DAY;
+        }
+        else {
+            endMs = sMs + MS_PER_DAY;
+        }
+        endStr = utcMsToDateOnly(endMs);
+    }
+    else {
+        let sMs;
+        try {
+            sMs = toEpoch(raw.start);
+        }
+        catch {
+            return null;
+        }
+        startMs = sMs;
+        startStr = raw.start;
+        if (raw.end) {
+            let eMs;
+            try {
+                eMs = toEpoch(raw.end);
+            }
+            catch {
+                return null;
+            }
+            endMs = eMs > sMs ? eMs : sMs + defaultDuration * 60000;
+        }
+        else {
+            endMs = sMs + defaultDuration * 60000;
+        }
+        endStr = toUtcISO(endMs);
+    }
+    // Color resolution: explicit wins; else status map; else undefined (themed by CSS).
+    const statusStyle = raw.status ? options.statusColors?.[raw.status] : undefined;
+    const backgroundColor = raw.backgroundColor ?? raw.color ?? statusStyle?.backgroundColor;
+    const borderColor = raw.borderColor ?? statusStyle?.borderColor;
+    const editable = raw.editable ?? true;
+    return {
+        id: raw.id,
+        title: raw.title ?? '',
+        allDay,
+        start: startStr,
+        end: endStr,
+        startMs,
+        endMs,
+        status: raw.status,
+        backgroundColor,
+        borderColor,
+        className: raw.className,
+        editable,
+        startEditable: raw.startEditable ?? editable,
+        durationEditable: raw.durationEditable ?? editable,
+        display: raw.display ?? 'block',
+        extendedProps: raw.extendedProps ?? {},
+    };
+}
+/** Normalize a list, dropping unusable events. */
+function normalizeEvents(raw, options = {}) {
+    if (!Array.isArray(raw))
+        return [];
+    const out = [];
+    for (const e of raw) {
+        const n = normalizeEvent(e, options);
+        if (n)
+            out.push(n);
+    }
+    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 CoEventCalendar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coEventClick = createEvent(this, "coEventClick", 3);
+        this.coDateSelect = createEvent(this, "coDateSelect", 3);
+        this.coEventDrop = createEvent(this, "coEventDrop", 3);
+        this.coDatesSet = createEvent(this, "coDatesSet", 3);
+        this.coViewChange = createEvent(this, "coViewChange", 3);
+        this.coMoreClick = createEvent(this, "coMoreClick", 3);
+        /** Active view. Phase 1 ships `month`; week/day/agenda land in later phases. */
+        this.view = 'month';
+        /** Events: an array or a JSON string (raw-HTML use). */
+        this.events = [];
+        /** BCP-47 locale for labels. */
+        this.locale = 'es-CO';
+        /** Master interaction gate (per-event `editable` can still lock individuals). */
+        this.editable = true;
+        /** Allow empty-day selection to request a create. */
+        this.selectable = true;
+        /** Max event lanes per day before "+N more". */
+        this.dayMaxEvents = 3;
+        /** First day of week, 0=Sun..6=Sat. */
+        this.firstDayOfWeek = 1;
+        /** Views offered in the switcher. Defaults to the implemented set. */
+        this.availableViews = ['month'];
+        /** Default minutes for a timed event missing an end. */
+        this.defaultDurationMinutes = 60;
+        this.goToday = () => this.setAnchor(todayYMD());
+        this.goPrev = () => this.step(-1);
+        this.goNext = () => this.step(1);
+        // ── Month delegation handlers ───────────────────────────────────────────
+        this.handleDaySelect = (e) => {
+            const date = e.detail.date;
+            this.coDateSelect.emit({ start: date, end: addDays(date, 1), allDay: true });
+        };
+        this.handleEventClick = (e) => {
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (ev)
+                this.coEventClick.emit({ event: ev });
+        };
+        this.handleEventDrop = (e) => {
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (!ev)
+                return;
+            this.coEventDrop.emit({
+                event: ev,
+                start: e.detail.start,
+                end: e.detail.end,
+                oldStart: e.detail.oldStart,
+                oldEnd: e.detail.oldEnd,
+                allDay: e.detail.allDay,
+                revert: () => {
+                    /* controlled mode: host reverts by not updating `events` */
+                },
+            });
+        };
+        this.handleMoreClick = (e) => {
+            const date = e.detail.date;
+            const tz = this.tz;
+            const events = this.normalized.filter((ev) => {
+                const day = ev.allDay ? ev.start.slice(0, 10) : zonedDay(ev.startMs, tz);
+                return day === date;
+            });
+            this.coMoreClick.emit({ date, events });
+        };
+    }
+    componentWillLoad() {
+        this.anchor = this.date && parseISO(this.date) ? this.date : todayYMD();
+    }
+    componentDidLoad() {
+        this.emitDatesSet();
+    }
+    onDateChange(value) {
+        if (value && parseISO(value) && value !== this.anchor) {
+            this.anchor = value;
+            this.emitDatesSet();
+        }
+    }
+    get tz() {
+        return this.timeZone || getLocalTimeZone();
+    }
+    get normalized() {
+        const raw = parseEventsProp(this.events);
+        const opts = {
+            defaultDurationMinutes: this.defaultDurationMinutes,
+            statusColors: parseStatusColors(this.statusColors),
+        };
+        return normalizeEvents(raw, opts);
+    }
+    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. */
+    visibleRange() {
+        const a = parseISO(this.anchor);
+        const matrix = getMonthMatrix(a.year, a.month, this.firstDayOfWeek);
+        const start = matrix[0][0].value;
+        const last = matrix[matrix.length - 1][6].value;
+        return { start, end: addDays(last, 1) };
+    }
+    emitDatesSet() {
+        const { start, end } = this.visibleRange();
+        this.coDatesSet.emit({ view: this.view, start, end, activeDate: this.anchor });
+    }
+    setAnchor(next) {
+        this.anchor = next;
+        this.date = next;
+        this.emitDatesSet();
+    }
+    step(dir) {
+        if (this.view === 'month') {
+            this.setAnchor(addMonths(this.anchor, dir));
+        }
+        else {
+            this.setAnchor(addDays(this.anchor, dir * 7));
+        }
+    }
+    switchView(next) {
+        if (next === this.view)
+            return;
+        this.view = next;
+        this.coViewChange.emit({ view: next });
+        this.emitDatesSet();
+    }
+    title() {
+        const a = parseISO(this.anchor);
+        return getMonthLabel(a.year, a.month, this.locale, 'long');
+    }
+    render() {
+        var _a;
+        const t = getDateStrings(this.locale);
+        const views = this.viewsList;
+        const a = parseISO(this.anchor);
+        return (h("div", { key: '0c5af4d184497f5fc8c04cc62d66f572db2a7a01', class: "cal" }, h("div", { key: 'c75f5290fd13d52d82eb639d6aff951c13e40ed3', class: "cal__toolbar", part: "toolbar" }, h("div", { key: 'eca46b8aa1cd485dbeacf235a868065af736aee3', class: "cal__nav-group" }, h("button", { key: 'e9f1e03c8c94698d66aea9ee7a292e82c132d603', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '017d7b8a2f19cfe4785213d5d77f90ee895fbad5', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '296bdcdf30e130a085cc859a84eb3d590b9ef5b7', name: "caret-left", size: 16 })), h("button", { key: '53baaddc224a924fc06a5555cb297e05ee8785d9', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '736ae81e00e458fd1c71414ad8dcf309a13faee0', name: "caret-right", size: 16 }))), h("h2", { key: '87261ba9a5b7d7dd0ba3c3641c21d15ce37eebed', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+            var _a;
+            return (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));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: 'f0962c6de9446110ef52455839a7cf5cb570cee0', class: "cal__body", part: "body" }, this.view === 'month' ? (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 })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+    }
+    static get watchers() { return {
+        "date": [{
+                "onDateChange": 0
+            }]
+    }; }
+};
+// ── helpers ─────────────────────────────────────────────────────────────────
+function parseEventsProp(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value === 'string' && value.trim()) {
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return [];
+}
+function parseStatusColors(value) {
+    if (!value)
+        return undefined;
+    if (typeof value === 'string') {
+        try {
+            return JSON.parse(value);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    return value;
+}
+/** Local import-free wall-clock day; mirrors engine zonedDateKey to avoid a dep here. */
+function zonedDay(ms, timeZone) {
+    const parts = new Intl.DateTimeFormat('en-CA', {
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).format(new Date(ms));
+    return parts; // en-CA → "YYYY-MM-DD"
+}
+CoEventCalendar.style = coEventCalendarCss();
+
+export { CoEventCalendar as co_event_calendar };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.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--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--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-semantic-surface-primary);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}`;
 
@@ -20,14 +20,14 @@ const CoFab = class {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: '90ffc7d273a4aca5bbe3214d9f6ba3a8c5d063da', class: {
+        return (h("button", { key: 'a3dd864b2e80488b07b9fc4214281a34045c3968', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
                 'co-fab--extended': isExtended,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '29745cdc0f20d21d4d5a130d523f7a6839a9927c', name: this.icon, size: iconSize }), this.label && h("span", { key: '9314aa4e634e2bb3280bc9015e6a60b265afca43', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '3d2e12a325d1ca7b006579f34e9c0c2d6f792a40', name: this.icon, size: iconSize }), this.label && h("span", { key: 'f209c549b6960bc4737763f8a47efb2771bb8aff', class: "co-fab__label" }, this.label)));
     }
 };
 CoFab.style = coFabCss();

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
 
 /**
  * Built-in UI string dictionary for co-file-field.
@@ -126,7 +126,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:var(--co-semantic-surface-hover);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}`;
+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 CoFileField = class {
     constructor(hostRef) {
@@ -450,12 +450,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 (h("div", { key: 'ec349a2beeea1fb9195d9e117056270c125dce4c', class: {
+        return (h("div", { key: '5f851ab10c6bae9b2f06ef5f1a7acd130eebf40b', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'e89a935967628ef58775a1449a44b19dea35bfe4', class: "co-file-field__labels" }, h("label", { key: 'e24cccf041b29fc39706dacb8d3eb3c06fd8ee9d', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'ae32e17c9411158e0f69cd508f12e56bd56ed7a4', required: this.required })))), showDropzone && (h("div", { key: '6216f8858dc7195dfe3999a8ac636409ef12eb3d', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'c97389b2d98e3c97e367425a354b7184c0915c0b', class: "co-file-field__labels" }, h("label", { key: '5ee9359c1d07c30179330fe8921aab9b4633d165', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0cc79f6ae165e74600152c1e1adaa2bd9a8133ee', required: this.required })))), showDropzone && (h("div", { key: '80be725bcd67b24d0fa086dabb82d033b6e68f9f', 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) => {
@@ -463,7 +463,7 @@ const CoFileField = class {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'ee667570d661b19a8fbd43f8673fc4817c95c6db', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '8f6663547642c9005f706e8f7289ffe58f6226c5', name: "file-arrow-up", size: 18 }), h("span", { key: '39e1d8c2a875b9e6249138d4b4b9ce0d2dbf4ad4' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '2f317b69e38a99ec24d661145efbdb9d77ff2f67', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'ba3c34747e83aa42e3eb0a821ed49dd4b27457b1', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'b44d49306d37ec6569ee85047b57298dbf97bf96', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '36a17ecbc89b70cc140045ce1b2c6b251d5363e7', name: "actions" })), h("input", { key: '07d10d77c3673fd8f92b5eacadf342469400c1cb', 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 && (h("div", { key: '5fb766f14920218f0cc3cfa80256af8542dbc44e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'a133328f198a7d7947cbfb1e77b822f70310ec1a', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'cef939986d1f70d907dcb6f3f048b4fb1fe5156d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (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) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'db43db11520f245328ee76de839112d7a4c766e5', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '6378b733d6de2dfbefacfae2a33ebabe3557b013', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '6b6fd92b0ca0230375020952e05aee09c0d5d3f6', name: "file-arrow-up", size: 18 }), h("span", { key: 'de33f04a2715781a3a5853d051856b17625eac31' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '881304671a167b3052b37749457aa6d77773b3a9', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '331c798170b47a0fbe48fd6bb9c742c1927222e5', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '821977df4fd123864ebe2bef8576711addd89578', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'cab4df18f87f2b4f70790451ad7bcf4d83d66142', name: "actions" })), h("input", { key: 'fe9afd3562558f9a03d3f7fc1cfe8fbde84d290a', 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 && (h("div", { key: '635ec6cd392c6e28e01ce90c1386db5c233de07f', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '433ef13bc077e247bd72601ce1e6b5f76ac3dba3', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '92f9a138e2317751554cd5c4a5a6c33c730ac909', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (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) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'fc600da498880f6d07402204c5edadb87aa94d0c', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -484,10 +484,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) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'ce339d27da1fd8a224bebd1a7d7ed16a3571cfec', class: {
+        })))), helper && (h("div", { key: '6393f353fff2597d24e91850525068646d4563cc', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '691ff2e82d45ee55e8087dd86c4389f05ecee268', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '0f35c1734cbfd2bae2be1d85948fcca8ad92e5c2', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7bd66efa2c2d2f35b3c11283fc28cd672a77e4e5', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '7744d3bd75b84354db79bb0796f4e3d2bc293d2e', class: "co-file-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
 };