@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
 
-const coSwitchCss = () => `: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-switch-wrapper{display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-switch-wrapper__row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-switch-wrapper--disabled .co-switch-wrapper__row{cursor:not-allowed}.co-switch-wrapper__labels{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-switch-wrapper__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-switch-wrapper__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;margin-left:auto}.co-switch-wrapper--disabled .co-switch-wrapper__label,.co-switch-wrapper--disabled .co-switch-wrapper__secondary-label{color:var(--co-semantic-text-disabled)}.co-switch-wrapper__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding-left:calc(44px + var(--co-spacing-sm2));}.co-switch-wrapper__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-switch-wrapper__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-switch-wrapper__helper--error .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--error .co-switch-wrapper__helper-text{color:var(--co-semantic-status-error)}.co-switch-wrapper__helper--success .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--success .co-switch-wrapper__helper-text{color:var(--co-semantic-status-success)}.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-text{color:var(--co-color-status-review)}.co-switch-wrapper__helper--info .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--info .co-switch-wrapper__helper-text{color:var(--co-semantic-status-info)}.co-switch{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:var(--co-border-radius-full);border:none;outline:none;cursor:pointer;padding:0;overflow:hidden;transition:background 0.2s ease;box-sizing:border-box;flex-shrink:0}.co-switch--on{background:var(--co-semantic-surface-primary)}.co-switch--off{background:var(--co-semantic-surface-muted)}.co-switch__thumb{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-control-thumb);transition:left 0.2s ease;box-shadow:0 1px 3px var(--co-semantic-control-shadow)}.co-switch--off .co-switch__thumb{left:2px}.co-switch--on .co-switch__thumb{left:22px}.co-switch--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.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)')}`;
+const coSwitchCss = () => `: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-switch-wrapper{display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-switch-wrapper__row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-switch-wrapper--disabled .co-switch-wrapper__row{cursor:not-allowed}.co-switch-wrapper__labels{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-switch-wrapper__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-switch-wrapper__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;margin-left:auto}.co-switch-wrapper--disabled .co-switch-wrapper__label,.co-switch-wrapper--disabled .co-switch-wrapper__secondary-label{color:var(--co-semantic-text-disabled)}.co-switch-wrapper__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding-left:calc(44px + var(--co-spacing-sm2));}.co-switch-wrapper__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-switch-wrapper__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-switch-wrapper__helper--error .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--error .co-switch-wrapper__helper-text{color:var(--co-semantic-status-error)}.co-switch-wrapper__helper--success .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--success .co-switch-wrapper__helper-text{color:var(--co-semantic-status-success)}.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-text{color:var(--co-color-status-review)}.co-switch-wrapper__helper--info .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--info .co-switch-wrapper__helper-text{color:var(--co-semantic-status-info)}.co-switch{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:var(--co-border-radius-full);border:none;outline:none;cursor:pointer;padding:0;overflow:hidden;transition:background 0.2s ease;box-sizing:border-box;flex-shrink:0}.co-switch--on{background:var(--co-semantic-surface-primary)}.co-switch--off{background:color-mix(in srgb, var(--co-semantic-surface-muted) 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))}.co-switch__thumb{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-control-thumb);transition:left 0.2s ease;box-shadow:0 1px 3px var(--co-semantic-control-shadow)}.co-switch--off .co-switch__thumb{left:2px}.co-switch--on .co-switch__thumb{left:22px}.co-switch--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-switch--off{background:var(--co-semantic-surface-muted)}}`;
 
 const CoSwitch = class {
     constructor(hostRef) {
@@ -34,16 +34,16 @@ const CoSwitch = class {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '448bc546da840313740bc9c8d28bcbf50dd23842', class: {
+        return (h("div", { key: '38cc6534a6d29b3453180409c4140b41e41c5970', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '417c63e43360ffaa5e6fb3843a6516e6acc10712', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '19e326242f45489aa2545390643dd799658102f8', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '5bec2bdbf3de9f5470840fac1c4abfad098e289a', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'd0039ee4818969f46c7014dbc1b29cb6fa3a021c', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '17b3895afa9f12e5a6fd5d09936d8da2113e710f', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: 'd8c87eea56b43540a6ea6f033ac80f93cc151aa8', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '69f488c6a6ef62f1247f98b8c991b9cbea1bc06e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'a3f0303b970a1d42a75dbd18bfe39d2fb4908376', required: this.required })), this.secondaryLabel && (h("span", { key: 'aa515120e86788c4301fe761d90f40005f419a26', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '89206dd59da64095fb242fdd2e24661f0573287b', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'b5c19c1e22867499990a6ba2f76bbb80d6808329', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '9e920d930bbd9adb287a206944930b07aeb2e512', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b7bfcd10fb3e0eaa4083f1f08ba01ed4e7d05b48', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '46497aa93ae79b1d8beb0dcdbacf9ebd07a93fa9', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '0f0364713a3d6f29f1f496d91ad0d89b957e92fe', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'de427dfa828e8bb55d6b05ac6fa854fd6ce9d128', required: this.required })), this.secondaryLabel && (h("span", { key: 'b00e86fd005b72fcea23db91dbe4f3d39cf8026c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6ab547b5c56216132685647f026eae7a879b6338', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'e5eedf552bff62777946b448da584512a0a8c9b5', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'c2d3242dbb21c85cdba0d7eb48b263fa6b555b73', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
 };
 CoSwitch.style = coSwitchCss();

package/dist/esm/co-tab-group.entry.js

@@ -1,11 +1,13 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
 
-const coTabGroupCss = () => `:host{display:flex}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2)}`;
+const coTabGroupCss = () => `:host{display:flex}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2)}.co-tab-group--underline{gap:var(--co-spacing-xs, 4px);border-bottom:1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}`;
 
 const CoTabGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coTabChange = createEvent(this, "coTabChange", 7);
+        /** Visual variant, propagated to slotted co-tab children */
+        this.variant = 'pill';
     }
     onTabSelect(e) {
         e.stopPropagation();
@@ -16,6 +18,9 @@ const CoTabGroup = class {
     watchValue() {
         this.syncTabs();
     }
+    watchVariant() {
+        this.syncTabs();
+    }
     componentDidLoad() {
         this.syncTabs();
     }
@@ -23,15 +28,22 @@ const CoTabGroup = class {
         const tabs = this.el.querySelectorAll('co-tab');
         tabs.forEach((tab) => {
             tab.selected = (tab.value || tab.label) === this.value;
+            tab.variant = this.variant;
         });
     }
     render() {
-        return (h("div", { key: '92285c15311b1e2c6a4f9259354fff37f372c5b1', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f7100d6cb992deae37e832f2bde89046418fbbff' })));
+        return (h("div", { key: '3ff595c9a6437d18ea990ca2b798f2ad182f5974', class: {
+                'co-tab-group': true,
+                [`co-tab-group--${this.variant}`]: true,
+            }, role: "tablist", part: "tab-group" }, h("slot", { key: 'b968cc4febb7156bf7e00bed02a6ec50fda354b0' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "watchValue": 0
+            }],
+        "variant": [{
+                "watchVariant": 0
             }]
     }; }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
 
-const coTabCss = () => `:host{display:inline-flex}.co-tab{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);border:none;outline:none;cursor:pointer;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;white-space:nowrap;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-gris-500, #888);transition:background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;box-sizing:border-box}.co-tab--small{padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14);height:32px}.co-tab--large{padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16);height:40px}.co-tab:hover:not(:disabled){background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b)}.co-tab--selected{background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}.co-tab--selected:hover:not(:disabled){background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b)}.co-tab--disabled{opacity:0.4;cursor:not-allowed}.co-tab:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));outline-offset:2px}`;
+const coTabCss = () => `:host{display:inline-flex}.co-tab{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);border:none;outline:none;cursor:pointer;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;white-space:nowrap;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-gris-500, #888);transition:background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;box-sizing:border-box}.co-tab--small{padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14);height:32px}.co-tab--large{padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16);height:40px}.co-tab--pill:hover:not(:disabled){background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b)}.co-tab--selected{background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}.co-tab--pill.co-tab--selected:hover:not(:disabled){background:var(--co-color-gris-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b)}.co-tab--disabled{opacity:0.4;cursor:not-allowed}.co-tab:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));outline-offset:2px}.co-tab--underline{height:var(--co-spacing-4xl, 40px);padding:0 var(--co-spacing-md, 12px);gap:var(--co-spacing-sm2, 8px);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--co-color-gray-500, #888888);font-size:var(--co-font-size-14, 14px);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);transition:color 0.12s ease}.co-tab--underline.co-tab--selected{background:transparent;border-bottom-color:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}.co-tab__badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:var(--co-border-radius-full, 9999px);font-size:11px;font-weight:500;line-height:1;background:var(--co-color-gray-200, #e3e3e3);color:var(--co-color-gray-600, #585858)}.co-tab--selected .co-tab__badge{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff)}`;
 
 const CoTab = class {
     constructor(hostRef) {
@@ -14,6 +14,8 @@ const CoTab = class {
         this.selected = false;
         /** Size */
         this.size = 'small';
+        /** Visual variant: filled pill (default) or underline tab */
+        this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
         this.handleClick = () => {
@@ -23,13 +25,14 @@ const CoTab = class {
         };
     }
     render() {
-        const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: 'f9b9a7793f77d4132002185b8af9e1629952cf1a', class: {
+        const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
+        return (h("button", { key: '6f181c1c0f6de62256ba768f656d0671b3e1968f', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
+                [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'edd62b88e5ec18158e9e32fcba0397ef3f1ddb61', name: this.iconLeft, size: iconSize })), h("span", { key: '0ce6db369891e9df4137c4c9f4104392b015d661', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '0e60714ab903460d67ba384bd57f619f3047861c', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '0fd0c49bf5e1836ed1250f98efcd68a7752a0c34', name: this.iconLeft, size: iconSize })), h("span", { key: '2b71c8f428d2c775675c6f96d7e2e2f9733081b5', class: "co-tab__label" }, this.label), this.badge && (h("span", { key: '168c7695c9694026442662632e57f41f907ca727', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '1d290f34920e4d5d451f5f0d145796244fb94884', name: this.iconRight, size: iconSize }))));
     }
 };
 CoTab.style = coTabCss();

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
+import { F as FieldChip } from './fieldChip-BBu4ukje.js';
 
-const coTagsFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-tags-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-tags-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-tags-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-tags-field__field-row{display:flex;align-items:stretch}.co-tags-field__field{display:flex;align-items:flex-start;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;flex:1;min-width:0;cursor:text}.co-tags-field__input-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-sm);min-width:0;min-height:28px;padding:var(--co-spacing-xxs) 0}.co-tags-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-sm2);background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:240px;cursor:pointer;user-select:none}.co-tags-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-tags-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.1s ease;flex-shrink:0}.co-tags-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-tags-field__native{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-tags-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-tags-field__edit{border:1px solid var(--co-semantic-border-focus);border-radius:var(--co-border-radius-xxs);outline:none;background:var(--co-semantic-surface-primary);font-family:inherit;font-size:var(--co-font-size-12);line-height:1;color:var(--co-semantic-text-default);padding:var(--co-spacing-xxs) var(--co-spacing-xs);margin:0;min-width:60px}.co-tags-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:var(--co-spacing-xxs) 0 0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-tags-field__clear--hidden{visibility:hidden;pointer-events:none}.co-tags-field__clear:hover{color:var(--co-semantic-text-default)}.co-tags-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-tags-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-tags-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-tags-field--disabled{opacity:0.6;pointer-events:none}.co-tags-field--disabled .co-tags-field__labels .co-tags-field__label{color:var(--co-semantic-text-disabled)}.co-tags-field--disabled .co-tags-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-tags-field--invalid .co-tags-field__field{border-color:var(--co-semantic-status-error)}.co-tags-field--invalid.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-tags-field__helper--error .co-tags-field__helper-icon,.co-tags-field__helper--error .co-tags-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-tags-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-tags-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-tags-field__label{white-space:normal}:host([layout='horizontal']) .co-tags-field>:not(.co-tags-field__labels){grid-column:2;min-width:0}`;
+const coTagsFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-tags-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-tags-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-tags-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-tags-field__field-row{display:flex;align-items:stretch}.co-tags-field__field{display:flex;align-items:flex-start;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;flex:1;min-width:0;cursor:text}.co-tags-field__input-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-sm);min-width:0;min-height:28px;padding:var(--co-spacing-xxs) 0}.co-tags-field--s .co-tags-field__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-tags-field--sm .co-tags-field__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-tags-field--lg .co-tags-field__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-tags-field--s .co-tags-field__input-wrapper,.co-tags-field--sm .co-tags-field__input-wrapper{min-height:0;padding:0}.co-tags-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-sm2);background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:240px;cursor:pointer;user-select:none}.co-tags-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-tags-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.1s ease;flex-shrink:0}.co-tags-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-tags-field__native{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-tags-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-tags-field__edit{border:1px solid var(--co-semantic-border-focus);border-radius:var(--co-border-radius-xxs);outline:none;background:var(--co-semantic-surface-primary);font-family:inherit;font-size:var(--co-font-size-12);line-height:1;color:var(--co-semantic-text-default);padding:var(--co-spacing-xxs) var(--co-spacing-xs);margin:0;min-width:60px}.co-tags-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:var(--co-spacing-xxs) 0 0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-tags-field__clear--hidden{visibility:hidden;pointer-events:none}.co-tags-field__clear:hover{color:var(--co-semantic-text-default)}.co-tags-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-tags-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-tags-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-tags-field--disabled{opacity:0.6;pointer-events:none}.co-tags-field--disabled .co-tags-field__labels .co-tags-field__label{color:var(--co-semantic-text-disabled)}.co-tags-field--disabled .co-tags-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-tags-field--invalid .co-tags-field__field{border-color:var(--co-semantic-status-error)}.co-tags-field--invalid.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-tags-field__helper--error .co-tags-field__helper-icon,.co-tags-field__helper--error .co-tags-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-tags-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-tags-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-tags-field__label{white-space:normal}:host([layout='horizontal']) .co-tags-field>:not(.co-tags-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-tags-field__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoTagsField = class {
     constructor(hostRef) {
@@ -24,6 +25,8 @@ const CoTagsField = class {
         this.invalid = false;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
         /** Raw text in the inline input. */
         this.draft = '';
         /** Index of the chip being edited inline, or null. */
@@ -171,25 +174,28 @@ const CoTagsField = class {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '6ddec5087eaf4b6cc662de1eebce5d936ec02964', class: {
+        return (h("div", { key: 'b06b0400bebca239be4b3510c790e649a0b09e55', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
-            }, part: "wrapper" }, this.label && (h("div", { key: '25cfd8aa738f620a86c3166d197bdee320427c18', class: "co-tags-field__labels" }, h("label", { key: '8aeeff373a2e565a20a6fa58e9f46214783b436a', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'b75ec517f2b6e0e7c16ec67a61764a0e3380a3ee', required: this.required })))), h("div", { key: '22ddf70f600f111ab5412a8fc132746a27068f9b', class: "co-tags-field__field-row" }, h("div", { key: 'd78e1d870904788dbe5fd9b2eb8e625f622c4b49', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6dd2c44651d9202083eda49de6b14fdc1c40a2f8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
-        // Field-chip per the Figma "Tipo=Chips" spec (14px label,
-        // x-circle remove) — same look as co-ref-field's chips.
-        h("span", { key: `chip-${index}-${tag}`, class: "co-tags-field__chip", title: tag, onDblClick: () => this.startEdit(index) }, h("span", { class: "co-tags-field__chip-label" }, tag), !this.disabled && !this.readonly && (h("button", { class: "co-tags-field__chip-remove", type: "button", tabIndex: -1, onClick: (e) => {
-                e.stopPropagation();
-                this.removeTag(index);
-            } }, h("co-icon", { name: "x-circle", weight: "fill", size: 16 })))))), showInput && (h("input", { key: '0385de15c170ab25efdb51265745a583e0f89f4e', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: 'f3f6646342bbc87116dd381be8aab87e213ab53f', class: {
+                [`co-tags-field--${this.size}`]: true,
+            }, part: "wrapper" }, this.label && (h("div", { key: '0476d5d5e3522e3de8703ffe48aaab76e892e7bd', class: "co-tags-field__labels" }, h("label", { key: '23c99c158c88d6fc508218b40d037176728700d0', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0c88d8476cc6c316132a2888f51d3eb49736d205', required: this.required })))), h("div", { key: 'f261306b322b86b0ce6319b74c1dd5a604e354d1', class: "co-tags-field__field-row" }, h("div", { key: 'ee3d816cf0c5197676629840eef464f85fcf9559', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'a9c34371df22b4741d4c6ad1a3842df6f9a2f67d', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+        // Shared field-chip (utils/fieldChip.tsx) per the Figma
+        // "Tipo=Chips" spec — same look as co-ref-field's chips.
+        h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
+                ? (e) => {
+                    e.stopPropagation();
+                    this.removeTag(index);
+                }
+                : undefined }))), showInput && (h("input", { key: 'e3619e500dce2c86bbc964e80ce1b47bac97b488', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: 'd55a9de7143a4ec296b519d27d08528446c3eb7f', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'fdd56eab3d6efe399ac074d363e24f34091b5eb0', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '15609d719a5db8cb05190b62e3600732b8a093b5', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'a41983aa2eea372fdd6bc7f3ea5578887f67e962', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'dfb1fb1b0e91013eaa6ce324089e04d9db16d5a5', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '1981743bf4ecdcca8ff44b92c234cd51cdeef536', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'de671e568b85b27e03636530a544adaf46334e77', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e8fae5a5fb653015e7aed92ba22ea10f8bdd2b64', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '39beac5b7f7576ed3c6c83a417c3736ca086c9a5', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '057154aa6ccbe1598b6d3fa9c82febb929454288', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '2d79353740ced07fa8d8e9fa2541ddf9d6261522', class: "co-tags-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
 
-const coTextareaCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-textarea{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-textarea__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-textarea__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-textarea__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-textarea__field{position:relative;display:flex;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;box-sizing:border-box;overflow:hidden}.co-textarea__native{width:100%;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box}.co-textarea__native::placeholder{color:var(--co-semantic-text-muted)}.co-textarea__native--resize-vertical{resize:vertical}.co-textarea__native--resize-none{resize:none}.co-textarea__native--resize-both{resize:both}.co-textarea__clear{position:absolute;top:var(--co-spacing-sm2);right:var(--co-spacing-sm2);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;padding:0;transition:color 0.15s ease, background 0.15s ease}.co-textarea__clear:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-textarea__footer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-md)}.co-textarea__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);flex:1;min-width:0}.co-textarea__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-textarea__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-textarea__counter{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1;white-space:nowrap;flex-shrink:0}.co-textarea__counter--over{color:var(--co-color-status-error);font-weight:500}.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-textarea--disabled{opacity:0.6;pointer-events:none}.co-textarea--disabled .co-textarea__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-textarea--error .co-textarea__field{border-color:var(--co-semantic-status-error)}.co-textarea--error.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-textarea--error .co-textarea__helper-icon,.co-textarea--error .co-textarea__helper-text{color:var(--co-semantic-status-error)}.co-textarea--success .co-textarea__field{border-color:var(--co-semantic-status-success)}.co-textarea--success.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-textarea--warning .co-textarea__field{border-color:var(--co-semantic-status-warning)}.co-textarea--warning.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-warning);box-shadow:0 0 0 2px rgba(253, 191, 0, 0.12)}.co-textarea--over-limit .co-textarea__field{border-color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-textarea{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-textarea__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-textarea__label{white-space:normal}:host([layout='horizontal']) .co-textarea>:not(.co-textarea__labels){grid-column:2;min-width:0}`;
+const coTextareaCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-textarea{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-textarea__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-textarea__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-textarea__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-textarea__field{position:relative;display:flex;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;box-sizing:border-box;overflow:hidden}.co-textarea__native{width:100%;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box}.co-textarea__native::placeholder{color:var(--co-semantic-text-muted)}.co-textarea--s .co-textarea__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-textarea--sm .co-textarea__native{padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-textarea--lg .co-textarea__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-textarea__native--resize-vertical{resize:vertical}.co-textarea__native--resize-none{resize:none}.co-textarea__native--resize-both{resize:both}.co-textarea__clear{position:absolute;top:var(--co-spacing-sm2);right:var(--co-spacing-sm2);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;padding:0;transition:color 0.15s ease, background 0.15s ease}.co-textarea__clear:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-textarea__footer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-md)}.co-textarea__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);flex:1;min-width:0}.co-textarea__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-textarea__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-textarea__counter{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1;white-space:nowrap;flex-shrink:0}.co-textarea__counter--over{color:var(--co-color-status-error);font-weight:500}.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-textarea--disabled{opacity:0.6;pointer-events:none}.co-textarea--disabled .co-textarea__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-textarea--error .co-textarea__field{border-color:var(--co-semantic-status-error)}.co-textarea--error.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-textarea--error .co-textarea__helper-icon,.co-textarea--error .co-textarea__helper-text{color:var(--co-semantic-status-error)}.co-textarea--success .co-textarea__field{border-color:var(--co-semantic-status-success)}.co-textarea--success.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-textarea--warning .co-textarea__field{border-color:var(--co-semantic-status-warning)}.co-textarea--warning.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-warning);box-shadow:0 0 0 2px rgba(253, 191, 0, 0.12)}.co-textarea--over-limit .co-textarea__field{border-color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-textarea{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-textarea__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-textarea__label{white-space:normal}:host([layout='horizontal']) .co-textarea>:not(.co-textarea__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-textarea__field{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoTextarea = class {
     constructor(hostRef) {
@@ -27,6 +27,9 @@ const CoTextarea = class {
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings/font: s / sm / md / lg).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
         /** Show clear button when textarea has value */
         this.clearable = false;
         /** Resize behavior of the textarea */
@@ -65,20 +68,21 @@ const CoTextarea = class {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: '0e160877b3fefe64f2da005eff7323c528e2f260', class: {
+        return (h("div", { key: '3988a4a4fd675326284655953e77cace71ba661d', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
                 'co-textarea--filled': this.hasValue,
                 'co-textarea--over-limit': isOverLimit,
+                [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '903688841736f2c70c3f44e4619285974beb80af', class: "co-textarea__labels" }, this.label && (h("label", { key: 'a74ffa8509cc809470d0c269dd2ba2edf9d4d184', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '9589ea1bfdd871e1e0e5fdd43512efde94fb9933', required: this.required }))), this.secondaryLabel && (h("span", { key: '8b133899c6ad21233c6a10b0e09791f529064546', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '9d9bd3db4bc163a4429f3e1b5bb320b2cf261403', class: "co-textarea__field", part: "field" }, h("textarea", { key: '99fed67002ed7f2de3aa050085e9e3a90eda9652', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'c2ba685f08ada1353acb384316980dcddd4b9874', class: "co-textarea__labels" }, this.label && (h("label", { key: '91de715c89f556954471a00a00874e80f20ad186', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'c1409b803c1a0c9b9581a56b9790d9a2b7b63967', required: this.required }))), this.secondaryLabel && (h("span", { key: '51010b5855f06a455456153d8cac39142473951d', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e4e20df0ae7995636a328af6f65408b2388ea94e', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'd4e01012fcacf351d90047dc4f6c6e495025fb2a', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'ad0d815278a6a8ab8bd4706b382f1f7aaaf087f3', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'b26e449735a78a4a44458e87de9df4969d95df67', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '958684f0a44b0a09ce9d7095c5c3a677a7c7f35a', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '3abdc8f49e26d210a2eaff7838a372e87746c74c', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '6e83fc70c4f4ca97b08dcce9c11ab8d07f3fb0ce', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c7a5be4eb9c1b225ed390af6c90eeb8cbc530996', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '3211a12b4ef280e2aced5d55cff670a096b99b4e', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'f98be39968e67ab8dc2b3962977def3997964e00', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: 'c874733960b31f7129e173728548a0ead315d72e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '231e6acc23143094f59db60493861930bf77db50', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '4978131a7caae184cb23c0e83d35c85f741fb1d6', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '117908cada80bf151660808799a13ca04458611a', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '4e1410e04d7989554495b0727a750887208649e3', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'd5bcfc362cc82d2dcaa2fe2d4c72b08e368a3196', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
 
-const coToastCss = () => `:host{display:block;--co-toast-bg:var(--co-semantic-surface-page);--co-toast-border:var(--co-semantic-border-subtle);--co-toast-text:var(--co-semantic-text-default);--co-toast-text-secondary:var(--co-semantic-text-secondary);--co-toast-icon:var(--co-semantic-text-default);--co-toast-dismiss-bg:var(--co-semantic-surface-disabled);--co-toast-dismiss-color:var(--co-semantic-text-default)}.co-toast{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg);background:var(--co-toast-bg);border:1px solid var(--co-toast-border);border-radius:var(--co-border-radius-sm);font-family:var(--co-font-family-primary);box-sizing:border-box;width:100%;min-width:320px;max-width:458px}.co-toast--multiline,.co-toast--stacked{align-items:flex-start}.co-toast__icon{display:inline-flex;flex-shrink:0;color:var(--co-toast-icon)}.co-toast--multiline .co-toast__icon{padding-top:2px}.co-toast__body{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--co-spacing-md)}.co-toast__content{display:flex;flex-direction:column;gap:var(--co-spacing-xs);min-width:0}.co-toast__message{font-size:var(--co-font-size-14);font-weight:400;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text)}.co-toast__description{font-size:var(--co-font-size-12);font-weight:400;line-height:1.4;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text-secondary)}.co-toast__actions{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex-shrink:0}.co-toast__actions:empty{display:none}.co-toast--stacked .co-toast__actions{justify-content:flex-end;width:100%}.co-toast__dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border:none;border-radius:var(--co-border-radius-full);background:var(--co-toast-dismiss-bg);color:var(--co-toast-dismiss-color);cursor:pointer;flex-shrink:0;transition:opacity 0.15s ease;-webkit-font-smoothing:antialiased}.co-toast__dismiss:hover{opacity:0.88}.co-toast__dismiss:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-toast--success{--co-toast-bg:var(--co-color-status-bg-success);--co-toast-border:var(--co-color-status-bg-success);--co-toast-text:var(--co-color-status-success);--co-toast-text-secondary:var(--co-color-status-success);--co-toast-icon:var(--co-color-status-success);--co-toast-dismiss-bg:var(--co-color-status-success);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--error{--co-toast-bg:var(--co-color-status-bg-error);--co-toast-border:var(--co-color-status-bg-error);--co-toast-text:var(--co-color-status-error);--co-toast-text-secondary:var(--co-color-status-error);--co-toast-icon:var(--co-color-status-error);--co-toast-dismiss-bg:var(--co-color-status-error);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--warning{--co-toast-bg:var(--co-color-status-bg-review);--co-toast-border:var(--co-color-status-bg-review);--co-toast-text:var(--co-color-status-review);--co-toast-text-secondary:var(--co-color-status-review);--co-toast-icon:var(--co-color-status-review);--co-toast-dismiss-bg:var(--co-color-status-review);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--info{--co-toast-bg:var(--co-color-status-bg-progress);--co-toast-border:var(--co-color-status-bg-progress);--co-toast-text:var(--co-color-status-progress);--co-toast-text-secondary:var(--co-color-status-progress);--co-toast-icon:var(--co-color-status-progress);--co-toast-dismiss-bg:var(--co-color-status-progress);--co-toast-dismiss-color:var(--co-color-base-blanco)}`;
+const coToastCss = () => `:host{display:block;--co-toast-bg:var(--co-semantic-surface-page);--co-toast-border:var(--co-semantic-border-subtle);--co-toast-text:var(--co-semantic-text-default);--co-toast-text-secondary:var(--co-semantic-text-secondary);--co-toast-icon:var(--co-semantic-text-default);--co-toast-dismiss-bg:var(--co-semantic-surface-disabled);--co-toast-dismiss-color:var(--co-semantic-text-default)}.co-toast{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg);background:var(--co-toast-bg);border:1px solid var(--co-toast-border);border-radius:var(--co-border-radius-sm);font-family:var(--co-font-family-primary);box-sizing:border-box;width:100%;min-width:320px;max-width:458px}.co-toast--multiline,.co-toast--stacked,.co-toast--progress{align-items:flex-start}.co-toast__icon{display:inline-flex;flex-shrink:0;color:var(--co-toast-icon)}.co-toast--multiline .co-toast__icon,.co-toast--progress .co-toast__icon{padding-top:2px}.co-toast--progress .co-toast__icon{color:var(--co-color-primary-azul, #2563eb)}.co-toast__body{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--co-spacing-md)}.co-toast__content{display:flex;flex-direction:column;gap:var(--co-spacing-xs);min-width:0}.co-toast__message{font-size:var(--co-font-size-14);font-weight:400;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text)}.co-toast__description{font-size:var(--co-font-size-12);font-weight:400;line-height:1.4;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text-secondary)}.co-toast__actions{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex-shrink:0}.co-toast__actions:empty{display:none}.co-toast--stacked .co-toast__actions{justify-content:flex-end;width:100%}.co-toast__dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border:none;border-radius:var(--co-border-radius-full);background:var(--co-toast-dismiss-bg);color:var(--co-toast-dismiss-color);cursor:pointer;flex-shrink:0;transition:opacity 0.15s ease;-webkit-font-smoothing:antialiased}.co-toast__dismiss:hover{opacity:0.88}.co-toast__dismiss:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-toast--success{--co-toast-bg:var(--co-color-status-bg-success);--co-toast-border:var(--co-color-status-bg-success);--co-toast-text:var(--co-color-status-success);--co-toast-text-secondary:var(--co-color-status-success);--co-toast-icon:var(--co-color-status-success);--co-toast-dismiss-bg:var(--co-color-status-success);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--error{--co-toast-bg:var(--co-color-status-bg-error);--co-toast-border:var(--co-color-status-bg-error);--co-toast-text:var(--co-color-status-error);--co-toast-text-secondary:var(--co-color-status-error);--co-toast-icon:var(--co-color-status-error);--co-toast-dismiss-bg:var(--co-color-status-error);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--warning{--co-toast-bg:var(--co-color-status-bg-review);--co-toast-border:var(--co-color-status-bg-review);--co-toast-text:var(--co-color-status-review);--co-toast-text-secondary:var(--co-color-status-review);--co-toast-icon:var(--co-color-status-review);--co-toast-dismiss-bg:var(--co-color-status-review);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--info{--co-toast-bg:var(--co-color-status-bg-progress);--co-toast-border:var(--co-color-status-bg-progress);--co-toast-text:var(--co-color-status-progress);--co-toast-text-secondary:var(--co-color-status-progress);--co-toast-icon:var(--co-color-status-progress);--co-toast-dismiss-bg:var(--co-color-status-progress);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast__progress{min-width:0}.co-toast__progress-header{display:flex;align-items:center;gap:var(--co-spacing-md);min-width:0}.co-toast__progress-header .co-toast__content{flex:1;min-width:0}.co-toast__percent{flex-shrink:0;font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-color-gray-500, #888888);font-variant-numeric:tabular-nums}.co-toast__track{width:100%;height:6px;margin-top:9px;border-radius:9999px;background:var(--co-color-gray-100, #f6f6f6);overflow:hidden}.co-toast__fill{display:block;height:100%;border-radius:inherit;background:var(--co-color-primary-azul, #2563eb);transition:width 0.3s ease}`;
 
 const DEFAULT_ICON = {
     success: 'info',
@@ -27,15 +27,21 @@ const CoToast = class {
         var _a;
         const hasDescription = !!this.description;
         const isStacked = this.actionsLayout === 'stacked';
-        const resolvedIcon = (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON[this.variant];
+        const hasProgress = this.progress !== undefined && this.progress !== null;
+        const clampedProgress = hasProgress
+            ? Math.max(0, Math.min(100, this.progress))
+            : 0;
+        const resolvedIcon = (_a = this.icon) !== null && _a !== void 0 ? _a : (hasProgress ? 'upload-simple' : DEFAULT_ICON[this.variant]);
         const role = ALERT_VARIANTS.includes(this.variant) ? 'alert' : 'status';
         const rootClass = {
             'co-toast': true,
             [`co-toast--${this.variant}`]: true,
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
+            'co-toast--progress': hasProgress,
         };
-        return (h("div", { key: '764d958e40e198c3b02dc92d0fcb10f79c853547', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '7064fdcf56694bc0b2f8a4a9338442db98560510', class: "co-toast__icon" }, h("co-icon", { key: 'cb3628ec9051d6d6ee42f432e8f9560bff276233', name: resolvedIcon, size: 20 }))), h("div", { key: 'aa15c35826277e7923bc7f8b0b0fcbd189706109', class: "co-toast__body" }, h("div", { key: '7a4992a6a984ff09cc8b6e0012a1c80309a0665b', class: "co-toast__content" }, h("span", { key: 'd6dd0e0f427395b311bbb9cee26d4a9be22900ce', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f2167e0207c014933aef6bca2d9f5e2adc267abd', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: '448957a6f93ce912f231483d9469a38b23e72466', class: "co-toast__actions" }, h("slot", { key: '68834bc69baf4ba5ffa769a9edbd60f9441d7a44', name: "action" })))), !isStacked && (h("div", { key: 'ef11141a8d57484b75b3af5b974ec451c58a8f5a', class: "co-toast__actions" }, h("slot", { key: '417f06903a6b0d3fb4184175df675d28dfabca64', name: "action" }))), this.dismissible && (h("button", { key: 'cfbabfc9a35669c99c2a37ed1278e17d0dd77279', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'ef936e9c54768d46bf60335140f96dcd1c103d76', name: "x", size: 16 })))));
+        const content = (h("div", { key: 'bb0663300f9e7147fde81450bc1ea78b1900311b', class: "co-toast__content" }, h("span", { key: '1db1114d3dd4cb7ce4406354f9949f8e4f024501', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'd4367238b602556e39bc53f68c136b895296c5c8', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '3e76f3e5a188753d7829066998cc440f93975471', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: 'df94035e5a376b5a6acadc0492ef30122e79f796', class: "co-toast__icon" }, h("co-icon", { key: 'b1c61c6c53340a743f1a669b23f494709c802e5b', name: resolvedIcon, size: 20 }))), h("div", { key: 'fff08bbeff5b8c22bcde6db3f80d5a35253dd435', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '9a0bce8712a96874af192ecfb57409509164e862', class: "co-toast__actions" }, h("slot", { key: 'de706ed811e39e1e15f01c40acf6102df5b58cae', name: "action" })))), !isStacked && (h("div", { key: 'f9cce3ecff6f07b2aac1a13011445b441af005d4', class: "co-toast__actions" }, h("slot", { key: 'ba1beb4a6a90165461c14f7906b224231a53966f', name: "action" }))), this.dismissible && (h("button", { key: '3c4bb3a2802729229451604c86370748a214a678', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '5f3daffe362c16a591f105bd8596a8d929348d6d', name: "x", size: 16 })))));
     }
 };
 CoToast.style = coToastCss();

package/dist/esm/co-toggle-button-group.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
 
-const coToggleButtonGroupCss = () => `:host{display:inline-flex}.co-toggle-button-group{display:inline-flex;gap:0}.co-toggle-button-group--row{flex-direction:row}.co-toggle-button-group--column{flex-direction:column}:host([full-width]){display:flex;width:100%}.co-toggle-button-group--full{display:flex;width:100%}.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button){flex:1 1 0;--co-toggle-button-width:100%}.co-toggle-button-group--row ::slotted(co-toggle-button){--co-btn-border-radius:0;border-radius:0}.co-toggle-button-group--row ::slotted(co-toggle-button:first-child){border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs)}.co-toggle-button-group--row ::slotted(co-toggle-button:last-child){border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0}.co-toggle-button-group--column ::slotted(co-toggle-button){border-radius:0;width:100%}.co-toggle-button-group--column ::slotted(co-toggle-button:first-child){border-radius:var(--co-border-radius-xs) var(--co-border-radius-xs) 0 0}.co-toggle-button-group--column ::slotted(co-toggle-button:last-child){border-radius:0 0 var(--co-border-radius-xs) var(--co-border-radius-xs)}.co-toggle-button-group--row ::slotted(co-toggle-button:not(:first-child)){margin-left:-1px}.co-toggle-button-group--column ::slotted(co-toggle-button:not(:first-child)){margin-top:-1px}.co-toggle-button-group--disabled{opacity:0.4;pointer-events:none}`;
+const coToggleButtonGroupCss = () => `:host{display:inline-flex}.co-toggle-button-group{display:inline-flex;gap:0}.co-toggle-button-group--row{flex-direction:row}.co-toggle-button-group--column{flex-direction:column}:host([full-width]){display:flex;width:100%}.co-toggle-button-group--full{display:flex;width:100%}.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button){flex:1 1 0;--co-toggle-button-width:100%}.co-toggle-button-group--row ::slotted(co-toggle-button){--co-tbr-tl:0;--co-tbr-tr:0;--co-tbr-br:0;--co-tbr-bl:0}.co-toggle-button-group--row ::slotted(co-toggle-button:first-child){--co-tbr-tl:var(--co-toggle-button-radius);--co-tbr-bl:var(--co-toggle-button-radius)}.co-toggle-button-group--row ::slotted(co-toggle-button:last-child){--co-tbr-tr:var(--co-toggle-button-radius);--co-tbr-br:var(--co-toggle-button-radius)}.co-toggle-button-group--column ::slotted(co-toggle-button){--co-tbr-tl:0;--co-tbr-tr:0;--co-tbr-br:0;--co-tbr-bl:0;width:100%}.co-toggle-button-group--column ::slotted(co-toggle-button:first-child){--co-tbr-tl:var(--co-toggle-button-radius);--co-tbr-tr:var(--co-toggle-button-radius)}.co-toggle-button-group--column ::slotted(co-toggle-button:last-child){--co-tbr-bl:var(--co-toggle-button-radius);--co-tbr-br:var(--co-toggle-button-radius)}.co-toggle-button-group--row ::slotted(co-toggle-button:not(:first-child)){margin-left:-1px}.co-toggle-button-group--column ::slotted(co-toggle-button:not(:first-child)){margin-top:-1px}.co-toggle-button-group--disabled{opacity:0.4;pointer-events:none}.co-toggle-button-group--track{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--co-color-gray-100, #f6f6f6)}.co-toggle-button-group--track ::slotted(co-toggle-button){margin:0 !important}`;
 
 const CoToggleButtonGroup = class {
     constructor(hostRef) {
@@ -14,6 +14,10 @@ const CoToggleButtonGroup = class {
         this.direction = 'row';
         /** Stretch the group to fill its container; each button shares the width equally. */
         this.fullWidth = false;
+        /** 'connected' (default) keeps the seamless dark-fill segmented control.
+         *  'track' turns the group into a sunken gray track carrying detached rounded
+         *  pills (white + shadow when selected) — e.g. an icon-only view toggle. */
+        this.variant = 'connected';
     }
     get selectedValues() {
         if (this.multiple) {
@@ -32,6 +36,9 @@ const CoToggleButtonGroup = class {
     syncChildren() {
         this.updateChildStates();
     }
+    syncVariant() {
+        this.updateChildStates();
+    }
     componentDidLoad() {
         this.updateChildStates();
     }
@@ -59,20 +66,25 @@ const CoToggleButtonGroup = class {
         const children = this.el.querySelectorAll('co-toggle-button');
         children.forEach((child) => {
             child.selected = sel.includes(child.value);
+            child.variant = this.variant;
         });
     }
     render() {
-        return (h("div", { key: '59aac10e6e4f7eb9337aed57f3d258c615139046', class: {
+        return (h("div", { key: '64ff689a4bfa3d0725f552646bd1aeb353fc4df3', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
+                [`co-toggle-button-group--${this.variant}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: 'c6a683245689d3109bc6fcedacae4e2d54209909' })));
+            }, role: "group" }, h("slot", { key: '81baddbc7272bc588e877e9949397fe4947643a9' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "syncChildren": 0
+            }],
+        "variant": [{
+                "syncVariant": 0
             }]
     }; }
 };

package/dist/esm/co-toggle-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
 
-const coToggleButtonCss = () => `:host{display:inline-flex}.co-toggle-button{display:inline-flex;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-14)}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14)}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-700, #1f1c1b);border-color:var(--co-color-gray-700, #1f1c1b)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button__label{line-height:1}`;
+const coToggleButtonCss = () => `:host{display:inline-flex;--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='l']){--co-toggle-button-radius:var(--co-border-radius-lg)}:host([size='m']){--co-toggle-button-radius:var(--co-border-radius-sm)}:host([size='s']){--co-toggle-button-radius:var(--co-border-radius-xs)}:host([size='xs']){--co-toggle-button-radius:var(--co-border-radius-xs)}.co-toggle-button{display:inline-flex;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-top-left-radius:var(--co-tbr-tl, var(--co-toggle-button-radius));border-top-right-radius:var(--co-tbr-tr, var(--co-toggle-button-radius));border-bottom-right-radius:var(--co-tbr-br, var(--co-toggle-button-radius));border-bottom-left-radius:var(--co-tbr-bl, var(--co-toggle-button-radius));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));color:var(--co-semantic-text-default);font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-14)}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14)}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-800, #0a0a0a);border-color:var(--co-color-gray-800, #0a0a0a)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button__label{line-height:1}@supports not (background: color-mix(in srgb, red, transparent)){.co-toggle-button{background:var(--co-semantic-surface-secondary)}}:host([variant='track']) .co-toggle-button{height:30px;border-radius:8px;border-color:transparent;background:transparent;color:var(--co-color-gray-500, #888888);box-shadow:none;padding:0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='track']) .co-toggle-button.co-toggle-button--icon-only{width:34px;padding:0}:host([variant='track']) .co-toggle-button:hover:not(:disabled){background:transparent;color:var(--co-color-base-negro, #1f1c1b)}:host([variant='track']) .co-toggle-button--selected{background:var(--co-color-base-blanco, #fff);color:var(--co-color-base-negro, #1f1c1b);border-color:transparent;box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04))}:host([variant='track']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-base-blanco, #fff);border-color:transparent}`;
 
 const CoToggleButton = class {
     constructor(hostRef) {
@@ -10,6 +10,9 @@ const CoToggleButton = class {
         this.value = '';
         this.size = 'm';
         this.disabled = false;
+        /** Visual variant. 'track' renders the button as a detached rounded pill for a
+         *  sunken toggle-button-group track. Normally set by the parent group. */
+        this.variant = 'connected';
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -18,14 +21,15 @@ const CoToggleButton = class {
         };
     }
     render() {
-        const iconSize = this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
-        return (h("button", { key: '3e1a2d28437f608009c3a8dd7f8221773c42cf7d', class: {
+        const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
+        const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
+        return (h("button", { key: 'd45897e4ecc1fadd3f51d48f16e325460edc9d64', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'b6ddaa41d5264433483d0a7f911505106d657186', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: 'b908957caffbce488c5483fc83e46bf918abcded', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '462027b869fe5122fdd3c7e9f00d0662271875fa', name: this.iconRight, size: iconSize })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: '923f577d048c1444b057cfb6d5f02e552cdd82da', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '81720f7d05511ac48f43bea8bd1c0b7fd1b9fa1e', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '8aa3946bb1434a02c182631f0d731a28e3ee3668', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
 };
 CoToggleButton.style = coToggleButtonCss();