@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -30,8 +30,16 @@ export class CoInput {
         this.required = false;
         /** Validation status */
         this.status = 'default';
-        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px) */
+        /** Size variant: s (28px), sm (32px), md (40px, default), lg (48px).
+         *  In the filled search-pill variant (`fill`) this drives the pill height
+         *  instead (s ≈ 38px). */
         this.size = 'md';
+        /** Filled search-pill variant. When true the field renders as a minimal gray
+         *  pill (background gray-100, no border/box-shadow, 10px radius) with a search
+         *  glyph on the left and a plain-`x` clear — the floating label, helper text and
+         *  status chrome are suppressed. When false (default) the field renders
+         *  IDENTICALLY to the standard text field. */
+        this.fill = false;
         this.hasFocus = false;
         this.handleInput = (e) => {
             const target = e.target;
@@ -91,9 +99,30 @@ export class CoInput {
             default: return null;
         }
     }
+    /** Filled search-pill variant (fill=true). Minimal chrome: icon-left + native
+     *  input + plain-x clear. No labels, helper text, status icons, chips or action.
+     *  The default field render path is left untouched. */
+    renderFill() {
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const leftIcon = this.iconLeft || 'magnifying-glass';
+        return (h("div", { class: {
+                'co-input': true,
+                'co-input--fill': true,
+                [`co-input--${this.size}`]: true,
+                'co-input--disabled': this.disabled,
+                'co-input--focused': this.hasFocus,
+                'co-input--filled': this.hasValue,
+            }, part: "wrapper" }, h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, h("co-icon", { name: leftIcon, size: 17, class: "co-input__icon co-input__icon--left" }), h("div", { class: "co-input__input-wrapper" }, h("input", { 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", { 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", { name: "x", size: 14 })))))));
+    }
     render() {
+        if (this.fill) {
+            return this.renderFill();
+        }
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
-        return (h("div", { key: 'ea8acfc26e68ae3fb1af4f7de1bcbd2acd4e7ac7', class: {
+        return (h("div", { class: {
                 'co-input': true,
                 [`co-input--${this.layout}`]: true,
                 [`co-input--${this.size}`]: true,
@@ -102,10 +131,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", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { 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", { 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", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { name: "suffix" }), h("slot", null), h("slot", { name: "action" })), this.hasAction && (h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { class: "co-input__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-input"; }
     static get encapsulation() { return "shadow"; }
@@ -446,7 +475,7 @@ export class CoInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px)"
+                    "text": "Size variant: s (28px), sm (32px), md (40px, default), lg (48px).\nIn the filled search-pill variant (`fill`) this drives the pill height\ninstead (s \u2248 38px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -454,6 +483,26 @@ export class CoInput {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Filled search-pill variant. When true the field renders as a minimal gray\npill (background gray-100, no border/box-shadow, 10px radius) with a search\nglyph on the left and a plain-`x` clear \u2014 the floating label, helper text and\nstatus chrome are suppressed. When false (default) the field renders\nIDENTICALLY to the standard text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill",
+                "defaultValue": "false"
+            },
             "actionLabel": {
                 "type": "string",
                 "mutable": false,

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: '3694e74443cabde9c86e37a38d2ab93f49e2a239', 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: '806b6b2e0aa1fc4cade79fec7111e7afa4f23faf', class: "co-json-field__labels" }, h("label", { key: 'c01947ab92bb4849469e70b3077fa0af5fa953bd', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f91fd778dba0cdb233872dcace643112e0d3c4de', required: this.required })))), h("div", { key: '4070579d2d8fe149c19163133d7ea549f965725e', class: "co-json-field__field", part: "field" }, h("textarea", { key: '91e21766aae9f39e76c003720207bebfb087af4f', 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: '87736d190c59a59a46ae0a341f28135892f109d0', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '304a65252877ae80e52278bea82128a8f7df3c90', 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: '1771161363b23da8aac7f1c70ab56b32f208f5cd', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'ce965e666a8107027249647a256c4e46d72d2db4', 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: '52c5a63a5b289a012b4abe1c36836443e411e6f7', 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: 'aaa047087d36959105b86c7dde558155f3c68a69', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '32fb4ca4e93b26f24817db3c0aa2751be1de60d6', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '33c8ab802bd2d23e43adb02bb0428d302a07db74', class: "co-lightbox__zoom" }, h("button", { key: '9dc29e565c5dda21e746b6811a45ce6d4d4452d7', 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: 'fccd37212da128bcb4d1dae7278d305e376fbdbb', name: "minus", size: 16 })), h("button", { key: 'c3119bb1829926d9426d5420504f9b48b600160c', 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: 'cf38c2ad754af4d4faa9fb7ba824344578939c82', 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: '017e7627ed2563c76e6b5dcf8dddee16ee37b9ec', name: "plus", size: 16 }))), h("button", { key: '2f57b78ea0d5ad1cde4d10e874681dfc1279c333', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'f3de0f4b04e07966784efd3e87775f1add854578', name: "arrow-square-out", size: 16 })), h("button", { key: '459a464214f1b75ee1e7f9ec810f35e0d0ba426b', 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: '6208dfb164d75cbecb490b3237bc2350c224d7c3', name: "x", size: 16 })))), img && (h("div", { key: '1ba614d572e39b9e6f08a5810d129bca7b7b4f9b', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'a61b425df6441845abbfaa3ae308bb16b7ac8813', 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: '8578fbfa008878324b15f2d7ade346f86f465bea', 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: 'e2ea791a38889d458c30155c3c6f65ea734ff1c8', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '1e3232f6fc181eb9444ee5ea7bdfe688ede28b55', 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: 'e591fcabe8c3f3c81c276c95d40e5dc6189bd4e0', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'fd55eb538aa57b89ddf17598a1c58cfc8bbcc04b', 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;
+}

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

@@ -0,0 +1,149 @@
+import { h } from "@stencil/core";
+/**
+ * Action footer for dropdown / list panels (co-popover, co-combobox, …).
+ * Renders one or two full-width action buttons in the standard footer design,
+ * separated from the content above by top padding. Use the props for the common
+ * primary/secondary actions, or the default slot for fully custom content.
+ *
+ * @slot - Custom footer content (rendered after the prop buttons).
+ */
+export class CoListFooter {
+    constructor() {
+        /** Primary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.primaryIcon = 'plus';
+        /** Secondary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.secondaryIcon = 'plus';
+        this.handlePrimary = () => this.coPrimary.emit();
+        this.handleSecondary = () => this.coSecondary.emit();
+    }
+    render() {
+        return (h("div", { key: '89ebd30358e2c8b1e1461adb9a294862719dac2f', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '877ee7f795c35c5b2845b606c40518a98f691d00', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '2ecba284a7ac5b1789900a6ab6f66d3e1692d894', name: this.secondaryIcon, size: 16 }), h("span", { key: '5a864d3d85e7a10fb66afd67805527d04cf496ae' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '65281886aee6037f7386e6c92a0e9e158945b496', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'cafc1fbda58a3b3d0dbbe9202e872bd1a96cfbf6', name: this.primaryIcon, size: 16 }), h("span", { key: 'd230a2a1edfe02c75c555f635be0dae8015cdfb9' }, this.primaryLabel))), h("slot", { key: '5f1bec4894b87226198d6154dd9c5f5e86272d4b' })));
+    }
+    static get is() { return "co-list-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-list-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-list-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary (filled) action label. Omit to hide the primary button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label"
+            },
+            "primaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action leading icon (Phosphor). Set to '' to hide the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-icon",
+                "defaultValue": "'plus'"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary (outlined) action label. Omit to hide the secondary button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "secondaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action leading icon (Phosphor). Set to '' to hide the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-icon",
+                "defaultValue": "'plus'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coPrimary",
+                "name": "coPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the primary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coSecondary",
+                "name": "coSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the secondary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -65,7 +65,13 @@
   min-width: 0;
 }
 
+.co-list-item__content > .co-list-item__tip {
+  min-width: 0;
+  max-width: 100%;
+}
+
 .co-list-item__label {
+  display: block;
   font-size: var(--co-font-size-14);
   font-weight: 400;
   color: var(--co-semantic-text-default);
@@ -76,6 +82,7 @@
 }
 
 .co-list-item__description {
+  display: block;
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-muted);
   line-height: 1.3;

package/dist/collection/components/co-list-item/co-list-item.js

@@ -14,6 +14,21 @@ export class CoListItem {
         /** Compact variant — tighter padding + smaller radius for dropdowns / menus
          *  (the default size is tuned for sidebar nav rows). */
         this.dense = false;
+        /** Whether the label / description is currently ellipsis-truncated (drives the tooltip). */
+        this.labelTruncated = false;
+        this.descTruncated = false;
+        // Drives co-tooltip's `disabled`: show the full-text tooltip ONLY when the
+        // label / description is actually ellipsis-truncated. Guarded writes prevent
+        // a render loop; read synchronously, so it's correct before co-tooltip reads
+        // `disabled` on the trigger's mouseenter.
+        this.measureTruncation = () => {
+            const l = this.labelEl ? this.labelEl.scrollWidth > this.labelEl.clientWidth + 1 : false;
+            const d = this.descEl ? this.descEl.scrollWidth > this.descEl.clientWidth + 1 : false;
+            if (l !== this.labelTruncated)
+                this.labelTruncated = l;
+            if (d !== this.descTruncated)
+                this.descTruncated = d;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -30,14 +45,46 @@ export class CoListItem {
             }
         };
     }
+    componentDidLoad() {
+        // A ResizeObserver re-measures when the row gets its real width — e.g. a
+        // top-layer popover panel going from display:none to shown (where a one-shot
+        // load-time measure would read 0) — and on any later resize.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.ro = new ResizeObserver(() => this.measureTruncation());
+            if (this.labelEl)
+                this.ro.observe(this.labelEl);
+            if (this.descEl)
+                this.ro.observe(this.descEl);
+        }
+        this.measureTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro = undefined;
+    }
+    // A width-stable text swap (same column, new text) won't trip the
+    // ResizeObserver — re-measure on prop change; rAF so the DOM holds the new
+    // text first.
+    onTextChange() {
+        requestAnimationFrame(this.measureTruncation);
+    }
     render() {
-        return (h("div", { key: 'c20c81d99d5377684e95422ef24edc7349b56d78', class: {
+        return (h("div", { key: '1c6124749c2bc07f1f5118adf3a906d0316db256', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '763f88155a5c3f29a44cfd4d49da29636c590bde', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'da92fc7a6b988eb204a5f3bfd267ebd79fcf1230', name: this.icon, size: 18 }), h("slot", { key: 'e00510cf206ce0f863f993bd0ad57bc6d8af2a0d', name: "prefix" })), h("div", { key: '3b5ad6d35640d57d9019e4a020effeef66b16c32', class: "co-list-item__content" }, this.label && h("span", { key: 'c745840c3b94ef786c8efd34567506eab39e969d', class: "co-list-item__label" }, this.label), this.description && h("span", { key: '0988768cf7fde689ed1e995efaefd4168ca17af0', class: "co-list-item__description" }, this.description), h("slot", { key: 'bf6c9f3d55980b433a4d858c58c799f7c3e2898e' })), h("span", { key: '6fb267f7ac2fae4b57efff3a3b6cd2b5f4161d79', class: "co-list-item__suffix" }, h("slot", { key: '9ed7454c37b83cde16a66ce990cad1cf3368e3d9', name: "suffix" }))));
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'd452e5ce3b962eebd63fb99d858192e56390e4fe', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '1f2451697758c49bcce76c417ecdd1069a3b923c', name: this.icon, size: 18 }), h("slot", { key: '0366ddc338f487ebfda19c8455009ec7d547a768', name: "prefix" })), h("div", { key: '38e01734e0b6a16f7020eae8d6cf1731c59b3c64', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '353d8e6ca59dbd957473cd8b60d51d9652c79780', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '6d12b514cec487ec071a968787f1a0d94847be13', class: "co-list-item__label", ref: (el) => {
+                this.labelEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.label))), this.description && (h("co-tooltip", { key: 'c08d96031518a7c96ab0d6bb71b147f3aa769d50', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '33e4c5c76a1d066d408b07ff5dbe13e0dbea691a', class: "co-list-item__description", ref: (el) => {
+                this.descEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.description))), h("slot", { key: '2e35ea5289301048d967b4b9bf11743101927118' })), h("span", { key: 'cd33f25a15fb3ad3a747fad14cccb3141967cc4b', class: "co-list-item__suffix" }, h("slot", { key: '25b6881aacf68e7b0e927d367ce9492a642d8224', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +219,12 @@ export class CoListItem {
             }
         };
     }
+    static get states() {
+        return {
+            "labelTruncated": {},
+            "descTruncated": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coSelect",
@@ -190,4 +243,14 @@ export class CoListItem {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "onTextChange"
+            }, {
+                "propName": "description",
+                "methodName": "onTextChange"
+            }];
+    }
 }

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

@@ -69,3 +69,12 @@
   50%      { transform: translateX(calc(var(--co-loader-step) * 2)) scale(0.8); }
   75%      { transform: translateX(var(--co-loader-step)) scale(1.2); }
 }
+
+/* Reduced-motion: freeze the bounce; lay the three balls out as a static row
+   (without this they'd all collapse to x=0 and overlap). */
+@media (prefers-reduced-motion: reduce) {
+  .co-loader__ball { animation: none; }
+  .co-loader__ball--blue   { transform: translateX(0); }
+  .co-loader__ball--yellow { transform: translateX(var(--co-loader-step)); }
+  .co-loader__ball--red    { transform: translateX(calc(var(--co-loader-step) * 2)); }
+}

package/dist/collection/components/co-media-thumb/co-media-thumb.css

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.co-media-thumb {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background: var(--co-color-gray-100, #f6f6f6);
+  box-sizing: border-box;
+}
+
+.co-media-thumb__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ─── VIDEO OVERLAY ─────────────────────────────────────────── */
+.co-media-thumb__scrim {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(31, 28, 27, 0.28);
+}
+
+.co-media-thumb__play {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.co-media-thumb__play-icon {
+  display: block;
+  margin-left: 2px; /* optical centering of the triangle */
+}