@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/app-bar.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
 import { createComponent, initializeShadeRoot } from '@furystack/shades';
-import { sleepAsync } from '@furystack/utils';
+import { sleepAsync, usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { AppBar } from './app-bar.js';
 describe('AppBar component', () => {
@@ -22,95 +22,110 @@ describe('AppBar component', () => {
         return {
             injector,
             appBar: document.querySelector('shade-app-bar'),
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
         };
     };
     describe('rendering', () => {
         it('should render the shade-app-bar custom element', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            expect(appBar).not.toBeNull();
-            expect(appBar.tagName.toLowerCase()).toBe('shade-app-bar');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                expect(appBar).not.toBeNull();
+                expect(appBar.tagName.toLowerCase()).toBe('shade-app-bar');
+            });
         });
-        it('should render children in shadow DOM', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", { id: "child-content" }, "Test Content"));
-            // Children are rendered inside shadow DOM - verify via the element itself
-            expect(appBar).not.toBeNull();
+        it('should render children in custom element', async () => {
+            await usingAsync(await renderAppBar(createComponent("span", { id: "child-content" }, "Test Content")), async ({ appBar }) => {
+                // Children are rendered inside the custom element
+                expect(appBar).not.toBeNull();
+            });
         });
         it('should render multiple children', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(AppBar, null,
-                    createComponent("span", { id: "logo" }, "Logo"),
-                    createComponent("nav", { id: "navigation" }, "Nav"),
-                    createComponent("button", { id: "action" }, "Action"))),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(AppBar, null,
+                        createComponent("span", { id: "logo" }, "Logo"),
+                        createComponent("nav", { id: "navigation" }, "Nav"),
+                        createComponent("button", { id: "action" }, "Action"))),
+                });
+                await sleepAsync(50);
+                const appBar = document.querySelector('shade-app-bar');
+                expect(appBar).not.toBeNull();
             });
-            await sleepAsync(50);
-            const appBar = document.querySelector('shade-app-bar');
-            expect(appBar).not.toBeNull();
         });
     });
     describe('positioning', () => {
         it('should have fixed positioning', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.position).toBe('fixed');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.position).toBe('fixed');
+            });
         });
         it('should have z-index of 1', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.zIndex).toBe('1');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.zIndex).toBe('1');
+            });
         });
         it('should have full width', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.width).toBe('100%');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.width).toBe('100%');
+            });
         });
     });
     describe('fade-in animation', () => {
         it('should add visible class after construction', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            expect(appBar.classList.contains('visible')).toBe(true);
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                expect(appBar.hasAttribute('data-visible')).toBe(true);
+            });
         });
         it('should have opacity 1 when visible class is applied', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.opacity).toBe('1');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.opacity).toBe('1');
+            });
         });
         it('should have transition styles for animation', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.transition).toContain('opacity');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.transition).toContain('opacity');
+            });
         });
     });
     describe('layout', () => {
         it('should have flex display', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.display).toBe('flex');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.display).toBe('flex');
+            });
         });
         it('should align items center', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.alignItems).toBe('center');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.alignItems).toBe('center');
+            });
         });
         it('should justify content to flex-start', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.justifyContent).toBe('flex-start');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.justifyContent).toBe('flex-start');
+            });
         });
     });
     describe('styling', () => {
         it('should have box shadow', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.boxShadow).not.toBe('none');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.boxShadow).not.toBe('none');
+            });
         });
         it('should have semi-transparent background', async () => {
-            const { appBar } = await renderAppBar(createComponent("span", null, "Content"));
-            const computedStyle = window.getComputedStyle(appBar);
-            expect(computedStyle.background).toContain('rgba');
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.background).toContain('color-mix');
+            });
         });
     });
 });

package/esm/components/app-bar.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.spec.js","sourceRoot":"","sources":["../../src/components/app-bar.spec.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"app-bar.spec.js","sourceRoot":"","sources":["../../src/components/app-bar.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/avatar.d.ts

@@ -8,5 +8,7 @@ export declare const Avatar: (props: {
     fallback?: JSX.Element;
 } & Omit<Partial<HTMLDivElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 } & Omit<Partial<HTMLElement>, "style">, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=avatar.d.ts.map

package/esm/components/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,MAAM,MAAM,WAAW,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAExG,eAAO,MAAM,MAAM;eAFoB,MAAM;eAAa,GAAG,CAAC,OAAO;;;4GA8EnE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,MAAM,MAAM,WAAW,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAExG,eAAO,MAAM,MAAM;eAFoB,MAAM;eAAa,GAAG,CAAC,OAAO;;;;;4GA4EnE,CAAA"}

package/esm/components/avatar.js

@@ -1,59 +1,62 @@
-import { Shade, attachProps, createComponent } from '@furystack/shades';
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 export const Avatar = Shade({
     shadowDomName: 'shade-avatar',
     css: {
         width: '128px',
         height: '128px',
         overflow: 'hidden',
-        borderRadius: '50%',
-        boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1)',
-        backgroundColor: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+        borderRadius: cssVariableTheme.shape.borderRadius.full,
+        boxShadow: cssVariableTheme.shadows.md,
+        background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 10%, ${cssVariableTheme.background.paper})`,
         display: 'flex',
         position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        transition: `all ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
         '&:hover': {
             transform: 'translateY(-2px) scale(1.02)',
-            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)',
+            boxShadow: cssVariableTheme.shadows.xl,
+        },
+        '& .avatar-fallback-container': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: '100%',
+            background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 15%, ${cssVariableTheme.background.paper})`,
+        },
+        '& .avatar-fallback-icon': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '64px',
+            height: '64px',
+            borderRadius: cssVariableTheme.shape.borderRadius.full,
+            background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 20%, transparent)`,
+            backdropFilter: 'blur(10px)',
+            textAlign: 'center',
+            userSelect: 'none',
+            fontSize: '48px',
+            lineHeight: '1',
         },
     },
-    render: ({ props, element }) => {
-        const { avatarUrl, ...containerProps } = props;
-        attachProps(element, {
-            ...containerProps,
-            style: {
-                ...containerProps?.style,
-            },
+    render: ({ props, useHostProps, useState }) => {
+        const { style } = props;
+        const [hasError, setHasError] = useState('hasError', false);
+        useHostProps({
+            ...(style ? { style: style } : {}),
         });
+        if (hasError) {
+            return (createComponent("div", { className: "avatar-fallback-container" },
+                createComponent("div", { className: "avatar-fallback-icon" }, props.fallback || '🛑')));
+        }
         return (createComponent("img", { style: {
                 width: '100%',
                 height: '100%',
                 objectFit: 'cover',
                 objectPosition: 'center',
                 transition: 'all 0.3s ease',
-            }, alt: 'avatar image', src: props.avatarUrl, onerror: (ev) => {
-                ;
-                ev.target.replaceWith(createComponent("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '100%',
-                        width: '100%',
-                        background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%)',
-                    } },
-                    createComponent("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: '64px',
-                            height: '64px',
-                            borderRadius: '50%',
-                            background: 'rgba(255, 255, 255, 0.1)',
-                            backdropFilter: 'blur(10px)',
-                            textAlign: 'center',
-                            userSelect: 'none',
-                            fontSize: '48px',
-                            lineHeight: '1',
-                        } }, props.fallback || '🛑')));
+            }, alt: 'avatar image', src: props.avatarUrl, onerror: () => {
+                setHasError(true);
             } }));
     },
 });

