@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,9 +1,26 @@
 import { h } from "@stencil/core";
+/**
+ * Botón que solo muestra un ícono. Como no tiene texto visible, `label` es
+ * obligatorio (es su nombre accesible) y conviene envolverlo en un `co-tooltip`.
+ * Wrapper Vue: `CoIconButton` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part button - El `<button>` nativo interno.
+ *
+ * @slot - Glifo propio (p.ej. un `<svg>` inline de 16px) que ocupa el lugar del
+ *         `co-icon` cuando NO se pasa `icon`. Va dentro del `<button>`, así que
+ *         hereda `color`/`currentColor`, la opacidad de hover/disabled, el
+ *         `:active` y el color de `selected` sin trabajo extra; mide lo mismo
+ *         que mediría el `co-icon` de esa talla (o `iconSize`) vía
+ *         `--co-icon-button-glyph-size`. Con `icon` el slot no se monta (DOM
+ *         idéntico al de siempre). El glifo proyectado no aporta nombre
+ *         accesible: pasar `label` siempre.
+ */
 export class CoIconButton {
     constructor() {
         /**
          * filled = dark background (negro), outlined = light background (blanco + border),
-         * ghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark).
+         * ghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark),
+         * soft = fondo gris sólido (--co-color-gray-100), sin borde visible, sin frost.
          * Matches Figma: Secundario → filled, Primario → outlined
          */
         this.variant = 'filled';
@@ -30,6 +47,26 @@ export class CoIconButton {
         this.toggled = false;
         /** Icon weight */
         this.iconWeight = 'regular';
+        /**
+         * Estado de selección (transversal, gana sobre cualquier `variant`): fondo/color
+         * de acento. Reflejado para que `:host([selected])` sea estilable desde afuera y
+         * marca `aria-pressed="true"` en el `<button>` (ausente cuando no está selected,
+         * en vez de "false", para no alterar el árbol de accesibilidad por defecto).
+         */
+        this.selected = false;
+        /**
+         * Ocupa el espacio disponible del contenedor flex (`flex: 1 1 0; min-width: 0`) en
+         * vez del ancho fijo por `size` — para filas de N botones repartidos en el 100%.
+         */
+        this.fluid = false;
+        /**
+         * Agrega un `caret-down` de 8px a la derecha del icono principal (botones-disclosure).
+         * Ensancha la caja +8px (el alto no cambia) para que el caret no le robe espacio
+         * al icono (un `padding-right` con `box-sizing: border-box` y ancho fijo por talla
+         * encogería el área de contenido en vez de agrandar la caja). Sin `caret`, el
+         * DOM/CSS quedan idénticos al comportamiento anterior.
+         */
+        this.caret = false;
     }
     render() {
         var _a, _b;
@@ -37,23 +74,41 @@ export class CoIconButton {
             xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
         const resolvedIconSize = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ((_b = iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24);
+        // --co-icon-button-radius unifica el radio: mismo fallback que ya tenía el
+        // boxStyle inline, pero ahora personalizable también en el path de `boxSize`.
+        const radiusFallback = this.shape === 'square' ? 'var(--co-border-radius-xs, 8px)' : 'var(--co-border-radius-full)';
+        // Con `caret`, el ancho crece +8px (el alto NO — el caret es más angosto que
+        // alto) para que el caret quepa sin robarle espacio al contenido existente
+        // (con box-sizing:border-box, un padding-right no agranda la caja, la
+        // encoge — de ahí el bug de overflow en xs/xxs que esto corrige). Espejo del
+        // fix por talla en el .css (`.co-icon-button--caret.co-icon-button--<size>`).
         const boxStyle = this.boxSize != null
             ? {
-                width: `${this.boxSize}px`,
+                width: `${this.caret ? this.boxSize + 8 : this.boxSize}px`,
                 height: `${this.boxSize}px`,
-                borderRadius: this.shape === 'square'
-                    ? 'var(--co-border-radius-xs, 8px)'
-                    : 'var(--co-border-radius-full)',
+                borderRadius: `var(--co-icon-button-radius, ${radiusFallback})`,
             }
             : undefined;
-        return (h("button", { key: '0dc2858366d546995a30d0dac2ed6db5d80943c9', class: {
+        // Modo slot (sin `icon`): el glifo proyectado debe medir lo mismo que
+        // mediría el co-icon de esta talla (o `iconSize`). Se publica como custom
+        // property inline SOLO en este modo, así el botón con `icon` no gana un
+        // atributo `style` que antes no tenía (DOM byte-idéntico). El CSS la
+        // consume en `::slotted(*)`.
+        const usesSlot = !this.icon;
+        const style = usesSlot
+            ? Object.assign(Object.assign({}, (boxStyle !== null && boxStyle !== void 0 ? boxStyle : {})), { '--co-icon-button-glyph-size': `${resolvedIconSize}px` }) : boxStyle;
+        return (h("button", { key: 'd04a7878b984d9613603801b0b18285d02e71f7e', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
                 [`co-icon-button--${this.size}`]: true,
                 'co-icon-button--dark': this.surface === 'dark',
+                'co-icon-button--selected': this.selected,
+                'co-icon-button--caret': this.caret,
                 'co-icon-button--disabled': this.disabled,
-            }, style: boxStyle, disabled: this.disabled, "aria-label": this.label || (this.toggled && this.toggleIcon ? this.toggleIcon : this.icon), part: "button" }, this.icon && this.toggleIcon ? (h("span", { class: { 'co-icon-button__swap': true, 'co-icon-button__swap--toggled': this.toggled }, "aria-hidden": "true" }, h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize }), h("co-icon", { name: this.toggleIcon, weight: this.iconWeight, size: resolvedIconSize }))) : this.icon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })) : null));
+            }, style: style, disabled: this.disabled, "aria-label": this.label || (this.toggled && this.toggleIcon ? this.toggleIcon : this.icon), "aria-pressed": this.selected ? 'true' : undefined, part: "button" }, this.icon && this.toggleIcon ? (h("span", { class: { 'co-icon-button__swap': true, 'co-icon-button__swap--toggled': this.toggled }, "aria-hidden": "true" }, h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize }), h("co-icon", { name: this.toggleIcon, weight: this.iconWeight, size: resolvedIconSize }))) : this.icon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })) : (
+        // Sin `icon`: el consumidor proyecta su propio glifo (ver @slot).
+        h("slot", null)), this.caret && h("co-icon", { key: 'db59eb79e6609b237ed3a642f5c44f2a046a4efe', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
     }
     static get is() { return "co-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -73,15 +128,15 @@ export class CoIconButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'filled' | 'outlined' | 'ghost'",
-                    "resolved": "\"filled\" | \"ghost\" | \"outlined\"",
+                    "original": "'filled' | 'outlined' | 'ghost' | 'soft'",
+                    "resolved": "\"filled\" | \"ghost\" | \"outlined\" | \"soft\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "filled = dark background (negro), outlined = light background (blanco + border),\nghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark).\nMatches Figma: Secundario \u2192 filled, Primario \u2192 outlined"
+                    "text": "filled = dark background (negro), outlined = light background (blanco + border),\nghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark),\nsoft = fondo gris s\u00F3lido (--co-color-gray-100), sin borde visible, sin frost.\nMatches Figma: Secundario \u2192 filled, Primario \u2192 outlined"
                 },
                 "getter": false,
                 "setter": false,
