@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -1,29 +1,43 @@
-import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades';
+import { createComponent, LocationService, NestedRouteLink, Shade } from '@furystack/shades';
 import { match } from 'path-to-regexp';
-import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 export const AppBarLink = Shade({
     shadowDomName: 'shade-app-bar-link',
-    render: ({ children, props, useObservable, injector, element }) => {
-        const getAnchorStyle = (currentUrl) => {
-            const isActive = !!match(props.href, props.routingOptions)(currentUrl);
-            const themeProviderService = injector.getInstance(ThemeProviderService);
-            const { theme } = themeProviderService;
-            return {
-                display: 'flex',
-                height: '100%',
-                textDecoration: 'none',
-                alignItems: 'center',
-                padding: '0 8px',
-                transition: 'color .2s ease-in-out, transform .2s ease-in-out',
-                color: isActive ? theme.text.primary : theme.text.secondary,
-                opacity: isActive ? '1' : '0.8',
-                transform: isActive ? 'scale(1)' : 'scale(0.9)',
-                cursor: 'pointer',
-            };
-        };
+    css: {
+        display: 'flex',
+        height: '100%',
+        textDecoration: 'none',
+        alignItems: 'center',
+        padding: `0 ${cssVariableTheme.spacing.sm}`,
+        transition: `color ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
+        cursor: 'pointer',
+        color: cssVariableTheme.text.secondary,
+        opacity: '0.8',
+        transform: 'scale(0.9)',
+        '&[data-active]': {
+            color: cssVariableTheme.text.primary,
+            opacity: '1',
+            transform: 'scale(1)',
+        },
+    },
+    render: ({ children, props, useObservable, injector, useHostProps }) => {
         const [currentUrl] = useObservable('locationChange', injector.getInstance(LocationService).onLocationPathChanged);
-        attachProps(element, { style: getAnchorStyle(currentUrl) });
-        return createComponent(RouteLink, { ...props }, children);
+        const isActive = !!match(props.href, props.routingOptions)(currentUrl);
+        if (isActive) {
+            useHostProps({ 'data-active': '' });
+        }
+        return createComponent(NestedRouteLink, { ...props }, children);
     },
 });
+/**
+ * Creates a type-safe wrapper around AppBarLink constrained to a specific route tree.
+ * The returned component has the same runtime behavior but narrows `href` to only accept
+ * valid route paths, and requires `params` when the route has parameters.
+ *
+ * @typeParam TRoutes - The route tree type (use `typeof yourRoutes`)
+ * @returns A type-safe AppBarLink component constrained to a specific route tree.
+ */
+export const createAppBarLink = () => {
+    return AppBarLink;
+};
 //# sourceMappingURL=app-bar-link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar-link.js","sourceRoot":"","sources":["../../src/components/app-bar-link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnG,OAAO,EAAE,KAAK,EAAqB,MAAM,gBAAgB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAE5E,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAqD;IAClF,aAAa,EAAE,oBAAoB;IACnC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QAChE,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;YAC5C,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAc,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAA;YAChF,MAAM,oBAAoB,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;YACvE,MAAM,EAAE,KAAK,EAAE,GAAG,oBAAoB,CAAA;YACtC,OAAO;gBACL,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;gBACd,cAAc,EAAE,MAAM;gBACtB,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,OAAO;gBAChB,UAAU,EAAE,kDAAkD;gBAC9D,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;gBAC3D,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;gBAC/B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;gBAC/C,MAAM,EAAE,SAAS;aAClB,CAAA;QACH,CAAC,CAAA;QAED,MAAM,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,CAAA;QAEjH,WAAW,CAAC,OAAsB,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;QAE1E,OAAO,gBAAC,SAAS,OAAK,KAAK,IAAG,QAAQ,CAAa,CAAA;IACrD,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"app-bar-link.js","sourceRoot":"","sources":["../../src/components/app-bar-link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC5F,OAAO,EAAE,KAAK,EAAqB,MAAM,gBAAgB,CAAA;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAIpE,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAkB;IAC/C,aAAa,EAAE,oBAAoB;IACnC,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,cAAc,EAAE,MAAM;QACtB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,KAAK,gBAAgB,CAAC,OAAO,CAAC,EAAE,EAAE;QAC3C,UAAU,EAAE,SAAS,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,IAAI,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,eAAe,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,IAAI,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE;QAChO,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,SAAS;QACtC,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,YAAY;QACvB,gBAAgB,EAAE;YAChB,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO;YACpC,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,UAAU;SACtB;KACF;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE;QACrE,MAAM,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,CAAA;QAEjH,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAA;QACtE,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAA;QACrC,CAAC;QAED,OAAO,gBAAC,eAAe,OAAK,KAAK,IAAG,QAAQ,CAAmB,CAAA;IACjE,CAAC;CACF,CAAC,CAAA;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAyD,EAAE;IACzF,OAAO,UAGS,CAAA;AAClB,CAAC,CAAA"}

package/esm/components/app-bar-link.spec.d.ts

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

package/esm/components/app-bar-link.spec.d.ts.map

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

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

@@ -0,0 +1,255 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, flushUpdates, initializeShadeRoot, LocationService } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { AppBarLink } from './app-bar-link.js';
+describe('AppBarLink component', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    describe('rendering', () => {
+        it('should render the shade-app-bar-link custom element', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/test" }, "Link"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink).not.toBeNull();
+                expect(appBarLink?.tagName.toLowerCase()).toBe('shade-app-bar-link');
+            });
+        });
+        it('should render children through NestedRouteLink', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/test" }, "Test Link Text"),
+                });
+                await sleepAsync(50);
+                expect(document.body.innerHTML).toContain('Test Link Text');
+            });
+        });
+        it('should render NestedRouteLink with correct href', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/my-route" }, "Link"),
+                });
+                await sleepAsync(50);
+                expect(document.body.innerHTML).toContain('href="/my-route"');
+            });
+        });
+    });
+    describe('route matching', () => {
+        it('should have active class when current URL matches href', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/dashboard');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/dashboard" }, "Dashboard"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(true);
+            });
+        });
+        it('should not have active class when current URL does not match href', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/other-page');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/dashboard" }, "Dashboard"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(false);
+            });
+        });
+        it('should update active class when location changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/home');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/dashboard" }, "Dashboard"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(false);
+                // Navigate to matching route
+                history.pushState(null, '', '/dashboard');
+                injector.getInstance(LocationService).updateState();
+                await sleepAsync(50);
+                await flushUpdates();
+                expect(appBarLink?.hasAttribute('data-active')).toBe(true);
+            });
+        });
+        it('should remove active class when navigating away', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/dashboard');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/dashboard" }, "Dashboard"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(true);
+                // Navigate away
+                history.pushState(null, '', '/other');
+                injector.getInstance(LocationService).updateState();
+                await sleepAsync(50);
+                await flushUpdates();
+                expect(appBarLink?.hasAttribute('data-active')).toBe(false);
+            });
+        });
+        it('should match routes with parameters', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/users/123');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/users/:id" }, "Users"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(true);
+            });
+        });
+        it('should support routingOptions with end: false for prefix matching', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/admin/settings/security');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(AppBarLink, { href: "/admin", routingOptions: { end: false } }, "Admin")),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(true);
+            });
+        });
+        it('should not match prefix by default (end: true)', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/admin/settings');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/admin" }, "Admin"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                expect(appBarLink?.hasAttribute('data-active')).toBe(false);
+            });
+        });
+    });
+    describe('multiple links', () => {
+        it('should only activate the matching link', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/settings');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent("div", null,
+                        createComponent(AppBarLink, { href: "/home" }, "Home"),
+                        createComponent(AppBarLink, { href: "/settings" }, "Settings"),
+                        createComponent(AppBarLink, { href: "/about" }, "About"))),
+                });
+                await sleepAsync(50);
+                const links = document.querySelectorAll('shade-app-bar-link');
+                expect(links[0]?.hasAttribute('data-active')).toBe(false);
+                expect(links[1]?.hasAttribute('data-active')).toBe(true);
+                expect(links[2]?.hasAttribute('data-active')).toBe(false);
+            });
+        });
+        it('should update all links when location changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                history.pushState(null, '', '/home');
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent("div", null,
+                        createComponent(AppBarLink, { href: "/home" }, "Home"),
+                        createComponent(AppBarLink, { href: "/settings" }, "Settings"))),
+                });
+                await sleepAsync(50);
+                const links = document.querySelectorAll('shade-app-bar-link');
+                expect(links[0]?.hasAttribute('data-active')).toBe(true);
+                expect(links[1]?.hasAttribute('data-active')).toBe(false);
+                // Navigate to settings
+                history.pushState(null, '', '/settings');
+                injector.getInstance(LocationService).updateState();
+                await sleepAsync(50);
+                await flushUpdates();
+                expect(links[0]?.hasAttribute('data-active')).toBe(false);
+                expect(links[1]?.hasAttribute('data-active')).toBe(true);
+            });
+        });
+    });
+    describe('styling', () => {
+        it('should have flex display', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/test" }, "Link"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                const computedStyle = window.getComputedStyle(appBarLink);
+                expect(computedStyle.display).toBe('flex');
+            });
+        });
+        it('should have pointer cursor', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/test" }, "Link"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                const computedStyle = window.getComputedStyle(appBarLink);
+                expect(computedStyle.cursor).toBe('pointer');
+            });
+        });
+        it('should have transition for animations', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(AppBarLink, { href: "/test" }, "Link"),
+                });
+                await sleepAsync(50);
+                const appBarLink = document.querySelector('shade-app-bar-link');
+                const computedStyle = window.getComputedStyle(appBarLink);
+                expect(computedStyle.transition).toContain('color');
+            });
+        });
+    });
+});
+//# sourceMappingURL=app-bar-link.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar-link.spec.js","sourceRoot":"","sources":["../../src/components/app-bar-link.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACvG,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;YACnE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;iBACvD,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;gBACjC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;YACtE,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;YAC9D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,qBAA4B;iBACjE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;YAC7D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;YAC/D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,WAAW,WAAkB;iBAC3D,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;YAC/D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC9B,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;YACtE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAA;gBAEzC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,YAAY,gBAAuB;iBACjE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;YACjF,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,aAAa,CAAC,CAAA;gBAE1C,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,YAAY,gBAAuB;iBACjE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC7D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;YAChE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAA;gBAEpC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,YAAY,gBAAuB;iBACjE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAE3D,6BAA6B;gBAC7B,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAA;gBACzC,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAA;gBAEnD,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBACpB,MAAM,YAAY,EAAE,CAAA;gBAEpB,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;YAC/D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAA;gBAEzC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,YAAY,gBAAuB;iBACjE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAE1D,gBAAgB;gBAChB,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAA;gBACrC,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAA;gBAEnD,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBACpB,MAAM,YAAY,EAAE,CAAA;gBAEpB,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC7D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;YACnD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAA;gBAEzC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,YAAY,YAAmB;iBAC7D,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;YACjF,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAA;gBAEvD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,CACV,gBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,cAAc,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,YAE3C,CACd;iBACF,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;YAC9D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,iBAAiB,CAAC,CAAA;gBAE9C,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,YAAmB;iBACzD,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC7D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC9B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;YACtD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,WAAW,CAAC,CAAA;gBAExC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,CACV;wBACE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;wBAC1C,gBAAC,UAAU,IAAC,IAAI,EAAC,WAAW,eAAsB;wBAClD,gBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,YAAmB,CACxC,CACP;iBACF,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAA;gBAC7D,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACzD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACxD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC3D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;YAC7D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAA;gBAEpC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,CACV;wBACE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;wBAC1C,gBAAC,UAAU,IAAC,IAAI,EAAC,WAAW,eAAsB,CAC9C,CACP;iBACF,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAA;gBAC7D,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACxD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEzD,uBAAuB;gBACvB,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,WAAW,CAAC,CAAA;gBACxC,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAA;gBAEnD,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBACpB,MAAM,YAAY,EAAE,CAAA;gBAEpB,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACzD,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;QACvB,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;YACxC,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;iBACvD,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAA;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;gBACzD,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC5C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;YAC1C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;iBACvD,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAA;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;gBACzD,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAC9C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;YACrD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,WAAkB;iBACvD,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAA;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;gBACzD,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YACrD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/components/app-bar.d.ts

@@ -1,4 +1,6 @@
 export declare const AppBar: (props: Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=app-bar.d.ts.map

package/esm/components/app-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../src/components/app-bar.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;sEA4BjB,CAAA"}
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../src/components/app-bar.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;sEAmCjB,CAAA"}

package/esm/components/app-bar.js

@@ -1,30 +1,35 @@
-import { Shade, createComponent, attachProps } from '@furystack/shades';
-import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 export const AppBar = Shade({
     shadowDomName: 'shade-app-bar',
-    constructed: ({ element }) => {
-        requestAnimationFrame(() => {
-            element.style.opacity = '1';
-        });
+    css: {
+        width: '100%',
+        background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+        backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        boxShadow: cssVariableTheme.shadows.md,
+        transition: `opacity ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}, padding ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
+        opacity: '0',
+        position: 'fixed',
+        zIndex: '1',
+        color: cssVariableTheme.text.primary,
+        '&[data-visible]': {
+            opacity: '1',
+        },
     },
-    render: ({ children, injector, element }) => {
-        const { theme } = injector.getInstance(ThemeProviderService);
-        attachProps(element, {
-            style: {
-                width: '100%',
-                background: 'rgba(128,128,128,0.2)',
-                backdropFilter: 'blur(15px)',
-                display: 'flex',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                boxShadow: '0 0 12px rgba(0,0,0,0.6)',
-                transition: 'opacity .35s cubic-bezier(0.550, 0.085, 0.680, 0.530), padding .2s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
-                opacity: '0',
-                position: 'fixed',
-                zIndex: '1',
-                color: theme.text.secondary,
-            },
+    render: ({ children, useHostProps, useDisposable, useState }) => {
+        const [isVisible, setVisible] = useState('isVisible', false);
+        useDisposable('enter-animation', () => {
+            requestAnimationFrame(() => {
+                setVisible(true);
+            });
+            return { [Symbol.dispose]: () => { } };
         });
+        if (isVisible) {
+            useHostProps({ 'data-visible': '' });
+        }
         return createComponent(createComponent, null, children);
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../src/components/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAE5E,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,eAAe;IAC9B,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAC3B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAA;QAC7B,CAAC,CAAC,CAAA;IACJ,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;QAC5D,WAAW,CAAC,OAAO,EAAE;YACnB,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,UAAU,EAAE,uBAAuB;gBACnC,cAAc,EAAE,YAAY;gBAC5B,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,YAAY;gBAC5B,UAAU,EAAE,QAAQ;gBACpB,SAAS,EAAE,0BAA0B;gBACrC,UAAU,EACR,6GAA6G;gBAC/G,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;aAC5B;SACF,CAAC,CAAA;QACF,OAAO,uCAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../src/components/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAEpE,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,eAAe;IAC9B,GAAG,EAAE;QACH,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,sBAAsB,gBAAgB,CAAC,UAAU,CAAC,KAAK,oBAAoB;QACvF,cAAc,EAAE,QAAQ,gBAAgB,CAAC,OAAO,CAAC,MAAM,GAAG;QAC1D,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,YAAY;QAC5B,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;QACtC,UAAU,EAAE,WAAW,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,IAAI,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,aAAa,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,IAAI,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC1N,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO;QACpC,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG;SACb;KACF;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9D,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;QAE5D,aAAa,CAAC,iBAAiB,EAAE,GAAG,EAAE;YACpC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,UAAU,CAAC,IAAI,CAAC,CAAA;YAClB,CAAC,CAAC,CAAA;YACF,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAA;QACvC,CAAC,CAAC,CAAA;QAEF,IAAI,SAAS,EAAE,CAAC;YACd,YAAY,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAA;QACtC,CAAC;QAED,OAAO,uCAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF,CAAC,CAAA"}

package/esm/components/app-bar.spec.d.ts

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

package/esm/components/app-bar.spec.d.ts.map

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

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

@@ -0,0 +1,132 @@
+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 { AppBar } from './app-bar.js';
+describe('AppBar component', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const renderAppBar = async (children) => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(AppBar, null, children),
+        });
+        await sleepAsync(50);
+        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 () => {
+            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 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 () => {
+            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();
+            });
+        });
+    });
+    describe('positioning', () => {
+        it('should have fixed positioning', async () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            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 () => {
+            await usingAsync(await renderAppBar(createComponent("span", null, "Content")), async ({ appBar }) => {
+                const computedStyle = window.getComputedStyle(appBar);
+                expect(computedStyle.background).toContain('color-mix');
+            });
+        });
+    });
+});
+//# sourceMappingURL=app-bar.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.spec.js","sourceRoot":"","sources":["../../src/components/app-bar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,KAAK,EAAE,QAAqB,EAAE,EAAE;QACnD,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,gBAAC,MAAM,QAAE,QAAQ,CAAU;SACxC,CAAC,CAAA;QAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;QAEpB,OAAO;YACL,QAAQ;YACR,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAgB;YAC9D,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;SAC7D,CAAA;IACH,CAAC,CAAA;IAED,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;YAC9D,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;gBAC7B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YACxD,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,0BAAM,EAAE,EAAC,eAAe,mBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACtG,kDAAkD;gBAClD,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAC/B,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,CACV,gBAAC,MAAM;wBACL,0BAAM,EAAE,EAAC,MAAM,WAAY;wBAC3B,yBAAK,EAAE,EAAC,YAAY,UAAU;wBAC9B,4BAAQ,EAAE,EAAC,QAAQ,aAAgB,CAC5B,CACV;iBACF,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;gBACtD,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAC/B,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;QAC3B,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;YAC7C,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC9C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;YACxC,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YACxC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;YACtC,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC1C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;YAC3D,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;YACnE,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YACzC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;YAC3D,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACvD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACtB,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;YACxC,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC5C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;YACzC,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YACjD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;YACpD,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;YACzD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;QACvB,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;YACtC,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAClD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YACvD,MAAM,UAAU,CAAC,MAAM,YAAY,CAAC,wCAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBACrD,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;YACzD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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;;;4GAiFnE,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"}