@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
-var positioning = require('./positioning-CyatXeT_.js');
+var index = require('./index-bHoidDwv.js');
+var positioning = require('./positioning-CILo5esi.js');
 
 /**
  * Pila global de popovers abiertos (orden de apertura). Permite que el
@@ -28,7 +28,7 @@ function isTopLayer(el) {
     return stack.length > 0 && stack[stack.length - 1] === el;
 }
 
-const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;inset:auto;top:0;left:0;margin:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;z-index:10000;visibility:hidden;opacity:0;transform:scale(0.97);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:visible}.co-popover__panel--positioned{visibility:visible;opacity:1;transform:scale(1);transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-popover__panel--closing{visibility:visible;opacity:0;transform:scale(0.99);pointer-events:none;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-in),     transform var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-popover__panel--bottom{transform-origin:top center}.co-popover__panel--top{transform-origin:bottom center}.co-popover__panel--right{transform-origin:center left}.co-popover__panel--left{transform-origin:center right}`;
+const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;inset:auto;top:0;left:0;margin:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;z-index:10000;visibility:hidden;opacity:0;transform:scale(0.97);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-popover-border-color, var(--co-semantic-border-subtle));border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-popover-shadow, 0 4px 16px rgba(31, 28, 27, 0.08));overflow:visible}:host([bare]) .co-popover__panel{background:transparent;border:0;box-shadow:none}.co-popover__panel--positioned{visibility:visible;opacity:1;transform:scale(1);transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-popover__panel--closing{visibility:visible;opacity:0;transform:scale(0.99);pointer-events:none;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-in),     transform var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-popover__panel--bottom{transform-origin:top center}.co-popover__panel--top{transform-origin:bottom center}.co-popover__panel--right{transform-origin:center left}.co-popover__panel--left{transform-origin:center right}`;
 
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
@@ -60,8 +60,28 @@ const CoPopover = class {
         this.closeOnEscape = true;
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
+        /**
+         * El panel no pinta fondo/borde/sombra propios:
+         * para alojar un `co-menu` (u otro contenido con su propio chrome) sin
+         * "doble chrome". Reflejado como atributo `bare`. Default `false` = panel
+         * con el fondo/borde/sombra de siempre (`--co-popover-border-color` /
+         * `--co-popover-shadow`), sin cambio.
+         */
+        this.bare = false;
+        /**
+         * Desplazamiento en px sobre el eje CRUZADO del `placement`: con un placement vertical (`top*`/`bottom*`) mueve `left`; con
+         * uno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.
+         *
+         * ⚠️ Se aplica ANTES del clamp de 4px a los bordes del viewport (ver
+         * `computePosition` en `utils/positioning.ts`) — un `shift` grande cerca de
+         * un borde puede quedar clampeado igual que hoy, no lo evita. No hay forma
+         * de pedir un `shift` que se salga de pantalla a propósito.
+         */
+        this.shift = 0;
         /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
         this.closing = false;
+        /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
+        this.anchorSeenVisible = false;
         this.scrollParents = [];
         // Cached offset ancestor + a flag to distinguish "not computed yet" from
         // "computed and there is none". Avoids re-walking the DOM + calling
@@ -136,6 +156,21 @@ const CoPopover = class {
             if (!this.open || !this.triggerEl || !this.panelEl)
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
+            // El trigger salió de la vista de su scroller (la columna de un kanban, el body
+            // de una tabla): seguirlo deja el panel pegado al borde del viewport por el
+            // clamp de `computePosition`, flotando sobre la cabecera sin su ancla. Se
+            // cierra, como un menú nativo. Solo si alguna vez estuvo visible (una apertura
+            // programática con el ancla ya fuera de vista queda como antes) y solo en los
+            // popovers descartables: uno persistente (`closeOnClickOutside=false`) no se
+            // cierra por sí solo.
+            const clipRects = this.scrollParents.map((p) => p.getBoundingClientRect());
+            if (positioning.isAnchorVisible(triggerRect, clipRects)) {
+                this.anchorSeenVisible = true;
+            }
+            else if (this.anchorSeenVisible && this.closeOnClickOutside) {
+                this.open = false;
+                return;
+            }
             // ⚠️ El panel arrastra el `transform: scale()` de la entrada, y
             // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.97× al montar y
             // ~0.972× en la segunda pasada del watcher (~16ms de los `base` 250ms). Medir con
@@ -151,10 +186,17 @@ const CoPopover = class {
                 width: this.panelEl.offsetWidth,
                 height: this.panelEl.offsetHeight,
             });
