@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.css

@@ -33,31 +33,35 @@
   --co-toggle-button-width: 100%;
 }
 
-/* Remove inner radii for connected appearance */
+/* Connected appearance: flatten the seam corners and keep only the group's
+   outer corners squircle-rounded. border-radius on the slotted host is
+   invisible (the inner <button> carries the radius), so we drive it through
+   the shadow boundary with the inherited --co-tbr-* custom props — the same
+   mechanism --co-toggle-button-width already relies on. The kept corners fall
+   back to each button's size-aware --co-toggle-button-radius. */
 .co-toggle-button-group--row ::slotted(co-toggle-button) {
-  --co-btn-border-radius: 0;
-  border-radius: 0;
+  --co-tbr-tl: 0; --co-tbr-tr: 0; --co-tbr-br: 0; --co-tbr-bl: 0;
 }
-
 .co-toggle-button-group--row ::slotted(co-toggle-button:first-child) {
-  border-radius: var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);
+  --co-tbr-tl: var(--co-toggle-button-radius);
+  --co-tbr-bl: var(--co-toggle-button-radius);
 }
-
 .co-toggle-button-group--row ::slotted(co-toggle-button:last-child) {
-  border-radius: 0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;
+  --co-tbr-tr: var(--co-toggle-button-radius);
+  --co-tbr-br: var(--co-toggle-button-radius);
 }
 
 .co-toggle-button-group--column ::slotted(co-toggle-button) {
-  border-radius: 0;
+  --co-tbr-tl: 0; --co-tbr-tr: 0; --co-tbr-br: 0; --co-tbr-bl: 0;
   width: 100%;
 }
-
 .co-toggle-button-group--column ::slotted(co-toggle-button:first-child) {
-  border-radius: var(--co-border-radius-xs) var(--co-border-radius-xs) 0 0;
+  --co-tbr-tl: var(--co-toggle-button-radius);
+  --co-tbr-tr: var(--co-toggle-button-radius);
 }
-
 .co-toggle-button-group--column ::slotted(co-toggle-button:last-child) {
-  border-radius: 0 0 var(--co-border-radius-xs) var(--co-border-radius-xs);
+  --co-tbr-bl: var(--co-toggle-button-radius);
+  --co-tbr-br: var(--co-toggle-button-radius);
 }
 
 /* Collapse borders */
@@ -73,3 +77,19 @@
   opacity: 0.4;
   pointer-events: none;
 }
+
+/* Track variant — a sunken gray track carrying detached rounded pills.
+   Placed after the base/connected rules so it overrides gap; the pills' own
+   chrome (radius, fill, shadow) lives in co-toggle-button[variant='track'].
+   We only neutralise the connected seam collapse (negative margins). */
+.co-toggle-button-group--track {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+.co-toggle-button-group--track ::slotted(co-toggle-button) {
+  margin: 0 !important;
+}

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.js

@@ -9,6 +9,10 @@ export class CoToggleButtonGroup {
         this.direction = 'row';
         /** Stretch the group to fill its container; each button shares the width equally. */
         this.fullWidth = false;
+        /** 'connected' (default) keeps the seamless dark-fill segmented control.
+         *  'track' turns the group into a sunken gray track carrying detached rounded
+         *  pills (white + shadow when selected) — e.g. an icon-only view toggle. */
+        this.variant = 'connected';
     }
     get selectedValues() {
         if (this.multiple) {
@@ -27,6 +31,9 @@ export class CoToggleButtonGroup {
     syncChildren() {
         this.updateChildStates();
     }
+    syncVariant() {
+        this.updateChildStates();
+    }
     componentDidLoad() {
         this.updateChildStates();
     }
@@ -54,15 +61,17 @@ export class CoToggleButtonGroup {
         const children = this.el.querySelectorAll('co-toggle-button');
         children.forEach((child) => {
             child.selected = sel.includes(child.value);
+            child.variant = this.variant;
         });
     }
     render() {
-        return (h("div", { key: '59aac10e6e4f7eb9337aed57f3d258c615139046', class: {
+        return (h("div", { key: '64ff689a4bfa3d0725f552646bd1aeb353fc4df3', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
+                [`co-toggle-button-group--${this.variant}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: 'c6a683245689d3109bc6fcedacae4e2d54209909' })));
+            }, role: "group" }, h("slot", { key: '81baddbc7272bc588e877e9949397fe4947643a9' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -197,6 +206,26 @@ export class CoToggleButtonGroup {
                 "reflect": true,
                 "attribute": "full-width",
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'connected' | 'track'",
+                    "resolved": "\"connected\" | \"track\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "'connected' (default) keeps the seamless dark-fill segmented control.\n'track' turns the group into a sunken gray track carrying detached rounded\npills (white + shadow when selected) \u2014 e.g. an icon-only view toggle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'connected'"
             }
         };
     }
@@ -223,6 +252,9 @@ export class CoToggleButtonGroup {
         return [{
                 "propName": "value",
                 "methodName": "syncChildren"
+            }, {
+                "propName": "variant",
+                "methodName": "syncVariant"
             }];
     }
     static get listeners() {

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

@@ -33,8 +33,16 @@
 /* ── Panel ──────────────────────────────────────────────── */
 .co-tooltip__panel {
   position: fixed;
+  /* Neutralize UA [popover] defaults (border:solid; margin:auto; inset:0;
+     max-height) so our JS top/left + styled bubble win in the top layer.
+     inset:auto BEFORE top/left so they aren't reset by the shorthand. */
+  inset: auto;
   top: 0;
   left: 0;
+  margin: 0;
+  border: 0;
+  max-height: none;
+  overflow: visible;
   z-index: 10000;
   visibility: hidden;
   opacity: 0;

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

@@ -21,6 +21,10 @@ export class CoTooltip {
         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';
@@ -85,18 +89,24 @@ export class CoTooltip {
             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`;
@@ -130,6 +140,10 @@ export class CoTooltip {
             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 +168,26 @@ export class CoTooltip {
         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 +214,16 @@ export class CoTooltip {
     // ── 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)))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -390,6 +425,26 @@ export class CoTooltip {
                 "reflect": false,
                 "attribute": "max-width",
                 "defaultValue": "'280px'"
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full-width wrapper (opt-in) so the tooltip can wrap a flex/grid child that\nmust fill its track \u2014 e.g. an ellipsised list/table cell \u2014 without the\ninline-block wrapper shrink-wrapping it. Drives the `:host([block])` CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "block",
+                "defaultValue": "false"
             }
         };
     }

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: '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)))));
     }
     static get is() { return "co-transfer-list"; }
     static get encapsulation() { return "shadow"; }