package/esm/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAIvE,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,cAAc;IAC7B,GAAG,EAAE;QACH,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,KAAK;QACnB,SAAS,EACP,2GAA2G;QAC7G,eAAe,EAAE,mFAAmF;QACpG,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,uCAAuC;QACnD,SAAS,EAAE;YACT,SAAS,EAAE,8BAA8B;YACzC,SAAS,EACP,6GAA6G;SAChH;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;QAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAA;QAE9C,WAAW,CAAC,OAAO,EAAE;YACnB,GAAG,cAAc;YACjB,KAAK,EAAE;gBACL,GAAG,cAAc,EAAE,KAAK;aACzB;SACF,CAAC,CAAA;QAEF,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,OAAO;gBAClB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,eAAe;aAC5B,EACD,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,KAAK,CAAC,SAAS,EACpB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;gBACd,CAAC;gBAAE,EAAY,CAAC,MAA2B,CAAC,WAAW,CACrD,yBACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,MAAM,EAAE,MAAM;wBACd,KAAK,EAAE,MAAM;wBACb,UAAU,EAAE,mFAAmF;qBAChG;oBAED,yBACE,KAAK,EAAE;4BACL,OAAO,EAAE,MAAM;4BACf,UAAU,EAAE,QAAQ;4BACpB,cAAc,EAAE,QAAQ;4BACxB,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;4BACd,YAAY,EAAE,KAAK;4BACnB,UAAU,EAAE,0BAA0B;4BACtC,cAAc,EAAE,YAAY;4BAC5B,SAAS,EAAE,QAAQ;4BACnB,UAAU,EAAE,MAAM;4BAClB,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,GAAG;yBAChB,IAEA,KAAK,CAAC,QAAQ,IAAI,IAAI,CACnB,CACF,CACP,CAAA;YACH,CAAC,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAIpE,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,cAAc;IAC7B,GAAG,EAAE;QACH,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI;QACtD,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;QACtC,UAAU,EAAE,sBAAsB,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,SAAS,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG;QACpH,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,OAAO,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,IAAI,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC9G,SAAS,EAAE;YACT,SAAS,EAAE,8BAA8B;YACzC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;SACvC;QAED,8BAA8B,EAAE;YAC9B,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,sBAAsB,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,SAAS,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG;SACrH;QAED,yBAAyB,EAAE;YACzB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI;YACtD,UAAU,EAAE,sBAAsB,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,oBAAoB;YAC3F,cAAc,EAAE,YAAY;YAC5B,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,GAAG;SAChB;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;QACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;QAE3D,YAAY,CAAC;YACX,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAA+B,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC7D,CAAC,CAAA;QAEF,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CACL,yBAAK,SAAS,EAAC,2BAA2B;gBACxC,yBAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAO,CAChE,CACP,CAAA;QACH,CAAC;QAED,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,OAAO;gBAClB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,eAAe;aAC5B,EACD,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,KAAK,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,IAAI,CAAC,CAAA;YACnB,CAAC,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/badge.d.ts

