@furystack/shades-common-components 8.2.3 → 10.0.0

package/esm/services/default-dark-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-dark-theme.d.ts","sourceRoot":"","sources":["../../src/services/default-dark-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAExD,eAAO,MAAM,gBAAgB,EAAE,KAmB9B,CAAA"}
+{"version":3,"file":"default-dark-theme.d.ts","sourceRoot":"","sources":["../../src/services/default-dark-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAExD,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}

package/esm/services/default-dark-theme.js

@@ -1,5 +1,6 @@
 import { defaultPalette } from './default-palette.js';
 export const defaultDarkTheme = {
+    name: 'default-dark-theme',
     text: {
         primary: '#fff',
         secondary: 'rgba(255, 255, 255, 0.7)',

package/esm/services/default-dark-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-dark-theme.js","sourceRoot":"","sources":["../../src/services/default-dark-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,0BAA0B;QACrC,QAAQ,EAAE,0BAA0B;KACrC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,2BAA2B;QAClC,QAAQ,EAAE,2BAA2B;QACrC,QAAQ,EAAE,0BAA0B;QACpC,kBAAkB,EAAE,2BAA2B;KAChD;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;KACjB;IACD,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}
+{"version":3,"file":"default-dark-theme.js","sourceRoot":"","sources":["../../src/services/default-dark-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,0BAA0B;QACrC,QAAQ,EAAE,0BAA0B;KACrC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,2BAA2B;QAClC,QAAQ,EAAE,2BAA2B;QACrC,QAAQ,EAAE,0BAA0B;QACpC,kBAAkB,EAAE,2BAA2B;KAChD;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;KACjB;IACD,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}

package/esm/services/default-light-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-light-theme.d.ts","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAA"}
+{"version":3,"file":"default-light-theme.d.ts","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA"}

package/esm/services/default-light-theme.js

@@ -1,5 +1,6 @@
 import { defaultPalette } from './default-palette.js';
 export const defaultLightTheme = {
+    name: 'default-light-theme',
     palette: defaultPalette,
     text: {
         primary: 'rgba(0, 0, 0, 0.87)',

package/esm/services/default-light-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-light-theme.js","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,qBAAqB;KAChC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,qBAAqB;QAC/B,kBAAkB,EAAE,qBAAqB;KAC1C;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}
+{"version":3,"file":"default-light-theme.js","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,qBAAqB;KAChC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,qBAAqB;QAC/B,kBAAkB,EAAE,qBAAqB;KAC1C;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}

package/esm/services/theme-provider-service.d.ts

@@ -1,4 +1,4 @@
-import type { DeepPartial } from '@furystack/utils';
+import { EventHub, type DeepPartial } from '@furystack/utils';
 export type Color = string;
 export type ColorVariants = {
     main: Color;
@@ -30,6 +30,7 @@ export interface Background {
     paper: Color;
 }
 export interface Theme {
+    name: string;
     palette: Palette;
     text: Text;
     button: ButtonColor;
@@ -48,7 +49,9 @@ export declare class RgbColor {
 /**
  * Service class for theme-related operations
  */
-export declare class ThemeProviderService {
+export declare class ThemeProviderService extends EventHub<{
+    themeChanged: DeepPartial<Theme>;
+}> {
     /**
      * @deprecated does not respect CSS vars
      * @param color The background color
@@ -64,7 +67,16 @@ export declare class ThemeProviderService {
      */
     getRgbFromColorString(color: string): RgbColor;
     readonly theme: Theme;
-    set(change: DeepPartial<Theme>): void;
-    dispose(): void;
+    private _assignedTheme;
+    /**
+     * Returns the last assigned theme object
+     */
+    getAssignedTheme(): DeepPartial<Theme>;
+    /**
+     *
+     * @param v The Theme instance
+     */
+    setAssignedTheme(theme: DeepPartial<Theme>): void;
+    [Symbol.dispose](): void;
 }
 //# sourceMappingURL=theme-provider-service.d.ts.map

package/esm/services/theme-provider-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider-service.d.ts","sourceRoot":"","sources":["../../src/services/theme-provider-service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGnD,MAAM,MAAM,KAAK,GAAG,MAAM,CAAA;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,KAAK,CAAA;IACZ,IAAI,EAAE,KAAK,CAAA;CACZ,CAAA;AAED,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,aAAa,CAAA;IACtB,SAAS,EAAE,aAAa,CAAA;IACxB,KAAK,EAAE,aAAa,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,EAAE,aAAa,CAAA;CACpB;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,KAAK,CAAA;IACd,SAAS,EAAE,KAAK,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,KAAK,CAAA;IACb,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAA;IACf,QAAQ,EAAE,KAAK,CAAA;IACf,kBAAkB,EAAE,KAAK,CAAA;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,KAAK,CAAA;CACb;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,WAAW,CAAA;IACnB,UAAU,EAAE,UAAU,CAAA;IACtB,OAAO,EAAE,KAAK,CAAA;CACf;AAED,qBAAa,QAAQ;IAEV,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;gBAHT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,GAAE,MAAU;IAGf,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ;IAK3D,QAAQ,IAAI,MAAM;CAG1B;AAED;;GAEG;AACH,qBACa,oBAAoB;IAC/B;;;;;;OAMG;IACI,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAY,EAAE,IAAI,SAAY;IAMvE;;;;OAIG;IACI,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ;IAmCrD,SAAgB,KAAK,QAAmB;IAEjC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC;IAI9B,OAAO;CAGf"}
+{"version":3,"file":"theme-provider-service.d.ts","sourceRoot":"","sources":["../../src/services/theme-provider-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG7D,MAAM,MAAM,KAAK,GAAG,MAAM,CAAA;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,KAAK,CAAA;IACZ,IAAI,EAAE,KAAK,CAAA;CACZ,CAAA;AAED,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,aAAa,CAAA;IACtB,SAAS,EAAE,aAAa,CAAA;IACxB,KAAK,EAAE,aAAa,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,EAAE,aAAa,CAAA;CACpB;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,KAAK,CAAA;IACd,SAAS,EAAE,KAAK,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,KAAK,CAAA;IACb,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAA;IACf,QAAQ,EAAE,KAAK,CAAA;IACf,kBAAkB,EAAE,KAAK,CAAA;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,KAAK,CAAA;CACb;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,WAAW,CAAA;IACnB,UAAU,EAAE,UAAU,CAAA;IACtB,OAAO,EAAE,KAAK,CAAA;CACf;AAED,qBAAa,QAAQ;IAEV,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;gBAHT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,GAAE,MAAU;IAGf,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ;IAK3D,QAAQ,IAAI,MAAM;CAG1B;AAED;;GAEG;AACH,qBACa,oBAAqB,SAAQ,QAAQ,CAAC;IAAE,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;CAAE,CAAC;IACtF;;;;;;OAMG;IACI,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAY,EAAE,IAAI,SAAY;IAMvE;;;;OAIG;IACI,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ;IAmCrD,SAAgB,KAAK,QAAmB;IAExC,OAAO,CAAC,cAAc,CAAuC;IAE7D;;OAEG;IACI,gBAAgB,IAAI,WAAW,CAAC,KAAK,CAAC;IAI7C;;;OAGG;IACI,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC;IAM1C,CAAC,MAAM,CAAC,OAAO,CAAC;CAGxB"}

package/esm/services/theme-provider-service.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Injectable } from '@furystack/inject';
+import { EventHub } from '@furystack/utils';
 import { cssVariableTheme, getCssVariable, useThemeCssVariables } from './css-variable-theme.js';
 export class RgbColor {
     r;
@@ -28,7 +29,7 @@ export class RgbColor {
 /**
  * Service class for theme-related operations
  */
-let ThemeProviderService = class ThemeProviderService {
+let ThemeProviderService = class ThemeProviderService extends EventHub {
     /**
      * @deprecated does not respect CSS vars
      * @param color The background color
@@ -73,10 +74,23 @@ let ThemeProviderService = class ThemeProviderService {
         throw Error(`Color format '${color}' is not supported.'`);
     }
     theme = cssVariableTheme;
-    set(change) {
-        useThemeCssVariables(change);
+    _assignedTheme = cssVariableTheme;
+    /**
+     * Returns the last assigned theme object
+     */
+    getAssignedTheme() {
+        return this._assignedTheme;
+    }
+    /**
+     *
+     * @param v The Theme instance
+     */
+    setAssignedTheme(theme) {
+        this._assignedTheme = theme;
+        useThemeCssVariables(theme);
+        this.emit('themeChanged', theme);
     }
-    dispose() {
+    [Symbol.dispose]() {
         /** */
     }
 };

package/esm/services/theme-provider-service.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "8.2.3",
+  "version": "10.0.0",
   "description": "",
   "type": "module",
   "scripts": {
@@ -31,15 +31,15 @@
   "author": "gallay.lajos@gmail.com",
   "license": "GPL-2.0",
   "devDependencies": {
-    "typescript": "^5.4.5",
-    "vitest": "^1.6.0"
+    "typescript": "^5.5.3",
+    "vitest": "^2.0.0"
   },
   "dependencies": {
-    "@furystack/core": "^14.0.5",
-    "@furystack/inject": "^11.0.3",
-    "@furystack/shades": "^10.0.6",
-    "@furystack/utils": "^7.0.2",
-    "path-to-regexp": "^6.2.2",
+    "@furystack/core": "^15.0.0",
+    "@furystack/inject": "^12.0.0",
+    "@furystack/shades": "^11.0.0",
+    "@furystack/utils": "^8.0.0",
+    "path-to-regexp": "^7.0.0",
     "semaphore-async-await": "^1.5.1"
   },
   "gitHead": "76e1d17a71b981984935c9a7a5791cf61ebf5213"

package/src/components/app-bar-link.tsx

@@ -1,10 +1,9 @@
 import type { RouteLinkProps } from '@furystack/shades'
-import { attachProps } from '@furystack/shades'
-import { createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
-import { match, type TokensToRegexpOptions } from 'path-to-regexp'
+import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
+import { match, type MatchOptions } from 'path-to-regexp'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
-export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: TokensToRegexpOptions }>({
+export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: MatchOptions }>({
   shadowDomName: 'shade-app-bar-link',
   render: ({ children, props, useObservable, injector, element }) => {
     const getAnchorStyle = (currentUrl: string) => {

package/src/components/button.tsx

@@ -4,7 +4,6 @@ import { Shade, createComponent } from '@furystack/shades'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
 import type { Palette, Theme } from '../services/theme-provider-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
-import { Trace } from '@furystack/utils'
 
 export type ButtonProps = PartialElement<HTMLButtonElement> & {
   variant?: 'contained' | 'outlined'
@@ -106,15 +105,11 @@ export const Button = Shade<ButtonProps>({
 
     if (props.variant === 'contained') {
       useDisposable('themeChanged', () =>
-        Trace.method({
-          object: themeProvider,
-          method: themeProvider.set,
-          onFinished: () => {
-            const el = element
-            el.style.color = getTextColor(props, themeProvider.theme, () =>
-              themeProvider.getTextColor(el.style.background || el.style.backgroundColor),
-            )
-          },
+        themeProvider.subscribe('themeChanged', () => {
+          const el = element
+          el.style.color = getTextColor(props, themeProvider.theme, () =>
+            themeProvider.getTextColor(el.style.background || el.style.backgroundColor),
+          )
         }),
       )
     }

package/src/components/command-palette/command-palette-manager.ts

@@ -1,7 +1,7 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
 import { debounce, ObservableValue } from '@furystack/utils'
-import type { CommandProvider, CommandPaletteSuggestionResult } from './command-provider.js'
+import type { CommandPaletteSuggestionResult, CommandProvider } from './command-provider.js'
 
 @Injectable({ lifetime: 'singleton' })
 export class CommandPaletteManager {
@@ -21,13 +21,13 @@ export class CommandPaletteManager {
     }
   }).bind(this)
 
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('keyup', this.keyPressListener)
-    this.isOpened.dispose()
-    this.isLoading.dispose()
-    this.term.dispose()
-    this.selectedIndex.dispose()
-    this.currentSuggestions.dispose()
+    this.isOpened[Symbol.dispose]()
+    this.isLoading[Symbol.dispose]()
+    this.term[Symbol.dispose]()
+    this.selectedIndex[Symbol.dispose]()
+    this.currentSuggestions[Symbol.dispose]()
   }
 
   public selectSuggestion(injector: Injector, index: number = this.selectedIndex.getValue()) {

package/src/components/command-palette/index.tsx

@@ -1,12 +1,12 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ClickAwayService } from '../../services/click-away-service.js'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
-import { CommandPaletteManager } from './command-palette-manager.js'
 import { CommandPaletteInput } from './command-palette-input.js'
+import { CommandPaletteManager } from './command-palette-manager.js'
 import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js'
 import type { CommandProvider } from './command-provider.js'
-import { ClickAwayService } from '../../services/click-away-service.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
 
 export * from './command-palette-input.js'
 export * from './command-palette-manager.js'

package/src/components/data-grid/body.tsx

@@ -1,8 +1,8 @@
-import type { CollectionService } from '../../services/collection-service.js'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { DataRowCells } from './data-grid.js'
+import type { CollectionService } from '../../services/collection-service.js'
 import { DataGridRow } from './data-grid-row.js'
+import type { DataRowCells } from './data-grid.js'
 
 export interface DataGridBodyProps<T, Column extends string> {
   service: CollectionService<T>
@@ -24,6 +24,8 @@ export const DataGridBody: <T, Column extends string>(
   children: ChildrenList,
 ) => JSX.Element<any> = Shade<DataGridBodyProps<any, string>>({
   shadowDomName: 'shade-data-grid-body',
+  elementBase: HTMLTableSectionElement,
+  elementBaseName: 'tbody',
   style: {
     display: 'table-row-group',
   },

package/src/components/data-grid/header.tsx

@@ -1,11 +1,11 @@
 import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { Input } from '../inputs/input.js'
-import { Form } from '../form.js'
-import { Button } from '../button.js'
 import { ObservableValue, sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
+import { Button } from '../button.js'
+import { Form } from '../form.js'
+import { Input } from '../inputs/input.js'
 
 export interface DataGridHeaderProps<T, Column extends string> {
   field: Column

package/src/components/form.tsx

@@ -1,9 +1,8 @@
-import type { ChildrenList, PartialElement } from '@furystack/shades'
-import { attachProps } from '@furystack/shades'
-import { Shade, createComponent } from '@furystack/shades'
-import type { InputValidationResult } from './inputs/input.js'
 import { Injectable } from '@furystack/inject'
+import type { ChildrenList, PartialElement } from '@furystack/shades'
+import { Shade, attachProps, createComponent } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
+import type { InputValidationResult } from './inputs/input.js'
 
 type UnknownFormValidationResult = { isValid: null }
 
@@ -34,10 +33,10 @@ export class FormService<T> {
     this.fieldErrors.setValue({ ...this.fieldErrors.getValue(), [key]: { validationResult, validity } })
   }
 
-  public dispose() {
-    this.validatedFormData.dispose()
-    this.rawFormData.dispose()
-    this.validationResult.dispose()
+  public [Symbol.dispose]() {
+    this.validatedFormData[Symbol.dispose]()
+    this.rawFormData[Symbol.dispose]()
+    this.validationResult[Symbol.dispose]()
   }
 }
 

package/src/components/inputs/input.tsx

@@ -1,5 +1,5 @@
 import type { PartialElement } from '@furystack/shades'
-import { Shade, createComponent, attachStyles } from '@furystack/shades'
+import { Shade, attachStyles, createComponent } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
 import type { Palette } from '../../services/theme-provider-service.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'

package/src/components/suggest/index.tsx

@@ -1,12 +1,12 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
-import { SuggestManager } from './suggest-manager.js'
-import type { SuggestionResult } from './suggestion-result.js'
 import { SuggestInput } from './suggest-input.js'
+import { SuggestManager } from './suggest-manager.js'
 import { SuggestionList } from './suggestion-list.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import type { SuggestionResult } from './suggestion-result.js'
 
 export * from './suggest-input.js'
 export * from './suggest-manager.js'
@@ -31,9 +31,10 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   render: ({ props, injector, element, useDisposable }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
     const { theme } = injector.getInstance(ThemeProviderService)
-    const inputContainer = element.querySelector('.input-container') as HTMLDivElement
     manager.element = element
     manager.isOpened.subscribe((isOpened) => {
+      const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+
       const suggestions = element.querySelector('.close-suggestions')
       const postControls = element.querySelector('.post-controls')
       if (isOpened) {

package/src/components/suggest/suggest-manager.ts

@@ -1,6 +1,5 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
-import type { Disposable } from '@furystack/utils'
 import { debounce, EventHub, ObservableValue } from '@furystack/utils'
 import type { SuggestionResult } from './suggestion-result.js'
 
@@ -29,15 +28,15 @@ export class SuggestManager<T> extends EventHub<{ onSelectSuggestion: T }> imple
     }
   }).bind(this)
 
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('keyup', this.keyPressListener, true)
     window.removeEventListener('click', this.clickOutsideListener, true)
-    this.isOpened.dispose()
-    this.isLoading.dispose()
-    this.term.dispose()
-    this.selectedIndex.dispose()
-    this.currentSuggestions.dispose()
-    super.dispose()
+    this.isOpened[Symbol.dispose]()
+    this.isLoading[Symbol.dispose]()
+    this.term[Symbol.dispose]()
+    this.selectedIndex[Symbol.dispose]()
+    this.currentSuggestions[Symbol.dispose]()
+    super[Symbol.dispose]()
   }
 
   public selectSuggestion(index: number = this.selectedIndex.getValue()) {

package/src/components/tabs.tsx

@@ -1,4 +1,4 @@
-import { Shade, createComponent, LocationService, attachProps } from '@furystack/shades'
+import { LocationService, Shade, attachProps, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
 export interface Tab {
@@ -7,16 +7,21 @@ export interface Tab {
   hash: string
 }
 
-const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
+const TabHeader = Shade<{ hash: string }>({
   shadowDomName: 'shade-tab-header',
   style: {
     padding: '1em 2.5em',
     cursor: 'pointer',
     transition: 'box-shadow 1s linear',
   },
-  render: ({ children, element, injector, props }) => {
+  elementBase: HTMLAnchorElement,
+  elementBaseName: 'a',
+  render: ({ children, element, injector, props, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
-    const { isActive } = props
+    const locationService = injector.getInstance(LocationService)
+
+    const [hash] = useObservable('updateLocation', locationService.onLocationHashChanged)
+    const isActive = hash === props.hash
 
     attachProps(element, {
       style: {
@@ -25,7 +30,7 @@ const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
         color: isActive ? theme.text.primary : theme.text.secondary,
         boxShadow: isActive ? `inset 0 -2px 0 ${theme.palette.primary.main}` : 'none',
       },
-      onclick: props.onActivate,
+      href: `#${props.hash}`,
     })
     return <>{children}</>
   },
@@ -44,7 +49,6 @@ export const Tabs = Shade<{
     })
 
     const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged)
-
     const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''))
 
     return (
@@ -53,20 +57,9 @@ export const Tabs = Shade<{
           className="shade-tabs-header-container"
           style={{ display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' }}
         >
-          {props.tabs.map((tab) => {
-            const isActive = tab === activeTab
-
-            return (
-              <TabHeader
-                isActive={isActive}
-                onActivate={() => {
-                  window.history.pushState({}, '', `#${tab.hash}`)
-                }}
-              >
-                {tab.header}
-              </TabHeader>
-            )
-          })}
+          {props.tabs.map((tab) => (
+            <TabHeader hash={tab.hash}>{tab.header}</TabHeader>
+          ))}
         </div>
         {activeTab?.component}
       </>

package/src/services/click-away-service.spec.ts

@@ -4,7 +4,7 @@ import { ClickAwayService } from './click-away-service.js'
 describe('ClickAwayService', () => {
   it('Should be constructed and disposed', () => {
     const service = new ClickAwayService(document.createElement('div'), () => {})
-    service.dispose()
+    service[Symbol.dispose]()
   })
 
   it('Should call onClickAway when clicking outside the element', () => {
@@ -17,7 +17,7 @@ describe('ClickAwayService', () => {
 
     expect(onClickAway).toBeCalled()
 
-    service.dispose()
+    service[Symbol.dispose]()
   })
 
   it('Should not call onClickAway when clicking inside the element', () => {
@@ -30,6 +30,6 @@ describe('ClickAwayService', () => {
 
     expect(onClickAway).not.toBeCalled()
 
-    service.dispose()
+    service[Symbol.dispose]()
   })
 })

package/src/services/click-away-service.ts

@@ -1,5 +1,5 @@
 export class ClickAwayService<T extends HTMLElement> {
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('click', this.clickOutsideListener, true)
   }
 

package/src/services/collection-service.spec.ts

@@ -1,4 +1,4 @@
-import { usingAsync } from '@furystack/utils'
+import { using } from '@furystack/utils'
 import { describe, expect, it } from 'vitest'
 import { CollectionService } from './collection-service.js'
 
@@ -6,8 +6,8 @@ const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
 
 describe('CollectionService', () => {
   describe('Selection', () => {
-    it('Should add and remove selection', async () => {
-      await usingAsync(new CollectionService({}), async (collectionService) => {
+    it('Should add and remove selection', () => {
+      using(new CollectionService({}), (collectionService) => {
         collectionService.data.setValue({ count: 3, entries: testEntries })
         testEntries.forEach((entry) => {
           expect(collectionService.isSelected(entry)).toBe(false)

package/src/services/collection-service.ts

@@ -1,4 +1,3 @@
-import type { Disposable } from '@furystack/utils'
 import { ObservableValue } from '@furystack/utils'
 
 export interface CollectionData<T> {
@@ -26,12 +25,12 @@ export interface CollectionServiceOptions<T> {
 }
 
 export class CollectionService<T> implements Disposable {
-  public dispose() {
-    this.data.dispose()
-    this.selection.dispose()
-    this.searchTerm.dispose()
-    this.hasFocus.dispose()
-    this.focusedEntry.dispose()
+  public [Symbol.dispose]() {
+    this.data[Symbol.dispose]()
+    this.selection[Symbol.dispose]()
+    this.searchTerm[Symbol.dispose]()
+    this.hasFocus[Symbol.dispose]()
+    this.focusedEntry[Symbol.dispose]()
   }
 
   public isSelected = (entry: T) => this.selection.getValue().includes(entry)

package/src/services/css-variable-theme.ts

@@ -1,6 +1,7 @@
 import type { DeepPartial } from '@furystack/utils'
 import type { Theme } from './theme-provider-service.js'
 export const cssVariableTheme: Theme = {
+  name: 'css-variable-theme',
   text: {
     primary: 'var(--shades-theme-text-primary)',
     secondary: 'var(--shades-theme-text-secondary)',
@@ -76,7 +77,6 @@ const assignValue = <T extends object>(
     }
   })
 }
-
 export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
   const root = document.querySelector(':root') as HTMLElement
   assignValue(cssVariableTheme, theme, root)

package/src/services/default-dark-theme.ts

@@ -2,6 +2,7 @@ import { defaultPalette } from './default-palette.js'
 import type { Theme } from './theme-provider-service.js'
 
 export const defaultDarkTheme: Theme = {
+  name: 'default-dark-theme',
   text: {
     primary: '#fff',
     secondary: 'rgba(255, 255, 255, 0.7)',

package/src/services/default-light-theme.ts

@@ -2,6 +2,7 @@ import { defaultPalette } from './default-palette.js'
 import type { Theme } from './theme-provider-service.js'
 
 export const defaultLightTheme: Theme = {
+  name: 'default-light-theme',
   palette: defaultPalette,
   text: {
     primary: 'rgba(0, 0, 0, 0.87)',