@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

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: '992ae1f0476cad32f27779742265333134c31d2e', 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: 'f39ad29a8ef70bc4c7f6c6afbeb817b7d3b3fcdd', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: 'b639b4730e3707cfaa613057805c4a196cc584d1', 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: '5fb19abe8e70008fffa64cd1bce654d7052e9d7d', 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: 'f9fc1b87defc09feda1937643d34e3cfad9662ed', 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: '3b4d359191f1dd87909ed760afd1ab86d9024162', 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: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', 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: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', 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: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', 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: '67e3b30b95acbb48d96d572ac133b324b6872314', 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: '06467dde87ab5b78e8db46bc7db542c57a58fcad', class: "co-rating__label" }, this.label), h("div", { key: '5a50067af1c8512c17ab787d156d214d3e8c7728', 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: 'f040eba3fd1edd6ed9c6d6387d96f7f910abb855', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '97603b28a2f29269f378af63324d706bf77e62ee', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '756b3518725bbfad6432907e78f4ced05add8700', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }