@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -165,3 +165,39 @@
 .co-tooltip__content {
   display: block;
 }
+
+/* ── Variant: label (compact pill for a labeled trigger) ───── */
+/* Aditivo: solo aplica con variant="label"; el panel default (arriba) no cambia. */
+.co-tooltip__panel--label {
+  padding: 4px 8px;
+  border-radius: var(--co-border-radius-xs, 8px);
+  font-weight: var(--co-font-weight-medium, 500);
+  line-height: 1;
+  box-shadow: none;
+}
+
+/* La flecha sigue montada en el DOM (el default de `arrow` no cambia); acá
+   solo se apaga visualmente para esta variante. */
+.co-tooltip__panel--label .co-tooltip__arrow {
+  display: none;
+}
+
+/* ── Shortcut chip (co-kbd) ─────────────────────────────────── */
+.co-tooltip__panel--with-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Panel default + shortcut: +4px sobre el padding derecho base, para separar
+   el chip del borde (brief: "gap 6 y padding derecho 4"). */
+.co-tooltip__panel--with-shortcut:not(.co-tooltip__panel--label) {
+  padding-right: 10px; /* spacing-sm (6px) + 4 */
+}
+/* Label + shortcut: el chip `co-kbd` va a 4px del borde derecho del pill
+   (diseño Fase 4 del editor: el chip es el que cierra el pill, no el texto).
+   Antes quedaba en 12 (8 del label + 4) y el editor lo parchaba vía
+   `::part(panel)`. Solo esta variante cambia. */
+.co-tooltip__panel--label.co-tooltip__panel--with-shortcut {
+  padding-right: 4px;
+}

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

@@ -1,5 +1,15 @@
 import { h } from "@stencil/core";
 import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
