@brightspot/ui 1.0.1-wc.4 → 1.2.0

package/README.md

@@ -5,7 +5,7 @@
 <div>
 <h2 align="center">brightspot-ui</h2>
   <p align="center">
-    A UI library for building Brightspot CMS components.
+    A UI library optimized for rapid, standards-based Brightspot CMS component creation.
     <br/>
   </p>
 </div>
@@ -85,58 +85,20 @@ Your codebase needs to be compatible with
 
 ## Using Plugins
 
-Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative.
+Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative. Visit the Storybook to see the available plugins.
 
 To use our plugins, include them in your TailwindCSS config as usual. Plugin files are provided in both Typescript and Javascript variants and are available under the `dist` path in the brightspot-ui module.
 
-An example of including all the plugins:
+An example of including a plugin:
 
 ```ts
 // your tailwind.config.ts
   ...
   plugins: [
     require('@brightspot/ui/dist/tailwind-plugin-theme.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-badge.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-button.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-heading.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-icon.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-loader.ts'),
-    require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
     ...
 ```
 
-### Available plugins:
-
-1. Badge
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-badge.ts')
-   ```
-2. Button
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-button.ts')
-   ```
-3. Heading
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-heading.ts')
-   ```
-4. Icon
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-icon.ts')
-   ```
-5. Loader
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-loader.ts')
-   ```
-6. ScrollShadow
-   ```ts
-   require('@brightspot/ui/dist/tailwind-plugin-scroll-shadow.ts')
-   ```
-7. Theme
-`ts
-    require('@brightspot/ui/dist/tailwind-plugin-theme.ts')
-    `
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
 ## Examples
 
 We use [Storybook](https://storybook.js.org/) for interactive previewing of our ui components. Launch that in the browser by running:
@@ -149,6 +111,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.
@@ -200,55 +166,6 @@ When you're done with local development:
 
 This restores your project to use the published version from npm.
 
-### Commit Guidelines
-
-This project uses [Conventional Commits](https://www.conventionalcommits.org/) to ensure consistent commit messages. All commits are automatically validated using [commitlint](https://commitlint.js.org/) via [husky](https://typicode.github.io/husky/) git hooks. When you attempt to commit, the commit message will be checked against conventional commit standards, and the commit will be rejected if it doesn't conform.
-
-#### Using the `/git:commit` Command
-
-For contributors using Claude Code, use the custom `/git:commit` slash command to create properly formatted commits:
-
-```sh
-/git:commit
-```
-
-This command automatically:
-
-- Analyzes your staged changes
-- Generates a conventional commit message
-- Creates the commit with proper formatting
-
-#### Manual Commits
-
-If committing manually, follow this format:
-
-```
-type(scope): subject
-
-body (optional)
-
-footer (optional)
-```
-
-**Common types:**
-
-- `feat`: New feature
-- `fix`: Bug fix
-- `docs`: Documentation changes
-- `style`: Code style (formatting, whitespace)
-- `refactor`: Code restructuring
-- `test`: Adding or updating tests
-- `chore`: Maintenance tasks (deps, build tools)
-
-**Examples:**
-
-```
-feat(button): add icon support to primary button
-fix(theme): resolve color contrast in dark mode
-docs: update installation instructions
-chore(deps): upgrade tailwindcss to 3.4.0
-```
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Frequently Asked Questions

package/dist/LucideDynamicLoader.d.ts

@@ -1,3 +1,4 @@
+export declare const LUCIDE_VERSION: string;
 export declare function getIcon(iconName: string): {
     compat: string;
     iconSvg: string;

package/dist/LucideDynamicLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;;;cAiBvC"}
+{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAAwB,CAAA;AAEnD,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;;;cAiBvC"}

package/dist/LucideDynamicLoader.js

@@ -1,7 +1,9 @@
 import * as LucideIcons from 'lucide-static';
 import icons from 'lucide-static/font/info.json' with { type: 'json' };
+import lucidePackage from 'lucide-static/package.json' with { type: 'json' };
 import { kebabToPascal } from './util/string.js';
 import { addNameSpaceXML, encodeSVG } from './util/svg.js';
+export const LUCIDE_VERSION = lucidePackage.version;
 export function getIcon(iconName) {
     try {
         const kebabName = iconName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

package/dist/LucideDynamicLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}
+{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,aAAa,MAAM,4BAA4B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,CAAA;AAEnD,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}

package/dist/LucideDynamicLoader.ts

@@ -1,8 +1,11 @@
 import * as LucideIcons from 'lucide-static'
 import icons from 'lucide-static/font/info.json' with { type: 'json' }
+import lucidePackage from 'lucide-static/package.json' with { type: 'json' }
 import { kebabToPascal } from './util/string.js'
 import { addNameSpaceXML, encodeSVG } from './util/svg.js'
 
+export const LUCIDE_VERSION = lucidePackage.version
+
 export function getIcon(iconName: string) {
   try {
     const kebabName = iconName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()

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("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/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 '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/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":"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"}

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("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/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 '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/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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"}