@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

package/dist/collection/components/co-row/co-row.js

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  * @slot prefix  - Leading content (icon, checkbox)
  * @slot         - Main content
  * @slot suffix  - Trailing content (switch, badge, action)
+ *
+ * Wrapper Vue: `CoRow` de `@prolibu-suite/cobalt-vue`.
+ * @part row - La fila.
  */
 export class CoRow {
     constructor() {
@@ -13,11 +16,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: 'd82c1b834c4c6825da02a0112d78a8e5a6d12219', class: {
+        return (h("div", { key: '077025b2a73f8440400c27923f1d3a7e38cfb346', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '33ae6da740cd01f7b81ed2b76cdba355a9e3e3d2', class: "co-row__prefix" }, h("slot", { key: '9f646baf5b45b931042504b18bc683332f000f6a', name: "prefix" })), h("div", { key: '3c5648a7b0b326ad4c5a547a4ce6f158b85150ec', class: "co-row__content" }, h("slot", { key: '56384849d661312ffd659de530ffb4735fb943c2' })), h("div", { key: 'bf8d524a890d724db01d3216d9128bb00aa9011d', class: "co-row__suffix" }, h("slot", { key: '41aa4471ed0d20f925944e2ef850c0b8f8ec8607', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '2ffc2d8e5c0ab4779a5599736c877097039fd47f', class: "co-row__prefix" }, h("slot", { key: 'b6cb185d5f1bb577f78d19b9f78fce1be52c5252', name: "prefix" })), h("div", { key: 'f2a34f5554a832d6ae5030bb1138488928025d43', class: "co-row__content" }, h("slot", { key: 'a8ad430becc2e285e4fec43b16a6e29ba9088f8a' })), h("div", { key: '7fef31caadd3fb43571286a2ee13cf42ebbf8d78', class: "co-row__suffix" }, h("slot", { key: '63465e56defc9a0c11bc5a1eba46ac7f150d67fb', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-segmented-bar/co-segmented-bar.js

@@ -3,6 +3,12 @@ import { h } from "@stencil/core";
  * A stacked, multi-segment meter — a pill track split into N contiguous
  * colored segments (e.g. a storage breakdown). Display-only; colors are
  * supplied by the consumer. Provide an external legend via `slot="legend"`.
+ * Wrapper Vue: `CoSegmentedBar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot legend - Leyenda externa bajo la barra.
+ * @part segmented-bar - Contenedor del componente.
+ * @part track - La pista (pastilla) que contiene los segmentos.
+ * @part segment - Cada segmento de color.
  */
 export class CoSegmentedBar {
     constructor() {
@@ -43,13 +49,13 @@ export class CoSegmentedBar {
     render() {
         const segments = this.parsedSegments;
         const total = this.total > 0 ? this.total : 100;
-        return (h("div", { key: 'f7301a9d7e31e6b3fbf6037fb2425b1701af171e', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '22f3063c1db26411e6c0b5e18f1d9249fcf05ca5', class: {
+        return (h("div", { key: '17f9d7dbccca7bf7dbcd3907094712da67b74f97', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '18747edfd30a3bf84e071570e8280b6d783c6c46', class: {
                 'co-segmented-bar__track': true,
                 [`co-segmented-bar__track--radius-${this.radius}`]: true,
             }, part: "track", style: { height: `${this.thickness}px`, background: this.trackColor } }, segments.map((seg, i) => (h("span", { key: i, class: "co-segmented-bar__segment", part: "segment", title: seg.label, style: {
                 width: `${(seg.value / total) * 100}%`,
                 background: seg.color,
-            } })))), h("slot", { key: '3eb6275c7f248d3f93d24f5e44c1c30e6eb4f019', name: "legend" })));
+            } })))), h("slot", { key: 'd04d1e4ade89c3b1e8e20486aceadf994c310092', name: "legend" })));
     }
     static get is() { return "co-segmented-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -154,7 +160,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
                             "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
                         }
                     }

package/dist/collection/components/co-select/co-select.css

@@ -671,7 +671,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   overflow: auto;
 }
 
-/* co-select — simple dropdown select (no search) */
+/**
+ * @prop --co-select-menu-padding: Padding del panel desplegable (acepta shorthand; default 8px).
+ * @prop --co-select-menu-gap: Separación entre filas del panel (default 0). La lista virtual la lee al abrir.
+ * @prop --co-select-option-height: Alto fijo de fila (default: sin alto fijo, mínimo 32px). La lista virtual lo lee al abrir.
+ * @prop --co-select-option-padding: Padding de la fila (default 8px 12px).
+ * @prop --co-select-option-gap: Separación entre check/ícono y texto de la fila.
+ * @prop --co-select-option-font-size: Tamaño del texto de la opción (default 14px).
+ * @prop --co-select-option-font-weight: Peso del texto de la opción (default 400).
+ * @prop --co-select-caret-size: Tamaño del ícono de apertura del trigger (default 16px).
+ * @prop --co-select-caret-color: Color del ícono de apertura del trigger.
+ */
+
+/* co-select — dropdown select (búsqueda opcional con `searchable`) */
 
 :host {
   display: block;

package/dist/collection/components/co-select/co-select.js

@@ -3,19 +3,36 @@ import { RequiredMark } from "../../utils/requiredMark";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { highlightSegments, rankByMatch } from "../../utils/normalizeText";
 import { LEGACY_ROW_METRICS, resolveRowMetrics, scrollTopToReveal, virtualSlice } from "./virtualRows";
+/**
+ * Selector desplegable de una o varias opciones de una lista conocida, con
+ * búsqueda opcional del lado del cliente y lista virtualizada. Para opciones que
+ * vienen paginadas del servidor usá `co-ref-field`. Wrapper Vue: `CoSelect` de
+ * `@prolibu-suite/cobalt-vue`.
+ */
 export class CoSelect {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
+        /** Texto del trigger sin selección. */
         this.placeholder = 'Select…';
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Botón × para vaciar la selección cuando hay valor; emite `coClear` y `coChange`. */
         this.clearable = false;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
+        /** Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de strings
+         *  (value = label), o ese mismo array como JSON desde HTML. */
         this.options = '[]';
+        /** Selección: el `value` de la opción en single; en `multiple`, array o JSON array.
+         *  `''` significa «sin selección» (una opción con `value: ''` no se puede marcar).
+         *  El componente lo actualiza al elegir. */
         this.value = '';
+        /** Selección múltiple: el panel queda abierto y `value`/`coChange` llevan un array. */
         this.multiple = false;
+        /** Alto del trigger: `xs` 24 · `s` 28 · `sm` 32 · `md` 40 (default) · `lg` 48. Un valor fuera de la lista cae al default. */
         this.size = 'md';
         /** Visual style. `flat` strips the trigger's border and background so it
          *  reads as plain content instead of a boxed control — padding, label,
@@ -37,7 +54,9 @@ export class CoSelect {
         this.menuSurface = 'light';
         /** Show a search box inside the dropdown to filter options client-side. */
         this.searchable = false;
+        /** Placeholder del buscador del panel (`searchable`). */
         this.searchPlaceholder = 'Search…';
+        /** Texto del panel cuando la búsqueda no encuentra opciones. */
         this.emptyText = 'No results';
         /** Footer de confirmación al pie del panel (paridad co-combobox/co-ref-field). */
         this.showFooter = false;
@@ -528,7 +547,7 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: 'f81d018b6e9057cca5f558a40a66a67429efca39', class: {
+        return (h("div", { key: '12cb506f80422c39f8f5a17b81afa6c01831f237', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
@@ -537,22 +556,22 @@ export class CoSelect {
                 'co-select--flat': this.variant === 'flat',
                 'co-select--soft': this.variant === 'soft',
                 'co-select--inline-help': this.labelStyle === 'inline-help',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b8875d28b27b28f35ea679451e05f384e247a590', class: "co-select__labels" }, this.label && h("label", { key: '8267dfe3118bc0abdfc7d7f69df3f4f508ec0f85', class: "co-select__label" }, this.label, h(RequiredMark, { key: '7171c44a6cc349fcc1015135f59b3cf00a41ed68', required: this.required })), this.secondaryLabel && h("span", { key: '64ac3ddf910b79290f1fae86ecfc302923fe5c38', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '06e574f6d59174e09c819b768c25220f0d07f80d', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'bbb454e9d0ab08fd3abf5462711654c6eb8fe253', class: "co-select__labels" }, this.label && h("label", { key: '2dbf39a9e4fca24b95777078ecb6fea060aa2e19', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'f5a62c06aa12a5556fc78d93918d673982183dfa', required: this.required })), this.secondaryLabel && h("span", { key: '2082ba20405dee16a08d35ec1ff67b59294056a0', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '4f7e00909286922ff2b9d05f1ee4f42f8bc7aed9', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
             // menuSurface="dark": el panel oscuro pinta su propio chrome (fondo
             // negro, radio xs, sin borde ni sombra — Figma 4750:23242), así que
             // el co-popover va `bare` para no sumar el borde hairline ni la
             // sombra del panel claro (y cualquier --co-popover-shadow heredada
             // del contexto). En "light" (default) no cambia nada.
-            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '2e5530aabda382b68dca90c65cb3c908403d3ae1', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '7c1f995379b3d775905d586023248fa9a6c7673c', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '0b22e952aac603604d80d670ff142147852d9e6c', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '8537fcefbd02707af785ad623bcb1f19b276d3c4', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '6714adb30bb2c24824cf80048b579a05825652b9', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '8c0c6cca536a5edba4e3caa50ecd196f9e70117c', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '6373aacf7257463c045b5ca7f3df2436ca69e0a5', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'cb76f5e754e330553833c9c242b70323595bb16c', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'abadb4134656649cf72ffbdb3f4438058bdfca15', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'c83a9bd2367dfcbb75e42c2e5640c2ebf5cf6e5b', class: {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '65f1295511998e7ec9685ee45433e01c14ae65df', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '23416924a88739bf6326095298bfaaeabbe980e1', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'd4c3c23b8ceb6ef0b918348e8b0f724051380681', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'd591730000ed4e58f6c2474b58949ae15cf65593', class: {
                 'co-select__dropdown': true,
                 'co-select__dropdown--dark': this.menuSurface === 'dark',
-            } }, this.isOpen && this.searchable && (h("div", { key: 'df705652347737ed23ec60d4f6c0bfd8d7debd5a', class: "co-select__search" }, h("co-icon", { key: '8a59fced83b93044ed59c804f17c056c262845f1', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '648f16cc6bdd726ae0c3e00be4957c9578dac035', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '2548a14f6a7a47c74467ad3f61c7950df242616d', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'f09eaf5dbdfa2cf73ddb6e3e4560dd72e7cc26a4', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+            } }, this.isOpen && this.searchable && (h("div", { key: 'd663fdb315d997ed2325a5c385bbd5728bebdaa1', class: "co-select__search" }, h("co-icon", { key: '13d5e0bd54b6dfa6d926f7e9ec2057f814720e16', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'e7edfe009febe2c681c47fa92105b62c868b53d5', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'bd0befdaba2cbead771171b609e2021c714ea247', class: "co-select__empty" }, this.emptyText)), h("div", { key: '0e395475bba6b693419986ff2cf582192a15a2e6', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (
             // Los wrappers del virtualizador van `presentation` para que las
@@ -568,7 +587,7 @@ export class CoSelect {
                         'co-select__option--active': index === this.activeIndex,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
             }))));
-        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'a8ccc1cfac2642b880653a16f19fc768f45050b3', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '2ba1d5f26b6c64b81257658b0f5774b1480e3a82', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'd5fb9bf114c88f281ca50026dc12b25fc64f2660', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '70ad047f17a30c7e5d06026ca8dfeda603be312e', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'b5991f9a23e145990ba8d1a01f67c1744165aa36', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '04d08f975108f5f86dcbf4078271cbb16c47f4c6', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '26ab3e89c81d4c64aef536f561921d5c3f08ea62', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '0743ba35903d666a3ab4598e4639e8c0f94a190b', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -596,7 +615,7 @@ export class CoSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo (tambi\u00E9n es su nombre accesible)."
                 },
                 "getter": false,
                 "setter": false,
@@ -654,7 +673,7 @@ export class CoSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta (p. ej. \u00ABOpcional\u00BB); con `labelStyle=\"inline-help\"` va a la derecha."
                 },
                 "getter": false,
                 "setter": false,
@@ -673,7 +692,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del trigger sin selecci\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -693,7 +712,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -713,7 +732,7 @@ export class CoSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor al inicio del trigger."
                 },
                 "getter": false,
                 "setter": false,
@@ -751,7 +770,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bot\u00F3n \u00D7 para vaciar la selecci\u00F3n cuando hay valor; emite `coClear` y `coChange`."
                 },
                 "getter": false,
                 "setter": false,
@@ -771,7 +790,7 @@ export class CoSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -810,7 +829,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: pinta el borde y el `helperText` con el color del estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -827,7 +846,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }
@@ -836,7 +855,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de strings\n(value = label), o ese mismo array como JSON desde HTML."
                 },
                 "getter": false,
                 "setter": false,
@@ -856,7 +875,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n: el `value` de la opci\u00F3n en single; en `multiple`, array o JSON array.\n`''` significa \u00ABsin selecci\u00F3n\u00BB (una opci\u00F3n con `value: ''` no se puede marcar).\nEl componente lo actualiza al elegir."
                 },
                 "getter": false,
                 "setter": false,
@@ -876,7 +895,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple: el panel queda abierto y `value`/`coChange` llevan un array."
                 },
                 "getter": false,
                 "setter": false,
@@ -896,7 +915,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto del trigger: `xs` 24 \u00B7 `s` 28 \u00B7 `sm` 32 \u00B7 `md` 40 (default) \u00B7 `lg` 48. Un valor fuera de la lista cae al default."
                 },
                 "getter": false,
                 "setter": false,
