@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,44 +1,97 @@
-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';
 
-const coSliderCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);line-height:1}.co-slider{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-slider__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-slider__labels-left{display:flex;align-items:center;gap:var(--co-spacing-sm2)}.co-slider__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default}.co-slider__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400}.co-slider__value{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:500;font-variant-numeric:tabular-nums}.co-slider--disabled .co-slider__label,.co-slider--disabled .co-slider__secondary-label,.co-slider--disabled .co-slider__value{color:var(--co-semantic-text-disabled)}.co-slider__track-wrapper{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.co-slider--disabled .co-slider__track-wrapper{cursor:not-allowed}.co-slider__track{width:100%;height:4px;background:var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-full);overflow:hidden}.co-slider__fill{height:100%;background:var(--co-semantic-surface-primary);border-radius:var(--co-border-radius-full);transition:width var(--co-motion-duration-instant) var(--co-motion-ease-out)}.co-slider--disabled .co-slider__fill{background:var(--co-semantic-text-disabled)}.co-slider--error .co-slider__fill{background:var(--co-semantic-status-error)}.co-slider--success .co-slider__fill{background:var(--co-semantic-status-success)}.co-slider--warning .co-slider__fill{background:var(--co-color-status-review)}.co-slider__thumb{position:absolute;top:50%;width:20px;height:20px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary);border:2px solid var(--co-semantic-surface-secondary);box-shadow:var(--co-semantic-control-shadow, 0 1px 4px rgba(0,0,0,0.12));transform:translate(-50%, -50%);transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);pointer-events:none}.co-slider--dragging .co-slider__thumb{transform:translate(-50%, -50%) scale(1.15);box-shadow:0 0 0 4px var(--co-semantic-border-focus-ring)}.co-slider--dragging .co-slider__fill{transition:none}.co-slider--disabled .co-slider__thumb{background:var(--co-semantic-text-disabled)}.co-slider--error .co-slider__thumb{background:var(--co-semantic-status-error)}.co-slider--success .co-slider__thumb{background:var(--co-semantic-status-success)}.co-slider--warning .co-slider__thumb{background:var(--co-color-status-review)}.co-slider__marks{display:flex;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-slider__mark{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-variant-numeric:tabular-nums}.co-slider__native{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;margin:-1px}.co-slider__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-slider__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-slider__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-slider__helper--error .co-slider__helper-icon,.co-slider__helper--error .co-slider__helper-text{color:var(--co-semantic-status-error)}.co-slider__helper--success .co-slider__helper-icon,.co-slider__helper--success .co-slider__helper-text{color:var(--co-semantic-status-success)}.co-slider__helper--warning .co-slider__helper-icon,.co-slider__helper--warning .co-slider__helper-text{color:var(--co-color-status-review)}.co-slider__helper--info .co-slider__helper-icon,.co-slider__helper--info .co-slider__helper-text{color:var(--co-semantic-status-info)}`;
+const coSliderCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);line-height:1}.co-slider{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-slider__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-slider__labels-left{display:flex;align-items:center;gap:var(--co-spacing-sm2)}.co-slider__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default}.co-slider__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400}.co-slider__value{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:500;font-variant-numeric:tabular-nums}.co-slider--disabled .co-slider__label,.co-slider--disabled .co-slider__secondary-label,.co-slider--disabled .co-slider__value{color:var(--co-semantic-text-disabled)}.co-slider__track-wrapper{position:relative;height:max(24px, var(--co-slider-thumb-size, 24px));display:flex;align-items:center;cursor:pointer;touch-action:none}.co-slider--disabled .co-slider__track-wrapper{cursor:not-allowed}.co-slider__track{width:100%;height:var(--co-slider-track-thickness, 4px);background:var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-full);overflow:hidden}.co-slider__fill{height:100%;background:var(--co-semantic-surface-primary);border-radius:var(--co-border-radius-full);transition:width var(--co-motion-duration-instant) var(--co-motion-ease-out)}.co-slider--disabled .co-slider__fill{background:var(--co-semantic-text-disabled)}.co-slider--error .co-slider__fill{background:var(--co-semantic-status-error)}.co-slider--success .co-slider__fill{background:var(--co-semantic-status-success)}.co-slider--warning .co-slider__fill{background:var(--co-color-status-review)}.co-slider__thumb{position:absolute;top:50%;box-sizing:border-box;width:var(--co-slider-thumb-size, 24px);height:var(--co-slider-thumb-size, 24px);border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary);border:var(--co-slider-thumb-border, 2px) solid var(--co-semantic-surface-secondary);box-shadow:var(--co-semantic-control-shadow, 0 1px 4px rgba(0,0,0,0.12));transform:translate(-50%, -50%);transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);pointer-events:none}.co-slider--vertical .co-slider__track-wrapper{box-sizing:border-box;width:max(24px, var(--co-slider-thumb-size, 24px));height:var(--co-slider-vertical-length, 120px);flex-direction:column;justify-content:center;margin-inline:auto}.co-slider--vertical .co-slider__track{box-sizing:border-box;width:var(--co-slider-track-thickness, 4px);height:100%;display:flex;flex-direction:column;justify-content:flex-end}.co-slider--vertical .co-slider__fill{width:100%;flex-shrink:0;transition:height var(--co-motion-duration-instant) var(--co-motion-ease-out)}.co-slider--vertical .co-slider__thumb{top:auto;left:50%;transform:translate(-50%, 50%)}.co-slider--vertical.co-slider--dragging .co-slider__thumb{transform:translate(-50%, 50%) scale(1.15)}.co-slider--vertical .co-slider__native{writing-mode:vertical-rl;direction:rtl}.co-slider--vertical{display:grid;grid-template-columns:max-content;grid-auto-columns:max-content;justify-content:center}.co-slider--vertical .co-slider__labels,.co-slider--vertical .co-slider__track-wrapper,.co-slider--vertical .co-slider__helper{grid-column:1}.co-slider--vertical .co-slider__labels{gap:var(--co-spacing-sm2)}.co-slider--vertical .co-slider__marks{grid-column:2;flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;padding:0}.co-slider--dragging .co-slider__thumb{transform:translate(-50%, -50%) scale(1.15);box-shadow:0 0 0 4px var(--co-semantic-border-focus-ring)}.co-slider--dragging .co-slider__fill{transition:none}.co-slider--disabled .co-slider__thumb{background:var(--co-semantic-text-disabled)}.co-slider--error .co-slider__thumb{background:var(--co-semantic-status-error)}.co-slider--success .co-slider__thumb{background:var(--co-semantic-status-success)}.co-slider--warning .co-slider__thumb{background:var(--co-color-status-review)}.co-slider__marks{display:flex;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-slider__mark{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-variant-numeric:tabular-nums}.co-slider__native{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;margin:-1px}.co-slider__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-slider__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-slider__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-slider__helper--error .co-slider__helper-icon,.co-slider__helper--error .co-slider__helper-text{color:var(--co-semantic-status-error)}.co-slider__helper--success .co-slider__helper-icon,.co-slider__helper--success .co-slider__helper-text{color:var(--co-semantic-status-success)}.co-slider__helper--warning .co-slider__helper-icon,.co-slider__helper--warning .co-slider__helper-text{color:var(--co-color-status-review)}.co-slider__helper--info .co-slider__helper-icon,.co-slider__helper--info .co-slider__helper-text{color:var(--co-semantic-status-info)}`;
 
 const CoSlider = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coChange = createEvent(this, "coChange", 7);
         this.coInput = createEvent(this, "coInput", 7);
+        /** Estado de validación: colorea el `helperText`. */
         this.status = 'default';
+        /** Valor actual; el componente lo actualiza al arrastrar o con el teclado. */
         this.value = 0;
+        /** Mínimo del rango (default 0). */
         this.min = 0;
+        /** Máximo del rango (default 100). */
         this.max = 100;
+        /** Paso entre valores (default 1); también el paso de las flechas. */
         this.step = 1;
+        /** Deshabilita el control. */
         this.disabled = false;
         /** Show current value label */
         this.showValue = true;
         /** Show min/max marks */
         this.showMarks = false;
+        /**
+         * Eje del control. `horizontal` (default) es el slider de siempre: mismo
+         * markup, mismo CSS, mismos eventos — la variante es ADITIVA y ningún
+         * consumidor actual (prolibu-front-v2) cambia de comportamiento.
+         *
+         * `vertical` INVIERTE el eje como manda la convención de un control de
+         * volumen: arriba es MÁS. El relleno crece desde abajo, el thumb se posiciona
+         * por `bottom`, y el largo del riel se ajusta con la variable
+         * `--co-slider-vertical-length` (default 120px).
+         *
+         * NO lleva `reflect`: reflejar una prop de string con default escribiría
+         * `orientation="horizontal"` en el host de TODOS los consumidores actuales, y
+         * eso ya sería cambiarles el markup. El estilo cuelga de la clase interna
+         * `.co-slider--vertical`, que es nuestra.
+         */
+        this.orientation = 'horizontal';
         this.dragging = false;
+        /** ¿Algún `coInput` real durante el gesto? Sin cambio no hay `coChange` de cierre. */
+        this.changedInGesture = false;
         this.handlePointerDown = (e) => {
-            if (this.disabled)
+            // Solo el botón primario; un segundo puntero (multitouch) no roba el gesto
+            // en curso. Sin el guard del botón, un clic DERECHO sobre el riel arrancaba
+            // un gesto que en macOS nunca veía su `pointerup` (se lo come el menú
+            // contextual): el slider seguía arrastrándose con cada movimiento del mouse
+            // hasta el clic siguiente, que remataba con un `coChange` espurio.
+            if (this.disabled || e.button !== 0 || this.dragging)
                 return;
             e.preventDefault();
             this.dragging = true;
-            const v = this.valueFromEvent(e.clientX);
-            this.value = v;
-            this.coInput.emit(v);
-            const onMove = (ev) => {
-                const val = this.valueFromEvent(ev.clientX);
-                this.value = val;
-                this.coInput.emit(val);
-            };
-            const onUp = () => {
-                this.dragging = false;
+            this.dragPointerId = e.pointerId;
+            this.changedInGesture = false;
+            this.bindGesture();
+            this.commitInput(this.valueFromPointer(e.clientX, e.clientY));
+        };
+        this.handleGesturePointerMove = (e) => {
+            if (!this.isGesturePointer(e))
+                return;
+            this.commitInput(this.valueFromPointer(e.clientX, e.clientY));
+        };
+        /**
+         * Fin del gesto — `pointerup` y también `pointercancel`, igual que el
+         * `handlePointerEnd` de co-color-slider / co-color-area: cancelar TERMINA el
+         * gesto y CONFIRMA lo alcanzado, no revierte.
+         *
+         * (Una versión anterior de esta rama revertía al valor previo con un `coInput`
+         * de rollback, copiando el arrastre de `co-modal movable`. Se descartó: el
+         * modal mueve una posición cosmética que no tiene canal de commit, mientras
+         * que acá el valor ES estado del host. Los dos sliders del propio design
+         * system confirman al cancelar, un `input type="range"` nativo también
+         * conserva el valor en `pointercancel`, y revertir obligaba al host a saber
+         * absorber un `coInput` de vuelta atrás — contrato de más, distinto al de los
+         * hermanos.)
+         */
+        this.handleGestureEnd = (e) => {
+            if (!this.isGesturePointer(e))
+                return;
+            // Un clic sobre el valor actual (o en un extremo ya alcanzado) no cambia
+            // nada: sin `coChange`, igual que el teclado en el borde.
+            if (this.endGesture())
+                this.coChange.emit(this.value);
+        };
+        /** Perder el foco de la ventana (alt-tab, un iframe que se lo lleva) cierra
+         *  el gesto igual que un `pointercancel`: sin esto, un puntero que nunca
+         *  suelta su `pointerup` deja el arrastre vivo. */
+        this.handleWindowBlur = () => {
+            if (!this.dragging)
+                return;
+            if (this.endGesture())
                 this.coChange.emit(this.value);
-                document.removeEventListener('pointermove', onMove);
-                document.removeEventListener('pointerup', onUp);
-            };
-            document.addEventListener('pointermove', onMove);
-            document.addEventListener('pointerup', onUp);
         };
         this.handleInputChange = (e) => {
             const raw = parseFloat(e.target.value);
@@ -48,6 +101,47 @@ const CoSlider = class {
                 this.coChange.emit(v);
             }
         };
+        /**
+         * Flechas de la variante VERTICAL: las resuelve el componente en vez de
+         * delegarlas al range nativo, y solo ahí — en horizontal este handler NO se
+         * engancha (ver `render`), así que el camino de siempre no cambia en nada.
+         *
+         * Por qué: la orientación vertical del input se consigue con
+         * `writing-mode: vertical-rl` + `direction: rtl` (ver co-slider.css). Un motor
+         * que ignore `writing-mode` en form controls pero sí honre `direction`
+         * (Safari 17.0–17.3, Firefox < 129) deja ←/→ INVERTIDOS. Manejadas acá, las
+         * cuatro flechas siguen el eje en cualquier motor — arriba/derecha suben,
+         * abajo/izquierda bajan, de a `step` — y el contrato queda testeable (jsdom no
+         * implementa el teclado del range nativo).
+         *
+         * PageUp/PageDown/Home/End siguen siendo del nativo. Emite `coChange` y no
+         * `coInput`, exactamente como el paso de teclado del horizontal
+         * (`handleInputChange`): un paso discreto es un commit, no un preview.
+         */
+        this.handleVerticalKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const dir = e.key === 'ArrowUp' || e.key === 'ArrowRight' ? 1
+                : e.key === 'ArrowDown' || e.key === 'ArrowLeft' ? -1
+                    : 0;
+            if (dir === 0)
+                return;
+            e.preventDefault();
+            const next = this.snap(this.value + dir * this.step);
+            // En el borde no hay cambio → sin eventos, igual que el gesto.
+            if (next === this.value)
+                return;
+            this.value = next;
+            this.coChange.emit(next);
+        };
+    }
+    /**
+     * `=== 'vertical'` y no `!== 'horizontal'`: con `@stencil/vitest` las `@Prop`
+     * omitidas en `h()` llegan `undefined` (no se siembra el default), y un valor
+     * ausente tiene que caer del lado de SIEMPRE, que es el horizontal.
+     */
+    get isVertical() {
+        return this.orientation === 'vertical';
     }
     get percentage() {
         const range = this.max - this.min;
@@ -68,22 +162,114 @@ const CoSlider = class {
         const steps = Math.round((v - this.min) / this.step);
         return this.clamp(this.min + steps * this.step);
     }
-    valueFromEvent(clientX) {
+    /**
+     * Valor bajo el puntero. En horizontal el eje va de `left` a `right`; en
+     * vertical va de ABAJO hacia arriba (`bottom - clientY`), así que acercarse
+     * al borde superior sube el valor.
+     *
+     * El guard de tamaño evita el `NaN` que salía de dividir por un riel de 0px
+     * (track sin medir todavía, o dentro de un contenedor colapsado).
+     */
+    valueFromPointer(clientX, clientY) {
         if (!this.trackEl)
             return this.value;
         const rect = this.trackEl.getBoundingClientRect();
-        const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const raw = this.min + ratio * (this.max - this.min);
+        const ratio = this.isVertical
+            ? rect.height > 0 ? (rect.bottom - clientY) / rect.height : 0
+            : rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+        const raw = this.min + Math.max(0, Math.min(1, ratio)) * (this.max - this.min);
         return this.snap(raw);
     }
+    /**
+     * Aplica el valor y emite `coInput` SOLO si cambió — el contrato de la casa
+     * (gemelo de `commitInput` en co-color-slider / co-color-area).
+     *
+     * Que `coInput` sea condicional es lo que cierra el ciclo de vida del
+     * consumidor: en el editor `coInput` ABRE una foto de "antes" y `coChange` la
+     * LIBERA (`fill/gestureHistory.ts`). Con las dos condiciones atadas al mismo
+     * `changedInGesture`, vale la invariante **"todo gesto que emitió `coInput`
+     * termina con exactamente un `coChange`"**: si el valor nunca se movió no se
+     * abre ninguna foto, y si se movió —aunque vuelva al de partida— hay cierre.
+     * Emitir `coInput` en cada paso (como antes) y `coChange` solo si el valor
+     * FINAL difería dejaba fotos colgadas en la ida y vuelta 50→80→50.
+     */
+    commitInput(next) {
+        if (next === this.value)
+            return false;
+        this.value = next;
+        this.changedInGesture = true;
+        this.coInput.emit(next);
+        return true;
+    }
+    /** `==`: en jsdom un MouseEvent sintético trae `pointerId` undefined y debe seguir pasando. */
+    isGesturePointer(e) {
+        // eslint-disable-next-line eqeqeq
+        return this.dragging && e.pointerId == this.dragPointerId;
+    }
+    bindGesture() {
+        document.addEventListener('pointermove', this.handleGesturePointerMove);
+        document.addEventListener('pointerup', this.handleGestureEnd);
+        document.addEventListener('pointercancel', this.handleGestureEnd);
+        window.addEventListener('blur', this.handleWindowBlur);
+    }
+    unbindGesture() {
+        document.removeEventListener('pointermove', this.handleGesturePointerMove);
+        document.removeEventListener('pointerup', this.handleGestureEnd);
+        document.removeEventListener('pointercancel', this.handleGestureEnd);
+        window.removeEventListener('blur', this.handleWindowBlur);
+    }
+    /**
+     * Cierra el gesto y devuelve si hubo algún `coInput` — el ÚNICO lugar donde
+     * se apaga `changedInGesture`, para que todos los finales (pointerup,
+     * pointercancel, blur, desconexión) compartan la misma contabilidad.
+     *
+     * Que la bandera se desarme acá es lo que impide un `coChange` de más: antes
+     * solo se ponía en `false` al ARRANCAR el gesto siguiente, así que una vez
+     * movido el valor quedaba armada para siempre y `disconnectedCallback`
+     * —que cierra el gesto con su `coChange`— reemitía un commit con el valor ya
+     * escrito CADA vez que el elemento se desmontaba. En el editor eso marcaba el
+     * documento como "modificado" al cerrar el popover sin que hubiera edición;
+     * el evento de más le llega a cualquier consumidor.
+     */
+    endGesture() {
+        this.unbindGesture();
+        this.dragging = false;
+        this.dragPointerId = undefined;
+        const huboCambio = this.changedInGesture;
+        this.changedInGesture = false;
+        return huboCambio;
+    }
+    /**
+     * Desmontarse en pleno gesto tiene que dejar el componente como si nunca
+     * hubiera empezado: `endGesture()` y no solo `unbindGesture()`. Con `dragging`
+     * en `true`, una instancia que se desconecta y se vuelve a conectar (reorden
+     * de una lista keyed, un `Teleport`) quedaba sin listeners Y rechazando todo
+     * `pointerdown` por el guard de arriba: slider muerto al puntero para siempre.
+     *
+     * Y CIERRA el gesto con su `coChange`, como cualquier otro final: era el único
+     * camino donde la invariante ("todo gesto que emitió `coInput` termina con
+     * exactamente un `coChange`") no valía. Sin el cierre, un host que se recrea
+     * el subárbol con el thumb agarrado deja abierta la foto de "antes" del
+     * historial y la edición siguiente del mismo nodo se registra contra ella.
+     *
+     * El `dispatchEvent` sobre un nodo ya desconectado llega igual a los listeners
+     * puestos sobre el propio elemento, que es como enganchan `@lit/react` y el
+     * `defineContainer` de Vue.
+     */
+    disconnectedCallback() {
+        if (this.endGesture())
+            this.coChange.emit(this.value);
+    }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: 'd6e0584e8c2f04f1b9a393f200a853a6acc0399c', class: {
+        const vertical = this.isVertical;
+        return (h("div", { key: '4993b9d6827cdda362ce482151bffaf84c916442', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
+                'co-slider--vertical': vertical,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'a0eae621e367f1145bdd9bdde53fb024489d0812', class: "co-slider__labels" }, h("div", { key: '19e102fe586ccff3ad37bc7cd6b4dd4de5172be7', class: "co-slider__labels-left" }, this.label && h("label", { key: 'ad31ddd76acb9bf7bf25f07a7fad5206ab6eb689', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'ccb7be2022de9d8d8ed1c7eeeac38b6d4711bd60', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'c38e8a050941184056441c94f6bcbfcc62522e62', class: "co-slider__value" }, this.value))), h("div", { key: 'c6cc971ea5dc3b4d30f8224ec359ae97a8ffa24a', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'de241b0017db6f5934b2332b08b6709038379b2c', class: "co-slider__track" }, h("div", { key: '9b590f27f16839a6dba5f0e2eea7467a485f79c1', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c8820089a72ec566210550317233832ba84a9e0a', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '2a40f01b836d29e453b691bc1f5f378166322e1e', class: "co-slider__marks" }, h("span", { key: '1f9dc67ca0e9c327766154a1a07a67c7e53efc68', class: "co-slider__mark" }, this.min), h("span", { key: '073c37ad99a45c05d7a0341e62ea9ed4e68d7acb', class: "co-slider__mark" }, this.max))), h("input", { key: 'fa18beabbcb2e26e86436bedc57de95f40c849f2', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: 'e8e46da2806b049d29c34620acd5cadf3abb03c8', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1802da1ab54a283d46eca9cbb0fe0bf4a381956c', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'ab294efdeee8c4546a83b16b55e3600f8706b2d7', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '707c5bda972f1c1c3a45d6716f1a7b1debc2e9ee', class: "co-slider__labels" }, h("div", { key: '2ea2bd4c5e9eafcc8e87214134ad3ee4881b990f', class: "co-slider__labels-left" }, this.label && h("label", { key: '8a509cbaaae01919f3e29627492762021bc6b001', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '9ac5b791724b1f106c0d50bea0eef55367187dcb', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '77fd3b3c5db03128a19fc37797832e334a31a9cd', class: "co-slider__value" }, this.value))), h("div", { key: '8d16d1b89ea5c4f0226787482f4cf307cefb5f99', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2d74659caca41e9255fe792e3b172e3cd6e4f3d9', class: "co-slider__track" }, h("div", { key: '169501854773b01341072f8024d89e665ed5527e', class: "co-slider__fill", style: vertical ? { height: `${pct}%` } : { width: `${pct}%` } })), h("div", { key: 'a1ea0b12371df5f0df4204a6be870fcf70141c43', class: "co-slider__thumb", style: vertical ? { bottom: `${pct}%` } : { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8e8d55e60e058b1336c9819c11100c3e82f56097', class: "co-slider__marks" }, h("span", { key: '0e6b74aed9a56f40147a8e96290834c3e51d82c4', class: "co-slider__mark" }, this.min), h("span", { key: '4b735e6e20f5d49f5ab6047129b43e05210c5726', class: "co-slider__mark" }, this.max))), h("input", { key: 'ddbb917734f98c92564477b502f29f51f2c492ca', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, onKeyDown: vertical ? this.handleVerticalKeyDown : undefined, "aria-label": this.ariaLabelText || this.label || 'Slider', "aria-orientation": vertical ? 'vertical' : undefined }), this.helperText && (h("div", { key: '68ba7ef8a27b006011ad0d1beba1cd9557103f8a', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '99f8b511f7de45809967a8a7588d8d736365247e', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '22f3ecf666b54d2bf5c97816c1b8253a7c6b233b', class: "co-slider__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-swatch-grid.entry.js

@@ -0,0 +1,119 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { a as isLightSwatch } from './gradientStops-DDK0y8ra.js';
+import { l as langFromLocale } from './dateI18n-jYd9gu_c.js';
+import './color-BVGGRfNG.js';
+import './hsv-COJdaKBU.js';
+
+/**
+ * Diccionario de strings de co-swatch-grid (aria labels). Misma estrategia
+ * que carouselI18n/dateI18n: es/en/pt resueltos por la prop `locale`.
+ */
+const DICT = {
+    es: { gridLabel: 'Colores' },
+    en: { gridLabel: 'Colors' },
+    pt: { gridLabel: 'Cores' },
+};
+/** Resuelve los strings integrados para un locale. */
+function getSwatchGridStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}
+
+const coSwatchGridCss = () => `:host{display:block}:host([hidden]){display:none}.co-swatch-grid{display:grid;justify-content:start}.co-swatch-grid__swatch{box-sizing:border-box;padding:0;margin:0;border:1px solid transparent;background:linear-gradient(var(--co-swatch-grid-color), var(--co-swatch-grid-color)),     conic-gradient(var(--co-color-gray-200) 25%, #ffffff 0 50%, var(--co-color-gray-200) 0 75%, #ffffff 0) 0 0 / 8px 8px;cursor:pointer;outline:none;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-swatch-grid__swatch--light{border-color:var(--co-color-opacity-negro-8)}.co-swatch-grid__swatch:hover{box-shadow:0 0 0 1px var(--co-color-opacity-negro-16)}.co-swatch-grid__swatch--selected,.co-swatch-grid__swatch--selected:hover{box-shadow:0 0 0 1px var(--co-semantic-surface-page, #ffffff),     0 0 0 3px var(--co-semantic-accent)}.co-swatch-grid__swatch:focus-visible{box-shadow:0 0 0 1px var(--co-semantic-surface-page, #ffffff),     0 0 0 3px var(--co-semantic-border-focus)}`;
+
+/** Medidas por defecto. También cubren un `undefined` explícito (los wrappers
+ *  React/Vue lo pasan por las props omitidas y eso pisa el default de Stencil). */
+const DEFAULTS = { columns: 8, swatchSize: 24, gap: 8, radius: 6 };
+const CoSwatchGrid = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coSelect = createEvent(this, "coSelect", 7);
+        /** Colores a mostrar (hex/rgba), en orden de lectura. */
+        this.colors = [];
+        /** Columnas de la grilla. */
+        this.columns = DEFAULTS.columns;
+        /** Lado de cada swatch en px. */
+        this.swatchSize = DEFAULTS.swatchSize;
+        /** Separación entre swatches en px. */
+        this.gap = DEFAULTS.gap;
+        /** Radio de cada swatch en px. */
+        this.radius = DEFAULTS.radius;
+        this.swatchEls = [];
+        this.handleKeyDown = (index, e) => {
+            var _a;
+            const last = this.colorList.length - 1;
+            if (last < 0)
+                return;
+            const cols = this.columnCount;
+            let next;
+            switch (e.key) {
+                case 'ArrowRight':
+                    next = Math.min(last, index + 1);
+                    break;
+                case 'ArrowLeft':
+                    next = Math.max(0, index - 1);
+                    break;
+                case 'ArrowDown':
+                    next = index + cols > last ? index : index + cols;
+                    break;
+                case 'ArrowUp':
+                    next = index - cols < 0 ? index : index - cols;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = last;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            (_a = this.swatchEls[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    static normalize(color) {
+        return (color !== null && color !== void 0 ? color : '').trim().toLowerCase();
+    }
+    get colorList() {
+        var _a;
+        return (_a = this.colors) !== null && _a !== void 0 ? _a : [];
+    }
+    get columnCount() {
+        var _a;
+        return Math.max(1, Math.floor((_a = this.columns) !== null && _a !== void 0 ? _a : DEFAULTS.columns) || 1);
+    }
+    selectedIndex() {
+        const v = CoSwatchGrid.normalize(this.value);
+        if (!v)
+            return -1;
+        return this.colorList.findIndex((c) => CoSwatchGrid.normalize(c) === v);
+    }
+    render() {
+        var _a, _b, _c;
+        const s = getSwatchGridStrings(this.locale);
+        const size = (_a = this.swatchSize) !== null && _a !== void 0 ? _a : DEFAULTS.swatchSize;
+        const gap = (_b = this.gap) !== null && _b !== void 0 ? _b : DEFAULTS.gap;
+        const radius = (_c = this.radius) !== null && _c !== void 0 ? _c : DEFAULTS.radius;
+        const selected = this.selectedIndex();
+        // Roving tabindex: una sola parada de tab (el seleccionado, o el primero).
+        const tabbableIndex = selected >= 0 ? selected : 0;
+        this.swatchEls = [];
+        return (h("div", { key: '37b221ff9dbebc184310f1cd51d539b833876adf', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
+                if (el)
+                    this.swatchEls[i] = el;
+            }, class: {
+                'co-swatch-grid__swatch': true,
+                'co-swatch-grid__swatch--selected': i === selected,
+                'co-swatch-grid__swatch--light': isLightSwatch(color),
+            }, role: "option", "aria-selected": i === selected ? 'true' : 'false', "aria-label": color, tabIndex: i === tabbableIndex ? 0 : -1, style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: `${radius}px`,
+                '--co-swatch-grid-color': color,
+            }, onClick: () => this.coSelect.emit(color), onKeyDown: (e) => this.handleKeyDown(i, e) })))));
+    }
+    get el() { return getElement(this); }
+};
+CoSwatchGrid.style = coSwatchGridCss();
+
+export { CoSwatchGrid as co_swatch_grid };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { r as registerInstance, c as createEvent, h } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 
 const coSwitchCss = () => `:host{display:inline-flex;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-switch-wrapper{display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-switch-wrapper__row{display:flex;align-items:center;gap:var(--co-switch-label-gap, var(--co-spacing-sm2));cursor:pointer}.co-switch-wrapper--disabled .co-switch-wrapper__row{cursor:not-allowed}.co-switch-wrapper__labels{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-switch-wrapper__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-switch-wrapper__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;margin-left:auto}.co-switch-wrapper--disabled .co-switch-wrapper__label,.co-switch-wrapper--disabled .co-switch-wrapper__secondary-label{color:var(--co-semantic-text-disabled)}.co-switch-wrapper__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding-left:calc(44px + var(--co-spacing-sm2));}.co-switch-wrapper__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-switch-wrapper__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-switch-wrapper__helper--error .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--error .co-switch-wrapper__helper-text{color:var(--co-semantic-status-error)}.co-switch-wrapper__helper--success .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--success .co-switch-wrapper__helper-text{color:var(--co-semantic-status-success)}.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--warning .co-switch-wrapper__helper-text{color:var(--co-color-status-review)}.co-switch-wrapper__helper--info .co-switch-wrapper__helper-icon,.co-switch-wrapper__helper--info .co-switch-wrapper__helper-text{color:var(--co-semantic-status-info)}.co-switch{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:var(--co-border-radius-full);border:none;outline:none;cursor:pointer;padding:0;overflow:hidden;transition:background var(--co-motion-duration-base) var(--co-motion-ease-out);box-sizing:border-box;flex-shrink:0}.co-switch--on{background:var(--co-semantic-surface-primary)}.co-switch--off{background:color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent)}.co-switch__thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-control-thumb);transition:transform var(--co-motion-duration-base) var(--co-motion-ease-spring);box-shadow:0 1px 3px var(--co-semantic-control-shadow)}.co-switch--off .co-switch__thumb{transform:translateY(-50%) translateX(0)}.co-switch--on .co-switch__thumb{transform:translateY(-50%) translateX(20px)}.co-switch--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.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-switch--off{background:var(--co-semantic-surface-muted)}}`;
 
@@ -34,16 +34,16 @@ const CoSwitch = class {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '94410fce797382a4b25356d8b1325b5a75508d84', class: {
+        return (h("div", { key: 'ea7d325ff800a4f4db50c46cc4d2198cd9fd4417', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '9b0d491e7e33faaa476dedd4f0e8826c4fde1249', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '6c7cc4ece2aff5fa089271cf47908cfcbc3d5827', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'a1f781028f45bdb9aa7d7dfc23e16b0f7fdc6eea', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '97177558e46e8fd58636339ac3a2c6990a473cfe', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '3a55c9aa1cc925dd09ac4d2b7367f8fd627b9e19', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '450cf6e28979b72e7821c0fa6130333410207343', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '509f09430837fcba73ff248d80a44e8bb7e2175f', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'ff017ff012f698b054db7f43832e3fb94b3eec01', required: this.required })), this.secondaryLabel && (h("span", { key: 'd5d33606934cd0d69f0faa3eb8afe2c962a1f5ab', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '1111d3b03f846f524b53510dd3c638db2a0d7753', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0deb3c0d9e2b6a4e7a5b791b8f739ed0d1dc9f91', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'f769d1b5c2217f84517b58baf91b0db7952c9062', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '0227ea14f20b836226e5c9af5115c09bbec833d6', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '4abd7d4ca1a3defc7c77c5ea3f79cb615e651c53', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '255b45047435c01f5b99c66c123faa19c4ac2f0e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7d1754be733fed89bd5cdb57175a68bd84bcb59b', required: this.required })), this.secondaryLabel && (h("span", { key: 'd790d306315a1ffa5601c775133de433f708e3ea', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '0fa80b2cea84d461d1bd95d598cf56b3c021c487', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f8b55daf30cdad200f57baa316c841acd2387e7', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '297f6d425ebc33eb752d140df2aa6aa4288dfe37', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
 };
 CoSwitch.style = coSwitchCss();

package/dist/esm/co-tab-group.entry.js

@@ -1,6 +1,33 @@
-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';
 
-const coTabGroupCss = () => `:host{display:flex;max-width:100%;min-width:0}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2);max-width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.co-tab-group::-webkit-scrollbar{display:none}::slotted(co-tab){flex-shrink:0}.co-tab-group--underline{gap:var(--co-spacing-xs, 4px);border-bottom:1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-tab-group--segmented{display:inline-flex;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-sm, 6px);background:var(--co-color-gray-100, #f6f6f6);border-bottom:1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));border-radius:var(--co-border-radius-sm, 12px)}`;
+/**
+ * `scrollLeft` del track para que la pestaña quede ENTERA a la vista (con `pad`
+ * de aire). Rects en coordenadas de viewport (getBoundingClientRect). Si ya se
+ * ve, devuelve el mismo `scrollLeft`: no hay salto.
+ */
+function revealScrollLeft(scrollLeft, track, tab, pad = 8) {
+    if (tab.left < track.left)
+        return Math.max(0, scrollLeft - (track.left - tab.left) - pad);
+    if (tab.right > track.right)
+        return scrollLeft + (tab.right - track.right) + pad;
+    return scrollLeft;
+}
+/**
+ * Bordes de la pestaña y del área visible del track en px CSS relativos al
+ * borde interno del track (el mismo espacio que `scrollLeft`). Los rects de
+ * getBoundingClientRect salen ESCALADOS si un ancestro tiene transform (el
+ * drawer entra con escala): se dividen por la escala visual del track.
+ */
+function tabEdgesInTrack(trackRect, tabRect, box) {
+    const scale = box.offsetWidth ? trackRect.width / box.offsetWidth || 1 : 1;
+    const toCss = (x) => (x - trackRect.left) / scale - box.clientLeft;
+    return {
+        track: { left: 0, right: box.clientWidth },
+        tab: { left: toCss(tabRect.left), right: toCss(tabRect.right) },
+    };
+}
+
+const coTabGroupCss = () => `:host{display:flex;max-width:100%;min-width:0}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2);max-width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.co-tab-group::-webkit-scrollbar{display:none}::slotted(co-tab){flex-shrink:0}:host([full-width]){width:100%}:host([full-width]) .co-tab-group{width:100%}:host([full-width]) ::slotted(co-tab){flex:1}.co-tab-group--underline{gap:var(--co-spacing-xs, 4px);border-bottom:1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-tab-group--segmented{display:inline-flex;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-sm, 6px);background:var(--co-color-gray-100, #f6f6f6);border-bottom:1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));border-radius:var(--co-border-radius-sm, 12px)}.co-tab-group--segmented.co-tab-group--size-s{padding:4px;border-radius:var(--co-border-radius-xs, 8px);border-bottom:none}`;
 
 const CoTabGroup = class {
     constructor(hostRef) {
@@ -8,11 +35,24 @@ const CoTabGroup = class {
         this.coTabChange = createEvent(this, "coTabChange", 7);
         /** Visual variant, propagated to slotted co-tab children */
         this.variant = 'pill';
+        /** Estira el host y el track al 100% del contenedor; cada `co-tab` hijo
+            reparte el ancho por igual (`::slotted(co-tab) { flex: 1 }`) y, como se
+            propaga a los hijos igual que `size` (`syncTabs()`), cada `co-tab`
+            estira además su `part="tab"` al 100% del host (`:host([full-width])
+            .co-tab` en co-tab.css). Mismo contrato que `size`: un grupo sin
+            `fullWidth` nunca pisa un `fullWidth` puesto a mano en un hijo, y al
+            apagarlo baja solo a los hijos que él mismo subió. */
+        this.fullWidth = false;
+        /** Hijos a los que ESTE grupo les subió `fullWidth` — al apagar `fullWidth`
+            en el grupo se baja solo a estos, nunca a uno puesto a mano (M1). */
+        this.raisedFullWidth = new WeakSet();
         /** Slotted tabs can mount AFTER the group (async v-for data): re-propagate
             variant/selection whenever the slot content changes, or late tabs render
             with the default pill variant. */
         this.onSlotChange = () => {
             this.syncTabs();
+            this.observeTabSizes();
+            this.revealSelected();
         };
         /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
             `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
@@ -39,25 +79,88 @@ const CoTabGroup = class {
     }
     watchValue() {
         this.syncTabs();
+        this.revealSelected();
     }
     watchVariant() {
         this.syncTabs();
     }
+    watchSize() {
+        this.syncTabs();
+    }
+    watchFullWidth() {
+        this.syncTabs();
+    }
     componentDidLoad() {
         this.syncTabs();
+        this.observeTabSizes();
+        this.revealSelected();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.tabsObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.tabsObserver = undefined;
+    }
+    observeTabSizes() {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        (_a = this.tabsObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.tabsObserver = new ResizeObserver(() => this.revealSelected());
+        this.el.querySelectorAll('co-tab').forEach((tab) => this.tabsObserver.observe(tab));
+    }
+    /** Lleva la pestaña activa a la vista dentro del track (sólo scroll horizontal
+        del track: la página no se mueve). Sin esto, abrir con una pestaña del final
+        activa (deep-link `?tab=`) la dejaba fuera de la tira. En rAF: al cargar y
+        con tabs async todavía no hay layout. */
+    revealSelected() {
+        requestAnimationFrame(() => {
+            var _a;
+            const track = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.co-tab-group');
+            if (!track || track.clientWidth === 0 || track.scrollWidth <= track.clientWidth)
+                return;
+            const selected = Array.from(this.el.querySelectorAll('co-tab')).find((tab) => tab.selected);
+            if (!selected)
+                return;
+            const { track: area, tab } = tabEdgesInTrack(track.getBoundingClientRect(), selected.getBoundingClientRect(), track);
+            const next = revealScrollLeft(track.scrollLeft, area, tab);
+            if (next !== track.scrollLeft)
+                track.scrollLeft = next;
+        });
     }
     syncTabs() {
         const tabs = this.el.querySelectorAll('co-tab');
         tabs.forEach((tab) => {
             tab.selected = (tab.value || tab.label) === this.value;
             tab.variant = this.variant;
+            if (this.size) {
+                tab.size = this.size;
+            }
+            this.syncFullWidth(tab);
         });
     }
+    /** Propaga `fullWidth` con el contrato de `size`: con el grupo en true, sube
+        al hijo (y lo anota); con el grupo en false, baja SOLO a los que subió
+        este grupo — un `fullWidth` puesto a mano en el hijo queda intacto. Sin
+        `fullWidth` en el grupo y sin hijos anotados, no toca nada: el DOM del
+        hijo queda como siempre (aditivo). */
+    syncFullWidth(tab) {
+        if (this.fullWidth) {
+            if (!tab.fullWidth) {
+                tab.fullWidth = true;
+                this.raisedFullWidth.add(tab);
+            }
+        }
+        else if (this.raisedFullWidth.has(tab)) {
+            tab.fullWidth = false;
+            this.raisedFullWidth.delete(tab);
+        }
+    }
     render() {
-        return (h("div", { key: 'f08c8fd752d5496f2699eeb3c67fa5d6dc106077', class: {
+        return (h("div", { key: 'e226f6ba6da4566f95011d121a176697218ffaba', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: 'ffc3a7bfbf2efdd40e3f7e6dcf02e3b9e5026dc4', onSlotchange: this.onSlotChange })));
+                [`co-tab-group--size-${this.size}`]: !!this.size,
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '93689e301da64a7ca850571cb623c339294c2122', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -66,6 +169,12 @@ const CoTabGroup = class {
             }],
         "variant": [{
                 "watchVariant": 0
+            }],
+        "size": [{
+                "watchSize": 0
+            }],
+        "fullWidth": [{
+                "watchFullWidth": 0
             }]
     }; }
 };