@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -10,6 +10,8 @@ export class CoAutocomplete {
         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 = '[]';
@@ -176,16 +178,17 @@ export class CoAutocomplete {
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'ce31954b886934fec694f6c08e8fd0ec358aa8e6', 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: 'b71d3070d2bcce5adf61e1e88d06909b416ee4be', class: "co-autocomplete__labels" }, this.label && h("label", { key: 'add95254b2680cbb8f97a9b5b396ad4d89e1068e', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: 'e92fe73557be2f133615b1271d5c5607a568ce42', required: this.required })), this.secondaryLabel && h("span", { key: 'b1000110ba12d6ebd8e59de414053bb4181c2ae8', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: 'd47ff0409a8b2f061fd4b1327c86a6eb7ab4d5a0', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '490f639278ac1d92f8e5da2526941ae1eca155d6', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '72c1e36ff8f609803a04183b500b73fd66638b5e', 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: '88baf2b40c8507295f650798bc010d559ee3bd4c', 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: 'f8f1913882e0974fa5a1d10181ef74a1f64e4186', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: '69bd3289badc18d1db76a883d7714403946ea754', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'a5efa91bb9ce0e4d0eac8825a81dddc6ad91021e', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: 'b466e95c24e6ae654708998c3bc7d5f6fadcda46', 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 }, (() => {
+        }))), 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);
@@ -196,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: '5f6a00e92f6415c3ceaf04daf0cc9453b25c8090', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '46ec66a06fd5d05b7aa715a23abe65586aacfdf3', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: 'fb8a087ea50ccb8a3adc4d1f2a117d185915b417', 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"; }
@@ -388,6 +391,26 @@ export class CoAutocomplete {
                 "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,

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,6 +24,18 @@
   -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;
 }
@@ -30,8 +47,28 @@
   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

@@ -32,18 +32,25 @@ export class CoAvatar {
         };
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         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)';
         const showImage = this.type === 'image' && this.src && !this.imgFailed;
-        return (h("div", { key: '8d537f60b1cefc91c98b0bfd5bdbfc9af8415868', class: {
+        const ariaLabel = this.type === 'text'
+            ? this.text
+            : this.type === 'image'
+                ? (_e = (_d = this.alt) !== null && _d !== void 0 ? _d : this.text) !== null && _e !== void 0 ? _e : this.icon
+                : this.icon;
+        return (h("div", { key: '279ce6f51cbc3b2c11c0660f5a0f98e03a2db4fb', 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 }, 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))));
+            }, 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": ariaLabel }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: (_g = (_f = this.alt) !== null && _f !== void 0 ? _f : this.text) !== null && _g !== void 0 ? _g : '', 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"; }
@@ -137,6 +144,25 @@ export class CoAvatar {
                 "reflect": false,
                 "attribute": "src"
             },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image (type=\"image\"); falls back to text when unset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -215,6 +241,25 @@ 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"
             }
         };
     }

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;
+}

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

@@ -0,0 +1,224 @@
+import { h } from "@stencil/core";
+/** Disc dimensions per size — kept in sync with `co-avatar`'s SIZE_MAP. */
+const SIZE_MAP = {
+    xl: 80, lg: 64, md: 56, sm: 48, xs: 32, xxs: 24,
+};
+/** Font size per size for the "+N" overflow badge — mirrors `co-avatar`. */
+const FONT_SIZE_MAP = {
+    xl: 'var(--co-font-size-26)',
+    lg: 'var(--co-font-size-22)',
+    md: 'var(--co-font-size-18)',
+    sm: 'var(--co-font-size-16)',
+    xs: 'var(--co-font-size-12)',
+    xxs: 'var(--co-font-size-10)',
+};
+export class CoAvatarGroup {
+    constructor() {
+        /** Avatar descriptors rendered as an overlapping stack. */
+        this.items = [];
+        /** Max avatars shown before the remainder collapses into a "+N" badge. `0` = show all. */
+        this.max = 4;
+        /** Size forwarded to every avatar (and the overflow badge). */
+        this.size = 'xs';
+        /** Shape forwarded to every avatar that doesn't set its own. */
+        this.shape = 'circle';
+        /** Make the whole group a focusable button (role=button, keyboard, coClick). */
+        this.interactive = false;
+        this.activate = () => {
+            this.coClick.emit();
+        };
+    }
+    accessibleLabel(items) {
+        if (this.label)
+            return this.label;
+        return items.map((it) => it.name || it.text).filter(Boolean).join(', ');
+    }
+    render() {
+        var _a, _b;
+        const items = Array.isArray(this.items) ? this.items : [];
+        const max = this.max > 0 ? this.max : items.length;
+        const visible = items.slice(0, max);
+        const extra = Math.max(0, items.length - max);
+        const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : SIZE_MAP.xs;
+        const fontSize = (_b = FONT_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : FONT_SIZE_MAP.xs;
+        const overflowLabel = items
+            .slice(max)
+            .map((it) => it.name || it.text)
+            .filter(Boolean)
+            .join(', ');
+        // A native <button> when interactive: focusable + Enter/Space click for free
+        // (and its click bubbles to a wrapping co-popover trigger, which opens it).
+        const Tag = this.interactive ? 'button' : 'div';
+        const interactiveAttrs = this.interactive
+            ? {
+                type: 'button',
+                'aria-label': this.accessibleLabel(items),
+                onClick: this.activate,
+            }
+            : { role: 'group' };
+        return (h(Tag, Object.assign({ key: 'a85fa472bfcf9e7a22ab68c14dff8c79cce33526', class: {
+                'co-avatar-group': true,
+                'co-avatar-group--interactive': this.interactive,
+            } }, interactiveAttrs), visible.map((it, i) => {
+            var _a, _b, _c;
+            return (h("co-tooltip", { key: i, class: "co-avatar-group__slot", content: it.name || it.text || '', placement: "bottom" }, h("co-avatar", { class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor })));
+        }), extra > 0 && (h("co-tooltip", { key: 'd6f5867903da085b23395cbad94381241297f539', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: 'a362b8e4262735c4adb7b917d501ccc3d760bdae', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
+    }
+    static get is() { return "co-avatar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-avatar-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-avatar-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CoAvatarGroupItem[]",
+                    "resolved": "CoAvatarGroupItem[]",
+                    "references": {
+                        "CoAvatarGroupItem": {
+                            "location": "local",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
+                            "id": "src/components/co-avatar-group/co-avatar-group.tsx::CoAvatarGroupItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar descriptors rendered as an overlapping stack."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max avatars shown before the remainder collapses into a \"+N\" badge. `0` = show all."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "4"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size forwarded to every avatar (and the overflow badge)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'xs'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square'",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape forwarded to every avatar that doesn't set its own."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the whole group a focusable button (role=button, keyboard, coClick)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label override; when absent it's composed from the items' names."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coClick",
+                "name": "coClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on click / Enter / Space when `interactive`. Does NOT bubble."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -10,7 +10,7 @@ export class CoBadge {
         this.color = 'default';
     }
     render() {
-        return (h("span", { key: 'd291e0f90b20ad857091d96a9baba5d3e353785f', class: {
+        return (h("span", { key: '17fe27e556bbcf5773feb6faf07533c01cc6f62e', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,