@@ -996,7 +1015,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del buscador del panel (`searchable`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1016,7 +1035,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del panel cuando la b\u00FAsqueda no encuentra opciones."
                 },
                 "getter": false,
                 "setter": false,
@@ -1084,7 +1103,7 @@ export class CoSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 la selecci\u00F3n (`value` ya est\u00E1 actualizado): `detail` = value elegido, o el\narray completo en `multiple`. Al vaciar con la \u00D7: `''` (o `[]`)."
                 },
                 "complexType": {
                     "original": "string | string[]",
@@ -1099,7 +1118,7 @@ export class CoSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se vaci\u00F3 la selecci\u00F3n con la \u00D7. Sin `detail`; le sigue un `coChange`."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/co-separator/co-separator.js

@@ -1,4 +1,11 @@
 import { h } from "@stencil/core";
+/**
+ * Línea divisoria horizontal o vertical, con espaciado e inset opcionales y
+ * color/grosor configurables por prop. Wrapper Vue: `CoSeparator` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part separator - La línea.
+ */
 export class CoSeparator {
     constructor() {
         /** Orientation: horizontal (default) or vertical */
@@ -57,7 +64,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '5ec10f688fd0c97ce0d5ec38487dce4ecac6801a', class: {
+        return (h("hr", { key: '1b15a22f07b7bf656d9b20b53d602bc7d47e3cf2', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

package/dist/collection/components/co-sidebar/co-sidebar.js

@@ -1,5 +1,13 @@
 import { h } from "@stencil/core";
 /**
+ * Barra lateral de navegación con cabecera, cuerpo de ítems y pie. Wrapper Vue:
+ * `CoSidebar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part sidebar - La barra completa.
+ * @part header - Área del slot `header`.
+ * @part body - Área de navegación (slot por defecto).
+ * @part footer - Área del slot `footer`.
+ *
  * @slot header - Logo / branding area
  * @slot        - Navigation items (co-list-item, etc.)
  * @slot footer - Bottom section
@@ -10,10 +18,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '2bd29e3c2289513b465e2fdb9f77fb12285810c1', class: {
+        return (h("nav", { key: 'de782225d3dc1ef1def8af333a2a81809b50a84d', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: 'eefb2332e89165064c0b81f4da901a7609600069', class: "co-sidebar__header", part: "header" }, h("slot", { key: '756485fbd108582d8909e7ff361f09582b2888d3', name: "header" })), h("div", { key: '2b7022ed173af8cb95cf0c9d0459ceb16bd4824c', class: "co-sidebar__body", part: "body" }, h("slot", { key: '96d09dd7282bb121388af3b500939adaa25b69e4' })), h("div", { key: '3ea395c4e7c98243bd5eb688e062c4e0d046b8fb', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '8412a6b2f15e99138bd566f224b10ea52b6b691e', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '7c4466bf0d14cba9ca008d0a1cf9c28972726301', class: "co-sidebar__header", part: "header" }, h("slot", { key: '1389f2fa757adcd7b97586534de4144f9b08d1a7', name: "header" })), h("div", { key: '298ea9f0183bb31b0a4b6d83053029b8f181fb7d', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'f1c0c4b26b4be0441048f7f961529ce5371d4c6d' })), h("div", { key: '62666b4e1b9591c70196fccb73caf683925de906', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '83566f1745b802296b7db7b90032a3ca13849126', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.css

@@ -1,3 +1,8 @@
+/**
+ * @prop --co-sidebar-nav-active-bg: Fondo del ítem activo (default surface-hover).
+ * @prop --co-sidebar-nav-active-color: Color de texto e ícono del ítem activo (default azul de marca).
+ * @prop --co-sidebar-nav-active-bg-min: Fondo del ítem activo con `mode="min"` (default: el de `--co-sidebar-nav-active-bg`).
+ */
 /* =============================================================================
    co-sidebar-nav — Full sidebar navigation component
    Renders categories, expansions, and leaf items from a JSON menu structure.

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -189,6 +189,7 @@ const DEFAULT_ICON_MAP = {
  * A complete sidebar navigation component that renders a hierarchical menu.
  * Accepts the raw `uiSchemas.sideBar` JSON from the Prolibu API and
  * automatically renders categories, expandable groups, and leaf items.
+ * Wrapper Vue: `CoSidebarNav` de `@prolibu-suite/cobalt-vue`.
  *
  * @example
  * ```html
@@ -511,10 +512,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: '247f01543c2bc200826c2be8d9913d748e0e741b', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d1610da26b8b8dc473b9b7baa3a1eedac275f38', class: {
+        h(Host, { key: 'ef90beff11ad03c2cf4e13b74c9898cca380e8eb', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'cc9788f795e8ac66b4143195e7ffa3c4efe58bc1', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'd6bcbf4478818bdc84d29b3e6186fc72122e2864', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'c77b51b21c0d5d70ff90213f3c7a5bc0e104bdec', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -717,7 +718,7 @@ export class CoSidebarNav {
                     "references": {
                         "NavigateDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
                             "id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
                         }
                     }

package/dist/collection/components/co-skeleton/co-skeleton.js

@@ -2,6 +2,9 @@ import { h } from "@stencil/core";
 /**
  * Placeholder de carga con shimmer (sweep). Componer apilando varios.
  * Respeta prefers-reduced-motion (sin animación).
+ * Wrapper Vue: `CoSkeleton` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part skeleton - El bloque con el shimmer.
  */
 export class CoSkeleton {
     constructor() {
@@ -50,7 +53,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '737eaa6e7ec7581151eda26ba506193d6c0ed6e5', class: {
+        return (h("div", { key: '26e69f4c94f59664827c617fa3d54983ac56cd1d', class: {
                 'co-skeleton': true,
                 [`co-skeleton--${this.variant}`]: true,
                 'co-skeleton--revealed': this.revealed,

package/dist/collection/components/co-slider/co-slider.css

@@ -1,5 +1,12 @@
 /* co-slider */
 
+/**
+ * @prop --co-slider-thumb-size: Diámetro exterior del thumb, borde incluido (default 24px).
+ * @prop --co-slider-thumb-border: Grosor del aro del thumb; crece hacia adentro (default 2px).
+ * @prop --co-slider-track-thickness: Grosor del riel: alto en horizontal, ancho en vertical (default 4px).
+ * @prop --co-slider-vertical-length: Largo del riel con `orientation="vertical"` (default 120px).
+ */
+
 :host {
   display: block;
   font-family: var(--co-font-family-primary);

package/dist/collection/components/co-slider/co-slider.js

@@ -1,11 +1,23 @@
 import { h } from "@stencil/core";
+/**
+ * Control deslizante para elegir un número dentro de un rango, horizontal o
+ * vertical (volumen: el máximo arriba). `coInput` es la vista previa mientras se
+ * arrastra y `coChange` confirma una vez al terminar el gesto. Wrapper Vue:
+ * `CoSlider` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoSlider {
     constructor() {
+        /** Estado de validación: colorea el `helperText`. */
         this.status = 'default';
+        /** Valor actual; el componente lo actualiza al arrastrar o con el teclado. */
         this.value = 0;
+        /** Mínimo del rango (default 0). */
         this.min = 0;
+        /** Máximo del rango (default 100). */
         this.max = 100;
+        /** Paso entre valores (default 1); también el paso de las flechas. */
         this.step = 1;
+        /** Deshabilita el control. */
         this.disabled = false;
         /** Show current value label */
         this.showValue = true;
@@ -251,13 +263,13 @@ export class CoSlider {
     render() {
         const pct = this.percentage;
         const vertical = this.isVertical;
-        return (h("div", { key: 'b06be1f1e7d51c4daa472d191976572b53ef9d95', class: {
+        return (h("div", { key: '4993b9d6827cdda362ce482151bffaf84c916442', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 'co-slider--vertical': vertical,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'a5521722b6acab7644d18398dd98998d63b67c56', class: "co-slider__labels" }, h("div", { key: 'a5c9898337f548be34108f9295a8f8392ed75696', class: "co-slider__labels-left" }, this.label && h("label", { key: '55381c63ffc6baf11cd11e70ec7b2e8917b7c339', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '7eb00d9872a003ec6a379351d0a45ecf81e6087e', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'dc36252a28b06664ec3087873a46cf36524c3dcb', class: "co-slider__value" }, this.value))), h("div", { key: '6cfa5a0a001dd7606862ffe01657004205bb7b4b', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'c2b3554422d040f38a8d776f2c059661f6fecf9c', class: "co-slider__track" }, h("div", { key: '07946bf60392b55450ddeb751d65e0ff521e8766', class: "co-slider__fill", style: vertical ? { height: `${pct}%` } : { width: `${pct}%` } })), h("div", { key: '5b44ccb7c5940487c81008b98c05c33f2aaf7dda', class: "co-slider__thumb", style: vertical ? { bottom: `${pct}%` } : { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'd53df80a2ec227dca30d71b0e1917de062056d94', class: "co-slider__marks" }, h("span", { key: '519ab6e39389806151785265163d4d06492b8ce0', class: "co-slider__mark" }, this.min), h("span", { key: '779111260623acfdd87bc83266e9c47ae5e653fe', class: "co-slider__mark" }, this.max))), h("input", { key: '56f7f648079ef0777368b93e078c782be0ce5bdc', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, onKeyDown: vertical ? this.handleVerticalKeyDown : undefined, "aria-label": this.ariaLabelText || this.label || 'Slider', "aria-orientation": vertical ? 'vertical' : undefined }), this.helperText && (h("div", { key: '83511ef3eaeaa9dd73e21141708786bfb3937f9f', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b82ab2938322bdd9711b1a2dbd024be22c9f1238', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'bd35dbcc7063061ed5aac0cb635ea69217624bd9', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '707c5bda972f1c1c3a45d6716f1a7b1debc2e9ee', class: "co-slider__labels" }, h("div", { key: '2ea2bd4c5e9eafcc8e87214134ad3ee4881b990f', class: "co-slider__labels-left" }, this.label && h("label", { key: '8a509cbaaae01919f3e29627492762021bc6b001', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '9ac5b791724b1f106c0d50bea0eef55367187dcb', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '77fd3b3c5db03128a19fc37797832e334a31a9cd', class: "co-slider__value" }, this.value))), h("div", { key: '8d16d1b89ea5c4f0226787482f4cf307cefb5f99', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2d74659caca41e9255fe792e3b172e3cd6e4f3d9', class: "co-slider__track" }, h("div", { key: '169501854773b01341072f8024d89e665ed5527e', class: "co-slider__fill", style: vertical ? { height: `${pct}%` } : { width: `${pct}%` } })), h("div", { key: 'a1ea0b12371df5f0df4204a6be870fcf70141c43', class: "co-slider__thumb", style: vertical ? { bottom: `${pct}%` } : { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8e8d55e60e058b1336c9819c11100c3e82f56097', class: "co-slider__marks" }, h("span", { key: '0e6b74aed9a56f40147a8e96290834c3e51d82c4', class: "co-slider__mark" }, this.min), h("span", { key: '4b735e6e20f5d49f5ab6047129b43e05210c5726', class: "co-slider__mark" }, this.max))), h("input", { key: 'ddbb917734f98c92564477b502f29f51f2c492ca', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, onKeyDown: vertical ? this.handleVerticalKeyDown : undefined, "aria-label": this.ariaLabelText || this.label || 'Slider', "aria-orientation": vertical ? 'vertical' : undefined }), this.helperText && (h("div", { key: '68ba7ef8a27b006011ad0d1beba1cd9557103f8a', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '99f8b511f7de45809967a8a7588d8d736365247e', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '22f3ecf666b54d2bf5c97816c1b8253a7c6b233b', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -285,7 +297,7 @@ export class CoSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta visible; tambi\u00E9n da el nombre accesible si no hay `ariaLabelText`."
                 },
                 "getter": false,
                 "setter": false,
@@ -323,7 +335,7 @@ export class CoSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta (p. ej. la unidad)."
                 },
                 "getter": false,
                 "setter": false,
@@ -342,7 +354,7 @@ export class CoSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el control."
                 },
                 "getter": false,
                 "setter": false,
@@ -361,7 +373,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: colorea el `helperText`."
                 },
                 "getter": false,
                 "setter": false,
@@ -381,7 +393,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Valor actual; el componente lo actualiza al arrastrar o con el teclado."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +413,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00EDnimo del rango (default 0)."
                 },
                 "getter": false,
                 "setter": false,
@@ -421,7 +433,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00E1ximo del rango (default 100)."
                 },
                 "getter": false,
                 "setter": false,
@@ -441,7 +453,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Paso entre valores (default 1); tambi\u00E9n el paso de las flechas."
                 },
                 "getter": false,
                 "setter": false,
@@ -461,7 +473,7 @@ export class CoSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el control."
                 },
                 "getter": false,
                 "setter": false,
@@ -545,7 +557,7 @@ export class CoSlider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Confirma el valor: una vez al terminar el gesto (si hubo alg\u00FAn `coInput`) y en cada paso de teclado. `detail` = n\u00FAmero."
                 },
                 "complexType": {
                     "original": "number",
@@ -560,7 +572,7 @@ export class CoSlider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Vista previa mientras se arrastra, solo cuando el valor cambia. `detail` = n\u00FAmero."
                 },
                 "complexType": {
                     "original": "number",

package/dist/collection/components/co-swatch-grid/co-swatch-grid.js

@@ -11,6 +11,7 @@ const DEFAULTS = { columns: 8, swatchSize: 24, gap: 8, radius: 6 };
  *
  * Los colores claros (luminancia WCAG > 0,85) reciben un borde automático
  * para no fundirse con el fondo del panel.
+ * Wrapper Vue: `CoSwatchGrid` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoSwatchGrid {
     constructor() {
@@ -85,7 +86,7 @@ export class CoSwatchGrid {
         // Roving tabindex: una sola parada de tab (el seleccionado, o el primero).
         const tabbableIndex = selected >= 0 ? selected : 0;
         this.swatchEls = [];
-        return (h("div", { key: 'be71436bd099c18cb537f1f992582da31c56a675', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
+        return (h("div", { key: '37b221ff9dbebc184310f1cd51d539b833876adf', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
                 if (el)
                     this.swatchEls[i] = el;
             }, class: {