@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -1,9 +1,17 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { initOverlayScroll } from "../../utils/overlayScroll";
 export class CoAutocomplete {
     constructor() {
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         this.placeholder = 'Search…';
         this.disabled = false;
         this.clearable = true;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
         this.status = 'default';
         /** Pre-loaded or server-returned options */
         this.options = '[]';
@@ -112,10 +120,29 @@ export class CoAutocomplete {
         };
         return map[this.status] || null;
     }
+    componentWillLoad() {
+        this.syncQueryFromValue();
+    }
     onOptionsChange() {
         // Whenever host provides new options, open if query has enough chars
         if (this.query.length >= this.minChars)
             this.isOpen = true;
+        // Sync query only if not actively typing (handles async option loading)
+        if (!this.focused) {
+            this.syncQueryFromValue();
+        }
+    }
+    onValueChange() {
+        this.syncQueryFromValue();
+    }
+    syncQueryFromValue() {
+        if (!this.multiple && typeof this.value === 'string' && this.value) {
+            const opt = this.parsedOptions.find(o => o.value === this.value);
+            this.query = opt ? opt.label : this.value;
+        }
+        else if (!this.multiple && !this.value) {
+            this.query = '';
+        }
     }
     handleDocumentClick(e) {
         if (!this.el.contains(e.target)) {
@@ -132,19 +159,36 @@ export class CoAutocomplete {
         const offsetY = startIdx * ITEM_HEIGHT;
         return { totalHeight, startIdx, endIdx, offsetY };
     }
+    // OverlayScrollbars: init when the dropdown is open, tear down when it closes.
+    // Virtual scroll keeps working — scrollTop is read from the OS viewport.
+    componentDidRender() {
+        if (this.isOpen && this.optionsEl && !this.osInstance) {
+            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => { this.scrollTop = vp.scrollTop; });
+        }
+        else if (!this.isOpen && this.osInstance) {
+            this.osInstance.destroy();
+            this.osInstance = undefined;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.osInstance = undefined;
+    }
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'dbd82d4fea4be6c88ccb2d7ad1668930287f3bf4', class: {
+        return (h("div", { key: 'dfab9ff6344118bbaa21bc911671f701ca321d14', class: {
                 'co-autocomplete': true,
                 'co-autocomplete--open': this.isOpen,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
+                [`co-autocomplete--${this.size}`]: true,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '619ff765f8c68972c4d853522c94dafbd413031f', class: "co-autocomplete__labels" }, this.label && h("label", { key: '236092f42ae1bc8ef6fff3531d1c02b1705377d0', class: "co-autocomplete__label" }, this.label), this.secondaryLabel && h("span", { key: 'df13b42541d364a4acba43167827a38b0b27a87c', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '598863a3ee42e0a01f6af5812b14f3407a0d73b6', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '0d3aebb200b280a8f2aadaeba74aa45da06c35d7', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '5148b7f3a278fe9da74069f0da7d6a19dad2ee91', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '2870599c3af0b8a7ee0ced25f54f3dff7118506e', class: "co-autocomplete__labels" }, this.label && h("label", { key: '2bd76cb15d591d71430ff0ac592b8c2910fdb4ce', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '766aac3940792e1b04b48e44c76d02f754ded4c3', required: this.required })), this.secondaryLabel && h("span", { key: '7f0baeed0eaf6b877e4ee7177e27d8553b6ed82a', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: 'faff4ef114f15478992548784a11127f2d14ba27', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '8638177d1a8a17e68849c2ffffc386ad76b6365d', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '59ba38d7a3b44d1502e6668920850098b140e2a3', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: 'd8f3fb968e2b8ff43d2491b1a7953932e911a9b6', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'b4dfcbd7f46b446eb556db8c917856ba5e5f204a', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'aeac31c30449143fe88be0b91631a630a18c6d55', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '6709b702bb00bc1bb7da642f5b2c732a4779c668', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '2839b0fa43c6a8680aa38b6a042460d1982a78ee', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", onScroll: this.handleOptionsScroll }, (() => {
+        }))), h("input", { key: '0196cedcbccae1f159b3b3cf4575964a37398d6a', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'b9ab823198d9268c6fb97f60ddb91f508006d27c', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e13078152b14056cd0640f90c26e68e1b2faa65a', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8db7105cb2865347cb0340b5c1f2a5b5f9da13d3', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '101741284b39462d6f080c35dbec305e911674a9', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", ref: el => (this.optionsEl = el), onScroll: this.handleOptionsScroll }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-autocomplete__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -155,7 +199,7 @@ export class CoAutocomplete {
                         'co-autocomplete__option--disabled': isDisabled,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.icon && h("co-icon", { name: opt.icon, size: 20, class: "co-autocomplete__option-icon" }), h("span", { class: "co-autocomplete__option-label" }, opt.label), isSelected && h("co-icon", { name: "check", size: 16, class: "co-autocomplete__option-check" })));
             }))));