+/**
+ * Globo de ayuda que aparece al pasar el mouse o enfocar el control envuelto.
+ * Es la forma de rotular un control de solo ícono (en lugar del `title`
+ * nativo), pero no le da nombre accesible: el control lleva el suyo.
+ * `variant="label"` + `shortcut` muestran el atajo con un `co-kbd`. Wrapper Vue:
+ * `CoTooltip` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - El control que dispara el tooltip.
+ * @part panel - El globo.
+ */
 export class CoTooltip {
     constructor() {
         // ── Props ──────────────────────────────────────────────────
@@ -25,6 +35,13 @@ export class CoTooltip {
          *  must fill its track — e.g. an ellipsised list/table cell — without the
          *  inline-block wrapper shrink-wrapping it. Drives the `:host([block])` CSS. */
         this.block = false;
+        /**
+         * Visual variant. `label` = compact pill for a labeled trigger with an
+         * optional keyboard shortcut (radius `--co-border-radius-xs`, tighter
+         * padding, medium (500) text, `line-height: 1`, no shadow, arrow hidden). The
+         * arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
+         */
+        this.variant = 'default';
         // ── State ──────────────────────────────────────────────────
         this.visible = false;
         this.actualPlacement = 'top';
@@ -256,17 +273,19 @@ export class CoTooltip {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '3a46d7e7c0877bc7fd90a53b83638ed975bcd7fd', class: "co-tooltip" }, h("div", { key: 'eea03b0f5c36b5be47d099ac054ada2188045d9e', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: 'ddbe294fb30fec5694d0f585f7cd46a04d8c0e2f' })), (this.visible || this.closing) && this.content && (h("div", { key: 'd49dadcbe99984fe6b89338f9565043c1d41120a', id: "tooltip-panel", class: {
+        return (h("div", { key: '816e80ee775d782c3827fb3ba43187992e348429', class: "co-tooltip" }, h("div", { key: 'd4d3b56ae5502ccc4fc5c30c5191860ebef51140', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '357ff69bca524ce8c5f3ec21936fef944733cd22' })), (this.visible || this.closing) && this.content && (h("div", { key: '7d379c2ddafa6e84fbe5d5a4d3e9192a3ddfac87', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
                 'co-tooltip__panel--closing': this.closing,
-            }, role: "tooltip", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+                'co-tooltip__panel--label': this.variant === 'label',
+                'co-tooltip__panel--with-shortcut': !!this.shortcut,
+            }, role: "tooltip", popover: "manual", part: "panel", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '7d1a1d80cad876d841005a9a9a0170bb222d51d6', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '28186d3c0fc0ac8f3193dc6f333cbde537c461f3', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '0898aa009807ee6d48cdb01a5db9f4ef773804b9', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '07678a78b9fdf0955c54d4dc2c491e5205e7937d', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '24aa138140da114eed006f3488dc6cbc105ccee3', keys: this.shortcut, surface: "dark", size: "xs" })))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -488,6 +507,45 @@ export class CoTooltip {
                 "reflect": true,
                 "attribute": "block",
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'label'",
+                    "resolved": "\"default\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. `label` = compact pill for a labeled trigger with an\noptional keyboard shortcut (radius `--co-border-radius-xs`, tighter\npadding, medium (500) text, `line-height: 1`, no shadow, arrow hidden). The\narrow hide is CSS-only \u2014 `arrow`'s own default/behavior is unchanged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "shortcut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional keyboard shortcut rendered as a `co-kbd` chip next to `content`\n(dark surface, xs size) \u2014 e.g. content \"Seleccionar\" + shortcut \"v\". In\n`variant=\"label\"` the chip sits 4px from the pill's right edge\n(`padding-right: 4px`); the default panel keeps its 10px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut"
             }
         };
     }

package/dist/collection/components/co-transfer-list/co-transfer-list.js

@@ -1,14 +1,23 @@
 import { h } from "@stencil/core";
 import { initOverlayScroll } from "../../utils/overlayScroll";
+/**
+ * Selector de dos listas: se marcan opciones en la lista de disponibles y se
+ * pasan a la de seleccionadas (y de vuelta) con botones de mover, uno o todos.
+ * Wrapper Vue: `CoTransferList` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoTransferList {
     constructor() {
+        /** Título de la lista de disponibles. */
         this.leftTitle = 'Available';
+        /** Título de la lista de seleccionadas. */
         this.rightTitle = 'Selected';
         /** All available options */
         this.options = '[]';
         /** Values in the right (selected) list */
         this.value = '[]';
+        /** Deshabilita las listas y los botones. */
         this.disabled = false;
+        /** Estado de validación: colorea el `helperText`. */
         this.status = 'default';
         this.leftChecked = new Set();
         this.rightChecked = new Set();
@@ -117,11 +126,11 @@ export class CoTransferList {
         this.osInstances = [];
     }
     render() {
-        return (h("div", { key: 'a66d26c3f7d91cc1ad33a1c347637d6c03e13a2e', class: {
+        return (h("div", { key: '31890d6f8b8201b20c286448098ba96b84313192', class: {
                 'co-transfer-list': true,
                 'co-transfer-list--disabled': this.disabled,
                 [`co-transfer-list--${this.status}`]: this.status !== 'default',
-            } }, this.label && h("label", { key: '08cf6b7951890739f73e79edf2dd76a4de5131c3', class: "co-transfer-list__label" }, this.label), h("div", { key: 'e83826673d6ba30e6700bd4401c122820a5db9be', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '7e65ed93739f9eed3160d4ff26ff3c3bf8f7f48e', class: "co-transfer-list__actions" }, h("button", { key: 'cc4a2b991dc65f2660e589e7f11122359a465aec', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: 'def57d75c3ed67224f023e6de630de2fa0cb3043', name: "caret-double-right", size: 16 })), h("button", { key: 'd072365087785e09a0a34a3e3f9f2b9f5e56e1df', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: 'd298964acff41d2dc6c4d6eb39ae9bcc916973dc', name: "caret-right", size: 16 })), h("button", { key: '5c3cc98de6ee806d35f6369623cbbc7ffdf906b7', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '04084366aa7437612e8dee522f94266db6bea4cd', name: "caret-left", size: 16 })), h("button", { key: '3fa6e88f7ec9ea49b34d5f18cbccf21124509bff', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: 'fd0a35d20f5d7a8c1b4fb2010bb82e19cbc07225', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: 'd4cca5feb1972a4a43039bf68780e1ef43bba802', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '065ecb392fb716cc2df70eb01993e89f3fa14ad6', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '293fd383071786d53318b2f2c2713fed39400a21', class: "co-transfer-list__helper-text" }, this.helperText)))));
+            } }, this.label && h("label", { key: '03682912da82bb6590d6c3cd4a070dc8d4214744', class: "co-transfer-list__label" }, this.label), h("div", { key: '33562c5fc6372f8cbee86751f593959f0b851466', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '1f4125394ac963351e08f7722dc7f73fa86ccfc9', class: "co-transfer-list__actions" }, h("button", { key: 'b070ea660c6997f2281a3a3dcdf15764665408ee', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: 'a46764f1308c49ff1cfcaeeab8b60434c4347b72', name: "caret-double-right", size: 16 })), h("button", { key: 'f57ef7e0a56e1f257277407d7eb47d28830d60fb', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '3dc5c8df4936dd79c9c7947f1f669cf12c2d785e', name: "caret-right", size: 16 })), h("button", { key: '76ffe11208d14d89683a558d2004fb831fdc3ebf', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '31565d71c489ccbe4b58edd89c867210a7077870', name: "caret-left", size: 16 })), h("button", { key: 'af464a61aa1a553b5e8218d14fdd62b5618e4d0e', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: '86ebbd7639f1d56c4073e55792a397213ed7b426', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '769fc2d953ad3c24a1fbaaafd2054376e8c452b3', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '62d8663352ece7628a569a9b6808d4e9f921649d', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '9480ee4c4fdc4c9ee62836ad33e555fe550650b6', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-transfer-list"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +158,7 @@ export class CoTransferList {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -168,7 +177,7 @@ export class CoTransferList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "T\u00EDtulo de la lista de disponibles."
                 },
                 "getter": false,
                 "setter": false,
@@ -188,7 +197,7 @@ export class CoTransferList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "T\u00EDtulo de la lista de seleccionadas."
                 },
                 "getter": false,
                 "setter": false,
