@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -25,6 +25,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 +263,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: '42e40af183afae3fe39ea52e7ab834d2e2ef2a1f', class: "co-tooltip" }, h("div", { key: '021c63ead4abcfc8bd938657af0f4486a710e1d0', 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: '93bfbae6583c49cd0e38accce52b2ee7029a3bc0' })), (this.visible || this.closing) && this.content && (h("div", { key: 'd5bf6003b83490d21869f41ae49c24dd347b7d82', 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: '1f3ef81dd7d655e68958321a33a5d405ba671f83', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'a33a95e77ee0bc6922a0c81a63f9862b2ccf9bf5', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '608bba77bfc7d43a3ca4d4a2f0c87290b1a9de57', keys: this.shortcut, surface: "dark", size: "xs" })))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -488,6 +497,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

@@ -117,11 +117,11 @@ export class CoTransferList {
         this.osInstances = [];
     }
     render() {
-        return (h("div", { key: 'a66d26c3f7d91cc1ad33a1c347637d6c03e13a2e', class: {
+        return (h("div", { key: '10f7ff92e36b92f0a92fa2a286242f651d7da22c', 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: 'da07e59288cfb85b4d95e62aa7f61d65a0ac5931', class: "co-transfer-list__label" }, this.label), h("div", { key: '8d4a921850b838f9096402ba947af8b164eb541e', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: 'a258db503eb7477c16186ba58755b8696610ffdb', class: "co-transfer-list__actions" }, h("button", { key: '11d8275f690eb58f07b69044fcadb501d520a34b', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: '3a637822c740096295bb4129e9f8366b61fc906c', name: "caret-double-right", size: 16 })), h("button", { key: '2fea7b08d006352a5c5b0e2f46e558bea4448019', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '4f016d94cf4fe7a621decdd630c16d63cd82944d', name: "caret-right", size: 16 })), h("button", { key: 'acf8b07e343c527d231c65dd31ff27b765da2e89', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '4e2cd858347069f84e2adef89ed8519f70f42b62', name: "caret-left", size: 16 })), h("button", { key: '59c8b06cfcfe5804f73d2c402052e86baae5e2c9', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: '7d00c3cd0866d92ef0d456b419f9b3fe0c25c71e', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '4d54c76de7e18a5a5b5ea40f9b5dea4a5551440e', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2e1017e680c759d1b67d8b1b03ffbebbfa6d1068', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '9533af921d596314d489656706aeecfe004182b1', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-transfer-list"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +205,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-release-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"
                         }
                     }

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

@@ -0,0 +1,226 @@
+/* co-tree-item — fila de árbol (Páginas / Capas del editor).
+ *
+ * Variables públicas (todas con fallback; los tokens nuevos de la Task C1
+ * `--co-semantic-accent`, `--co-semantic-on-accent` y `--co-color-celeste-100`
+ * llevan el literal mientras C1 no esté integrada):
+ *   --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;
+}