@@ -304,6 +359,66 @@ export class CoIconButton {
                 "reflect": false,
                 "attribute": "icon-weight",
                 "defaultValue": "'regular'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de selecci\u00F3n (transversal, gana sobre cualquier `variant`): fondo/color\nde acento. Reflejado para que `:host([selected])` sea estilable desde afuera y\nmarca `aria-pressed=\"true\"` en el `<button>` (ausente cuando no est\u00E1 selected,\nen vez de \"false\", para no alterar el \u00E1rbol de accesibilidad por defecto)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ocupa el espacio disponible del contenedor flex (`flex: 1 1 0; min-width: 0`) en\nvez del ancho fijo por `size` \u2014 para filas de N botones repartidos en el 100%."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fluid",
+                "defaultValue": "false"
+            },
+            "caret": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Agrega un `caret-down` de 8px a la derecha del icono principal (botones-disclosure).\nEnsancha la caja +8px (el alto no cambia) para que el caret no le robe espacio\nal icono (un `padding-right` con `box-sizing: border-box` y ancho fijo por talla\nencoger\u00EDa el \u00E1rea de contenido en vez de agrandar la caja). Sin `caret`, el\nDOM/CSS quedan id\u00E9nticos al comportamiento anterior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caret",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1,3 +1,6 @@
+/**
+ * @prop --co-input-suffix-color: Color del contenido del slot `suffix` (default: hereda).
+ */
 /* ============================================================
    co-input  —  Text Field component
    Figma: Text Fields (Estado × Posición × Tipo)
@@ -110,6 +113,27 @@
   border-color: transparent;
 }
 
+/* ---- Variant: soft (fondo --co-semantic-surface-control sólido, borde transparente) ----
+   Mismo ancho de borde que el default (1px) — solo cambia el color a
+   transparente, así el tamaño de la caja no se mueve (igual criterio
+   que la variante flat de arriba). Placed here (fix round 1, antes vivía
+   al final del archivo): igual que flat, tiene que ir ANTES de la
+   sección States/Validation de abajo para que el empate de
+   especificidad (0,2,0) lo gane el selector de estado (focused/error/
+   success/warning/info) por orden de declaración — si iba después,
+   `border-color: transparent; box-shadow: none;` tapaba el anillo de
+   foco y el borde de status en un input soft. El fondo/disabled de soft
+   sigue con selectores de mayor especificidad (0,3,0) más abajo, esos sí
+   son independientes del orden. */
+.co-input--soft .co-input__field {
+  background: var(--co-semantic-surface-control, #f6f6f6);
+  border-color: transparent;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  color: var(--co-semantic-text-default);
+}
+
 /* ---- Size variants ---- */
 .co-input--s .co-input__field {
   min-height: 28px;
@@ -520,3 +544,104 @@
   border-color: transparent;
   box-shadow: none;
 }
+
+/* ============================================================
+   Task C4 — size xs, variant soft, slot prefix, icon-size,
+   --co-input-suffix-color. Reglas nuevas al final del archivo (mismo
+   criterio que la sección Fill de arriba): así ganan el empate de
+   especificidad (0,2,0) contra las reglas de tamaño/estado existentes
+   sin tener que tocarlas.
+   Excepción: el resting-state de `.co-input--soft .co-input__field`
+   (fondo/borde/sombra) NO vive acá — se movió (fix round 1) junto a
+   `.co-input--flat`, antes de la sección States/Validation, por la
+   misma razón documentada ahí: necesita PERDER el empate de
+   especificidad contra focused/error/success/warning/info, no ganarlo.
+   Lo que sí sigue acá son los selectores de mayor especificidad
+   (disabled+soft), que son independientes del orden.
+   ============================================================ */
+
+/* ---- Size variant: xs (24px) ---- */
+.co-input--xs .co-input__field {
+  min-height: 24px;
+  /* m-9: el brief de la talla decía 6px (`--co-spacing-sm`) y el mock del
+     panel de Multimedia dibuja el placeholder del campo URL arrancando en x≈11.
+     La escala de spacing salta de 8 (`sm2`) a 12 (`md`), sin 10 ni 11: el
+     escalón que queda al lado es `md`. `xs` todavía no salió en ninguna
+     versión publicada, así que el cambio no le mueve la caja a ningún
+     consumidor. Ojo: con `variant="soft"` el borde de 1px es transparente pero
+     sigue contando, así que ahí el texto arranca a 13. */
+  padding: 0 var(--co-spacing-md);
+  font-size: var(--co-font-size-12);
+  border-radius: var(--co-border-radius-xxs);
+  /* Gap entre iconLeft/iconRight y el resto del campo en xs (brief:
+     "gap interno ... 6 con icono"). El gap prefijo→texto (4px) vive en
+     .co-input__input-wrapper, más abajo. */
+  gap: var(--co-spacing-sm);
+}
+
+/* Disabled + soft: el fondo surface-control se mantiene (no pasa a
+   surface-disabled, a diferencia del default). Selector de mayor
+   especificidad (0,3,0) que gana siempre a `.co-input--disabled
+   .co-input__field` (0,2,0), sin depender del orden en el archivo. */
+.co-input--soft.co-input--disabled .co-input__field {
+  background: var(--co-semantic-surface-control, #f6f6f6);
+  border-color: transparent;
+}
+
+/* En vez de atenuar el fondo, se atenúa el CONTENIDO al 35%: íconos,
+   el input-wrapper (input + prefix), el botón clear y el ícono de
+   status. `::slotted(*)` cubre además lo que venga por los slots
+   (chips/suffix/default/action) — apunta al nodo real proyectado, no
+   al <slot> (que es display:contents y no tiene caja propia sobre la
+   que aplicar opacity).
+   Fix round 1: `::slotted(*)` excluye `[slot="prefix"]` — el prefix
+   vive DENTRO de `.co-input__input-wrapper` (co-input.tsx), que ya se
+   atenúa al 35% acá abajo; opacity no es heredable como color, pero SÍ
+   afecta visualmente a todo el subárbol del elemento (crea su propio
+   stacking context), así que el prefix ya queda atenuado por el
+   wrapper. Sin la exclusión, `::slotted([slot="prefix"])` sumaba OTRO
+   35% encima → 0.35 × 0.35 ≈ 0.12 efectivo (doble atenuado). */
+.co-input--soft.co-input--disabled .co-input__field > .co-input__icon,
+.co-input--soft.co-input--disabled .co-input__field > .co-input__input-wrapper,
+.co-input--soft.co-input--disabled .co-input__field > .co-input__clear,
+.co-input--soft.co-input--disabled .co-input__field > .co-input__status-icon,
+.co-input--soft.co-input--disabled .co-input__field ::slotted(:not([slot="prefix"])) {
+  opacity: 0.35;
+}
+
+/* ---- Slot: prefix (contenido pegado al texto, dentro del wrapper) ----
+   Gap por defecto 4px entre el prefijo y el input — mismo valor que
+   pide el brief para xs; a otros tamaños es un default razonable (el
+   wrapper no tenía gap propio, tampoco se notaba con un solo hijo).
+   <slot> es display:contents por estilo UA por defecto, así que un
+   prefix sin contenido asignado no agrega caja ni gap: sin cambio
+   visual cuando el slot no se usa. */
+.co-input__input-wrapper {
+  gap: var(--co-spacing-xs);
+}
+
+.co-input__input-wrapper ::slotted([slot="prefix"]) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+}
+
+/* xs: el prefijo hereda 12px/400 gray-600 (Figma) */
+.co-input--xs .co-input__input-wrapper ::slotted([slot="prefix"]) {
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+  color: var(--co-color-gray-600, #585858);
+}
+
+/* ---- --co-input-suffix-color: color configurable del slot suffix ----
+   Default `inherit` = mismo comportamiento que ya tenía el slot antes
+   de esta variable (heredaba color del contexto, sin regla propia). */
+.co-input__field ::slotted([slot="suffix"]) {
+  color: var(--co-input-suffix-color, inherit);
+}
+
+/* xs: el sufijo hereda 12px */
+.co-input--xs .co-input__field ::slotted([slot="suffix"]) {
+  font-size: var(--co-font-size-12);
+}

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

@@ -5,9 +5,21 @@ import { RequiredMark } from "../../utils/requiredMark";
  * Supports vertical and horizontal label layouts, action button, and chips.
  *
  * @slot - Default slot for custom content inside the field
+ * @slot prefix - Slot for prefix content (e.g. "$", "https://") rendered right before the native input, inside the input wrapper
  * @slot suffix - Slot for suffix content (e.g. toggle password icon) rendered after the input
  * @slot action - Slot for action button, rendered flush-right inside the field (Botón variant)
  * @slot chips - Slot for chip/tag elements rendered before the input (Chips variant)
+ *
+ * Wrapper Vue: `CoInput` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part wrapper - Contenedor raíz del campo.
+ * @part label - Etiqueta.
+ * @part secondary-label - Texto secundario junto a la etiqueta.
+ * @part field - Caja con borde que contiene el input.
+ * @part input - El `<input>` nativo.
+ * @part clear - Botón × (`clearable`).
+ * @part action - Botón de acción (`actionIcon`/`actionLabel`).
+ * @part helper - Texto de ayuda o de error.
  */
 export class CoInput {
     constructor() {
@@ -36,14 +48,18 @@ export class CoInput {
         this.autoFocus = false;
         /** Validation status */
         this.status = 'default';
-        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px).
+        /** Size variant: xs (24px), s (28px), sm (32px), md (40px, default), lg (48px).
          *  In the filled search-pill variant (`fill`) this drives the pill height
          *  instead (s ≈ 38px). */
         this.size = 'md';
         /** Visual style. `flat` strips the field's border and background so it
          *  reads as plain content instead of a boxed input — padding, label, focus
-         *  ring, disabled and status states are unaffected. `default` (the
-         *  standard bordered box) renders identically to before this prop existed. */
+         *  ring, disabled and status states are unaffected. `soft` renders a solid
+         *  gray-100 background with a transparent 1px border (same width as
+         *  default, so nothing shifts) and no backdrop-filter — the disabled state
+         *  keeps that gray-100 background and dims the field's content instead.
+         *  `default` (the standard bordered box) renders identically to before
+         *  this prop existed. */
         this.variant = 'default';
         /** Filled search-pill variant. When true the field renders as a minimal gray
          *  pill (background gray-100, no border/box-shadow, 10px radius) with a search
@@ -176,6 +192,7 @@ export class CoInput {
             }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x", size: 14 })))))));
     }
     render() {
+        var _a, _b;
         if (this.fill) {
             return this.renderFill();
         }
@@ -190,11 +207,12 @@ export class CoInput {
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
                 'co-input--flat': this.variant === 'flat',
+                'co-input--soft': this.variant === 'soft',
                 'co-input--shake': this.shaking,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field", onAnimationEnd: this.handleShakeEnd }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field", onAnimationEnd: this.handleShakeEnd }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("slot", { name: "prefix" }), h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { name: "suffix" }), h("slot", null), h("slot", { name: "action" })), this.hasAction && (h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { name: this.iconRight, size: (_b = this.iconSize) !== null && _b !== void 0 ? _b : 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { name: "suffix" }), h("slot", null), h("slot", { name: "action" })), this.hasAction && (h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { class: "co-input__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-input"; }
     static get encapsulation() { return "shadow"; }
@@ -547,15 +565,15 @@ export class CoInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'s' | 'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "original": "'xs' | 's' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px).\nIn the filled search-pill variant (`fill`) this drives the pill height\ninstead (s \u2248 38px)."
+                    "text": "Size variant: xs (24px), s (28px), sm (32px), md (40px, default), lg (48px).\nIn the filled search-pill variant (`fill`) this drives the pill height\ninstead (s \u2248 38px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -567,15 +585,15 @@ export class CoInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'flat'",
-                    "resolved": "\"default\" | \"flat\"",
+                    "original": "'default' | 'flat' | 'soft'",
+                    "resolved": "\"default\" | \"flat\" | \"soft\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style. `flat` strips the field's border and background so it\nreads as plain content instead of a boxed input \u2014 padding, label, focus\nring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                    "text": "Visual style. `flat` strips the field's border and background so it\nreads as plain content instead of a boxed input \u2014 padding, label, focus\nring, disabled and status states are unaffected. `soft` renders a solid\ngray-100 background with a transparent 1px border (same width as\ndefault, so nothing shifts) and no backdrop-filter \u2014 the disabled state\nkeeps that gray-100 background and dims the field's content instead.\n`default` (the standard bordered box) renders identically to before\nthis prop existed."
                 },
                 "getter": false,
                 "setter": false,
@@ -583,6 +601,25 @@ export class CoInput {
                 "attribute": "variant",
                 "defaultValue": "'default'"
             },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o en px de los \u00EDconos `iconLeft`/`iconRight` (pasado al `co-icon`\ninterno). Sin este prop, el campo sigue con el tama\u00F1o fijo que ya ten\u00EDa\n(16px) \u2014 comportamiento id\u00E9ntico a antes de esta prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "fill": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -18,15 +18,22 @@ import { RequiredMark } from "../../utils/requiredMark";
  * @part field - The bordered textarea wrapper
  * @part input - The native textarea
  * @part helper - The helper/error text row
+ *
+ * Wrapper Vue: `CoJsonField` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoJsonField {
     constructor() {
         /** Committed JSON text. */
         this.value = '';
+        /** Placeholder del editor vacío (default `'{ }'`). */
         this.placeholder = '{ }';
+        /** Campo obligatorio: marca la etiqueta con el indicador de requerido. */
         this.required = false;
+        /** Deshabilita el campo. */
         this.disabled = false;
+        /** Solo lectura: muestra el JSON sin permitir editarlo. */
         this.readonly = false;
+        /** Alto del editor en líneas (default 8). */
         this.rows = 8;
         /** External validation status (e.g. from a form controller). */
         this.status = 'default';
@@ -97,17 +104,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '6e303939542b1c400432876149a7f7cf94dbfad4', class: {
+        return (h("div", { key: '116c07e036c670e20dd461a907a3bc46e0120b74', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '77c4793e6755c159d70943be68d94dc9a8f6f82c', class: "co-json-field__labels" }, h("label", { key: 'fa060ddb64fea5a78f339cf10ff46b8bbc3f6c9c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'fd130517bb57f0b5c012f39e61cd4ef905c34b42', required: this.required })))), h("div", { key: '752bccc5c2193a81ef174415b0e22936d1729914', class: "co-json-field__field", part: "field" }, h("textarea", { key: '397b3e80d4d252c55f55d9e6c444083f8ee2a28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '8d658f97252824dce51a262c19e251b664de9c4e', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '857a97a47b5a88b0a778680329670b474ff1eac1', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'aecaf5025db4a5fe4030e513b57df1b98121b62e', class: "co-json-field__labels" }, h("label", { key: '2f23f19d1fa5cd9f324c67a6fe93ac3d5df98c66', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'cf1dad000ccfd9de7598c2891413f2564d5e3f6e', required: this.required })))), h("div", { key: '0c43c4df775b1a854f10db5a0531d5e0817a916c', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'f9472a1dbc02388214d0c51277dcc838289e2b79', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '6c365c240716d857fc026e4c58c08c59722b95f9', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'e97c531fbd3a1c3dbec67d0de3f90ba632fe64cb', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'df90fefaedba9e8340b1fbfd19dd8350ab8e26af', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '3ba614c007e38009f7cda47be0d705d63397359f', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ae9751723abb04b19127d93a4fd798f5e03e8b90', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '8d44b589ba7d923476e7fd94f572d04452585977', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +162,7 @@ export class CoJsonField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,7 +181,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del editor vac\u00EDo (default `'{ }'`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +201,7 @@ export class CoJsonField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Atributo `name` del textarea nativo."
                 },
                 "getter": false,
                 "setter": false,
@@ -213,7 +220,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio: marca la etiqueta con el indicador de requerido."
                 },
                 "getter": false,
                 "setter": false,
@@ -233,7 +240,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +260,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: muestra el JSON sin permitir editarlo."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,7 +280,7 @@ export class CoJsonField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto del editor en l\u00EDneas (default 8)."
                 },
                 "getter": false,
                 "setter": false,
@@ -443,7 +450,7 @@ export class CoJsonField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor gan\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",
@@ -458,7 +465,7 @@ export class CoJsonField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor perdi\u00F3 el foco (lo sigue `coChange`)."
                 },
                 "complexType": {
                     "original": "void",