@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/esm/co-icon-button.entry.js

@@ -1,13 +1,14 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
-const coIconButtonCss = () => `:host{display:inline-flex}:host([disabled]){pointer-events:none}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));backdrop-filter:var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}.co-icon-button__swap{display:inline-grid}.co-icon-button__swap>co-icon{grid-area:1 / 1;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-in-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-in-out),     filter var(--co-motion-duration-base) var(--co-motion-ease-in-out)}.co-icon-button__swap>co-icon:last-child{opacity:0;transform:scale(0.25);filter:blur(var(--co-motion-blur-sm))}.co-icon-button__swap--toggled>co-icon:first-child{opacity:0;transform:scale(0.25);filter:blur(var(--co-motion-blur-sm))}.co-icon-button__swap--toggled>co-icon:last-child{opacity:1;transform:scale(1);filter:blur(0)}`;
+const coIconButtonCss = () => `:host{display:inline-flex}:host([disabled]){pointer-events:none}:host([fluid]){flex:1 1 0;min-width:0}:host([fluid]) .co-icon-button{width:100%}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));backdrop-filter:var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--soft{background:var(--co-semantic-surface-control);color:var(--co-icon-button-color, var(--co-semantic-text-default));border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--soft:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-control), var(--co-semantic-surface-hover))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--selected,.co-icon-button--selected:hover:not(:disabled),.co-icon-button--dark.co-icon-button--selected:hover:not(:disabled){background:var(--co-icon-button-selected-bg, var(--co-semantic-accent));color:var(--co-icon-button-selected-color, var(--co-semantic-on-accent))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-full))}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-xl));}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-lg));}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-lg));}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-sm));}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-icon-button-radius, var(--co-border-radius-xs));}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-icon-button-radius, var(--co-spacing-sm));}::slotted(*){width:var(--co-icon-button-glyph-size);height:var(--co-icon-button-glyph-size);flex-shrink:0}.co-icon-button--caret{gap:4px}.co-icon-button--caret.co-icon-button--xl{width:calc(80px + 8px)}.co-icon-button--caret.co-icon-button--lg{width:calc(64px + 8px)}.co-icon-button--caret.co-icon-button--md{width:calc(56px + 8px)}.co-icon-button--caret.co-icon-button--sm{width:calc(48px + 8px)}.co-icon-button--caret.co-icon-button--xs{width:calc(32px + 8px)}.co-icon-button--caret.co-icon-button--xxs{width:calc(24px + 8px)}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}.co-icon-button__swap{display:inline-grid}.co-icon-button__swap>co-icon{grid-area:1 / 1;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-in-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-in-out),     filter var(--co-motion-duration-base) var(--co-motion-ease-in-out)}.co-icon-button__swap>co-icon:last-child{opacity:0;transform:scale(0.25);filter:blur(var(--co-motion-blur-sm))}.co-icon-button__swap--toggled>co-icon:first-child{opacity:0;transform:scale(0.25);filter:blur(var(--co-motion-blur-sm))}.co-icon-button__swap--toggled>co-icon:last-child{opacity:1;transform:scale(1);filter:blur(0)}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
          * 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';
@@ -34,6 +35,26 @@ const CoIconButton = class {
         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;
@@ -41,23 +62,41 @@ const CoIconButton = class {
             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 })));
     }
 };
 CoIconButton.style = coIconButtonCss();

package/dist/esm/co-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-DH5lfRNj.js';
+import { r as registerInstance, h, H as Host } from './index-DJkaRtbb.js';
 
 const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
 /** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
@@ -83,12 +83,12 @@ const CoIcon = class {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: 'a1f3cfef2067bd672a17c19666821b6fac0b3027', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'e6f8302d22e1fbeac4e82d199b9214063c7b2313', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: 'cc92c6ea6d2ab5f59a7e793f166f2ae685f7928c', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '7967a0787112955036f6f88231a2a635e647e218', part: "svg", innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": [{

package/dist/esm/co-input.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 
-const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__native[type='number']::-webkit-inner-spin-button,.co-input__native[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.co-input__native[type='number']{-moz-appearance:textfield;appearance:textfield}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--shake .co-input__field{animation:co-input-shake calc(var(--co-motion-duration-instant) * 3.5) var(--co-motion-ease-out) both}@keyframes co-input-shake{0%{transform:translateX(0);animation-timing-function:var(--co-motion-ease-out)}28.57%{transform:translateX(-6px);animation-timing-function:var(--co-motion-ease-out)}57.14%{transform:translateX(6px);animation-timing-function:var(--co-motion-ease-out)}78.57%{transform:translateX(-4px);animation-timing-function:var(--co-motion-ease-out)}100%{transform:translateX(0)}}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
+const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.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)}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__native[type='number']::-webkit-inner-spin-button,.co-input__native[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.co-input__native[type='number']{-moz-appearance:textfield;appearance:textfield}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--shake .co-input__field{animation:co-input-shake calc(var(--co-motion-duration-instant) * 3.5) var(--co-motion-ease-out) both}@keyframes co-input-shake{0%{transform:translateX(0);animation-timing-function:var(--co-motion-ease-out)}28.57%{transform:translateX(-6px);animation-timing-function:var(--co-motion-ease-out)}57.14%{transform:translateX(6px);animation-timing-function:var(--co-motion-ease-out)}78.57%{transform:translateX(-4px);animation-timing-function:var(--co-motion-ease-out)}100%{transform:translateX(0)}}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}.co-input--xs .co-input__field{min-height:24px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-12);border-radius:var(--co-border-radius-xxs);gap:var(--co-spacing-sm)}.co-input--soft.co-input--disabled .co-input__field{background:var(--co-semantic-surface-control, #f6f6f6);border-color:transparent}.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}.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)}.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__field ::slotted([slot="suffix"]){color:var(--co-input-suffix-color, inherit)}.co-input--xs .co-input__field ::slotted([slot="suffix"]){font-size:var(--co-font-size-12)}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -37,14 +37,18 @@ const CoInput = class {
         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
@@ -177,6 +181,7 @@ const CoInput = class {
             }, 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();
         }
@@ -191,11 +196,12 @@ const CoInput = class {
                 [`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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-json-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 
 const coJsonFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-json-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-json-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-json-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-json-field__field{display:flex;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;overflow:hidden}.co-json-field__native{width:100%;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--co-font-family-mono, monospace);font-size:var(--co-font-size-13, 13px);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box;tab-size:2}.co-json-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-json-field--s .co-json-field__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12, 12px)}.co-json-field--sm .co-json-field__native{padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-json-field--lg .co-json-field__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-14)}.co-json-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-json-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-json-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-json-field--disabled{opacity:0.6;pointer-events:none}.co-json-field--disabled .co-json-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-json-field--invalid .co-json-field__field,.co-json-field--error .co-json-field__field{border-color:var(--co-semantic-status-error)}.co-json-field--invalid.co-json-field--focused .co-json-field__field,.co-json-field--error.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-json-field__helper--error .co-json-field__helper-icon,.co-json-field__helper--error .co-json-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-json-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-json-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-json-field__label{white-space:normal}:host([layout='horizontal']) .co-json-field>:not(.co-json-field__labels){grid-column:2;min-width:0}`;
 
@@ -13,10 +13,15 @@ const CoJsonField = class {
         this.coBlur = createEvent(this, "coBlur", 7);
         /** 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';
@@ -87,17 +92,17 @@ const CoJsonField = class {
     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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{co-tooltip.entry.js → co-kbd_2.entry.js}

@@ -1,7 +1,185 @@
-import { r as registerInstance, h, a as getElement } from './index-DH5lfRNj.js';
-import { c as computePosition, g as getOffsetAncestor, f as findScrollParents } from './positioning-DFHRS9cJ.js';
+import { r as registerInstance, h, a as getElement } from './index-DJkaRtbb.js';
+import { c as computePosition, g as getOffsetAncestor, f as findScrollParents } from './positioning-BtliEQAT.js';
 
-const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;text-transform:none;letter-spacing:var(--co-font-letter-spacing-body, normal);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--closing{visibility:visible;opacity:0;transition:opacity var(--co-motion-duration-instant) var(--co-motion-ease-in),     transform var(--co-motion-duration-instant) var(--co-motion-ease-in)}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}`;
+/**
+ * Diccionario embebido de `co-kbd` para las etiquetas de texto de los
+ * modificadores en plataformas sin teclas dedicadas (Windows/Linux): sin
+ * los glifos de Mac (⌘/⇧/⌥/⌃) el modificador se rotula con texto.
+ *
+ * Mismo patrón que `fileI18n.ts`: un mapa por locale + un getter. A
+ * diferencia de `fileI18n`, acá el locale no llega tipado por componente —
+ * `co-kbd` expone un `locale?: string` opcional (BCP-47, p.ej. "es-CO") y
+ * este util lo resuelve al lenguaje soportado más cercano, igual que
+ * `langFromLocale` en `fileI18n.ts`.
+ */
+const DICT = {
+    es: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+    en: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+    pt: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+};
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+function langFromLocale(locale) {
+    const l = (locale || '').toLowerCase();
+    if (l.startsWith('es'))
+        return 'es';
+    if (l.startsWith('pt'))
+        return 'pt';
+    return 'en';
+}
+/** Resolve the built-in win-label strings for a locale. */
+function getKbdStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}
+
+const coKbdCss = () => `: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)}.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}.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}.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)}`;
+
+/** Ícono Phosphor por modificador en mac. */
+const MAC_ICON_BY_MODIFIER = {
+    mod: 'command',
+    cmd: 'command',
+    shift: 'arrow-fat-up',
+    alt: 'option',
+    ctrl: 'control',
+};
+/** Ícono del modo `chord` (diseño: ícono 12 en celda de 12, en ambas tallas). */
+const CHORD_ICON_SIZE = 12;
+function isModifierToken(token) {
+    return token === 'mod' || token === 'cmd' || token === 'shift' || token === 'alt' || token === 'ctrl';
+}
+/** Núcleo puro: separa "shift+1" en ["shift", "1"]. Sin tocar el DOM/store. */
+function parseKeyTokens(keys) {
+    return keys
+        .split('+')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+}
+/**
+ * Etiqueta textual de un modificador — se usa para el aria-label siempre, y
+ * como contenido visible en `win` (en `mac` el visible es el ícono, ver
+ * `MAC_ICON_BY_MODIFIER`). Difieren por plataforma:
+ * - `mod` = el modificador "de plataforma": "Cmd" en mac, `kbdI18n` "Ctrl"
+ *   en win (el editor trata Ctrl como meta en Windows/Linux).
+ * - `cmd` = la tecla Cmd literal: "Cmd" en mac, `kbdI18n` "Win" en win (no
+ *   hay tecla Cmd en Windows; la física análoga es Win).
+ */
+function modifierLabel(token, platform, strings) {
+    if (platform === 'mac') {
+        switch (token) {
+            case 'mod':
+            case 'cmd':
+                return 'Cmd';
+            case 'shift':
+                return 'Shift';
+            case 'alt':
+                return 'Option';
+            case 'ctrl':
+                return 'Control';
+        }
+    }
+    switch (token) {
+        case 'mod':
+            return strings.ctrl;
+        case 'cmd':
+            return strings.win;
+        case 'shift':
+            return strings.shift;
+        case 'alt':
+            return strings.alt;
+        case 'ctrl':
+            return strings.ctrl;
+    }
+}
+/** Detecta Mac por `navigator.platform`/`userAgent` — usado cuando `platform="auto"`.
+ *  jsdom no completa `navigator.platform` en los tests: sin señal de Mac se
+ *  cae a `win` (fallback explícito, no un bug). */
+function detectsMacPlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const platform = navigator.platform || '';
+    const userAgent = navigator.userAgent || '';
+    return /Mac/i.test(platform) || /Mac/i.test(userAgent);
+}
+const CoKbd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Combinación de teclas separadas por "+", p.ej. "shift+1", "mod+0", "v". */
+        this.keys = '';
+        /**
+         * Plataforma para resolver el render de los modificadores:
+         * `mac` → íconos Phosphor (⌘⇧⌥⌃); `win` → etiquetas de texto (`kbdI18n`).
+         * `auto` detecta por `navigator.platform`/`userAgent`; sin señal de Mac
+         * (p.ej. jsdom en tests) cae a `win`.
+         */
+        this.platform = 'auto';
+        /** Superficie donde se apoya: `light` → fondo gray-100 (texto oscuro);
+         *  `dark` → blanco-16 (texto blanco) — pensado para pills oscuras, p.ej.
+         *  `co-tooltip` variant="label". */
+        this.surface = 'light';
+        /** Tamaño de cada tecla: `sm` 30×18 (con ícono 12px) · `xs` 16×16 (solo texto/1 char). */
+        this.size = 'sm';
+        /**
+         * Modo acorde: toda la combinación en UN solo chip (`part="key"`; 30×18 en
+         * `sm`, 16 de alto en `xs`), sin separadores "+" — cada token va en una
+         * celda (`part="cell"`) de 12 de alto: ícono Phosphor de 12px en una celda
+         * de 12×12 fija (modificadores en mac); texto en una celda que crece con su
+         * contenido, mínimo 12 (modificadores en win, teclas sueltas). El chip
+         * ensancha con las celdas. `role="group"` y `aria-label` no cambian. Sin
+         * `chord`, el modo de siempre: un chip por tecla + separadores.
+         */
+        this.chord = false;
+    }
+    resolvePlatform() {
+        if (this.platform === 'mac')
+            return 'mac';
+        if (this.platform === 'win')
+            return 'win';
+        return detectsMacPlatform() ? 'mac' : 'win';
+    }
+    render() {
+        const tokens = parseKeyTokens(this.keys);
+        const platform = this.resolvePlatform();
+        const strings = getKbdStrings(this.locale);
+        const iconSize = this.size === 'sm' ? 12 : 10;
+        const ariaLabel = tokens
+            .map((token) => (isModifierToken(token) ? modifierLabel(token, platform, strings) : token.toUpperCase()))
+            .join(' + ');
+        /** Un token se ve como ícono solo si es modificador Y la plataforma es
+         *  mac; todo lo demás (modificadores en win, teclas sueltas) es texto. */
+        const rendersAsIcon = (token) => isModifierToken(token) && platform === 'mac';
+        /** Contenido visible de un token: ícono (mac) o texto (win) para los
+         *  modificadores; la tecla suelta siempre en mayúscula. */
+        const renderToken = (token, size) => rendersAsIcon(token) ? (h("co-icon", { name: MAC_ICON_BY_MODIFIER[token], size: size })) : isModifierToken(token) ? (modifierLabel(token, platform, strings)) : (token.toUpperCase());
+        const keyNodes = [];
+        if (this.chord) {
+            // Un solo chip, sin "+". La celda con ÍCONO es 12×12 fija; la de TEXTO
+            // ("Ctrl"/"Shift" en win, "Esc"/"F1" en cualquier plataforma) crece con
+            // su contenido — con 12px fijos desbordaba y pisaba al token siguiente
+            // (fix round 1).
+            keyNodes.push(h("kbd", { class: "co-kbd__key co-kbd__key--chord", part: "key", key: "chord" }, tokens.map((token, index) => (h("span", { class: {
+                    'co-kbd__cell': true,
+                    'co-kbd__cell--icon': rendersAsIcon(token),
+                    'co-kbd__cell--text': !rendersAsIcon(token),
+                }, part: "cell", key: `cell-${index}` }, renderToken(token, CHORD_ICON_SIZE))))));
+        }
+        else {
+            tokens.forEach((token, index) => {
+                if (index > 0) {
+                    keyNodes.push(h("span", { class: "co-kbd__sep", part: "sep", key: `sep-${index}` }, "+"));
+                }
+                keyNodes.push(h("kbd", { class: "co-kbd__key", part: "key", key: `key-${index}` }, renderToken(token, iconSize)));
+            });
+        }
+        return (h("span", { key: 'd2b28cba40938051dd4488ceb0e06391e9e4b31d', class: {
+                'co-kbd': true,
+                [`co-kbd--${this.size}`]: true,
+                [`co-kbd--${this.surface}`]: true,
+                'co-kbd--chord': this.chord,
+            }, role: "group", "aria-label": ariaLabel, part: "group" }, keyNodes));
+    }
+};
+CoKbd.style = coKbdCss();
+
+const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;text-transform:none;letter-spacing:var(--co-font-letter-spacing-body, normal);padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--closing{visibility:visible;opacity:0;transition:opacity var(--co-motion-duration-instant) var(--co-motion-ease-in),     transform var(--co-motion-duration-instant) var(--co-motion-ease-in)}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}.co-tooltip__panel--label{padding:4px 8px;border-radius:var(--co-border-radius-xs, 8px);font-weight:var(--co-font-weight-medium, 500);line-height:1;box-shadow:none}.co-tooltip__panel--label .co-tooltip__arrow{display:none}.co-tooltip__panel--with-shortcut{display:flex;align-items:center;gap:6px}.co-tooltip__panel--with-shortcut:not(.co-tooltip__panel--label){padding-right:10px;}.co-tooltip__panel--label.co-tooltip__panel--with-shortcut{padding-right:4px}`;
 
 const CoTooltip = class {
     constructor(hostRef) {
@@ -29,6 +207,13 @@ const CoTooltip = class {
          *  must fill its track — e.g. an ellipsised list/table cell — without the
          *  inline-block wrapper shrink-wrapping it. Drives the `:host([block])` CSS. */
         this.block = false;
+        /**
+         * Visual variant. `label` = compact pill for a labeled trigger with an
+         * optional keyboard shortcut (radius `--co-border-radius-xs`, tighter
+         * padding, medium (500) text, `line-height: 1`, no shadow, arrow hidden). The
+         * arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
+         */
+        this.variant = 'default';
         // ── State ──────────────────────────────────────────────────
         this.visible = false;
         this.actualPlacement = 'top';
@@ -260,17 +445,19 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '3a46d7e7c0877bc7fd90a53b83638ed975bcd7fd', class: "co-tooltip" }, h("div", { key: 'eea03b0f5c36b5be47d099ac054ada2188045d9e', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: 'ddbe294fb30fec5694d0f585f7cd46a04d8c0e2f' })), (this.visible || this.closing) && this.content && (h("div", { key: 'd49dadcbe99984fe6b89338f9565043c1d41120a', id: "tooltip-panel", class: {
+        return (h("div", { key: '816e80ee775d782c3827fb3ba43187992e348429', class: "co-tooltip" }, h("div", { key: 'd4d3b56ae5502ccc4fc5c30c5191860ebef51140', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '357ff69bca524ce8c5f3ec21936fef944733cd22' })), (this.visible || this.closing) && this.content && (h("div", { key: '7d379c2ddafa6e84fbe5d5a4d3e9192a3ddfac87', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
                 'co-tooltip__panel--closing': this.closing,
-            }, role: "tooltip", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+                'co-tooltip__panel--label': this.variant === 'label',
+                'co-tooltip__panel--with-shortcut': !!this.shortcut,
+            }, role: "tooltip", popover: "manual", part: "panel", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '7d1a1d80cad876d841005a9a9a0170bb222d51d6', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '28186d3c0fc0ac8f3193dc6f333cbde537c461f3', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '0898aa009807ee6d48cdb01a5db9f4ef773804b9', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '07678a78b9fdf0955c54d4dc2c491e5205e7937d', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '24aa138140da114eed006f3488dc6cbc105ccee3', keys: this.shortcut, surface: "dark", size: "xs" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -284,4 +471,4 @@ const CoTooltip = class {
 };
 CoTooltip.style = coTooltipCss();
 
-export { CoTooltip as co_tooltip };
+export { CoKbd as co_kbd, CoTooltip as co_tooltip };

package/dist/esm/co-lightbox.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { l as langFromLocale } from './dateI18n-jYd9gu_c.js';
 
 /**
@@ -516,7 +516,7 @@ const CoLightbox = class {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: '1a3c29e98fd491c92b82ba9d9296588609cdd006', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: 'cc9e9db83ef082deab744f259c4da63a58eb0c3b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'ab3fa42e21008407f2cab377566a1793a96a8a50', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: 'af8761111e7c5e0e7a838d8e69971cc2863ee9d4', class: "co-lightbox__zoom" }, h("button", { key: 'e73628b4fd25fa7c3ed9ca947fccd196e6433f84', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '371f4edc5141561b348ce36a8791fb81500248fa', name: "minus", size: 16 })), h("button", { key: 'e07adc772687ef65d97db5669ed235749e43c034', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '29ed305a4f464e38c4b4ef331dbbfc35aa6fdc95', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '6b56559a4dad36bee62545deb426734450f64f58', name: "plus", size: 16 })))), h("button", { key: '53099c4e3dec82cfc9087e89916154ef4a8845f6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'de160ed313ba0559cd1523f9f73fad7e3b167848', name: "arrow-square-out", size: 16 })), h("button", { key: 'd1658ff7b8d0fc22f1a489c0138a16077304a165', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: 'fcbcbbf6001e67199b6ec7b99bde5f9f24537ca0', name: "x", size: 16 })))), img && (h("div", { key: '39cef6c2bd1bf3fe9f641778b48b618a62f1b5f8', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (h("co-video", { class: "co-lightbox__video", part: "video",
+        return (h("div", { key: 'e6c6c55d90c2a0b83d142cf88f158b87c4d2e02a', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: 'f488f9a4ceb012d3db6549d555988001782af07b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'fb57cbc8fb5ff4be44c77cbad70eba9f5fc20ebb', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: 'c7928efd810878d4f7ea261558691759fcd9854c', class: "co-lightbox__zoom" }, h("button", { key: '65f92f021c1ba3feca3aa6fe18cd3feee54a5ef3', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '2079736e31b26e8f5acef8613f91a3bf98ca02c2', name: "minus", size: 16 })), h("button", { key: '31e7e1257b07f7232788a1a399bcb681f2685807', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '0b7093aa5e7065db71419eef348422732f644b1a', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'f0e782492b2d902af14de1d3cfbc83d9b202e78c', name: "plus", size: 16 })))), h("button", { key: 'b0e78378c3ba4270d951f269fdf04fa60601efb5', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'dad0c979349c6c6a6b20962609d09a7c3bde55dc', name: "arrow-square-out", size: 16 })), h("button", { key: '209e8ad1ab624b30f8917a3731c2562724ac7f88', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '72c135d4b3a88ea4c87b162bc5a5651b488049b2', name: "x", size: 16 })))), img && (h("div", { key: 'af781758e0da002fc011c5a93461d7c93752a093', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (h("co-video", { class: "co-lightbox__video", part: "video",
             /* Keyed per slide: a fresh player is the only way to be sure
                poster, error state and playback all start clean. */
             key: `video-${this.index}`, ref: this.mountPlayer, src: img.src, poster: img.poster || '', aspectRatio: "auto", rounded: "none",
@@ -526,13 +526,13 @@ const CoLightbox = class {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp })))), img && multi && (h("button", { key: 'a161402e30021374f608755ea0a5dc6ccee0e99a', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp })))), img && multi && (h("button", { key: '014622508d9f057d3063dbafefb79d9db7d182d6', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '649171d5330299b3ccb368bb0b434c643157c3f5', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '5cc5d07467e1ecf9c27094947ce421c28c35472d', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: '8751f7fd41bc9ff145d1f41b18bc1fc719f4791e', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '1fae0772a594c9354db4d0aace04b6741cf7ae1b', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: 'd9d32607a6b4350009db5c1719987aa8afcbb007', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'a23f10a2c9d82c4295285feeedfbe0d9016f4db0', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '7823ad091764d26ed79e460c0288b97dec1260bb', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '3aa1f701ddf4c433c48790550071bc0c4e87dbc9', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {