@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

package/dist/collection/components/co-select/virtualRows.js

@@ -0,0 +1,57 @@
+/**
+ * Geometría del virtualizador de filas de `co-select`, pura: recibe medidas y
+ * devuelve medidas, sin tocar el DOM (el componente es el que las lee del CSS).
+ *
+ * El paso de una fila es su ALTO más el HUECO hasta la siguiente. Los dos salen
+ * de los knobs del menú (`--co-select-option-height`, `--co-select-menu-gap`);
+ * sin ellos rige el paso de 0.10.x (ver `LEGACY_ROW_METRICS`).
+ */
+/**
+ * Paso histórico, el de 0.10.x: 34 px por fila, sin hueco. Las filas por defecto
+ * miden 32 (`min-height`), así que el virtualizador reserva 2 px de más por fila
+ * — la lista corta muestra ese sobrante como aire al pie del panel. Se conserva
+ * TAL CUAL para que ningún consumidor actual vea cambiar el alto de su menú; el
+ * que setea `--co-select-option-height` obtiene el paso exacto de sus filas. Es
+ * el mismo 34 del fallback del `max-height` de `.co-select__options`.
+ */
+export const LEGACY_ROW_METRICS = Object.freeze({ rowHeight: 34, gap: 0 });
+const pitch = (m) => m.rowHeight + m.gap;
+/** Alto de `count` filas apiladas: sin hueco colgando después de la última. */
+export function listHeight(count, m) {
+    return count > 0 ? count * m.rowHeight + (count - 1) * m.gap : 0;
+}
+/** Ventana de filas a renderizar para un `scrollTop`, con `overscan` a cada lado. */
+export function virtualSlice(total, scrollTop, m, viewportItems, overscan) {
+    const step = pitch(m);
+    const startIdx = Math.max(0, Math.floor(scrollTop / step) - overscan);
+    const endIdx = Math.min(total, startIdx + viewportItems + overscan * 2);
+    return { totalHeight: listHeight(total, m), startIdx, endIdx, offsetY: startIdx * step };
+}
+/**
+ * `scrollTop` que deja la fila `index` entera dentro de una ventana de
+ * `viewportItems` filas: si está arriba, la sube al borde superior; si está
+ * abajo, la pega al inferior; si ya se ve, no mueve nada.
+ */
+export function scrollTopToReveal(index, scrollTop, m, viewportItems) {
+    const top = index * pitch(m);
+    const bottom = top + m.rowHeight;
+    const viewportH = listHeight(viewportItems, m);
+    if (top < scrollTop)
+        return top;
+    if (bottom > scrollTop + viewportH)
+        return bottom - viewportH;
+    return scrollTop;
+}
+/**
+ * Medidas a partir de los knobs. `readPx` devuelve el valor en px de una custom
+ * property, o `null` si no está seteada o no se puede resolver a px. Lo que
+ * falte o sea inválido (alto ≤ 0, hueco < 0, NaN) cae al valor histórico.
+ */
+export function resolveRowMetrics(readPx) {
+    const h = readPx('--co-select-option-height');
+    const g = readPx('--co-select-menu-gap');
+    return {
+        rowHeight: h != null && h > 0 ? h : LEGACY_ROW_METRICS.rowHeight,
+        gap: g != null && g >= 0 ? g : LEGACY_ROW_METRICS.gap,
+    };
+}

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '164044b86003ca2ed8c15a2d82cc50922dfe8313', class: {
+        return (h("hr", { key: '5ec10f688fd0c97ce0d5ec38487dce4ecac6801a', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '3d14a99c008dd92798182b04d7049c1a9fb4a00c', class: {
+        return (h("nav", { key: '2bd29e3c2289513b465e2fdb9f77fb12285810c1', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '1bf5b8ebe9eb9836c01ac8c7b651aac8af2ebf3c', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'ba0d88bf62955a61b3e2d297261b260845cbd98f', name: "header" })), h("div", { key: '793248e8020bd38e3da64e35ca8610cb85b17d4a', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'a76928e89d8425846ad0859339ab35b465bf917e' })), h("div", { key: '4182d50c61913447ae78c670bba1ca1821cc763d', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'bb20795e0acc8e1865f8b5d8568768eb5c5097ee', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: 'eefb2332e89165064c0b81f4da901a7609600069', class: "co-sidebar__header", part: "header" }, h("slot", { key: '756485fbd108582d8909e7ff361f09582b2888d3', name: "header" })), h("div", { key: '2b7022ed173af8cb95cf0c9d0459ceb16bd4824c', class: "co-sidebar__body", part: "body" }, h("slot", { key: '96d09dd7282bb121388af3b500939adaa25b69e4' })), h("div", { key: '3ea395c4e7c98243bd5eb688e062c4e0d046b8fb', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '8412a6b2f15e99138bd566f224b10ea52b6b691e', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -388,6 +388,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',
@@ -496,10 +511,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: '247f01543c2bc200826c2be8d9913d748e0e741b', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d1610da26b8b8dc473b9b7baa3a1eedac275f38', 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: 'd6bcbf4478818bdc84d29b3e6186fc72122e2864', 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 +717,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-release-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

@@ -50,7 +50,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: '737eaa6e7ec7581151eda26ba506193d6c0ed6e5', class: {
                 'co-skeleton': true,
                 [`co-skeleton--${this.variant}`]: true,
                 'co-skeleton--revealed': this.revealed,

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

@@ -53,10 +53,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 +88,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 +113,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);