@@ -0,0 +1,35 @@
+import type { PartialElement } from '@furystack/shades';
+import type { Palette } from '../services/theme-provider-service.js';
+export type BadgeProps = PartialElement<HTMLElement> & {
+    /** The count to display in the badge */
+    count?: number;
+    /** If true, renders a small dot instead of a count */
+    dot?: boolean;
+    /** Palette color for the badge */
+    color?: keyof Palette;
+    /** Maximum count to display. Counts above this show `{max}+` */
+    max?: number;
+    /** If true, shows the badge when count is zero */
+    showZero?: boolean;
+    /** Controls badge visibility. Defaults to true */
+    visible?: boolean;
+};
+export declare const Badge: (props: Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+} & {
+    /** The count to display in the badge */
+    count?: number;
+    /** If true, renders a small dot instead of a count */
+    dot?: boolean;
+    /** Palette color for the badge */
+    color?: keyof Palette;
+    /** Maximum count to display. Counts above this show `{max}+` */
+    max?: number;
+    /** If true, shows the badge when count is zero */
+    showZero?: boolean;
+    /** Controls badge visibility. Defaults to true */
+    visible?: boolean;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

package/esm/components/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAEpE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IACrB,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAOD,eAAO,MAAM,KAAK;;;;;IAnBhB,wCAAwC;YAChC,MAAM;IACd,sDAAsD;UAChD,OAAO;IACb,kCAAkC;YAC1B,MAAM,OAAO;IACrB,gEAAgE;UAC1D,MAAM;IACZ,kDAAkD;eACvC,OAAO;IAClB,kDAAkD;cACxC,OAAO;sEAqFjB,CAAA"}

package/esm/components/badge.js

@@ -0,0 +1,68 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { paletteMainColors } from '../services/palette-css-vars.js';
+const defaultColors = {
+    main: cssVariableTheme.palette.error.main,
+    mainContrast: cssVariableTheme.palette.error.mainContrast,
+};
+export const Badge = Shade({
+    shadowDomName: 'shade-badge',
+    css: {
+        display: 'inline-flex',
+        position: 'relative',
+        verticalAlign: 'middle',
+        flexShrink: '0',
+        '& .badge-indicator': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: '0',
+            right: '0',
+            transform: 'translate(50%, -50%)',
+            transformOrigin: '100% 0%',
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            lineHeight: '1',
+            minWidth: '20px',
+            height: '20px',
+            padding: `0 ${cssVariableTheme.spacing.xs}`,
+            borderRadius: cssVariableTheme.shape.borderRadius.lg,
+            background: 'var(--badge-color-main)',
+            color: 'var(--badge-color-contrast)',
+            boxSizing: 'border-box',
+            whiteSpace: 'nowrap',
+            zIndex: '1',
+            transition: buildTransition(['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
+        },
+        '& .badge-indicator[data-dot]': {
+            minWidth: '8px',
+            width: '8px',
+            height: '8px',
+            padding: '0',
+            borderRadius: cssVariableTheme.shape.borderRadius.full,
+        },
+        '& .badge-indicator[data-hidden]': {
+            transform: 'translate(50%, -50%) scale(0)',
+            opacity: '0',
+        },
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { count, dot, color, max = 99, showZero, visible = true, style } = props;
+        const colors = color ? paletteMainColors[color] : defaultColors;
+        useHostProps({
+            style: {
+                '--badge-color-main': colors.main,
+                '--badge-color-contrast': colors.mainContrast,
+                ...style,
+            },
+        });
+        const shouldHide = !visible || (!dot && !showZero && (count === undefined || count === 0));
+        const displayValue = dot ? '' : count !== undefined && count > max ? `${max}+` : (count?.toString() ?? '');
+        return (createComponent(createComponent, null,
+            children,
+            createComponent("span", { className: "badge-indicator", ...(dot ? { 'data-dot': '' } : {}), ...(shouldHide ? { 'data-hidden': '' } : {}) }, displayValue)));
+    },
+});
+//# sourceMappingURL=badge.js.map

package/esm/components/badge.js.map

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

package/esm/components/badge.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.spec.d.ts.map

package/esm/components/badge.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.spec.d.ts","sourceRoot":"","sources":["../../src/components/badge.spec.tsx"],"names":[],"mappings":""}

package/esm/components/badge.spec.js

@@ -0,0 +1,157 @@
+import { createComponent } from '@furystack/shades';
+import { flushUpdates } from '@furystack/shades';
+import { describe, expect, it } from 'vitest';
+import { Badge } from './badge.js';
+describe('Badge', () => {
+    it('should be defined', () => {
+        expect(Badge).toBeDefined();
+        expect(typeof Badge).toBe('function');
+    });
+    it('should create a badge element with default props', () => {
+        const el = (createComponent(Badge, null));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-badge');
+    });
+    it('should pass children as badge content', () => {
+        const el = (createComponent(Badge, null, "Child"));
+        expect(el).toBeDefined();
+    });
+    it('should set props correctly', () => {
+        const el = (createComponent(Badge, { count: 5, color: "primary", dot: true, max: 10, showZero: true }));
+        expect(el.props.count).toBe(5);
+        expect(el.props.color).toBe('primary');
+        expect(el.props.dot).toBe(true);
+        expect(el.props.max).toBe(10);
+        expect(el.props.showZero).toBe(true);
+    });
+    it('should render with a badge indicator', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 5 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        expect(badge.querySelector('.badge-indicator')).not.toBeNull();
+    });
+    it('should display the count value', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 42 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.textContent).toBe('42');
+    });
+    it('should cap count at max and show overflow indicator', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 150, max: 99 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.textContent).toBe('99+');
+    });
+    it('should use custom max value', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 15, max: 10 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.textContent).toBe('10+');
+    });
+    it('should not show overflow when count is within max', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 5, max: 10 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.textContent).toBe('5');
+    });
+    it('should hide when count is 0 and showZero is not set', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 0 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-hidden')).toBe(true);
+    });
+    it('should show when count is 0 and showZero is true', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 0, showZero: true },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-hidden')).toBe(false);
+    });
+    it('should hide when count is undefined and showZero is not set', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, null,
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-hidden')).toBe(true);
+    });
+    it('should render a dot badge when dot prop is set', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { dot: true },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-dot')).toBe(true);
+        expect(indicator.textContent).toBe('');
+    });
+    it('should not hide dot badge even without count', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { dot: true },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-hidden')).toBe(false);
+    });
+    it('should hide badge when visible is false', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 5, visible: false },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        const indicator = badge.querySelector('.badge-indicator');
+        expect(indicator.hasAttribute('data-hidden')).toBe(true);
+    });
+    it('should set CSS custom properties for palette color', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 5, color: "primary" },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-primary-main)');
+        expect(badge.style.getPropertyValue('--badge-color-contrast')).toBe('var(--shades-theme-palette-primary-main-contrast)');
+    });
+    it('should set CSS custom properties for default (error) color when no color prop', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Badge, { count: 5 },
+                createComponent("span", null, "Content"))));
+        const badge = el.firstElementChild;
+        badge.updateComponent();
+        await flushUpdates();
+        expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-error-main)');
+    });
+});
+//# sourceMappingURL=badge.spec.js.map