@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.css

@@ -59,6 +59,66 @@
   margin: var(--co-spacing-sm) 0;
 }
 
+/* ---- Responsive image layout (mirrors the editor; keyed on data-image-layout) ---- */
+.co-rich-text-viewer img[data-image-layout="wrap-left"] {
+  float: left;
+  max-width: 50%;
+  margin: 4px 16px 8px 0;
+}
+.co-rich-text-viewer img[data-image-layout="wrap-right"] {
+  float: right;
+  max-width: 50%;
+  margin: 4px 0 8px 16px;
+}
+.co-rich-text-viewer img[data-image-layout="center"] {
+  display: block;
+  margin: 12px auto;
+}
+.co-rich-text-viewer img[data-image-layout="full-width"] {
+  display: block;
+  width: 100%;
+  margin: 12px 0;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer img[data-image-layout="wrap-left"],
+  .co-rich-text-viewer img[data-image-layout="wrap-right"] {
+    float: none;
+    max-width: 100%;
+    display: block;
+    margin: 12px 0;
+  }
+}
+
+/* Defensive: neutralise absolute positioning baked by the old fixed-page model
+   so legacy content reflows in-flow instead of overlapping the text. */
+.co-rich-text-viewer img[style*="position:absolute"],
+.co-rich-text-viewer img[style*="position: absolute"] {
+  position: static !important;
+  left: auto !important;
+  top: auto !important;
+  z-index: auto !important;
+}
+
+/* Embeds (YouTube + generic iframe) — the iframe fills its wrapper; the wrapper
+   ([data-iframe] / [data-youtube-video]) carries an optional inline px width
+   (set when the author resized it). No width = full width (responsive 16:9). */
+.co-rich-text-viewer iframe {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  display: block;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  margin: 0;
+}
+.co-rich-text-viewer .co-rte-iframe,
+.co-rich-text-viewer [data-youtube-video] {
+  display: block;
+  max-width: 100%;
+  margin: var(--co-spacing-sm) 0;
+}
+
 .co-rich-text-viewer code {
   font-family: var(--co-font-family-mono);
   font-size: 0.9em;
@@ -76,3 +136,21 @@
   color: var(--co-color-base-blanco, #fff);
   font-size: 0.9em;
 }
+
+/* ============================================================
+   Fluid content width (document / "site" preset)
+
+   Mirrors the editor: the content fills ~80% of its container on desktop and the
+   full width on mobile, so it reflows to fit any device. Host apps can tune the
+   desktop measure via --co-rte-content-width.
+   ============================================================ */
+.co-rich-text-viewer--site {
+  width: var(--co-rte-content-width, 80%);
+  max-width: 100%;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer--site {
+    width: 100%;
+  }
+}

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.js

@@ -1,17 +1,24 @@
 import { h } from "@stencil/core";
-// The `/sanitizer` subpath has no Tiptap import → tiny bundle. Stencil's
-// classic TS moduleResolution can't read package.json `exports`, so the
-// subpath is mapped in tsconfig `paths` (rollup resolves it via `exports`).
-import { sanitize } from "../../../../../rich-text/dist/sanitizer";
+import DOMPurify from "dompurify";
 /**
  * Read-only renderer for rich-text content. For `format="html"` it only runs
- * the package's canonical sanitizer (the `/sanitizer` subpath has no Tiptap
- * import → tiny). `format="json"` lazily pulls the serializer to turn a
- * ProseMirror document into sanitized HTML.
+ * DOMPurify (no Tiptap import → tiny). `format="json"` lazily pulls the
+ * serializer to turn a ProseMirror document into sanitized HTML.
+ *
+ * The HTML path sanitizes inline (mirrors the rich-text package's whitelist)
+ * so the viewer never pulls the editor engine into its bundle.
  *
  * @part content - The rendered content container
  * @part empty - The empty-state element
  */
+const ALLOWED_TAGS = {
+    comment: ['p', 'br', 'strong', 'em', 'a', 'span'],
+    task: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote'],
+    email: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
+    document: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'hr', 'div', 'mark', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'iframe'],
+};
+/** iframes are permitted only with an https: source (blocks javascript:/data:/http:). */
+const SAFE_IFRAME_SRC_RE = /^https:\/\/[^\s"'<>]+$/i;
 export class CoRichTextViewer {
     constructor() {
         /** HTML string (default) or ProseMirror JSON string. */
@@ -30,18 +37,34 @@ export class CoRichTextViewer {
     watchInputs() {
         return this.compute();
     }
-    get parsedFeatures() {
-        if (!this.features)
-            return undefined;
-        if (typeof this.features === 'string') {
-            try {
-                return JSON.parse(this.features);
+    sanitizeHtml(html) {
+        var _a;
+        DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+            var _a, _b;
+            // Only allow <input type="checkbox"> (task list checkboxes); strip others.
+            if (data.tagName === 'input' && node.type !== 'checkbox') {
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
             }
-            catch (_a) {
-                return undefined;
+            // Allow only https iframes (YouTube, Vimeo, …); strip anything else.
+            if (data.tagName === 'iframe') {
+                const src = node.getAttribute('src') || '';
+                if (!SAFE_IFRAME_SRC_RE.test(src))
+                    (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(node);
             }
+        });
+        try {
+            const clean = DOMPurify.sanitize(html, {
+                ALLOWED_TAGS: (_a = ALLOWED_TAGS[this.preset]) !== null && _a !== void 0 ? _a : ALLOWED_TAGS.document,
+                ALLOWED_ATTR: ['href', 'target', 'rel', 'data-variable', 'data-mention-id', 'data-mention-label', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'allowfullscreen', 'frameborder', 'allow', 'loading', 'data-youtube-video', 'data-iframe', 'data-image-layout', 'data-file-id', 'type', 'checked', 'disabled'],
+                ALLOW_DATA_ATTR: false,
+                FORBID_TAGS: ['script', 'object', 'embed', 'form', 'textarea', 'style'],
+                ADD_ATTR: ['allowfullscreen', 'frameborder', 'allow', 'loading'],
+            });
+            return clean;
+        }
+        finally {
+            DOMPurify.removeHook('uponSanitizeElement');
         }
-        return this.features;
     }
     async compute() {
         if (!this.value) {
@@ -49,14 +72,14 @@ export class CoRichTextViewer {
             return;
         }
         if (this.format === 'html') {
-            this.html = sanitize(this.value, this.preset, this.parsedFeatures);
+            this.html = this.sanitizeHtml(this.value);
             return;
         }
         // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
         try {
             const doc = JSON.parse(this.value);
             const rt = await import('@prolibu-suite/cobalt-rich-text');
-            this.html = rt.jsonToHtml(doc, this.preset, this.parsedFeatures);
+            this.html = rt.jsonToHtml(doc, this.preset);
         }
         catch (_a) {
             this.html = '';
@@ -66,7 +89,11 @@ export class CoRichTextViewer {
         if (!this.html) {
             return (h("div", { class: "co-rich-text-viewer co-rich-text-viewer--empty", part: "empty" }, this.emptyText || ''));
         }
-        return (h("div", { class: { 'co-rich-text-viewer': true, 'co-rich-text-viewer--compact': this.compact }, part: "content", innerHTML: this.html }));
+        return (h("div", { class: {
+                'co-rich-text-viewer': true,
+                'co-rich-text-viewer--compact': this.compact,
+                'co-rich-text-viewer--site': this.preset === 'document',
+            }, part: "content", innerHTML: this.html }));
     }
     static get is() { return "co-rich-text-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -149,25 +176,6 @@ export class CoRichTextViewer {
                 "attribute": "preset",
                 "defaultValue": "'document'"
             },
-            "features": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | object",
-                    "resolved": "object | string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Feature overrides used when the content was authored with them (JSON\nstring for HTML attr, or object via JS property) \u2014 keeps the whitelist\nin lock-step with the editor that produced the content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "features"
-            },
             "emptyText": {
                 "type": "string",
                 "mutable": false,
@@ -224,9 +232,6 @@ export class CoRichTextViewer {
             }, {
                 "propName": "preset",
                 "methodName": "watchInputs"
-            }, {
-                "propName": "features",
-                "methodName": "watchInputs"
             }];
     }
 }

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '23841a9145b930d4c9ccf77038132b6d62077395', class: {
+        return (h("div", { key: '47d99fa50bacbc5b2651f7a672e4ff7106959622', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '2b3672bf156732fa74ae2cf88751678cd1acc6b3', class: "co-row__prefix" }, h("slot", { key: '663ad19611357ec125d8634fddbf3f3b897ae39b', name: "prefix" })), h("div", { key: '58deed652fad6d3f5b49b2b31855aa7f1b5e7784', class: "co-row__content" }, h("slot", { key: 'c5e73b4048c5aa2ba0f6ffc7e7d8c23d7f5d6e37' })), h("div", { key: 'd9cce5c7877f51ec5e79b493401e42b26fa426c1', class: "co-row__suffix" }, h("slot", { key: '741c8cf347a4046122eb01ae3001263d6c9d09d6', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: 'ccae8616bc848d06b30b784f273c68df7d307a5b', class: "co-row__prefix" }, h("slot", { key: '3aa5343c6343398b77d55dffe79e7c3d04d4dc53', name: "prefix" })), h("div", { key: '3497f2ad38a0b3c016a3f027dec7386ffc9f478e', class: "co-row__content" }, h("slot", { key: '46f6c4b01998a726ac92b23c6ff2eb9c1cd548b8' })), h("div", { key: '50dbfe45d87abb540ee94d49ec5e3ff600c68aba', class: "co-row__suffix" }, h("slot", { key: '207dbcf5ce290c8dbd73768f7dbceba897b16114', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.co-segmented-bar {
+  width: 100%;
+}
+
+.co-segmented-bar__track {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  /* height + background are set inline from `thickness` / `trackColor`. */
+}
+
+/* ─── Radius ─────────────────────────────────────────────── */
+.co-segmented-bar__track--radius-full {
+  border-radius: var(--co-border-radius-full, 9999px);
+}
+
+.co-segmented-bar__track--radius-sm {
+  border-radius: var(--co-border-radius-sm, 12px);
+}
+
+.co-segmented-bar__track--radius-lg {
+  border-radius: var(--co-border-radius-lg, 16px);
+}
+
+/* ─── Segments ───────────────────────────────────────────── */
+.co-segmented-bar__segment {
+  display: block;
+  height: 100%;
+  /* width + background are set inline per segment. */
+}

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

@@ -0,0 +1,176 @@
+import { h } from "@stencil/core";
+/**
+ * A stacked, multi-segment meter — a pill track split into N contiguous
+ * colored segments (e.g. a storage breakdown). Display-only; colors are
+ * supplied by the consumer. Provide an external legend via `slot="legend"`.
+ */
+export class CoSegmentedBar {
+    constructor() {
+        /** Track height in px. */
+        this.thickness = 10;
+        /** Corner rounding of the track. `full` = pill. */
+        this.radius = 'full';
+        /** Background color of the empty track. */
+        this.trackColor = 'var(--co-color-gray-100)';
+        /** The value the segments are measured against (100% = full track). */
+        this.total = 100;
+        /**
+         * Segments to render — a JSON string OR an array of
+         * `{ value: number; color: string; label?: string }`.
+         */
+        this.segments = '[]';
+    }
+    /** Normalize the `segments` prop (JSON string or array) to a clean array. */
+    get parsedSegments() {
+        const raw = this.segments;
+        let arr = raw;
+        if (typeof raw === 'string') {
+            if (!raw.trim())
+                return [];
+            try {
+                arr = JSON.parse(raw);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        if (!Array.isArray(arr))
+            return [];
+        return arr
+            .filter((s) => !!s && typeof s.value === 'number' && typeof s.color === 'string')
+            .map((s) => ({ value: s.value, color: s.color, label: s.label }));
+    }
+    render() {
+        const segments = this.parsedSegments;
+        const total = this.total > 0 ? this.total : 100;
+        return (h("div", { key: 'a21a02b0177c838b376ffc116b7798463f51e247', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: 'c85455d5178013b07aee2650d994e8a49fc1692d', class: {
+                'co-segmented-bar__track': true,
+                [`co-segmented-bar__track--radius-${this.radius}`]: true,
+            }, part: "track", style: { height: `${this.thickness}px`, background: this.trackColor } }, segments.map((seg, i) => (h("span", { key: i, class: "co-segmented-bar__segment", part: "segment", title: seg.label, style: {
+                width: `${(seg.value / total) * 100}%`,
+                background: seg.color,
+            } })))), h("slot", { key: 'aaf981fc73735cb1a63ad9e169145d1cbd36113d', name: "legend" })));
+    }
+    static get is() { return "co-segmented-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-segmented-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-segmented-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Track height in px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thickness",
+                "defaultValue": "10"
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full' | 'sm' | 'lg'",
+                    "resolved": "\"full\" | \"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner rounding of the track. `full` = pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "'full'"
+            },
+            "trackColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the empty track."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-color",
+                "defaultValue": "'var(--co-color-gray-100)'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value the segments are measured against (100% = full track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "100"
+            },
+            "segments": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CoSegment[]",
+                    "resolved": "CoSegment[] | string",
+                    "references": {
+                        "CoSegment": {
+                            "location": "local",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segments to render \u2014 a JSON string OR an array of\n`{ value: number; color: string; label?: string }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "segments",
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+}

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

@@ -727,7 +727,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  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;
@@ -1063,3 +1065,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-select__trigger { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -208,19 +208,19 @@ export class CoSelect {
         var _a;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: '279b14eda557b860b4151685bf7d7d0c97ab861d', class: {
+        return (h("div", { key: 'f7280ac6fc30ec168e882f1332a3ec780b3d2965', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
                 [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'e98425c922453ca3acae8274c707366ac28ceb0e', class: "co-select__labels" }, this.label && h("label", { key: 'de40605cb2d729bccc445b1e37a28e9ae5d95c05', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'bc0a351d141017cdfeb9b761081144df09bffbf6', required: this.required })), this.secondaryLabel && h("span", { key: 'cbbd3955441d029c40a32dc363d1fc133ace393d', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'de6985c4703ecec83a1d3011fd9c275d989a1132', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '545e952818ab75b26de295d56c6875237f970ed5', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '1f202f6dfdb6bae10c20594878ba5f780ab8ad07', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '68e80d4d79d68b6d982aa72f8b697c8654d043c3', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'e2b2cc9276643e836764f7424e3982d5e3780b7f', class: "co-select__labels" }, this.label && h("label", { key: 'd303928cd5954ea352492ab63bc376d8ea4df907', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'ccdd02cd727fa9142b67c3d8f190ae19d1325e8e', required: this.required })), this.secondaryLabel && h("span", { key: '8ff1d4d2b12f4542c8ec6e91648d1f8a06b3b57e', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '483b22c6efc32bc1411ff96a0a7a41a27452142b', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'bff3edc587f705e984dcb5d79c9a70d889ff427b', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'ea34b3d34e7bd4d9c6e52971c1dd684383250694', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '42e3afef657778c834040fb951038e47e7748a4b', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '347235a67a41c6f4ed3e9b8035c18750dbba609e', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '400d900137c4dfbdf362d8ad923678e062143707', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '1e9a4c6a69606790836fedcea70192c77b42383f', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '1a00449ed011a384124992427511a14017203308', class: "co-select__dropdown" }, this.searchable && (h("div", { key: '6275c6091e714147325f5a8a40cc33e8ddfc9fcb', class: "co-select__search" }, h("co-icon", { key: '18047b5338b433adcca171783ea896978d0f8657', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '1de64d0740ff617a5cf75fdaf3bcddb197f826be', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.searchable && options.length === 0 && (h("div", { key: '07cf9897681af9a636dfa0e0de3dda5785e49d03', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'f9c5ad0c2ece40dad256a81eca686769498983d1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, (() => {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '583671b8023e996e4a3bf28b7db4743069580aba', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'a4b6cb55572b49f6e7d381dfb5d38fb992d25b20', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'bee58119202ae396f40c9a5633e33c5a3e8f85e6', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'afb9a8e4042df0b8a42fbf341309eb60726214b1', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '6dee2f6f654ea468ac5ef54d22f08a32adeced33', class: "co-select__search" }, h("co-icon", { key: 'a4c2bf7a4575952a7d7df091de68e4d0d0871ae3', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '5b023ec13d6445bcec51d6ee0a252c5c8e80e3fd', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '07a4cb2040c463cb214e851fac20855d702a1968', class: "co-select__empty" }, this.emptyText)), h("div", { key: '882abaca5fbfcd8cfe007f374204b18f8e983758', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -229,9 +229,9 @@ export class CoSelect {
                         'co-select__option': true,
                         'co-select__option--selected': isSelected,
                         'co-select__option--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
+                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()))), this.helperText && (h("div", { key: '2d51d82b91682fc7f4e2e9eff099b9292099ce7a', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a055b3dee238c230aec60264377ccf9b1fe3137d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '2d170fecfbe1b889fe819d63b19863bdac92eee8', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: '894ca1909e71e80000ebe0e13b4c824833b32ba5', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '3c19578de5317a13962afa3ca3962373c4659c3d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '7040317015e837c1fac4112c0887cb3a1269f818', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '7024b84bf2a0cf7b0f5d95b1ded130295f3956f2', class: {
+        return (h("hr", { key: 'fe5e2c132e6736fdf21c0d47096eb26c4a799672', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '06e023317ddd0ba958aed6fae1260d99cf98787b', class: {
+        return (h("nav", { key: '4c51173d0b39d5fbe481d585a6385738d4b8ec4c', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '02599924b23b828c21442f777e4109cf612cafb0', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'dd28b07a1b4e4674de3348932ebed9b997fdad43', name: "header" })), h("div", { key: '3f0d7545ee5d5ea3e058e92f16f1f6903c301331', class: "co-sidebar__body", part: "body" }, h("slot", { key: '80a97f1c2724945950751908544198b0a5ab50f7' })), h("div", { key: '8bbf92eb02aada1337190f2dcad705fbb41f67ab', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '73501f3dda0d40e4d61cc8c47da2cd6dd7fd5e9a', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '7e6b56eff9514d2b49339c3972c03ba22ab53fc6', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'ece98d54b3bd16c08bcd14203179a4c7244afa25', name: "header" })), h("div", { key: 'a3c9f64cffbb172ecb802ace41c5ebbcd731972b', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'd0e85bb0e5095c14fa26dddb5ce92db1cf1f1d1f' })), h("div", { key: '006a4af475b87cbfb4d822c3f52fa0b4fe38faa8', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '5bfcbe7de63ba3f11a9c289a30fd9e416e65927a', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }