@brightspot/ui 1.0.1-wc.4 → 1.1.0

package/README.md

@@ -149,6 +149,10 @@ We use [Storybook](https://storybook.js.org/) for interactive previewing of our
 
 ## Development
 
+### Prerequisites
+
+- **Node.js v22 or higher** - Required for development and git hooks
+
 ### Building the Package
 
 To build the package, run `yarn build` from the package root to create the `dist` folder containing all the compiled assets.

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,82 @@
+import { LitElement } from 'lit';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+declare const Avatar_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../utils/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * An avatar component for displaying user profile images with fallback support.
+ *
+ * Avatars display user profile images with automatic fallback to initials when
+ * the image fails to load or is not provided.
+ *
+ * @element btu-avatar
+ *
+ * @fires {CustomEvent} btu-avatar-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{src: string}>} btu-avatar-image-loaded - Fired when image successfully loads
+ * @fires {CustomEvent<{src: string, error: Event}>} btu-avatar-image-error - Fired when image fails to load
+ *
+ * @cssprop --avatar-size - Custom size (overrides size prop)
+ * @cssprop --avatar-bg-color - Fallback background color (default: purple-600)
+ * @cssprop --avatar-corner-rounding - How rounded is the avatar (default: circle)
+ * @cssprop --avatar-ring-color - Optional ring border color
+ * @cssprop --avatar-ring-width - Ring border width (default: 2px)
+ *
+ * @example
+ * ```html
+ * <!-- Avatar with image -->
+ * <btu-avatar src="#" alt="John Doe" fallback="JD"></btu-avatar>
+ *
+ * <!-- Avatar with fallback only -->
+ * <btu-avatar fallback="JD" size="lg"></btu-avatar>
+ * ```
+ */
+export default class Avatar extends Avatar_base {
+    /**
+     * Image source URL
+     * @attr
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     * @attr
+     */
+    alt: string;
+    /**
+     * Fallback text (typically user initials)
+     * @attr
+     */
+    fallback: string;
+    /**
+     * Size variant.
+     * - 'xs': Extra small (1.5rem)
+     * - 'sm': Small (2.25rem)
+     * - 'md': Medium (2.5rem) - default
+     * - 'lg': Large (3rem)
+     * - 'xl': Extra large (3.5rem)
+     * - 'xxl': Extra extra large (4rem)
+     * @attr
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** @internal */
+    private initialClasses;
+    /** @internal */
+    private imageLoaded;
+    /** @internal */
+    private imageError;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-avatar': Avatar;
+    }
+}
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;CAChD;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E;;;OAGG;IAEH,GAAG,SAAK;IAER;;;OAGG;IAEH,GAAG,SAAK;IAER;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;;;;;;;OASG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAO;IAErD,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gBAAgB;IAEhB,OAAO,CAAC,WAAW,CAAQ;IAE3B,gBAAgB;IAEhB,OAAO,CAAC,UAAU,CAAQ;IAE1B,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAWlB,YAAY,IAAI,IAAI;IAqBpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAyBlD,MAAM;CAMP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../utils/EventEmitterMixin.js';
+import { ReadyMixin } from '../../utils/ReadyMixin.js';
+/**
+ * An avatar component for displaying user profile images with fallback support.
+ *
+ * Avatars display user profile images with automatic fallback to initials when
+ * the image fails to load or is not provided.
+ *
+ * @element btu-avatar
+ *
+ * @fires {CustomEvent} btu-avatar-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{src: string}>} btu-avatar-image-loaded - Fired when image successfully loads
+ * @fires {CustomEvent<{src: string, error: Event}>} btu-avatar-image-error - Fired when image fails to load
+ *
+ * @cssprop --avatar-size - Custom size (overrides size prop)
+ * @cssprop --avatar-bg-color - Fallback background color (default: purple-600)
+ * @cssprop --avatar-corner-rounding - How rounded is the avatar (default: circle)
+ * @cssprop --avatar-ring-color - Optional ring border color
+ * @cssprop --avatar-ring-width - Ring border width (default: 2px)
+ *
+ * @example
+ * ```html
+ * <!-- Avatar with image -->
+ * <btu-avatar src="#" alt="John Doe" fallback="JD"></btu-avatar>
+ *
+ * <!-- Avatar with fallback only -->
+ * <btu-avatar fallback="JD" size="lg"></btu-avatar>
+ * ```
+ */
+export default class Avatar extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Image source URL
+         * @attr
+         */
+        this.src = '';
+        /**
+         * Alt text for the image
+         * @attr
+         */
+        this.alt = '';
+        /**
+         * Fallback text (typically user initials)
+         * @attr
+         */
+        this.fallback = '';
+        /**
+         * Size variant.
+         * - 'xs': Extra small (1.5rem)
+         * - 'sm': Small (2.25rem)
+         * - 'md': Medium (2.5rem) - default
+         * - 'lg': Large (3rem)
+         * - 'xl': Extra large (3.5rem)
+         * - 'xxl': Extra extra large (4rem)
+         * @attr
+         */
+        this.size = 'md';
+        /** @internal */
+        this.initialClasses = [];
+        /** @internal */
+        this.imageLoaded = false;
+        /** @internal */
+        this.imageError = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        const classes = [
+            ...this.initialClasses,
+            'btu-avatar',
+            `btu-avatar-${this.size}`,
+            this.imageLoaded ? 'btu-avatar-image-loaded' : '',
+        ];
+        this.className = classes.filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-avatar-ready');
+        // Setup image load/error handlers if src is provided
+        if (this.src) {
+            const img = this.querySelector('img');
+            if (img) {
+                img.addEventListener('load', () => {
+                    this.imageLoaded = true;
+                    this.imageError = false;
+                    this.emit('btu-avatar-image-loaded', { src: this.src });
+                });
+                img.addEventListener('error', error => {
+                    this.imageLoaded = false;
+                    this.imageError = true;
+                    this.emit('btu-avatar-image-error', { src: this.src, error });
+                });
+            }
+        }
+    }
+    updated(changedProperties) {
+        // Reset image error state when src changes
+        if (changedProperties.has('src')) {
+            this.imageError = false;
+            this.imageLoaded = false;
+            // Setup handlers for new image
+            if (this.src) {
+                const img = this.querySelector('img');
+                if (img) {
+                    img.addEventListener('load', () => {
+                        this.imageLoaded = true;
+                        this.imageError = false;
+                        this.emit('btu-avatar-image-loaded', { src: this.src });
+                    });
+                    img.addEventListener('error', error => {
+                        this.imageLoaded = false;
+                        this.imageError = true;
+                        this.emit('btu-avatar-image-error', { src: this.src, error });
+                    });
+                }
+            }
+        }
+    }
+    render() {
+        return html `
+      <div class="btu-avatar-fallback">${this.fallback}</div>
+      ${this.src && !this.imageError ? html `<img src="${this.src}" alt="${this.alt}" />` : ''}
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], Avatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], Avatar.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], Avatar.prototype, "fallback", void 0);
+__decorate([
+    property({ type: String })
+], Avatar.prototype, "size", void 0);
+__decorate([
+    state()
+], Avatar.prototype, "imageLoaded", void 0);
+__decorate([
+    state()
+], Avatar.prototype, "imageError", void 0);
+if (!customElements.get('btu-avatar')) {
+    customElements.define('btu-avatar', Avatar);
+}
+//# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAStD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAA7E;;QACE;;;WAGG;QAEH,QAAG,GAAG,EAAE,CAAA;QAER;;;WAGG;QAEH,QAAG,GAAG,EAAE,CAAA;QAER;;;WAGG;QAEH,aAAQ,GAAG,EAAE,CAAA;QAEb;;;;;;;;;WASG;QAEH,SAAI,GAA6C,IAAI,CAAA;QAErD,gBAAgB;QACR,mBAAc,GAAa,EAAE,CAAA;QAErC,gBAAgB;QAER,gBAAW,GAAG,KAAK,CAAA;QAE3B,gBAAgB;QAER,eAAU,GAAG,KAAK,CAAA;IA6E5B,CAAC;IA3EC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,GAAG,IAAI,CAAC,cAAc;YACtB,YAAY;YACZ,cAAc,IAAI,CAAC,IAAI,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;SAClD,CAAA;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;QAE7B,qDAAqD;QACrD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YACrC,IAAI,GAAG,EAAE,CAAC;gBACR,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;oBAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;oBACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;oBACvB,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;gBACzD,CAAC,CAAC,CAAA;gBACF,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;oBACpC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;oBACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;oBACtB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;gBAC/D,CAAC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,CAAC,iBAAmC;QACzC,2CAA2C;QAC3C,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YAExB,+BAA+B;YAC/B,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBACb,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACrC,IAAI,GAAG,EAAE,CAAC;oBACR,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;wBAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;wBACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;wBACvB,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;oBACzD,CAAC,CAAC,CAAA;oBACF,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;wBACpC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;wBACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;wBACtB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;oBAC/D,CAAC,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;QAC9C,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,GAAG,UAAU,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE;KACxF,CAAA;IACH,CAAC;CACF;AAnHC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACnB;AAOR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACnB;AAOR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAab;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAC0B;AAO7C;IADP,KAAK,EAAE;2CACmB;AAInB;IADP,KAAK,EAAE;0CACkB;AA+E5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;IACtC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;AAC7C,CAAC"}

package/dist/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,70 @@
+import { LitElement } from 'lit';
+export interface AvatarGroupProps {
+    max?: number;
+    size?: 'xs' | 'sm' | 'md';
+}
+declare const AvatarGroup_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../utils/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A container component for grouping multiple avatars with consistent styling.
+ *
+ * AvatarGroup wraps multiple avatar elements and provides:
+ * - Overflow handling (shows "+N" for excess avatars)
+ * - Consistent spacing and ring borders
+ * - Size inheritance for all child avatars
+ *
+ * @element btu-avatar-group
+ *
+ * @fires {CustomEvent} btu-avatar-group-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{hidden: number}>} btu-avatar-group-overflow - Fired when avatars are hidden due to max limit
+ *
+ * @example
+ * ```html
+ * <!-- Basic group -->
+ * <btu-avatar-group max="3">
+ *   <btu-avatar src="..." fallback="AB"></btu-avatar>
+ *   <btu-avatar src="..." fallback="DG"></btu-avatar>
+ *   <btu-avatar fallback="JP"></btu-avatar>
+ * </btu-avatar-group>
+ * ```
+ */
+export default class AvatarGroup extends AvatarGroup_base {
+    /**
+     * Maximum number of visible avatars. Remaining avatars shown as "+N"
+     * @attr
+     */
+    max?: number;
+    /**
+     * Size variant for all child avatars (unless individually overridden)
+     * @attr
+     */
+    size: 'xs' | 'sm' | 'md';
+    /** @internal */
+    private initialClasses;
+    /** @internal */
+    private overflowAvatar;
+    /** @internal */
+    private managedAvatars;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    /**
+     * Process all avatar children: apply size, handle overflow
+     * Call this method when avatars are dynamically added or removed
+     */
+    processAvatars(): void;
+    /**
+     * Create and append the overflow avatar showing "+N"
+     * @internal
+     */
+    private createOverflowAvatar;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-avatar-group': AvatarGroup;
+    }
+}
+export {};
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/avatar/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/AvatarGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAMtC,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,gBAAyC;IAChF;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE/B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAsB;IAE5C,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAyB;IAE/C,iBAAiB,IAAI,IAAI;IAOzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAclB,YAAY,IAAI,IAAI;IAKpB;;;OAGG;IACH,cAAc,IAAI,IAAI;IA0CtB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAOlD,MAAM;CAGP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,WAAW,CAAA;KAChC;CACF"}

package/dist/components/avatar/AvatarGroup.js

@@ -0,0 +1,145 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../utils/EventEmitterMixin.js';
+import { ReadyMixin } from '../../utils/ReadyMixin.js';
+/**
+ * A container component for grouping multiple avatars with consistent styling.
+ *
+ * AvatarGroup wraps multiple avatar elements and provides:
+ * - Overflow handling (shows "+N" for excess avatars)
+ * - Consistent spacing and ring borders
+ * - Size inheritance for all child avatars
+ *
+ * @element btu-avatar-group
+ *
+ * @fires {CustomEvent} btu-avatar-group-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{hidden: number}>} btu-avatar-group-overflow - Fired when avatars are hidden due to max limit
+ *
+ * @example
+ * ```html
+ * <!-- Basic group -->
+ * <btu-avatar-group max="3">
+ *   <btu-avatar src="..." fallback="AB"></btu-avatar>
+ *   <btu-avatar src="..." fallback="DG"></btu-avatar>
+ *   <btu-avatar fallback="JP"></btu-avatar>
+ * </btu-avatar-group>
+ * ```
+ */
+export default class AvatarGroup extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Size variant for all child avatars (unless individually overridden)
+         * @attr
+         */
+        this.size = 'md';
+        /** @internal */
+        this.initialClasses = [];
+        /** @internal */
+        this.overflowAvatar = null;
+        /** @internal */
+        this.managedAvatars = new Set();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        const classes = [
+            ...this.initialClasses,
+            'btu-avatar-group',
+            'flex',
+            'items-center',
+            '-space-x-2',
+            '*:ring-2',
+            '*:ring-white',
+            'dark:*:ring-gray-900',
+        ];
+        this.className = classes.join(' ');
+    }
+    firstUpdated() {
+        this.processAvatars();
+        this.emit('btu-avatar-group-ready');
+    }
+    /**
+     * Process all avatar children: apply size, handle overflow
+     * Call this method when avatars are dynamically added or removed
+     */
+    processAvatars() {
+        const avatars = Array.from(this.querySelectorAll('btu-avatar'));
+        // Remove existing overflow avatar if present
+        if (this.overflowAvatar) {
+            this.overflowAvatar.remove();
+            this.overflowAvatar = null;
+        }
+        // Determine visible count
+        const visibleCount = this.max || avatars.length;
+        const hiddenCount = Math.max(0, avatars.length - visibleCount);
+        avatars.forEach((avatar, index) => {
+            // Hide excess avatars
+            if (this.max && index >= this.max) {
+                avatar.style.display = 'none';
+                return;
+            }
+            // Show previously hidden avatars if max increased
+            avatar.style.display = '';
+            // Track avatars that should inherit size from group
+            // (those that don't have an explicit size attribute initially)
+            if (!avatar.hasAttribute('size') && !this.managedAvatars.has(avatar)) {
+                this.managedAvatars.add(avatar);
+            }
+            // Update size for managed avatars
+            if (this.managedAvatars.has(avatar)) {
+                avatar.setAttribute('size', this.size);
+            }
+        });
+        // Create "+N" overflow avatar if needed
+        if (hiddenCount > 0) {
+            this.createOverflowAvatar(hiddenCount);
+            this.emit('btu-avatar-group-overflow', { hidden: hiddenCount });
+        }
+    }
+    /**
+     * Create and append the overflow avatar showing "+N"
+     * @internal
+     */
+    createOverflowAvatar(count) {
+        // Dynamically import Avatar to create instance
+        const overflow = document.createElement('btu-avatar');
+        overflow.setAttribute('fallback', `+${count}`);
+        overflow.setAttribute('size', this.size);
+        overflow.classList.add('btu-avatar-group-overflow');
+        this.appendChild(overflow);
+        this.overflowAvatar = overflow;
+    }
+    updated(changedProperties) {
+        // Reprocess avatars if max or size changed
+        if (changedProperties.has('max') || changedProperties.has('size')) {
+            this.processAvatars();
+        }
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: Number })
+], AvatarGroup.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], AvatarGroup.prototype, "size", void 0);
+if (!customElements.get('btu-avatar-group')) {
+    customElements.define('btu-avatar-group', AvatarGroup);
+}
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/avatar/AvatarGroup.ts"],"names":[],"mappings":"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"}

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+export interface BadgeProps {
+    variant?: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    dot?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Badge_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../utils/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends Badge_base {
+    /**
+     * Style of the badge.
+     * - 'info': Informational (default)
+     * - 'primary': Primary action or emphasis
+     * - 'error': Error or danger state
+     * - 'success': Success or completion state
+     * - 'warning': Warning or caution state
+     * @attr
+     */
+    variant: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    /**
+     * Should a dot be displayed before the label?
+     * @attr
+     */
+    dot: boolean;
+    /**
+     * Size variant.
+     * - 'sm': Small (default)
+     * - 'md': Medium
+     * - 'lg': Large
+     * @attr
+     */
+    size: string;
+    /** @internal */
+    private initialClasses;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-badge': Badge;
+    }
+}
+export {};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9D,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAyC;IAC1E;;;;;;;;OAQG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAS;IAEtE;;;OAGG;IAEH,GAAG,UAAQ;IAEX;;;;;;OAMG;IAEH,IAAI,SAAO;IAEX,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAqBlB,YAAY,IAAI,IAAI;IAIpB,MAAM;CAGP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAA;KACnB;CACF"}