@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -1,9 +1,20 @@
 import { h } from "@stencil/core";
+/**
+ * @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 +41,27 @@ 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 — fix round 1: la primera versión usaba `padding-right`, que con
+         * `box-sizing: border-box` y ancho fijo por talla ENCOGE el área de contenido en
+         * vez de agrandar la caja (overflow real en xs/xxs). Sin `caret`, el DOM/CSS
+         * quedan idénticos al comportamiento anterior.
+         */
+        this.caret = false;
     }
     render() {
         var _a, _b;
@@ -37,23 +69,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: '4ae94400d9f54425b1aa844a651fbe441f545645', 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: 'f8a026ec97d9d37f9f62c81a3ae484d2a8b09665', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
     }
     static get is() { return "co-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -73,15 +123,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 +354,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 \u2014 fix round 1: la primera versi\u00F3n usaba `padding-right`, que con\n`box-sizing: border-box` y ancho fijo por talla ENCOGE el \u00E1rea de contenido en\nvez de agrandar la caja (overflow real en xs/xxs). Sin `caret`, el DOM/CSS\nquedan id\u00E9nticos al comportamiento anterior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caret",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -110,6 +110,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 +541,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,6 +5,7 @@ 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)
@@ -36,14 +37,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 +181,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 +196,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 +554,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 +574,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 +590,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

@@ -97,17 +97,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: 'b7cc05a2cf7bcac484ef35923b873d487f9cf818', 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: '5e6829693907789665f54851df8ac012bbe9d9c9', class: "co-json-field__labels" }, h("label", { key: 'e19ba3d715acd5b505147ef6e0c173dbaf1dbae8', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e45feaa1a58875adc64ab58e77d1cef498042574', required: this.required })))), h("div", { key: '7b5ed251a4c7f3456f1a5c36c7800aae60b8e602', class: "co-json-field__field", part: "field" }, h("textarea", { key: '03b4e34fabc26829c823f5dea01c987e5fc1a1f8', 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: 'e7659c214e65fb97de486f442a170e11fb917587', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '744697ecde8364833b3dfb4656602a5c8bb6192a', 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: '8b80af75ce8f27fb68fa5760e584ce7aeedd67a7', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'f79da7c507e282694367d602dac6e99e534579f0', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,99 @@
+/* co-kbd — grupo de teclas de un atajo (ícono Phosphor en mac, texto en win) */
+
+:host {
+  display: inline-flex;
+}
+
+.co-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs, 2px);
+}
+
+.co-kbd__sep {
+  font-family: var(--co-font-family-primary, 'Geist', sans-serif);
+  font-size: var(--co-font-size-10, 10px);
+  line-height: 1;
+  opacity: 0.6;
+}
+
+.co-kbd__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: var(--co-font-family-primary, 'Geist', sans-serif);
+  font-style: normal;
+  font-weight: var(--co-font-weight-medium, 500);
+  font-size: var(--co-font-size-10, 10px);
+  line-height: 1;
+  text-transform: uppercase;
+  border-radius: var(--co-border-radius-xxs, 4px);
+}
+
+/* ── Sizes (Figma: sm 30×18 con ícono 12px · xs 16×16) ──────────── */
+.co-kbd--sm .co-kbd__key {
+  min-width: 30px;
+  height: 18px;
+  padding: 0 3px;
+}
+
+.co-kbd--xs .co-kbd__key {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+
+/* ── Chord: toda la combinación en UN chip ─────────────────────── */
+/* Cada token en una celda de 12 de alto, sin separadores. La celda con
+   ÍCONO (`--icon`: modificador en mac) es 12×12 fija; la de TEXTO (`--text`:
+   modificadores en win — "Ctrl", "Shift" —, teclas sueltas — "0", "Esc") crece
+   con su contenido desde un mínimo de 12: con 12px fijos y sin overflow el
+   texto sobresalía a ambos lados y pisaba al token siguiente (fix round 1).
+   En `sm` el chip hereda 30×18 de `.co-kbd--sm .co-kbd__key` (min-width: se
+   ensancha con las celdas); en `xs` la tecla suelta tiene `width: 16px`
+   FIJO, que aquí se suelta (auto + min-width 16, mismo alto 16) — va DESPUÉS
+   de esa regla porque pesa lo mismo (0,2,0) y gana por orden. */
+.co-kbd__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.co-kbd__cell--icon {
+  width: 12px;
+}
+
+.co-kbd__cell--text {
+  width: auto;
+  padding: 0 1px;
+}
+
+.co-kbd--xs .co-kbd__key--chord {
+  width: auto;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 2px;
+}
+
+/* ── Surfaces ───────────────────────────────────────────────────── */
+.co-kbd--light .co-kbd__key {
+  background: var(--co-semantic-surface-control, #f6f6f6);
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+.co-kbd--light .co-kbd__sep {
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+
+.co-kbd--dark .co-kbd__key {
+  background: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
+  color: var(--co-color-base-blanco, #fff);
+}
+.co-kbd--dark .co-kbd__sep {
+  color: var(--co-color-base-blanco, #fff);
+}