@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,3 +1,8 @@
+/**
+ * @prop --co-sidebar-nav-active-bg: Fondo del ítem activo (default surface-hover).
+ * @prop --co-sidebar-nav-active-color: Color de texto e ícono del ítem activo (default azul de marca).
+ * @prop --co-sidebar-nav-active-bg-min: Fondo del ítem activo con `mode="min"` (default: el de `--co-sidebar-nav-active-bg`).
+ */
 /* =============================================================================
    co-sidebar-nav — Full sidebar navigation component
    Renders categories, expansions, and leaf items from a JSON menu structure.
@@ -388,6 +393,16 @@
   font-weight: var(--co-font-weight-medium);
 }
 
+/* Hover sobre el item ACTIVO del flyout: conserva la pastilla. Sin esta regla gana
+   `.co-sidebar-nav__flyout .co-sidebar-nav__item:hover` (0,3,0, declarada después que
+   `.co-sidebar-nav__item--active:hover`, también 0,3,0): el fondo pasaba a gray-100 y el
+   texto seguía en el color adaptativo del activo — blanco sobre gris en workspaces
+   oscuros, ilegible (Bibliotecas › Plantillas de contenido, tarea QA #61). 0,4,0. */
+.co-sidebar-nav__flyout .co-sidebar-nav__item--active:hover {
+  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));
+  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+}
+
 .co-sidebar-nav__flyout .co-sidebar-nav__item-icon {
   display: flex;
   width: 24px;

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

@@ -37,6 +37,7 @@ const DEFAULT_ICON_MAP = {
     ContentTemplates: 'article',
     MessageTemplates: 'chat-text',
     Skills: 'brain',
+    AiAgentProfiles: 'robot',
     // Analytics
     Insights: 'chart-line',
     Dashboards: 'gauge',
@@ -129,9 +130,23 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
-    // Human Resources
+    // Human Resources — Learning
+    Learning: 'graduation-cap',
+    Programs: 'path',
+    Courses: 'chalkboard-teacher',
+    Enrollments: 'student',
+    Certificates: 'certificate',
+    Assessments: 'exam',
+    // Human Resources — Recruitment
     Recruitment: 'user-plus',
+    Vacancies: 'briefcase',
     Candidates: 'user-list',
+    JobApplications: 'read-cv-logo',
+    Interviews: 'chats-circle',
+    // Human Resources — Asset Management
+    AssetManagement: 'package',
+    Assets: 'devices',
+    AssetAssignments: 'user-switch',
     // Achievements / Recognition
     Recognition: 'hands-clapping',
     Achievements: 'trophy',
@@ -174,6 +189,7 @@ const DEFAULT_ICON_MAP = {
  * A complete sidebar navigation component that renders a hierarchical menu.
  * Accepts the raw `uiSchemas.sideBar` JSON from the Prolibu API and
  * automatically renders categories, expandable groups, and leaf items.
+ * Wrapper Vue: `CoSidebarNav` de `@prolibu-suite/cobalt-vue`.
  *
  * @example
  * ```html
@@ -496,10 +512,10 @@ export class CoSidebarNav {
         // `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: 'fa9a50c4a517fa550406669bb3d40abbf12db32a', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '5df964b67ed0e376a268dd28e1095b985c0b328b', class: {
+        h(Host, { key: 'ef90beff11ad03c2cf4e13b74c9898cca380e8eb', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'cc9788f795e8ac66b4143195e7ffa3c4efe58bc1', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'c276aacf1b0b9eb66e35977d124465c400c96cd1', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'c77b51b21c0d5d70ff90213f3c7a5bc0e104bdec', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -702,7 +718,7 @@ export class CoSidebarNav {
                     "references": {
                         "NavigateDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
                             "id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
                         }
                     }

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

@@ -2,6 +2,9 @@ import { h } from "@stencil/core";
 /**
  * Placeholder de carga con shimmer (sweep). Componer apilando varios.
  * Respeta prefers-reduced-motion (sin animación).
+ * Wrapper Vue: `CoSkeleton` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part skeleton - El bloque con el shimmer.
  */
 export class CoSkeleton {
     constructor() {
@@ -50,7 +53,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '744fb805939c99587c4d0b72355da54d1f5aad43', class: {
+        return (h("div", { key: '26e69f4c94f59664827c617fa3d54983ac56cd1d', class: {
                 'co-skeleton': true,
                 [`co-skeleton--${this.variant}`]: true,
                 'co-skeleton--revealed': this.revealed,

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

@@ -1,5 +1,12 @@
 /* co-slider */
 
+/**
+ * @prop --co-slider-thumb-size: Diámetro exterior del thumb, borde incluido (default 24px).
+ * @prop --co-slider-thumb-border: Grosor del aro del thumb; crece hacia adentro (default 2px).
+ * @prop --co-slider-track-thickness: Grosor del riel: alto en horizontal, ancho en vertical (default 4px).
+ * @prop --co-slider-vertical-length: Largo del riel con `orientation="vertical"` (default 120px).
+ */
+
 :host {
   display: block;
   font-family: var(--co-font-family-primary);
@@ -53,10 +60,29 @@
   color: var(--co-semantic-text-disabled);
 }
 
+/* ── Knobs de medida (aditivos) ─────────────────────────────────
+   Tres custom properties para las medidas que antes eran fijas. Cada
+   fallback es el valor de 0.10.x, así que sin setearlas nada se mueve
+   un píxel (medido en Chromium, horizontal y vertical):
+
+   - `--co-slider-thumb-size` (default 24px): diámetro EXTERIOR del thumb,
+     borde incluido. El thumb pasa a `box-sizing: border-box`; hasta 0.10.x
+     era 20 de contenido + 2 de borde por lado = 24 de caja, que es
+     exactamente lo que da el default.
+   - `--co-slider-thumb-border` (default 2px): grosor del aro del thumb. Con
+     border-box el aro crece hacia adentro: el diámetro no cambia.
+   - `--co-slider-track-thickness` (default 4px): grosor del riel — el ALTO
+     en horizontal, el ANCHO en vertical.
+
+   La franja de 24 del riel (`__track-wrapper`, el área que recibe el
+   puntero) crece con el thumb solo si el thumb pasa de 24: `max()` la deja
+   en 24 con cualquier thumb menor o igual, así que tampoco cambia el
+   default ni un thumb más chico (el volumen del editor, de 12). */
+
 /* ── Track ──────────────────────────────────────────────────── */
 .co-slider__track-wrapper {
   position: relative;
-  height: 24px;
+  height: max(24px, var(--co-slider-thumb-size, 24px));
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -69,7 +95,7 @@
 
 .co-slider__track {
   width: 100%;
-  height: 4px;
+  height: var(--co-slider-track-thickness, 4px);
   background: var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-full);
   overflow: hidden;
@@ -94,17 +120,141 @@
 .co-slider__thumb {
   position: absolute;
   top: 50%;
-  width: 20px;
-  height: 20px;
+  /* border-box: el tamaño es el diámetro exterior (ver "Knobs de medida"). */
+  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: 2px solid var(--co-semantic-surface-secondary);
+  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;
 }
 
+/* ── Vertical ───────────────────────────────────────────────────
+   Variante ADITIVA de `orientation="vertical"` (control de volumen): todo
+   cuelga de `.co-slider--vertical`, que solo existe cuando la prop lo pide —
+   sin la clase, el CSS de siempre queda intacto.
+
+   El bloque va ACÁ, ANTES de los estados (--dragging / --disabled / --error /
+   --success / --warning), y no al final del archivo: `.co-slider--vertical
+   .co-slider__thumb` pesa (0,2,0), exactamente lo mismo que
+   `.co-slider--dragging .co-slider__thumb`, y el empate lo resuelve el ORDEN
+   de fuente. Escrito al final, el `transform` de la variante le habría pisado
+   el `scale(1.15)` al arrastre y el `transition: none` del relleno. El orden
+   lo fija `co-slider.css.test.ts` para que no se revierta sin querer.
+
+   El único caso que sí tiene que ganarle al estado es la composición
+   thumb vertical + arrastre: para eso está la regla compuesta
+   `.co-slider--vertical.co-slider--dragging` (0,3,0), que gana por
+   especificidad y no depende del orden.
+
+   Medidas EXPLÍCITAS (ancho/alto declarados, nada de padding + line-height) y
+   `box-sizing: border-box` en las cajas con medida fija: así un padding
+   heredado del host no ensancha el riel ni corre el thumb. */
+.co-slider--vertical .co-slider__track-wrapper {
+  box-sizing: border-box;
+  /* Gemelo del alto del horizontal: 24 (el thumb por defecto), o el thumb
+     si es más grande (ver "Knobs de medida"). */
+  width: max(24px, var(--co-slider-thumb-size, 24px));
+  height: var(--co-slider-vertical-length, 120px);
+  flex-direction: column;
+  justify-content: center;
+  /* Centra la columna cuando el host es más ancho que los 24px del riel. */
+  margin-inline: auto;
+}
+
+.co-slider--vertical .co-slider__track {
+  box-sizing: border-box;
+  /* El grosor del riel, en el eje que corresponde. */
+  width: var(--co-slider-track-thickness, 4px);
+  height: 100%;
+  /* El relleno se ancla ABAJO y crece hacia arriba: arriba es MÁS. */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.co-slider--vertical .co-slider__fill {
+  width: 100%;
+  /* El alto lo escribe el inline style del render (el % del valor); acá solo
+     se impide que el flex lo encoja y se muda la transición al eje correcto. */
+  flex-shrink: 0;
+  transition: height var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+.co-slider--vertical .co-slider__thumb {
+  /* `top: auto` es obligatorio: el render posiciona por `bottom` y, con `top`
+     y `bottom` a la vez, el `top: 50%` de la regla base ganaría. */
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+/* (0,3,0) — le gana por especificidad a `.co-slider--dragging .co-slider__thumb`
+   esté donde esté: el arrastre agranda el thumb SIN perder el anclaje vertical. */
+.co-slider--vertical.co-slider--dragging .co-slider__thumb {
+  transform: translate(-50%, 50%) scale(1.15);
+}
+
+/* El `<input type="range">` oculto es el NODO ACCESIBLE del control, y para
+   Chromium la orientación de un slider NATIVO sale del modo de escritura de su
+   layout: `aria-orientation="vertical"` solo, sobre un input de 1×1, se
+   ignora (medido con el árbol de accesibilidad por CDP: reportaba
+   `orientation: horizontal`). `writing-mode: vertical-rl` lo vuelve vertical de
+   verdad, y `direction: rtl` pone el MÍNIMO ABAJO — sin el `rtl`, el teclado
+   nativo queda al revés (↑ bajaba). Con los dos: árbol de accesibilidad
+   `orientation: vertical` y flechas en el eje correcto (↑/→ suben, ↓/← bajan).
+   El input sigue recortado a 1px, así que nada de esto se ve. */
+.co-slider--vertical .co-slider__native {
+  writing-mode: vertical-rl;
+  direction: rtl;
+}
+
+/* En vertical la raíz pasa a GRILLA para que las marcas (`showMarks`) queden al
+   LADO del riel, a la altura de sus extremos, y no apiladas debajo: son
+   hermanas del riel en el DOM, y en una columna flex terminaban abajo.
+
+   Una sola columna EXPLÍCITA: la segunda la crea la marca con `grid-column: 2`
+   y existe solo si hay marcas. Declarar dos columnas fijas metía, sin marcas,
+   el `gap` heredado como aire muerto a la derecha y descentraba el riel. */
+.co-slider--vertical {
+  display: grid;
+  grid-template-columns: max-content;
+  grid-auto-columns: max-content;
+  justify-content: center;
+}
+
+/* Todo lo que NO son marcas va anclado a la columna 1. Es obligatorio, no
+   cosmético: la columna 2 que declara `.co-slider__marks` entra a la grilla
+   implícita ANTES del auto-placement, así que sin este ancla el riel se colaba
+   en ella (labels → 1,1 · riel → 1,2 · marcas → 2,2) y las marcas terminaban
+   igual de abajo que con flex. Medido en navegador. */
+.co-slider--vertical .co-slider__labels,
+.co-slider--vertical .co-slider__track-wrapper,
+.co-slider--vertical .co-slider__helper {
+  grid-column: 1;
+}
+
+/* La columna se encoge al contenido, así que el `space-between` de la fila de
+   etiquetas ya no separa nada: el gap lo pone esta regla. */
+.co-slider--vertical .co-slider__labels {
+  gap: var(--co-spacing-sm2);
+}
+
+/* El alto de la fila lo fija el riel y la marca se estira a él (`stretch`):
+   con `column-reverse` + `space-between`, el mínimo queda ABAJO y el máximo
+   ARRIBA, cada uno a la altura de su punta del riel. */
+.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);