@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

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

@@ -1,5 +1,9 @@
 /* Figma: 44×24px track, radius-full, thumb 20×20px white circle */
 
+/**
+ * @prop --co-switch-label-gap: Separación entre el interruptor y la etiqueta.
+ */
+
 :host {
   display: inline-flex;
   font-family: var(--co-font-family-primary);

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

@@ -1,5 +1,14 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Interruptor on/off para activar o desactivar una opción al instante, con
+ * etiqueta y texto secundario. Wrapper Vue: `CoSwitch` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part track - Riel del interruptor.
+ * @part thumb - Círculo que se desplaza.
+ * @part label - Etiqueta.
+ * @part secondary-label - Texto secundario bajo la etiqueta.
+ */
 export class CoSwitch {
     constructor() {
         /** Whether the switch is on */
@@ -29,16 +38,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: 'cb5bdf31569ecb25bc8511d6aed95b8479439449', class: {
+        return (h("div", { key: 'ea7d325ff800a4f4db50c46cc4d2198cd9fd4417', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '455228c9ab3e7dbb15f491771d645ae2d535ab00', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '4aef8c522cbeacea52921c691d0dd13c1431eb99', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'a1f781028f45bdb9aa7d7dfc23e16b0f7fdc6eea', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '97177558e46e8fd58636339ac3a2c6990a473cfe', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '14d1298fda1435774c9e2c2c7f0c520a38ee56fd', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '092325cff854533520244d8bb783e917fcfc5827', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '354f905fe663ecfab517f251adfd8a956f598244', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7c79bc7214fc1dfa4188d7d3c7c67014e54d2892', required: this.required })), this.secondaryLabel && (h("span", { key: '66d5b233028700c142c9b5122a448ade37dd941f', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '7ee1c73c19a4cc030489e21e444b0a6caecb7d5a', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '089f18ba17c3b72e9368241593e39d54bdeb3b1e', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '082109f28c774a2f53290cd7e168347ab3e35b8a', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '0227ea14f20b836226e5c9af5115c09bbec833d6', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '4abd7d4ca1a3defc7c77c5ea3f79cb615e651c53', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '255b45047435c01f5b99c66c123faa19c4ac2f0e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7d1754be733fed89bd5cdb57175a68bd84bcb59b', required: this.required })), this.secondaryLabel && (h("span", { key: 'd790d306315a1ffa5601c775133de433f708e3ea', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '0fa80b2cea84d461d1bd95d598cf56b3c021c487', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f8b55daf30cdad200f57baa316c841acd2387e7', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '297f6d425ebc33eb752d140df2aa6aa4288dfe37', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * Pestaña individual; va dentro de un `co-tab-group`, que le propaga `variant`,
+ * `size` y `fullWidth` y marca `selected` según su `value`. Wrapper Vue: `CoTab`
+ * de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part tab - El botón de la pestaña.
+ * @part badge - Contador junto al texto (`badge`).
+ */
 export class CoTab {
     constructor() {
         /** Tab label */
@@ -7,9 +15,9 @@ export class CoTab {
         this.value = '';
         /** Whether this tab is active/selected */
         this.selected = false;
-        /** Size. 'large'/'small' son los tamaños históricos (pill/underline). 's' (28px)
-            y 'xs' (26px, excepción D-19 a la escala unificada) solo tienen chrome propio
-            en `variant="segmented"` — ver co-tab.css. */
+        /** Tamaño: `large`/`small` (default) son los de las variantes pill y underline;
+         *  `s` (28px) y `xs` (26px) solo tienen estilo propio en `variant="segmented"`.
+         *  Dentro de un `co-tab-group` con `size`, el grupo lo fija. */
         this.size = 'small';
         /** Visual variant: filled pill (default), underline tab, or segmented-control pill */
         this.variant = 'pill';
@@ -31,13 +39,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '61f50639e0a59faa103390bd34b478bbe947bb90', class: {
+        return (h("button", { key: '7b388ddd5338499064d43f30c0fa854d0be6773c', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '6148d93a09063c8bcaf31969657aaef573818469', name: this.iconLeft, size: iconSize })), h("span", { key: 'f0103e87ab5978dc77b30ab161122565b11b8675' }, this.label), this.badge && (h("span", { key: '76ed839028bbf536ea0ae3dde81d959e3f2c9fa1', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'd2fa1dec20135e2466a3ad546590216e1f7eb4a1', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'ae4c8bd29005e3d51a882eb1104b5e63a6ef69e5', name: this.iconLeft, size: iconSize })), h("span", { key: '6617a4e1af257a3b9d847a77915f202560940733' }, this.label), this.badge && (h("span", { key: 'a2b327941ab6e7578113b5ef05a2e3725132fcb0', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '8a41a7df2c8f37c281c97bf4ab3c81f8ea476a45', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -125,7 +133,7 @@ export class CoTab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size. 'large'/'small' son los tama\u00F1os hist\u00F3ricos (pill/underline). 's' (28px)\ny 'xs' (26px, excepci\u00F3n D-19 a la escala unificada) solo tienen chrome propio\nen `variant=\"segmented\"` \u2014 ver co-tab.css."
+                    "text": "Tama\u00F1o: `large`/`small` (default) son los de las variantes pill y underline;\n`s` (28px) y `xs` (26px) solo tienen estilo propio en `variant=\"segmented\"`.\nDentro de un `co-tab-group` con `size`, el grupo lo fija."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,5 +1,14 @@
 import { h } from "@stencil/core";
 import { revealScrollLeft, tabEdgesInTrack } from "./revealTab";
+/**
+ * Grupo de pestañas (`co-tab`) que controla cuál está activa: `value` marca la
+ * pestaña, al elegir otra se actualiza y emite `coTabChange`. Propaga `variant`,
+ * `size` y `fullWidth` a sus pestañas y, si desbordan, lleva la activa a la
+ * vista. Wrapper Vue: `CoTabGroup` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Los `co-tab` del grupo.
+ * @part tab-group - La pista que contiene las pestañas.
+ */
 export class CoTabGroup {
     constructor() {
         /** Visual variant, propagated to slotted co-tab children */
@@ -125,11 +134,11 @@ export class CoTabGroup {
         }
     }
     render() {
-        return (h("div", { key: 'a68d2cecdbce222f14100ebbde2b49001cb799f3', class: {
+        return (h("div", { key: 'e226f6ba6da4566f95011d121a176697218ffaba', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
                 [`co-tab-group--size-${this.size}`]: !!this.size,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '321c8f8b5110a818d34d1eaccb60fc416e5ad57a', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '93689e301da64a7ca850571cb623c339294c2122', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tags-field/co-tags-field.js

@@ -21,15 +21,22 @@ import { FieldChip } from "../../utils/fieldChip";
  * @part input - The native text input
  * @part clear - The clear-all button
  * @part helper - The helper/error text row
+ *
+ * Wrapper Vue: `CoTagsField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoTagsField {
     constructor() {
         /** Committed value as a JSON array of strings (or an actual `string[]`). */
         this.value = '[]';
+        /** Placeholder del input para escribir un tag nuevo. */
         this.placeholder = '';
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Solo lectura: muestra los tags sin permitir agregar ni quitar. */
         this.readonly = false;
+        /** Botón × que quita todos los tags (default `true`); emite `coClear`. */
         this.clearable = true;
         /** Allow the same value to be added more than once. */
         this.allowDuplicates = false;
@@ -186,14 +193,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '1ef89376f12003afa4250411b6dee524412ff880', class: {
+        return (h("div", { key: '81725f6d5bd9c22fa799825abf44d1e71a34b33a', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '31156258ceeee2b6086c53a27cdeb7fce2658e76', class: "co-tags-field__labels" }, h("label", { key: '0263770cef191ed7517011d12e5c8508be6e4ebd', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '358289e81e6cdafb0e1eca09de82ca7d46280f8f', required: this.required })))), h("div", { key: '72997e42dd6596f716df5a7c19dbe8e897244b00', class: "co-tags-field__field-row" }, h("div", { key: '1a2357d85e58cf87fb7aa24014e6fd25c69666db', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '58e7f2d2ead8c6624e03b8bf3a5dbdcbd171671c', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: 'c5c913633aa37306acccbd0ca15abb3e265a60cd', class: "co-tags-field__labels" }, h("label", { key: '5898720b85700f9d6f3567c1399806bfa3e28d2d', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c95129fbedfa41a2d735bc4f912f4a98b83c796f', required: this.required })))), h("div", { key: '940a2cd420b5b2e1cb981c21ff2df0957b7c39d6', class: "co-tags-field__field-row" }, h("div", { key: 'a100b3644ac42d71034d99be426d594b37275e71', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '3eac2458a1cf8e4bdbad67c57f323cfa4d7a5c85', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +208,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '4528c6c129e2a398e1e711aa292643b29bf636c3', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '3279bfa9651cc45c702567f0c1323562b338775d', class: {
+                : undefined }))), showInput && (h("input", { key: '4bda12b201fd72a40a3b6edd900373890d2d84be', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1dedc650b5688bdd820e5253bad57c5a6c5a1725', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '69a902c55a325c4b559ebf050d8d7de03e0b2074', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'eaec02e8a0af3cb98020a621d7ceae38107c9cdf', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '602738e23f55dea8388fa73760e5b612be24dc21', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '21dcfc3fe3e72ba8d1557fcd9a9c3d4c774e942e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '7f829d899b73f76f8a66ce5766e0906756ebb5fa', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'c5a053f84171586ca0902815996430359647aadf', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '4950c001e2604cd0dc35d4f4def640d89e18129e', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '5b2456911fe3aa83cca47781817a4a38258749d7', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'fcdb85825b3b54b126ed055832bd1e509901ca87', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '8f6845e58e30c2f5a62f715b7e9b4b12566c4402', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +262,7 @@ export class CoTagsField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +281,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del input para escribir un tag nuevo."
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +301,7 @@ export class CoTagsField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Atributo `name` del input nativo."
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +320,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +340,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +360,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra los tags sin permitir agregar ni quitar."
                 },
                 "getter": false,
                 "setter": false,
@@ -373,7 +380,7 @@ export class CoTagsField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bot\u00F3n \u00D7 que quita todos los tags (default `true`); emite `coClear`."
                 },
                 "getter": false,
                 "setter": false,
@@ -582,7 +589,7 @@ export class CoTagsField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El input gan\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",
@@ -597,7 +604,7 @@ export class CoTagsField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El input perdi\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -13,6 +13,11 @@ import { Host, h } from "@stencil/core";
  *
  * @slot icon - Reemplaza el `co-icon` por defecto (renderizado a partir de
  *              `icon`/`iconSize`) por contenido propio del consumidor.
+ *
+ * @part tile - La tarjeta.
+ * @part label - La etiqueta bajo el ícono.
+ *
+ * Wrapper Vue: `CoTile` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoTile {
     constructor() {
@@ -61,7 +66,7 @@ export class CoTile {
         return !this.disabled && e.target === this.el;
     }
     render() {
-        return (h(Host, { key: '7b6d2066f36837c836bcac75c98c7472451a3b0a', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: '275cc5dd82f17bc1380b52ee88780844d7937692', class: "co-tile", part: "tile" }, h("slot", { key: '9418db0eba2a388829f3245bf51392583e60eec1', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: 'c235396aca36babd67c68c3e1363931f21c285cb', class: "co-tile__label", part: "label" }, this.label))));
+        return (h(Host, { key: '407cbb0c7c2f76d206f17233450ad4f7148d4860', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: '73b397c1f2a4bd4f5a964b223ced9809f9c5f19c', class: "co-tile", part: "tile" }, h("slot", { key: 'e4b5b8a6855e838d51efd2d503cb893d68d6c2d3', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: '3b356385347ea64b2a80289b592fa4f1244e60af', class: "co-tile__label", part: "label" }, this.label))));
     }
     static get is() { return "co-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-time-field/co-time-field.js

@@ -28,6 +28,8 @@ function dayPeriodLabels(locale) {
  * (co-date-time-picker: coInput→draft, coCommit→commit+close).
  * `coEscape` = anuncio de intención; el picker NO lo wirea — ver
  * co-date-time-picker.tsx (Escape lo posee su root handler).
+ *
+ * Wrapper Vue: `CoTimeField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoTimeField {
     constructor() {
@@ -35,7 +37,9 @@ export class CoTimeField {
         this.value = null;
         /** Reloj de 12 h. `false` = 00–23 sin segmento de período. */
         this.hour12 = true;
+        /** Locale BCP-47: textos del período (a. m./p. m.) y nombres accesibles de los segmentos. */
         this.locale = 'es-CO';
+        /** Deshabilita el campo. */
         this.disabled = false;
         /** Paso de PageUp/PageDown sobre el minuto. */
         this.pageStep = 15;
@@ -154,6 +158,7 @@ export class CoTimeField {
         this.hour24 = Math.floor(m / 60);
         this.minute = m % 60;
     }
+    /** Enfoca el segmento de la hora. */
     async focusInput() {
         var _a;
         (_a = this.hourEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -313,7 +318,7 @@ export class CoTimeField {
     }
     render() {
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '375a0cd95c1ee8a3b2851f5b327c2d30be9220e7', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'c87319645a6394877a35061abdfcef3d15931443', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '15ae5505e3cbff685ae53bf0d8b4a87e9e3c15af', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '0ab99ad2423f8ee2330074679019ec0b76e59de0', class: "co-time-field__steppers" }, h("button", { key: 'ae2e8581f575b5d734bfd81c8f2f3d12da5751a0', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '5186d550bd67c6d13d0c60b3a301a58e85effbbf', name: "caret-up", size: 10 })), h("button", { key: 'c8fbf199ab71e6bbd10a1ed570470befbe652f1e', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '19515539265a74798904e01e7692366574a8ca6b', name: "caret-down", size: 10 })))));
+        return (h("div", { key: 'b35cb03c86b6073d7af850316ef15754bedc059c', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'dd3325ea0193f0819f4e8c2341eab0c0671cf421', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '4bfae37879f6cb2fa00d26bdabdbdc04eb7701ad', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '196fcdc84979ee4631cefd208ef78b8d7a46d0c8', class: "co-time-field__steppers" }, h("button", { key: '1e2dbe2b2746048f6a1de6bdff3304180028bb90', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '7b3a75bfb9b8038667dc709b65b1b1ea8ebecc0e', name: "caret-up", size: 10 })), h("button", { key: '948ae31bfe775c72269ff2bbdea8839c15d2f076', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '357072a670ee75c74569bd59e6ea4bcdebf216ac', name: "caret-down", size: 10 })))));
     }
     static get is() { return "co-time-field"; }
     static get encapsulation() { return "shadow"; }
@@ -381,7 +386,7 @@ export class CoTimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Locale BCP-47: textos del per\u00EDodo (a. m./p. m.) y nombres accesibles de los segmentos."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +406,7 @@ export class CoTimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -520,7 +525,7 @@ export class CoTimeField {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Enfoca el segmento de la hora.",
                     "tags": []
                 }
             }

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

@@ -1,3 +1,14 @@
+/**
+ * Cada variante las reasigna en el elemento interno, así que se sobrescriben vía
+ * `co-toast::part(toast) { --co-toast-bg: … }`.
+ * @prop --co-toast-bg: Fondo de la tarjeta.
+ * @prop --co-toast-border: Color del borde.
+ * @prop --co-toast-text: Color del mensaje.
+ * @prop --co-toast-text-secondary: Color de la descripción.
+ * @prop --co-toast-icon: Color del ícono inicial.
+ * @prop --co-toast-dismiss-bg: Fondo del botón ✕.
+ * @prop --co-toast-dismiss-color: Color del ícono del botón ✕.
+ */
 :host {
   display: block;
 

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

@@ -8,6 +8,11 @@ const DEFAULT_ICON = {
 };
 const ALERT_VARIANTS = ['error', 'warning'];
 /**
+ * Notificación breve con mensaje, descripción opcional, ícono, acciones y ✕,
+ * con variantes semánticas y barra de progreso opcional. Es solo la tarjeta:
+ * mostrarla, apilarla y ocultarla es del host. Wrapper Vue: `CoToast` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot action - Action area (buttons, icon buttons)
  *
  * Figma variants (Tipos) are layout choices:
@@ -17,6 +22,10 @@ const ALERT_VARIANTS = ['error', 'warning'];
  * - Tipo=04 → message + inline icon action + dismiss
  *
  * Semantic `variant` adds a colored left accent + tinted icon + default icon when none provided.
+ *
+ * @part toast - Tarjeta del toast.
+ * @part track - Riel de la barra de progreso (`progress`).
+ * @part fill - Relleno de la barra de progreso.
  */
 export class CoToast {
     constructor() {
@@ -76,8 +85,8 @@ export class CoToast {
             'co-toast--progress': hasProgress,
             'co-toast--in': this.entered,
         };
-        const content = (h("div", { key: '5b3b8dadd6bd941ddf25040eb57312a70e145e70', class: "co-toast__content" }, h("span", { key: '76f47b49b5e901085a5fdcd924070f6c25b0a7bf', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f229757cd675ae71df88adcab2cec65edbcb0411', class: "co-toast__description" }, this.description))));
-        return (h("div", { key: '1beb456e9e1ddc4be05de95757cd161bd3df913c', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '40a22c4eef4c1c1f0238fb2a37eb1e837a40a571', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '8f540383dea5dc817808be67047b5ea0f41c9516', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '5c48be7ff509be0656e204b195bc0420b6cc1d13', class: "co-toast__actions" }, h("slot", { key: 'fbc1a01ad868662991dd078873231ea2ee4cdd18', name: "action" })))), !isStacked && (h("div", { key: 'ba679ff96baf4e45c9c662c5b58a0eada104733d', class: "co-toast__actions" }, h("slot", { key: '33cf02247d346fcee55b5eb277d4230452017ee0', name: "action" }))), this.dismissible && (h("button", { key: 'ab7c8d00ea6763a1d7c9a12ae24b3a0c29dbc65f', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'b865eb66ffaffe8e1930cbc07a240e47ff276aef', name: "x", size: 16 })))));
+        const content = (h("div", { key: '77bab740efb16eb862d74d3a072baa0399ac5cdc', class: "co-toast__content" }, h("span", { key: '5677e36f94c873b634e211aa7918ed44ace21b34', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'ca564a3e80564ac91a260d288f38a2ce28db66bb', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: 'd065c88d1d5e6465dab56a2fd59849051e0682d8', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: 'ee73223250c29067ee3e1a40140a3f8ef44aed4f', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '5aad9debc4e7b0a319e50b0f75ef10ac0b903a73', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: 'f7b7332e1dd67f2f4b1a2d5b97785f8f9593f14f', class: "co-toast__actions" }, h("slot", { key: 'c4238c8ee27dc2211419f0c8af77021cb7a35ec2', name: "action" })))), !isStacked && (h("div", { key: '06b844a254ecd51dcb21c9cf84f2a7e5094a08bc', class: "co-toast__actions" }, h("slot", { key: 'c15f765d10ae12b38d081f3ad4b403c98ecd54c5', name: "action" }))), this.dismissible && (h("button", { key: '52482f3d953e68c7b6108bdedb889aa136739316', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '9c92e6bcc6ef0bc346a1f9104d382af5bf50c3a6', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +189,7 @@ export class CoToast {
                     "references": {
                         "CoToastActionsLayout": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
                         }
                     }
@@ -206,7 +215,7 @@ export class CoToast {
                     "references": {
                         "CoToastVariant": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastVariant"
                         }
                     }

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

@@ -1,5 +1,10 @@
 /* co-toggle-button */
 
+/**
+ * @prop --co-toggle-button-width: Ancho del botón (default auto); útil para pastillas de ancho fijo.
+ * @prop --co-toggle-button-radius: Radio del botón (default según la talla); se sobrescribe sobre el elemento.
+ */
+
 :host {
   display: inline-flex;
   /* Squircle radius, size-aware — mirrors co-button shape="square".

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

@@ -9,6 +9,7 @@ const SIZES = new Set(['l', 'm', 's', 'xs']);
 const groupSizeApplies = (variant, size) => SIZES.has(size !== null && size !== void 0 ? size : '') && (variant === 'soft' || (variant === 'track' && size === 'xs'));
 /**
  * co-toggle-button — pastilla de un `co-toggle-button-group`.
+ * Wrapper Vue: `CoToggleButton` de `@prolibu-suite/cobalt-vue`.
  *
  * @part button - El `<button>` interno. El hook para lo que el CSS deja
  *                hardcodeado y no tiene prop, empezando por su
@@ -20,7 +21,9 @@ const groupSizeApplies = (variant, size) => SIZES.has(size !== null && size !==
  */
 export class CoToggleButton {
     constructor() {
+        /** Activado (reflejado). El click lo invierte; dentro de un `co-toggle-button-group` lo coordina el grupo. */
         this.selected = false;
+        /** Valor que identifica al botón dentro de su grupo y que viaja en `coToggle`. */
         this.value = '';
         /** Talla del botón. Si no se indica (ni atributo ni propiedad) y el botón
          *  está dentro de un `co-toggle-button-group` con `variant="soft"` (cualquier
@@ -32,6 +35,7 @@ export class CoToggleButton {
          *  adopta UNA vez, al montar: cambiar después el `size` del grupo no
          *  re-talla a los botones ya montados (el editor lo fija estáticamente). */
         this.size = 'm';
+        /** Deshabilita el botón. */
         this.disabled = false;
         /** Visual variant. 'track' renders the button as a detached rounded pill for a
          *  sunken toggle-button-group track. 'soft' renders it as a separated gray-100
@@ -83,7 +87,7 @@ export class CoToggleButton {
             ? this.size === 'xs' ? 14 : 18
             : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: '3828e83bec19f945ca1ee06eb1c9ba5a6744c6c9',
+        return (h("button", { key: 'a0b0aa7d128e4ee66a91a223851b126684d8e997',
             /* El `<button>` vive en shadow DOM: sin `part` el consumidor no podía
                tocarlo desde afuera — ni su `justify-content: center`, que está
                hardcodeado en el CSS (el editor terminó moviendo el texto a un slot
@@ -95,7 +99,7 @@ export class CoToggleButton {
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'd3406d430fedc50ee415434a5a66f58322f4005d', name: "leading" }), this.iconLeft && h("co-icon", { key: '127a0993ae5ede97325fa357920f6681e2188b22', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '5219aec0d041d9d1b71496aeb0e608eeca08c4b3', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'f90dc967120e060e9de331239e8b531fee859164', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'd683a91a68fb3820a01b8bd91dc3b81b8d8994f0', name: "leading" }), this.iconLeft && h("co-icon", { key: '6894633951caa68a614824af931a33dc46a552ab', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '96d902f0f28a8ea8a810425cf775ff6a9437be4d', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4e5db3f34af24fffce2ec95e4a7767c82768db39', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +127,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Activado (reflejado). El click lo invierte; dentro de un `co-toggle-button-group` lo coordina el grupo."
                 },
                 "getter": false,
                 "setter": false,
@@ -143,7 +147,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Valor que identifica al bot\u00F3n dentro de su grupo y que viaja en `coToggle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -163,7 +167,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto del bot\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,7 +186,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor antes del texto."
                 },
                 "getter": false,
                 "setter": false,
@@ -201,7 +205,7 @@ export class CoToggleButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00CDcono Phosphor despu\u00E9s del texto."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +244,7 @@ export class CoToggleButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el bot\u00F3n."
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +302,7 @@ export class CoToggleButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en el bot\u00F3n: `{ value, selected }` con el estado nuevo."
                 },
                 "complexType": {
                     "original": "{ value: string; selected: boolean }",