@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -63,16 +63,21 @@ export class CoPopover {
             });
             let finalTop = top;
             let finalLeft = left;
-            // Compensate for any transformed ancestor that turned our `position: fixed`
-            // into a relative-positioned box.
-            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;
+            // 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 the offset-ancestor compensation. It only applies in
+            // the no-Popover-API fallback where the panel still renders in place.
+            const promoted = this.panelEl.matches(':popover-open');
+            if (!promoted) {
+                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;
+                }
             }
             const style = {
                 top: `${finalTop}px`,
@@ -128,6 +133,10 @@ export class CoPopover {
             this.unbindDocListeners();
             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 open re-sets it.
+            this.panelEl = undefined;
         }
     }
     bindDocListeners() {
@@ -154,6 +163,27 @@ export class CoPopover {
     async hide() {
         this.open = false;
     }
+    /**
+     * Promote the panel to the browser top layer (Popover API) so an ancestor's
+     * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.
+     * The API promotes WITHOUT moving the DOM node — slots, inherited custom
+     * properties, composedPath() outside-click and nested popovers all keep
+     * working. No-ops where unsupported (graceful fallback to in-place fixed
+     * positioning + offset-ancestor compensation, see updatePosition).
+     */
+    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 ────────────────────────────────
     // Listen to window resize/scroll (covers most layout changes) and to the
     // NEAREST scrollable ancestor (covers internal-scroll containers like a
@@ -184,12 +214,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'a10448fae8b1ab711c359f7dc0c7a01432700638', class: "co-popover" }, h("div", { key: '4e42cabce7bb62a866b080870d31cb03ea62ccdf', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'a5d85e222124e3af63266e4b99b460d62581200b', name: "trigger" })), this.open && (h("div", { key: '9143a817e7b46b41ba393480743f3ca38e507a84', class: "co-popover__panel", ref: (el) => {
+        return (h("div", { key: 'aaf34bcc1d71dc54e84c8d24da8c78caa877a12f', class: "co-popover" }, h("div", { key: '0403dfeb0a0fa0e8f9517269b15066dc595c9856', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '6465139ca15b877bd38c4d60beebb82617d34dfe', name: "trigger" })), this.open && (h("div", { key: '7afe0527d6c666f3a1cf71be22fe4b726eddda8d', class: "co-popover__panel", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
+                    this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '6230166198f8d5535d5de3d9bdf4a4d8d0c82cb7' })))));
+            } }, h("slot", { key: 'e0dff9e87e8e1e4124ae1bbf2100e29972b9e8ee' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-bar/co-progress-bar.css

@@ -62,3 +62,25 @@
 .co-progress-bar--dashed.co-progress-bar--default {
   border-color: var(--co-semantic-border-muted);
 }
+
+/* ─── Indeterminate ──────────────────────────────────────── */
+.co-progress-bar--indeterminate .co-progress-bar__fill {
+  width: 40%;
+  transition: none;
+  animation: co-progress-indeterminate 1.4s ease-in-out infinite;
+  will-change: transform;
+}
+
+@keyframes co-progress-indeterminate {
+  0%   { transform: translateX(-110%); }
+  100% { transform: translateX(360%); }
+}
+
+/* Reduced-motion: no sweep — a calm, static filled track instead. */
+@media (prefers-reduced-motion: reduce) {
+  .co-progress-bar--indeterminate .co-progress-bar__fill {
+    animation: none;
+    width: 100%;
+    opacity: 0.45;
+  }
+}

package/dist/collection/components/co-progress-bar/co-progress-bar.js

@@ -12,14 +12,18 @@ export class CoProgressBar {
         this.variant = 'solid';
         /** Height of the bar in px */
         this.thickness = 4;
+        /** Indeterminate mode: ignore `value` and run a looping sweep animation. */
+        this.indeterminate = false;
     }
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
-        return (h("div", { key: '5ab2dc67ce36b5a00d1dbd0b54360ff9dd627441', class: {
+        const indeterminate = this.indeterminate;
+        return (h("div", { key: '3063137d53e16044d3a0e7eaf9297c33955494f2', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
-            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: 'a4e85bcdae00711762b73619830b22e29957d3f6', class: "co-progress-bar__fill", style: { width: `${clamped}%` } })));
+                'co-progress-bar--indeterminate': indeterminate,
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '171a08b832dd1f9430947e0b39b516b4d3580454', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -114,6 +118,26 @@ export class CoProgressBar {
                 "reflect": false,
                 "attribute": "thickness",
                 "defaultValue": "4"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate mode: ignore `value` and run a looping sweep animation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/co-progress-circle/co-progress-circle.css

@@ -0,0 +1,50 @@
+:host {
+  display: inline-flex;
+}
+
+.co-progress-circle {
+  --_color: var(--co-semantic-status-info, #2563eb);
+  --_track: var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--_color) var(--co-pc-angle, 0deg),
+    var(--_track) var(--co-pc-angle, 0deg)
+  );
+  transition: background 0.3s ease;
+}
+
+.co-progress-circle__track {
+  position: absolute;
+  inset: var(--co-pc-stroke, 4px);
+  border-radius: 50%;
+  background: var(--co-semantic-surface-page, #fff);
+}
+
+.co-progress-circle__label {
+  position: relative;
+  z-index: 1;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-11, 11px);
+  font-weight: 600;
+  color: var(--_color);
+  line-height: 1;
+  pointer-events: none;
+}
+
+/* ─── Status colors ─── */
+.co-progress-circle--success {
+  --_color: var(--co-semantic-status-success, #0a7724);
+}
+
+.co-progress-circle--warning {
+  --_color: var(--co-semantic-status-warning, #f59e0b);
+}
+
+.co-progress-circle--error {
+  --_color: var(--co-semantic-status-error, #aa2e1b);
+}

package/dist/collection/components/co-progress-circle/co-progress-circle.js

@@ -0,0 +1,148 @@
+import { h } from "@stencil/core";
+/**
+ * A circular progress indicator with status colors and optional label.
+ */
+export class CoProgressCircle {
+    constructor() {
+        /** Progress value 0-100 */
+        this.value = 0;
+        /** Status / color variant */
+        this.status = 'default';
+        /** Diameter of the circle in px */
+        this.size = 40;
+        /** Stroke width in px */
+        this.strokeWidth = 2;
+        /** Show percentage label inside */
+        this.showLabel = true;
+    }
+    render() {
+        const clamped = Math.max(0, Math.min(100, this.value));
+        const angle = (clamped / 100) * 360;
+        const safeStroke = Math.min(this.strokeWidth, this.size / 2);
+        return (h("div", { key: 'ad0b74fe0dd46308522c36190ceb783f0bbed1d2', class: {
+                'co-progress-circle': true,
+                [`co-progress-circle--${this.status}`]: true,
+            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                '--co-pc-angle': `${angle}deg`,
+                '--co-pc-stroke': `${safeStroke}px`,
+            } }, h("div", { key: '353a9fe4a7d736884cdc51f30320c505cceb3e75', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '38577ffe98963aa7bc3a6a1eb9b7178fe32d2435', class: "co-progress-circle__label" }, clamped, "%"))));
+    }
+    static get is() { return "co-progress-circle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-progress-circle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-progress-circle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress value 0-100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'warning' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status / color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter of the circle in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "40"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stroke width in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "2"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show percentage label inside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '1b0c0c230d757c32c176917be73288a333a6e3da', class: {
+        return (h("div", { key: '083c92d2ee5069c2fd222aefee1d02bff88c68ce', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '189e5608b3bc05dff13bf0538c2ac0cd4a1fb09f', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '3aa5c6abdb62d67d529b7586f86f9d30dbaf20b6', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'bca38596d30ba104dc98fb47a0067c0932e6a139', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '7593848b2e0792283e65b45ea6cb8cafe5be0f8d', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-radio-group/co-radio-group.css

@@ -194,3 +194,29 @@
 .co-radio-group__helper--info .co-radio-group__helper-text {
   color: var(--co-semantic-status-info);
 }
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-radio-group {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-radio-group__labels {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: 0;
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-radio-group__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-radio-group > :not(.co-radio-group__labels) {
+  grid-column: 2;
+  min-width: 0;
+}

package/dist/collection/components/co-radio-group/co-radio-group.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class CoRadioGroup {
     constructor() {
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         /** Validation status */
         this.status = 'default';
         /**
@@ -57,11 +59,11 @@ export class CoRadioGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: '6a875a097c5cb6fd75f956ffd451d94d4fc7c9c1', class: {
+        return (h("div", { key: '0e910e8b8153eb1c4b682c7c26bc16cfafb6463d', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '2ed50c07f0426ecc5e4a2bc109ecb8aacb29857d', class: "co-radio-group__labels" }, this.label && h("span", { key: '35e5f62b3814875586d980c13667d437a5c5aeba', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'a9b1be35040c5e5ada94b1f11777edb6b62894ab', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '09fb5ebf55964f5ddbb5f19399b1c0feea999e99', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'cebc4c3acac2417594f750c73391e4a3fee8572b', class: "co-radio-group__labels" }, this.label && h("span", { key: 'e84c1a5f7a271b7df1954e3bba2f3269775ec8f1', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '147d8b0a1f683e858477aee31c5b6327cc790ca4', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '347b5812da74b9cfade755d0d8dff71741e2d81e', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -76,7 +78,7 @@ export class CoRadioGroup {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: 'e11e7fb1b45e4da8833f0c3282663f336032cc09', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'f927971702b90722b92b827f52c4cb6411584db7', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'b7440f200219b6ab6521f1bee1715fa7cd1ebeb9', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: 'aa1712f70c7bce863f7c158509b2f8f09d8d94a1', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1a1f09846bdd43461c4fe280f97621ef08ae9dbb', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'bb624ad1a942d22e0c6fa296d4d59b6f3d04061d', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +151,26 @@ export class CoRadioGroup {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,

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

@@ -36,16 +36,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '4c2c5b8f54ed3f49ec8e9d432e223d126ee4f946', class: {
+        return (h("div", { key: '77f740771bf55482c42bf22b523b206c817af2c9', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: '70bcf6917d40f33101a430419d7bc7def19632cd', class: "co-rating__label" }, this.label), h("div", { key: '89a03c91bc6ca3656172fdf8edcff7ad5a5054f4', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '4030e11d84b9dcf0b283c4828af3650775b715d3', class: "co-rating__label" }, this.label), h("div", { key: 'a4729df2079de67fdaa2fe863bbd0bb7780688a7', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'beae1348592e8ced57592034aebd508086c4b9fb', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'fe2833e6d772511a14d05abc607ae22607bc077c', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '6a70587b62f3109c9b829fca66a3033922a386c3', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '7c7558f9fac12f49a62da533de1f72bc70d6b3ef', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '184cc9a94bb7b585f18b96d6442adfeac8d2faf8', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'fb494734e31576a0a933d4efefa6ddebc88ecf49', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }