@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

package/dist/collection/components/co-file-field/co-file-field.js

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: 'ec349a2beeea1fb9195d9e117056270c125dce4c', class: {
+        return (h("div", { key: 'a4bc53a3deccc7ef04de56356583a8fbcbe39649', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'e89a935967628ef58775a1449a44b19dea35bfe4', class: "co-file-field__labels" }, h("label", { key: 'e24cccf041b29fc39706dacb8d3eb3c06fd8ee9d', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'ae32e17c9411158e0f69cd508f12e56bd56ed7a4', required: this.required })))), showDropzone && (h("div", { key: '6216f8858dc7195dfe3999a8ac636409ef12eb3d', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '4d4c418ff76f72ac7b491dc5173078ebcecdfbb7', class: "co-file-field__labels" }, h("label", { key: 'afe9d0d47d50178270a4a4a7f9a90af4f8472958', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e4879bd87853fcbb0552d9e6835fb3934916c29f', required: this.required })))), showDropzone && (h("div", { key: 'f60920fe11c3d1020ffb6043f20f3a82e6905cb2', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'ee667570d661b19a8fbd43f8673fc4817c95c6db', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '8f6663547642c9005f706e8f7289ffe58f6226c5', name: "file-arrow-up", size: 18 }), h("span", { key: '39e1d8c2a875b9e6249138d4b4b9ce0d2dbf4ad4' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '2f317b69e38a99ec24d661145efbdb9d77ff2f67', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'ba3c34747e83aa42e3eb0a821ed49dd4b27457b1', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'b44d49306d37ec6569ee85047b57298dbf97bf96', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '36a17ecbc89b70cc140045ce1b2c6b251d5363e7', name: "actions" })), h("input", { key: '07d10d77c3673fd8f92b5eacadf342469400c1cb', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '5fb766f14920218f0cc3cfa80256af8542dbc44e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'a133328f198a7d7947cbfb1e77b822f70310ec1a', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'cef939986d1f70d907dcb6f3f048b4fb1fe5156d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'db43db11520f245328ee76de839112d7a4c766e5', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'f9152f578e99a926a3b81996917f2a592b8d14cd', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '93a116c81906b5daaac81feb6d671d942d085bd8', name: "file-arrow-up", size: 18 }), h("span", { key: 'fb09b9218d6185d116d75368591b6b7e2be399b6' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'd4287e8a0070536125f09dfdd73925476a6cebcf', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '5626df4c28f2f5c4967abeb839db53a39bc547d8', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '40ec0e991be663ffe5f55618ed97de44221e9780', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '2037922c65407155a051533050bab4bbaa908633', name: "actions" })), h("input", { key: '74e2fd73161811ef41eec79786598f3bc86075d8', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'cff78c1550847e20bcfe5b24fd6d14a5e80033d9', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'fa99dad43c4982f14bc330598d27d99d44e6516c', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '83cc2ebec6af1b1baa66a74eb620c82a8eff5569', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'acc3232ccadc13f72a84cc4e3dd2281499a583b7', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'ce339d27da1fd8a224bebd1a7d7ed16a3571cfec', class: {
+        })))), helper && (h("div", { key: 'ef2efaa2264b229e372679c00a554a88fed804a0', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '691ff2e82d45ee55e8087dd86c4389f05ecee268', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '0f35c1734cbfd2bae2be1d85948fcca8ad92e5c2', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7b9ddbcc88296ddb30cf6fe3d651afba544ef991', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '1090e1cd4508413ebda4ed649df1852be46f5fb5', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '730e2f2657f5656ea6992bff86be3903615c51d1', class: {
+        return (h("div", { key: 'fb1894ff2656d74d2c892a6c857d98269604b04e', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '8612481e2e111104047506dc8ca93980723ed6b2', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9842f85b0f184f4d5e05c989535add23d4c423cc', class: "co-helper-text__message" }, h("slot", { key: '940cf28c1c0f5033c16970ac469029d1ebb1e5e4' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: 'd56c274e9f44ae16b13a02ec262d0d14b109fc5b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '5e776db146922fc1271bff50b1b45245baf088b3', class: "co-helper-text__message" }, h("slot", { key: 'c3f93747e7b903296d24f60f87c9e3c29c2cb1cd' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,36 +1,5 @@
 import { h, Host } from "@stencil/core";
-/** Module-level cache shared across all instances */
-const iconCache = new Map();
-const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
-function getBasePath() {
-    return globalThis.__cobaltIconBasePath || CDN_BASE;
-}
-/**
- * File naming convention in @phosphor-icons/core:
- *   regular → "plus.svg"
- *   bold/thin/light/fill/duotone → "plus-bold.svg", "plus-fill.svg", etc.
- */
-function toFilename(kebab, weight) {
-    return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
-}
-async function loadSvg(name, weight) {
-    const key = `${weight}/${name}`;
-    if (iconCache.has(key))
-        return iconCache.get(key);
-    const filename = toFilename(name, weight);
-    const url = `${getBasePath()}/${weight}/${filename}`;
-    try {
-        const res = await fetch(url);
-        if (!res.ok)
-            return '';
-        const svg = await res.text();
-        iconCache.set(key, svg);
-        return svg;
-    }
-    catch (_a) {
-        return '';
-    }
-}
+import { loadSvg } from "./iconLoader";
 /**
  * co-icon — Phosphor icon renderer.
  *
@@ -62,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '0fad4d5acc013ca70b12384477cb5413615c23d2', "aria-hidden": "true", style: {
+        return (h(Host, { key: '65fc20ae25aff18456c778d69454259755477cc8', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '7e5199c496bb07aade0400b61415260f5fd2ee2a', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '867d361c4cd66611a38ccca0910ac93e9b41ed18', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -111,9 +80,10 @@ export class CoIcon {
                     "resolved": "\"bold\" | \"duotone\" | \"fill\" | \"light\" | \"regular\" | \"thin\"",
                     "references": {
                         "IconWeight": {
-                            "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-icon/co-icon.tsx",
-                            "id": "src/components/co-icon/co-icon.tsx::IconWeight"
+                            "location": "import",
+                            "path": "./iconLoader",
+                            "id": "src/components/co-icon/iconLoader.ts::IconWeight",
+                            "referenceLocation": "IconWeight"
                         }
                     }
                 },

package/dist/collection/components/co-icon/iconLoader.js

@@ -0,0 +1,39 @@
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
+/** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
+const iconCache = new Map();
+function getBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}
+/**
+ * Convención de nombres en @phosphor-icons/core:
+ *   regular → "plus.svg" | otros → "plus-bold.svg", "plus-fill.svg", …
+ */
+function toFilename(kebab, weight) {
+    return weight === 'regular' ? `${kebab}.svg` : `${kebab}-${weight}.svg`;
+}
+/**
+ * Devuelve (y cachea) la PROMESA del SVG para `(weight, name)`. Las llamadas
+ * concurrentes para el mismo icono comparten un único fetch.
+ */
+export function loadSvg(name, weight) {
+    const key = `${weight}/${name}`;
+    const cached = iconCache.get(key);
+    if (cached)
+        return cached; // hit incluso si el fetch sigue en vuelo
+    // Cache-bust opcional: ?v=<version> (ver setIconVersion). Permite Cache-Control
+    // immutable/largo en los SVG sin servir iconos stale al subir de versión de Phosphor.
+    const version = globalThis.__cobaltIconVersion;
+    const base = `${getBasePath()}/${weight}/${toFilename(name, weight)}`;
+    const url = version ? `${base}?v=${version}` : base;
+    // priority:'low' → los iconos ceden ante JS/CSS/datos críticos del boot
+    // (Fetch Priority API; ignorado sin daño donde no se soporta).
+    const p = fetch(url, { priority: 'low' })
+        .then((res) => (res.ok ? res.text() : '')) // 404 → '' (queda cacheado, no reintenta)
+        .catch(() => {
+        // Error de red: no envenenar el caché — permitir reintento futuro.
+        iconCache.delete(key);
+        return '';
+    });
+    iconCache.set(key, p); // se guarda ANTES del await
+    return p;
+}

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -7,39 +7,44 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease, background 0.15s ease;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  backdrop-filter: var(--co-icon-button-backdrop-filter, none);
-  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, none);
+  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+  backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
 /* Figma "Secundario" = dark / filled */
 .co-icon-button--filled {
-  background: var(--co-semantic-surface-primary);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);
   color: var(--co-semantic-on-primary);
+  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
 
 /* Figma "Primario" = light / outlined */
 .co-icon-button--outlined {
-  background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary));
+  background: color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);
   color: var(--co-icon-button-color, var(--co-semantic-on-secondary));
   border: 1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle));
 }
 
-/* Ghost = fully transparent, no border */
+/* Ghost = fully transparent, no border, no frost until hover */
 .co-icon-button--ghost {
   background: transparent;
   color: var(--co-icon-button-color, var(--co-semantic-text-default));
   border: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 .co-icon-button--ghost:hover:not(:disabled) {
-  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04));
+  background: color-mix(in srgb, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 60%, 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));
 }
 
 /* ─── SIZES · ROUNDED ───────────────────────────────────────── */
