@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/esm/co-tooltip.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, h, a as getElement } from './index-Es9IUmmt.js';
 import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-C2mZ7x_Y.js';
 
-const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity 0.15s ease, transform 0.15s ease}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}`;
+const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}:host([block]){display:block;width:100%;min-width:0}:host([block]) .co-tooltip,:host([block]) .co-tooltip__trigger{display:block;width:100%;min-width:0}.co-tooltip__panel{position:fixed;inset:auto;top:0;left:0;margin:0;border:0;max-height:none;overflow:visible;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;background:var(--co-color-base-negro, #1f1c1b);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary, 'Geist', sans-serif);font-size:var(--co-font-size-12, 12px);line-height:1.4;font-weight:400;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 12px rgba(31, 28, 27, 0.12);white-space:normal;word-wrap:break-word;transition:opacity 0.15s ease, transform 0.15s ease}.co-tooltip__panel--positioned{visibility:visible;opacity:1}.co-tooltip__panel--top{transform:translateY(4px)}.co-tooltip__panel--top.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--bottom{transform:translateY(-4px)}.co-tooltip__panel--bottom.co-tooltip__panel--positioned{transform:translateY(0)}.co-tooltip__panel--left{transform:translateX(4px)}.co-tooltip__panel--left.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__panel--right{transform:translateX(-4px)}.co-tooltip__panel--right.co-tooltip__panel--positioned{transform:translateX(0)}.co-tooltip__arrow{position:absolute;width:0;height:0;border:5px solid transparent}.co-tooltip__arrow--top{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:var(--co-color-base-negro, #1f1c1b);border-bottom:none}.co-tooltip__arrow--bottom{top:-5px;left:50%;transform:translateX(-50%);border-bottom-color:var(--co-color-base-negro, #1f1c1b);border-top:none}.co-tooltip__arrow--left{right:-10px;top:50%;transform:translateY(-50%);border-left-color:var(--co-color-base-negro, #1f1c1b);border-right:none}.co-tooltip__arrow--right{left:-5px;top:50%;transform:translateY(-50%);border-right-color:var(--co-color-base-negro, #1f1c1b);border-left:none}.co-tooltip__content{display:block}`;
 
 const CoTooltip = class {
     constructor(hostRef) {
@@ -25,6 +25,10 @@ const CoTooltip = class {
         this.flip = true;
         /** Maximum width before text wraps. */
         this.maxWidth = '280px';
+        /** Full-width wrapper (opt-in) so the tooltip can wrap a flex/grid child that
+         *  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;
         // ── State ──────────────────────────────────────────────────
         this.visible = false;
         this.actualPlacement = 'top';
@@ -89,18 +93,24 @@ const CoTooltip = class {
             this.actualPlacement = actualPlacement;
             let finalTop = top;
             let finalLeft = left;
-            // Compensate for transformed ancestors
-            if (!this.offsetAncestorComputed) {
-                this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
-                // Only cache if the element is connected (traversal was reliable)
-                if (this.cachedOffsetAncestor || this.panelEl.isConnected) {
-                    this.offsetAncestorComputed = true;
+            // Compensate for transformed ancestors. When the panel is promoted to the
+            // top layer (Popover API), `position:fixed` resolves against the viewport
+            // regardless of any transformed/filtered ancestor — so skip compensation
+            // (it would double-shift). Only applies in the no-Popover-API fallback.
+            const promoted = this.panelEl.matches(':popover-open');
+            if (!promoted) {
+                if (!this.offsetAncestorComputed) {
+                    this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
+                    // Only cache if the element is connected (traversal was reliable)
+                    if (this.cachedOffsetAncestor || this.panelEl.isConnected) {
+                        this.offsetAncestorComputed = true;
+                    }
+                }
+                if (this.cachedOffsetAncestor) {
+                    const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
+                    finalTop -= parentRect.top;
+                    finalLeft -= parentRect.left;
                 }
-            }
-            if (this.cachedOffsetAncestor) {
-                const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
-                finalTop -= parentRect.top;
-                finalLeft -= parentRect.left;
             }
             if (this.panelEl) {
                 this.panelEl.style.top = `${finalTop}px`;
@@ -134,6 +144,10 @@ const CoTooltip = class {
             this.cleanupListeners();
             this.cachedOffsetAncestor = null;
             this.offsetAncestorComputed = false;
+            // The panel is removed from the DOM by the conditional render (which also
+            // evicts it from the top layer); drop the now-detached ref so no async
+            // updatePosition can touch a stale element before the next show re-sets it.
+            this.panelEl = undefined;
         }
     }
     onDisabledChange(isDisabled) {
@@ -158,6 +172,26 @@ const CoTooltip = class {
         this.clearShowTimeout();
         this.clearHideTimeout();
     }
+    /**
+     * Promote the tooltip panel to the browser top layer (Popover API) so an
+     * ancestor's filter / mask / overflow / transform can't clip or mis-anchor it
+     * — needed when the trigger lives inside another top-layer panel (co-popover).
+     * Mirrors co-popover. No-ops where unsupported (falls back to in-place fixed
+     * positioning + offset-ancestor compensation).
+     */
+    promotePanel() {
+        const el = this.panelEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            if (!el.matches(':popover-open'))
+                el.showPopover();
+        }
+        catch (_a) {
+            /* browser rejected promotion (already open, or element left the DOM in the
+               same frame) — safe to ignore; falls back to in-place positioning */
+        }
+    }
     // ── Scroll/resize listeners ────────────────────────────────
     addScrollListeners() {
         window.addEventListener('resize', this.scheduleUpdate, { passive: true });
@@ -184,15 +218,16 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '77842efc5b054b049c4fb38f8d1f43fb2f6c418d', class: "co-tooltip" }, h("div", { key: '406170b45a6cc284253151b986c0d1fc8375ce30', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '169ec07030c124a4cbea6cb4b56ec75682af1793' })), this.visible && this.content && (h("div", { key: '58f68348a2068dbfa8fc16a0dea4cdee2f64093b', id: "tooltip-panel", class: {
+        return (h("div", { key: '407081c1161c66c3b92bba5b3749037c699a295a', class: "co-tooltip" }, h("div", { key: '4e474a3da2f5cefc0e169c3a13831d65db25141d', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '9d45e56eb8558014da63636523804f7e2b8ee496' })), this.visible && this.content && (h("div", { key: '786c9d7b144327ef19659d7c11c606defedf1a6d', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
-            }, role: "tooltip", ref: (el) => {
+            }, role: "tooltip", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
+                    this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'a5dc3bcdceb72c5e7a6533e3025b882743bfd19a', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'eaa99090f18a0160a42ad2885841cd3c0b163bba', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'af27dae062092962e43a6bf99cc405d7b8179e1f', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'a57899df6007a96dad58dd60b26092edea5cc3d8', class: "co-tooltip__content" }, this.content)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-transfer-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
 import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
 import './overlayscrollbars-ox7HzCZn.js';
 
@@ -123,11 +123,11 @@ const CoTransferList = class {
         this.osInstances = [];
     }
     render() {
-        return (h("div", { key: 'fd9cddc7be36b5acc9bc5852a9173b2ed950e529', class: {
+        return (h("div", { key: 'a4c5b8104be1db28bdabc04f0157893c41dca97a', class: {
                 'co-transfer-list': true,
                 'co-transfer-list--disabled': this.disabled,
                 [`co-transfer-list--${this.status}`]: this.status !== 'default',
-            } }, this.label && h("label", { key: '6bcde50bb852ee58443d44b43ce5d67ad425f013', class: "co-transfer-list__label" }, this.label), h("div", { key: '836b094c4ccf69d4cfbaace4283e87ec55c13d07', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '8222a5f1207514f500e222a175ce9aef20e9df5f', class: "co-transfer-list__actions" }, h("button", { key: '21b61c709b1b66f293289fb8ae6e2e40fcdc1fb6', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: 'c575643b4988a6f36ce0b738a400d0f4270b339d', name: "caret-double-right", size: 16 })), h("button", { key: 'db88f4725eb0e8e0e9cd573bf4ee6613f9b752de', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '789e6f0b3934a1ce571b1b24f78d215f263793b9', name: "caret-right", size: 16 })), h("button", { key: '72c2829abff4dc3453ccebb9846fb4b5b423a044', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '2a77ca393a41134dd0b8befa085c1ff0caa050ef', name: "caret-left", size: 16 })), h("button", { key: '292bf6d2cc097523c6ea14a694cd134ed5526935', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: 'fc5f1f90f4eec18a4a3db20301a787280f77ba92', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '112008f9b2f9ef0e72a4c3add8d89319fa5e1c89', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '712da720169f753bc161922edac625a44ea5e6d2', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: 'ad424d40bad49265e88cf3c0a524f74b5213e406', class: "co-transfer-list__helper-text" }, this.helperText)))));
+            } }, this.label && h("label", { key: '09087d1dee8e5eddad6797b004adb0253e7358eb', class: "co-transfer-list__label" }, this.label), h("div", { key: '6705417ab5578a9067affc261578a5c57a5824ed', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '7c122e5de9742b693bad8bd5ac4b6e6a01d1ce0a', class: "co-transfer-list__actions" }, h("button", { key: '8293600e513527dfc3ab00d89a6ea08f9faba3ad', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: '4bc6969a39b2691f9e81ab22968b2b02c450e6fe', name: "caret-double-right", size: 16 })), h("button", { key: '28d10fcb814bd54445970119c5d28e95dc290f45', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '89d8acce183eeeb77eec55362226771c0f76c60d', name: "caret-right", size: 16 })), h("button", { key: 'b2365d7f507086895fc5d2e2bff2eb507a6dca5d', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: 'e9947a0049407918c1e6bd0e38b7c035bf8b4531', name: "caret-left", size: 16 })), h("button", { key: '9834d51491259af22cc84306cb4c66dd600774a3', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: '89cb6c2bbd8647ef2bc589b054e6e6ca68fce023', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '2c4d8d446a88215cd4492078c7ca2b0b17b463b8', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '0ae2ead4e24151fbfeaf3068b3fd03a16e0fdd83', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '2b600a862af2f94d26c545f20f30d857e8625ebb', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
 };