@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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: '89a5de192302652fe4b9c41175c9ed38de22549b', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.css

@@ -0,0 +1,136 @@
+:host {
+  display: contents;
+}
+
+/* Backdrop is owned by the sheet (NOT co-overlay): its opacity is driven
+   per-frame during drags, and co-overlay's own bubbling coClose + flex
+   centering don't fit a bottom-anchored panel.
+   No z-index tokens exist yet — 1000 matches co-overlay (see co-lightbox). */
+.co-bottom-sheet__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  /* same scrim + blur as co-overlay (modal backdrop) — there is no scrim token yet */
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.co-bottom-sheet-root--open .co-bottom-sheet__backdrop {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.12s ease;
+}
+
+.co-bottom-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  max-height: var(--co-bottom-sheet-max-height, 85dvh);
+  background: var(--co-semantic-surface-page);
+  font-family: var(--co-font-family-primary);
+  border-radius: var(--co-border-radius-xl) var(--co-border-radius-xl) 0 0;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(100%);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.co-bottom-sheet--open {
+  transform: translateY(0);
+  visibility: visible;
+}
+
+/* keep the slide-out visible while it animates */
+.co-bottom-sheet:not(.co-bottom-sheet--open) {
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
+}
+
+/* while the finger drives the sheet, nothing animates */
+.co-bottom-sheet--dragging,
+.co-bottom-sheet-root:has(.co-bottom-sheet--dragging) .co-bottom-sheet__backdrop {
+  transition: none !important;
+}
+
+/* ─── grip zone: handle + header always drag the sheet ───────── */
+
+.co-bottom-sheet__grip {
+  flex-shrink: 0;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: grab;
+}
+
+.co-bottom-sheet--dragging .co-bottom-sheet__grip {
+  cursor: grabbing;
+}
+
+.co-bottom-sheet__handle {
+  width: 40px;
+  height: 4px;
+  margin: var(--co-spacing-sm) auto var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-border-default);
+}
+
+.co-bottom-sheet__header {
+  padding: 0 var(--co-spacing-xl);
+}
+
+.co-bottom-sheet__header--show {
+  padding-bottom: var(--co-spacing-sm);
+}
+
+.co-bottom-sheet__heading {
+  margin: 0;
+  font-size: var(--co-font-size-16);
+  font-weight: 700;
+  color: var(--co-semantic-text-default);
+}
+
+/* ─── body: internal scroll, no chaining to the page ─────────── */
+
+.co-bottom-sheet__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+}
+
+/* ─── footer: pinned outside the scroll, safe-area aware ─────── */
+
+.co-bottom-sheet__footer {
+  flex-shrink: 0;
+  display: none;
+}
+
+/* `:empty` can't detect slotted content — JS slotchange drives this class */
+.co-bottom-sheet__footer--show {
+  display: block;
+  border-top: 1px solid var(--co-semantic-border-default);
+  padding: var(--co-spacing-md) var(--co-spacing-xl)
+    calc(var(--co-spacing-lg) + env(safe-area-inset-bottom, 0px));
+  background: var(--co-semantic-surface-page);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* near-zero (not zero) so transitionend still fires coAfterOpen/Close */
+  .co-bottom-sheet,
+  .co-bottom-sheet:not(.co-bottom-sheet--open),
+  .co-bottom-sheet__backdrop {
+    transition-duration: 0.01s !important;
+  }
+}