@frame-ui-ng/foundation 0.4.2-beta.0 → 0.5.1-beta.0

package/README.md

@@ -6,16 +6,16 @@ Documentation: https://frame-ui.com
 
 Current scope:
 
-- CSS-variable token contract
+- CSS variables
 - 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
+## Tokens
 
-The foundation token contract is intentionally semantic and small.
+The foundation tokens are intentionally semantic and small.
 
 ### Color tokens
 
@@ -29,6 +29,14 @@ The foundation token contract is intentionally semantic and small.
 - `--frame-primary-foreground`: readable text on `primary`
 - `--frame-accent`: secondary emphasis or selection highlight
 - `--frame-accent-foreground`: readable text on `accent`
+- `--frame-destructive`: destructive or error emphasis
+- `--frame-destructive-foreground`: readable text on `destructive`
+- `--frame-success`: success emphasis
+- `--frame-success-foreground`: readable text on `success`
+- `--frame-warning`: warning emphasis
+- `--frame-warning-foreground`: readable text on `warning`
+- `--frame-info`: informational emphasis
+- `--frame-info-foreground`: readable text on `info`
 - `--frame-border`: default border color
 - `--frame-input`: input field chrome
 - `--frame-ring`: focus ring color
@@ -38,13 +46,26 @@ The foundation token contract is intentionally semantic and small.
 - `--frame-radius-sm`
 - `--frame-radius-md`
 - `--frame-radius-lg`
+- `--frame-radius-full`
+
+The default FrameUI theme keeps `sm`, `md`, and `lg` at `0px` for the technical square look.
+Override these tokens in the host app when a rounder theme is wanted.
 
 ### Elevation tokens
 
 - `--frame-shadow-sm`
 - `--frame-shadow-md`
+- `--frame-shadow-lg`
+
+Use `shadow` in `provideFrameUI` when the whole app should be flatter or more raised:
+
+```ts
+provideFrameUI({
+  shadow: 'flat', // 'flat' | 'default' | 'raised'
+});
+```
 
-## Contract Rules
+## Token Rules
 
 - Tokens must describe purpose, not implementation.
 - Components should consume semantic tokens, never hardcoded theme colors.
@@ -87,49 +108,70 @@ Brand, product, or campaign differences should be handled by the host app's toke
 
 ## Theme Ownership
 
-The foundation layer should expose a token contract, not force itself to be the only dark mode owner.
+The foundation layer should expose CSS tokens, not force itself to be the only dark mode owner.
 
-There are two recommended ownership models:
+There are two questions:
 
-- 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
+- Who controls light/dark: FrameUI or the app?
+- Which root selector is used: `data-theme` or `.dark`?
 
-### Library-managed with `data-theme`
+### FrameUI controls `data-theme`
 
 This is the current default:
 
 ```ts
 provideFrameUI({
   defaultTheme: 'light',
+  theme: {
+    controlledBy: 'frame',
+    using: 'data-theme',
+  },
 });
 ```
 
-### Library-managed with Tailwind's `.dark` class
+`ThemeService.setTheme('dark')` writes `html[data-theme="dark"]`.
 
-If you want the FrameUI service to be the single source of truth, but Tailwind utilities should respond too, switch to class strategy:
+### FrameUI controls `.dark`
+
+Use this when FrameUI should control the theme, but the app expects a shared `.dark` selector:
 
 ```ts
 provideFrameUI({
-  strategy: 'class',
-  className: 'dark',
+  theme: {
+    controlledBy: 'frame',
+    using: 'class',
+  },
 });
 ```
 
-`ThemeService.setTheme('dark')` now adds `.dark` to the root element, so both the FrameUI tokens and Tailwind `dark:` utilities react to the same switch.
+`ThemeService.setTheme('dark')` adds `.dark` to the root element, so both FrameUI tokens and Tailwind `dark:` utilities can react to the same switch.
 
-### Externally managed by Tailwind or another app shell
+### App controls `.dark`
 
-If the host app already owns dark mode, let the FrameUI observe instead of write:
+Use this when Tailwind, an app shell, or another design layer already owns dark mode:
 
 ```ts
 provideFrameUI({
-  strategy: 'class',
-  mode: 'observe',
-  className: 'dark',
+  theme: {
+    controlledBy: 'app',
+    using: 'class',
+  },
 });
 ```
 
-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.
+In this setup, FrameUI does not write light/dark state. It reads `html.dark` and keeps `ThemeService.theme()` in sync. Calling `ThemeService.setTheme()` throws because the app owns the switch.
+
+### Bootstrap
+
+Bootstrap apps usually use `data-bs-theme`. FrameUI does not need to observe that attribute for visual theming. Map FrameUI tokens to Bootstrap variables in CSS instead:
+
+```css
+:root {
+  --frame-background: var(--bs-body-bg);
+  --frame-foreground: var(--bs-body-color);
+  --frame-border: var(--bs-border-color);
+}
+```
 
 ## Global Appearance Options
 

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

@@ -36,14 +36,18 @@ function withClassOverrides(slots, overrides) {
 }
 
 const DEFAULT_CONFIG = {
-    attribute: 'data-theme',
-    className: 'dark',
     defaultTheme: 'light',
+    density: null,
     disableCornerHandles: false,
-    mode: 'managed',
-    strategy: 'attribute',
+    shadow: null,
+    theme: {
+        controlledBy: 'frame',
+        using: 'data-theme',
+    },
 };
 const CORNER_HANDLES_ATTRIBUTE = 'data-frame-corner-handles';
+const DENSITY_ATTRIBUTE = 'data-density';
+const SHADOW_ATTRIBUTE = 'data-shadow';
 const FRAME_UI_CONFIG = new InjectionToken('FRAME_UI_CONFIG', {
     factory: () => DEFAULT_CONFIG,
 });
@@ -66,12 +70,14 @@ function provideFrameUI(options = {}) {
 function createFrameUIConfig(options = {}) {
     const defaultTheme = options.defaultTheme ?? DEFAULT_CONFIG.defaultTheme;
     return {
-        attribute: options.attribute ?? DEFAULT_CONFIG.attribute,
-        className: options.className ?? DEFAULT_CONFIG.className,
         defaultTheme,
+        density: options.density ?? DEFAULT_CONFIG.density,
         disableCornerHandles: options.disableCornerHandles ?? DEFAULT_CONFIG.disableCornerHandles,
-        mode: options.mode ?? DEFAULT_CONFIG.mode,
-        strategy: options.strategy ?? DEFAULT_CONFIG.strategy,
+        shadow: options.shadow ?? DEFAULT_CONFIG.shadow,
+        theme: {
+            controlledBy: options.theme?.controlledBy ?? DEFAULT_CONFIG.theme.controlledBy,
+            using: options.theme?.using ?? DEFAULT_CONFIG.theme.using,
+        },
     };
 }
 class ThemeService {
@@ -83,7 +89,9 @@ class ThemeService {
     isDark = computed(() => this.activeTheme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
     constructor() {
         this.applyCornerHandlesPreference();
-        if (this.config.mode === 'observe') {
+        this.applyDensityPreference();
+        this.applyShadowPreference();
+        if (this.config.theme.controlledBy === 'app') {
             this.syncFromDom();
             this.observeThemeChanges();
             return;
@@ -94,8 +102,8 @@ class ThemeService {
         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.');
+        if (this.config.theme.controlledBy === 'app') {
+            throw new Error('ThemeService is configured to read app-controlled theme state and cannot set the theme.');
         }
         this.activeTheme.set(name);
         this.applyTheme(name);
@@ -114,11 +122,11 @@ class ThemeService {
         if (!root) {
             return;
         }
-        if (this.config.strategy === 'class') {
-            root.classList.toggle(this.config.className, name === 'dark');
+        if (this.config.theme.using === 'class') {
+            root.classList.toggle('dark', name === 'dark');
             return;
         }
-        root.setAttribute(this.config.attribute, name);
+        root.setAttribute('data-theme', name);
     }
     applyCornerHandlesPreference() {
         const root = this.document?.documentElement;
@@ -131,12 +139,26 @@ class ThemeService {
         }
         root.removeAttribute(CORNER_HANDLES_ATTRIBUTE);
     }
+    applyDensityPreference() {
+        const root = this.document?.documentElement;
+        if (!root || !this.config.density) {
+            return;
+        }
+        root.setAttribute(DENSITY_ATTRIBUTE, this.config.density);
+    }
+    applyShadowPreference() {
+        const root = this.document?.documentElement;
+        if (!root || !this.config.shadow) {
+            return;
+        }
+        root.setAttribute(SHADOW_ATTRIBUTE, this.config.shadow);
+    }
     observeThemeChanges() {
         const root = this.document?.documentElement;
         if (!root || typeof MutationObserver === 'undefined') {
             return;
         }
-        const attributeFilter = this.config.strategy === 'class' ? ['class'] : [this.config.attribute];
+        const attributeFilter = this.config.theme.using === 'class' ? ['class'] : ['data-theme'];
         this.observer = new MutationObserver(() => {
             this.syncFromDom();
         });
@@ -153,10 +175,10 @@ class ThemeService {
         this.activeTheme.set(this.readThemeFromDom(root));
     }
     readThemeFromDom(root) {
-        if (this.config.strategy === 'class') {
-            return root.classList.contains(this.config.className) ? 'dark' : 'light';
+        if (this.config.theme.using === 'class') {
+            return root.classList.contains('dark') ? 'dark' : 'light';
         }
-        const theme = root.getAttribute(this.config.attribute);
+        const theme = root.getAttribute('data-theme');
         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 });

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

@@ -1 +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';\r\nimport {\r\n  EnvironmentProviders,\r\n  ENVIRONMENT_INITIALIZER,\r\n  Injectable,\r\n  InjectionToken,\r\n  OnDestroy,\r\n  Signal,\r\n  computed,\r\n  inject,\r\n  makeEnvironmentProviders,\r\n  signal,\r\n} from '@angular/core';\r\n\r\nexport type ThemeBindingStrategy = 'attribute' | 'class';\r\nexport type ThemeSyncMode = 'managed' | 'observe';\r\nexport type FrameUITheme = 'light' | 'dark';\r\n\r\nexport interface FrameUIConfig {\r\n  attribute: string;\r\n  className: string;\r\n  defaultTheme: FrameUITheme;\r\n  disableCornerHandles: boolean;\r\n  mode: ThemeSyncMode;\r\n  strategy: ThemeBindingStrategy;\r\n}\r\n\r\nconst DEFAULT_CONFIG: FrameUIConfig = {\r\n  attribute: 'data-theme',\r\n  className: 'dark',\r\n  defaultTheme: 'light',\r\n  disableCornerHandles: false,\r\n  mode: 'managed',\r\n  strategy: 'attribute',\r\n};\r\n\r\nconst CORNER_HANDLES_ATTRIBUTE = 'data-frame-corner-handles';\r\n\r\nexport const FRAME_UI_CONFIG = new InjectionToken<FrameUIConfig>(\r\n  'FRAME_UI_CONFIG',\r\n  {\r\n    factory: () => DEFAULT_CONFIG,\r\n  },\r\n);\r\n\r\nexport interface FrameUIOptions {\r\n  attribute?: string;\r\n  className?: string;\r\n  defaultTheme?: FrameUITheme;\r\n  disableCornerHandles?: boolean;\r\n  mode?: ThemeSyncMode;\r\n  strategy?: ThemeBindingStrategy;\r\n}\r\n\r\nexport function provideFrameUI(\r\n  options: FrameUIOptions = {},\r\n): EnvironmentProviders {\r\n  return makeEnvironmentProviders([\r\n    {\r\n      provide: FRAME_UI_CONFIG,\r\n      useValue: createFrameUIConfig(options),\r\n    },\r\n    ThemeService,\r\n    {\r\n      provide: ENVIRONMENT_INITIALIZER,\r\n      multi: true,\r\n      useValue: () => {\r\n        inject(ThemeService);\r\n      },\r\n    },\r\n  ]);\r\n}\r\n\r\nexport function createFrameUIConfig(\r\n  options: FrameUIOptions = {},\r\n): FrameUIConfig {\r\n  const defaultTheme = options.defaultTheme ?? DEFAULT_CONFIG.defaultTheme;\r\n\r\n  return {\r\n    attribute: options.attribute ?? DEFAULT_CONFIG.attribute,\r\n    className: options.className ?? DEFAULT_CONFIG.className,\r\n    defaultTheme,\r\n    disableCornerHandles:\r\n      options.disableCornerHandles ?? DEFAULT_CONFIG.disableCornerHandles,\r\n    mode: options.mode ?? DEFAULT_CONFIG.mode,\r\n    strategy: options.strategy ?? DEFAULT_CONFIG.strategy,\r\n  };\r\n}\r\n\r\n@Injectable()\r\nexport class ThemeService implements OnDestroy {\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly config = inject(FRAME_UI_CONFIG);\r\n  private readonly activeTheme = signal(this.config.defaultTheme);\r\n  private observer: MutationObserver | null = null;\r\n\r\n  readonly theme: Signal<FrameUITheme> = this.activeTheme.asReadonly();\r\n\r\n  readonly isDark = computed(() => this.activeTheme() === 'dark');\r\n\r\n  constructor() {\r\n    this.applyCornerHandlesPreference();\r\n\r\n    if (this.config.mode === 'observe') {\r\n      this.syncFromDom();\r\n      this.observeThemeChanges();\r\n      return;\r\n    }\r\n\r\n    this.applyTheme(this.activeTheme());\r\n  }\r\n\r\n  setTheme(name: FrameUITheme): void {\r\n    if (!isFrameUITheme(name)) {\r\n      throw new Error(`Unknown theme \"${name}\".`);\r\n    }\r\n\r\n    if (this.config.mode === 'observe') {\r\n      throw new Error(\r\n        'ThemeService is configured to observe external theme state and cannot set the theme.',\r\n      );\r\n    }\r\n\r\n    this.activeTheme.set(name);\r\n    this.applyTheme(name);\r\n  }\r\n\r\n  toggleTheme(): FrameUITheme {\r\n    const nextTheme = this.activeTheme() === 'dark' ? 'light' : 'dark';\r\n\r\n    this.setTheme(nextTheme);\r\n\r\n    return nextTheme;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.observer?.disconnect();\r\n    this.observer = null;\r\n  }\r\n\r\n  private applyTheme(name: FrameUITheme): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    if (this.config.strategy === 'class') {\r\n      root.classList.toggle(this.config.className, name === 'dark');\r\n      return;\r\n    }\r\n\r\n    root.setAttribute(this.config.attribute, name);\r\n  }\r\n\r\n  private applyCornerHandlesPreference(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    if (this.config.disableCornerHandles) {\r\n      root.setAttribute(CORNER_HANDLES_ATTRIBUTE, 'false');\r\n      return;\r\n    }\r\n\r\n    root.removeAttribute(CORNER_HANDLES_ATTRIBUTE);\r\n  }\r\n\r\n  private observeThemeChanges(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root || typeof MutationObserver === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    const attributeFilter =\r\n      this.config.strategy === 'class' ? ['class'] : [this.config.attribute];\r\n\r\n    this.observer = new MutationObserver(() => {\r\n      this.syncFromDom();\r\n    });\r\n    this.observer.observe(root, {\r\n      attributeFilter,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  private syncFromDom(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    this.activeTheme.set(this.readThemeFromDom(root));\r\n  }\r\n\r\n  private readThemeFromDom(root: HTMLElement): FrameUITheme {\r\n    if (this.config.strategy === 'class') {\r\n      return root.classList.contains(this.config.className) ? 'dark' : 'light';\r\n    }\r\n\r\n    const theme = root.getAttribute(this.config.attribute);\r\n\r\n    return isFrameUITheme(theme) ? theme : this.config.defaultTheme;\r\n  }\r\n}\r\n\r\nfunction isFrameUITheme(value: unknown): value is FrameUITheme {\r\n  return value === 'light' || value === 'dark';\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"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';\r\nimport {\r\n  EnvironmentProviders,\r\n  ENVIRONMENT_INITIALIZER,\r\n  Injectable,\r\n  InjectionToken,\r\n  OnDestroy,\r\n  Signal,\r\n  computed,\r\n  inject,\r\n  makeEnvironmentProviders,\r\n  signal,\r\n} from '@angular/core';\r\n\r\nexport type FrameUIThemeController = 'frame' | 'app';\r\nexport type FrameUIThemeSelector = 'data-theme' | 'class';\r\nexport type FrameUITheme = 'light' | 'dark';\r\nexport type FrameUIDensity = 'compact' | 'default' | 'comfortable';\r\nexport type FrameUIShadow = 'flat' | 'default' | 'raised';\r\n\r\nexport interface FrameUIThemeConfig {\r\n  controlledBy: FrameUIThemeController;\r\n  using: FrameUIThemeSelector;\r\n}\r\n\r\nexport interface FrameUIConfig {\r\n  defaultTheme: FrameUITheme;\r\n  density: FrameUIDensity | null;\r\n  disableCornerHandles: boolean;\r\n  shadow: FrameUIShadow | null;\r\n  theme: FrameUIThemeConfig;\r\n}\r\n\r\nconst DEFAULT_CONFIG: FrameUIConfig = {\r\n  defaultTheme: 'light',\r\n  density: null,\r\n  disableCornerHandles: false,\r\n  shadow: null,\r\n  theme: {\r\n    controlledBy: 'frame',\r\n    using: 'data-theme',\r\n  },\r\n};\r\n\r\nconst CORNER_HANDLES_ATTRIBUTE = 'data-frame-corner-handles';\r\nconst DENSITY_ATTRIBUTE = 'data-density';\r\nconst SHADOW_ATTRIBUTE = 'data-shadow';\r\n\r\nexport const FRAME_UI_CONFIG = new InjectionToken<FrameUIConfig>(\r\n  'FRAME_UI_CONFIG',\r\n  {\r\n    factory: () => DEFAULT_CONFIG,\r\n  },\r\n);\r\n\r\nexport interface FrameUIOptions {\r\n  defaultTheme?: FrameUITheme;\r\n  density?: FrameUIDensity;\r\n  disableCornerHandles?: boolean;\r\n  shadow?: FrameUIShadow;\r\n  theme?: Partial<FrameUIThemeConfig>;\r\n}\r\n\r\nexport function provideFrameUI(\r\n  options: FrameUIOptions = {},\r\n): EnvironmentProviders {\r\n  return makeEnvironmentProviders([\r\n    {\r\n      provide: FRAME_UI_CONFIG,\r\n      useValue: createFrameUIConfig(options),\r\n    },\r\n    ThemeService,\r\n    {\r\n      provide: ENVIRONMENT_INITIALIZER,\r\n      multi: true,\r\n      useValue: () => {\r\n        inject(ThemeService);\r\n      },\r\n    },\r\n  ]);\r\n}\r\n\r\nexport function createFrameUIConfig(\r\n  options: FrameUIOptions = {},\r\n): FrameUIConfig {\r\n  const defaultTheme = options.defaultTheme ?? DEFAULT_CONFIG.defaultTheme;\r\n\r\n  return {\r\n    defaultTheme,\r\n    density: options.density ?? DEFAULT_CONFIG.density,\r\n    disableCornerHandles:\r\n      options.disableCornerHandles ?? DEFAULT_CONFIG.disableCornerHandles,\r\n    shadow: options.shadow ?? DEFAULT_CONFIG.shadow,\r\n    theme: {\r\n      controlledBy:\r\n        options.theme?.controlledBy ?? DEFAULT_CONFIG.theme.controlledBy,\r\n      using: options.theme?.using ?? DEFAULT_CONFIG.theme.using,\r\n    },\r\n  };\r\n}\r\n\r\n@Injectable()\r\nexport class ThemeService implements OnDestroy {\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly config = inject(FRAME_UI_CONFIG);\r\n  private readonly activeTheme = signal(this.config.defaultTheme);\r\n  private observer: MutationObserver | null = null;\r\n\r\n  readonly theme: Signal<FrameUITheme> = this.activeTheme.asReadonly();\r\n\r\n  readonly isDark = computed(() => this.activeTheme() === 'dark');\r\n\r\n  constructor() {\r\n    this.applyCornerHandlesPreference();\r\n    this.applyDensityPreference();\r\n    this.applyShadowPreference();\r\n\r\n    if (this.config.theme.controlledBy === 'app') {\r\n      this.syncFromDom();\r\n      this.observeThemeChanges();\r\n      return;\r\n    }\r\n\r\n    this.applyTheme(this.activeTheme());\r\n  }\r\n\r\n  setTheme(name: FrameUITheme): void {\r\n    if (!isFrameUITheme(name)) {\r\n      throw new Error(`Unknown theme \"${name}\".`);\r\n    }\r\n\r\n    if (this.config.theme.controlledBy === 'app') {\r\n      throw new Error(\r\n        'ThemeService is configured to read app-controlled theme state and cannot set the theme.',\r\n      );\r\n    }\r\n\r\n    this.activeTheme.set(name);\r\n    this.applyTheme(name);\r\n  }\r\n\r\n  toggleTheme(): FrameUITheme {\r\n    const nextTheme = this.activeTheme() === 'dark' ? 'light' : 'dark';\r\n\r\n    this.setTheme(nextTheme);\r\n\r\n    return nextTheme;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.observer?.disconnect();\r\n    this.observer = null;\r\n  }\r\n\r\n  private applyTheme(name: FrameUITheme): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    if (this.config.theme.using === 'class') {\r\n      root.classList.toggle('dark', name === 'dark');\r\n      return;\r\n    }\r\n\r\n    root.setAttribute('data-theme', name);\r\n  }\r\n\r\n  private applyCornerHandlesPreference(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    if (this.config.disableCornerHandles) {\r\n      root.setAttribute(CORNER_HANDLES_ATTRIBUTE, 'false');\r\n      return;\r\n    }\r\n\r\n    root.removeAttribute(CORNER_HANDLES_ATTRIBUTE);\r\n  }\r\n\r\n  private applyDensityPreference(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root || !this.config.density) {\r\n      return;\r\n    }\r\n\r\n    root.setAttribute(DENSITY_ATTRIBUTE, this.config.density);\r\n  }\r\n\r\n  private applyShadowPreference(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root || !this.config.shadow) {\r\n      return;\r\n    }\r\n\r\n    root.setAttribute(SHADOW_ATTRIBUTE, this.config.shadow);\r\n  }\r\n\r\n  private observeThemeChanges(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root || typeof MutationObserver === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    const attributeFilter =\r\n      this.config.theme.using === 'class' ? ['class'] : ['data-theme'];\r\n\r\n    this.observer = new MutationObserver(() => {\r\n      this.syncFromDom();\r\n    });\r\n    this.observer.observe(root, {\r\n      attributeFilter,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  private syncFromDom(): void {\r\n    const root = this.document?.documentElement;\r\n\r\n    if (!root) {\r\n      return;\r\n    }\r\n\r\n    this.activeTheme.set(this.readThemeFromDom(root));\r\n  }\r\n\r\n  private readThemeFromDom(root: HTMLElement): FrameUITheme {\r\n    if (this.config.theme.using === 'class') {\r\n      return root.classList.contains('dark') ? 'dark' : 'light';\r\n    }\r\n\r\n    const theme = root.getAttribute('data-theme');\r\n\r\n    return isFrameUITheme(theme) ? theme : this.config.defaultTheme;\r\n  }\r\n}\r\n\r\nfunction isFrameUITheme(value: unknown): value is FrameUITheme {\r\n  return value === 'light' || value === 'dark';\r\n}\r\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": "@frame-ui-ng/foundation",
-  "version": "0.4.2-beta.0",
+  "version": "0.5.1-beta.0",
   "description": "Foundation utilities, tokens, and providers for FrameUI.",
   "license": "MIT",
   "repository": {

package/styles/foundation.css

@@ -1,5 +1,4 @@
-:root,
-[data-theme='light'] {
+:where(:root, [data-theme='light']) {
   /* Theme metadata */
   color-scheme: light;
 
@@ -21,6 +20,12 @@
   --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);
+  --frame-success: oklch(0.62 0.18 149);
+  --frame-success-foreground: oklch(0.985 0 0);
+  --frame-warning: oklch(0.68 0.16 65);
+  --frame-warning-foreground: oklch(0.145 0 0);
+  --frame-info: oklch(0.58 0.19 255);
+  --frame-info-foreground: oklch(0.985 0 0);
 
   /* Structure and focus */
   --frame-border: oklch(0.87 0.006 247);
@@ -29,7 +34,7 @@
   --frame-ring: #d71920;
   --frame-frame-line: color-mix(in srgb, var(--frame-border-strong) 48%, transparent);
   --frame-frame-line-muted: color-mix(in srgb, var(--frame-border) 54%, transparent);
-  --frame-frame-accent: #d71920;
+  --frame-frame-accent: var(--frame-ring);
   --frame-frame-tick-size: 0.375rem;
   --frame-frame-tick-inset: 0;
 
@@ -40,21 +45,52 @@
   --frame-spacing-lg: 1rem;
   --frame-spacing-xl: 1.25rem;
 
+  /* Density */
+  --frame-density-gap-xs: 0.125rem;
+  --frame-density-gap-sm: 0.25rem;
+  --frame-density-gap-md: 0.5rem;
+  --frame-density-gap-lg: 0.75rem;
+  --frame-density-gap-xl: 1rem;
+  --frame-density-control-height-sm: 2rem;
+  --frame-density-control-height-md: 2.25rem;
+  --frame-density-control-height-lg: 2.5rem;
+  --frame-density-control-height-xl: 2.875rem;
+  --frame-density-control-padding-x-sm: 0.75rem;
+  --frame-density-control-padding-x-md: 0.875rem;
+  --frame-density-control-padding-x-lg: 1rem;
+  --frame-density-inline-height: 1.375rem;
+  --frame-density-inline-padding-block: 0.1875rem;
+  --frame-density-inline-padding-inline: 0.625rem;
+  --frame-density-item-height: 2rem;
+  --frame-density-item-padding: 0.375rem 0.5rem;
+  --frame-density-file-padding-block: 0.375rem;
+  --frame-density-overlay-padding-block: 0.375rem;
+  --frame-density-overlay-padding-inline: 0.625rem;
+  --frame-density-shortcut-padding-block: 0.0625rem;
+  --frame-density-shortcut-padding-inline: 0.3125rem;
+  --frame-density-panel-padding-sm: 0.25rem;
+  --frame-density-panel-padding-md: 1rem;
+  --frame-density-panel-padding-lg: 1.5rem;
+  --frame-density-table-cell-padding-block: 0.75rem;
+  --frame-density-table-cell-padding-inline: 1rem;
+  --frame-density-table-cell-padding-block-sm: 0.5rem;
+  --frame-density-table-cell-padding-inline-sm: 0.75rem;
+  --frame-density-table-cell-padding-block-lg: 1rem;
+  --frame-density-table-cell-padding-inline-lg: 1.125rem;
+
   /* Shape */
-  --frame-radius-xs: 0.125rem;
-  --frame-radius-sm: 0.375rem;
-  --frame-radius-md: 0.5rem;
-  --frame-radius-lg: 0.75rem;
+  --frame-radius-sm: 0px;
+  --frame-radius-md: 0px;
+  --frame-radius-lg: 0px;
   --frame-radius-full: 9999px;
 
   /* Elevation */
   --frame-shadow-sm: none;
   --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --frame-shadow-frame: none;
+  --frame-shadow-lg: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
 }
 
-[data-theme='dark'],
-.dark {
+:where([data-theme='dark'], .dark) {
   /* Theme metadata */
   color-scheme: dark;
 
@@ -74,6 +110,14 @@
   --frame-primary-foreground: oklch(0.205 0 0);
   --frame-accent: oklch(0.269 0 0);
   --frame-accent-foreground: oklch(0.985 0 0);
+  --frame-destructive: oklch(0.704 0.191 22.216);
+  --frame-destructive-foreground: oklch(0.985 0 0);
+  --frame-success: oklch(0.72 0.17 149);
+  --frame-success-foreground: oklch(0.145 0 0);
+  --frame-warning: oklch(0.78 0.16 75);
+  --frame-warning-foreground: oklch(0.145 0 0);
+  --frame-info: oklch(0.72 0.15 255);
+  --frame-info-foreground: oklch(0.145 0 0);
 
   /* Structure and focus */
   --frame-border: oklch(1 0 0 / 0.08);
@@ -82,10 +126,107 @@
   --frame-ring: #ff4a4f;
   --frame-frame-line: color-mix(in srgb, var(--frame-border-strong) 54%, transparent);
   --frame-frame-line-muted: color-mix(in srgb, var(--frame-border) 62%, transparent);
-  --frame-frame-accent: #ff4a4f;
+  --frame-frame-accent: var(--frame-ring);
 
   /* Elevation */
   --frame-shadow-sm: none;
   --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.35);
-  --frame-shadow-frame: none;
+  --frame-shadow-lg: 0 24px 80px rgb(0 0 0 / 0.38), 0 8px 24px rgb(0 0 0 / 0.24);
+}
+
+:where([data-shadow='flat']) {
+  --frame-shadow-sm: none;
+  --frame-shadow-md: none;
+  --frame-shadow-lg: none;
+}
+
+:where([data-shadow='default']) {
+  --frame-shadow-sm: none;
+  --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --frame-shadow-lg: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
+}
+
+:where([data-theme='dark'], .dark):where([data-shadow='default']) {
+  --frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.35);
+  --frame-shadow-lg: 0 24px 80px rgb(0 0 0 / 0.38), 0 8px 24px rgb(0 0 0 / 0.24);
+}
+
+:where([data-shadow='raised']) {
+  --frame-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.1);
+  --frame-shadow-md: 0 16px 32px -12px rgb(0 0 0 / 0.22);
+  --frame-shadow-lg: 0 32px 90px rgb(0 0 0 / 0.24), 0 12px 32px rgb(0 0 0 / 0.16);
+}
+
+:where([data-theme='dark'], .dark):where([data-shadow='raised']) {
+  --frame-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.32);
+  --frame-shadow-md: 0 16px 32px -12px rgb(0 0 0 / 0.52);
+  --frame-shadow-lg: 0 32px 90px rgb(0 0 0 / 0.58), 0 12px 32px rgb(0 0 0 / 0.36);
+}
+
+:where([data-density='compact']) {
+  --frame-density-gap-xs: 0.0625rem;
+  --frame-density-gap-sm: 0.1875rem;
+  --frame-density-gap-md: 0.375rem;
+  --frame-density-gap-lg: 0.5rem;
+  --frame-density-gap-xl: 0.75rem;
+  --frame-density-control-height-sm: 1.75rem;
+  --frame-density-control-height-md: 2rem;
+  --frame-density-control-height-lg: 2.25rem;
+  --frame-density-control-height-xl: 2.5rem;
+  --frame-density-control-padding-x-sm: 0.5rem;
+  --frame-density-control-padding-x-md: 0.75rem;
+  --frame-density-control-padding-x-lg: 0.875rem;
+  --frame-density-inline-height: 1.25rem;
+  --frame-density-inline-padding-block: 0.125rem;
+  --frame-density-inline-padding-inline: 0.5rem;
+  --frame-density-item-height: 1.75rem;
+  --frame-density-item-padding: 0.25rem 0.5rem;
+  --frame-density-file-padding-block: 0.25rem;
+  --frame-density-overlay-padding-block: 0.25rem;
+  --frame-density-overlay-padding-inline: 0.5rem;
+  --frame-density-shortcut-padding-block: 0.0625rem;
+  --frame-density-shortcut-padding-inline: 0.25rem;
+  --frame-density-panel-padding-sm: 0.1875rem;
+  --frame-density-panel-padding-md: 0.75rem;
+  --frame-density-panel-padding-lg: 1rem;
+  --frame-density-table-cell-padding-block: 0.5rem;
+  --frame-density-table-cell-padding-inline: 0.75rem;
+  --frame-density-table-cell-padding-block-sm: 0.375rem;
+  --frame-density-table-cell-padding-inline-sm: 0.5rem;
+  --frame-density-table-cell-padding-block-lg: 0.75rem;
+  --frame-density-table-cell-padding-inline-lg: 0.875rem;
+}
+
+:where([data-density='comfortable']) {
+  --frame-density-gap-xs: 0.1875rem;
+  --frame-density-gap-sm: 0.375rem;
+  --frame-density-gap-md: 0.625rem;
+  --frame-density-gap-lg: 0.875rem;
+  --frame-density-gap-xl: 1.25rem;
+  --frame-density-control-height-sm: 2.25rem;
+  --frame-density-control-height-md: 2.5rem;
+  --frame-density-control-height-lg: 2.75rem;
+  --frame-density-control-height-xl: 3.125rem;
+  --frame-density-control-padding-x-sm: 0.875rem;
+  --frame-density-control-padding-x-md: 1rem;
+  --frame-density-control-padding-x-lg: 1.125rem;
+  --frame-density-inline-height: 1.5rem;
+  --frame-density-inline-padding-block: 0.25rem;
+  --frame-density-inline-padding-inline: 0.75rem;
+  --frame-density-item-height: 2.25rem;
+  --frame-density-item-padding: 0.5rem 0.625rem;
+  --frame-density-file-padding-block: 0.5rem;
+  --frame-density-overlay-padding-block: 0.5rem;
+  --frame-density-overlay-padding-inline: 0.75rem;
+  --frame-density-shortcut-padding-block: 0.125rem;
+  --frame-density-shortcut-padding-inline: 0.375rem;
+  --frame-density-panel-padding-sm: 0.375rem;
+  --frame-density-panel-padding-md: 1.25rem;
+  --frame-density-panel-padding-lg: 1.75rem;
+  --frame-density-table-cell-padding-block: 1rem;
+  --frame-density-table-cell-padding-inline: 1.125rem;
+  --frame-density-table-cell-padding-block-sm: 0.625rem;
+  --frame-density-table-cell-padding-inline-sm: 0.875rem;
+  --frame-density-table-cell-padding-block-lg: 1.125rem;
+  --frame-density-table-cell-padding-inline-lg: 1.25rem;
 }

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

@@ -8,25 +8,29 @@ 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 FrameUIThemeController = 'frame' | 'app';
+type FrameUIThemeSelector = 'data-theme' | 'class';
 type FrameUITheme = 'light' | 'dark';
+type FrameUIDensity = 'compact' | 'default' | 'comfortable';
+type FrameUIShadow = 'flat' | 'default' | 'raised';
+interface FrameUIThemeConfig {
+    controlledBy: FrameUIThemeController;
+    using: FrameUIThemeSelector;
+}
 interface FrameUIConfig {
-    attribute: string;
-    className: string;
     defaultTheme: FrameUITheme;
+    density: FrameUIDensity | null;
     disableCornerHandles: boolean;
-    mode: ThemeSyncMode;
-    strategy: ThemeBindingStrategy;
+    shadow: FrameUIShadow | null;
+    theme: FrameUIThemeConfig;
 }
 declare const FRAME_UI_CONFIG: InjectionToken<FrameUIConfig>;
 interface FrameUIOptions {
-    attribute?: string;
-    className?: string;
     defaultTheme?: FrameUITheme;
+    density?: FrameUIDensity;
     disableCornerHandles?: boolean;
-    mode?: ThemeSyncMode;
-    strategy?: ThemeBindingStrategy;
+    shadow?: FrameUIShadow;
+    theme?: Partial<FrameUIThemeConfig>;
 }
 declare function provideFrameUI(options?: FrameUIOptions): EnvironmentProviders;
 declare function createFrameUIConfig(options?: FrameUIOptions): FrameUIConfig;
@@ -43,6 +47,8 @@ declare class ThemeService implements OnDestroy {
     ngOnDestroy(): void;
     private applyTheme;
     private applyCornerHandlesPreference;
+    private applyDensityPreference;
+    private applyShadowPreference;
     private observeThemeChanges;
     private syncFromDom;
     private readThemeFromDom;
@@ -51,4 +57,4 @@ declare class ThemeService implements OnDestroy {
 }
 
 export { FRAME_UI_CONFIG, ThemeService, createFrameUIConfig, cx, provideFrameUI, withClassOverrides };
-export type { ClassDictionary, ClassValue, FrameUIConfig, FrameUIOptions, FrameUITheme, SlotClassOverrides, SlotClasses, ThemeBindingStrategy, ThemeSyncMode };
+export type { ClassDictionary, ClassValue, FrameUIConfig, FrameUIDensity, FrameUIOptions, FrameUIShadow, FrameUITheme, FrameUIThemeConfig, FrameUIThemeController, FrameUIThemeSelector, SlotClassOverrides, SlotClasses };