@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -17,31 +17,51 @@
   flex-direction: column;
 }
 
-/* Remove inner radii for connected appearance */
-.co-toggle-button-group--row ::slotted(co-toggle-button) {
-  --co-btn-border-radius: 0;
-  border-radius: 0;
+/* Full width: group fills its container, buttons share the width equally. */
+:host([full-width]) {
+  display: flex;
+  width: 100%;
 }
 
-.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-toggle-button-group--full {
+  display: flex;
+  width: 100%;
+}
+
+.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button) {
+  flex: 1 1 0;
+  --co-toggle-button-width: 100%;
 }
 
+/* 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-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) {
+  --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 */

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

@@ -7,6 +7,8 @@ export class CoToggleButtonGroup {
         this.size = 'm';
         this.disabled = false;
         this.direction = 'row';
+        /** Stretch the group to fill its container; each button shares the width equally. */
+        this.fullWidth = false;
     }
     get selectedValues() {
         if (this.multiple) {
@@ -55,11 +57,12 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: '8f91e6dd191ba893948835787c754ec7cdf3711e', class: {
+        return (h("div", { key: '68e2fbfac009b921d780c38c5b4abbd95eafbe38', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '1dd2415b3cf9b97886ffb23e491cc7b0847b3c3e' })));
+                'co-toggle-button-group--full': this.fullWidth,
+            }, role: "group" }, h("slot", { key: 'a5b033a58961baed609e6bbd91cc4de26cad3fa2' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -174,6 +177,26 @@ export class CoToggleButtonGroup {
                 "reflect": false,
                 "attribute": "direction",
                 "defaultValue": "'row'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the group to fill its container; each button shares the width equally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -14,11 +14,35 @@
   display: inline-block;
 }
 
+/* Full-width trigger (opt-in): lets the tooltip wrap a flex/grid child that
+   must fill its track — e.g. an ellipsised table cell — without the default
+   inline-block wrappers shrink-wrapping the content. */
+: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;
+}
+
 /* ── 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';
@@ -74,6 +78,9 @@ export class CoTooltip {
                 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 } = computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
@@ -82,15 +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);
-                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 = 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`;
@@ -124,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) {
@@ -148,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 });
@@ -174,15 +214,16 @@ export class CoTooltip {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '3e8354dc6a54b9566b66383678b7822ac73fa5dd', class: "co-tooltip" }, 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 }, h("slot", { key: '95e4407d37a7677cfcfcb9e3d64d0a8ef167988a' })), this.visible && this.content && (h("div", { key: 'a4146ad80d3ec787b1c1d61ca5088375768ca667', id: "tooltip-panel", class: {
+        return (h("div", { key: '638cd078ca415c24e4da46d9fb3a5ab4a25a9ee2', class: "co-tooltip" }, 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 }, h("slot", { key: 'f481c969f09ced4838ba099d0dda1cbdbae4e32a' })), this.visible && this.content && (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 && h("div", { key: '15a322164920483a286500729c46332fbff1b9ec', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '417aae8b03ba81cc0989fa66044ef98cd948b024', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'a94520b95c5c2ebe6cb9488ae2e5c73d60000305', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'fed5b28f34c15892cec3a0f6271b8940efe869dc', class: "co-tooltip__content" }, this.content)))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -384,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"
             }
         };
     }