@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coCheckboxCss = () => `:host{display:inline-flex;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-checkbox-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--checked){background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, 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)}.co-checkbox--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox:not(.co-checkbox--checked){background:transparent}}`;
+const coCheckboxCss = () => `:host{display:inline-flex;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-checkbox-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--medium{width:20px;height:20px;border-radius:var(--co-spacing-sm);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--checked){background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, 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)}.co-checkbox--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--medium.co-checkbox--checked::after{width:8px;height:5px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--medium.co-checkbox--indeterminate::after{width:10px;height:1.75px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox--overlay{border-radius:6px}.co-checkbox--overlay.co-checkbox--small{width:20px;height:20px;border-radius:6px}.co-checkbox--overlay.co-checkbox--medium,.co-checkbox--overlay.co-checkbox--large{width:22px;height:22px;border-radius:6px}.co-checkbox--overlay:not(.co-checkbox--checked):not(.co-checkbox--indeterminate){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));border:none}.co-checkbox--overlay.co-checkbox--checked,.co-checkbox--overlay.co-checkbox--indeterminate{background:var(--co-color-primary-azul, #2563eb);border:none;box-shadow:none}.co-checkbox--overlay.co-checkbox--checked::after,.co-checkbox--overlay.co-checkbox--indeterminate::after{content:none}.co-checkbox__glyph{display:block;width:100%;height:100%;pointer-events:none}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox:not(.co-checkbox--checked){background:transparent}}`;
 
 const CoCheckbox = class {
     constructor(hostRef) {
@@ -12,12 +12,18 @@ const CoCheckbox = class {
         this.checked = false;
         /** Indeterminate state (partial selection) — visual only, overrides checked appearance */
         this.indeterminate = false;
-        /** Size: small=16px, large=24px */
+        /** Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px) */
         this.size = 'small';
         /** Disabled state */
         this.disabled = false;
         /** Value for checkbox group usage */
         this.value = '';
+        /**
+         * Visual appearance:
+         * - 'default' — the standard labeled form checkbox (unchanged).
+         * - 'overlay' — a standalone frosted rounded selection chip (Drive), no label, bespoke SVG glyphs.
+         */
+        this.appearance = 'default';
         this.handleClick = () => {
             if (!this.disabled) {
                 if (this.indeterminate) {
@@ -33,16 +39,22 @@ const CoCheckbox = class {
         };
     }
     render() {
-        return (index.h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
+        const isOverlay = this.appearance === 'overlay';
+        const isOn = this.checked || this.indeterminate;
+        // Only override the fill when a custom color is provided AND the box is "on".
+        // Leaving this undefined keeps the default appearance byte-identical to before.
+        const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
+        return (index.h("div", { key: '08c291f6fbc3d37788a26d8d4dc747eba32bdca8', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.h("span", { key: '24839a60401f929b87be87aea57c0b130a007f3a', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
+                'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (index.h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (index.h("svg", { key: '1af8a42128f227fc5849f87de4005525e6450d96', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '6fcd92e86641b5b1338370d7fe4cf75eaa860268', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (index.h("svg", { key: 'f3442c680dc9d30a7d69954137300d76242999d4', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '4bd18d9e214646ff2e5cd0cb5e697525e7e605e1', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (index.h("span", { key: '6a25deb4ea5b703c3732c9c97d6a5e822451ec70', class: "co-checkbox__label", part: "label" }, this.label))));
     }
 };
 CoCheckbox.style = coCheckboxCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);color:#fff}.co-chip--filled.co-chip--pending{background:var(--co-color-status-pending);color:#fff}.co-chip--filled.co-chip--progress{background:var(--co-color-status-progress);color:#fff}.co-chip--filled.co-chip--review{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--submitted{background:var(--co-color-status-submitted);color:#fff}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.co-chip__icon-right,.co-chip__dot{display:inline-flex;flex-shrink:0;align-items:center}.co-chip--large .co-chip__icon-left,.co-chip--large .co-chip__icon-right,.co-chip--large .co-chip__dot{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right,.co-chip--small .co-chip__dot{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:1;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:0.7}.co-chip--large .co-chip__remove{width:16px;height:16px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}`;
+const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip__value{color:var(--co-chip-value-color, var(--co-color-gray-500, #888888))}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);color:#fff}.co-chip--filled.co-chip--pending{background:var(--co-color-status-pending);color:#fff}.co-chip--filled.co-chip--progress{background:var(--co-color-status-progress);color:#fff}.co-chip--filled.co-chip--review{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--submitted{background:var(--co-color-status-submitted);color:#fff}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.co-chip__icon-right,.co-chip__dot,.co-chip__trailing{display:inline-flex;flex-shrink:0;align-items:center}.co-chip__trailing{color:var(--co-chip-trailing-color, currentColor)}.co-chip--large .co-chip__icon-left,.co-chip--large .co-chip__icon-right,.co-chip--large .co-chip__dot{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right,.co-chip--small .co-chip__dot{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:1;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:0.7}.co-chip--large .co-chip__remove{width:16px;height:16px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}.co-chip.co-chip--filter{height:34px;padding:0 12px;gap:7px;font-size:13.5px;border-radius:var(--co-border-radius-full);background:var(--co-color-base-blanco, #fff);color:var(--co-color-base-negro, #1f1c1b);border-color:transparent;box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(0, 0, 0, 0.16))}.co-chip--filter .co-chip__icon-left{color:var(--co-color-gray-500, #888888)}.co-chip--filter .co-chip__trailing{color:var(--co-color-gray-400, #a0a0a0)}.co-chip--filter.co-chip--clickable:hover:not(.co-chip--disabled){box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-25, rgba(0, 0, 0, 0.25))}.co-chip--filter.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-color-gray-100, #f6f6f6)}.co-chip--filter.co-chip--selected{background:var(--co-color-gray-100, #f6f6f6)}`;
 
 const CoChip = class {
     constructor(hostRef) {
@@ -20,11 +20,14 @@ const CoChip = class {
          * - both    = icon before + icon after (Figma "2nd Icon")
          */
         this.iconMode = 'none';
-        /** Visual variant */
+        /** Visual variant.
+         *  - filled/outlined = existing tag/chip looks (unchanged defaults).
+         *  - filter = Cloud Drive filter-trigger pill (white pill, inset hairline
+         *    ring, tinted leading icon, two-tone value, trailing caret). */
         this.variant = 'filled';
         /** Semantic color */
         this.color = 'default';
-        /** Icon weight applied to prop-based iconLeft / iconRight. */
+        /** Icon weight applied to prop-based iconLeft / iconRight / trailingIcon. */
         this.iconWeight = 'regular';
         /** Show dismiss/remove button and emit coRemove on click. Reflected so it
          *  survives lazy hydration when set via a framework wrapper. */
@@ -55,9 +58,11 @@ const CoChip = class {
         const hasRightSlot = this.iconMode === 'both' && !this.removable;
         const iconSize = this.size === 'large' ? 16 : 10;
         const removeIconSize = this.size === 'large' ? 16 : 10;
+        // Filter-variant trailing caret is a fixed 13px; otherwise match icon size.
+        const trailingIconSize = this.variant === 'filter' ? 13 : iconSize;
         // Determine effective icon mode for CSS padding (the dot counts as a left icon).
         const hasAnyLeft = hasLeftSlot || !!this.iconLeft || this.dot;
-        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable;
+        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable || !!this.trailingIcon;
         let effectiveIconMode;
         if (hasAnyLeft && hasAnyRight)
             effectiveIconMode = 'both';
@@ -68,7 +73,7 @@ const CoChip = class {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (index.h(Tag, { key: 'd99b4031df6b255c1ada8fd6a4743fe1b1119d3b', class: {
+        return (index.h(Tag, { key: '2a0ec169b9c4ec0516d275d3787f7f02bcc4815f', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -78,7 +83,7 @@ const CoChip = class {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: '7d65ad877a914122911524600347a9f568082875', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: '25f2d43becce555ae671fcdfb0369a5c5dc783aa', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '77bac8466e6b47339c503213f6498bd3e1f5f430', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'e487eb428c8ea3f6e2caa75684ea89b8ae7bbafe', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: '209e199ea5ec9682507c33a218e0639273fc1ae2', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: 'e589f0ea28365043fd51d1f06157ea618291be16', name: "icon-left" }))), index.h("span", { key: '08a575e1cd0ea92b0193d10e988b1c300b33caa2', class: "co-chip__label" }, index.h("slot", { key: 'a296df6fb688b28670ae6224b4affb841e8659bc' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: 'f014692392576afa93a4ea856a5c3842dd3ede8e', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '048d42664c073f234d4066b44946c1a5c0190dc1', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: 'd45c8b9801a370aa3d29bd24994bcafe42a14c59', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: 'cf26f624dc1442d97c588fb7adc80d0ab685cafd', name: "icon-right" }))), this.removable && (index.h("span", { key: '411bce99361ef1ec436572bf061077372f11b38b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'e5a0ac43fc8912e6e9f69aef0886a8bb96f80910', name: "x-circle", size: removeIconSize, weight: "fill" })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: '43dac38d1aba1dead22ac164926167c38e66a9fe', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: '3797d8f1081f82ed4f44bb99ffe26087b45c3d3a', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '742a11aaefce99a0bbf1c1bd6c2c3ca8b31d63cd', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'a9f2c057d7df6e51f5be5c757e26280780fe1ae9', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: 'c8f56d8525efb0a095f0c21d9cf0626964484510', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: '01fb166b21b09cdb5b8b86dca1ec2a9fc57f6848', name: "icon-left" }))), index.h("span", { key: 'd6201c5dded49a5bdc32110d8e11165aeac99eac', class: "co-chip__label" }, index.h("slot", { key: 'd947e19d407485bcfcedd6eacc4af81c3059166b' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (index.h("span", { key: '53108c759b51c53fa649776166396a9f609d20d0', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: '493961698dc761c41cf6a6e24d20e61701f594fa', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: 'c9f198139af0e17dedd3464d9ccdd7b6c6163aff', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: 'ab0224fdb675c1706cda2395f57ddf6f17160185', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: '3e1a2cc6cde7a2834f9c872925aa4a2ee2136a9f', name: "icon-right" }))), this.removable && (index.h("span", { key: '4eb54aae2e81bf76bd99cf1ba808403de8f98d10', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'e9736b8d92d01df66a670a67e7ef05920c6a527b', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (index.h("span", { key: 'd56053da1f81ebfbd276f314c08f0ca9d8b722c8', class: "co-chip__trailing", part: "trailing" }, index.h("co-icon", { key: 'f6cf7398888677b48622415b0d1e65f2117a841a', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
 };
 CoChip.style = coChipCss();

package/dist/cjs/co-color-picker.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');
 
 /**
  * Default color presets derived from Cobalt design tokens (base.json).
@@ -99,10 +99,10 @@ const CoColorPicker = class {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (index.h("div", { key: '5685ea2ba18f9f2bf1529cfcad5aee9dce529a76', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: '22c1c3fae1990c3375772d520efb752b13b841c8', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'd91a7a773586595b9ca203ea904b2eb7699414bb', required: this.required }))), index.h("co-popover", { key: '2d245e3b5735ed5dfdc4dd43479930e9fdb6f76f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '1a75d6f5c28fe1d00b21584a31ec91915aebcbe7', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: 'f015db7975d7fcffdbbd20a7b88dba44f104eccb', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '4842f2556ad37910f414bc253fafc1f8f2c81361', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: 'c34ec92aaf66b01f3566f8f8106419dfc87aefa5', class: "co-color-picker__panel" }, index.h("div", { key: '3b904bca6d819e6f273ebf418f7f5495e36d31f8', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (index.h("div", { key: 'ebbdbeba0134c87da27ae4f6e375041eee78892b', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: '6b3a330cf0384860a796ba513af37f8e78e12093', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '5643e85578787a4f37f6325cb352f3a304557acd', required: this.required }))), index.h("co-popover", { key: 'ae7d44830dfde43e0a5c5047e6c7fb821d1243c7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: 'ba3bfbb61193dd643ec906c83cde0856ff71858f', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '9de65c4a8b4ca9778547bbb3fe84a3672420dfc9', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '36e94cac1eb3855ae7425ffc37273be18ee6e351', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '2df3f1fa6a56038fd37f065df00a63f48ea4aacc', class: "co-color-picker__panel" }, index.h("div", { key: 'ab3f73100473640dd86ade5b28d6356b78cc87fd', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (index.h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (index.h("div", { key: '0aebb34354565e53e1364ef66bb7750decc2ae77', class: "co-color-picker__hex-row" }, index.h("span", { key: 'b959d588d52fe4546ebcb374a0d5129dfb37cd2f', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '11ef3b1879fefe31d64c18e26eaa349679135c0c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: 'be63f7214a57d370c62c2edf5f3072cdaf39da10', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'a8b5e746c2ad6116e700ffbb8082c4d3f02b8ff8', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '584a9507206c54a75f266edf227a88543114a94c', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: '0b58cacf5ab2da011e3a6c98ffc1f8ac04dd9819', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '96f2fafb678ba77c8aabb8bd979b6676eb4ac634', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (index.h("div", { key: '962004b803249536b0d30da30f697c1908779ff5', class: "co-color-picker__hex-row" }, index.h("span", { key: '127afe4fbc44043d6417d3f335703b72c8657e59', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '6ed71ff0812ab2597eea32f5c1c8a64af02d9c7c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: '32038edf8d6fd3ab7746997b6ba1383ee6210b63', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: '1cee861c8db908d6d900a0454029136a2bc37383', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: 'da2a382c68d0ad972007a9589176480996fa4a52', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: 'cf7218f5309d7ec91f03df33199cf1ce3a49ba4d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '2a469362e5001e9c65074ed6280e275e471b0334', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-column-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
 /**
@@ -423,13 +423,13 @@ const CoColumnPicker = class {
         return (index.h("div", { class: "co-column-picker__empty" }, index.h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), index.h("span", null, this.emptyText)));
     }
     render() {
-        return (index.h("div", { key: '0097275adfbd4a8f61ecba251568914d02b18e24', class: {
+        return (index.h("div", { key: '7c9f0c6d1d8a297be3b31219ccab24c7be7e2664', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'ffdbae01974d6cfbce8c7aad7916f4fee5c1cca6', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '91b946cf1eb15a492bcadd4f8d11eabc9a59e1bf', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: 'bef413d01940a40778eb35b629a189166f7fb93d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '8d9f43f64177b13732432ef198b5e6b13cebd36b', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: '693aa4d44f2dbd543d5ad7c907518329c4e97025', class: "co-column-picker__search" }, index.h("co-icon", { key: '781810b8326fb46b99afa6bbacf2c3976647d98b', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: 'd76de6d826436e0dbe8c9f97edcd8e310b8dca54', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: '482bb56991aa527744df0e0619753e2696f00372', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: '68090fb612a2ba97836c1127368e60d671bbd489', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '9afe3b43c5d6bbf8625819487ebfa8559478a71c', class: "co-column-picker__toolbar" }, index.h("button", { key: '55407fa68c881f79c4ca43359241e9180d3bb94b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: '55805e5ae2f629a5bb5ca7782de90558bae7f190', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: '04913ef71413f1ed8a1c3941c6408d3e1c97cbe7', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: '0a5155f8930abf84d24d17b12a6b3861656d3d46', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '51f2b7a319030654ed4ca6991b796b3e7a49196a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: '1da451722bb9481a6518338afd32f797985ebd4f', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: '4ac4f4a852c2079ccbf6ff2f89eb32fc0a5979f4', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: 'dd4f250a9e91bdd35329970b2b5539ad8ce8b3cb', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: 'dd362cadf9e34d97bb2a8a157d35e9d1f3b1dfaf', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '7f156358ccf841c21f710d8d31770f75ccb5a947', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'e1182644d6ad576951ca01dc57267529e0e6ea60', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '7721083bb4f68dabc7d1a6e35f097e98b6416f55', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '4cd1198cc290b7fc3e6959e04fba230d5de9f488', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: 'b4f56c7947100ca9be3eb8c4d3540ab5cb34c1ef', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '4138e1b3549460b5f819a1d9065d05c4fc07c72f', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: '22cc772780508c2efdd2e429dcecbe616261d8f1', class: "co-column-picker__search" }, index.h("co-icon", { key: '62ab36ee523d75866c2844aa0d8f1b9b5a7f1ced', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: 'ace44104a9babc7fb8a5cc3f5af6affd525db28a', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: '93c0047a52e8700cf78906ecc723152d845b8d4d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: 'e789f4a19e49cf1f8549f756398cb13f00839f3d', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '2b1bd3f29832f37e8e9047d0dd2189cb00ce9058', class: "co-column-picker__toolbar" }, index.h("button", { key: 'fe1d23d1a58cdebb3f01687579206133cf58b46c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: 'f768bbcd4c33d125aba7140484a8c7bd0797ac8c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: 'f0aa650e5d8caf03d05284776c81a2525c7dd527', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: 'beea0db7feaee1e4940a0c8f320196573311307b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '97c5971a6583b2ee67bda1ad1c2081900b3e36c3', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: '91e6e4c2c69bc7baf9a0057994885aa32c570cad', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: 'b4eac29c58acf345217cc201fe3cb54f788915c0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: '920616150803f151c44a9796b6bd7edbdf572d8a', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: '292137377ece5e75c45965a147fa4e162476e7b5', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '127c1f85c85da87f5bdbed1c7631b7e6679cfe86', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'df3432d43a0bccdbaf20a02427479cf9b97fd79d', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-combobox.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');
 var overlayScroll = require('./overlayScroll-ifzDNeyb.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 require('./overlayscrollbars-BlBHo2Xx.js');

package/dist/cjs/co-command-search.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
 /** Flatten an ordered CommandItem[] into render rows, inserting a header
@@ -226,14 +226,14 @@ const CoCommandSearch = class {
     render() {
         const items = this.filteredItems;
         return [
-            index.h("div", { key: '7489dba63daa21b04e7fd12ba0923d3f5452a651', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, index.h("slot", { key: '86bacbf98e5c7b2079d0db46862c60ee4273756d', name: "trigger" })),
-            index.h("co-overlay", { key: 'e6406e9eb24dfff1f1a8b78267b84fb2e305b9bd', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '9cf1f70ac226d3802f3f1ffaf77d1633d7c24f2a', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, index.h("div", { key: 'a2508671dc39fb5e90455f9ee4391e52e7739a29', class: "co-command-search__input-row", part: "input-row" }, index.h("co-icon", { key: '37051efc28fc3412eb24b53cd4891b98a3b8c2cc', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (index.h("span", { class: "co-command-search__facet-chip" }, chip.icon && index.h("co-icon", { name: chip.icon, size: 12 }), index.h("span", { class: "co-command-search__facet-chip-label" }, chip.label), index.h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            index.h("div", { key: '8997e31184c5531e5b329432f6ff29496d1070f5', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, index.h("slot", { key: '63bf6dbcb3aaf35a0fdacd70b96b8f5701cd27cf', name: "trigger" })),
+            index.h("co-overlay", { key: '7f96e661c6cab4f6440beab808993665efb86cab', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '20b27b7609cd00cb52d903babbb7565885ce1188', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, index.h("div", { key: 'c9bb1834d60ea728cb70e4ebb9ce08c76abafec1', class: "co-command-search__input-row", part: "input-row" }, index.h("co-icon", { key: '971da90765cf33c7d427c173e974fb7f68e96ed5', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (index.h("span", { class: "co-command-search__facet-chip" }, chip.icon && index.h("co-icon", { name: chip.icon, size: 12 }), index.h("span", { class: "co-command-search__facet-chip-label" }, chip.label), index.h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, index.h("co-icon", { name: "x", size: 10, weight: "bold" }))))), index.h("input", { key: '33f8024e71b902b954349b539dc8a6b1ea4e8a64', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (index.h("co-loader", { key: '46eae7fb379621808f0e7a78e3e15f2cf0742fa6', class: "co-command-search__loading", part: "loading", size: "sm" })), index.h("span", { key: '1505eaa1ccde46d28475b7ded587732a302dfef6', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (index.h("div", { key: '4557dc1c0f0f543238deeaf37731594064b7a946', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, index.h("co-icon", { name: "x", size: 10, weight: "bold" }))))), index.h("input", { key: '81921bb9085d6bfb3ed4a274ef195e299dd01023', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (index.h("co-loader", { key: 'd5ab9e9a98b7a94c3c6f8d16682994666f1c5b18', class: "co-command-search__loading", part: "loading", size: "sm" })), index.h("span", { key: 'eb62a8d79faff742108246565ede12ff7ee145f1', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (index.h("div", { key: '4533b27e38469ab4ab6ddc9e918b408e136e097b', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (index.h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (index.h("co-chip", { key: '9253d7fc43c7f320af6af274dce8eca6d8543186', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), index.h("div", { key: '5ae57716cf3337623c111d8b5f9fb941536324a6', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (index.h("div", { key: '7e11f7b777c590b0f728240e0fbea1808d0c07a5', class: "co-command-search__fav", part: "favorites" }, index.h("div", { key: '67e2ba4b3a500522c7d89429359d5bd947096d8d', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (index.h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, index.h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, index.h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), index.h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
+            }), this.hasMore && (index.h("co-chip", { key: '4efe5ab79e9e5b3b5c973ff4bbc80caf2f49bb9c', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), index.h("div", { key: 'd2e6d24d6d7aba13111d3f148bed12157e80ea6d', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (index.h("div", { key: '17abc91e955610afec6ef6c68aae5bac25bd6820', class: "co-command-search__fav", part: "favorites" }, index.h("div", { key: 'dc5dee8ec8f9d1a5c1dc9b4119e04ca4459750bf', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (index.h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, index.h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, index.h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), index.h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
                 ? groupItems(items).map(row => row.kind === 'header'
                     ? index.h("div", { class: "co-command-search__section", part: "section", role: "presentation" }, row.label)
                     : (index.h("div", { class: {

package/dist/cjs/co-data-table-pagination.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coDataTablePaginationCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-pagination{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-md) var(--co-spacing-lg);border-top:1px solid var(--co-color-opacity-negro-8);background:var(--co-color-base-blanco);font-size:var(--co-font-size-12);color:var(--co-semantic-text-secondary);letter-spacing:var(--co-font-letter-spacing-body);user-select:none}.co-pagination__section{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0}.co-pagination__spacer{flex:1}.co-pagination__label{color:var(--co-semantic-text-secondary);white-space:nowrap}.co-pagination__count{color:var(--co-semantic-text-secondary);white-space:nowrap}.co-pagination__jump-input{width:32px;height:28px;border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xxs);background:var(--co-color-base-blanco);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);text-align:center;padding:0 var(--co-spacing-xs);outline:none;transition:border-color 0.15s ease}.co-pagination__jump-input:focus{border-color:var(--co-color-primary-azul)}.co-pagination__section--page-size{position:relative}.co-pagination__page-size-trigger{display:flex;align-items:center;gap:var(--co-spacing-xs);cursor:pointer;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);transition:background-color 0.15s ease}.co-pagination__page-size-trigger:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-size-value{font-weight:500;color:var(--co-semantic-text-default)}.co-pagination__page-size-dropdown{position:absolute;bottom:calc(100% + 4px);left:0;min-width:72px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xs);box-shadow:0 4px 12px var(--co-color-opacity-negro-8);padding:var(--co-spacing-xs) 0;z-index:10}.co-pagination__page-size-option{display:block;width:100%;padding:var(--co-spacing-sm) var(--co-spacing-md);border:none;background:none;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background-color 0.1s ease}.co-pagination__page-size-option:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-size-option--active{font-weight:500;color:var(--co-color-primary-azul)}.co-pagination__nav{display:flex;align-items:center;gap:var(--co-spacing-xxs)}.co-pagination__nav-btn{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xxs);background:var(--co-color-base-blanco);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);cursor:pointer;transition:background-color 0.15s ease;white-space:nowrap}.co-pagination__nav-btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-pagination__nav-btn:disabled{opacity:0.4;cursor:not-allowed}.co-pagination__page-btn{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--co-border-radius-xxs);background:none;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-secondary);cursor:pointer;transition:background-color 0.1s ease}.co-pagination__page-btn:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-btn--active{background:var(--co-color-base-negro);color:var(--co-color-base-blanco);font-weight:500}.co-pagination__page-btn--active:hover{background:var(--co-color-base-negro)}.co-pagination__ellipsis{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;color:var(--co-color-gray-400)}`;
 
@@ -91,17 +91,17 @@ const CoDataTablePagination = class {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (index.h("div", { key: 'ae314d39c78125c7a0b237d30b6d298c5c699a75', class: "co-pagination", part: "pagination" }, index.h("div", { key: 'eff8732e235bfcbb6578a144377736f6a5c05d91', class: "co-pagination__section" }, index.h("span", { key: 'e4a5b980aaae92eec46b5e090e7b87745938fe81', class: "co-pagination__label" }, this.jumpToPageLabel), index.h("input", { key: '012b0613c8cfce667687ca27ad434b6271845900', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (index.h("div", { key: '58fdc57923ac061b83b248ad47bfc898b66fb512', class: "co-pagination", part: "pagination" }, index.h("div", { key: '918fdaecef593fdde7095353be9d28a19b1a89c4', class: "co-pagination__section" }, index.h("span", { key: '4b962d74a9655b6fd6a6ec670df4139b28bd49c1', class: "co-pagination__label" }, this.jumpToPageLabel), index.h("input", { key: 'c4db59aea2a672f6b103ec1b3183af94c10168b2', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), index.h("div", { key: '76016cea5933b9b057256e4c54717925b95396e4', class: "co-pagination__section co-pagination__section--page-size" }, index.h("div", { key: 'ec1ac8b20b71a01483ef6f33170ccea9dc60baf2', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, index.h("span", { key: '3db2891ead65d088b2a9a19868c00576fc3d212b', class: "co-pagination__page-size-value" }, this.pageSize), index.h("span", { key: '2be8c9861d4509df5b695b5c07e25cc346b77628', class: "co-pagination__label" }, this.perPageLabel), index.h("co-icon", { key: '91ba0332b4eb496b3de3fe271d78686aad429d71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (index.h("div", { key: '4a7f2a17c52d71762c3a9b15e8ed55aa78b894a8', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (index.h("button", { class: {
+            }, part: "jump-input" })), index.h("div", { key: '76de3483638cab4fbd2161c3ecd0331d8ce479c9', class: "co-pagination__section co-pagination__section--page-size" }, index.h("div", { key: '816fce2951c214419670d7bc060476beb1d3dda3', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, index.h("span", { key: 'c65b889eb1c7287559c40e7449e4053e3ffafa87', class: "co-pagination__page-size-value" }, this.pageSize), index.h("span", { key: '72191c99bb24055f6a239aeb301452240ad954b3', class: "co-pagination__label" }, this.perPageLabel), index.h("co-icon", { key: 'f9688b7b17af70c9348b837bdacc2cf879a50e71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (index.h("div", { key: '47273c123ecdcfd8aee50d6d67d27bddcd78efcb', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (index.h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), index.h("div", { key: 'e8e81ef1186485963908cd923fab0f5974e4cbf3', class: "co-pagination__spacer" }), index.h("div", { key: '04fd583b0fff46d13d8abe384cb7896d2c4b8799', class: "co-pagination__section" }, index.h("span", { key: '69bf9e0a8fd0e9f3b5fe06c9951300323fce42bf', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), index.h("div", { key: 'a90b8a8b5cdd5cfc945fb0fa00d50b44b4ab88b7', class: "co-pagination__section co-pagination__nav" }, index.h("button", { key: '6b14f2a16c691a202bf81cc1fff8f505f5ce0f29', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (index.h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (index.h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), index.h("div", { key: '38fa750720d8df2087b6579d287f79681c6b0ff8', class: "co-pagination__spacer" }), index.h("div", { key: '17f1557e704f2f466efe06babc9ba4d065d67c7f', class: "co-pagination__section" }, index.h("span", { key: '376d1c381f7efc92ee1afafa664e665ab80f6b17', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), index.h("div", { key: 'cea4fe162d5610c6fd847be228f672fc3ae088cb', class: "co-pagination__section co-pagination__nav" }, index.h("button", { key: '64b7983f49a768631265f82af2904b15b6b927ef', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (index.h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (index.h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), index.h("button", { key: '9b3cdab026b566275248734a8db218d70a81b082', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), index.h("button", { key: 'efd6ec713cb22bdb9eb6774e094f8fbc12cb4811', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get watchers() { return {
         "pageSizes": [{

package/dist/cjs/co-data-table.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
-const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;padding:var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background:var(--co-semantic-surface-hover)}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:var(--co-spacing-md);text-align:center}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:inherit;border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);vertical-align:middle;font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-sm)}.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-16);font-weight:600;color:var(--co-semantic-text-default);letter-spacing:-0.03em;margin:0}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:360px}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:var(--co-color-gray-100);animation:co-dt-shimmer 1.5s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%,100%{opacity:1}50%{opacity:0.4}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
+const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;padding:var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:var(--co-spacing-md);text-align:center}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:inherit;border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);vertical-align:middle;font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-sm)}.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-16);font-weight:600;color:var(--co-semantic-text-default);letter-spacing:-0.03em;margin:0}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:360px}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:var(--co-color-gray-100);animation:co-dt-shimmer 1.5s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%,100%{opacity:1}50%{opacity:0.4}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
 
 const CoDataTable = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const CoDataTable = class {
         this.coColumnPin = index.createEvent(this, "coColumnPin", 7);
         this.coRowDblClick = index.createEvent(this, "coRowDblClick", 7);
         this.coRowClick = index.createEvent(this, "coRowClick", 7);
+        this.coEmptyAction = index.createEvent(this, "coEmptyAction", 7);
         /* ─── DATA ──────────────────────────────────────────────── */
         /** Column definitions (JSON string or array) */
         this.columns = '[]';
@@ -32,6 +33,8 @@ const CoDataTable = class {
         this.emptyMessage = 'No records found';
         /** Empty state icon (Phosphor icon name). */
         this.emptyIcon = 'magnifying-glass';
+        /** Variant for the prop-driven empty-action button. */
+        this.emptyActionVariant = 'stroke';
         /* ─── SORT ──────────────────────────────────────────────── */
         /** Current sort field */
         this.sortField = '';
@@ -283,30 +286,34 @@ const CoDataTable = class {
                 'co-data-table__resize-handle--active': this.resizingColumn === col.field,
             }, onMouseDown: (e) => this.handleResizeStart(col.field, e), onClick: (e) => e.stopPropagation() }))))))));
     }
-    renderBody() {
-        if (this.loading) {
-            return (index.h("tbody", { class: "co-data-table__body" }, Array.from({ length: this.skeletonRows }).map((_, rowIndex) => (index.h("tr", { class: "co-data-table__row co-data-table__row--skeleton", key: `skeleton-${rowIndex}` }, this.selectable && (index.h("td", { class: "co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky", style: { left: '0px' } }, index.h("div", { class: "co-data-table__skeleton co-data-table__skeleton--checkbox" }))), this.parsedColumns.map(col => (index.h("td", { class: {
-                    'co-data-table__td': true,
-                    'co-data-table__td--sticky': !!col.sticky,
-                }, style: Object.assign({}, this.getColumnStyle(col)) }, index.h("div", { class: "co-data-table__skeleton" })))))))));
-        }
-        // When not loading, delegate row rendering to the consumer via default slot.
-        // This avoids Stencil's costly per-cell named-slot relocation (N rows × M cols).
-        // The consumer (e.g. Vue) renders <tbody> directly using co-data-table CSS classes.
-        return index.h("slot", null);
+    // Skeleton rows shown WHILE loading. Rendered as a SEPARATE <tbody> that
+    // co-exists with the always-mounted default <slot/> (see render()) — it never
+    // REPLACES it. Previously the body position was swapped between this skeleton
+    // and <slot/> on every `loading` toggle; that swap tore the slot down and
+    // orphaned the consumer's projected rows (e.g. Vue's <tbody>), so a concurrent
+    // consumer patch threw "insertBefore ... not a child of this node" on data/model
+    // switches. Row rendering itself is still delegated to the consumer via the
+    // default slot — this avoids Stencil's costly per-cell named-slot relocation.
+    renderSkeletonBody() {
+        return (index.h("tbody", { class: "co-data-table__body co-data-table__body--skeleton", "aria-hidden": "true" }, Array.from({ length: this.skeletonRows }).map((_, rowIndex) => (index.h("tr", { class: "co-data-table__row co-data-table__row--skeleton", key: `skeleton-${rowIndex}` }, this.selectable && (index.h("td", { class: "co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky", style: { left: '0px' } }, index.h("div", { class: "co-data-table__skeleton co-data-table__skeleton--checkbox" }))), this.parsedColumns.map(col => (index.h("td", { class: {
+                'co-data-table__td': true,
+                'co-data-table__td--sticky': !!col.sticky,
+            }, style: Object.assign({}, this.getColumnStyle(col)) }, index.h("div", { class: "co-data-table__skeleton" })))))))));
     }
     renderEmpty() {
         if (this.loading || this.parsedRows.length > 0)
             return null;
-        return (index.h("div", { class: "co-data-table__empty", part: "empty" }, index.h("div", { class: "co-data-table__empty-icon" }, index.h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (index.h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (index.h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), index.h("div", { class: "co-data-table__empty-action" }, index.h("slot", { name: "empty-action" }))));
+        return (index.h("div", { class: "co-data-table__empty", part: "empty" }, index.h("div", { class: "co-data-table__empty-icon" }, index.h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (index.h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (index.h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), index.h("div", { class: "co-data-table__empty-action" }, this.emptyActionLabel
+            ? (index.h("co-button", { variant: this.emptyActionVariant, size: "m", label: this.emptyActionLabel, iconLeft: this.emptyActionIcon, onClick: () => this.coEmptyAction.emit() }))
+            : index.h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (index.h("div", { key: 'ca97ff4e2b3fb28ff64e49654c35e3081e43b036', class: {
+        return (index.h("div", { key: '0ca5b4b0a0a31c1ea7488a7ca22b64683a9d35e1', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, index.h("div", { key: '9ffdd459a8b46f4c019309412cf85fe7e12f803d', class: "co-data-table__scroll" }, index.h("table", { key: 'f621aaba41690f6fe6060b0641817908d5c3ae92', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
+            } }, index.h("div", { key: 'b2155d0ad52836223b65bb396775bfe726f25966', class: "co-data-table__scroll" }, index.h("table", { key: 'f950dc3e38660fd1d80f6883bb58384f6e03ef07', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), index.h("slot", { key: '33751ea8dfef38c5c285b8a08dc763845f509bb7' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-date-picker.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');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 
 const coDatePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-date-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-picker__label{padding:0 var(--co-spacing-xs);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-date-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-picker co-popover{display:block;width:100%}.co-date-picker__trigger{display:block;width:100%;cursor:text}.co-date-picker__panel{padding:var(--co-spacing-md)}.co-date-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}:host([layout='horizontal']) .co-date-picker{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-date-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-picker>:not(.co-date-picker__label){grid-column:2;min-width:0}.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)')}`;

package/dist/cjs/co-date-range-picker.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');
 var dateI18n = require('./dateI18n-BdiNAl0_.js');
 var dates = require('./dates-D8D-aS5d.js');
 

package/dist/cjs/co-date-range.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BumlM92r.js');
+var index = require('./index-NNvye1ul.js');
 
 const coDateRangeCss = () => `:host{display:block}`;
 
@@ -33,7 +33,7 @@ const CoDateRange = class {
         }
     }
     render() {
-        return (index.h("co-date-range-picker", { key: '0523f38971fe7b9289838d36737fe40f43c8cadc', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (index.h("co-date-range-picker", { key: 'a366a10a7980292014ac8a9f48a97077cac09299', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.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) {
+        index.registerInstance(this, hostRef);
+        this.coOpen = index.createEvent(this, "coOpen", 7);
+        this.coToggleSelect = index.createEvent(this, "coToggleSelect", 7);
+        this.coStar = index.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 (index.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 && (index.h("svg", { class: "co-drive-card__check", width: checkSize, height: checkSize, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.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),
+            index.h("span", { class: "co-drive-card__tile", part: "tile" }, index.h("co-icon", { name: "folder", size: iconSize, weight: "fill" })),
+            index.h("div", { class: "co-drive-card__text" }, index.h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && index.h("span", { class: "co-drive-card__meta", part: "meta" }, this.meta)),
+            index.h("div", { class: "co-drive-card__trailing", part: "trailing" }, this.starred && (index.h("co-icon", { class: "co-drive-card__star", name: "star", size: 15, weight: "fill" })), index.h("slot", { name: "trailing" })),
+        ];
+    }
+    renderFile() {
+        return [
+            index.h("div", { class: "co-drive-card__thumb", part: "thumb" }, index.h("slot", { name: "thumb" })),
+            this.renderSelectChip(13),
+            index.h("span", { class: "co-drive-card__star-overlay", part: "star", role: "button", "aria-label": this.starred ? 'Unstar item' : 'Star item', onClick: this.handleStar }, index.h("co-icon", { name: "star", size: 17, weight: this.starred ? 'fill' : 'regular' })),
+            index.h("div", { class: "co-drive-card__foot", part: "foot" }, index.h("span", { class: "co-drive-card__type" }, index.h("slot", { name: "type" }, this.ext ? index.h("co-file-type-tile", { ext: this.ext, size: 26, radius: 7 }) : null)), index.h("div", { class: "co-drive-card__foot-text" }, index.h("span", { class: "co-drive-card__name", part: "name" }, this.name), this.meta && index.h("span", { class: "co-drive-card__sub", part: "meta" }, this.meta)), index.h("span", { class: "co-drive-card__actions", part: "actions" }, index.h("slot", { name: "actions" }))),
+        ];
+    }
+    render() {
+        const isFile = this.variant === 'file';
+        return (index.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();
+
+exports.co_drive_card = CoDriveCard;