@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -63,16 +63,21 @@ export class CoPopover {
             });
             let finalTop = top;
             let finalLeft = left;
-            // Compensate for any transformed ancestor that turned our `position: fixed`
-            // into a relative-positioned box.
-            if (!this.offsetAncestorComputed) {
-                this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
-                this.offsetAncestorComputed = true;
-            }
-            if (this.cachedOffsetAncestor) {
-                const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
-                finalTop -= parentRect.top;
-                finalLeft -= parentRect.left;
+            // When the panel is promoted to the top layer (Popover API), `position:fixed`
+            // resolves against the viewport regardless of any transformed/filtered
+            // ancestor — so skip the offset-ancestor compensation. It only applies in
+            // the no-Popover-API fallback where the panel still renders in place.
+            const promoted = this.panelEl.matches(':popover-open');
+            if (!promoted) {
+                if (!this.offsetAncestorComputed) {
+                    this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
+                    this.offsetAncestorComputed = true;
+                }
+                if (this.cachedOffsetAncestor) {
+                    const parentRect = this.cachedOffsetAncestor.getBoundingClientRect();
+                    finalTop -= parentRect.top;
+                    finalLeft -= parentRect.left;
+                }
             }
             const style = {
                 top: `${finalTop}px`,
@@ -128,6 +133,10 @@ export class CoPopover {
             this.unbindDocListeners();
             this.cachedOffsetAncestor = null;
             this.offsetAncestorComputed = false;
+            // The panel is removed from the DOM by the conditional render (which also
+            // evicts it from the top layer); drop the now-detached ref so no async
+            // updatePosition can touch a stale element before the next open re-sets it.
+            this.panelEl = undefined;
         }
     }
     bindDocListeners() {
@@ -154,6 +163,27 @@ export class CoPopover {
     async hide() {
         this.open = false;
     }
+    /**
+     * Promote the panel to the browser top layer (Popover API) so an ancestor's
+     * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.
+     * The API promotes WITHOUT moving the DOM node — slots, inherited custom
+     * properties, composedPath() outside-click and nested popovers all keep
+     * working. No-ops where unsupported (graceful fallback to in-place fixed
+     * positioning + offset-ancestor compensation, see updatePosition).
+     */
+    promotePanel() {
+        const el = this.panelEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            if (!el.matches(':popover-open'))
+                el.showPopover();
+        }
+        catch (_a) {
+            /* browser rejected promotion (already open, or element left the DOM in
+               the same frame) — safe to ignore; falls back to in-place positioning */
+        }
+    }
     // ── Scroll/resize listeners ────────────────────────────────
     // Listen to window resize/scroll (covers most layout changes) and to the
     // NEAREST scrollable ancestor (covers internal-scroll containers like a
@@ -184,12 +214,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: '4a41d0ad2982a876a0363d16aa10fce661dfbe2f', class: "co-popover" }, h("div", { key: 'fa8d4ad46ca09489beeafeb9a08106c09c2c8d70', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '820c4741ee9f6d2e3d171b25b987c174a523db89', name: "trigger" })), this.open && (h("div", { key: '8abfea810cc0a2041c1280594a0c5c2eb71b1fd8', class: "co-popover__panel", ref: (el) => {
+        return (h("div", { key: 'aaf34bcc1d71dc54e84c8d24da8c78caa877a12f', class: "co-popover" }, h("div", { key: '0403dfeb0a0fa0e8f9517269b15066dc595c9856', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '6465139ca15b877bd38c4d60beebb82617d34dfe', name: "trigger" })), this.open && (h("div", { key: '7afe0527d6c666f3a1cf71be22fe4b726eddda8d', class: "co-popover__panel", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
+                    this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '50632e7bb1cbb34b05cf5f6f0ba86d458a074bc0' })))));
+            } }, h("slot", { key: 'e0dff9e87e8e1e4124ae1bbf2100e29972b9e8ee' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,3 +62,25 @@
 .co-progress-bar--dashed.co-progress-bar--default {
   border-color: var(--co-semantic-border-muted);
 }
+
+/* ─── Indeterminate ──────────────────────────────────────── */
+.co-progress-bar--indeterminate .co-progress-bar__fill {
+  width: 40%;
+  transition: none;
+  animation: co-progress-indeterminate 1.4s ease-in-out infinite;
+  will-change: transform;
+}
+
+@keyframes co-progress-indeterminate {
+  0%   { transform: translateX(-110%); }
+  100% { transform: translateX(360%); }
+}
+
+/* Reduced-motion: no sweep — a calm, static filled track instead. */
+@media (prefers-reduced-motion: reduce) {
+  .co-progress-bar--indeterminate .co-progress-bar__fill {
+    animation: none;
+    width: 100%;
+    opacity: 0.45;
+  }
+}

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

@@ -12,14 +12,18 @@ export class CoProgressBar {
         this.variant = 'solid';
         /** Height of the bar in px */
         this.thickness = 4;
+        /** Indeterminate mode: ignore `value` and run a looping sweep animation. */
+        this.indeterminate = false;
     }
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
-        return (h("div", { key: '6d81d6941a783cbed036d81c4f0f9ffd2e5d504d', class: {
+        const indeterminate = this.indeterminate;
+        return (h("div", { key: '3063137d53e16044d3a0e7eaf9297c33955494f2', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
-            }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '2a16b4532e464cf3bd2db8d809600b40d750b125', class: "co-progress-bar__fill", style: { width: `${clamped}%` } })));
+                'co-progress-bar--indeterminate': indeterminate,
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '171a08b832dd1f9430947e0b39b516b4d3580454', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -114,6 +118,26 @@ export class CoProgressBar {
                 "reflect": false,
                 "attribute": "thickness",
                 "defaultValue": "4"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate mode: ignore `value` and run a looping sweep animation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/co-progress-circle/co-progress-circle.js

@@ -19,7 +19,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: '992ae1f0476cad32f27779742265333134c31d2e', class: {
+        return (h("div", { key: 'ad0b74fe0dd46308522c36190ceb783f0bbed1d2', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -27,7 +27,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: 'f39ad29a8ef70bc4c7f6c6afbeb817b7d3b3fcdd', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: 'b639b4730e3707cfaa613057805c4a196cc584d1', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '353a9fe4a7d736884cdc51f30320c505cceb3e75', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '38577ffe98963aa7bc3a6a1eb9b7178fe32d2435', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '5fb19abe8e70008fffa64cd1bce654d7052e9d7d', class: {
+        return (h("div", { key: '083c92d2ee5069c2fd222aefee1d02bff88c68ce', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: 'f9fc1b87defc09feda1937643d34e3cfad9662ed', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '3aa5c6abdb62d67d529b7586f86f9d30dbaf20b6', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '3b4d359191f1dd87909ed760afd1ab86d9024162', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '7593848b2e0792283e65b45ea6cb8cafe5be0f8d', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-radio-group/co-radio-group.js

@@ -59,11 +59,11 @@ export class CoRadioGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
+        return (h("div", { key: '0e910e8b8153eb1c4b682c7c26bc16cfafb6463d', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'cebc4c3acac2417594f750c73391e4a3fee8572b', class: "co-radio-group__labels" }, this.label && h("span", { key: 'e84c1a5f7a271b7df1954e3bba2f3269775ec8f1', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '147d8b0a1f683e858477aee31c5b6327cc790ca4', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '347b5812da74b9cfade755d0d8dff71741e2d81e', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -78,7 +78,7 @@ export class CoRadioGroup {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: 'aa1712f70c7bce863f7c158509b2f8f09d8d94a1', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1a1f09846bdd43461c4fe280f97621ef08ae9dbb', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'bb624ad1a942d22e0c6fa296d4d59b6f3d04061d', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,16 +36,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '67e3b30b95acbb48d96d572ac133b324b6872314', class: {
+        return (h("div", { key: '77f740771bf55482c42bf22b523b206c817af2c9', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: '06467dde87ab5b78e8db46bc7db542c57a58fcad', class: "co-rating__label" }, this.label), h("div", { key: '5a50067af1c8512c17ab787d156d214d3e8c7728', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '4030e11d84b9dcf0b283c4828af3650775b715d3', class: "co-rating__label" }, this.label), h("div", { key: 'a4729df2079de67fdaa2fe863bbd0bb7780688a7', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'f040eba3fd1edd6ed9c6d6387d96f7f910abb855', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '97603b28a2f29269f378af63324d706bf77e62ee', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '756b3518725bbfad6432907e78f4ced05add8700', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '7c7558f9fac12f49a62da533de1f72bc70d6b3ef', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '184cc9a94bb7b585f18b96d6442adfeac8d2faf8', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'fb494734e31576a0a933d4efefa6ddebc88ecf49', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -696,6 +696,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-ref-field__label {
+  display: inline-flex;
+  align-items: center;
   color: var(--co-ref-field-label-color, var(--co-semantic-text-secondary));
   font-family: var(--co-ref-field-label-font-family, var(--co-font-family-primary));
   font-size: var(--co-ref-field-label-font-size, var(--co-font-size-14));
@@ -723,8 +725,13 @@ 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);
-  border: 1px solid var(--co-semantic-border-subtle);
+  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 colour is themeable so a host can make it more prominent
+     (e.g. navbar chip = Figma "Blanco 16%") without touching the shared
+     --co-semantic-border-subtle token. */
+  border: 1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-subtle));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -732,12 +739,27 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Size variants (mirror co-input heights: s 28 / sm 32 / md 40 / lg 48).
+   md is the default trigger above — no override needed. sm keeps its legacy
+   12px font (suite-v2 FieldRef/filters depend on this exact look). */
+.co-ref-field--s {
+  min-height: 28px;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+}
+
 .co-ref-field--sm {
   min-height: 32px;
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   font-size: var(--co-font-size-12);
 }
 
+.co-ref-field--lg {
+  min-height: 48px;
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-16);
+}
+
 .co-ref-field--open {
   border-color: var(--co-semantic-border-focus);
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
@@ -753,6 +775,12 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-ref-field--success { border-color: var(--co-semantic-status-success); }
 .co-ref-field--warning { border-color: var(--co-color-status-review); }
 
+/* Single selected value scales its avatar to match the chip scale. */
+.co-ref-field--s  .co-ref-field__selected { --co-avatar-size: 20px; }
+.co-ref-field--sm .co-ref-field__selected { --co-avatar-size: 22px; }
+.co-ref-field--md .co-ref-field__selected { --co-avatar-size: 22px; }
+.co-ref-field--lg .co-ref-field__selected { --co-avatar-size: 28px; }
+
 .co-ref-field__icon {
   flex-shrink: 0;
   color: var(--co-semantic-text-muted);
@@ -760,6 +788,12 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
 }
 
+.co-ref-field__label-icon {
+  flex-shrink: 0;
+  margin-right: var(--co-spacing-xs);
+  color: var(--co-semantic-text-secondary);
+}
+
 .co-ref-field__value {
   flex: 1;
   min-width: 0;
@@ -859,13 +893,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   display: inline-flex;
   align-items: center;
   gap: var(--co-spacing-sm);
-  padding: var(--co-spacing-sm) var(--co-spacing-sm2);
+  /* Flush "contact-pill": no vertical padding — the avatar (or min-height for
+     dot-only chips) defines the height, so the chip never exceeds the field's
+     inner content area and the trigger height stays constant. */
+  padding: 0 var(--co-spacing-sm2);
   background: var(--co-color-gray-100);
   border-radius: var(--co-border-radius-full);
-  font-size: var(--co-font-size-14);
   line-height: 1;
-  max-width: 160px;
-  /* Chips must keep their natural width so calcOverflow can measure which
+  /* Cap at 160px, but never wider than the chips wrapper: in a narrow field
+     (e.g. a half-width filter cell) the first chip shrinks to the available
+     width and ellipsis-truncates instead of overflowing — so at least one
+     readable chip always shows next to the "+N" badge. */
+  max-width: min(160px, 100%);
+  /* Chips otherwise keep their natural width so calcOverflow can measure which
      ones actually fit — without this, flex squeezes every label instead. */
   flex-shrink: 0;
 }
@@ -875,6 +915,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding-left: var(--co-spacing-xxs);
 }
 
+/* Size-aware chip: height ≤ the field's inner content area at each size so the
+   trigger never grows. Flush avatar diameter == chip height.
+   EXACT-FIT (no slack): s/sm/md all have a 22px inner area (trigger height −
+   vertical padding − 2px border), so their chips are 22px max; lg's is 30px.
+   Bumping a chip min-height / --co-avatar-size, or the trigger's vertical
+   padding tokens, will reintroduce the field-growth bug — keep ≤ inner area. */
+.co-ref-field__chip--s  { min-height: 20px; --co-avatar-size: 20px; font-size: var(--co-font-size-12); }
+.co-ref-field__chip--sm { min-height: 22px; --co-avatar-size: 22px; font-size: var(--co-font-size-12); }
+.co-ref-field__chip--md { min-height: 22px; --co-avatar-size: 22px; font-size: var(--co-font-size-14); }
+.co-ref-field__chip--lg { min-height: 28px; --co-avatar-size: 28px; font-size: var(--co-font-size-14); }
+
 /* Chips counted as overflow stay in the DOM for measurement but invisible —
    no half-cut chip at the clipped edge. */
 .co-ref-field__chip--clipped {
@@ -894,6 +945,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Allow the label to shrink below its content so the ellipsis kicks in when
+     the chip is capped to a narrow wrapper (see chip max-width above). */
+  min-width: 0;
 }
 
 .co-ref-field__chip-remove {
@@ -1281,3 +1335,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-ref-field__trigger { background: var(--co-semantic-surface-secondary); }
+}