@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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

@@ -0,0 +1,63 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.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) {
+        index.registerInstance(this, hostRef);
+        this.coDrop = index.createEvent(this, "coDrop", 7);
+        this.coDragStateChange = index.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 (index.h(index.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 }, index.h("slot", { key: 'bd89c2a02c19a463bbd1123b359a1c96f4652454' }), this.active && (index.h("div", { key: '7293c928999e6be658f79f653d2a886933250a8b', class: "co-drop-zone__overlay", part: "overlay" }, index.h("div", { key: 'd30b7f79f026830e838a4814cd0c6e37f0fea5d5', class: "co-drop-zone__badge", part: "badge" }, index.h("co-icon", { key: 'e9e7276fb71e4b7af92f4408342ac0da95ab349b', name: this.icon, size: 34 })), index.h("span", { key: 'd7384806639985414c1178d4b239e1a52d7af87f', class: "co-drop-zone__label", part: "label" }, this.label)))));
+    }
+};
+CoDropZone.style = coDropZoneCss();
+
+exports.co_drop_zone = CoDropZone;

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

@@ -1,15 +1,25 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.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) {
         index.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 (index.h("div", { key: '68397ba09dd6d82282d7db563661336ccc486386', class: "co-empty-state", part: "empty-state" }, this.icon && (index.h("div", { key: '85b31861da503e36312d14a941d3cc143cc07806', class: "co-empty-state__icon" }, index.h("co-icon", { key: '2592b0d3f395455a4bf9986ce91e7df38506baec', name: this.icon, size: 40, weight: "light" }))), this.heading && (index.h("div", { key: 'f949906b9403693d90b7591fa92232cb65820fcd', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: '229b1ec71c70b1fdd5caa1e00b8013e5d0b55c8f', class: "co-empty-state__description" }, this.description)), index.h("div", { key: 'b24817feb623386a92d4c7442631f624828f9f4a', class: "co-empty-state__actions" }, index.h("slot", { key: 'f5819e1b60a761950b2f1c7d16ac40db9f120d97' }))));
+        var _a;
+        const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
+        return (index.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 && (index.h("div", { key: 'f58b6073926822e44fa22862ea907b664a61395e', class: "co-empty-state__icon" }, index.h("co-icon", { key: 'a4269c6f9926407f22dd1200b75186c0f37f7af1', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (index.h("div", { key: '94f7bc1e6c270253ab80c7dc54b2c3b080826d2f', class: "co-empty-state__heading" }, this.heading)), this.description && (index.h("div", { key: 'fa263779ebe981cdbe4944883337a9daf8eaef2f', class: "co-empty-state__description" }, this.description)), index.h("div", { key: 'e41f7fa89d2ee5d99793dedc377c50c0f983e8ab', class: "co-empty-state__actions" }, index.h("slot", { key: 'f81de2fc06cd14a6793fc1e5613d73f499482df3' }))));
     }
 };
 CoEmptyState.style = coEmptyStateCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 var dates = require('./dates-D8D-aS5d.js');
 var tz = require('./tz-Dgom0W69.js');
@@ -264,10 +264,10 @@ const CoEventCalendar = class {
         const t = dateI18n.getDateStrings(this.locale);
         const views = this.viewsList;
         const a = dates.parseISO(this.anchor);
-        return (index.h("div", { key: 'dca7d290407d0815ed127e9ea85bd9581ca1238d', class: "cal" }, index.h("div", { key: '739c0374461233ea08fb1d7ba9dd9104194d4348', class: "cal__toolbar", part: "toolbar" }, index.h("div", { key: '70bc5571180aba131a52a6a46041f0a3a8227819', class: "cal__nav-group" }, index.h("button", { key: 'f0308bd1a9eb83b98aaabc9fcc7e08536f34e630', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), index.h("button", { key: '8979b382c37384f59f00f566afb9ade636944811', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, index.h("co-icon", { key: 'cb83fb82be3f902315c6d1072a3706dc0716fb9a', name: "caret-left", size: 16 })), index.h("button", { key: '4505ac7e1fdbe452349f36a696bde9a2f6a8b63e', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, index.h("co-icon", { key: 'fee0a868c53fc92ac1e31f8a6e582e3c651a727c', name: "caret-right", size: 16 }))), index.h("h2", { key: '4641c225889d32834236e4ff22d60b4777e1625d', 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: '0c5af4d184497f5fc8c04cc62d66f572db2a7a01', class: "cal" }, index.h("div", { key: 'c75f5290fd13d52d82eb639d6aff951c13e40ed3', class: "cal__toolbar", part: "toolbar" }, index.h("div", { key: 'eca46b8aa1cd485dbeacf235a868065af736aee3', class: "cal__nav-group" }, index.h("button", { key: 'e9f1e03c8c94698d66aea9ee7a292e82c132d603', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), index.h("button", { key: '017d7b8a2f19cfe4785213d5d77f90ee895fbad5', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, index.h("co-icon", { key: '296bdcdf30e130a085cc859a84eb3d590b9ef5b7', name: "caret-left", size: 16 })), index.h("button", { key: '53baaddc224a924fc06a5555cb297e05ee8785d9', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, index.h("co-icon", { key: '736ae81e00e458fd1c71414ad8dcf309a13faee0', name: "caret-right", size: 16 }))), index.h("h2", { key: '87261ba9a5b7d7dd0ba3c3641c21d15ce37eebed', class: "cal__title", "aria-live": "polite" }, this.title()), 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: '152eacc1320a7b3d0e33c31e9c6cbf04cd756855', 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: 'f0962c6de9446110ef52455839a7cf5cb570cee0', 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`))))));
     }
     static get watchers() { return {
         "date": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.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}`;
 
@@ -22,14 +22,14 @@ const CoFab = class {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (index.h("button", { key: '4e5be05c3e525fa2de4930300f562d2da993cd60', class: {
+        return (index.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 }, index.h("co-icon", { key: 'a827e3c5bfc7fdd162c8618443eb6696a4659709', name: this.icon, size: iconSize }), this.label && index.h("span", { key: '879b3be3bc35fc7b2eeeebc9263e2d9a10e3f5ba', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, index.h("co-icon", { key: '3d2e12a325d1ca7b006579f34e9c0c2d6f792a40', name: this.icon, size: iconSize }), this.label && index.h("span", { key: 'f209c549b6960bc4737763f8a47efb2771bb8aff', class: "co-fab__label" }, this.label)));
     }
 };
 CoFab.style = coFabCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
-var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var index = require('./index-NNvye1ul.js');
+var requiredMark = require('./requiredMark-DyjZzUCd.js');
 
 /**
  * Built-in UI string dictionary for co-file-field.
@@ -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: 'a4bc53a3deccc7ef04de56356583a8fbcbe39649', class: {
+        return (index.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 && (index.h("div", { key: '4d4c418ff76f72ac7b491dc5173078ebcecdfbb7', class: "co-file-field__labels" }, index.h("label", { key: 'afe9d0d47d50178270a4a4a7f9a90af4f8472958', class: "co-file-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'e4879bd87853fcbb0552d9e6835fb3934916c29f', required: this.required })))), showDropzone && (index.h("div", { key: 'f60920fe11c3d1020ffb6043f20f3a82e6905cb2', class: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: 'c97389b2d98e3c97e367425a354b7184c0915c0b', class: "co-file-field__labels" }, index.h("label", { key: '5ee9359c1d07c30179330fe8921aab9b4633d165', class: "co-file-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '0cc79f6ae165e74600152c1e1adaa2bd9a8133ee', required: this.required })))), showDropzone && (index.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) => {
@@ -465,7 +465,7 @@ const CoFileField = class {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("button", { key: 'f9152f578e99a926a3b81996917f2a592b8d14cd', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, index.h("co-icon", { key: '93a116c81906b5daaac81feb6d671d942d085bd8', name: "file-arrow-up", size: 18 }), index.h("span", { key: 'fb09b9218d6185d116d75368591b6b7e2be399b6' }, this.uploadButtonText || s.uploadButton)), index.h("span", { key: 'd4287e8a0070536125f09dfdd73925476a6cebcf', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && index.h("span", { key: '5626df4c28f2f5c4967abeb839db53a39bc547d8', class: "co-file-field__dropzone-hint" }, capacity), index.h("div", { key: '40ec0e991be663ffe5f55618ed97de44221e9780', class: "co-file-field__actions", part: "actions" }, index.h("slot", { key: '2037922c65407155a051533050bab4bbaa908633', name: "actions" })), index.h("input", { key: '74e2fd73161811ef41eec79786598f3bc86075d8', 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: 'cff78c1550847e20bcfe5b24fd6d14a5e80033d9', class: "co-file-field__uploaded" }, this.multiple && (index.h("div", { key: 'fa99dad43c4982f14bc330598d27d99d44e6516c', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (index.h("div", { key: '83cc2ebec6af1b1baa66a74eb620c82a8eff5569', 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: 'acc3232ccadc13f72a84cc4e3dd2281499a583b7', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("button", { key: '6378b733d6de2dfbefacfae2a33ebabe3557b013', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, index.h("co-icon", { key: '6b6fd92b0ca0230375020952e05aee09c0d5d3f6', name: "file-arrow-up", size: 18 }), index.h("span", { key: 'de33f04a2715781a3a5853d051856b17625eac31' }, this.uploadButtonText || s.uploadButton)), index.h("span", { key: '881304671a167b3052b37749457aa6d77773b3a9', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && index.h("span", { key: '331c798170b47a0fbe48fd6bb9c742c1927222e5', class: "co-file-field__dropzone-hint" }, capacity), index.h("div", { key: '821977df4fd123864ebe2bef8576711addd89578', class: "co-file-field__actions", part: "actions" }, index.h("slot", { key: 'cab4df18f87f2b4f70790451ad7bcf4d83d66142', name: "actions" })), index.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 && (index.h("div", { key: '635ec6cd392c6e28e01ce90c1386db5c233de07f', class: "co-file-field__uploaded" }, this.multiple && (index.h("div", { key: '433ef13bc077e247bd72601ce1e6b5f76ac3dba3', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (index.h("div", { key: '92f9a138e2317751554cd5c4a5a6c33c730ac909', 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: 'fc600da498880f6d07402204c5edadb87aa94d0c', 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: 'ef2efaa2264b229e372679c00a554a88fed804a0', class: {
+        })))), helper && (index.h("div", { key: '6393f353fff2597d24e91850525068646d4563cc', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '7b9ddbcc88296ddb30cf6fe3d651afba544ef991', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '1090e1cd4508413ebda4ed649df1852be46f5fb5', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '7bd66efa2c2d2f35b3c11283fc28cd672a77e4e5', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '7744d3bd75b84354db79bb0796f4e3d2bc293d2e', class: "co-file-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.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}`;
+
+/** Extension → type bucket. Unknown extensions fall back to `file`. */
+const EXT_TO_TYPE = {
+    pdf: 'pdf',
+    doc: 'doc',
+    docx: 'doc',
+    txt: 'txt',
+    md: 'txt',
+    xls: 'sheet',
+    xlsx: 'sheet',
+    csv: 'sheet',
+    png: 'image',
+    jpg: 'image',
+    jpeg: 'image',
+    gif: 'image',
+    svg: 'image',
+    webp: 'image',
+    mp4: 'video',
+    mov: 'video',
+    webm: 'video',
+    fig: 'design',
+    ai: 'design',
+    psd: 'design',
+    sketch: 'design',
+    zip: 'zip',
+    rar: 'zip',
+};
+/** Type → { icon, accent (foreground), tint (background) }. Exact values per design spec (audit 1.6). */
+const TYPE_META = {
+    pdf: { icon: 'file-pdf', accent: 'var(--co-color-secondary-rojo-100)', tint: 'rgb(255,236,236)' },
+    doc: { icon: 'file-text', accent: 'var(--co-color-primary-azul)', tint: 'var(--co-color-azul-100)' },
+    sheet: { icon: 'table', accent: 'var(--co-color-status-success)', tint: 'var(--co-color-verde-100)' },
+    image: { icon: 'image', accent: 'var(--co-color-secondary-violeta-100)', tint: 'rgb(233,232,255)' },
+    video: { icon: 'broadcast', accent: 'var(--co-color-secondary-naranja-100)', tint: 'rgb(255,236,220)' },
+    txt: { icon: 'text-align-left', accent: 'var(--co-color-gray-600)', tint: 'var(--co-color-gray-100)' },
+    design: { icon: 'sparkle', accent: 'var(--co-color-primary-rosado)', tint: 'var(--co-color-rosado-100)' },
+    zip: { icon: 'package', accent: 'var(--co-color-status-pending)', tint: 'var(--co-color-status-bg-pending)' },
+    file: { icon: 'file', accent: 'var(--co-color-gray-600)', tint: 'var(--co-color-gray-100)' },
+};
+const CoFileTypeTile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Tile edge length in px (React uses 44 / 34 / 26). */
+        this.size = 44;
+        /** Corner radius in px (React uses 11 / 9 / 7). */
+        this.radius = 11;
+        /** When true, use the type's tint/accent colors; when false, neutral gray-100 / gray-600. */
+        this.colorTags = true;
+    }
+    render() {
+        var _a, _b;
+        const key = ((_a = this.ext) !== null && _a !== void 0 ? _a : '').trim().toLowerCase().replace(/^\./, '');
+        const type = (_b = EXT_TO_TYPE[key]) !== null && _b !== void 0 ? _b : 'file';
+        const meta = TYPE_META[type];
+        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: 'dd64643dbab1f850840ba3c6045284e42af0655f', class: {
+                'co-file-type-tile': true,
+                [`co-file-type-tile--${type}`]: true,
+                'co-file-type-tile--mono': !this.colorTags,
+            }, part: "tile", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: `${this.radius}px`,
+                background,
+                color,
+            } }, index.h("co-icon", { key: '816be0fe4d7934b7a45014c2ffb77850ba2ad4a5', name: meta.icon, size: iconSize, weight: "fill" })));
+    }
+};
+CoFileTypeTile.style = coFileTypeTileCss();
+
+exports.co_file_type_tile = CoFileTypeTile;

package/dist/cjs/co-helper-text.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coHelperTextCss = () => `:host{display:block}.co-helper-text{display:flex;align-items:center;gap:var(--co-spacing-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);line-height:1.4}.co-helper-text__icon{flex-shrink:0}.co-helper-text--default{color:var(--co-semantic-text-muted)}.co-helper-text--error{color:var(--co-semantic-status-error)}.co-helper-text--success{color:var(--co-semantic-status-success)}.co-helper-text--warning{color:var(--co-semantic-status-warning)}.co-helper-text--info{color:var(--co-semantic-status-info)}`;
 
@@ -18,10 +18,10 @@ const CoHelperText = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'fb1894ff2656d74d2c892a6c857d98269604b04e', class: {
+        return (index.h("div", { key: '732ca77f8a91d2f2f44f297034c08d3145ef1915', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, index.h("co-icon", { key: 'd56c274e9f44ae16b13a02ec262d0d14b109fc5b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), index.h("span", { key: '5e776db146922fc1271bff50b1b45245baf088b3', class: "co-helper-text__message" }, index.h("slot", { key: 'c3f93747e7b903296d24f60f87c9e3c29c2cb1cd' }, this.message))));
+            }, part: "helper-text" }, index.h("co-icon", { key: '75913515f01d48a7075b2f222333dfc00db4a3aa', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), index.h("span", { key: '1598b419be64573b6e6c48f0f84be7ffebd7da48', class: "co-helper-text__message" }, index.h("slot", { key: '03c83e97d4690edb32ae1f88738a6baa7438d656' }, this.message))));
     }
 };
 CoHelperText.style = coHelperTextCss();

package/dist/cjs/co-icon-button.cjs.entry.js

@@ -1,17 +1,23 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coIconButtonCss = () => `:host{display:inline-flex}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 60%, 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))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}`;
+const coIconButtonCss = () => `:host{display:inline-flex}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * filled = dark background (negro), outlined = light background (blanco + border)
+         * filled = dark background (negro), outlined = light background (blanco + border),
+         * ghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark).
          * Matches Figma: Secundario → filled, Primario → outlined
          */
         this.variant = 'filled';
+        /**
+         * Surface the button sits on. `dark` → white icon + blanco-16 hover (on-dark theming).
+         * Defaults to `light` (no extra class → identical to previous behavior).
+         */
+        this.surface = 'light';
         /** Shape: pill or straight corners */
         this.shape = 'rounded';
         /**
@@ -31,15 +37,25 @@ const CoIconButton = class {
         const iconSizeMap = {
             xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
-        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24;
-        return (index.h("button", { key: '3e53ed7dbb6d68bfecd22f29b16bb792bcc9c565', class: {
+        const resolvedIconSize = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ((_b = iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24);
+        const boxStyle = this.boxSize != null
+            ? {
+                width: `${this.boxSize}px`,
+                height: `${this.boxSize}px`,
+                borderRadius: this.shape === 'square'
+                    ? 'var(--co-border-radius-xs, 8px)'
+                    : 'var(--co-border-radius-full)',
+            }
+            : undefined;
+        return (index.h("button", { key: '7990e81b633e1a4c69527ffd393f33301903611f', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
                 [`co-icon-button--${this.size}`]: true,
+                'co-icon-button--dark': this.surface === 'dark',
                 'co-icon-button--disabled': this.disabled,
-            }, disabled: this.disabled, "aria-label": this.label || this.icon, part: "button" }, this.icon
-            ? index.h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })
+            }, style: boxStyle, disabled: this.disabled, "aria-label": this.label || this.icon, part: "button" }, this.icon
+            ? index.h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })
             : null));
     }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
 /** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
@@ -69,12 +69,12 @@ const CoIcon = class {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (index.h(index.Host, { key: '65fc20ae25aff18456c778d69454259755477cc8', "aria-hidden": "true", style: {
+        return (index.h(index.Host, { key: '246bcceba97f0ebf49e12085dd57ea7cfff8824e', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, index.h("span", { key: '867d361c4cd66611a38ccca0910ac93e9b41ed18', part: "svg", innerHTML: this.svgContent })));
+            } }, index.h("span", { key: 'fe485e37bf4942653906a587799c3e7ab9638783', part: "svg", innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": [{

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
-var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var index = require('./index-NNvye1ul.js');
+var requiredMark = require('./requiredMark-DyjZzUCd.js');
 
-const coInputCss = () => `: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-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{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-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 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 solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.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)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}`;
+const coInputCss = () => `: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-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{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-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 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 solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.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)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -33,8 +33,16 @@ const CoInput = class {
         this.required = false;
         /** Validation status */
         this.status = 'default';
-        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px) */
+        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px).
+         *  In the filled search-pill variant (`fill`) this drives the pill height
+         *  instead (s ≈ 38px). */
         this.size = 'md';
+        /** Filled search-pill variant. When true the field renders as a minimal gray
+         *  pill (background gray-100, no border/box-shadow, 10px radius) with a search
+         *  glyph on the left and a plain-`x` clear — the floating label, helper text and
+         *  status chrome are suppressed. When false (default) the field renders
+         *  IDENTICALLY to the standard text field. */
+        this.fill = false;
         this.hasFocus = false;
         this.handleInput = (e) => {
             const target = e.target;
@@ -94,9 +102,30 @@ const CoInput = class {
             default: return null;
         }
     }
+    /** Filled search-pill variant (fill=true). Minimal chrome: icon-left + native
+     *  input + plain-x clear. No labels, helper text, status icons, chips or action.
+     *  The default field render path is left untouched. */
+    renderFill() {
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const leftIcon = this.iconLeft || 'magnifying-glass';
+        return (index.h("div", { class: {
+                'co-input': true,
+                'co-input--fill': true,
+                [`co-input--${this.size}`]: true,
+                'co-input--disabled': this.disabled,
+                'co-input--focused': this.hasFocus,
+                'co-input--filled': this.hasValue,
+            }, part: "wrapper" }, index.h("div", { class: "co-input__field-row" }, index.h("div", { class: "co-input__field", part: "field" }, index.h("co-icon", { name: leftIcon, size: 17, class: "co-input__icon co-input__icon--left" }), index.h("div", { class: "co-input__input-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { class: {
+                'co-input__clear': true,
+                'co-input__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { name: "x", size: 14 })))))));
+    }
     render() {
+        if (this.fill) {
+            return this.renderFill();
+        }
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (index.h("div", { key: '3c628ddcc708f39637038f25118918fbe0f9cff2', class: {
+        return (index.h("div", { class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
                 [`co-input--${this.size}`]: true,
@@ -105,10 +134,10 @@ const CoInput = class {
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '89513c64c7d590c77159f6a983ed4973289be0d2', class: "co-input__labels" }, this.label && index.h("label", { key: '4a0874ec1828c5a19ef87c23878d2317f3d441df', class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'e7a72a5c861923f43968ad95a6c47b46ae13b9ed', required: this.required })), this.secondaryLabel && (index.h("span", { key: '87911501ccb15a2bd4ef4e58e3537bc968e0f0d2', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '0c1a530d1a687798f0803564be36409b23d5a1fd', class: "co-input__field-row" }, index.h("div", { key: 'bb731973f9406d649c3aff55071bd50fd7ebc991', class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { key: '4d244ba725651414653c531e3017f8d3a6ccbfd4', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { key: '9c2c242a1887a05c4fcc88dbbb99c86ce0b5113f', name: "chips" }), index.h("div", { key: '8568e8abdc2c37b565b2446126638b43a649d721', class: "co-input__input-wrapper" }, index.h("input", { key: '6f311f448b23a936e1da7fe547e7510e236bcf99', ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { key: '5826d5d68a03b1cec942a004578f969920a13609', class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { class: "co-input__labels" }, this.label && index.h("label", { class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), this.secondaryLabel && (index.h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { class: "co-input__field-row" }, index.h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { name: "chips" }), index.h("div", { class: "co-input__input-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { key: 'b987c7ceeb51c7a2bde1a53b6e80484b1fe2ff90', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { key: '07e2d8f0ffca417ed82d95b97cf42efaf24212e9', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { key: '7f1ce796c3d8fda6e3d5b5f63ffa819c6925daef', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { key: '7294036e68f6f2ff1efe57c957765415691b7d21', name: "suffix" }), index.h("slot", { key: 'ca865d10565b3b1f140b5d23c52781ea71f5f0ae' }), index.h("slot", { key: '2422fd84d5ce0f4d1c4eacedeaa72ea259cb1580', name: "action" })), this.hasAction && (index.h("button", { key: '5dd232fc1a449cf73ddda1e06d28c9d8a9dc4a0d', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { key: '7cada4fa70ea0ec79754c5a46a59367ea8c66fad', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { key: 'f27e5c1ea7ff1f83714ae5f542558518dc00a937', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { key: 'd806c9e918ac1edac3eb703926c0c405019190e1', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { key: '80f6b84d4354ccf965596cb9546a531cbbc932e0', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { key: '8f01456c3cfec988ffc6f7c6a03c1ecc43ee4c2c', class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { name: "suffix" }), index.h("slot", null), index.h("slot", { name: "action" })), this.hasAction && (index.h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { class: "co-input__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
-var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var index = require('./index-NNvye1ul.js');
+var requiredMark = require('./requiredMark-DyjZzUCd.js');
 
 const coJsonFieldCss = () => `: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-json-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-json-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-json-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-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-json-field__field{display:flex;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 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 solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;box-sizing:border-box;overflow:hidden}.co-json-field__native{width:100%;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--co-font-family-mono, monospace);font-size:var(--co-font-size-13, 13px);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box;tab-size:2}.co-json-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-json-field--s .co-json-field__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12, 12px)}.co-json-field--sm .co-json-field__native{padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-json-field--lg .co-json-field__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-14)}.co-json-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-json-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-json-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-json-field--disabled{opacity:0.6;pointer-events:none}.co-json-field--disabled .co-json-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-json-field--invalid .co-json-field__field,.co-json-field--error .co-json-field__field{border-color:var(--co-semantic-status-error)}.co-json-field--invalid.co-json-field--focused .co-json-field__field,.co-json-field--error.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-json-field__helper--error .co-json-field__helper-icon,.co-json-field__helper--error .co-json-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-json-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-json-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-json-field__label{white-space:normal}:host([layout='horizontal']) .co-json-field>:not(.co-json-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-json-field__field{background:var(--co-semantic-surface-secondary)}}`;
 
@@ -89,17 +89,17 @@ const CoJsonField = class {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (index.h("div", { key: '0f1319b6cd930e576dbba45dfb3bbb9050c8a4c0', class: {
+        return (index.h("div", { key: '3694e74443cabde9c86e37a38d2ab93f49e2a239', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (index.h("div", { key: '50cfffd0dedb3b091cebadf7b908594d855c1e92', class: "co-json-field__labels" }, index.h("label", { key: '77410a04bc4ca4f61dd8be107acb159a918f811c', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '21f0c872f95b39e38e16388a0935aebe333640ad', required: this.required })))), index.h("div", { key: 'f7da7b3e56bc9bb1bfe1759f4e6ea260bd45b19e', class: "co-json-field__field", part: "field" }, index.h("textarea", { key: '8f5413bb82906a15d83130ca963b771e6539d7f6', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && index.h("input", { key: '5c844c980cafec58d64ff473022ace4b11f10b26', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: 'af8b770be33f336be652e0b6b567a602a59d8e63', class: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: '806b6b2e0aa1fc4cade79fec7111e7afa4f23faf', class: "co-json-field__labels" }, index.h("label", { key: 'c01947ab92bb4849469e70b3077fa0af5fa953bd', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'f91fd778dba0cdb233872dcace643112e0d3c4de', required: this.required })))), index.h("div", { key: '4070579d2d8fe149c19163133d7ea549f965725e', class: "co-json-field__field", part: "field" }, index.h("textarea", { key: '91e21766aae9f39e76c003720207bebfb087af4f', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && index.h("input", { key: '87736d190c59a59a46ae0a341f28135892f109d0', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: '304a65252877ae80e52278bea82128a8f7df3c90', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '8ed6b6f2444fbf408818b1ac9911f4513c963dee', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: '9282196dfd8f2662c073d7589dd7fd93447101f8', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '1771161363b23da8aac7f1c70ab56b32f208f5cd', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: 'ce965e666a8107027249647a256c4e46d72d2db4', class: "co-json-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {