@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/components/skeleton.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, vi } from 'vitest';
 import { Skeleton } from './skeleton.js';
 describe('Skeleton', () => {
@@ -38,122 +38,130 @@ describe('Skeleton', () => {
         vi.restoreAllMocks();
     });
     it('should render with shadow DOM', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, null),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, null),
+            });
+            await sleepAsync(50);
+            const skeleton = document.querySelector('shade-skeleton');
+            expect(skeleton).not.toBeNull();
         });
-        await sleepAsync(50);
-        const skeleton = document.querySelector('shade-skeleton');
-        expect(skeleton).not.toBeNull();
     });
     it('should have initial opacity of 0', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, null),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, null),
+            });
+            await sleepAsync(50);
+            const skeleton = document.querySelector('shade-skeleton');
+            expect(skeleton).not.toBeNull();
+            const computedStyle = window.getComputedStyle(skeleton);
+            expect(computedStyle.opacity).toBe('0');
         });
-        await sleepAsync(50);
-        const skeleton = document.querySelector('shade-skeleton');
-        expect(skeleton).not.toBeNull();
-        const computedStyle = window.getComputedStyle(skeleton);
-        expect(computedStyle.opacity).toBe('0');
     });
     it('should use default delay of 1500ms', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, null),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, null),
+            });
+            await sleepAsync(50);
+            const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
+            expect(fadeInCall).toBeDefined();
+            expect(fadeInCall?.options?.delay).toBe(1500);
         });
-        await sleepAsync(50);
-        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
-        expect(fadeInCall).toBeDefined();
-        expect(fadeInCall?.options?.delay).toBe(1500);
     });
     it('should use custom delay when provided', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, { delay: 500 }),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, { delay: 500 }),
+            });
+            await sleepAsync(50);
+            const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
+            expect(fadeInCall).toBeDefined();
+            expect(fadeInCall?.options?.delay).toBe(500);
         });
-        await sleepAsync(50);
-        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
-        expect(fadeInCall).toBeDefined();
-        expect(fadeInCall?.options?.delay).toBe(500);
     });
     it('should have correct css styles applied', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, null),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, null),
+            });
+            await sleepAsync(50);
+            const skeleton = document.querySelector('shade-skeleton');
+            expect(skeleton).not.toBeNull();
+            const computedStyle = window.getComputedStyle(skeleton);
+            expect(computedStyle.display).toBe('inline-block');
         });
-        await sleepAsync(50);
-        const skeleton = document.querySelector('shade-skeleton');
-        expect(skeleton).not.toBeNull();
-        const computedStyle = window.getComputedStyle(skeleton);
-        expect(computedStyle.display).toBe('inline-block');
     });
     it('should start fade-in animation with correct parameters', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, { delay: 100 }),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, { delay: 100 }),
+            });
+            await sleepAsync(50);
+            const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) &&
+                call.keyframes.length === 2 &&
+                call.keyframes[0].opacity === 0 &&
+                call.keyframes[1].opacity === 1);
+            expect(fadeInCall).toBeDefined();
+            const options = fadeInCall?.options;
+            expect(options.fill).toBe('forwards');
+            expect(options.duration).toBe(300);
+            expect(options.easing).toBe('ease-out');
+            expect(options.delay).toBe(100);
         });
-        await sleepAsync(50);
-        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) &&
-            call.keyframes.length === 2 &&
-            call.keyframes[0].opacity === 0 &&
-            call.keyframes[1].opacity === 1);
-        expect(fadeInCall).toBeDefined();
-        const options = fadeInCall?.options;
-        expect(options.fill).toBe('forwards');
-        expect(options.duration).toBe(300);
-        expect(options.easing).toBe('ease-out');
-        expect(options.delay).toBe(100);
     });
     it('should start background animation after fade-in completes', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, { delay: 0 }),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, { delay: 0 }),
+            });
+            await sleepAsync(100);
+            const backgroundAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'backgroundPosition' in kf));
+            expect(backgroundAnimation).toBeDefined();
+            const options = backgroundAnimation?.options;
+            expect(options.duration).toBe(10000);
+            expect(options.iterations).toBe(Infinity);
         });
-        await sleepAsync(100);
-        const backgroundAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'backgroundPosition' in kf));
-        expect(backgroundAnimation).toBeDefined();
-        const options = backgroundAnimation?.options;
-        expect(options.duration).toBe(10000);
-        expect(options.iterations).toBe(Infinity);
     });
     it('should have gradient background animation keyframes', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Skeleton, { delay: 0 }),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Skeleton, { delay: 0 }),
+            });
+            await sleepAsync(100);
+            const backgroundAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'backgroundPosition' in kf));
+            expect(backgroundAnimation).toBeDefined();
+            const keyframes = backgroundAnimation?.keyframes;
+            expect(keyframes).toHaveLength(3);
+            expect(keyframes[0].backgroundPosition).toBe('0% 50%');
+            expect(keyframes[1].backgroundPosition).toBe('100% 50%');
+            expect(keyframes[2].backgroundPosition).toBe('0% 50%');
         });
-        await sleepAsync(100);
-        const backgroundAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'backgroundPosition' in kf));
-        expect(backgroundAnimation).toBeDefined();
-        const keyframes = backgroundAnimation?.keyframes;
-        expect(keyframes).toHaveLength(3);
-        expect(keyframes[0].backgroundPosition).toBe('0% 50%');
-        expect(keyframes[1].backgroundPosition).toBe('100% 50%');
-        expect(keyframes[2].backgroundPosition).toBe('0% 50%');
     });
 });
 //# sourceMappingURL=skeleton.spec.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/components/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,cAAc,EAAE,MAAM,CAAA;KACvB;CACF;AASD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBlB,CAAA;AAED,eAAO,MAAM,MAAM;;CAElB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/components/styles.tsx"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,cAAc,EAAE,MAAM,CAAA;KACvB;CACF;AASD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBlB,CAAA;AAED,eAAO,MAAM,MAAM;;CAElB,CAAA"}

package/esm/components/styles.js

@@ -1,24 +1,25 @@
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 const glassBox = {
-    backdropFilter: 'blur(4px)',
-    borderRadius: '5px',
-    border: '1px solid rgba(128,128,128,.3)',
-    boxShadow: 'rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset',
+    backdropFilter: `blur(${cssVariableTheme.effects.blurSm})`,
+    borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    boxShadow: cssVariableTheme.shadows.md,
 };
 export const colors = {
     primary: {
-        light: '#82e9de',
-        main: '#4db6ac',
-        dark: '#00867d',
-        contrastText: '#000',
+        light: cssVariableTheme.palette.primary.light,
+        main: cssVariableTheme.palette.primary.main,
+        dark: cssVariableTheme.palette.primary.dark,
+        contrastText: cssVariableTheme.palette.primary.mainContrast,
     },
     secondary: {
-        light: '#62727b',
-        main: '#37474f',
-        dark: '#102027',
-        contrastText: '#fff',
+        light: cssVariableTheme.palette.secondary.light,
+        main: cssVariableTheme.palette.secondary.main,
+        dark: cssVariableTheme.palette.secondary.dark,
+        contrastText: cssVariableTheme.palette.secondary.mainContrast,
     },
     error: {
-        main: 'red',
+        main: cssVariableTheme.palette.error.main,
     },
 };
 export const styles = {

package/esm/components/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/components/styles.tsx"],"names":[],"mappings":"AAMA,MAAM,QAAQ,GAAiC;IAC7C,cAAc,EAAE,WAAW;IAC3B,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,gCAAgC;IACxC,SAAS,EAAE,8EAA8E;CAC1F,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,MAAM;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,KAAK;KACZ;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ;CACT,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/components/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAQpE,MAAM,QAAQ,GAAiC;IAC7C,cAAc,EAAE,QAAQ,gBAAgB,CAAC,OAAO,CAAC,MAAM,GAAG;IAC1D,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;IACpD,MAAM,EAAE,aAAa,gBAAgB,CAAC,MAAM,CAAC,YAAY,EAAE;IAC3D,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;CACvC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE;QACP,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;QAC7C,IAAI,EAAE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;QAC3C,IAAI,EAAE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;QAC3C,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;KAC5D;IACD,SAAS,EAAE;QACT,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK;QAC/C,IAAI,EAAE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI;QAC7C,IAAI,EAAE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI;QAC7C,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,YAAY;KAC9D;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1C;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ;CACT,CAAA"}

package/esm/components/styles.spec.js

@@ -1,54 +1,55 @@
 import { describe, expect, it } from 'vitest';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 import { colors, styles } from './styles.js';
 describe('styles', () => {
     describe('colors', () => {
         describe('primary', () => {
-            it('should have light color', () => {
-                expect(colors.primary.light).toBe('#82e9de');
+            it('should reference theme palette primary light', () => {
+                expect(colors.primary.light).toBe(cssVariableTheme.palette.primary.light);
             });
-            it('should have main color', () => {
-                expect(colors.primary.main).toBe('#4db6ac');
+            it('should reference theme palette primary main', () => {
+                expect(colors.primary.main).toBe(cssVariableTheme.palette.primary.main);
             });
-            it('should have dark color', () => {
-                expect(colors.primary.dark).toBe('#00867d');
+            it('should reference theme palette primary dark', () => {
+                expect(colors.primary.dark).toBe(cssVariableTheme.palette.primary.dark);
             });
-            it('should have contrastText color', () => {
-                expect(colors.primary.contrastText).toBe('#000');
+            it('should reference theme palette primary mainContrast', () => {
+                expect(colors.primary.contrastText).toBe(cssVariableTheme.palette.primary.mainContrast);
             });
         });
         describe('secondary', () => {
-            it('should have light color', () => {
-                expect(colors.secondary.light).toBe('#62727b');
+            it('should reference theme palette secondary light', () => {
+                expect(colors.secondary.light).toBe(cssVariableTheme.palette.secondary.light);
             });
-            it('should have main color', () => {
-                expect(colors.secondary.main).toBe('#37474f');
+            it('should reference theme palette secondary main', () => {
+                expect(colors.secondary.main).toBe(cssVariableTheme.palette.secondary.main);
             });
-            it('should have dark color', () => {
-                expect(colors.secondary.dark).toBe('#102027');
+            it('should reference theme palette secondary dark', () => {
+                expect(colors.secondary.dark).toBe(cssVariableTheme.palette.secondary.dark);
             });
-            it('should have contrastText color', () => {
-                expect(colors.secondary.contrastText).toBe('#fff');
+            it('should reference theme palette secondary mainContrast', () => {
+                expect(colors.secondary.contrastText).toBe(cssVariableTheme.palette.secondary.mainContrast);
             });
         });
         describe('error', () => {
-            it('should have main color', () => {
-                expect(colors.error.main).toBe('red');
+            it('should reference theme palette error main', () => {
+                expect(colors.error.main).toBe(cssVariableTheme.palette.error.main);
             });
         });
     });
     describe('styles', () => {
         describe('glassBox', () => {
-            it('should have backdropFilter', () => {
-                expect(styles.glassBox.backdropFilter).toBe('blur(4px)');
+            it('should have backdropFilter using theme blur token', () => {
+                expect(styles.glassBox.backdropFilter).toBe(`blur(${cssVariableTheme.effects.blurSm})`);
             });
-            it('should have borderRadius', () => {
-                expect(styles.glassBox.borderRadius).toBe('5px');
+            it('should have borderRadius using theme token', () => {
+                expect(styles.glassBox.borderRadius).toBe(cssVariableTheme.shape.borderRadius.sm);
             });
-            it('should have border', () => {
-                expect(styles.glassBox.border).toBe('1px solid rgba(128,128,128,.3)');
+            it('should have border using theme subtleBorder', () => {
+                expect(styles.glassBox.border).toBe(`1px solid ${cssVariableTheme.action.subtleBorder}`);
             });
-            it('should have boxShadow', () => {
-                expect(styles.glassBox.boxShadow).toBe('rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset');
+            it('should have boxShadow using theme shadow', () => {
+                expect(styles.glassBox.boxShadow).toBe(cssVariableTheme.shadows.md);
             });
         });
     });

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

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

package/esm/components/suggest/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggest/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAQrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AAEtC,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAA;IAC1C,kBAAkB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAA;IAClD,kBAAkB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CA8J1F,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggest/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAUrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AAEtC,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAA;IAC1C,kBAAkB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAA;IAClD,kBAAkB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAyF1F,CAAA"}

package/esm/components/suggest/index.js

@@ -1,7 +1,9 @@
 import { Shade, createComponent } from '@furystack/shades';
-import { cssVariableTheme } from '../../services/css-variable-theme.js';
 import { promisifyAnimation } from '../../utils/promisify-animation.js';
+import { Icon } from '../icons/icon.js';
+import { close } from '../icons/icon-definitions.js';
 import { Loader } from '../loader.js';
+import { searchableInputStyles } from '../searchable-input-styles.js';
 import { SuggestInput } from './suggest-input.js';
 import { SuggestManager } from './suggest-manager.js';
 import { SuggestionList } from './suggestion-list.js';
@@ -12,95 +14,30 @@ export * from './suggestion-result.js';
 export const Suggest = Shade({
     shadowDomName: 'shade-suggest',
     css: {
-        flexGrow: '1',
+        ...searchableInputStyles,
         '& .suggest-wrapper': {
             display: 'flex',
             flexDirection: 'column',
         },
-        '& .input-container': {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            padding: '0 1.25em',
-            borderRadius: '12px',
-            position: 'relative',
-            background: 'rgba(128,128,128,0.08)',
-            border: '1px solid rgba(128,128,128,0.15)',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-        '&.opened .input-container': {
-            border: '1px solid rgba(128,128,128,0.3)',
-            boxShadow: '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)',
-        },
-        '& .term-icon': {
-            cursor: 'pointer',
-            color: cssVariableTheme.text.secondary,
-            fontWeight: '600',
-            fontSize: '0.95em',
-            transition: 'color 0.2s ease',
-            padding: '0.5em 0.75em 0.5em 0',
-            userSelect: 'none',
-        },
-        '& .term-icon:hover': {
-            color: cssVariableTheme.text.primary,
-        },
-        '& .post-controls': {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '0px',
-            overflow: 'hidden',
-        },
-        '&.opened .post-controls': {
-            width: '50px',
-        },
-        '& .close-suggestions': {
-            width: '24px',
-            height: '24px',
-            opacity: '0',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            borderRadius: '6px',
-            transition: 'all 0.2s ease',
-            fontSize: '14px',
-            color: cssVariableTheme.text.secondary,
-            background: 'transparent',
-            transform: 'scale(1)',
-        },
-        '&.opened .close-suggestions': {
-            opacity: '1',
-        },
-        '& .close-suggestions:hover': {
-            background: 'rgba(255,255,255,0.15)',
-            transform: 'scale(1.1)',
-        },
     },
-    render: ({ props, injector, element, useDisposable }) => {
+    render: ({ props, injector, useDisposable, useRef, useHostProps, useObservable }) => {
         const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry));
-        manager.element = element;
-        manager.isOpened.subscribe((isOpened) => {
-            element.classList.toggle('opened', isOpened);
-            const inputContainer = element.querySelector('.input-container');
-            if (isOpened) {
-                void promisifyAnimation(inputContainer, [{ background: 'transparent' }, { background: cssVariableTheme.background.default }], {
-                    duration: 500,
-                    fill: 'forwards',
-                    easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-                });
-            }
-            else {
-                void promisifyAnimation(inputContainer, [{ background: cssVariableTheme.background.default }, { background: 'transparent' }], {
-                    duration: 300,
-                    fill: 'forwards',
-                    easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-                });
-            }
+        const wrapperRef = useRef('wrapper');
+        const loaderRef = useRef('loader');
+        // Keep manager.element in sync for click-outside detection
+        queueMicrotask(() => {
+            const hostEl = wrapperRef.current?.closest('shade-suggest');
+            if (hostEl)
+                manager.element = hostEl;
+        });
+        const [isOpened] = useObservable('isOpened', manager.isOpened);
+        useHostProps({
+            'data-opened': isOpened ? '' : undefined,
         });
         manager.isLoading.subscribe((isLoading) => {
-            const loader = element.querySelector('shade-loader');
+            const loader = loaderRef.current;
+            if (!loader)
+                return;
             if (isLoading) {
                 void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
                     duration: 100,
@@ -115,7 +52,7 @@ export const Suggest = Shade({
             }
         });
         useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion));
-        return (createComponent("div", { className: "suggest-wrapper", onkeyup: (ev) => {
+        return (createComponent("div", { ref: wrapperRef, className: "suggest-wrapper", onkeyup: (ev) => {
                 if (ev.key === 'Enter') {
                     ev.preventDefault();
                     manager.selectSuggestion();
@@ -135,8 +72,10 @@ export const Suggest = Shade({
                 createComponent("div", { className: "term-icon", onclick: () => manager.isOpened.setValue(true) }, props.defaultPrefix),
                 createComponent(SuggestInput, { manager: manager }),
                 createComponent("div", { className: "post-controls" },
-                    createComponent(Loader, { style: { width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }, delay: 0, borderWidth: 4 }),
-                    createComponent("div", { className: "close-suggestions", onclick: () => manager.isOpened.setValue(false) }, "\u2716"))),
+                    createComponent("span", { ref: loaderRef, style: { display: 'inline-flex' } },
+                        createComponent(Loader, { style: { width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }, delay: 0, borderWidth: 4 })),
+                    createComponent("div", { className: "close-suggestions", onclick: () => manager.isOpened.setValue(false) },
+                        createComponent(Icon, { icon: close, size: 14 })))),
             createComponent(SuggestionList, { manager: manager })));
     },
 });

package/esm/components/suggest/index.js.map

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