@prolibu-suite/cobalt-core 0.11.0 → 0.11.1

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

@@ -1,21 +1,34 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Campo de texto con sugerencias: al tipear emite `coSearch` (con debounce y
+ * `minChars`) y el host responde con `options`; elegir una sugerencia fija el
+ * valor. Para una lista conocida sin búsqueda remota usá `co-select` o
+ * `co-combobox`. Wrapper Vue: `CoAutocomplete` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoAutocomplete {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
+        /** Placeholder del input. */
         this.placeholder = 'Search…';
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Botón × para vaciar texto y selección (default `true`); emite `coClear` y `coChange`. */
         this.clearable = true;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
         /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
         this.size = 'md';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
         /** Pre-loaded or server-returned options */
         this.options = '[]';
+        /** Selección: `value` de la opción elegida; en `multiple`, array o JSON array. El componente lo actualiza. */
         this.value = '';
+        /** Selección múltiple: lo elegido se muestra como chips. */
         this.multiple = false;
+        /** El host está buscando: muestra un loader en la lista de sugerencias. */
         this.loading = false;
         /** Minimum characters before emitting coSearch */
         this.minChars = 1;
@@ -168,16 +181,16 @@ export class CoAutocomplete {
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: '0fad340e2daa5ee4b56e28325d5eaec4d60d7188', class: {
+        return (h("div", { key: '02fe5e70777f1a39038af676c76032ae1fbecbc8', class: {
                 'co-autocomplete': true,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
                 [`co-autocomplete--${this.size}`]: true,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'a724b6267fd6dbe267725f3619677e043843c96c', class: "co-autocomplete__labels" }, this.label && h("label", { key: '45c176c82f0967c6ff0f1f323d36834d247f8ac6', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '52940ac88fa7ba5f2b662990a66b0ad84d728ecc', required: this.required })), this.secondaryLabel && h("span", { key: '5eac2ccf44d59067f7ca070561c18c9b45b4cfc1', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '4837e011ac491a34efdfb84bd80f2baa52c4f451', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '1a46dba433dec3b8dec82b6d2e93cee0575f5673', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '95054c8e5ec371ba04f6fa5938d74babffef473f', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'a9237e72752d5d3921d70cb2d63a160625db7e62', class: "co-autocomplete__labels" }, this.label && h("label", { key: 'f1284520b961bf6598e4b9c8a3d943b8b1aa847f', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '6c40530c3e2dca2b3adef8a8ce00c256b7070b48', required: this.required })), this.secondaryLabel && h("span", { key: '37a0de4ba199f1bc6503543e18261623642c00cf', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '30ff3eacbf9634085b212135356c3edbef6e8df9', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '3b8c564aae36e7db59c39fcc31fda7d98f55fae8', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: 'df7f0b08d2b456a048368f80c828ee83502b0a20', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: '016887bf4fa1872bafd1ba60a7fb960ca89e8b76', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'eac7e752a8d8f18b866c5fe4283707e851355328', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'aac8dcfced13e8abf3bb6beb0fa56124814804ea', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8a5605cfe09eb17ca65c9fd97662ceec893431b7', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '7263c42e73656db3ee8d1c1c2f5f5cd941b0e40b', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: '32071562943c992b0013451c8b89da20590554cf', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '47ba4956d829c700700a7509e8fd2fc58dd6e4d9', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b4363e83a7258241d23f4911c1f6fb352330c19d', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '952777047bd27a6604daea9531f26ce5aab0c475', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        }))), h("input", { key: 'e2d9cfa48001c20aa9e8a4ef5800135172b2aff9', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'e58449cb033553a123f3c2b1daa9b9c62a571273', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'ea8021e0807cd0eece9933f84772f5f497d2a63c', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '67a2f961d0ece0178811aa04fd9e5a082976ef6a', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '562cc6f307edd60c361c60974d0423550d8f681a', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: '3dec3da0d38adb8986b57960c74b697ffbc211dd', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '5c21f62defe09b0160aeec8eaeaa881408dbe964', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '166ccdb5f1e308bb0212c473881bb36a33a8d2e4', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: 'bf4b038b665c269484b3bf841b19c92d5b0ceb27', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +218,7 @@ export class CoAutocomplete {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -244,7 +257,7 @@ export class CoAutocomplete {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta."
                 },
                 "getter": false,
                 "setter": false,
@@ -263,7 +276,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del input."
                 },
                 "getter": false,
                 "setter": false,
@@ -283,7 +296,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -303,7 +316,7 @@ export class CoAutocomplete {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor al inicio del input."
                 },
                 "getter": false,
                 "setter": false,
@@ -322,7 +335,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bot\u00F3n \u00D7 para vaciar texto y selecci\u00F3n (default `true`); emite `coClear` y `coChange`."
                 },
                 "getter": false,
                 "setter": false,
@@ -342,7 +355,7 @@ export class CoAutocomplete {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +414,7 @@ export class CoAutocomplete {
                 "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,
@@ -418,7 +431,7 @@ export class CoAutocomplete {
                     "references": {
                         "AutocompleteOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
                             "id": "src/components/co-autocomplete/co-autocomplete.tsx::AutocompleteOption"
                         }
                     }
@@ -447,7 +460,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n: `value` de la opci\u00F3n elegida; en `multiple`, array o JSON array. El componente lo actualiza."
                 },
                 "getter": false,
                 "setter": false,
@@ -467,7 +480,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple: lo elegido se muestra como chips."
                 },
                 "getter": false,
                 "setter": false,
@@ -487,7 +500,7 @@ export class CoAutocomplete {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El host est\u00E1 buscando: muestra un loader en la lista de sugerencias."
                 },
                 "getter": false,
                 "setter": false,
@@ -588,7 +601,7 @@ export class CoAutocomplete {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 la selecci\u00F3n (`value` ya est\u00E1 actualizado): `{ value, item }`. `value` = el elegido o\nel array en `multiple`; `null` (con `item: null`) al deseleccionar desde la lista;\n`''`/`[]` (con `item: null`) al vaciar con la \u00D7."
                 },
                 "complexType": {
                     "original": "{ value: string | string[] | null; item: { _id: string; label: string } | null }",
@@ -603,7 +616,7 @@ export class CoAutocomplete {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se vaci\u00F3 con la \u00D7; le sigue un `coChange`. Sin `detail`."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,3 +1,8 @@
+/**
+ * @prop --co-avatar-font-weight: Peso de las iniciales (default 500).
+ * @prop --co-avatar-border-color: Color del anillo interno (default transparente); `ringColor` lo fija por prop.
+ * @prop --co-avatar-border-width: Grosor del anillo interno (default 1px; 2px con `ringColor`).
+ */
 :host {
   display: inline-flex;
   /* Squircle (superellipse, n≈5) used to mask square avatars so their corners
@@ -18,7 +23,7 @@
   /* Figma «Avatars» (Geist Medium, 500; p. ej. 4515:158897 / 1135:103818): las
      iniciales van en Medium, no SemiBold — a 10-12px el 600 empasta la panza de
      la R y se lee «sucio» (2026-09-17).
-     Task C12: el var() es solo un hook para que un consumidor lo pise (mismo
+     El var() es solo un hook para que un consumidor lo pise (mismo
      patrón que --co-avatar-border-color/--co-avatar-size en este archivo); su
      fallback ES el default publicado (500). */
   font-weight: var(--co-avatar-font-weight, 500);
@@ -122,7 +127,7 @@ co-tooltip {
   line-height: 0;
 }
 
-/* Rounded = radio chico FIJO (Task C12), no la superelipse de --square: sin
+/* Rounded = radio chico FIJO, no la superelipse de --square: sin
    máscara squircle, border-radius simple sobre la caja rectangular real. */
 .co-avatar--rounded {
   border-radius: var(--co-border-radius-xs);

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

@@ -14,6 +14,13 @@ const FONT_SIZE_MAP = {
     xs: 'var(--co-font-size-12)',
     xxs: 'var(--co-font-size-10)',
 };
+/**
+ * Avatar de una persona o entidad: iniciales, ícono o imagen, en círculo,
+ * squircle o cuadrado de radio chico. Con `name` muestra el nombre completo en
+ * un `co-tooltip`. Wrapper Vue: `CoAvatar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part avatar - Caja del avatar (fondo, máscara y anillo).
+ */
 export class CoAvatar {
     constructor() {
         /** Display type: text shows initials, icon shows a Phosphor icon, image shows a picture */
@@ -24,7 +31,7 @@ export class CoAvatar {
         this.icon = 'user';
         /** Icon weight */
         this.iconWeight = 'regular';
-        /** Shape of the avatar. `rounded` (Task C12) = radio chico
+        /** Shape of the avatar. `rounded` = radio chico
          *  (`--co-border-radius-xs`), sin máscara squircle — esquinas de radio fijo,
          *  no la superelipse de `square`. */
         this.shape = 'circle';
@@ -226,7 +233,7 @@ export class CoAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Shape of the avatar. `rounded` (Task C12) = radio chico\n(`--co-border-radius-xs`), sin m\u00E1scara squircle \u2014 esquinas de radio fijo,\nno la superelipse de `square`."
+                    "text": "Shape of the avatar. `rounded` = radio chico\n(`--co-border-radius-xs`), sin m\u00E1scara squircle \u2014 esquinas de radio fijo,\nno la superelipse de `square`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/co-avatar-group/co-avatar-group.css

@@ -1,3 +1,7 @@
+/**
+ * @prop --co-avatar-group-overlap: Cuánto se superpone cada avatar al anterior (default 6px).
+ * @prop --co-avatar-group-ring-width: Grosor del anillo que separa los avatares (default 2px).
+ */
 /* co-avatar-group — overlapping stack of co-avatar with a "+N" overflow badge */
 
 :host {

package/dist/collection/components/co-avatar-group/co-avatar-group.js

@@ -12,6 +12,11 @@ const FONT_SIZE_MAP = {
     xs: 'var(--co-font-size-12)',
     xxs: 'var(--co-font-size-10)',
 };
+/**
+ * Pila de avatares superpuestos con un «+N» para los que no entran (`max`).
+ * `items` describe cada avatar (tipo, texto, imagen, color). Wrapper Vue:
+ * `CoAvatarGroup` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoAvatarGroup {
     constructor() {
         /** Avatar descriptors rendered as an overlapping stack. */
@@ -56,13 +61,13 @@ export class CoAvatarGroup {
                 onClick: this.activate,
             }
             : { role: 'group' };
-        return (h(Tag, Object.assign({ key: 'efe3aa5c3a13c33d220caf93f8ce7dfc929f9833', class: {
+        return (h(Tag, Object.assign({ key: '7e14b71d5b7391c15fcba50aa43964fdf65282e3', class: {
                 'co-avatar-group': true,
                 'co-avatar-group--interactive': this.interactive,
             } }, interactiveAttrs), visible.map((it, i) => {
             var _a, _b, _c;
             return (h("co-avatar", { key: i, class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor, name: it.name || it.text || '' }));
-        }), extra > 0 && (h("co-tooltip", { key: 'b6dffe856f5984d2e2731e84d9d4a46cfcfa0c7b', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: 'b7fe90ee1800ede2bdc3b8674d6ab0dcdfa4ac48', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
+        }), extra > 0 && (h("co-tooltip", { key: 'f3cc2f5a9f1ceac07ea3b665e6bd0c87804d27ae', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: 'c0b5fcb8df88917b06a2a9b36f1c2798f10730ff', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
     }
     static get is() { return "co-avatar-group"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +92,7 @@ export class CoAvatarGroup {
                     "references": {
                         "CoAvatarGroupItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
                             "id": "src/components/co-avatar-group/co-avatar-group.tsx::CoAvatarGroupItem"
                         }
                     }

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

@@ -1,4 +1,11 @@
 import { h } from "@stencil/core";
+/**
+ * Indicador pequeño de conteo o de estado (punto) con color semántico; con
+ * `animated` hace un pop de entrada. Wrapper Vue: `CoBadge` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part badge - El indicador.
+ */
 export class CoBadge {
     constructor() {
         /**
@@ -17,7 +24,7 @@ export class CoBadge {
         this.animated = false;
     }
     render() {
-        return (h("span", { key: 'be0a55884e7afcf9761712b0318ad46f54a82786', class: {
+        return (h("span", { key: 'b22315d54caf4150b599d5a8b576a08e68f8bfea', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.js

@@ -13,6 +13,15 @@ import { slotHasContent } from "../../utils/slotContent";
  * @slot header - Custom header content (overrides `heading`). Dragging it moves the sheet.
  * @slot        - Sheet body (scrollable).
  * @slot footer - Pinned action area below the body (outside the scroll), with safe-area padding.
+ *
+ * Wrapper Vue: `CoBottomSheet` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part backdrop - Fondo oscuro detrás de la hoja.
+ * @part sheet - La hoja.
+ * @part handle - Tirador superior.
+ * @part header - Encabezado (título o slot `header`).
+ * @part body - Cuerpo scrolleable.
+ * @part footer - Área de acciones fija al pie.
  */
 export class CoBottomSheet {
     constructor() {
@@ -250,17 +259,17 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: '9afac86d3b0bdab25d92b283b079304b2801fdcf', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: 'bc0152d32c577d2aafadcdcaae065aacb7442350', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '457847247df72eb810149148e0a02a13152b86c1', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.hasHeaderSlot
+        return (h("div", { key: '43f05669ad96312f6bd2ee1c1d4698538f029e2c', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '86040a5efd513a6c06bbe551f82bcdc619817ea3', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '46155a318f952b9be717a47497f1f513d3cf970f', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.hasHeaderSlot
                 ? 'co-bottom-sheet-header'
                 : this.heading
                     ? 'co-bottom-sheet-heading'
-                    : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'b4acb6f614163fafe7c29c40664a646788cdb05b', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'f72127311b1e3bf8939eac0bc227b98f8418e6f7', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'ba1be5188eb0e6eb3a0add620be5da8a99e65978', class: {
+                    : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: '8b4a140b235f9803f71fb8717763651557ec6ca6', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '0c61ae9e1faf72485cf5b8c529041f740831d3a1', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'cd7116cd2b12c66e6cde63753dab12eaab31d04c', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header", id: "co-bottom-sheet-header" }, h("slot", { key: '53ab489d36588e8c7e604d16ae63b871a62cc833', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '4519555ec9333f9c0af56e86cc67f7bad914e1b5', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '141df16f223b8a82fc1f412466669f999cbdba8a', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '5299c10f8854ee5f32794608502777e08dc9cec7' })), h("footer", { key: 'b3ec3a0aa7779829783aea2d64fde9b2199ed73c', class: {
+            }, part: "header", id: "co-bottom-sheet-header" }, h("slot", { key: '8343901cfdb86eef24e3bbc7e7a9d270eeed6ed0', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '31874876e8fb9db7cf7ae57f3f704a569d4fb797', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '126a26708b6d4b70c8bb74f6a4cd7fe43f74e725', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'c8f5034ea3de0265d05203befc31e961f8340694' })), h("footer", { key: 'a2d40f9d6056df561388fa213995595a84044cd1', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: 'd97f14b88decd35ccfbb4cc7e4f63446ef30a4b5', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: '0d97eb87bc4de74db631629a478bd01ce5a473a6', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "co-bottom-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,10 @@ import { Host, h } from "@stencil/core";
  * leading icon (hidden on the first crumb via CSS), so no separator markup is
  * interleaved here. This component propagates its `separator` prop down to the
  * slotted items and layouts them in a `align-items:center; gap:4px` flex row.
+ *
+ * @part breadcrumb - El propio elemento (`role="navigation"`), fila de migas.
+ *
+ * Wrapper Vue: `CoBreadcrumb` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoBreadcrumb {
     constructor() {
@@ -42,7 +46,7 @@ export class CoBreadcrumb {
     }
     render() {
         const data = this.parseItems();
-        return (h(Host, { key: 'c57f833d27edfc2848a8f72de1805968e9536b72', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: 'e368c6a9c2842ee88e66d72d33164653b623616b', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
             ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
             : h("slot", { onSlotchange: this.handleSlotChange })));
     }

package/dist/collection/components/co-breadcrumb-item/co-breadcrumb-item.js

@@ -9,6 +9,12 @@ import { Host, h } from "@stencil/core";
  *
  * Conventions mirror `co-menu-item`: the `current` crumb paints medium weight +
  * text-default ink; earlier crumbs are regular weight + muted (gray-500).
+ *
+ * Wrapper Vue: `CoBreadcrumbItem` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Contenido propio en lugar de `label`.
+ * @part breadcrumb-item - Contenedor de la miga (separador + contenido).
+ * @part content - Parte clickeable (ícono y texto).
  */
 export class CoBreadcrumbItem {
     constructor() {
@@ -29,10 +35,10 @@ export class CoBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: '6cb113e8326d6fa5fe9ee23dcd8083ab4664d343', part: "breadcrumb-item", class: {
+        return (h(Host, { key: 'e751e769b86efb5c9f929f818c6a7a020beeace6', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '9031f0d3558c5ce7dcf298d6e2b04059dd463a34', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '143800da5211dd7bdb1e3b06de8c90fbb8f94acf', name: this.separator, size: 13 })), h("span", { key: '23b11ae5ed8315fcf84ed83609b7d98c0142f50b', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'e70f21819a4e9bc117282b062399960810256c1e', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'ed942c739f1c67cd0b27facc2eabd1d016391719', name: this.icon, size: 16 }))), h("span", { key: '0b2c28119d1123196d313015e3020a82618b932f', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'c83fcd1764b279aed0b9c4a1c791b47d011d711f' })))));
+            } }, h("span", { key: '65c70c55e16037e97c35c3ad65548b8e15d1e07d', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '8e70db08814fa611cacd2e78bb96ece6a2d5e9db', name: this.separator, size: 13 })), h("span", { key: 'acc0e0a8a5b6e18aac7af27f4b5971bb4f5ed054', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '4f22d7482c0a70b3973c2a66d1ba84db4c07445d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'b16cbcbe67336c57230929f45985262ebb6ae093', name: this.icon, size: 16 }))), h("span", { key: '4dd03fea8de55ace99325fa57afdcb47c9b36e54', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'ec8a0a40d2e1ccbabde80b724eb5a473e123ac7d' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,11 @@
+/**
+ * @prop --co-button-border-color: Color del borde, en todas las variantes (gana sobre `--co-button-border`).
+ * @prop --co-button-border: Borde de la variante `secondary` (knob anterior; `--co-button-border-color` le gana).
+ * @prop --co-button-bg: Superficie de la variante `secondary` (se mezcla al 55% con transparencia).
+ * @prop --co-button-color: Color de texto de la variante `secondary`.
+ * @prop --co-button-radius: Radio del botón con `shape="rounded"` (default pill).
+ * @prop --co-button-icon-color: Color de los íconos de `icon-left`/`icon-right` (default: el del texto).
+ */
 :host {
   display: inline-flex;
 }
@@ -39,7 +47,7 @@
      blurear y el 78% de negro colapsa a un gris lavado. */
   background: var(--co-semantic-surface-primary);
   color: var(--co-semantic-on-primary);
-  /* --co-button-border-color (Task C2): override transversal; el fallback es
+  /* --co-button-border-color: override transversal; el fallback es
      el valor propio de la variante, así el default no cambia sin la var. */
   border-color: var(--co-button-border-color, color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent));
 }
@@ -233,7 +241,7 @@
   .co-button--stroke { background: transparent; }
 }
 
-/* ═══ Task C2 (Fase 2 Cobalt) — size="sm", variant="soft", full-width,
+/* ═══ Tallas y variantes del editor — size="sm", variant="soft", full-width,
    --co-button-border-color / --co-button-icon-color. Todo lo de abajo es
    aditivo: no reemplaza ni recalcula ninguna regla de arriba. ═══ */
 

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

@@ -1,17 +1,23 @@
 import { h } from "@stencil/core";
 const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14, sm: 16 };
 /**
+ * Botón de acción con texto e íconos opcionales. `variant` define el peso
+ * visual (`primary` para la acción principal), `size` la talla y `full-width`
+ * lo estira al ancho del contenedor. Wrapper Vue: `CoButton` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot - Button label text
+ * @part button - El `<button>` nativo interno.
  */
 export class CoButton {
     constructor() {
-        /** Visual style. "soft" (Task C2, Fase 2 Cobalt): fondo gray-100 sólido, sin backdrop-filter — pensado para toolbars/paneles del editor. */
+        /** Visual style. "soft": fondo sólido `--co-semantic-surface-control` (gray-100 en claro), sin backdrop-filter — pensado para toolbars y paneles del editor. */
         this.variant = 'primary';
         /** Shape: pill or straight corners */
         this.shape = 'rounded';
-        /** Size. "sm" (Task C2, Fase 2 Cobalt): 32px fijo — escala unificada de tallas nuevas del editor (xs=24/s=28/sm=32). */
+        /** Size: `l`, `m` (default), `s`, `xs`; `sm` = 32px fijo, de la escala compacta del editor (xs=24/s=28/sm=32). Un valor fuera de la lista no da error: el botón queda sin estilos de talla (sin padding ni tamaño de fuente). */
         this.size = 'm';
-        /** Ocupa el 100% del ancho del contenedor (Task C2, Fase 2 Cobalt). Reflejado como atributo `full-width`. */
+        /** Ocupa el 100% del ancho del contenedor. Reflejado como atributo `full-width`. */
         this.fullWidth = false;
         /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
         this.elevated = false;
@@ -57,7 +63,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: 'a095e308b3bea917ecfb4da4f78e9a6c9e3dfba2', class: {
+        return (h("button", { key: 'e77a3b67e23b2690a818e6ad9aa38b21b4c8f972', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -67,7 +73,7 @@ export class CoButton {
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabelText || undefined, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '7a7dfff6e1dc249b423477263e9140183290bf18' }, this.label), this.iconRight
+            : null, h("slot", { key: 'ee52eb057c04ee3e1f5a5b2e87dc778a338d9887' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -97,7 +103,7 @@ export class CoButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style. \"soft\" (Task C2, Fase 2 Cobalt): fondo gray-100 s\u00F3lido, sin backdrop-filter \u2014 pensado para toolbars/paneles del editor."
+                    "text": "Visual style. \"soft\": fondo s\u00F3lido `--co-semantic-surface-control` (gray-100 en claro), sin backdrop-filter \u2014 pensado para toolbars y paneles del editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -137,7 +143,7 @@ export class CoButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size. \"sm\" (Task C2, Fase 2 Cobalt): 32px fijo \u2014 escala unificada de tallas nuevas del editor (xs=24/s=28/sm=32)."
+                    "text": "Size: `l`, `m` (default), `s`, `xs`; `sm` = 32px fijo, de la escala compacta del editor (xs=24/s=28/sm=32). Un valor fuera de la lista no da error: el bot\u00F3n queda sin estilos de talla (sin padding ni tama\u00F1o de fuente)."
                 },
                 "getter": false,
                 "setter": false,
@@ -157,7 +163,7 @@ export class CoButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Ocupa el 100% del ancho del contenedor (Task C2, Fase 2 Cobalt). Reflejado como atributo `full-width`."
+                    "text": "Ocupa el 100% del ancho del contenedor. Reflejado como atributo `full-width`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/co-button-group/co-button-group.js

@@ -1,4 +1,10 @@
 import { h } from "@stencil/core";
+/**
+ * Grupo de `co-button` unidos en una fila o columna, con variante y talla
+ * compartidas. Wrapper Vue: `CoButtonGroup` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Los `co-button` del grupo.
+ */
 export class CoButtonGroup {
     constructor() {
         /** Visual variant applied to the group container */
@@ -7,15 +13,16 @@ export class CoButtonGroup {
         this.size = 'm';
         /** Orientation */
         this.direction = 'row';
+        /** Deshabilita el grupo entero (atenuado y sin clicks). */
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '5975d27cfd432bfd859212059c4bc79d2d8107d2', class: {
+        return (h("div", { key: '2240bc00c44e532340b3ae288cc9df099b9e1846', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '90c9338e9d00c71ae09189ebd0e70d8fa11e3825' })));
+            }, role: "group" }, h("slot", { key: '0a719f1a5f21883f5923cd9f20a818f467339846' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -103,7 +110,7 @@ export class CoButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el grupo entero (atenuado y sin clicks)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,11 @@
+/**
+ * @prop --co-calendar-day-size: Lado de cada celda de día (default 36px; 44px en táctil).
+ * @prop --co-calendar-width: Ancho del calendario (default: el de sus 7 celdas).
+ * @prop --co-calendar-col: Ancho de cada columna de la grilla (default: la celda).
+ * @prop --co-calendar-day-width: Ancho del botón de día (default: la celda).
+ * @prop --co-calendar-marked-bg: Fondo de los días de `markedDates` (default rosado de marca).
+ * @prop --co-calendar-marked-fg: Color del número en los días marcados (default blanco).
+ */
 :host {
   display: inline-block;
   font-family: var(--co-font-family-primary);

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

@@ -14,6 +14,8 @@ import { dayAriaLabel, normalizeMarkedDates, normalizeStringArray, parseViewMont
  * chosen date. Today and selected are deliberately different visual states.
  *
  * @part root - The calendar container
+ * Wrapper Vue: `CoCalendar` de `@prolibu-suite/cobalt-vue`.
+ *
  * @part header - Month navigation header
  * @part grid - The day grid
  */
@@ -386,7 +388,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'd093188dc77cea7856a4126828167ccd0e97a28a', class: "co-calendar", part: "root" }, h("div", { key: '9b133e1e7c2538df80ae86d463ac80bd2262364c', class: "co-calendar__header", part: "header" }, h("button", { key: 'c7b5f9407556ab1c68815c2896ee3ea6d87866ee', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'e76e3550772f7456d44fca6229a92146f4849ffc', name: "caret-left", size: 16 })), h("button", { key: '7e8d2620e5d73f8ab17a0e6f163e4fc7859db0b9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '0f113778ee2f22843627a0fb6f0550e7fd861774', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'e49b124dadf06b2a5bf7f25aab160a80f4d1a539', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'e1993eddaa8a0c33179e453dadd4996f2d5fd4fc', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '5ecdc23692eb69b8dc86b225857f51a3acf54838', class: "co-calendar", part: "root" }, h("div", { key: 'b66924b6b59f91d284210c6a0ed24294f211a5b7', class: "co-calendar__header", part: "header" }, h("button", { key: 'a4d52f3c02081b03f872a95955986c6351f9ca44', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '6eaf089247fc85477a1bd9095af2c1c557d01bb3', name: "caret-left", size: 16 })), h("button", { key: '473815fa6114c82f601bea27e919b5c4546648f2', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '923647a98317c5e42ec7655ac21eed3e645224b6', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '1ccbdf76cc5574021894f8f1c6bd381b9b524cfa', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '4b06c0827034a9f6924f1e80a51fdef924a0f8d1', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }