@ojiepermana/angular 21.1.11 → 21.1.13

package/fesm2022/ojiepermana-angular-theme.mjs

@@ -300,10 +300,10 @@ class ThemeService {
             /* ignore */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/fesm2022/ojiepermana-angular-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-theme.mjs","sources":["../../../projects/angular/theme/src/lib/core/theme.tokens.ts","../../../projects/angular/theme/src/lib/core/theme.service.ts","../../../projects/angular/theme/src/lib/core/theme.provider.ts","../../../projects/angular/theme/public-api.ts","../../../projects/angular/theme/ojiepermana-angular-theme.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const MODES = ['light', 'dark'] as const;\n\nexport type ThemeMode = (typeof MODES)[number];\n\nexport const COLOR_SCHEMES = ['light', 'dark', 'system'] as const;\n\nexport type ColorScheme = (typeof COLOR_SCHEMES)[number];\n\nexport const COLORS = ['blue', 'red', 'green', 'purple', 'amber'] as const;\n\nexport type ThemeColor = (typeof COLORS)[number];\n\nexport const STYLES = ['default', 'sharp', 'brutal', 'soft'] as const;\n\nexport type ThemeStyle = (typeof STYLES)[number];\n\nexport const BRANDS = ['etos'] as const;\n\nexport type ThemeBrand = (typeof BRANDS)[number];\n\nexport interface ThemeConfig {\n  readonly mode: ThemeMode;\n  readonly brand: ThemeBrand | null;\n  readonly color: ThemeColor;\n  readonly style: ThemeStyle;\n}\n\nexport interface MaterialThemeConfig {\n  /** Initial mode preference. Supports `system` for first-visit OS detection. */\n  readonly mode?: ColorScheme;\n  /** Initial brand bundle. When set, it replaces the explicit color and style layers. */\n  readonly brand?: ThemeBrand | null;\n  /** Alias for `brand` to match the persisted `theme-brand` setting. */\n  readonly 'theme-brand'?: ThemeBrand | null;\n  /** Initial brand color layer. */\n  readonly color?: ThemeColor;\n  /** Initial style personality layer. */\n  readonly style?: ThemeStyle;\n  /** @deprecated Use `mode` instead. */\n  readonly defaultMode?: ColorScheme;\n  /** Default brand bundle. When set, it replaces the explicit color and style layers. */\n  readonly defaultBrand?: ThemeBrand | null;\n  /** @deprecated Use `color` instead. */\n  readonly defaultColor?: ThemeColor;\n  /** @deprecated Use `style` instead. */\n  readonly defaultStyle?: ThemeStyle;\n  /** @deprecated Use `defaultMode` instead. */\n  readonly defaultScheme?: ColorScheme;\n  /** @deprecated Use `defaultColor` instead. */\n  readonly defaultTheme?: ThemeColor | string;\n  /** @deprecated Use `modeStorageKey` instead. */\n  readonly storageKey?: string | null;\n  /** @deprecated Use `modeStorageKey` instead. */\n  readonly schemeStorageKey?: string | null;\n  /** @deprecated Use `colorStorageKey` instead. */\n  readonly themeStorageKey?: string | null;\n  /** localStorage key used to persist the mode preference. Set to `null` to disable persistence. */\n  readonly modeStorageKey?: string | null;\n  /** localStorage key used to persist the brand bundle. Set to `null` to disable persistence. */\n  readonly brandStorageKey?: string | null;\n  /** localStorage key used to persist the color layer. Set to `null` to disable persistence. */\n  readonly colorStorageKey?: string | null;\n  /** localStorage key used to persist the style layer. Set to `null` to disable persistence. */\n  readonly styleStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialThemeConfig {\n  readonly defaultMode: ColorScheme;\n  readonly defaultBrand: ThemeBrand | null;\n  readonly defaultColor: ThemeColor;\n  readonly defaultStyle: ThemeStyle;\n  readonly modeStorageKey: string | null;\n  readonly brandStorageKey: string | null;\n  readonly colorStorageKey: string | null;\n  readonly styleStorageKey: string | null;\n}\n\nexport const MATERIAL_THEME_CONFIG = new InjectionToken<MaterialThemeConfig>('MATERIAL_THEME_CONFIG');\n\nexport const DEFAULT_MATERIAL_THEME_CONFIG: ResolvedMaterialThemeConfig = {\n  defaultMode: 'light',\n  defaultBrand: null,\n  defaultColor: 'blue',\n  defaultStyle: 'default',\n  modeStorageKey: 'theme-mode',\n  brandStorageKey: 'theme-brand',\n  colorStorageKey: 'theme-color',\n  styleStorageKey: 'theme-style',\n};\n\nexport function isColorScheme(value: string | null | undefined): value is ColorScheme {\n  return COLOR_SCHEMES.some((scheme) => scheme === value);\n}\n\nexport function isThemeColor(value: string | null | undefined): value is ThemeColor {\n  return COLORS.some((color) => color === value);\n}\n\nexport function isThemeStyle(value: string | null | undefined): value is ThemeStyle {\n  return STYLES.some((style) => style === value);\n}\n\nexport function isThemeBrand(value: string | null | undefined): value is ThemeBrand {\n  return BRANDS.some((brand) => brand === value);\n}\n","import { DOCUMENT } from '@angular/common';\nimport { DestroyRef, Injectable, computed, effect, inject, signal } from '@angular/core';\nimport {\n  COLOR_SCHEMES,\n  DEFAULT_MATERIAL_THEME_CONFIG,\n  MATERIAL_THEME_CONFIG,\n  type ColorScheme,\n  type ResolvedMaterialThemeConfig,\n  type ThemeBrand,\n  type ThemeColor,\n  type ThemeConfig,\n  type ThemeMode,\n  type ThemeStyle,\n  isThemeBrand,\n  isColorScheme,\n  isThemeColor,\n  isThemeStyle,\n} from './theme.tokens';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly document = inject(DOCUMENT);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly config = this.resolveConfig();\n  private readonly initialBrand = this.readPersistedBrand() ?? this.config.defaultBrand;\n\n  private readonly _modePreference = signal<ColorScheme>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _brand = signal<ThemeBrand | null>(this.initialBrand);\n  private readonly _color = signal<ThemeColor>(\n    this.initialBrand ? this.config.defaultColor : (this.readPersistedColor() ?? this.config.defaultColor),\n  );\n  private readonly _style = signal<ThemeStyle>(\n    this.initialBrand ? this.config.defaultStyle : (this.readPersistedStyle() ?? this.config.defaultStyle),\n  );\n  private readonly _systemPrefersDark = signal<boolean>(this.prefersDark());\n\n  readonly scheme = this._modePreference.asReadonly();\n  readonly brand = this._brand.asReadonly();\n  readonly color = this._color.asReadonly();\n  readonly theme = this._color.asReadonly();\n  readonly style = this._style.asReadonly();\n  readonly mode = computed<ThemeMode>(() => this.resolveMode(this._modePreference()));\n  readonly snapshot = computed<ThemeConfig>(() => ({\n    mode: this.mode(),\n    brand: this._brand(),\n    color: this._color(),\n    style: this._style(),\n  }));\n\n  readonly isDark = computed(() => this.mode() === 'dark');\n\n  constructor() {\n    this.watchSystemScheme();\n\n    effect(() => {\n      const root = this.document.documentElement;\n      const mode = this.mode();\n      const brand = this._brand();\n      const color = this._color();\n      const style = this._style();\n\n      root.dataset['mode'] = mode;\n      root.dataset['theme'] = brand ?? color;\n      root.classList.toggle('dark', mode === 'dark');\n\n      this.persistMode(this._modePreference());\n\n      if (brand) {\n        root.setAttribute('theme-brand', brand);\n        root.removeAttribute('theme-color');\n        root.removeAttribute('theme-style');\n        delete root.dataset['color'];\n        delete root.dataset['style'];\n\n        this.persistBrand(brand);\n        this.clearPersistedColor();\n        this.clearPersistedStyle();\n        return;\n      }\n\n      root.removeAttribute('theme-brand');\n      root.setAttribute('theme-color', color);\n      root.setAttribute('theme-style', style);\n      root.dataset['color'] = color;\n      root.dataset['style'] = style;\n\n      this.clearPersistedBrand();\n      this.persistColor(color);\n      this.persistStyle(style);\n    });\n  }\n\n  setMode(mode: ThemeMode): void {\n    this._modePreference.set(mode);\n  }\n\n  setScheme(scheme: ColorScheme): void {\n    this._modePreference.set(scheme);\n  }\n\n  setBrand(brand: ThemeBrand | null): void {\n    this._brand.set(brand);\n    this._color.set(this.config.defaultColor);\n    this._style.set(this.config.defaultStyle);\n  }\n\n  setColor(color: ThemeColor): void {\n    if (this._brand()) {\n      this._brand.set(null);\n    }\n    this._color.set(color);\n  }\n\n  setTheme(theme: ThemeColor | string): void {\n    if (isThemeColor(theme)) {\n      this.setColor(theme);\n    }\n  }\n\n  setStyle(style: ThemeStyle): void {\n    if (this._brand()) {\n      this._brand.set(null);\n    }\n    this._style.set(style);\n  }\n\n  setAll(config: Partial<ThemeConfig> & { readonly scheme?: ColorScheme }): void {\n    if (config.scheme) {\n      this.setScheme(config.scheme);\n    }\n    if (config.mode) {\n      this.setMode(config.mode);\n    }\n    if (config.brand !== undefined) {\n      this.setBrand(config.brand);\n    }\n    if (config.brand === undefined || config.brand === null) {\n      if (config.color) {\n        this.setColor(config.color);\n      }\n      if (config.style) {\n        this.setStyle(config.style);\n      }\n    }\n  }\n\n  toggleScheme(): void {\n    this.toggleMode();\n  }\n\n  toggleMode(): void {\n    this.setMode(this.mode() === 'dark' ? 'light' : 'dark');\n  }\n\n  reset(): void {\n    this._modePreference.set(this.config.defaultMode);\n    this._brand.set(this.config.defaultBrand);\n    this._color.set(this.config.defaultColor);\n    this._style.set(this.config.defaultStyle);\n  }\n\n  private resolveConfig(): ResolvedMaterialThemeConfig {\n    const config = inject(MATERIAL_THEME_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode ?? config.defaultScheme;\n    const configuredBrand = config.brand ?? config['theme-brand'] ?? config.defaultBrand;\n    const configuredColor = config.color ?? config.defaultColor ?? config.defaultTheme;\n    const configuredStyle = config.style ?? config.defaultStyle;\n\n    const defaultMode = isColorScheme(configuredMode) ? configuredMode : DEFAULT_MATERIAL_THEME_CONFIG.defaultMode;\n    const defaultBrand = isThemeBrand(configuredBrand) ? configuredBrand : DEFAULT_MATERIAL_THEME_CONFIG.defaultBrand;\n    const defaultColor = isThemeColor(configuredColor) ? configuredColor : DEFAULT_MATERIAL_THEME_CONFIG.defaultColor;\n    const defaultStyle = isThemeStyle(configuredStyle) ? configuredStyle : DEFAULT_MATERIAL_THEME_CONFIG.defaultStyle;\n\n    return {\n      defaultMode,\n      defaultBrand,\n      defaultColor,\n      defaultStyle,\n      modeStorageKey:\n        config.modeStorageKey ??\n        config.schemeStorageKey ??\n        config.storageKey ??\n        DEFAULT_MATERIAL_THEME_CONFIG.modeStorageKey,\n      brandStorageKey: config.brandStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.brandStorageKey,\n      colorStorageKey:\n        config.colorStorageKey ?? config.themeStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.colorStorageKey,\n      styleStorageKey: config.styleStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.styleStorageKey,\n    };\n  }\n\n  private resolveMode(mode: ColorScheme): ThemeMode {\n    return mode === 'system' ? (this._systemPrefersDark() ? 'dark' : 'light') : mode;\n  }\n\n  private prefersDark(): boolean {\n    const mql = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n    return !!mql?.matches;\n  }\n\n  private watchSystemScheme(): void {\n    const mql = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n    if (!mql) return;\n\n    const listener = (event: MediaQueryListEvent): void => {\n      this._systemPrefersDark.set(event.matches);\n    };\n    mql.addEventListener('change', listener);\n    this.destroyRef.onDestroy(() => mql.removeEventListener('change', listener));\n  }\n\n  private readPersistedMode(): ColorScheme | null {\n    const key = this.config.modeStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isColorScheme(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedBrand(): ThemeBrand | null {\n    const key = this.config.brandStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeBrand(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedColor(): ThemeColor | null {\n    const key = this.config.colorStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeColor(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedStyle(): ThemeStyle | null {\n    const key = this.config.styleStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeStyle(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: ColorScheme): void {\n    const key = this.config.modeStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistBrand(brand: ThemeBrand): void {\n    const key = this.config.brandStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, brand);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistColor(color: ThemeColor): void {\n    const key = this.config.colorStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, color);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistStyle(style: ThemeStyle): void {\n    const key = this.config.styleStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, style);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private clearPersistedBrand(): void {\n    this.clearPersistedItem(this.config.brandStorageKey);\n  }\n\n  private clearPersistedColor(): void {\n    this.clearPersistedItem(this.config.colorStorageKey);\n  }\n\n  private clearPersistedStyle(): void {\n    this.clearPersistedItem(this.config.styleStorageKey);\n  }\n\n  private clearPersistedItem(key: string | null): void {\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.removeItem(key);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","import {\n  inject,\n  type EnvironmentProviders,\n  type Provider,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\nimport { ThemeService } from './theme.service';\nimport { MATERIAL_THEME_CONFIG, type MaterialThemeConfig } from './theme.tokens';\n\n/**\n * Opaque feature unit consumed by {@link provideMaterialTheme}. Mirrors\n * Angular's router/http feature pattern so add-ons can be composed without\n * widening the primary provider signature.\n */\nexport interface MaterialThemeFeature {\n  readonly providers: Provider[];\n}\n\n/**\n * Bootstrap the shared theme for any `@ojiepermana/angular/*` entry point.\n *\n * By default wires up the theme config token and eagerly initializes `ThemeService`\n * so root theme attributes are applied during bootstrap. Opt in\n * to Angular Material defaults (ripple / form-field) via\n * {@link withMaterialDefaults}.\n * Supports shorthand `mode`, `color`, and `style` config keys.\n *\n * @example\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideAnimations(),\n *     provideMaterialTheme(\n *       {\n *         mode: 'system',\n *         color: 'blue',\n *         style: 'soft',\n *       },\n *       withMaterialDefaults(),\n *     ),\n *   ],\n * };\n */\nexport function provideMaterialTheme(\n  config: MaterialThemeConfig = {},\n  ...features: MaterialThemeFeature[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_THEME_CONFIG, useValue: config },\n    provideEnvironmentInitializer(() => {\n      inject(ThemeService);\n    }),\n    ...features.flatMap((f) => f.providers),\n  ]);\n}\n\n/**\n * Opt-in Angular Material defaults tuned for the shared theme layer:\n *\n * - Disables the global Material ripple.\n * - Forces `appearance: 'outline'` + `subscriptSizing: 'dynamic'` on every\n *   `mat-form-field`.\n *\n * Only apply when your app actually renders Angular Material components.\n */\nexport function withMaterialDefaults(): MaterialThemeFeature {\n  return {\n    providers: [\n      { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },\n      {\n        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n        useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },\n      },\n    ],\n  };\n}\n","/*\n * Public API Surface of @ojiepermana/angular/theme\n *\n * The single source of truth for 3-layer design tokens, CSS variables,\n * and the `ThemeService` shared by every `@ojiepermana/angular/*` subpath\n * (shadcn, layout, navigation, ...).\n *\n * Usage:\n *   // app.config.ts\n *   import { provideMaterialTheme } from '@ojiepermana/angular/theme';\n *\n *   // styles.css\n *   @import '@ojiepermana/angular/theme/styles';\n *   @import 'tailwindcss';\n */\n\nexport * from './src/lib/core/theme.tokens';\nexport * from './src/lib/core/theme.service';\nexport * from './src/lib/core/theme.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAEa,KAAK,GAAG,CAAC,OAAO,EAAE,MAAM;AAI9B,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ;AAIhD,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO;AAIzD,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM;AAIpD,MAAM,MAAM,GAAG,CAAC,MAAM;MA6DhB,qBAAqB,GAAG,IAAI,cAAc,CAAsB,uBAAuB;AAE7F,MAAM,6BAA6B,GAAgC;AACxE,IAAA,WAAW,EAAE,OAAO;AACpB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,YAAY,EAAE,SAAS;AACvB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,eAAe,EAAE,aAAa;AAC9B,IAAA,eAAe,EAAE,aAAa;AAC9B,IAAA,eAAe,EAAE,aAAa;;AAG1B,SAAU,aAAa,CAAC,KAAgC,EAAA;AAC5D,IAAA,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACzD;AAEM,SAAU,YAAY,CAAC,KAAgC,EAAA;AAC3D,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AAChD;AAEM,SAAU,YAAY,CAAC,KAAgC,EAAA;AAC3D,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AAChD;AAEM,SAAU,YAAY,CAAC,KAAgC,EAAA;AAC3D,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AAChD;;MCtFa,YAAY,CAAA;AACN,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;IAC7B,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY;AAEpE,IAAA,eAAe,GAAG,MAAM,CAAc,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,WAAW,sFAAC;AAC1F,IAAA,MAAM,GAAG,MAAM,CAAoB,IAAI,CAAC,YAAY,6EAAC;AACrD,IAAA,MAAM,GAAG,MAAM,CAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,6EACvG;AACgB,IAAA,MAAM,GAAG,MAAM,CAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,6EACvG;IACgB,kBAAkB,GAAG,MAAM,CAAU,IAAI,CAAC,WAAW,EAAE,yFAAC;AAEhE,IAAA,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;AAC1C,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAChC,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAChC,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAChC,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAChC,IAAA,IAAI,GAAG,QAAQ,CAAY,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,2EAAC;AAC1E,IAAA,QAAQ,GAAG,QAAQ,CAAc,OAAO;AAC/C,QAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,QAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;AACpB,QAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;AACpB,QAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;AACrB,KAAA,CAAC,+EAAC;AAEM,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,KAAK,MAAM,6EAAC;AAExD,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,iBAAiB,EAAE;QAExB,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe;AAC1C,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AAC3B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AAC3B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AAE3B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI;YAC3B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,KAAK,IAAI,KAAK;YACtC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,KAAK,MAAM,CAAC;YAE9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAExC,IAAI,KAAK,EAAE;AACT,gBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC;AACvC,gBAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;AACnC,gBAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;AACnC,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAC5B,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAE5B,gBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBACxB,IAAI,CAAC,mBAAmB,EAAE;gBAC1B,IAAI,CAAC,mBAAmB,EAAE;gBAC1B;YACF;AAEA,YAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;AACnC,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,KAAK;AAC7B,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,KAAK;YAE7B,IAAI,CAAC,mBAAmB,EAAE;AAC1B,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AAC1B,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,OAAO,CAAC,IAAe,EAAA;AACrB,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;IAChC;AAEA,IAAA,SAAS,CAAC,MAAmB,EAAA;AAC3B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC;IAClC;AAEA,IAAA,QAAQ,CAAC,KAAwB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;IAC3C;AAEA,IAAA,QAAQ,CAAC,KAAiB,EAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,QAAQ,CAAC,KAA0B,EAAA;AACjC,QAAA,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACtB;IACF;AAEA,IAAA,QAAQ,CAAC,KAAiB,EAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,MAAM,CAAC,MAAgE,EAAA;AACrE,QAAA,IAAI,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QAC/B;AACA,QAAA,IAAI,MAAM,CAAC,IAAI,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;QAC3B;AACA,QAAA,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,EAAE;AAC9B,YAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B;AACA,QAAA,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,EAAE;AACvD,YAAA,IAAI,MAAM,CAAC,KAAK,EAAE;AAChB,gBAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;YAC7B;AACA,YAAA,IAAI,MAAM,CAAC,KAAK,EAAE;AAChB,gBAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;YAC7B;QACF;IACF;IAEA,YAAY,GAAA;QACV,IAAI,CAAC,UAAU,EAAE;IACnB;IAEA,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzD;IAEA,KAAK,GAAA;QACH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;IAC3C;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AACtE,QAAA,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,aAAa;AAChF,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,YAAY;AACpF,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,YAAY;QAClF,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY;AAE3D,QAAA,MAAM,WAAW,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,cAAc,GAAG,6BAA6B,CAAC,WAAW;AAC9G,QAAA,MAAM,YAAY,GAAG,YAAY,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,6BAA6B,CAAC,YAAY;AACjH,QAAA,MAAM,YAAY,GAAG,YAAY,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,6BAA6B,CAAC,YAAY;AACjH,QAAA,MAAM,YAAY,GAAG,YAAY,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,6BAA6B,CAAC,YAAY;QAEjH,OAAO;YACL,WAAW;YACX,YAAY;YACZ,YAAY;YACZ,YAAY;YACZ,cAAc,EACZ,MAAM,CAAC,cAAc;AACrB,gBAAA,MAAM,CAAC,gBAAgB;AACvB,gBAAA,MAAM,CAAC,UAAU;AACjB,gBAAA,6BAA6B,CAAC,cAAc;AAC9C,YAAA,eAAe,EAAE,MAAM,CAAC,eAAe,IAAI,6BAA6B,CAAC,eAAe;YACxF,eAAe,EACb,MAAM,CAAC,eAAe,IAAI,MAAM,CAAC,eAAe,IAAI,6BAA6B,CAAC,eAAe;AACnG,YAAA,eAAe,EAAE,MAAM,CAAC,eAAe,IAAI,6BAA6B,CAAC,eAAe;SACzF;IACH;AAEQ,IAAA,WAAW,CAAC,IAAiB,EAAA;QACnC,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI;IAClF;IAEQ,WAAW,GAAA;AACjB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,UAAU,GAAG,8BAA8B,CAAC;AACnF,QAAA,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO;IACvB;IAEQ,iBAAiB,GAAA;AACvB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,UAAU,GAAG,8BAA8B,CAAC;AACnF,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,MAAM,QAAQ,GAAG,CAAC,KAA0B,KAAU;YACpD,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC;AAC5C,QAAA,CAAC;AACD,QAAA,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AACxC,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9E;IAEQ,iBAAiB,GAAA;AACvB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc;AACtC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,IAAI;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC;AACnE,YAAA,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI;QAC5C;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;IAEQ,kBAAkB,GAAA;AACxB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,IAAI;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC;AACnE,YAAA,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI;QAC3C;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;IAEQ,kBAAkB,GAAA;AACxB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,IAAI;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC;AACnE,YAAA,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI;QAC3C;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;IAEQ,kBAAkB,GAAA;AACxB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,IAAI;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC;AACnE,YAAA,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI;QAC3C;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;AAEQ,IAAA,WAAW,CAAC,IAAiB,EAAA;AACnC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc;AACtC,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;QAC7D;AAAE,QAAA,MAAM;;QAER;IACF;AAEQ,IAAA,YAAY,CAAC,KAAiB,EAAA;AACpC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC;QAC9D;AAAE,QAAA,MAAM;;QAER;IACF;AAEQ,IAAA,YAAY,CAAC,KAAiB,EAAA;AACpC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC;QAC9D;AAAE,QAAA,MAAM;;QAER;IACF;AAEQ,IAAA,YAAY,CAAC,KAAiB,EAAA;AACpC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe;AACvC,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC;QAC9D;AAAE,QAAA,MAAM;;QAER;IACF;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;IACtD;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;IACtD;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;IACtD;AAEQ,IAAA,kBAAkB,CAAC,GAAkB,EAAA;AAC3C,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI;YACF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,UAAU,CAAC,GAAG,CAAC;QAC1D;AAAE,QAAA,MAAM;;QAER;IACF;uGArSW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;2FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACElC;;;;;;;;;;;;;;;;;;;;;;;AAuBG;SACa,oBAAoB,CAClC,SAA8B,EAAE,EAChC,GAAG,QAAgC,EAAA;AAEnC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,EAAE;QACpD,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,YAAY,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC;AACxC,KAAA,CAAC;AACJ;AAEA;;;;;;;;AAQG;SACa,oBAAoB,GAAA;IAClC,OAAO;AACL,QAAA,SAAS,EAAE;YACT,EAAE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;AACpE,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;gBACvC,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE;AAChE,aAAA;AACF,SAAA;KACF;AACH;;AC7EA;;;;;;;;;;;;;;AAcG;;ACdH;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-theme.mjs","sources":["../../../projects/angular/theme/src/lib/core/theme.tokens.ts","../../../projects/angular/theme/src/lib/core/theme.service.ts","../../../projects/angular/theme/src/lib/core/theme.provider.ts","../../../projects/angular/theme/public-api.ts","../../../projects/angular/theme/ojiepermana-angular-theme.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const MODES = ['light', 'dark'] as const;\n\nexport type ThemeMode = (typeof MODES)[number];\n\nexport const COLOR_SCHEMES = ['light', 'dark', 'system'] as const;\n\nexport type ColorScheme = (typeof COLOR_SCHEMES)[number];\n\nexport const COLORS = ['blue', 'red', 'green', 'purple', 'amber'] as const;\n\nexport type ThemeColor = (typeof COLORS)[number];\n\nexport const STYLES = ['default', 'sharp', 'brutal', 'soft'] as const;\n\nexport type ThemeStyle = (typeof STYLES)[number];\n\nexport const BRANDS = ['etos'] as const;\n\nexport type ThemeBrand = (typeof BRANDS)[number];\n\nexport interface ThemeConfig {\n  readonly mode: ThemeMode;\n  readonly brand: ThemeBrand | null;\n  readonly color: ThemeColor;\n  readonly style: ThemeStyle;\n}\n\nexport interface MaterialThemeConfig {\n  /** Initial mode preference. Supports `system` for first-visit OS detection. */\n  readonly mode?: ColorScheme;\n  /** Initial brand bundle. When set, it replaces the explicit color and style layers. */\n  readonly brand?: ThemeBrand | null;\n  /** Alias for `brand` to match the persisted `theme-brand` setting. */\n  readonly 'theme-brand'?: ThemeBrand | null;\n  /** Initial brand color layer. */\n  readonly color?: ThemeColor;\n  /** Initial style personality layer. */\n  readonly style?: ThemeStyle;\n  /** @deprecated Use `mode` instead. */\n  readonly defaultMode?: ColorScheme;\n  /** Default brand bundle. When set, it replaces the explicit color and style layers. */\n  readonly defaultBrand?: ThemeBrand | null;\n  /** @deprecated Use `color` instead. */\n  readonly defaultColor?: ThemeColor;\n  /** @deprecated Use `style` instead. */\n  readonly defaultStyle?: ThemeStyle;\n  /** @deprecated Use `defaultMode` instead. */\n  readonly defaultScheme?: ColorScheme;\n  /** @deprecated Use `defaultColor` instead. */\n  readonly defaultTheme?: ThemeColor | string;\n  /** @deprecated Use `modeStorageKey` instead. */\n  readonly storageKey?: string | null;\n  /** @deprecated Use `modeStorageKey` instead. */\n  readonly schemeStorageKey?: string | null;\n  /** @deprecated Use `colorStorageKey` instead. */\n  readonly themeStorageKey?: string | null;\n  /** localStorage key used to persist the mode preference. Set to `null` to disable persistence. */\n  readonly modeStorageKey?: string | null;\n  /** localStorage key used to persist the brand bundle. Set to `null` to disable persistence. */\n  readonly brandStorageKey?: string | null;\n  /** localStorage key used to persist the color layer. Set to `null` to disable persistence. */\n  readonly colorStorageKey?: string | null;\n  /** localStorage key used to persist the style layer. Set to `null` to disable persistence. */\n  readonly styleStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialThemeConfig {\n  readonly defaultMode: ColorScheme;\n  readonly defaultBrand: ThemeBrand | null;\n  readonly defaultColor: ThemeColor;\n  readonly defaultStyle: ThemeStyle;\n  readonly modeStorageKey: string | null;\n  readonly brandStorageKey: string | null;\n  readonly colorStorageKey: string | null;\n  readonly styleStorageKey: string | null;\n}\n\nexport const MATERIAL_THEME_CONFIG = new InjectionToken<MaterialThemeConfig>('MATERIAL_THEME_CONFIG');\n\nexport const DEFAULT_MATERIAL_THEME_CONFIG: ResolvedMaterialThemeConfig = {\n  defaultMode: 'light',\n  defaultBrand: null,\n  defaultColor: 'blue',\n  defaultStyle: 'default',\n  modeStorageKey: 'theme-mode',\n  brandStorageKey: 'theme-brand',\n  colorStorageKey: 'theme-color',\n  styleStorageKey: 'theme-style',\n};\n\nexport function isColorScheme(value: string | null | undefined): value is ColorScheme {\n  return COLOR_SCHEMES.some((scheme) => scheme === value);\n}\n\nexport function isThemeColor(value: string | null | undefined): value is ThemeColor {\n  return COLORS.some((color) => color === value);\n}\n\nexport function isThemeStyle(value: string | null | undefined): value is ThemeStyle {\n  return STYLES.some((style) => style === value);\n}\n\nexport function isThemeBrand(value: string | null | undefined): value is ThemeBrand {\n  return BRANDS.some((brand) => brand === value);\n}\n","import { DOCUMENT } from '@angular/common';\nimport { DestroyRef, Injectable, computed, effect, inject, signal } from '@angular/core';\nimport {\n  COLOR_SCHEMES,\n  DEFAULT_MATERIAL_THEME_CONFIG,\n  MATERIAL_THEME_CONFIG,\n  type ColorScheme,\n  type ResolvedMaterialThemeConfig,\n  type ThemeBrand,\n  type ThemeColor,\n  type ThemeConfig,\n  type ThemeMode,\n  type ThemeStyle,\n  isThemeBrand,\n  isColorScheme,\n  isThemeColor,\n  isThemeStyle,\n} from './theme.tokens';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly document = inject(DOCUMENT);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly config = this.resolveConfig();\n  private readonly initialBrand = this.readPersistedBrand() ?? this.config.defaultBrand;\n\n  private readonly _modePreference = signal<ColorScheme>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _brand = signal<ThemeBrand | null>(this.initialBrand);\n  private readonly _color = signal<ThemeColor>(\n    this.initialBrand ? this.config.defaultColor : (this.readPersistedColor() ?? this.config.defaultColor),\n  );\n  private readonly _style = signal<ThemeStyle>(\n    this.initialBrand ? this.config.defaultStyle : (this.readPersistedStyle() ?? this.config.defaultStyle),\n  );\n  private readonly _systemPrefersDark = signal<boolean>(this.prefersDark());\n\n  readonly scheme = this._modePreference.asReadonly();\n  readonly brand = this._brand.asReadonly();\n  readonly color = this._color.asReadonly();\n  readonly theme = this._color.asReadonly();\n  readonly style = this._style.asReadonly();\n  readonly mode = computed<ThemeMode>(() => this.resolveMode(this._modePreference()));\n  readonly snapshot = computed<ThemeConfig>(() => ({\n    mode: this.mode(),\n    brand: this._brand(),\n    color: this._color(),\n    style: this._style(),\n  }));\n\n  readonly isDark = computed(() => this.mode() === 'dark');\n\n  constructor() {\n    this.watchSystemScheme();\n\n    effect(() => {\n      const root = this.document.documentElement;\n      const mode = this.mode();\n      const brand = this._brand();\n      const color = this._color();\n      const style = this._style();\n\n      root.dataset['mode'] = mode;\n      root.dataset['theme'] = brand ?? color;\n      root.classList.toggle('dark', mode === 'dark');\n\n      this.persistMode(this._modePreference());\n\n      if (brand) {\n        root.setAttribute('theme-brand', brand);\n        root.removeAttribute('theme-color');\n        root.removeAttribute('theme-style');\n        delete root.dataset['color'];\n        delete root.dataset['style'];\n\n        this.persistBrand(brand);\n        this.clearPersistedColor();\n        this.clearPersistedStyle();\n        return;\n      }\n\n      root.removeAttribute('theme-brand');\n      root.setAttribute('theme-color', color);\n      root.setAttribute('theme-style', style);\n      root.dataset['color'] = color;\n      root.dataset['style'] = style;\n\n      this.clearPersistedBrand();\n      this.persistColor(color);\n      this.persistStyle(style);\n    });\n  }\n\n  setMode(mode: ThemeMode): void {\n    this._modePreference.set(mode);\n  }\n\n  setScheme(scheme: ColorScheme): void {\n    this._modePreference.set(scheme);\n  }\n\n  setBrand(brand: ThemeBrand | null): void {\n    this._brand.set(brand);\n    this._color.set(this.config.defaultColor);\n    this._style.set(this.config.defaultStyle);\n  }\n\n  setColor(color: ThemeColor): void {\n    if (this._brand()) {\n      this._brand.set(null);\n    }\n    this._color.set(color);\n  }\n\n  setTheme(theme: ThemeColor | string): void {\n    if (isThemeColor(theme)) {\n      this.setColor(theme);\n    }\n  }\n\n  setStyle(style: ThemeStyle): void {\n    if (this._brand()) {\n      this._brand.set(null);\n    }\n    this._style.set(style);\n  }\n\n  setAll(config: Partial<ThemeConfig> & { readonly scheme?: ColorScheme }): void {\n    if (config.scheme) {\n      this.setScheme(config.scheme);\n    }\n    if (config.mode) {\n      this.setMode(config.mode);\n    }\n    if (config.brand !== undefined) {\n      this.setBrand(config.brand);\n    }\n    if (config.brand === undefined || config.brand === null) {\n      if (config.color) {\n        this.setColor(config.color);\n      }\n      if (config.style) {\n        this.setStyle(config.style);\n      }\n    }\n  }\n\n  toggleScheme(): void {\n    this.toggleMode();\n  }\n\n  toggleMode(): void {\n    this.setMode(this.mode() === 'dark' ? 'light' : 'dark');\n  }\n\n  reset(): void {\n    this._modePreference.set(this.config.defaultMode);\n    this._brand.set(this.config.defaultBrand);\n    this._color.set(this.config.defaultColor);\n    this._style.set(this.config.defaultStyle);\n  }\n\n  private resolveConfig(): ResolvedMaterialThemeConfig {\n    const config = inject(MATERIAL_THEME_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode ?? config.defaultScheme;\n    const configuredBrand = config.brand ?? config['theme-brand'] ?? config.defaultBrand;\n    const configuredColor = config.color ?? config.defaultColor ?? config.defaultTheme;\n    const configuredStyle = config.style ?? config.defaultStyle;\n\n    const defaultMode = isColorScheme(configuredMode) ? configuredMode : DEFAULT_MATERIAL_THEME_CONFIG.defaultMode;\n    const defaultBrand = isThemeBrand(configuredBrand) ? configuredBrand : DEFAULT_MATERIAL_THEME_CONFIG.defaultBrand;\n    const defaultColor = isThemeColor(configuredColor) ? configuredColor : DEFAULT_MATERIAL_THEME_CONFIG.defaultColor;\n    const defaultStyle = isThemeStyle(configuredStyle) ? configuredStyle : DEFAULT_MATERIAL_THEME_CONFIG.defaultStyle;\n\n    return {\n      defaultMode,\n      defaultBrand,\n      defaultColor,\n      defaultStyle,\n      modeStorageKey:\n        config.modeStorageKey ??\n        config.schemeStorageKey ??\n        config.storageKey ??\n        DEFAULT_MATERIAL_THEME_CONFIG.modeStorageKey,\n      brandStorageKey: config.brandStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.brandStorageKey,\n      colorStorageKey:\n        config.colorStorageKey ?? config.themeStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.colorStorageKey,\n      styleStorageKey: config.styleStorageKey ?? DEFAULT_MATERIAL_THEME_CONFIG.styleStorageKey,\n    };\n  }\n\n  private resolveMode(mode: ColorScheme): ThemeMode {\n    return mode === 'system' ? (this._systemPrefersDark() ? 'dark' : 'light') : mode;\n  }\n\n  private prefersDark(): boolean {\n    const mql = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n    return !!mql?.matches;\n  }\n\n  private watchSystemScheme(): void {\n    const mql = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n    if (!mql) return;\n\n    const listener = (event: MediaQueryListEvent): void => {\n      this._systemPrefersDark.set(event.matches);\n    };\n    mql.addEventListener('change', listener);\n    this.destroyRef.onDestroy(() => mql.removeEventListener('change', listener));\n  }\n\n  private readPersistedMode(): ColorScheme | null {\n    const key = this.config.modeStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isColorScheme(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedBrand(): ThemeBrand | null {\n    const key = this.config.brandStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeBrand(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedColor(): ThemeColor | null {\n    const key = this.config.colorStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeColor(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedStyle(): ThemeStyle | null {\n    const key = this.config.styleStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isThemeStyle(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: ColorScheme): void {\n    const key = this.config.modeStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistBrand(brand: ThemeBrand): void {\n    const key = this.config.brandStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, brand);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistColor(color: ThemeColor): void {\n    const key = this.config.colorStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, color);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistStyle(style: ThemeStyle): void {\n    const key = this.config.styleStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, style);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private clearPersistedBrand(): void {\n    this.clearPersistedItem(this.config.brandStorageKey);\n  }\n\n  private clearPersistedColor(): void {\n    this.clearPersistedItem(this.config.colorStorageKey);\n  }\n\n  private clearPersistedStyle(): void {\n    this.clearPersistedItem(this.config.styleStorageKey);\n  }\n\n  private clearPersistedItem(key: string | null): void {\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.removeItem(key);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","import {\n  inject,\n  type EnvironmentProviders,\n  type Provider,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\nimport { ThemeService } from './theme.service';\nimport { MATERIAL_THEME_CONFIG, type MaterialThemeConfig } from './theme.tokens';\n\n/**\n * Opaque feature unit consumed by {@link provideMaterialTheme}. Mirrors\n * Angular's router/http feature pattern so add-ons can be composed without\n * widening the primary provider signature.\n */\nexport interface MaterialThemeFeature {\n  readonly providers: Provider[];\n}\n\n/**\n * Bootstrap the shared theme for any `@ojiepermana/angular/*` entry point.\n *\n * By default wires up the theme config token and eagerly initializes `ThemeService`\n * so root theme attributes are applied during bootstrap. Opt in\n * to Angular Material defaults (ripple / form-field) via\n * {@link withMaterialDefaults}.\n * Supports shorthand `mode`, `color`, and `style` config keys.\n *\n * @example\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideAnimations(),\n *     provideMaterialTheme(\n *       {\n *         mode: 'system',\n *         color: 'blue',\n *         style: 'soft',\n *       },\n *       withMaterialDefaults(),\n *     ),\n *   ],\n * };\n */\nexport function provideMaterialTheme(\n  config: MaterialThemeConfig = {},\n  ...features: MaterialThemeFeature[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_THEME_CONFIG, useValue: config },\n    provideEnvironmentInitializer(() => {\n      inject(ThemeService);\n    }),\n    ...features.flatMap((f) => f.providers),\n  ]);\n}\n\n/**\n * Opt-in Angular Material defaults tuned for the shared theme layer:\n *\n * - Disables the global Material ripple.\n * - Forces `appearance: 'outline'` + `subscriptSizing: 'dynamic'` on every\n *   `mat-form-field`.\n *\n * Only apply when your app actually renders Angular Material components.\n */\nexport function withMaterialDefaults(): MaterialThemeFeature {\n  return {\n    providers: [\n      { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },\n      {\n        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n        useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },\n      },\n    ],\n  };\n}\n","/*\n * Public API Surface of @ojiepermana/angular/theme\n *\n * The single source of truth for 3-layer design tokens, CSS variables,\n * and the `ThemeService` shared by every `@ojiepermana/angular/*` subpath\n * (shadcn, layout, navigation, ...).\n *\n * Usage:\n *   // app.config.ts\n *   import { provideMaterialTheme } from '@ojiepermana/angular/theme';\n *\n *   // styles.css\n *   @import '@ojiepermana/angular/theme/styles';\n *   @import 'tailwindcss';\n */\n\nexport * from './src/lib/core/theme.tokens';\nexport * from './src/lib/core/theme.service';\nexport * from './src/lib/core/theme.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "21.1.11",
+  "version": "21.1.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ojiepermana/angular.git"

package/theme/styles/themes/taildwind.css

@@ -15,10 +15,13 @@
 @custom-variant dark (&:where([data-mode='dark'], [data-mode='dark'] *, .dark, .dark *));
 
 @theme inline {
+  --color-brand: hsl(var(--brand) / 0.7);
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
   --color-background: hsl(var(--background));
+  --color-surface: hsl(var(--surface, var(--muted)));
+  --color-surface-foreground: hsl(var(--surface-foreground, var(--foreground)));
   --color-foreground: hsl(var(--foreground));
 
   --color-primary: hsl(var(--primary));

package/types/ojiepermana-angular-brand-etos.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { EnvironmentProviders } from '@angular/core';
+import { EnvironmentProviders, TemplateRef } from '@angular/core';
 import { MaterialLayoutConfig, LayoutMode, LayoutWidth } from '@ojiepermana/angular/layout';
-import { NavigationItem, TopbarAppearance, SidebarAppearance, SidebarPosition } from '@ojiepermana/angular/navigation';
+import { NavigationItem } from '@ojiepermana/angular/navigation';
 import { MaterialThemeConfig, MaterialThemeFeature, ColorScheme } from '@ojiepermana/angular/theme';
 import { PopoverSide, PopoverAlign } from '@ojiepermana/angular/component';
 
@@ -12,7 +12,7 @@ declare const ETOS_THEME_CONFIG: {
 };
 declare const ETOS_LAYOUT_CONFIG: {
     mode: "vertical";
-    width: "fixed";
+    width: "container";
 };
 
 interface EtosBrandOptions {
@@ -58,13 +58,14 @@ declare class EtosThemeSwitcherComponent {
     readonly quickActions: _angular_core.InputSignal<readonly EtosThemeSwitcherQuickAction[]>;
     readonly notificationShortcut: _angular_core.InputSignal<EtosThemeSwitcherNotificationShortcut | null>;
     readonly showNotificationShortcut: _angular_core.InputSignal<boolean>;
-    readonly popoverSide: _angular_core.InputSignal<PopoverSide>;
-    readonly popoverAlign: _angular_core.InputSignal<PopoverAlign>;
+    readonly popoverSide: _angular_core.InputSignal<PopoverSide | null>;
+    readonly popoverAlign: _angular_core.InputSignal<PopoverAlign | null>;
+    readonly popoverSideOffset: _angular_core.InputSignal<number | null>;
     readonly actionSelected: _angular_core.OutputEmitterRef<string>;
     protected readonly themeMode: _angular_core.Signal<"light" | "dark">;
     protected readonly themeScheme: _angular_core.Signal<"light" | "dark" | "system">;
-    protected readonly layoutMode: _angular_core.Signal<"vertical" | "horizontal">;
-    protected readonly layoutWidth: _angular_core.Signal<"fixed" | "full">;
+    protected readonly layoutMode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    protected readonly layoutWidth: _angular_core.Signal<"container" | "full" | "wide">;
     protected readonly themeSchemeOptions: readonly [{
         readonly value: "light";
         readonly label: "Light";
@@ -86,19 +87,30 @@ declare class EtosThemeSwitcherComponent {
         readonly value: "vertical";
         readonly label: "Vertical";
         readonly icon: "view_sidebar";
+    }, {
+        readonly value: "empty";
+        readonly label: "Empty";
+        readonly icon: "crop_square";
     }];
     protected readonly layoutWidthOptions: readonly [{
         readonly value: "full";
         readonly label: "Full";
         readonly icon: "fit_screen";
     }, {
-        readonly value: "fixed";
-        readonly label: "Fixed";
+        readonly value: "container";
+        readonly label: "Container";
         readonly icon: "center_focus_strong";
+    }, {
+        readonly value: "wide";
+        readonly label: "Wide";
+        readonly icon: "width_wide";
     }];
     protected readonly notificationShortcutConfig: _angular_core.Signal<Required<EtosThemeSwitcherNotificationShortcut> | null>;
     protected readonly actionOptions: _angular_core.Signal<readonly EtosThemeSwitcherQuickAction[]>;
     protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly resolvedPopoverSide: _angular_core.Signal<PopoverSide>;
+    protected readonly resolvedPopoverAlign: _angular_core.Signal<PopoverAlign>;
+    protected readonly resolvedPopoverSideOffset: _angular_core.Signal<number>;
     protected readonly resolvedUserName: _angular_core.Signal<string>;
     protected readonly resolvedUserSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedAvatarSrc: _angular_core.Signal<string | null>;
@@ -125,57 +137,22 @@ declare class EtosThemeSwitcherComponent {
     private labelForLayoutWidth;
     private toInitials;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosThemeSwitcherComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosThemeSwitcherComponent, "etos-theme-switcher", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "userInfo": { "alias": "userInfo"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "quickActions": { "alias": "quickActions"; "required": true; "isSignal": true; }; "notificationShortcut": { "alias": "notificationShortcut"; "required": false; "isSignal": true; }; "showNotificationShortcut": { "alias": "showNotificationShortcut"; "required": false; "isSignal": true; }; "popoverSide": { "alias": "popoverSide"; "required": false; "isSignal": true; }; "popoverAlign": { "alias": "popoverAlign"; "required": false; "isSignal": true; }; }, { "actionSelected": "actionSelected"; }, never, never, true, never>;
-}
-
-declare class EtosEmptyLayoutComponent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosEmptyLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosEmptyLayoutComponent, "etos-empty-layout", never, {}, {}, never, never, true, never>;
-}
-
-declare class EtosHorizontalLayoutComponent {
-    private readonly layout;
-    readonly topbarAppearance: _angular_core.InputSignal<TopbarAppearance>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly brandLayout = "etos-horizontal";
-    protected readonly layoutWidth: _angular_core.Signal<"fixed" | "full">;
-    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
-    protected readonly hostClasses: _angular_core.Signal<string>;
-    protected readonly frameClasses: _angular_core.Signal<string>;
-    protected readonly mainClasses: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosHorizontalLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosHorizontalLayoutComponent, "etos-horizontal-layout", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosThemeSwitcherComponent, "etos-theme-switcher", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "userInfo": { "alias": "userInfo"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "quickActions": { "alias": "quickActions"; "required": true; "isSignal": true; }; "notificationShortcut": { "alias": "notificationShortcut"; "required": false; "isSignal": true; }; "showNotificationShortcut": { "alias": "showNotificationShortcut"; "required": false; "isSignal": true; }; "popoverSide": { "alias": "popoverSide"; "required": false; "isSignal": true; }; "popoverAlign": { "alias": "popoverAlign"; "required": false; "isSignal": true; }; "popoverSideOffset": { "alias": "popoverSideOffset"; "required": false; "isSignal": true; }; }, { "actionSelected": "actionSelected"; }, never, never, true, never>;
 }
 
 declare class EtosLayoutComponent {
+    readonly mode: _angular_core.InputSignal<"vertical" | "horizontal" | "empty" | null>;
+    readonly sidebarHeaderTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly sidebarFooterTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly layoutBrandTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly layoutProfileTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     private readonly layout;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly layoutMode: _angular_core.Signal<"vertical" | "horizontal">;
+    protected readonly resolvedMode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosLayoutComponent, "etos-layout", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
-}
-
-declare class EtosVerticalLayoutComponent {
-    private readonly layout;
-    readonly sidebarAppearance: _angular_core.InputSignal<SidebarAppearance>;
-    readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly brandLayout = "etos-vertical";
-    protected readonly layoutWidth: _angular_core.Signal<"fixed" | "full">;
-    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
-    protected readonly hostClasses: _angular_core.Signal<string>;
-    protected readonly frameClasses: _angular_core.Signal<string>;
-    protected readonly mainClasses: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosVerticalLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosVerticalLayoutComponent, "etos-vertical-layout", never, { "sidebarAppearance": { "alias": "sidebarAppearance"; "required": false; "isSignal": true; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start],[ui-sidebar-header]", "[ui-layout-profile],[ui-topbar-end],[ui-sidebar-footer]"], true, never>;
-}
-
-declare class EtosAppShellComponent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosAppShellComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosAppShellComponent, "etos-app-shell", never, {}, {}, never, ["[etos-app-shell-header]", "[etos-app-shell-main]", "[etos-app-shell-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosLayoutComponent, "etos-layout", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidebarHeaderTemplate": { "alias": "sidebarHeaderTemplate"; "required": false; "isSignal": true; }; "sidebarFooterTemplate": { "alias": "sidebarFooterTemplate"; "required": false; "isSignal": true; }; "layoutBrandTemplate": { "alias": "layoutBrandTemplate"; "required": false; "isSignal": true; }; "layoutProfileTemplate": { "alias": "layoutProfileTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare const ETOS_BRAND_VERSION = "0.0.1";
 
-export { ETOS_BRAND_NAME, ETOS_BRAND_VERSION, ETOS_LAYOUT_CONFIG, ETOS_THEME_CONFIG, EtosAppShellComponent, EtosEmptyLayoutComponent, EtosHorizontalLayoutComponent, EtosLayoutComponent, EtosThemeSwitcherComponent, EtosVerticalLayoutComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
+export { ETOS_BRAND_NAME, ETOS_BRAND_VERSION, ETOS_LAYOUT_CONFIG, ETOS_THEME_CONFIG, EtosLayoutComponent, EtosThemeSwitcherComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
 export type { EtosBrandOptions, EtosThemeSwitcherAction, EtosThemeSwitcherNotificationShortcut, EtosThemeSwitcherQuickAction, EtosThemeSwitcherUserInfo };

package/types/ojiepermana-angular-component.d.ts

@@ -786,6 +786,7 @@ declare class PopoverTriggerDirective {
     readonly uiPopoverTrigger: _angular_core.InputSignal<PopoverContentDirective>;
     readonly side: _angular_core.InputSignal<PopoverSide>;
     readonly align: _angular_core.InputSignal<PopoverAlign>;
+    readonly sideOffset: _angular_core.InputSignal<number>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
     private overlayRef;
@@ -795,7 +796,7 @@ declare class PopoverTriggerDirective {
     close(): void;
     private oppositeSide;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[uiPopoverTrigger]", ["uiPopoverTrigger"], { "uiPopoverTrigger": { "alias": "uiPopoverTrigger"; "required": true; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[uiPopoverTrigger]", ["uiPopoverTrigger"], { "uiPopoverTrigger": { "alias": "uiPopoverTrigger"; "required": true; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, never, true, never>;
 }
 
 declare class ProgressComponent {

package/types/ojiepermana-angular-layout.d.ts

@@ -23,10 +23,11 @@ declare class VerticalLayoutComponent {
     readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
     readonly sidebarMode: _angular_core.InputSignal<SidebarMode>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "container" | "wide">;
     protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
     protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
-    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly frameClasses: _angular_core.Signal<string>;
     protected readonly mainClasses: _angular_core.Signal<string>;
@@ -53,15 +54,17 @@ declare class HorizontalLayoutComponent {
     private readonly theme;
     readonly topbarAppearance: _angular_core.InputSignal<TopbarAppearance>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "container" | "wide">;
     protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
     protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
     protected readonly dividerBorderWidth: _angular_core.Signal<string>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly frameClasses: _angular_core.Signal<string>;
     protected readonly mainClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[topbar-start]", "[ui-layout-profile],[topbar-end]"], true, never>;
 }
 
 /**
@@ -83,15 +86,18 @@ declare class EmptyLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
 }
 
-declare const LAYOUT_MODES: readonly ["vertical", "horizontal"];
+declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
 type LayoutMode = (typeof LAYOUT_MODES)[number];
-declare const LAYOUT_WIDTHS: readonly ["full", "fixed"];
+declare const LAYOUT_WIDTHS: readonly ["full", "container", "wide"];
 type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
+/** @deprecated Use `container` instead. */
+type LegacyLayoutWidth = 'fixed';
+type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;
 interface MaterialLayoutConfig {
     /** Initial layout mode. */
     readonly mode?: LayoutMode;
     /** Initial layout width. */
-    readonly width?: LayoutWidth;
+    readonly width?: ConfiguredLayoutWidth;
     /** @deprecated Use `mode` instead. */
     /** Initial layout mode. Defaults to `vertical`. */
     readonly defaultMode?: LayoutMode;
@@ -110,14 +116,15 @@ declare const MATERIAL_LAYOUT_CONFIG: InjectionToken<MaterialLayoutConfig>;
 declare const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig;
 declare function isLayoutMode(value: string | null | undefined): value is LayoutMode;
 declare function isLayoutWidth(value: string | null | undefined): value is LayoutWidth;
+declare function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null;
 
 declare class LayoutService {
     private readonly document;
     private readonly config;
     private readonly _mode;
     private readonly _width;
-    readonly mode: _angular_core.Signal<"vertical" | "horizontal">;
-    readonly width: _angular_core.Signal<"full" | "fixed">;
+    readonly mode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    readonly width: _angular_core.Signal<"full" | "container" | "wide">;
     constructor();
     setMode(mode: LayoutMode): void;
     toggleMode(): void;
@@ -136,5 +143,5 @@ declare function provideMaterialLayout(config?: MaterialLayoutConfig): Environme
 
 declare const LAYOUT_VERSION = "0.0.1";
 
-export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, provideMaterialLayout };
-export type { LayoutMode, LayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, normalizeLayoutWidth, provideMaterialLayout };
+export type { ConfiguredLayoutWidth, LayoutMode, LayoutWidth, LegacyLayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };

package/types/ojiepermana-angular-navigation.d.ts

@@ -131,22 +131,29 @@ declare const DEFAULT_NAVIGATION_ID = "main";
  * Signal-based global state untuk navigation (sidebar/topbar).
  *
  * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
- * Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
+ * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
  */
 declare class NavigationService {
+    private readonly doc;
     private readonly router;
     private readonly destroyRef;
+    private readonly persistedSidebarCollapsed;
     /** Internal version counter — incremented on every registry mutation. */
     private readonly _version;
     /** Internal map of registered navigation trees. */
     private readonly _registry;
+    private readonly _collapsed;
+    private readonly _hasStoredSidebarCollapse;
     /**
      * Backward-compatible accessor — returns items for the default (`'main'`) key.
      * Prefer `getItems(id)` when working with named registries.
      */
     readonly items: _angular_core.Signal<readonly NavigationItem[]>;
+    /** Sidebar appearance preference (`default` or `thin`). */
+    readonly sidebarAppearance: _angular_core.Signal<SidebarAppearance>;
+    readonly hasStoredSidebarCollapse: _angular_core.Signal<boolean>;
     /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
-    readonly collapsed: _angular_core.WritableSignal<boolean>;
+    readonly collapsed: _angular_core.Signal<boolean>;
     /** Sheet drawer terbuka di mobile. */
     readonly mobileOpen: _angular_core.WritableSignal<boolean>;
     /** Set id grup / collapsable yang sedang terbuka. */
@@ -172,6 +179,8 @@ declare class NavigationService {
      * Reactive terhadap perubahan registry.
      */
     getItems(id: string): () => readonly NavigationItem[];
+    setSidebarAppearance(value: SidebarAppearance): void;
+    toggleSidebarAppearance(currentAppearance?: SidebarAppearance): void;
     /** Toggle sidebar collapsed (default ↔ thin). */
     toggleCollapsed(): void;
     setCollapsed(value: boolean): void;
@@ -183,6 +192,8 @@ declare class NavigationService {
     setGroupOpen(id: string, open: boolean): void;
     /** Apakah id termasuk dalam active trail saat ini. */
     isActive(id: string | undefined): boolean;
+    private readPersistedSidebarCollapsed;
+    private persistSidebarCollapsed;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
 }
@@ -284,6 +295,7 @@ declare class SidebarComponent {
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
     private readonly hovered;
+    private readonly suppressHoverUntilLeave;
     private readonly drawerTpl;
     private drawerRef;
     private focusTrap;
@@ -291,27 +303,33 @@ declare class SidebarComponent {
     /** True saat viewport `< md` (767.98px). */
     protected readonly isMobileMedia: _angular_core.Signal<boolean>;
     protected readonly isMobile: _angular_core.Signal<boolean>;
+    protected readonly resolvedCollapsed: _angular_core.Signal<boolean>;
+    protected readonly resolvedAppearance: _angular_core.Signal<SidebarAppearance>;
+    protected readonly hoverActive: _angular_core.Signal<boolean>;
     protected readonly isExpanded: _angular_core.Signal<boolean>;
     protected readonly isCompact: _angular_core.Signal<boolean>;
+    protected readonly toggleButtonLabel: _angular_core.Signal<"Expand sidebar" | "Collapse sidebar">;
     constructor();
     protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly headerSlotClasses: _angular_core.Signal<string>;
+    protected readonly navClasses: _angular_core.Signal<string>;
+    protected readonly footerClasses: _angular_core.Signal<string>;
+    protected readonly footerSlotClasses: _angular_core.Signal<string>;
     protected readonly innerClasses: _angular_core.Signal<string>;
     protected onHoverEnter(): void;
     protected onHoverLeave(): void;
+    protected toggleAppearance(event: MouseEvent): void;
     /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
     protected onHostClick(event: MouseEvent): void;
     private openDrawer;
     private closeDrawer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "ui-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-sidebar-header]", "[ui-sidebar-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
 }
 
 /**
  * Horizontal navigation (topbar) — shadcn-styled.
- *
- * Variants:
- * - `default`: horizontal list; item `collapsable` buka dropdown
- * - `megamenu`: item `mega` buka panel full-width multi-kolom
  */
 declare class TopbarComponent {
     protected readonly nav: NavigationService;
@@ -330,35 +348,30 @@ declare class TopbarComponent {
     /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
     readonly showHamburger: _angular_core.InputSignal<boolean>;
     readonly hamburgerLabel: _angular_core.InputSignal<string>;
-    protected readonly topbarHeight = "var(--layout-topbar-height)";
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
     protected readonly openId: _angular_core.WritableSignal<string | null>;
     private active;
     private readonly dropdownTpl;
-    private readonly megaTpl;
     constructor();
     protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly endSlotClasses: _angular_core.Signal<string>;
     protected asBasic(i: NavigationItem): NavigationBasicItem;
     protected asCollapsable(i: NavigationItem): NavigationCollapsableItem;
     protected asGroup(i: NavigationItem): NavigationGroupItem;
-    protected asMega(i: NavigationItem): NavigationMegaItem;
     protected isItemActive(id: string | undefined): boolean;
-    protected megaGridClasses(columns?: number): string;
     protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void;
     protected openDropdown(trigger: HTMLElement, item: NavigationItem): void;
-    protected toggleMega(trigger: HTMLElement, item: NavigationItem): void;
-    protected openMega(trigger: HTMLElement, item: NavigationItem): void;
     private attach;
     protected closeAll(): void;
     /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
     protected onMenubarKeydown(event: KeyboardEvent): void;
-    /** Arrow-key navigation dalam dropdown/mega panel. */
+    /** Arrow-key navigation dalam dropdown panel. */
     protected onPanelKeydown(event: KeyboardEvent): void;
     private collectPanelFocusables;
     private focusFirstInPanel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TopbarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "ui-topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-topbar-start]", "[ui-topbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[topbar-start]", "[topbar-end]"], true, never>;
 }
 
 declare const DemoNavigationData: NavigationItem[];