@@ -110,3 +115,9 @@
   pointer-events: none;
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
+
+/* ─── FALLBACK: no backdrop-filter → solid surfaces ──────────── */
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-icon-button--filled { background: var(--co-semantic-surface-primary); }
+  .co-icon-button--outlined { background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary)); }
+}

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -21,12 +21,12 @@ export class CoIconButton {
         this.iconWeight = 'regular';
     }
     render() {
-        var _a;
+        var _a, _b;
         const iconSizeMap = {
             xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
-        const iconSize = (_a = iconSizeMap[this.size]) !== null && _a !== void 0 ? _a : 24;
-        return (h("button", { key: 'd21f938003cb69f4747b94566a2054e4e2af4a04', class: {
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24;
+        return (h("button", { key: '3e53ed7dbb6d68bfecd22f29b16bb792bcc9c565', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
@@ -86,7 +86,7 @@ export class CoIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -188,6 +188,25 @@ export class CoIconButton {
                 "reflect": false,
                 "attribute": "icon-weight",
                 "defaultValue": "'regular'"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the size-derived glyph px (e.g. 24). Falls back to the size default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
             }
         };
     }

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

@@ -85,7 +85,9 @@
   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);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -395,3 +397,7 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-input__field { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -93,7 +93,7 @@ export class CoInput {
     }
     render() {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (h("div", { key: 'ea8acfc26e68ae3fb1af4f7de1bcbd2acd4e7ac7', class: {
+        return (h("div", { key: '3c628ddcc708f39637038f25118918fbe0f9cff2', class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
                 [`co-input--${this.size}`]: true,
@@ -102,10 +102,10 @@ export class CoInput {
                 'co-input--filled': this.hasValue,
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '95a64f4c0139c5d5dac014f5a23f9a04b262329f', class: "co-input__labels" }, this.label && h("label", { key: 'dca544199d539ba2ebc7f554edc92211fe6b5c31', class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { key: 'd3a156e415e060f506e48acc36dc243118afd7ca', required: this.required })), this.secondaryLabel && (h("span", { key: '8f15c42b9112f8fc35f60f43bb57552847354a71', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '1ede7a8c1e233dbbf418009585f70c8656c037cb', class: "co-input__field-row" }, h("div", { key: '8c02baab4dd1515e95ad5a4dfff5f48f55a7d63c', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: '6f1bc645fc200a045e032c7d35692db442b88646', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: 'bd5a9c82550358db4b150d4051552d37a9301af7', name: "chips" }), h("div", { key: '9ff10025bcae287a709719fd3dfae516404775b6', class: "co-input__input-wrapper" }, h("input", { key: '9c739fd0c317e5a9d90a1333323f6d2a866b1814', ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '484e731b13fca8a9c5ce61fe72ddf6e48bb534a1', class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '89513c64c7d590c77159f6a983ed4973289be0d2', class: "co-input__labels" }, this.label && h("label", { key: '4a0874ec1828c5a19ef87c23878d2317f3d441df', class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { key: 'e7a72a5c861923f43968ad95a6c47b46ae13b9ed', required: this.required })), this.secondaryLabel && (h("span", { key: '87911501ccb15a2bd4ef4e58e3537bc968e0f0d2', class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { key: '0c1a530d1a687798f0803564be36409b23d5a1fd', class: "co-input__field-row" }, h("div", { key: 'bb731973f9406d649c3aff55071bd50fd7ebc991', class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { key: '4d244ba725651414653c531e3017f8d3a6ccbfd4', name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { key: '9c2c242a1887a05c4fcc88dbbb99c86ce0b5113f', name: "chips" }), h("div", { key: '8568e8abdc2c37b565b2446126638b43a649d721', class: "co-input__input-wrapper" }, h("input", { key: '6f311f448b23a936e1da7fe547e7510e236bcf99', ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '5826d5d68a03b1cec942a004578f969920a13609', class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { key: '538191d5ef59bd4774b770a8607fd5d1974d1d94', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '35a708d4fbb3e6a555870624639e508ec3fbcc55', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: 'a752b406a2bca43f7f97f6105182e8284e627d05', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: '064462000405431972bedc978973b720f72942fe', name: "suffix" }), h("slot", { key: '990b12d2673dff2d95cd90d0965a4c4bd651814e' }), h("slot", { key: '123cdc8ca7fe31edc41aa3d5c22ff04d1715267b', name: "action" })), this.hasAction && (h("button", { key: '37884d459ba4b9381f76423a30b94875522155ae', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: 'ff2d4309ba5fd1115e7055eeea0cd3ba5ccb7ca4', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: '7b7d08e859dbadaf44f27fad2c447034476ce47d', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: '5027ce06cacf8a9bef2b1ec59afce48b4a641494', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { key: '17a437667dfc378c997349c06cb25f0df0f34b58', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { key: 'c3361adf7357c3de5c52f034e248fb9050f73b20', class: "co-input__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { key: 'b987c7ceeb51c7a2bde1a53b6e80484b1fe2ff90', name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { key: '07e2d8f0ffca417ed82d95b97cf42efaf24212e9', name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { key: '7f1ce796c3d8fda6e3d5b5f63ffa819c6925daef', name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { key: '7294036e68f6f2ff1efe57c957765415691b7d21', name: "suffix" }), h("slot", { key: 'ca865d10565b3b1f140b5d23c52781ea71f5f0ae' }), h("slot", { key: '2422fd84d5ce0f4d1c4eacedeaa72ea259cb1580', name: "action" })), this.hasAction && (h("button", { key: '5dd232fc1a449cf73ddda1e06d28c9d8a9dc4a0d', class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { key: '7cada4fa70ea0ec79754c5a46a59367ea8c66fad', name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { key: 'f27e5c1ea7ff1f83714ae5f542558518dc00a937', class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { key: 'd806c9e918ac1edac3eb703926c0c405019190e1', class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { key: '80f6b84d4354ccf965596cb9546a531cbbc932e0', name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { key: '8f01456c3cfec988ffc6f7c6a03c1ecc43ee4c2c', class: "co-input__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-json-field/co-json-field.css

@@ -55,7 +55,9 @@
 /* ---- Field ---- */
 .co-json-field__field {
   display: flex;
-  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);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -84,6 +86,24 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* ── Size variants (mirror co-input paddings; mono font 12/13/13/14).
+   Height comes from `rows`, not min-height. ── */
+.co-json-field--s .co-json-field__native {
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12, 12px);
+}
+
+.co-json-field--sm .co-json-field__native {
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+}
+
+/* md is the default — no override needed */
+
+.co-json-field--lg .co-json-field__native {
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-14);
+}
+
 /* ---- Helper text ---- */
 .co-json-field__helper {
   display: flex;
@@ -167,3 +187,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-json-field__field { background: var(--co-semantic-surface-secondary); }
+}

package/dist/collection/components/co-json-field/co-json-field.js

@@ -34,6 +34,9 @@ export class CoJsonField {
         this.invalidMessage = 'Invalid JSON';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings; mono font scales 12/13/13/14).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
         /** Raw text in the textarea. */
         this.draft = '';
         /** Internal JSON parse-failure flag. */
@@ -94,16 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '90ec8c329801fb0b4ace08669d6b502037dfa16b', class: {
+        return (h("div", { key: '0f1319b6cd930e576dbba45dfb3bbb9050c8a4c0', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
+                [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'a701737ea2c5b108dec90091566f2d3a397ec3b7', class: "co-json-field__labels" }, h("label", { key: 'd1b7d6b5f683fe9bf8e644ba4deb3bfba0d93040', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '249e52050171e00b27a7fd9751a3595440371cc0', required: this.required })))), h("div", { key: '4c6453d7e4670124e4a48cb449b3bae639ee3b1f', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'bcccb3efa34a50aa1a7a6f0c3db2e5431a0dafde', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '5cf1f53f4b77532d6473fcfa964985509c57e782', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'b906abdf2335b84df2d3976cde5eb7018ed549d3', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '50cfffd0dedb3b091cebadf7b908594d855c1e92', class: "co-json-field__labels" }, h("label", { key: '77410a04bc4ca4f61dd8be107acb159a918f811c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '21f0c872f95b39e38e16388a0935aebe333640ad', required: this.required })))), h("div", { key: 'f7da7b3e56bc9bb1bfe1759f4e6ea260bd45b19e', class: "co-json-field__field", part: "field" }, h("textarea", { key: '8f5413bb82906a15d83130ca963b771e6539d7f6', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '5c844c980cafec58d64ff473022ace4b11f10b26', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'af8b770be33f336be652e0b6b567a602a59d8e63', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0111116f0dc1a4608ac18ed5db04a6bd1342f6a6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '54b8b02fcf03b53105e9254c69e3ea5228e882c2', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ed6b6f2444fbf408818b1ac9911f4513c963dee', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '9282196dfd8f2662c073d7589dd7fd93447101f8', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }
@@ -355,6 +359,26 @@ export class CoJsonField {
                 "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 paddings; mono font scales 12/13/13/14).\nVertical extent still comes from `rows`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
             }
         };
     }

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

@@ -286,17 +286,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: '7df4d99f46591697c48d3a069239811d997a4390', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: '2bb47942785b8273f7f3699ab74a67e101ac3eb1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'e47844036d53ed71322c8e0cb3b4e926571f1031', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'c7cf53faeb4f303e79316587df60b31964daa549', class: "co-lightbox__zoom" }, h("button", { key: '77b34981937a114d22670414b75d041fdd3d074e', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '16ff12d54c8a3d1cd16342adb79c0baa3ada38a4', name: "minus", size: 16 })), h("button", { key: '66c850302c30966f4ab7d1b0ed1efc41651ebba8', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'd9441914db2193d661c3e5a6f1ba65fa70b6f1cf', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'ace38453321e1a8e0df4bb6ffccff15906e7b8e3', name: "plus", size: 16 }))), h("button", { key: 'bb81d23f14638c2b1a134573ab2a44a848f58abe', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '42bf9277561388580d2b0797d7d732815629776f', name: "arrow-square-out", size: 16 })), h("button", { key: '500b2af225fd4692fbd472c5b6287a6d3d5f77e9', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '7141d31ad2a3e09131dd8084b669c7c3fd13b9e2', name: "x", size: 16 })))), img && (h("div", { key: '47a092023486d0ac585cf0e35a1d0a374c69fd51', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '3868a39927e3bfc01201e372c5c30b3dcde73562', class: {
+        return (h("div", { key: 'bfffaae28680b214a562aa3c3ec52aaf16a61571', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, h("button", { key: '94aa9ab08f21bf7d9e77e4ad31325cd13a80bb4d', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), h("button", { key: 'd4333d0c970e71012786915be49be6c0efada12f', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'b9efbf3e3912fb557eba59cce0300468a8e86861', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), h("button", { key: '984f9d2b9498d9715dabff254d2f3da9a42d9172', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: 'b3e3dcab9fd5caeb5a56e621febfde4d0da22147', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '0b35f47557bf3e05db3c98e0df2c6e8d6f5cef94', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '6dcc8cd799b4acfd1bf048600c5d3e9b97dba746', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: 'a47298cf2436b35b95773cf9151e84192056caf5', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '7c1a9f250bb4b881112a57a2f3455b3c82fc77cc', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: '7efe343ba92c77e2f760bd7ea236caf325a50c1e', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '008f102eb44447b7f762c0cd4ba8c19e9fed2ee5', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-footer/co-list-footer.css

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+}
+
+.co-list-footer {
+  display: flex;
+  gap: var(--co-spacing-sm2);
+  padding-top: var(--co-spacing-sm2);
+}
+
+.co-list-footer__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  border-radius: var(--co-border-radius-xs);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  box-sizing: border-box;
+  min-height: 32px;
+}
+
+.co-list-footer__btn:hover {
+  opacity: 0.85;
+}
+
+.co-list-footer__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
+}
+
+.co-list-footer__btn--secondary {
+  background: transparent;
+  color: var(--co-semantic-text-default);
+  border: 1px solid var(--co-semantic-border-default);
+}
+
+.co-list-footer__btn--primary {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+  border: none;
+}