+            // `anchor` sin resolver (prop ausente, o
+            // selector sin match en `document`) → `anchorRect` queda undefined y
+            // computePosition cae a `triggerRect` — mismo resultado que hoy.
+            const anchorEl = this.resolveAnchor();
+            const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
             const { top, left, actualPlacement } = positioning.computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
                 flip: this.flip,
+                anchorRect,
+                shift: this.shift,
             });
             let finalTop = top;
             let finalLeft = left;
@@ -179,7 +221,9 @@ const CoPopover = class {
                 left: `${finalLeft}px`,
             };
             if (this.matchWidth) {
-                style.width = `${triggerRect.width}px`;
+                // Con `anchor`, "match width" es contra el ancho del anchor (la píldora
+                // completa) — no del trigger chico que solo dispara el popover.
+                style.width = `${(anchorRect !== null && anchorRect !== void 0 ? anchorRect : triggerRect).width}px`;
             }
             // Apply styles directly to DOM to avoid triggering a re-render loop
             if (this.panelEl) {
@@ -236,6 +280,7 @@ const CoPopover = class {
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
+        this.anchorSeenVisible = false;
         if (isOpen) {
             this.closing = false;
             clearTimeout(this.closeFallbackTimer);
@@ -289,15 +334,33 @@ const CoPopover = class {
         this.pressStartedInside = false;
     }
     // ── Public methods ─────────────────────────────────────────
+    /** Abre o cierra el panel. */
     async toggle() {
         this.open = !this.open;
     }
+    /** Abre el panel. */
     async show() {
         this.open = true;
     }
+    /** Cierra el panel. */
     async hide() {
         this.open = false;
     }
+    /**
+     * Resuelve la prop `anchor` a un elemento:
+     *   - `HTMLElement` → se usa tal cual.
+     *   - `string` → selector resuelto contra `document`; sin match, `null`
+     *     (el llamador cae a `triggerRect`, el comportamiento de siempre).
+     *   - sin `anchor` → `null` (mismo fallback).
+     */
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.querySelector(this.anchor);
+        }
+        return this.anchor;
+    }
     /**
      * Promote the panel to the browser top layer (Popover API) so an ancestor's
      * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.
@@ -354,13 +417,13 @@ const CoPopover = class {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (index.h("div", { key: 'f4f13f06a95f02735c615e896d367ca671270a68', class: "co-popover" }, index.h("div", { key: '504af8cebb0f83e7f882f09096a5bfba37e2ac56', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: 'd5853c372f2bda3f5c57718b5869ca8919c1dfcc', name: "trigger" })), (this.open || this.closing) && (index.h("div", { key: '3b9c2aa2feaab08eb5f03d36cc25a464600da7fe', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+        return (index.h("div", { key: 'f9c23cf5b7beb42230fbc37e6aacb9d8423a2c34', class: "co-popover" }, index.h("div", { key: '255b7a3b713719283e3b4a6d65ed520661b4e40b', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, index.h("slot", { key: '82c7133648e7c55db263f1abae8902c3ab579d27', name: "trigger" })), (this.open || this.closing) && (index.h("div", { key: '990ca1400e5e19d6614dbc7b43e78b116626e1b0', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, index.h("slot", { key: '81e2b8070b4912bab1654e957890c92244ca83b8' })))));
+            } }, index.h("slot", { key: 'fb635cf42e7866b055a59aaf471bab5bca995afb' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-progress-bar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coProgressBarCss = () => `:host{display:block;width:100%}.co-progress-bar{width:100%;border-radius:9999px;overflow:hidden;background:var(--co-semantic-border-subtle);position:relative}.co-progress-bar__fill{height:100%;border-radius:9999px;transition:width 0.3s ease}.co-progress-bar--solid .co-progress-bar__fill{background:var(--co-semantic-status-info)}.co-progress-bar--solid.co-progress-bar--success .co-progress-bar__fill{background:var(--co-semantic-status-success)}.co-progress-bar--solid.co-progress-bar--warning .co-progress-bar__fill{background:var(--co-semantic-status-warning)}.co-progress-bar--solid.co-progress-bar--error .co-progress-bar__fill{background:var(--co-semantic-status-error)}.co-progress-bar--dashed{background:transparent;border:2px dashed var(--co-semantic-border-subtle)}.co-progress-bar--dashed .co-progress-bar__fill{background:transparent;border-bottom:2px dashed var(--co-semantic-status-info);border-radius:0}.co-progress-bar--dashed.co-progress-bar--success .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-success)}.co-progress-bar--dashed.co-progress-bar--warning .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-warning)}.co-progress-bar--dashed.co-progress-bar--error .co-progress-bar__fill{border-bottom-color:var(--co-semantic-status-error)}.co-progress-bar--dashed.co-progress-bar--default{border-color:var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08))}.co-progress-bar--indeterminate .co-progress-bar__fill{width:40%;transition:none;animation:co-progress-indeterminate 1.4s ease-in-out infinite;will-change:transform}@keyframes co-progress-indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}@media (prefers-reduced-motion: reduce){.co-progress-bar--indeterminate .co-progress-bar__fill{animation:none;width:100%;opacity:0.45}}`;
 
@@ -21,12 +21,12 @@ const CoProgressBar = class {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (index.h("div", { key: 'bcf5e566cfa6726eac8578288797d1004e4003fb', class: {
+        return (index.h("div", { key: '73ffc3d2dedc7a87e2552a75b61a56199f60edb6', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, index.h("div", { key: '932537ab1521b2d7fcd0e1bb57c027a276dacaf3', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, index.h("div", { key: 'da42344ce3d88c2a1eec058b4bb57a7b8380a2aa', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
 };
 CoProgressBar.style = coProgressBarCss();

package/dist/cjs/co-progress-circle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coProgressCircleCss = () => `:host{display:inline-flex}.co-progress-circle{--_color:var(--co-semantic-status-info, #2563eb);--_track:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(     var(--_color) var(--co-pc-angle, 0deg),     var(--_track) var(--co-pc-angle, 0deg)   );transition:background var(--co-motion-duration-slow) var(--co-motion-ease-out)}.co-progress-circle__track{position:absolute;inset:var(--co-pc-stroke, 4px);border-radius:50%;background:var(--co-semantic-surface-page, #fff)}.co-progress-circle__label{position:relative;z-index:1;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-11, 11px);font-weight:600;color:var(--_color);line-height:1;pointer-events:none}.co-progress-circle--success{--_color:var(--co-semantic-status-success, #0a7724)}.co-progress-circle--warning{--_color:var(--co-semantic-status-warning, #f59e0b)}.co-progress-circle--error{--_color:var(--co-semantic-status-error, #aa2e1b)}`;
 
@@ -22,7 +22,7 @@ const CoProgressCircle = class {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (index.h("div", { key: 'bc100ca3ef731aab3168a247098102b8e9ab9537', class: {
+        return (index.h("div", { key: 'a3d5bc7d287ef18ad5d1d2f23373d25ea2509476', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -30,7 +30,7 @@ const CoProgressCircle = class {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, index.h("div", { key: '48862f1f57c0bb8cd6e03c2f0a84a1ae324d3ec1', class: "co-progress-circle__track" }), this.showLabel && (index.h("span", { key: '0ff2c6995740504e1df9b11dfa10e0a9f9d368c5', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, index.h("div", { key: '3b922058d72dcb0d1a7a9f59b122b8a2d54c4d4a', class: "co-progress-circle__track" }), this.showLabel && (index.h("span", { key: '083498504b05357660f593c128258a2be8ca359e', class: "co-progress-circle__label" }, clamped, "%"))));
     }
 };
 CoProgressCircle.style = coProgressCircleCss();

package/dist/cjs/co-provider-logo_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coProviderLogoCss = () => `:host{display:inline-flex;flex:0 0 auto;line-height:0}.co-provider-logo{display:inline-flex;align-items:center;justify-content:center}.co-provider-logo--plated{background:#fff;border-radius:var(--co-border-radius-full);box-shadow:0 0 0 1px rgb(0 0 0 / 8%)}`;
 
@@ -98,7 +98,7 @@ const CoSkeleton = class {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (index.h("div", { key: '744fb805939c99587c4d0b72355da54d1f5aad43', class: {
+        return (index.h("div", { key: '26e69f4c94f59664827c617fa3d54983ac56cd1d', class: {
                 'co-skeleton': true,
                 [`co-skeleton--${this.variant}`]: true,
                 'co-skeleton--revealed': this.revealed,

package/dist/cjs/co-radio-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coRadioGroupCss = () => `: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-radio-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-radio-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-radio-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-radio-group--disabled .co-radio-group__label,.co-radio-group--disabled .co-radio-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-radio-group__options{display:flex;gap:var(--co-spacing-md)}.co-radio-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-radio-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-radio-group__item--disabled{cursor:not-allowed}.co-radio-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-radio-group__item--disabled .co-radio-group__option-label{color:var(--co-semantic-text-disabled)}.co-radio-group__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-radio-group__circle--small{width:16px;height:16px}.co-radio-group__circle--large{width:24px;height:24px}.co-radio-group__circle:not(.co-radio-group__circle--checked){border-color:var(--co-semantic-border-default)}.co-radio-group__circle--checked{border-color:var(--co-semantic-border-strong)}.co-radio-group__circle--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio-group__circle--small.co-radio-group__circle--checked::after{width:8px;height:8px}.co-radio-group__circle--large.co-radio-group__circle--checked::after{width:14px;height:14px}.co-radio-group__circle--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-radio-group--error .co-radio-group__circle{border-color:var(--co-semantic-status-error)}.co-radio-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-radio-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-radio-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-radio-group__helper--error .co-radio-group__helper-icon,.co-radio-group__helper--error .co-radio-group__helper-text{color:var(--co-semantic-status-error)}.co-radio-group__helper--success .co-radio-group__helper-icon,.co-radio-group__helper--success .co-radio-group__helper-text{color:var(--co-semantic-status-success)}.co-radio-group__helper--warning .co-radio-group__helper-icon,.co-radio-group__helper--warning .co-radio-group__helper-text{color:var(--co-color-status-review)}.co-radio-group__helper--info .co-radio-group__helper-icon,.co-radio-group__helper--info .co-radio-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-radio-group{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-radio-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-radio-group__label{white-space:normal}:host([layout='horizontal']) .co-radio-group>:not(.co-radio-group__labels){grid-column:2;min-width:0}`;
 
@@ -66,11 +66,11 @@ const CoRadioGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (index.h("div", { key: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
+        return (index.h("div", { key: 'b1c5880c1f9faca27b89189de5d64e36569d5b4f', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && index.h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: '0e6088377e3cd361749b9aa98f2e6485a76fb577', class: "co-radio-group__labels" }, this.label && index.h("span", { key: '411bf1ec096311df2b25fac0b39c402d01365e5c', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: '917cc0dd87362d7add21d407869872a14378a0b9', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '6459fee05efb04d402c0c98dfcbad83fc7da7f06', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -85,7 +85,7 @@ const CoRadioGroup = class {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), index.h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (index.h("div", { key: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), index.h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (index.h("div", { key: '9cec80138190321eafb700039b2d33d24e420e30', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '8be3d15ffa7d528927f907b4c9523b7f2a6cdb94', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), index.h("span", { key: '6ccf0cfeea7f6e00047b2849edff9fd988eb36a6', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coRadioCss = () => `: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-radio-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-radio-row--disabled{cursor:not-allowed}.co-radio__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-radio-row--disabled .co-radio__label{color:var(--co-semantic-text-disabled)}.co-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);outline:none;padding:0;background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-radio--small{width:16px;height:16px}.co-radio--large{width:24px;height:24px}.co-radio:not(.co-radio--checked){border-color:var(--co-semantic-border-default)}.co-radio--checked{border-color:var(--co-semantic-border-strong)}.co-radio--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio--small.co-radio--checked::after{width:8px;height:8px}.co-radio--large.co-radio--checked::after{width:14px;height:14px}.co-radio--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
 
@@ -24,15 +24,15 @@ const CoRadio = class {
         };
     }
     render() {
-        return (index.h("div", { key: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
+        return (index.h("div", { key: '637efb5c90e6f1f2c205a9c97c020c609f72a093', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.h("button", { key: '7311c200f5b2e2029acfe2642aa59c850087a7b3', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (index.h("span", { key: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (index.h("span", { key: '067c567f9d70642c11ccb1a8d0b30c17323fb476', class: "co-radio__label", part: "label" }, this.label))));
     }
 };
 CoRadio.style = coRadioCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
+var index = require('./index-bHoidDwv.js');
 
 const coRatingCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);line-height:1}.co-rating{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-rating__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default;padding:0 var(--co-spacing-xs)}.co-rating--disabled .co-rating__label{color:var(--co-semantic-text-disabled)}.co-rating__stars{display:inline-flex;gap:var(--co-spacing-xs)}.co-rating__star{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-border-subtle);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-rating__star:hover:not(:disabled){transform:scale(1.15)}.co-rating__star--active{color:#F5A623;}.co-rating__star--hover{color:#F5A623}.co-rating--disabled .co-rating__star{cursor:not-allowed;opacity:0.5}.co-rating--readonly .co-rating__star{cursor:default}.co-rating__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-rating__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-rating__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rating__helper--error .co-rating__helper-icon,.co-rating__helper--error .co-rating__helper-text{color:var(--co-semantic-status-error)}.co-rating__helper--success .co-rating__helper-icon,.co-rating__helper--success .co-rating__helper-text{color:var(--co-semantic-status-success)}.co-rating__helper--warning .co-rating__helper-icon,.co-rating__helper--warning .co-rating__helper-text{color:var(--co-color-status-review)}.co-rating__helper--info .co-rating__helper-icon,.co-rating__helper--info .co-rating__helper-text{color:var(--co-semantic-status-info)}`;
 
@@ -8,12 +8,19 @@ const CoRating = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coChange = index.createEvent(this, "coChange", 7);
+        /** Calificación actual, 0 a `max` (reflejado; el componente lo actualiza al elegir). */
         this.value = 0;
+        /** Cantidad de íconos (default 5). */
         this.max = 5;
+        /** Tamaño de los íconos: `small` (default) o `large`. */
         this.size = 'small';
+        /** Deshabilita la interacción y atenúa el control. */
         this.disabled = false;
+        /** Solo muestra el valor, sin interacción ni hover (atributo `read-only`). */
         this.readOnly = false;
+        /** Ícono Phosphor de cada paso (default `star`). */
         this.icon = 'star';
+        /** Estado de validación: colorea el `helperText`. */
         this.status = 'default';
         this.hoverValue = 0;
         this.handleClick = (star) => {
@@ -43,16 +50,16 @@ const CoRating = class {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: 'a825b7cf49067c0a12ccddb81554c172d90a888f', class: {
+        return (index.h("div", { key: '007e7bf1aef33b6890f98e1fdac362aa3f578802', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && index.h("label", { key: '354b3b676401d0265e5f64aed1b137b97a147468', class: "co-rating__label" }, this.label), index.h("div", { key: '29c8af2cde2482ac803e75025dc5533c7051c2ff', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (index.h("button", { class: {
+            } }, this.label && index.h("label", { key: 'ebc8a44655b6f975d792546762d3fe1e4ccf2958', class: "co-rating__label" }, this.label), index.h("div", { key: 'eba75b8e98a075531afff4fe5781a63119206d7b', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (index.h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, index.h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (index.h("div", { key: '0fcc95b7e125f1ef57c67ed9e46d4511da5d3eaa', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'c9cb1f60e902c0b52a45225bedacd92ba08ae0b4', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), index.h("span", { key: '8a5479175de97fccb5947f2f8f2c87888481b104', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, index.h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (index.h("div", { key: '571bff4884aa6695e2edcb1ae42baae1d57eb3a0', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '73cfba25f9b28ea6a6dc7b48c6f2009ac4024779', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), index.h("span", { key: '4029c8c33d6a967c063a886eca3043b22ecc9a2d', class: "co-rating__helper-text" }, this.helperText)))));
     }
 };
 CoRating.style = coRatingCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-MDAnKsze.js');
-var requiredMark = require('./requiredMark-D-t-IPN0.js');
-var fieldChip = require('./fieldChip-B6YIGU1V.js');
-var color = require('./color-CML2Cfdh.js');
+var index = require('./index-bHoidDwv.js');
+var requiredMark = require('./requiredMark-21yHvvZS.js');
+var fieldChip = require('./fieldChip-C7MxxBVO.js');
+var color = require('./color-DQVrQGi0.js');
 
 const coRefFieldCss = () => `: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;position:relative}.co-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-field));border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field--flat{background:transparent;border-color:transparent}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__inherited-tip{min-width:0;max-width:100%}.co-ref-field__inherited{display:block;color:var(--co-semantic-text-secondary);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__inherited-badge{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;height:22px;padding:0 var(--co-spacing-sm2);border:1px solid var(--co-ref-field-inherited-badge-border, var(--co-semantic-border-default));border-radius:var(--co-border-radius-full);color:var(--co-ref-field-inherited-badge-color, var(--co-semantic-text-secondary));font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__trigger-badge{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:var(--co-border-radius-xxs);background:var(--co-ref-field-trigger-badge-bg, rgba(0, 0, 0, 0.22));color:var(--co-semantic-text-default)}.co-ref-field__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__edit{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__edit:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip--fill{color:var(--co-color-base-blanco);border-radius:var(--co-spacing-sm)}.co-ref-field__chip--fill-light{color:var(--co-color-base-negro)}.co-ref-field__chip--fill .co-ref-field__chip-label,.co-ref-field__chip--fill .co-ref-field__chip-remove{color:inherit}.co-ref-field__chip--fill .co-ref-field__chip-remove{opacity:0.72}.co-ref-field__chip--fill .co-ref-field__chip-remove:hover{color:inherit;opacity:1}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__labels){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)')}`;
 
@@ -24,8 +24,11 @@ const CoRefField = class {
         this.coEditSelected = index.createEvent(this, "coEditSelected", 7);
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
+        /** Texto del trigger sin valor (salvo que haya `inheritedLabel`). */
         this.placeholder = 'Select…';
+        /** Deshabilita el campo: no abre el panel ni muestra × ni lápiz. */
         this.disabled = false;
+        /** Muestra la × que vacía la selección cuando hay valor (default `true`); emite `coClear`. */
         this.clearable = true;
         /** Shows a pencil button on the single-value trigger that emits
          *  `coEditSelected` with the selected record id. The host owns policy
@@ -33,7 +36,9 @@ const CoRefField = class {
         this.editable = false;
         /** Accessible name / tooltip for the edit button. */
         this.editLabel = 'Edit';
+        /** Selección múltiple: la selección se pinta como chips y `value` es un JSON array de ids. */
         this.multiple = false;
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
@@ -61,9 +66,13 @@ const CoRefField = class {
         /** Total count of matching records from the API. */
         this.total = 0;
         // ── Search props ───────────────────────────────────────────
+        /** Buscador en el panel (default `true`); el filtrado lo hace el host al recibir `coSearch`. */
         this.searchable = true;
+        /** Placeholder del buscador del panel. */
         this.searchPlaceholder = 'Search…';
+        /** Espera en ms entre la última tecla y el `coSearch` (default 350). */
         this.searchDebounce = 350;
+        /** Texto del panel cuando no hay opciones. */
         this.emptyMessage = 'No results found';
         // ── Action props ───────────────────────────────────────────
         /** Show footer buttons (same pattern as co-combobox). */
@@ -523,7 +532,7 @@ const CoRefField = class {
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (index.h("div", { key: 'fa7de667cc9002d1a4a042b0d200524cbcb89b78', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'a6ddd5b71364e4f5bdf63b04faa09bfc0a32f6bc', class: "co-ref-field__labels" }, this.label && (index.h("label", { key: '766f803c8be77f72e52e4d3cdd7b6d7a363a146a', class: "co-ref-field__label" }, this.labelIcon && (index.h("co-icon", { key: 'a8b6c7f189af4b9f37de8c3cc96cb489fd9183e4', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, index.h(requiredMark.RequiredMark, { key: '643edcb040ef9a91040e8d52f628bc0af06c36ba', required: this.required }))), this.secondaryLabel && (index.h("span", { key: '7a107c578e003760423acc6d450f2a42a0868375', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: '9938ca629c5927156ea137adfefd1d927104312b', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '7618ea5fb13e4944596fd728cf934b5c28bd29ab', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (index.h("div", { key: '1dd9fc7659e8f8791bb4b785407b0e89b32107c8', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (index.h("co-icon", { key: '399674b95ebcc91581f1f1cea54451f8ee33d9da', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), index.h("span", { key: '640adc4e5cd4cd742a171cac1319b75489cb7ef8' }, this.helperText)))));
+        return (index.h("div", { key: 'a3aef08c94e307af533bd47f40d0a4a92fe27d24', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '77b6b86ec8180be67198551fdb85c005ff839e1d', class: "co-ref-field__labels" }, this.label && (index.h("label", { key: '19e162c60bff7a5e65744e21027ebf817bea2574', class: "co-ref-field__label" }, this.labelIcon && (index.h("co-icon", { key: '966f91705e5f5969361f86f9ef1ef613f458c610', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, index.h(requiredMark.RequiredMark, { key: 'b40e66babe9ebc1a812d429ec44711867817a35e', required: this.required }))), this.secondaryLabel && (index.h("span", { key: '59e005803c24da33bf561e861464128d6a19b0d5', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: 'b436e6ba857fd059dd15df3c83e9e321eceda17e', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: 'c13bb059934db87074ece6e42fb9913f69e4b81c', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (index.h("div", { key: 'e58d1a42f44382f1c1be244d69a89851f32aad85', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (index.h("co-icon", { key: '95544a78586c34901e3480f9c9b9c0f872362c12', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), index.h("span", { key: 'e536f2971bd27a87c5785ba7e950c29bd22bfeda' }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {