@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
-var positioning = require('./positioning-DozpXyBd.js');
+var index = require('./index-BumlM92r.js');
+var positioning = require('./positioning-DwHW399W.js');
 
-const coTooltipCss = () => `:host{display:inline-block;position:relative}.co-tooltip{display:inline-block}.co-tooltip__trigger{display:inline-block}.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) {
@@ -27,6 +27,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';
@@ -80,6 +84,9 @@ const CoTooltip = class {
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
             const panelRect = this.panelEl.getBoundingClientRect();
+            // Skip if panel is not laid out yet (not connected to DOM)
+            if (panelRect.width === 0 && panelRect.height === 0)
+                return;
             const { top, left, actualPlacement } = positioning.computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
@@ -88,15 +95,24 @@ const CoTooltip = class {
             this.actualPlacement = actualPlacement;
             let finalTop = top;
             let finalLeft = left;
-            // Compensate for transformed ancestors
-            if (!this.offsetAncestorComputed) {
-                this.cachedOffsetAncestor = positioning.getOffsetAncestor(this.panelEl);
-                this.offsetAncestorComputed = true;
-            }
-            if (this.cachedOffsetAncestor) {
-                const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
-                finalTop -= parentRect.top;
-                finalLeft -= parentRect.left;
+            // 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 = positioning.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.panelEl) {
                 this.panelEl.style.top = `${finalTop}px`;
@@ -130,6 +146,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) {
@@ -154,6 +174,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 });
@@ -180,15 +220,16 @@ const CoTooltip = class {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (index.h("div", { key: '3e8354dc6a54b9566b66383678b7822ac73fa5dd', class: "co-tooltip" }, index.h("div", { key: '37dc44fb875ad9695acbbdff668985a5333d6b32', 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 }, index.h("slot", { key: '95e4407d37a7677cfcfcb9e3d64d0a8ef167988a' })), this.visible && this.content && (index.h("div", { key: 'a4146ad80d3ec787b1c1d61ca5088375768ca667', id: "tooltip-panel", class: {
+        return (index.h("div", { key: '638cd078ca415c24e4da46d9fb3a5ab4a25a9ee2', class: "co-tooltip" }, index.h("div", { key: '5a98d9c8a99122b1c26be38e7926716cf36c46c0', 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 }, index.h("slot", { key: 'f481c969f09ced4838ba099d0dda1cbdbae4e32a' })), this.visible && this.content && (index.h("div", { key: '7b929dba8c546944723b2d2060b6f0bd521d9038', 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 && index.h("div", { key: '15a322164920483a286500729c46332fbff1b9ec', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), index.h("span", { key: '417aae8b03ba81cc0989fa66044ef98cd948b024', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && index.h("div", { key: 'a94520b95c5c2ebe6cb9488ae2e5c73d60000305', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), index.h("span", { key: 'fed5b28f34c15892cec3a0f6271b8940efe869dc', class: "co-tooltip__content" }, this.content)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,10 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
+var overlayScroll = require('./overlayScroll-ifzDNeyb.js');
+require('./overlayscrollbars-BlBHo2Xx.js');
 
-const coTransferListCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);line-height:1}.co-transfer-list{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-transfer-list__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default;padding:0 var(--co-spacing-xs)}.co-transfer-list--disabled .co-transfer-list__label{color:var(--co-semantic-text-disabled)}.co-transfer-list__body{display:flex;align-items:stretch;gap:var(--co-spacing-sm2)}.co-transfer-list__panel{flex:1;min-width:0;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);display:flex;flex-direction:column;overflow:hidden}.co-transfer-list__panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-sm2) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-muted)}.co-transfer-list__panel-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:500}.co-transfer-list__panel-count{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12)}.co-transfer-list__panel-body{flex:1;overflow-y:auto;max-height:240px;padding:var(--co-spacing-xs);scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-transfer-list__panel-body::-webkit-scrollbar{width:6px}.co-transfer-list__panel-body::-webkit-scrollbar-track{background:transparent}.co-transfer-list__panel-body::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-transfer-list__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xxs, 4px);cursor:pointer;transition:background 0.1s ease}.co-transfer-list__item:hover{background:var(--co-semantic-surface-hover)}.co-transfer-list__item--checked{background:var(--co-semantic-surface-muted)}.co-transfer-list__item--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-transfer-list__checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:var(--co-border-radius-xxs, 4px);border:1px solid var(--co-semantic-border-default);background:transparent;flex-shrink:0;transition:background 0.15s ease, border-color 0.15s ease;color:var(--co-semantic-on-primary)}.co-transfer-list__checkbox--checked{background:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-transfer-list__item-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1}.co-transfer-list__empty{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-lg);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14)}.co-transfer-list__actions{display:flex;flex-direction:column;justify-content:center;gap:var(--co-spacing-xs)}.co-transfer-list__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background 0.15s ease}.co-transfer-list__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-transfer-list__btn:disabled{opacity:0.3;cursor:not-allowed}.co-transfer-list__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-transfer-list__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-transfer-list__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-transfer-list__helper--error .co-transfer-list__helper-icon,.co-transfer-list__helper--error .co-transfer-list__helper-text{color:var(--co-semantic-status-error)}.co-transfer-list__helper--success .co-transfer-list__helper-icon,.co-transfer-list__helper--success .co-transfer-list__helper-text{color:var(--co-semantic-status-success)}.co-transfer-list__helper--warning .co-transfer-list__helper-icon,.co-transfer-list__helper--warning .co-transfer-list__helper-text{color:var(--co-color-status-review)}.co-transfer-list__helper--info .co-transfer-list__helper-icon,.co-transfer-list__helper--info .co-transfer-list__helper-text{color:var(--co-semantic-status-info)}.co-transfer-list--disabled .co-transfer-list__panel{opacity:0.5;pointer-events:none}.co-transfer-list--disabled .co-transfer-list__actions{pointer-events:none}.co-transfer-list--error .co-transfer-list__panel{border-color:var(--co-semantic-status-error)}.co-transfer-list--success .co-transfer-list__panel{border-color:var(--co-semantic-status-success)}.co-transfer-list--warning .co-transfer-list__panel{border-color:var(--co-color-status-review)}.co-transfer-list--info .co-transfer-list__panel{border-color:var(--co-semantic-status-info)}`;
+const coTransferListCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);line-height:1}.co-transfer-list{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-transfer-list__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default;padding:0 var(--co-spacing-xs)}.co-transfer-list--disabled .co-transfer-list__label{color:var(--co-semantic-text-disabled)}.co-transfer-list__body{display:flex;align-items:stretch;gap:var(--co-spacing-sm2)}.co-transfer-list__panel{flex:1;min-width:0;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);display:flex;flex-direction:column;overflow:hidden}.co-transfer-list__panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-sm2) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-muted)}.co-transfer-list__panel-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:500}.co-transfer-list__panel-count{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12)}.co-transfer-list__panel-body{flex:1;overflow-y:auto;max-height:240px;padding:var(--co-spacing-xs)}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-color-opacity-negro-16);--os-handle-bg-hover:var(--co-color-opacity-negro-25);--os-handle-bg-active:var(--co-color-opacity-negro-50);--os-handle-min-size:24px}.co-transfer-list__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xxs, 4px);cursor:pointer;transition:background 0.1s ease}.co-transfer-list__item:hover{background:var(--co-semantic-surface-hover)}.co-transfer-list__item--checked{background:var(--co-semantic-surface-muted)}.co-transfer-list__item--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-transfer-list__checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:var(--co-border-radius-xxs, 4px);border:1px solid var(--co-semantic-border-default);background:transparent;flex-shrink:0;transition:background 0.15s ease, border-color 0.15s ease;color:var(--co-semantic-on-primary)}.co-transfer-list__checkbox--checked{background:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-transfer-list__item-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1}.co-transfer-list__empty{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-lg);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14)}.co-transfer-list__actions{display:flex;flex-direction:column;justify-content:center;gap:var(--co-spacing-xs)}.co-transfer-list__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background 0.15s ease}.co-transfer-list__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-transfer-list__btn:disabled{opacity:0.3;cursor:not-allowed}.co-transfer-list__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-transfer-list__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-transfer-list__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-transfer-list__helper--error .co-transfer-list__helper-icon,.co-transfer-list__helper--error .co-transfer-list__helper-text{color:var(--co-semantic-status-error)}.co-transfer-list__helper--success .co-transfer-list__helper-icon,.co-transfer-list__helper--success .co-transfer-list__helper-text{color:var(--co-semantic-status-success)}.co-transfer-list__helper--warning .co-transfer-list__helper-icon,.co-transfer-list__helper--warning .co-transfer-list__helper-text{color:var(--co-color-status-review)}.co-transfer-list__helper--info .co-transfer-list__helper-icon,.co-transfer-list__helper--info .co-transfer-list__helper-text{color:var(--co-semantic-status-info)}.co-transfer-list--disabled .co-transfer-list__panel{opacity:0.5;pointer-events:none}.co-transfer-list--disabled .co-transfer-list__actions{pointer-events:none}.co-transfer-list--error .co-transfer-list__panel{border-color:var(--co-semantic-status-error)}.co-transfer-list--success .co-transfer-list__panel{border-color:var(--co-semantic-status-success)}.co-transfer-list--warning .co-transfer-list__panel{border-color:var(--co-color-status-review)}.co-transfer-list--info .co-transfer-list__panel{border-color:var(--co-semantic-status-info)}`;
 
 const CoTransferList = class {
     constructor(hostRef) {
@@ -18,6 +20,7 @@ const CoTransferList = class {
         this.status = 'default';
         this.leftChecked = new Set();
         this.rightChecked = new Set();
+        this.osInstances = [];
         this.toggleLeftCheck = (val) => {
             const next = new Set(this.leftChecked);
             if (next.has(val))
@@ -102,22 +105,33 @@ const CoTransferList = class {
         return map[this.status] || null;
     }
     renderList(items, checked, toggle, title) {
-        return (index.h("div", { class: "co-transfer-list__panel" }, index.h("div", { class: "co-transfer-list__panel-header" }, index.h("span", { class: "co-transfer-list__panel-title" }, title), index.h("span", { class: "co-transfer-list__panel-count" }, items.length)), index.h("div", { class: "co-transfer-list__panel-body" }, items.length === 0 ? (index.h("div", { class: "co-transfer-list__empty" }, "No items")) : (items.map(item => (index.h("div", { class: {
+        return (index.h("div", { class: "co-transfer-list__panel" }, index.h("div", { class: "co-transfer-list__panel-header" }, index.h("span", { class: "co-transfer-list__panel-title" }, title), index.h("span", { class: "co-transfer-list__panel-count" }, items.length)), index.h("div", { class: "co-transfer-list__panel-body" }, index.h("div", { class: "co-transfer-list__panel-scroll" }, items.length === 0 ? (index.h("div", { class: "co-transfer-list__empty" }, "No items")) : (items.map(item => (index.h("div", { class: {
                 'co-transfer-list__item': true,
                 'co-transfer-list__item--checked': checked.has(item.value),
                 'co-transfer-list__item--disabled': !!item.disabled,
             }, onClick: () => !item.disabled && toggle(item.value) }, index.h("span", { class: {
                 'co-transfer-list__checkbox': true,
                 'co-transfer-list__checkbox--checked': checked.has(item.value),
-            } }, checked.has(item.value) && index.h("co-icon", { name: "check", size: 12 })), index.h("span", { class: "co-transfer-list__item-label" }, item.label))))))));
+            } }, checked.has(item.value) && index.h("co-icon", { name: "check", size: 12 })), index.h("span", { class: "co-transfer-list__item-label" }, item.label)))))))));
+    }
+    // Panels are always rendered, so init OverlayScrollbars once on both bodies.
+    componentDidLoad() {
+        var _a;
+        const bodies = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.co-transfer-list__panel-body');
+        bodies === null || bodies === void 0 ? void 0 : bodies.forEach((b) => this.osInstances.push(overlayScroll.initOverlayScroll(b)));
+    }
+    disconnectedCallback() {
+        this.osInstances.forEach((i) => i.destroy());
+        this.osInstances = [];
     }
     render() {
-        return (index.h("div", { key: '0b3425fbb55ec96f309fdf391740ee14359034a4', class: {
+        return (index.h("div", { key: '37944f666bd5a6824fe91ad6dc9340e3b390ceb1', class: {
                 'co-transfer-list': true,
                 'co-transfer-list--disabled': this.disabled,
                 [`co-transfer-list--${this.status}`]: this.status !== 'default',
-            } }, this.label && index.h("label", { key: '37c53632225953970667f84253d35877cf667e48', class: "co-transfer-list__label" }, this.label), index.h("div", { key: '3d94643dc2364cd339b55a37a5ea6b44937f668a', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), index.h("div", { key: '5306033109d2312ed11d4ff53e24c8a3c4a580d5', class: "co-transfer-list__actions" }, index.h("button", { key: '45dd6be3e3dd75a4838448575ceb696943d4ec57', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, index.h("co-icon", { key: '80915bd7381bfbad9aa3212c4eb01fee2ba9867f', name: "caret-double-right", size: 16 })), index.h("button", { key: '4ded467eb23672b6b3b6253509c655c139d6059f', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, index.h("co-icon", { key: 'd0acc0b08bf6cb9097368db6a073a3351b08b80b', name: "caret-right", size: 16 })), index.h("button", { key: '7cff83ca213a328ea632de69193d586409be2fb7', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, index.h("co-icon", { key: 'f65dd14d1770c6550b7dec35a3efe7ce9fa602f4', name: "caret-left", size: 16 })), index.h("button", { key: 'f76511a8455733775e6ec9d9bda9a054fcc7d5b6', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, index.h("co-icon", { key: 'fa6258a00fa2c8bd74c6c0aba9dbf1d85e555bd4', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (index.h("div", { key: 'abd0169f9dde72c0fabb0f05494f5b2b728eb097', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '6ec618da2807a84d80d398994952d0bc1e3ec3e8', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), index.h("span", { key: 'dbeeea227af7e9bfaf3e64c8e1f7dc7b2a056e91', class: "co-transfer-list__helper-text" }, this.helperText)))));
+            } }, this.label && index.h("label", { key: '4a985cdd8b52be5f83b6215e3e3fcc53c5d1b118', class: "co-transfer-list__label" }, this.label), index.h("div", { key: '4993d0074a2a531d592c45c83b90e61f6c6ae7af', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), index.h("div", { key: '82888df2b21d56d5a33e5ba631642d022c0a6283', class: "co-transfer-list__actions" }, index.h("button", { key: 'f38c7faf334ffca06fb76a012bfd70168e43138c', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, index.h("co-icon", { key: 'ac56c7e5c87012f0f0c0371280efd2f089ee1625', name: "caret-double-right", size: 16 })), index.h("button", { key: '33d08d82d1a4d77f8edc9c9849147625f472b7d5', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, index.h("co-icon", { key: '411584fcbff3466454faab1c79f5df77607e9e2b', name: "caret-right", size: 16 })), index.h("button", { key: '7e626c5c042d8ae7cefe8c07ac6403af17b117fa', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, index.h("co-icon", { key: '60bb240a183b1dd8ffae584b72c95dfbb3612ccb', name: "caret-left", size: 16 })), index.h("button", { key: '688f9d2e86838f6b852d8bcc97be9b3fee88bf70', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, index.h("co-icon", { key: 'b0278c0fbd443627a8c0f23625ce1d8c48430e70', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (index.h("div", { key: '784beb84f5583d332ca8937b97e5fc2ed307e2bc', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'b66e10f1a23fb81dbaddd388ae088464a164ceee', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), index.h("span", { key: 'e0ca98142070b258f33698bbe79a51260bd70f72', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
+    get el() { return index.getElement(this); }
 };
 CoTransferList.style = coTransferListCss();