@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-color-picker/co-color-picker.css

@@ -0,0 +1,258 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+.co-color-picker--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Label ───────────────────────────────────────────────── */
+.co-color-picker__label {
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  color: var(--co-semantic-text-secondary);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}
+
+/* ── Trigger ─────────────────────────────────────────────── */
+.co-color-picker co-popover {
+  display: block;
+  width: 100%;
+}
+
+.co-color-picker__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-xs);
+  min-height: 40px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48).
+   The 24px swatch shrinks on the compact sizes so it fits the height. ── */
+.co-color-picker--s .co-color-picker__trigger {
+  min-height: 28px;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+}
+
+.co-color-picker--sm .co-color-picker__trigger {
+  min-height: 32px;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-14);
+}
+
+/* md is the default (40px) — no override needed */
+
+.co-color-picker--lg .co-color-picker__trigger {
+  min-height: 48px;
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-16);
+}
+
+.co-color-picker--s .co-color-picker__swatch,
+.co-color-picker--sm .co-color-picker__swatch {
+  width: 18px;
+  height: 18px;
+}
+
+.co-color-picker__trigger:hover {
+  border-color: var(--co-semantic-border-default);
+}
+
+.co-color-picker--open .co-color-picker__trigger {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
+}
+
+.co-color-picker--error .co-color-picker__trigger {
+  border-color: var(--co-color-status-error);
+}
+
+.co-color-picker__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--co-border-radius-full);
+  border: 1px solid var(--co-semantic-border-subtle);
+  flex-shrink: 0;
+}
+
+.co-color-picker__value {
+  flex: 1;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--co-semantic-text-default);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.co-color-picker__value--empty {
+  color: var(--co-semantic-text-muted);
+  font-weight: 400;
+}
+
+/* ── Panel ───────────────────────────────────────────────── */
+.co-color-picker__panel {
+  padding: var(--co-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+}
+
+.co-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: var(--co-spacing-sm2);
+}
+
+.co-color-picker__grid-item {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--co-border-radius-xxs);
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.1s ease, border-color 0.1s ease;
+  box-sizing: border-box;
+}
+
+.co-color-picker__grid-item:hover {
+  transform: scale(1.1);
+}
+
+.co-color-picker__grid-item--selected {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent);
+}
+
+/* ── Hex row ─────────────────────────────────────────────── */
+.co-color-picker__hex-row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  background: var(--co-semantic-surface-secondary);
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-color-picker__hex-prefix {
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  font-weight: 500;
+}
+
+.co-color-picker__hex-value {
+  flex: 1;
+  font-size: var(--co-font-size-14);
+  font-family: var(--co-font-family-mono, monospace);
+  color: var(--co-semantic-text-default);
+  text-transform: uppercase;
+  user-select: all;
+}
+
+.co-color-picker__copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--co-spacing-xs);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  border-radius: var(--co-border-radius-xxs);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.co-color-picker__copy-btn:hover {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-color-picker__copy-btn--copied {
+  color: var(--co-color-status-success);
+}
+
+/* ── Helper ──────────────────────────────────────────────── */
+.co-color-picker__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-muted);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-color-picker__helper-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.co-color-picker--error .co-color-picker__helper {
+  color: var(--co-semantic-status-error);
+}
+
+/* ── 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-color-picker {
+  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-color-picker__label {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-color-picker__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-color-picker > :not(.co-color-picker__label) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-color-picker__trigger { background: var(--co-semantic-surface-secondary); }
+}

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -0,0 +1,355 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { DEFAULT_PRESETS } from "./presets";
+/**
+ * Color picker with preset swatches. Shows a trigger with the current color
+ * swatch + hex value, and opens a popover panel with a grid of preset colors.
+ *
+ * The hex value is read-only (no manual editing) — a copy button lets the user
+ * copy the value to clipboard.
+ *
+ * @event coChange - Emits the selected hex string (e.g. "#0066FF").
+ */
+export class CoColorPicker {
+    constructor() {
+        /** Current color value as hex string (e.g. "#0066FF"). */
+        this.value = '';
+        /** Placeholder text when no color is selected. */
+        this.placeholder = 'Select color';
+        /** Disable the field. */
+        this.disabled = false;
+        /** Show required indicator. */
+        this.required = false;
+        /** Validation status. */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /**
+         * Preset colors as a JSON stringified array of `{ name, value }` objects
+         * or plain hex strings. When set programmatically, accepts an actual array.
+         */
+        this.presets = '';
+        this.isOpen = false;
+        this.copied = false;
+        this.handlePopoverOpen = () => {
+            this.isOpen = true;
+        };
+        this.handlePopoverClose = () => {
+            this.isOpen = false;
+        };
+    }
+    get parsedPresets() {
+        if (Array.isArray(this.presets)) {
+            return this.presets.map(p => typeof p === 'string' ? { name: p, value: p } : p);
+        }
+        if (typeof this.presets === 'string' && this.presets.trim()) {
+            try {
+                const parsed = JSON.parse(this.presets);
+                if (Array.isArray(parsed)) {
+                    return parsed.map((p) => typeof p === 'string' ? { name: p, value: p } : p);
+                }
+            }
+            catch ( /* ignore */_a) { /* ignore */ }
+        }
+        return DEFAULT_PRESETS;
+    }
+    handleSwatchClick(hex) {
+        this.value = hex;
+        this.coChange.emit(hex);
+        this.isOpen = false;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+        };
+        return map[this.status] || null;
+    }
+    async handleCopy() {
+        if (!this.value)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.copied = true;
+            setTimeout(() => { this.copied = false; }, 1500);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    render() {
+        const presets = this.parsedPresets;
+        const hasValue = !!this.value;
+        const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
+        return (h("div", { key: '5685ea2ba18f9f2bf1529cfcad5aee9dce529a76', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '22c1c3fae1990c3375772d520efb752b13b841c8', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'd91a7a773586595b9ca203ea904b2eb7699414bb', required: this.required }))), h("co-popover", { key: '2d245e3b5735ed5dfdc4dd43479930e9fdb6f76f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '1a75d6f5c28fe1d00b21584a31ec91915aebcbe7', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: 'f015db7975d7fcffdbbd20a7b88dba44f104eccb', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '4842f2556ad37910f414bc253fafc1f8f2c81361', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'c34ec92aaf66b01f3566f8f8106419dfc87aefa5', class: "co-color-picker__panel" }, h("div", { key: '3b904bca6d819e6f273ebf418f7f5495e36d31f8', class: "co-color-picker__grid" }, presets.map((preset) => {
+            var _a;
+            return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
+        })), hasValue && (h("div", { key: '0aebb34354565e53e1364ef66bb7750decc2ae77', class: "co-color-picker__hex-row" }, h("span", { key: 'b959d588d52fe4546ebcb374a0d5129dfb37cd2f', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '11ef3b1879fefe31d64c18e26eaa349679135c0c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'be63f7214a57d370c62c2edf5f3072cdaf39da10', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: 'a8b5e746c2ad6116e700ffbb8082c4d3f02b8ff8', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '584a9507206c54a75f266edf227a88543114a94c', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '0b58cacf5ab2da011e3a6c98ffc1f8ac04dd9819', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '96f2fafb678ba77c8aabb8bd979b6676eb4ac634', class: "co-color-picker__helper-text" }, this.helperText)))));
+    }
+    static get is() { return "co-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current color value as hex string (e.g. \"#0066FF\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Field label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no color is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select color'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show required indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper/error text below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "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'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Field name for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "presets": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ColorPreset[] | string[]",
+                    "resolved": "ColorPreset[] | string | string[]",
+                    "references": {
+                        "ColorPreset": {
+                            "location": "import",
+                            "path": "./presets",
+                            "id": "src/components/co-color-picker/presets.ts::ColorPreset",
+                            "referenceLocation": "ColorPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preset colors as a JSON stringified array of `{ name, value }` objects\nor plain hex strings. When set programmatically, accepts an actual array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "copied": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the selected hex color on change."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/co-color-picker/presets.js

@@ -0,0 +1,19 @@
+/**
+ * Default color presets derived from Cobalt design tokens (base.json).
+ * Uses primary colors + secondary-100 (full saturation, best contrast).
+ * Names are English by default — consumers can override with translated presets.
+ */
+export const DEFAULT_PRESETS = [
+    { name: 'Green', value: '#02A270' },
+    { name: 'Yellow', value: '#FDBF00' },
+    { name: 'Blue', value: '#2563EB' },
+    { name: 'Pink', value: '#F32A73' },
+    { name: 'Red', value: '#EB1E1E' },
+    { name: 'Orange', value: '#F0821E' },
+    { name: 'Teal', value: '#00AFAF' },
+    { name: 'Light blue', value: '#00BEE6' },
+    { name: 'Electric blue', value: '#000AFF' },
+    { name: 'Violet', value: '#5F4BD7' },
+    { name: 'Burgundy', value: '#811137' },
+    { name: 'Olive', value: '#AAB43C' },
+];