-        })())))), this.helperText && (h("div", { key: '6963253e4d2a6032c12867223a0cb443ac20e9a9', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '58ecb88fc2d2584dc425e66c6b90644369a3294f', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '65d7364007679d734d0774558441bd4d473cd42b', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        })())))), this.helperText && (h("div", { key: '10718ee7ba24570057e2f130ef950b304c510c02', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e8d88e8278f9ea3b28f6b5767991e484d6fc7eb6', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '0a9a6ef20def10b8efe92c55d3e66f1acd34525f', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +234,26 @@ export class CoAutocomplete {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -307,6 +371,46 @@ export class CoAutocomplete {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -536,6 +640,9 @@ export class CoAutocomplete {
         return [{
                 "propName": "options",
                 "methodName": "onOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
     static get listeners() {

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

@@ -1,8 +1,13 @@
 :host {
   display: inline-flex;
+  /* Squircle (superellipse, n≈5) used to mask square avatars so their corners
+     are smooth/continuous — Figma "corner smoothing" — instead of a plain
+     border-radius arc. Normalized 0–100 box, scales to any size via mask-size. */
+  --co-avatar-squircle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M100 50L99.94 68.06L99.75 73.81L99.44 77.94L99.01 81.26L98.44 84.05L97.74 86.46L96.91 88.57L95.94 90.43L94.81 92.07L93.53 93.53L92.07 94.81L90.43 95.94L88.57 96.91L86.46 97.74L84.05 98.44L81.26 99.01L77.94 99.44L73.81 99.75L68.06 99.94L50 100L31.94 99.94L26.19 99.75L22.06 99.44L18.74 99.01L15.95 98.44L13.54 97.74L11.43 96.91L9.57 95.94L7.93 94.81L6.47 93.53L5.19 92.07L4.06 90.43L3.09 88.57L2.26 86.46L1.56 84.05L0.99 81.26L0.56 77.94L0.25 73.81L0.06 68.06L0 50L0.06 31.94L0.25 26.19L0.56 22.06L0.99 18.74L1.56 15.95L2.26 13.54L3.09 11.43L4.06 9.57L5.19 7.93L6.47 6.47L7.93 5.19L9.57 4.06L11.43 3.09L13.54 2.26L15.95 1.56L18.74 0.99L22.06 0.56L26.19 0.25L31.94 0.06L50 0L68.06 0.06L73.81 0.25L77.94 0.56L81.26 0.99L84.05 1.56L86.46 2.26L88.57 3.09L90.43 4.06L92.07 5.19L93.53 6.47L94.81 7.93L95.94 9.57L96.91 11.43L97.74 13.54L98.44 15.95L99.01 18.74L99.44 22.06L99.75 26.19L99.94 31.94Z' fill='%23fff'/></svg>");
 }
 
 .co-avatar {
+  position: relative; /* anchors the optional border ring (::after) */
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,12 +24,51 @@
   -webkit-font-smoothing: antialiased;
 }
 
+/* Optional border that hugs the avatar shape. Off by default (transparent);
+   a host enables it by setting --co-avatar-border-color (custom properties
+   inherit through the shadow boundary, so it can be driven from outside). */
+.co-avatar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--co-avatar-border-width, 1px) var(--co-avatar-border-color, transparent);
+}
+
 .co-avatar__text {
   text-transform: uppercase;
 }
 
+.co-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Square = smooth "squircle" corners (Figma corner-smoothing). The shape comes
+   from the mask, so border-radius is reset to 0. */
 .co-avatar--square {
-  border-radius: var(--co-border-radius-xs);
+  border-radius: 0;
+  -webkit-mask: var(--co-avatar-squircle) center / 100% 100% no-repeat;
+          mask: var(--co-avatar-squircle) center / 100% 100% no-repeat;
+}
+
+/* The square border must follow the squircle (not the rectangular box): paint
+   the border colour and clip it to a ring = full squircle minus an inset one. */
+.co-avatar--square::after {
+  --co-avatar-bw: var(--co-avatar-border-width, 1px);
+  box-shadow: none;
+  background: var(--co-avatar-border-color, transparent);
+  -webkit-mask:
+    var(--co-avatar-squircle) center / 100% 100% no-repeat,
+    var(--co-avatar-squircle) center / calc(100% - 2 * var(--co-avatar-bw)) calc(100% - 2 * var(--co-avatar-bw)) no-repeat;
+  -webkit-mask-composite: xor;
+          mask:
+    var(--co-avatar-squircle) center / 100% 100% no-repeat,
+    var(--co-avatar-squircle) center / calc(100% - 2 * var(--co-avatar-bw)) calc(100% - 2 * var(--co-avatar-bw)) no-repeat;
+          mask-composite: exclude;
 }
 
 .co-avatar--light {

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

@@ -16,7 +16,7 @@ const FONT_SIZE_MAP = {
 };
 export class CoAvatar {
     constructor() {
-        /** Display type: text shows initials, icon shows a Phosphor icon */
+        /** Display type: text shows initials, icon shows a Phosphor icon, image shows a picture */
         this.type = 'text';
         /** Size of the avatar */
         this.size = 'md';
@@ -26,19 +26,26 @@ export class CoAvatar {
         this.iconWeight = 'regular';
         /** Shape of the avatar */
         this.shape = 'circle';
+        this.imgFailed = false;
+        this.handleImgError = () => {
+            this.imgFailed = true;
+        };
     }
     render() {
         var _a, _b, _c;
         const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : 56;
         const iconSize = (_b = ICON_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : 24;
         const fontSize = (_c = FONT_SIZE_MAP[this.size]) !== null && _c !== void 0 ? _c : 'var(--co-font-size-18)';
-        return (h("div", { key: '6065912f7c2f812a8313048c727c644f2066845e', class: {
+        const showImage = this.type === 'image' && this.src && !this.imgFailed;
+        return (h("div", { key: '0cb2791e742ef38fdf9fe39037cb4024bf87df4f', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
                 'co-avatar--square': this.shape === 'square',
                 'co-avatar--light': !!this.color && isLightColor(this.color),
-            }, style: Object.assign({ width: `${dim}px`, height: `${dim}px`, fontSize }, (this.color ? { background: this.color } : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
+            }, style: Object.assign(Object.assign({ width: `var(--co-avatar-size, ${dim}px)`, height: `var(--co-avatar-size, ${dim}px)`, fontSize }, (this.color ? { background: this.color } : {})), (this.ringColor
+                ? { '--co-avatar-border-color': this.ringColor, '--co-avatar-border-width': '2px' }
+                : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: this.text || '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
     }
     static get is() { return "co-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -58,15 +65,15 @@ export class CoAvatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'icon'",
-                    "resolved": "\"icon\" | \"text\"",
+                    "original": "'text' | 'icon' | 'image'",
+                    "resolved": "\"icon\" | \"image\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display type: text shows initials, icon shows a Phosphor icon"
+                    "text": "Display type: text shows initials, icon shows a Phosphor icon, image shows a picture"
                 },
                 "getter": false,
                 "setter": false,
@@ -113,6 +120,25 @@ export class CoAvatar {
                 "reflect": false,
                 "attribute": "text"
             },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL (type=\"image\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -191,7 +217,31 @@ export class CoAvatar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "color"
+            },
+            "ringColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional 2px ring color (hex/CSS). Drives the inset ::after ring."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "ring-color"
             }
         };
     }
+    static get states() {
+        return {
+            "imgFailed": {}
+        };
+    }
 }

package/dist/collection/components/co-avatar-group/co-avatar-group.css

@@ -0,0 +1,86 @@
+/* co-avatar-group — overlapping stack of co-avatar with a "+N" overflow badge */
+
+:host {
+  display: inline-flex;
+}
+
+.co-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Interactive = the whole stack is one focusable <button> (opens a manager). */
+.co-avatar-group--interactive {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--co-border-radius-full);
+  outline: none;
+  transition: opacity 0.12s ease;
+}
+
+.co-avatar-group--interactive:hover {
+  opacity: 0.88;
+}
+
+.co-avatar-group--interactive:focus-visible {
+  box-shadow: 0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus);
+}
+
+/* Per-avatar tooltip wrapper — a transparent flex item so the stack lays out
+   exactly as if the avatars were direct children. `line-height: 0` (inherited
+   into co-tooltip's inline-block trigger) removes the baseline strut that would
+   otherwise push each avatar off-center vertically. */
+.co-avatar-group__slot {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+/* Each subsequent item slides under the previous one (overlap). Tunable from
+   the outside via --co-avatar-group-overlap (custom props inherit through the
+   shadow boundary). */
+.co-avatar-group > *:not(:first-child) {
+  margin-left: calc(-1 * var(--co-avatar-group-overlap, var(--co-spacing-sm)));
+}
+
+/* Separation ring so overlapping discs read as distinct. box-shadow overlays
+   without affecting layout; the ring colour matches the page surface so the
+   front avatar appears to "cut out" of the one behind it. co-avatar exposes its
+   disc as part="avatar", which `::part` reaches across its shadow boundary. */
+.co-avatar-group__avatar::part(avatar),
+.co-avatar-group__overflow {
+  box-shadow: 0 0 0 var(--co-avatar-group-ring-width, 2px) var(--co-semantic-surface-page);
+}
+
+/* The avatars are slotted into co-tooltip's inline-block trigger; align them to
+   the middle of that line box so the photo/text discs sit on one row. */
+.co-avatar-group__avatar,
+.co-avatar-group__overflow {
+  vertical-align: middle;
+}
+
+.co-avatar-group__overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: var(--co-border-radius-full);
+  /* Solid (opaque) neutral disc — a translucent surface would let the avatar
+     behind it bleed through where they overlap. surface-muted adapts to dark. */
+  background: var(--co-semantic-surface-muted);
+  color: var(--co-semantic-text-secondary);
+  font-family: var(--co-font-family-primary);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  flex-shrink: 0;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+}