@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/avatar.js

@@ -1,63 +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',
-    render: ({ props, element }) => {
-        const { avatarUrl, ...containerProps } = props;
-        attachProps(element, {
-            ...containerProps,
-            style: {
-                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%)',
-                display: 'flex',
-                position: 'relative',
-                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                ...containerProps?.style,
-            },
-            onmouseenter: () => {
-                element.style.transform = 'translateY(-2px) scale(1.02)';
-                element.style.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)';
-            },
-            onmouseleave: () => {
-                element.style.transform = 'translateY(0) scale(1)';
-                element.style.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)';
-            },
+    css: {
+        width: '128px',
+        height: '128px',
+        overflow: 'hidden',
+        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 ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+        '&:hover': {
+            transform: 'translateY(-2px) scale(1.02)',
+            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, 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,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,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,KAAK;gBACnB,SAAS,EACP,2GAA2G;gBAC7G,eAAe,EAAE,mFAAmF;gBACpG,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,UAAU;gBACpB,UAAU,EAAE,uCAAuC;gBACnD,GAAG,cAAc,EAAE,KAAK;aACzB;YACD,YAAY,EAAE,GAAG,EAAE;gBACjB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,8BAA8B,CAAA;gBACxD,OAAO,CAAC,KAAK,CAAC,SAAS;oBACrB,6GAA6G,CAAA;YACjH,CAAC;YACD,YAAY,EAAE,GAAG,EAAE;gBACjB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,wBAAwB,CAAA;gBAClD,OAAO,CAAC,KAAK,CAAC,SAAS;oBACrB,2GAA2G,CAAA;YAC/G,CAAC;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/avatar.spec.d.ts

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

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

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

package/esm/components/avatar.spec.js

@@ -0,0 +1,114 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Avatar } from './avatar.js';
+describe('Avatar component', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should render an image with the provided avatarUrl', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const testUrl = 'https://example.com/avatar.png';
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Avatar, { avatarUrl: testUrl }),
+            });
+            await sleepAsync(50);
+            const avatar = document.querySelector('shade-avatar');
+            expect(avatar).not.toBeNull();
+            const img = avatar?.querySelector('img');
+            expect(img).not.toBeNull();
+            expect(img?.src).toBe(testUrl);
+            expect(img?.alt).toBe('avatar image');
+        });
+    });
+    it('should display default fallback emoji when image fails to load', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Avatar, { avatarUrl: "invalid-url" }),
+            });
+            await sleepAsync(50);
+            const avatar = document.querySelector('shade-avatar');
+            expect(avatar).not.toBeNull();
+            const img = avatar?.querySelector('img');
+            expect(img).not.toBeNull();
+            // Trigger the error event
+            const errorEvent = new Event('error');
+            img?.dispatchEvent(errorEvent);
+            await sleepAsync(50);
+            // After error, img should be replaced with fallback div
+            const fallbackImg = avatar?.querySelector('img');
+            expect(fallbackImg).toBeNull();
+            // The fallback div should contain the default emoji
+            const fallbackContent = avatar?.textContent;
+            expect(fallbackContent).toContain('🛑');
+        });
+    });
+    it('should display custom fallback when image fails to load and fallback prop is provided', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const customFallback = createComponent("span", { "data-testid": "custom-fallback" }, "AB");
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Avatar, { avatarUrl: "invalid-url", fallback: customFallback }),
+            });
+            await sleepAsync(50);
+            const avatar = document.querySelector('shade-avatar');
+            expect(avatar).not.toBeNull();
+            const img = avatar?.querySelector('img');
+            expect(img).not.toBeNull();
+            // Trigger the error event
+            const errorEvent = new Event('error');
+            img?.dispatchEvent(errorEvent);
+            await sleepAsync(50);
+            // After error, img should be replaced with fallback div
+            const fallbackImg = avatar?.querySelector('img');
+            expect(fallbackImg).toBeNull();
+            // The custom fallback should be rendered
+            const customElement = avatar?.querySelector('[data-testid="custom-fallback"]');
+            expect(customElement).not.toBeNull();
+            expect(customElement?.textContent).toBe('AB');
+        });
+    });
+    it('should apply custom style from props', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Avatar, { avatarUrl: "https://example.com/avatar.png", style: { width: '64px', height: '64px' } }),
+            });
+            await sleepAsync(50);
+            const avatar = document.querySelector('shade-avatar');
+            expect(avatar).not.toBeNull();
+            expect(avatar.style.width).toBe('64px');
+            expect(avatar.style.height).toBe('64px');
+        });
+    });
+    it('should pass through additional props to the container', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Avatar, { avatarUrl: "https://example.com/avatar.png", className: "custom-avatar", title: "User Avatar" }),
+            });
+            await sleepAsync(50);
+            const avatar = document.querySelector('shade-avatar');
+            expect(avatar).not.toBeNull();
+            expect(avatar.className).toBe('custom-avatar');
+            expect(avatar.title).toBe('User Avatar');
+        });
+    });
+});
+//# sourceMappingURL=avatar.spec.js.map

package/esm/components/avatar.spec.js.map

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

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

package/esm/components/badge.spec.js.map

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