@@ -205,7 +214,7 @@ export class CoTransferList {
                     "references": {
                         "TransferOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
                             "id": "src/components/co-transfer-list/co-transfer-list.tsx::TransferOption"
                         }
                     }
@@ -254,7 +263,7 @@ export class CoTransferList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita las listas y los botones."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +283,7 @@ export class CoTransferList {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -293,7 +302,7 @@ export class CoTransferList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: colorea el `helperText`."
                 },
                 "getter": false,
                 "setter": false,
@@ -318,7 +327,7 @@ export class CoTransferList {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 la lista de seleccionadas (`value` ya est\u00E1 actualizado); `detail` = array de valores."
                 },
                 "complexType": {
                     "original": "string[]",

package/dist/collection/components/co-tree-item/co-tree-item.css

@@ -0,0 +1,235 @@
+/**
+ * @prop --co-tree-item-selected-bg: Fondo de la fila con `selection="solid"` (default el acento).
+ * @prop --co-tree-item-selected-color: Texto e íconos con `selection="solid"` (default on-accent).
+ * @prop --co-tree-item-selected-soft-bg: Fondo con `selection="soft"` (default celeste-100).
+ * @prop --co-tree-item-group-bg: Fondo del bloque de hijos de una fila expandida (default celeste-100 al 50%).
+ * @prop --co-tree-item-hover-bg: Fondo de la fila en hover.
+ * @prop --co-tree-item-indent: Sangría por nivel de `depth` (default 24px).
+ * @prop --co-tree-item-caret-space: Hueco que reservan las filas SIN chevron (default 0; 12px alinea un árbol mixto). Se pone en el contenedor.
+ */
+/* co-tree-item — fila de árbol (Páginas / Capas del editor).
+ *
+ * Variables públicas (todas con fallback; los tokens
+ * `--co-semantic-accent`, `--co-semantic-on-accent` y `--co-color-celeste-100`
+ * llevan el literal para hosts con un build de tokens anterior):
+ *   --co-tree-item-selected-bg        fondo `selection="solid"`   (accent)
+ *   --co-tree-item-selected-color     texto `selection="solid"`   (on-accent)
+ *   --co-tree-item-selected-soft-bg   fondo `selection="soft"`    (celeste-100)
+ *   --co-tree-item-group-bg           bloque de hijos             (celeste-100 al 50 %)
+ *   --co-tree-item-hover-bg           hover de fila               (surface-hover)
+ *   --co-tree-item-indent             sangría por nivel           (24px)
+ *   --co-tree-item-caret-space        hueco reservado en filas SIN chevron (0px;
+ *                                     12px alinea iconos en un árbol mixto)
+ *
+ * Medidas (spec §2): padding lateral 8, izquierdo 8 + depth × indent (inline,
+ * lo pone el .tsx); radio 6; chevron 8 + gap 4; icono 12 + gap 8; label
+ * 12/400 lh 1 tracking −0.03em; acciones 12 con gap 8; alto 28 (`s`) / 24 (`xs`).
+ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.co-tree-item {
+  display: block;
+}
+
+/* ─── Fila ─────────────────────────────────────────────────── */
+.co-tree-item__row {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 28px;
+  padding-right: 8px;
+  /* padding-left: calc(8px + depth * indent) — inline desde el .tsx */
+  border-radius: 6px;
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-tree-item--xs > .co-tree-item__row {
+  height: 24px;
+}
+
+.co-tree-item__row:hover {
+  background-color: var(--co-tree-item-hover-bg, var(--co-semantic-surface-hover));
+}
+
+/* ─── Selección ────────────────────────────────────────────── */
+.co-tree-item--soft > .co-tree-item__row {
+  background-color: var(--co-tree-item-selected-soft-bg, var(--co-color-celeste-100));
+}
+
+/* El hover de una fila `soft` se APILA sobre el tinte (no lo reemplaza por
+   gris): un gradiente plano del color de hover encima del fondo celeste. */
+.co-tree-item--soft > .co-tree-item__row:hover {
+  background-image: linear-gradient(
+    var(--co-tree-item-hover-bg, var(--co-semantic-surface-hover)),
+    var(--co-tree-item-hover-bg, var(--co-semantic-surface-hover))
+  );
+}
+
+.co-tree-item--solid > .co-tree-item__row,
+.co-tree-item--solid > .co-tree-item__row:hover {
+  background-color: var(--co-tree-item-selected-bg, var(--co-semantic-accent));
+  background-image: none;
+  color: var(--co-tree-item-selected-color, var(--co-semantic-on-accent));
+}
+
+/* ─── Foco (el tabindex lo pone el consumidor en el host) ─── */
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:focus-visible) .co-tree-item__row {
+  box-shadow: inset 0 0 0 2px var(--co-semantic-border-focus);
+}
+
+/* ─── Chevron ──────────────────────────────────────────────── */
+/* Glifo de 8 + gap 4 según spec, pero con un área de clic de 16×16: el botón
+   se "asoma" 4px hacia la izquierda con margen negativo y termina justo donde
+   arranca el gap, así el layout medido (8 + 4) no cambia. */
+.co-tree-item__caret {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0 0 0 -4px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--co-semantic-text-muted);
+  cursor: pointer;
+  font: inherit;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-tree-item__caret:hover {
+  background-color: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-tree-item__caret:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: -2px;
+}
+
+.co-tree-item--solid .co-tree-item__caret {
+  color: inherit;
+}
+
+.co-tree-item--solid .co-tree-item__caret:hover {
+  background-color: color-mix(in srgb, currentColor 16%, transparent);
+}
+
+/* Hueco opcional en filas sin chevron (0 por defecto; ver cabecera). */
+.co-tree-item__caret-space {
+  flex: none;
+  width: var(--co-tree-item-caret-space, 0px);
+}
+
+/* ─── Prefix / icono / label / suffix ──────────────────────── */
+slot[name='prefix']::slotted(*) {
+  flex: none;
+  margin-right: 8px;
+}
+
+.co-tree-item__icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+  color: inherit;
+}
+
+/* El input de renombrar (slot `label`, light DOM) debe poder seleccionar su
+   texto aunque la fila lleve `user-select: none` (Safari lo hereda al input). */
+slot[name='label']::slotted(*) {
+  user-select: text;
+}
+
+.co-tree-item__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: var(--co-font-weight-regular, 400);
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* El suffix es una caja real (para que `::part(suffix)` sirva, p. ej. revelar
+   las acciones al hover con opacity) pero sin gap ni margen propios: cada
+   acción (light DOM) trae su margen de 8, así un suffix vacío no deja hueco. */
+.co-tree-item__suffix {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+slot[name='suffix']::slotted(*) {
+  flex: none;
+  margin-left: 8px;
+}
+
+/* ─── Bloque de hijos ──────────────────────────────────────── */
+.co-tree-item__children {
+  display: none;
+}
+
+.co-tree-item--expanded > .co-tree-item__children {
+  display: block;
+}
+
+/* Grupo abierto CON hijos: la fila padre cierra en ángulo abajo y el bloque
+   de hijos continúa el contorno con el tinte de grupo y radio solo abajo. */
+.co-tree-item--group > .co-tree-item__row {
+  border-radius: 6px 6px 0 0;
+}
+
+.co-tree-item--group > .co-tree-item__children {
+  background-color: var(
+    --co-tree-item-group-bg,
+    color-mix(in srgb, var(--co-color-celeste-100) 50%, transparent)
+  );
+  border-radius: 0 0 6px 6px;
+}
+
+/* ─── Disabled ─────────────────────────────────────────────── */
+.co-tree-item--disabled > .co-tree-item__row {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.co-tree-item--disabled > .co-tree-item__row:hover {
+  background-color: transparent;
+  background-image: none;
+}
+
+.co-tree-item--disabled.co-tree-item--soft > .co-tree-item__row:hover {
+  background-color: var(--co-tree-item-selected-soft-bg, var(--co-color-celeste-100));
+}
+
+.co-tree-item--disabled.co-tree-item--solid > .co-tree-item__row:hover {
+  background-color: var(--co-tree-item-selected-bg, var(--co-semantic-accent));
+}
+
+.co-tree-item--disabled .co-tree-item__caret {
+  cursor: not-allowed;
+}
+
+.co-tree-item--disabled .co-tree-item__caret:hover {
+  background-color: transparent;
+}