@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.css

@@ -3,6 +3,19 @@
    Renders categories, expansions, and leaf items from a JSON menu structure.
    ============================================================================= */
 
+/* Edge-fade: animatable lengths so the scroll-driven keyframes can interpolate
+   the mask smoothly. Registered globally (the host is the scroll container). */
+@property --co-sidebar-fade-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --co-sidebar-fade-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 :host {
   display: block;
   height: 100%;
@@ -13,6 +26,45 @@
   /* Scrollbar — auto-hide, subtle */
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
+
+  --co-sidebar-fade-size: 28px;
+}
+
+/* Edge-fade: the host IS the scroll container, so a mask fixed to its box
+   softens the top/bottom edges as content scrolls under it. Top fades only when
+   there's content above; bottom only when there's more below; at rest both are
+   0 → no fade. Applies in BOTH full and min (collapsed) modes — bg-agnostic, so
+   whatever the app paints behind the sidebar shows through the faded edge.
+   The lone exception is min mode WITH a flyout open: a host mask makes the host
+   a containing block for the position:fixed flyout, which would clip and
+   mis-position it — so the `flyout-open` host class drops the mask for that
+   moment (it's the only time a fixed descendant exists). */
+:host(:not([mode="min"])),
+:host([mode="min"]:not(.flyout-open)) {
+  -webkit-mask-image: linear-gradient(to bottom,
+    transparent 0, #000 var(--co-sidebar-fade-top),
+    #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);
+  mask-image: linear-gradient(to bottom,
+    transparent 0, #000 var(--co-sidebar-fade-top),
+    #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);
+}
+
+/* Scroll-driven: the host's own scroll progress animates the fade lengths.
+   When there's no overflow the timeline is inactive → no effect → edges stay
+   crisp. Guarded so engines without scroll-timeline simply show no fade. */
+@supports (animation-timeline: scroll()) {
+  :host(:not([mode="min"])),
+  :host([mode="min"]:not(.flyout-open)) {
+    animation: co-sidebar-edge-fade linear both;
+    animation-timeline: scroll(self block);
+  }
+}
+
+@keyframes co-sidebar-edge-fade {
+  0%   { --co-sidebar-fade-top: 0px;                        --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  8%   { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  92%  { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  100% { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: 0px; }
 }
 
 :host(:hover) {
@@ -44,6 +96,21 @@
   background: var(--co-color-opacity-blanco-50);
 }
 
+/* Min mode centers a fixed-width icon column; a reserved right-only scrollbar
+   gutter pulls that column left of the (non-scrolling) header above. Drop the
+   reserved gutter in collapsed mode so the icons stay centered — the rail still
+   scrolls via wheel/trackpad. (Full mode keeps its visible thin scrollbar.) */
+:host([mode="min"]) {
+  /* !important to beat the app's global `* { scrollbar-width: thin }`
+     (light-DOM) which otherwise reserves a right gutter and shifts the
+     centered icon column left. */
+  scrollbar-width: none !important;
+}
+
+:host([mode="min"])::-webkit-scrollbar {
+  width: 0 !important;
+}
+
 .co-sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -145,13 +212,26 @@
   gap: var(--co-spacing-xxs);
 }
 
+/* — Mini-mode category group — no label, but preserves the section spacing so the
+   collapsed sidebar still reads as grouped (an extra gap between groups vs. items). */
+.co-sidebar-nav__category--min {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+}
+
+.co-sidebar-nav__category--min + .co-sidebar-nav__category--min {
+  margin-top: var(--co-spacing-md);
+}
+
 /* — Leaf item — */
 .co-sidebar-nav__item {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-border-radius-xs);
   border: none;
   background: none;
   cursor: pointer;
@@ -174,7 +254,15 @@
 .co-sidebar-nav__item--active {
   background: var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover));
   color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
-  font-weight: var(--co-font-weight-semibold);
+  font-weight: var(--co-font-weight-medium);
+  /* Frosted glass (Cobalt glass system): translucent fill + backdrop blur. The
+     active bg is set translucent from the app (--co-sidebar-nav-active-bg); the
+     blur frosts the sidebar gradient behind the pill. Tokens are component-local
+     defaults (mismos valores que co-button/co-icon-button). */
+  --co-glass-blur: 12px;
+  --co-glass-saturate: 1.3;
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
 }
 
 .co-sidebar-nav__item-icon {
@@ -211,17 +299,16 @@
   height: 36px;
   padding: 0;
   justify-content: center;
+  /* Same corner radius as full-mode rows so the active/hover chip reads
+     consistently collapsed vs expanded. */
   border-radius: var(--co-border-radius-xs);
 }
 
-.co-sidebar-nav--min .co-sidebar-nav__item--active {
-  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-primary-azul));
-  color: var(--co-color-base-blanco);
-}
-
-.co-sidebar-nav--min .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon {
-  color: var(--co-color-base-blanco);
-}
+/* Min-mode active intentionally has NO overrides: it inherits the base
+   .co-sidebar-nav__item--active treatment (frosted --co-sidebar-nav-active-bg +
+   backdrop blur + adaptive --co-sidebar-nav-active-color) so the collapsed
+   active chip matches the expanded one in color and treatment.
+   (--co-sidebar-nav-active-bg-min is no longer consumed.) */
 
 /* — Flyout (mini mode hover popover) — */
 .co-sidebar-nav__flyout-anchor {
@@ -275,7 +362,7 @@
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active {
   background: var(--co-color-gray-100);
   color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
-  font-weight: var(--co-font-weight-semibold);
+  font-weight: var(--co-font-weight-medium);
 }
 
 .co-sidebar-nav__flyout .co-sidebar-nav__item-icon {
@@ -310,7 +397,7 @@
   align-items: center;
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-border-radius-xs);
   border: none;
   background: none;
   cursor: pointer;

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { normalizeText } from "../../utils/normalizeText";
 /** Default icon mapping for common Prolibu model keys → Phosphor icon names */
 const DEFAULT_ICON_MAP = {
@@ -129,10 +129,16 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
-    // Achievements
+    // Human Resources
+    Recruitment: 'user-plus',
+    Candidates: 'user-list',
+    // Achievements / Recognition
+    Recognition: 'hands-clapping',
     Achievements: 'trophy',
     Rewards: 'gift',
     Badges: 'medal',
+    BadgeNominations: 'star',
+    Prizes: 'trophy',
     RewardsBudgets: 'wallet',
     RedeemedPrizes: 'crown',
     // Sales / Billing extras
@@ -389,10 +395,18 @@ export class CoSidebarNav {
     }
     renderLeafItem(item, forceLabel = false) {
         const isActive = item.key === this.activeKey;
-        return (h("button", { class: {
+        const label = this.getLabel(item.key);
+        const showLabel = this.mode === 'full' || forceLabel;
+        const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), title: this.getLabel(item.key) }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), (this.mode === 'full' || forceLabel) && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+        // Collapsed (icon-only) items get a Cobalt tooltip with the label instead of
+        // the native `title`. Flyout items (forceLabel) already show their label.
+        if (this.mode === 'min' && !forceLabel) {
+            return (h("co-tooltip", { content: label, placement: "right", offset: 12 }, button));
+        }
+        return button;
     }
     openFlyout(key, anchorEl, childCount = 0) {
         clearTimeout(this.flyoutTimeout);
@@ -446,8 +460,10 @@ export class CoSidebarNav {
     }
     renderCategory(item) {
         if (this.mode === 'min') {
-            // In mini mode, render children directly (skip category headers)
-            return item.children.map(child => this.renderItem(child));
+            // In mini mode, drop the category label but keep a group wrapper so the
+            // sections stay visually separated by vertical spacing (mirrors the
+            // section gaps of full mode — the structure is still legible collapsed).
+            return (h("div", { class: "co-sidebar-nav__category--min" }, item.children.map(child => this.renderItem(child))));
         }
         return (h("div", { class: "co-sidebar-nav__category" }, h("span", { class: "co-sidebar-nav__category-label" }, this.renderHighlightedLabel(item.key)), h("div", { class: "co-sidebar-nav__category-items" }, item.children.map(child => this.renderItem(child)))));
     }
@@ -464,10 +480,14 @@ export class CoSidebarNav {
     }
     render() {
         const items = this.filteredItems;
-        return (h("nav", { key: 'b3e49df434a663c564959f6b332ed121607af5bb', class: {
+        return (
+        // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
+        // while a flyout is shown — a host mask would otherwise clip AND
+        // mis-position the fixed flyout (mask makes the host a containing block).
+        h(Host, { key: '4cbc7c52e223889678c0b65bc2ccb1f27c1e6b1e', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '4ff3825c2ac7f47bf87b81bc09ac76d0317ea300', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '26ef8af4e3152e7c094f966d881ad436ee52a805', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item)))));
+            } }, this.renderSearch(), h("div", { key: '69552a770759709fd7e36a3af383987391dd338b', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+}
+
+.co-skeleton {
+  height: 1em;
+  border-radius: var(--co-border-radius-xs);
+  background: linear-gradient(
+    90deg,
+    var(--co-semantic-surface-secondary) 0%,
+    var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,
+    var(--co-semantic-surface-secondary) 100%
+  );
+  background-size: 200% 100%;
+  animation: co-skeleton-sweep 1.2s ease-in-out infinite;
+}
+
+.co-skeleton--text { border-radius: var(--co-border-radius-xxs); }
+.co-skeleton--circle { border-radius: var(--co-border-radius-full); }
+
+@keyframes co-skeleton-sweep {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-skeleton { animation: none; }
+}

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

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+/**
+ * Placeholder de carga con shimmer (sweep). Componer apilando varios.
+ * Respeta prefers-reduced-motion (sin animación).
+ */
+export class CoSkeleton {
+    constructor() {
+        /** rect (default) | text (radio menor) | circle */
+        this.variant = 'rect';
+        /** Ancho CSS (default 100%) */
+        this.width = '100%';
+        /** Alto CSS (default por variante en CSS) */
+        this.height = '';
+    }
+    render() {
+        const style = { width: this.width };
+        if (this.height)
+            style.height = this.height;
+        return (h("div", { key: 'eddef7fdf65325e1110ec444a129e6015db28df3', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+    }
+    static get is() { return "co-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rect' | 'text' | 'circle'",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "rect (default) | text (radio menor) | circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'rect'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ancho CSS (default 100%)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto CSS (default por variante en CSS)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: '9666bc3215652fef40b6750b1bcf653da999ce75', class: {
+        return (h("div", { key: 'a9f92ca57336e9bae289723f39592a47671a4b15', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'a37b3269d2ef9b95225196a85b112750b4a3fcae', class: "co-slider__labels" }, h("div", { key: '18ca7e2f93ff343c278f0bede877078d90b24810', class: "co-slider__labels-left" }, this.label && h("label", { key: 'fe49fe8bac3897b39b4a887b9932f64711576621', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'aa0850998081f52521bacf8cdd478f0ea2eb7170', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '9de291e2bac119a3d52d2e502eb7fe604e1f0cc9', class: "co-slider__value" }, this.value))), h("div", { key: 'b962b60c11b9089338b00af3e907bad60a088392', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '0140d753b83767e2c2ca8b5d7113712aef268401', class: "co-slider__track" }, h("div", { key: '81f89f49edaf65b78a814c03e77273b86a0b88d0', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c163d0dd0655d6052158f64919f6bb3487cc2fef', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5398bacad904e3151be739ac96edea006e9ebc2b', class: "co-slider__marks" }, h("span", { key: '60940a59763a62b9138566f219447524f5b58f6d', class: "co-slider__mark" }, this.min), h("span", { key: 'eef1fbf170d58a7a0bc47da021e75483089ac873', class: "co-slider__mark" }, this.max))), h("input", { key: 'bba029e3b31ef5f7870152872298478cca82d377', 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: '21b325224fa58623e5a7b2148828dc125750c8d9', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '88e62cca21285bd21b4dd68c77e0c48bbdffecf8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '7f10644c1b17a09d947d79471a7d848455fd97f3', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '8eb64363bba56ffa4562338ba0d6d7136da14376', class: "co-slider__labels" }, h("div", { key: '4c3801ed323503bf8ade392fc36bff86d8b7110d', class: "co-slider__labels-left" }, this.label && h("label", { key: '597875203892c6a8a05a0320a68265fc5d1e3391', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'b625942a84e80fcdf41963496aa7638424c56d25', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'bda003630b130c2c06a1b69e4bbd152c247e9b13', class: "co-slider__value" }, this.value))), h("div", { key: '645b6872bdce75d9aba4dc3839a8dc69bd948397', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2ef7e7c4c323818611edf0adc84e785c0c588892', class: "co-slider__track" }, h("div", { key: '26abb3e3362f005068ecd55613641dadf4b9b634', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '94275bcd27dee2b86fef7587f05651f5c32a43e0', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '7972dbf5887472c03ca7c585d393bad59e78479d', class: "co-slider__marks" }, h("span", { key: '3594c16276b5a41905f52132a3a4f93894cd71ea', class: "co-slider__mark" }, this.min), h("span", { key: 'ef4c8c98850d33cf00b0eeb05a913c203d740f3f', class: "co-slider__mark" }, this.max))), h("input", { key: 'd0a72d43d4a0c420038287a4e3fd357781a4ad25', 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: 'd9006a19d95d4bb99b336d755c5ed6e20c842bbf', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2a646e6a2d7baf2230fb7e0472b8bc2a2d1b01cb', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '76fd161a9ee5415c7d36bcd91b2651970c123624', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,11 @@
 
 /* ─── TRACK COLORS ──────────────────────────────────────────── */
 .co-switch--on  { background: var(--co-semantic-surface-primary); }
-.co-switch--off { background: var(--co-semantic-surface-muted); }
+.co-switch--off {
+  background: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+}
 
 /* ─── THUMB ─────────────────────────────────────────────────── */
 .co-switch__thumb {
@@ -158,3 +162,7 @@
 .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); }
+}

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '448bc546da840313740bc9c8d28bcbf50dd23842', class: {
+        return (h("div", { key: '38cc6534a6d29b3453180409c4140b41e41c5970', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '417c63e43360ffaa5e6fb3843a6516e6acc10712', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '19e326242f45489aa2545390643dd799658102f8', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '5bec2bdbf3de9f5470840fac1c4abfad098e289a', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'd0039ee4818969f46c7014dbc1b29cb6fa3a021c', 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: '17b3895afa9f12e5a6fd5d09936d8da2113e710f', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: 'd8c87eea56b43540a6ea6f033ac80f93cc151aa8', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '69f488c6a6ef62f1247f98b8c991b9cbea1bc06e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'a3f0303b970a1d42a75dbd18bfe39d2fb4908376', required: this.required })), this.secondaryLabel && (h("span", { key: 'aa515120e86788c4301fe761d90f40005f419a26', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '89206dd59da64095fb242fdd2e24661f0573287b', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'b5c19c1e22867499990a6ba2f76bbb80d6808329', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '9e920d930bbd9adb287a206944930b07aeb2e512', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b7bfcd10fb3e0eaa4083f1f08ba01ed4e7d05b48', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '46497aa93ae79b1d8beb0dcdbacf9ebd07a93fa9', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '0f0364713a3d6f29f1f496d91ad0d89b957e92fe', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'de427dfa828e8bb55d6b05ac6fa854fd6ce9d128', required: this.required })), this.secondaryLabel && (h("span", { key: 'b00e86fd005b72fcea23db91dbe4f3d39cf8026c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6ab547b5c56216132685647f026eae7a879b6338', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'e5eedf552bff62777946b448da584512a0a8c9b5', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'c2d3242dbb21c85cdba0d7eb48b263fa6b555b73', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,8 +33,11 @@
   height: 40px;
 }
 
-/* ─── States ────────────────────────────────────────────────── */
-.co-tab:hover:not(:disabled) {
+/* ─── States (pill) ─────────────────────────────────────────── */
+/* Hover fill is scoped to the pill variant so the underline variant
+   has no hover rule. Every pill tab carries `.co-tab--pill`, so this
+   reproduces the previous `.co-tab:hover` behavior exactly. */
+.co-tab--pill:hover:not(:disabled) {
   background: var(--co-color-gris-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
@@ -45,7 +48,7 @@
   font-weight: 500;
 }
 
-.co-tab--selected:hover:not(:disabled) {
+.co-tab--pill.co-tab--selected:hover:not(:disabled) {
   background: var(--co-color-gris-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
@@ -59,3 +62,51 @@
   outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));
   outline-offset: 2px;
 }
+
+/* ─── Underline variant ─────────────────────────────────────── */
+/* Transparent bg in ALL states; only the bottom-border colour, text
+   colour and weight change. No hover rule. Placed after the size
+   rules so its fixed height/padding win on a specificity tie. */
+.co-tab--underline {
+  height: var(--co-spacing-4xl, 40px);
+  padding: 0 var(--co-spacing-md, 12px);
+  gap: var(--co-spacing-sm2, 8px);
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  background: transparent;
+  color: var(--co-color-gray-500, #888888);
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  transition: color 0.12s ease;
+}
+
+.co-tab--underline.co-tab--selected {
+  background: transparent;
+  border-bottom-color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-negro, #1f1c1b);
+  font-weight: 500;
+}
+
+/* ─── Badge pill ────────────────────────────────────────────── */
+.co-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--co-border-radius-full, 9999px);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  background: var(--co-color-gray-200, #e3e3e3);
+  color: var(--co-color-gray-600, #585858);
+}
+
+.co-tab--selected .co-tab__badge {
+  background: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-blanco, #fff);
+}

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

@@ -9,6 +9,8 @@ export class CoTab {
         this.selected = false;
         /** Size */
         this.size = 'small';
+        /** Visual variant: filled pill (default) or underline tab */
+        this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
         this.handleClick = () => {
@@ -18,13 +20,14 @@ export class CoTab {
         };
     }
     render() {
-        const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: 'f9b9a7793f77d4132002185b8af9e1629952cf1a', class: {
+        const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
+        return (h("button", { key: '6f181c1c0f6de62256ba768f656d0671b3e1968f', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
+                [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'edd62b88e5ec18158e9e32fcba0397ef3f1ddb61', name: this.iconLeft, size: iconSize })), h("span", { key: '0ce6db369891e9df4137c4c9f4104392b015d661', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '0e60714ab903460d67ba384bd57f619f3047861c', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '0fd0c49bf5e1836ed1250f98efcd68a7752a0c34', name: this.iconLeft, size: iconSize })), h("span", { key: '2b71c8f428d2c775675c6f96d7e2e2f9733081b5', class: "co-tab__label" }, this.label), this.badge && (h("span", { key: '168c7695c9694026442662632e57f41f907ca727', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '1d290f34920e4d5d451f5f0d145796244fb94884', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +123,45 @@ export class CoTab {
                 "attribute": "size",
                 "defaultValue": "'small'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'underline'",
+                    "resolved": "\"pill\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: filled pill (default) or underline tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'pill'"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional count/badge pill rendered after the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
             "iconLeft": {
                 "type": "string",
                 "mutable": false,

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

@@ -7,3 +7,11 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
 }
+
+/* ─── Underline variant ─────────────────────────────────────── */
+/* Full-width hairline rail under the tabs; children overlap it with
+   their own `margin-bottom: -1px`. */
+.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));
+}