@frame-ui-ng/foundation 0.1.0-beta.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 FrameUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+# Foundation
+
+`@frame-ui-ng/foundation` is the stable base layer for FrameUI.
+
+Documentation: https://frame-ui.com
+
+Current scope:
+
+- CSS-variable token contract
+- Angular theme switching via `data-theme` or a shared `.dark` class
+- class merge helpers for future slot-based primitives
+- Vitest unit tests
+
+No primitives or complex components are included here.
+
+## Token Contract
+
+The foundation token contract is intentionally semantic and small.
+
+### Color tokens
+
+- `--frame-background`: app/page background
+- `--frame-foreground`: default readable text on `background`
+- `--frame-surface`: raised or contained surfaces such as cards, panels, menus
+- `--frame-surface-foreground`: readable text on `surface`
+- `--frame-muted`: low-emphasis surfaces and fills
+- `--frame-muted-foreground`: low-emphasis text
+- `--frame-primary`: primary emphasis, usually the main action color
+- `--frame-primary-foreground`: readable text on `primary`
+- `--frame-accent`: secondary emphasis or selection highlight
+- `--frame-accent-foreground`: readable text on `accent`
+- `--frame-border`: default border color
+- `--frame-input`: input field chrome
+- `--frame-ring`: focus ring color
+
+### Shape tokens
+
+- `--frame-radius-sm`
+- `--frame-radius-md`
+- `--frame-radius-lg`
+
+### Elevation tokens
+
+- `--frame-shadow-sm`
+- `--frame-shadow-md`
+
+## Contract Rules
+
+- Tokens must describe purpose, not implementation.
+- Components should consume semantic tokens, never hardcoded theme colors.
+- New tokens should be added only when multiple primitives need the same concept.
+- Component-specific tokens should not be added to the foundation layer yet.
+
+Good:
+
+```css
+color: var(--frame-foreground);
+border-color: var(--frame-border);
+```
+
+Bad:
+
+```css
+color: #111827;
+border-color: #e5e7eb;
+```
+
+Good token naming:
+
+```css
+--frame-primary
+--frame-surface
+```
+
+Bad token naming:
+
+```css
+--frame-blue-500
+--frame-card-border-hover
+```
+
+## Light And Dark
+
+The foundation layer only models `light` and `dark`.
+
+Brand, product, or campaign differences should be handled by the host app's tokens or by scoped CSS-variable overrides. They should not become additional registered theme names.
+
+## Theme Ownership
+
+The foundation layer should expose a token contract, not force itself to be the only dark mode owner.
+
+There are two recommended ownership models:
+
+- library-managed: the FrameUI writes the active theme to the root element
+- externally managed: another system such as Tailwind owns the root selector and the FrameUI follows it
+
+### Library-managed with `data-theme`
+
+This is the current default:
+
+```ts
+provideFrameUI({
+  defaultTheme: 'light',
+});
+```
+
+### Library-managed with Tailwind's `.dark` class
+
+If you want the FrameUI service to be the single source of truth, but Tailwind utilities should respond too, switch to class strategy:
+
+```ts
+provideFrameUI({
+  strategy: 'class',
+  className: 'dark',
+});
+```
+
+`ThemeService.setTheme('dark')` now adds `.dark` to the root element, so both the FrameUI tokens and Tailwind `dark:` utilities react to the same switch.
+
+### Externally managed by Tailwind or another app shell
+
+If the host app already owns dark mode, let the FrameUI observe instead of write:
+
+```ts
+provideFrameUI({
+  strategy: 'class',
+  mode: 'observe',
+  className: 'dark',
+});
+```
+
+In this mode the library does not write to the DOM. It reads the current root class and keeps `ThemeService.theme()` in sync with that external source of truth.
+
+Use scoped overrides for local brand moments:
+
+```css
+.marketing-hero {
+  --frame-primary: oklch(0.69 0.19 38);
+  --frame-primary-foreground: oklch(0.99 0.01 95);
+  --frame-radius-lg: 1rem;
+}
+```
+
+## Commands
+
+```bash
+npm install @frame-ui-ng/foundation
+```

package/fesm2022/frame-ui-ng-foundation.mjs

@@ -0,0 +1,155 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, signal, computed, Injectable } from '@angular/core';
+
+function cx(...values) {
+    const classNames = [];
+    for (const value of values) {
+        if (!value) {
+            continue;
+        }
+        if (typeof value === 'string') {
+            classNames.push(value);
+            continue;
+        }
+        if (Array.isArray(value)) {
+            const nested = cx(...value);
+            if (nested) {
+                classNames.push(nested);
+            }
+            continue;
+        }
+        for (const [className, enabled] of Object.entries(value)) {
+            if (enabled) {
+                classNames.push(className);
+            }
+        }
+    }
+    return classNames.join(' ');
+}
+function withClassOverrides(slots, overrides) {
+    const mergedSlots = {};
+    for (const slot of Object.keys(slots)) {
+        mergedSlots[slot] = cx(slots[slot], overrides?.[slot]);
+    }
+    return mergedSlots;
+}
+
+const DEFAULT_CONFIG = {
+    attribute: 'data-theme',
+    className: 'dark',
+    defaultTheme: 'light',
+    mode: 'managed',
+    strategy: 'attribute',
+};
+const FRAME_UI_CONFIG = new InjectionToken('FRAME_UI_CONFIG', {
+    factory: () => DEFAULT_CONFIG,
+});
+function provideFrameUI(options = {}) {
+    return makeEnvironmentProviders([
+        {
+            provide: FRAME_UI_CONFIG,
+            useValue: createFrameUIConfig(options),
+        },
+        ThemeService,
+    ]);
+}
+function createFrameUIConfig(options = {}) {
+    const defaultTheme = options.defaultTheme ?? DEFAULT_CONFIG.defaultTheme;
+    return {
+        attribute: options.attribute ?? DEFAULT_CONFIG.attribute,
+        className: options.className ?? DEFAULT_CONFIG.className,
+        defaultTheme,
+        mode: options.mode ?? DEFAULT_CONFIG.mode,
+        strategy: options.strategy ?? DEFAULT_CONFIG.strategy,
+    };
+}
+class ThemeService {
+    document = inject(DOCUMENT);
+    config = inject(FRAME_UI_CONFIG);
+    activeTheme = signal(this.config.defaultTheme, ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
+    observer = null;
+    theme = this.activeTheme.asReadonly();
+    isDark = computed(() => this.activeTheme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.config.mode === 'observe') {
+            this.syncFromDom();
+            this.observeThemeChanges();
+            return;
+        }
+        this.applyTheme(this.activeTheme());
+    }
+    setTheme(name) {
+        if (!isFrameUITheme(name)) {
+            throw new Error(`Unknown theme "${name}".`);
+        }
+        if (this.config.mode === 'observe') {
+            throw new Error('ThemeService is configured to observe external theme state and cannot set the theme.');
+        }
+        this.activeTheme.set(name);
+        this.applyTheme(name);
+    }
+    toggleTheme() {
+        const nextTheme = this.activeTheme() === 'dark' ? 'light' : 'dark';
+        this.setTheme(nextTheme);
+        return nextTheme;
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    applyTheme(name) {
+        const root = this.document?.documentElement;
+        if (!root) {
+            return;
+        }
+        if (this.config.strategy === 'class') {
+            root.classList.toggle(this.config.className, name === 'dark');
+            return;
+        }
+        root.setAttribute(this.config.attribute, name);
+    }
+    observeThemeChanges() {
+        const root = this.document?.documentElement;
+        if (!root || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        const attributeFilter = this.config.strategy === 'class' ? ['class'] : [this.config.attribute];
+        this.observer = new MutationObserver(() => {
+            this.syncFromDom();
+        });
+        this.observer.observe(root, {
+            attributeFilter,
+            attributes: true,
+        });
+    }
+    syncFromDom() {
+        const root = this.document?.documentElement;
+        if (!root) {
+            return;
+        }
+        this.activeTheme.set(this.readThemeFromDom(root));
+    }
+    readThemeFromDom(root) {
+        if (this.config.strategy === 'class') {
+            return root.classList.contains(this.config.className) ? 'dark' : 'light';
+        }
+        const theme = root.getAttribute(this.config.attribute);
+        return isFrameUITheme(theme) ? theme : this.config.defaultTheme;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ThemeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+function isFrameUITheme(value) {
+    return value === 'light' || value === 'dark';
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FRAME_UI_CONFIG, ThemeService, createFrameUIConfig, cx, provideFrameUI, withClassOverrides };
+//# sourceMappingURL=frame-ui-ng-foundation.mjs.map

package/fesm2022/frame-ui-ng-foundation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-ui-ng-foundation.mjs","sources":["../../../projects/foundation/src/lib/class-names.ts","../../../projects/foundation/src/lib/frame-ui.ts","../../../projects/foundation/src/frame-ui-ng-foundation.ts"],"sourcesContent":["export type ClassDictionary = Readonly<Record<string, boolean | null | undefined>>;\nexport type ClassValue =\n  | ClassDictionary\n  | ClassValue[]\n  | false\n  | null\n  | string\n  | undefined;\n\nexport type SlotClasses<TSlot extends string> = Readonly<Record<TSlot, string>>;\nexport type SlotClassOverrides<TSlot extends string> = Partial<Record<TSlot, ClassValue>>;\n\nexport function cx(...values: readonly ClassValue[]): string {\n  const classNames: string[] = [];\n\n  for (const value of values) {\n    if (!value) {\n      continue;\n    }\n\n    if (typeof value === 'string') {\n      classNames.push(value);\n      continue;\n    }\n\n    if (Array.isArray(value)) {\n      const nested = cx(...value);\n\n      if (nested) {\n        classNames.push(nested);\n      }\n\n      continue;\n    }\n\n    for (const [className, enabled] of Object.entries(value)) {\n      if (enabled) {\n        classNames.push(className);\n      }\n    }\n  }\n\n  return classNames.join(' ');\n}\n\nexport function withClassOverrides<TSlot extends string>(\n  slots: SlotClasses<TSlot>,\n  overrides?: SlotClassOverrides<TSlot>,\n): Record<TSlot, string> {\n  const mergedSlots = {} as Record<TSlot, string>;\n\n  for (const slot of Object.keys(slots) as TSlot[]) {\n    mergedSlots[slot] = cx(slots[slot], overrides?.[slot]);\n  }\n\n  return mergedSlots;\n}\n","import { DOCUMENT } from '@angular/common';\nimport {\n  EnvironmentProviders,\n  Injectable,\n  InjectionToken,\n  OnDestroy,\n  Signal,\n  computed,\n  inject,\n  makeEnvironmentProviders,\n  signal,\n} from '@angular/core';\n\nexport type ThemeBindingStrategy = 'attribute' | 'class';\nexport type ThemeSyncMode = 'managed' | 'observe';\nexport type FrameUITheme = 'light' | 'dark';\n\nexport interface FrameUIConfig {\n  attribute: string;\n  className: string;\n  defaultTheme: FrameUITheme;\n  mode: ThemeSyncMode;\n  strategy: ThemeBindingStrategy;\n}\n\nconst DEFAULT_CONFIG: FrameUIConfig = {\n  attribute: 'data-theme',\n  className: 'dark',\n  defaultTheme: 'light',\n  mode: 'managed',\n  strategy: 'attribute',\n};\n\nexport const FRAME_UI_CONFIG = new InjectionToken<FrameUIConfig>(\n  'FRAME_UI_CONFIG',\n  {\n    factory: () => DEFAULT_CONFIG,\n  },\n);\n\nexport interface FrameUIOptions {\n  attribute?: string;\n  className?: string;\n  defaultTheme?: FrameUITheme;\n  mode?: ThemeSyncMode;\n  strategy?: ThemeBindingStrategy;\n}\n\nexport function provideFrameUI(\n  options: FrameUIOptions = {},\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: FRAME_UI_CONFIG,\n      useValue: createFrameUIConfig(options),\n    },\n    ThemeService,\n  ]);\n}\n\nexport function createFrameUIConfig(\n  options: FrameUIOptions = {},\n): FrameUIConfig {\n  const defaultTheme = options.defaultTheme ?? DEFAULT_CONFIG.defaultTheme;\n\n  return {\n    attribute: options.attribute ?? DEFAULT_CONFIG.attribute,\n    className: options.className ?? DEFAULT_CONFIG.className,\n    defaultTheme,\n    mode: options.mode ?? DEFAULT_CONFIG.mode,\n    strategy: options.strategy ?? DEFAULT_CONFIG.strategy,\n  };\n}\n\n@Injectable()\nexport class ThemeService implements OnDestroy {\n  private readonly document = inject(DOCUMENT);\n  private readonly config = inject(FRAME_UI_CONFIG);\n  private readonly activeTheme = signal(this.config.defaultTheme);\n  private observer: MutationObserver | null = null;\n\n  readonly theme: Signal<FrameUITheme> = this.activeTheme.asReadonly();\n\n  readonly isDark = computed(() => this.activeTheme() === 'dark');\n\n  constructor() {\n    if (this.config.mode === 'observe') {\n      this.syncFromDom();\n      this.observeThemeChanges();\n      return;\n    }\n\n    this.applyTheme(this.activeTheme());\n  }\n\n  setTheme(name: FrameUITheme): void {\n    if (!isFrameUITheme(name)) {\n      throw new Error(`Unknown theme \"${name}\".`);\n    }\n\n    if (this.config.mode === 'observe') {\n      throw new Error(\n        'ThemeService is configured to observe external theme state and cannot set the theme.',\n      );\n    }\n\n    this.activeTheme.set(name);\n    this.applyTheme(name);\n  }\n\n  toggleTheme(): FrameUITheme {\n    const nextTheme = this.activeTheme() === 'dark' ? 'light' : 'dark';\n\n    this.setTheme(nextTheme);\n\n    return nextTheme;\n  }\n\n  ngOnDestroy(): void {\n    this.observer?.disconnect();\n    this.observer = null;\n  }\n\n  private applyTheme(name: FrameUITheme): void {\n    const root = this.document?.documentElement;\n\n    if (!root) {\n      return;\n    }\n\n    if (this.config.strategy === 'class') {\n      root.classList.toggle(this.config.className, name === 'dark');\n      return;\n    }\n\n    root.setAttribute(this.config.attribute, name);\n  }\n\n  private observeThemeChanges(): void {\n    const root = this.document?.documentElement;\n\n    if (!root || typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const attributeFilter =\n      this.config.strategy === 'class' ? ['class'] : [this.config.attribute];\n\n    this.observer = new MutationObserver(() => {\n      this.syncFromDom();\n    });\n    this.observer.observe(root, {\n      attributeFilter,\n      attributes: true,\n    });\n  }\n\n  private syncFromDom(): void {\n    const root = this.document?.documentElement;\n\n    if (!root) {\n      return;\n    }\n\n    this.activeTheme.set(this.readThemeFromDom(root));\n  }\n\n  private readThemeFromDom(root: HTMLElement): FrameUITheme {\n    if (this.config.strategy === 'class') {\n      return root.classList.contains(this.config.className) ? 'dark' : 'light';\n    }\n\n    const theme = root.getAttribute(this.config.attribute);\n\n    return isFrameUITheme(theme) ? theme : this.config.defaultTheme;\n  }\n}\n\nfunction isFrameUITheme(value: unknown): value is FrameUITheme {\n  return value === 'light' || value === 'dark';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@frame-ui-ng/foundation",
+  "version": "0.1.0-beta.0",
+  "description": "Foundation utilities, tokens, and providers for FrameUI.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gamekohl/frame-ui.git"
+  },
+  "homepage": "https://frame-ui.com",
+  "bugs": {
+    "url": "https://github.com/gamekohl/frame-ui/issues"
+  },
+  "keywords": [
+    "angular",
+    "design-tokens",
+    "theme",
+    "design-system",
+    "frame-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./styles.css": {
+      "style": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./styles/foundation.css": {
+      "style": "./styles/foundation.css",
+      "default": "./styles/foundation.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/frame-ui-ng-foundation.d.ts",
+      "default": "./fesm2022/frame-ui-ng-foundation.mjs"
+    }
+  },
+  "sideEffects": [
+    "./styles.css",
+    "./styles/foundation.css"
+  ],
+  "module": "fesm2022/frame-ui-ng-foundation.mjs",
+  "typings": "types/frame-ui-ng-foundation.d.ts",
+  "type": "module"
+}

package/styles/foundation.css

@@ -0,0 +1,82 @@
+:root,
+[data-theme='light'] {
+  /* Theme metadata */
+  color-scheme: light;
+
+  /* Surfaces */
+  --frame-background: oklch(1 0 0);
+  --frame-foreground: oklch(0.145 0 0);
+  --frame-surface: oklch(1 0 0);
+  --frame-surface-foreground: oklch(0.145 0 0);
+
+  /* Supporting surfaces */
+  --frame-muted: oklch(0.97 0 0);
+  --frame-muted-foreground: oklch(0.45 0 0);
+
+  /* Actions */
+  --frame-primary: #161b27; /*oklch(0.205 0 0);*/
+  --frame-primary-foreground: oklch(0.985 0 0);
+  --frame-accent: oklch(0.97 0 0);
+  --frame-accent-foreground: oklch(0.205 0 0);
+  --frame-destructive: oklch(55.205% 0.18114 25.384);
+  --frame-destructive-foreground: oklch(100% 0.00011 271.152);
+
+  /* Structure and focus */
+  --frame-border: oklch(0.922 0 0);
+  --frame-input: oklch(0.922 0 0);
+  --frame-ring: oklch(0.708 0 0);
+
+  /* Spacing */
+  --frame-spacing-xs: 0.25rem;
+  --frame-spacing-sm: 0.5rem;
+  --frame-spacing-md: 0.75rem;
+  --frame-spacing-lg: 1rem;
+  --frame-spacing-xl: 1.25rem;
+
+  /* Shape */
+  --frame-radius-xs: 0.125rem;
+  --frame-radius-sm: 0.375rem;
+  --frame-radius-md: 0.5rem;
+  --frame-radius-lg: 0.75rem;
+  --frame-radius-full: 9999px;
+
+  /* Elevation */
+  --frame-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+[data-theme='dark'],
+.dark {
+  /* Theme metadata */
+  color-scheme: dark;
+
+  /* Surfaces */
+  --frame-background: oklch(0.145 0 0);
+  --frame-foreground: oklch(0.985 0 0);
+  --frame-surface: oklch(0.205 0 0);
+  --frame-surface-foreground: oklch(0.985 0 0);
+
+  /* Supporting surfaces */
+  --frame-muted: oklch(0.269 0 0);
+  --frame-muted-foreground: oklch(0.708 0 0);
+
+  /* Actions */
+  --frame-primary: oklch(0.922 0 0);
+  --frame-primary-foreground: oklch(0.205 0 0);
+  --frame-accent: oklch(0.269 0 0);
+  --frame-accent-foreground: oklch(0.985 0 0);
+
+  /* Structure and focus */
+  --frame-border: oklch(1 0 0 / 0.1);
+  --frame-input: oklch(1 0 0 / 0.15);
+  --frame-ring: oklch(0.556 0 0);
+
+  /* Shape */
+  --frame-radius-sm: 0.375rem;
+  --frame-radius-md: 0.5rem;
+  --frame-radius-lg: 0.75rem;
+
+  /* Elevation */
+  --frame-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.35);
+}

package/styles.css

@@ -0,0 +1 @@
+@import './styles/foundation.css';

package/types/frame-ui-ng-foundation.d.ts

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, OnDestroy, Signal, EnvironmentProviders } from '@angular/core';
+
+type ClassDictionary = Readonly<Record<string, boolean | null | undefined>>;
+type ClassValue = ClassDictionary | ClassValue[] | false | null | string | undefined;
+type SlotClasses<TSlot extends string> = Readonly<Record<TSlot, string>>;
+type SlotClassOverrides<TSlot extends string> = Partial<Record<TSlot, ClassValue>>;
+declare function cx(...values: readonly ClassValue[]): string;
+declare function withClassOverrides<TSlot extends string>(slots: SlotClasses<TSlot>, overrides?: SlotClassOverrides<TSlot>): Record<TSlot, string>;
+
+type ThemeBindingStrategy = 'attribute' | 'class';
+type ThemeSyncMode = 'managed' | 'observe';
+type FrameUITheme = 'light' | 'dark';
+interface FrameUIConfig {
+    attribute: string;
+    className: string;
+    defaultTheme: FrameUITheme;
+    mode: ThemeSyncMode;
+    strategy: ThemeBindingStrategy;
+}
+declare const FRAME_UI_CONFIG: InjectionToken<FrameUIConfig>;
+interface FrameUIOptions {
+    attribute?: string;
+    className?: string;
+    defaultTheme?: FrameUITheme;
+    mode?: ThemeSyncMode;
+    strategy?: ThemeBindingStrategy;
+}
+declare function provideFrameUI(options?: FrameUIOptions): EnvironmentProviders;
+declare function createFrameUIConfig(options?: FrameUIOptions): FrameUIConfig;
+declare class ThemeService implements OnDestroy {
+    private readonly document;
+    private readonly config;
+    private readonly activeTheme;
+    private observer;
+    readonly theme: Signal<FrameUITheme>;
+    readonly isDark: Signal<boolean>;
+    constructor();
+    setTheme(name: FrameUITheme): void;
+    toggleTheme(): FrameUITheme;
+    ngOnDestroy(): void;
+    private applyTheme;
+    private observeThemeChanges;
+    private syncFromDom;
+    private readThemeFromDom;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+export { FRAME_UI_CONFIG, ThemeService, createFrameUIConfig, cx, provideFrameUI, withClassOverrides };
+export type { ClassDictionary, ClassValue, FrameUIConfig, FrameUIOptions, FrameUITheme, SlotClassOverrides, SlotClasses, ThemeBindingStrategy, ThemeSyncMode };