@unofficialbox/box-open-elements 0.4.0 → 0.6.0

package/dist/foundations/profiles/controller.js

@@ -0,0 +1,107 @@
+import { registerBuiltInDesignProfiles } from "./built-ins.js";
+import { applyDesignProfile, getDesignProfile, } from "./registry.js";
+export const DESIGN_PROFILE_CHANGE_EVENT = "boe:design-profile-change";
+export const DEFAULT_DESIGN_PROFILE_STORAGE_KEY = "boe-design-profile";
+const resolveDefaultRoot = () => typeof document === "undefined" ? null : document.documentElement;
+const resolveDefaultStorage = () => {
+    try {
+        return typeof localStorage === "undefined" ? null : localStorage;
+    }
+    catch {
+        return null;
+    }
+};
+export const createDesignProfileController = (options = {}) => {
+    const profileAttribute = options.profileAttribute === undefined
+        ? "data-design-profile"
+        : options.profileAttribute;
+    const storageKey = options.storageKey === undefined
+        ? DEFAULT_DESIGN_PROFILE_STORAGE_KEY
+        : options.storageKey;
+    const shouldResolveDefaultStorage = options.storage === undefined;
+    let root = options.root ?? null;
+    let storage = options.storage ?? null;
+    let profileName = options.profile ?? "box-default";
+    let appliedVariables = new Set();
+    let started = false;
+    const apply = () => {
+        if (!root) {
+            throw new Error("DesignProfileController requires a root HTMLElement");
+        }
+        if (!getDesignProfile(profileName)) {
+            throw new Error(`Unknown design profile: ${profileName}`);
+        }
+        const nextVariables = new Set(applyDesignProfile(root, profileName));
+        for (const variable of appliedVariables) {
+            if (!nextVariables.has(variable)) {
+                root.style.removeProperty(variable);
+            }
+        }
+        appliedVariables = nextVariables;
+        if (profileAttribute) {
+            root.setAttribute(profileAttribute, profileName);
+        }
+        if (typeof CustomEvent !== "undefined") {
+            root.dispatchEvent(new CustomEvent(DESIGN_PROFILE_CHANGE_EVENT, {
+                bubbles: true,
+                composed: true,
+                detail: { profileName },
+            }));
+        }
+    };
+    return {
+        start() {
+            if (started) {
+                return;
+            }
+            root ??= resolveDefaultRoot();
+            if (options.registerBuiltIns ?? true) {
+                registerBuiltInDesignProfiles();
+            }
+            if (shouldResolveDefaultStorage) {
+                storage = resolveDefaultStorage();
+            }
+            if (storage && storageKey) {
+                try {
+                    const storedProfile = storage.getItem(storageKey);
+                    if (storedProfile && getDesignProfile(storedProfile)) {
+                        profileName = storedProfile;
+                    }
+                }
+                catch {
+                    // Storage may be unavailable in privacy-restricted or embedded contexts.
+                }
+            }
+            started = true;
+            apply();
+        },
+        stop() {
+            if (!started || !root) {
+                return;
+            }
+            for (const variable of appliedVariables) {
+                root.style.removeProperty(variable);
+            }
+            appliedVariables.clear();
+            if (profileAttribute) {
+                root.removeAttribute(profileAttribute);
+            }
+            started = false;
+        },
+        setProfile(name) {
+            profileName = name;
+            if (started) {
+                apply();
+            }
+            if (storage && storageKey) {
+                try {
+                    storage.setItem(storageKey, name);
+                }
+                catch {
+                    // Storage may be unavailable in privacy-restricted or embedded contexts.
+                }
+            }
+        },
+        getProfile: () => profileName,
+    };
+};

package/dist/foundations/profiles/index.d.ts

@@ -0,0 +1,4 @@
+export { boxDefaultDesignProfile, compactNeutralDesignProfile, registerBuiltInDesignProfiles, } from "./built-ins.js";
+export { DEFAULT_DESIGN_PROFILE_STORAGE_KEY, DESIGN_PROFILE_CHANGE_EVENT, createDesignProfileController, } from "./controller.js";
+export { DESIGN_PROFILE_VARIABLES, applyDesignProfile, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./registry.js";
+export type { ApplyDesignProfileOptions, DesignProfileChangeDetail, DesignProfileController, DesignProfileControllerOptions, DesignProfileDefinition, DesignProfileDensity, DesignProfileElevation, DesignProfileMotion, DesignProfileRadius, DesignProfileSpacing, DesignProfileTypography, } from "./types.js";

package/dist/foundations/profiles/index.js

@@ -0,0 +1,3 @@
+export { boxDefaultDesignProfile, compactNeutralDesignProfile, registerBuiltInDesignProfiles, } from "./built-ins.js";
+export { DEFAULT_DESIGN_PROFILE_STORAGE_KEY, DESIGN_PROFILE_CHANGE_EVENT, createDesignProfileController, } from "./controller.js";
+export { DESIGN_PROFILE_VARIABLES, applyDesignProfile, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./registry.js";

package/dist/foundations/profiles/registry.d.ts

@@ -0,0 +1,72 @@
+import type { ApplyDesignProfileOptions, DesignProfileDefinition } from "./types.js";
+export declare const DESIGN_PROFILE_VARIABLES: {
+    readonly spacing: {
+        readonly unit: "--boe-profile-space-unit";
+        readonly space1: "--boe-profile-space-1";
+        readonly space2: "--boe-profile-space-2";
+        readonly space3: "--boe-profile-space-3";
+        readonly space4: "--boe-profile-space-4";
+        readonly space5: "--boe-profile-space-5";
+        readonly space6: "--boe-profile-space-6";
+        readonly space8: "--boe-profile-space-8";
+        readonly space10: "--boe-profile-space-10";
+        readonly space12: "--boe-profile-space-12";
+    };
+    readonly radius: {
+        readonly size: "--boe-profile-radius-size";
+        readonly medium: "--boe-profile-radius-medium";
+        readonly large: "--boe-profile-radius-large";
+        readonly xlarge: "--boe-profile-radius-xlarge";
+        readonly control: "--boe-profile-radius-control";
+        readonly field: "--boe-profile-radius-field";
+        readonly nav: "--boe-profile-radius-nav";
+        readonly pill: "--boe-profile-radius-pill";
+    };
+    readonly density: {
+        readonly panelPadding: "--boe-profile-panel-padding";
+        readonly panelGap: "--boe-profile-panel-gap";
+        readonly overlayPadding: "--boe-profile-overlay-padding";
+        readonly overlayItemPadding: "--boe-profile-overlay-item-padding";
+        readonly overlayItemMinHeight: "--boe-profile-overlay-item-min-height";
+        readonly modalPadding: "--boe-profile-modal-padding";
+        readonly modalWidth: "--boe-profile-modal-width";
+        readonly drawerWidth: "--boe-profile-drawer-width";
+        readonly controlHeight: "--boe-profile-control-height";
+        readonly controlHeightLarge: "--boe-profile-control-height-large";
+        readonly controlPaddingInline: "--boe-profile-control-padding-inline";
+        readonly inputPadding: "--boe-profile-input-padding";
+        readonly selectHeight: "--boe-profile-select-height";
+        readonly disabledOpacity: "--boe-profile-disabled-opacity";
+    };
+    readonly typography: {
+        readonly fontFamilyBase: "--boe-profile-font-family-base";
+        readonly controlFontSize: "--boe-profile-control-font-size";
+        readonly controlLetterSpacing: "--boe-profile-control-letter-spacing";
+        readonly modalTitleSize: "--boe-profile-modal-title-size";
+    };
+    readonly elevation: {
+        readonly panel: "--boe-profile-shadow-panel";
+        readonly overlay: "--boe-profile-shadow-overlay";
+        readonly modal: "--boe-profile-shadow-modal";
+        readonly inputInset: "--boe-profile-shadow-input-inset";
+        readonly primaryFocus: "--boe-profile-shadow-primary-focus";
+    };
+    readonly motion: {
+        readonly fast: "--boe-profile-motion-fast";
+        readonly interactive: "--boe-profile-motion-interactive";
+        readonly medium: "--boe-profile-motion-medium";
+        readonly slow: "--boe-profile-motion-slow";
+        readonly spin: "--boe-profile-motion-spin";
+        readonly shimmer: "--boe-profile-motion-shimmer";
+        readonly easingStandard: "--boe-profile-easing-standard";
+        readonly easingEnter: "--boe-profile-easing-enter";
+        readonly easingExit: "--boe-profile-easing-exit";
+        readonly easingLinear: "--boe-profile-easing-linear";
+    };
+};
+export declare const resolveDesignProfileProperties: (definition: DesignProfileDefinition) => Record<string, string>;
+export declare const registerDesignProfile: (definition: DesignProfileDefinition) => DesignProfileDefinition;
+export declare const getDesignProfile: (name: string | null | undefined) => DesignProfileDefinition | null;
+export declare const listDesignProfiles: () => DesignProfileDefinition[];
+export declare const applyDesignProfile: (target: HTMLElement, profileOrName: DesignProfileDefinition | string) => string[];
+export declare const createDesignProfileStyleText: (profileOrName: DesignProfileDefinition | string, options?: ApplyDesignProfileOptions) => string;

package/dist/foundations/profiles/registry.js

@@ -0,0 +1,119 @@
+export const DESIGN_PROFILE_VARIABLES = {
+    spacing: {
+        unit: "--boe-profile-space-unit",
+        space1: "--boe-profile-space-1",
+        space2: "--boe-profile-space-2",
+        space3: "--boe-profile-space-3",
+        space4: "--boe-profile-space-4",
+        space5: "--boe-profile-space-5",
+        space6: "--boe-profile-space-6",
+        space8: "--boe-profile-space-8",
+        space10: "--boe-profile-space-10",
+        space12: "--boe-profile-space-12",
+    },
+    radius: {
+        size: "--boe-profile-radius-size",
+        medium: "--boe-profile-radius-medium",
+        large: "--boe-profile-radius-large",
+        xlarge: "--boe-profile-radius-xlarge",
+        control: "--boe-profile-radius-control",
+        field: "--boe-profile-radius-field",
+        nav: "--boe-profile-radius-nav",
+        pill: "--boe-profile-radius-pill",
+    },
+    density: {
+        panelPadding: "--boe-profile-panel-padding",
+        panelGap: "--boe-profile-panel-gap",
+        overlayPadding: "--boe-profile-overlay-padding",
+        overlayItemPadding: "--boe-profile-overlay-item-padding",
+        overlayItemMinHeight: "--boe-profile-overlay-item-min-height",
+        modalPadding: "--boe-profile-modal-padding",
+        modalWidth: "--boe-profile-modal-width",
+        drawerWidth: "--boe-profile-drawer-width",
+        controlHeight: "--boe-profile-control-height",
+        controlHeightLarge: "--boe-profile-control-height-large",
+        controlPaddingInline: "--boe-profile-control-padding-inline",
+        inputPadding: "--boe-profile-input-padding",
+        selectHeight: "--boe-profile-select-height",
+        disabledOpacity: "--boe-profile-disabled-opacity",
+    },
+    typography: {
+        fontFamilyBase: "--boe-profile-font-family-base",
+        controlFontSize: "--boe-profile-control-font-size",
+        controlLetterSpacing: "--boe-profile-control-letter-spacing",
+        modalTitleSize: "--boe-profile-modal-title-size",
+    },
+    elevation: {
+        panel: "--boe-profile-shadow-panel",
+        overlay: "--boe-profile-shadow-overlay",
+        modal: "--boe-profile-shadow-modal",
+        inputInset: "--boe-profile-shadow-input-inset",
+        primaryFocus: "--boe-profile-shadow-primary-focus",
+    },
+    motion: {
+        fast: "--boe-profile-motion-fast",
+        interactive: "--boe-profile-motion-interactive",
+        medium: "--boe-profile-motion-medium",
+        slow: "--boe-profile-motion-slow",
+        spin: "--boe-profile-motion-spin",
+        shimmer: "--boe-profile-motion-shimmer",
+        easingStandard: "--boe-profile-easing-standard",
+        easingEnter: "--boe-profile-easing-enter",
+        easingExit: "--boe-profile-easing-exit",
+        easingLinear: "--boe-profile-easing-linear",
+    },
+};
+const designProfiles = new Map();
+export const resolveDesignProfileProperties = (definition) => {
+    const properties = {};
+    for (const [sectionName, variableMap] of Object.entries(DESIGN_PROFILE_VARIABLES)) {
+        const section = definition[sectionName];
+        if (!section) {
+            continue;
+        }
+        for (const [propertyName, value] of Object.entries(section)) {
+            const variableName = variableMap[propertyName];
+            if (variableName && value !== undefined) {
+                properties[variableName] = value;
+            }
+        }
+    }
+    for (const [variableName, value] of Object.entries(definition.customProperties ?? {})) {
+        if (properties[variableName] !== undefined) {
+            throw new Error(`Design profile property "${variableName}" was provided by both the typed schema and customProperties`);
+        }
+        properties[variableName] = value;
+    }
+    return properties;
+};
+export const registerDesignProfile = (definition) => {
+    designProfiles.set(definition.name, definition);
+    return definition;
+};
+export const getDesignProfile = (name) => name ? designProfiles.get(name) ?? null : null;
+export const listDesignProfiles = () => Array.from(designProfiles.values());
+const resolveDefinition = (profileOrName) => {
+    if (typeof profileOrName !== "string") {
+        return profileOrName;
+    }
+    const definition = getDesignProfile(profileOrName);
+    if (!definition) {
+        throw new Error(`Unknown design profile: ${profileOrName}`);
+    }
+    return definition;
+};
+export const applyDesignProfile = (target, profileOrName) => {
+    const properties = resolveDesignProfileProperties(resolveDefinition(profileOrName));
+    for (const [name, value] of Object.entries(properties)) {
+        target.style.setProperty(name, value);
+    }
+    return Object.keys(properties);
+};
+export const createDesignProfileStyleText = (profileOrName, options = {}) => {
+    const selector = options.selector ?? ":root";
+    const properties = resolveDesignProfileProperties(resolveDefinition(profileOrName));
+    const declarations = Object.entries(properties)
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join("\n");
+    return `${selector} {\n${declarations}\n}`;
+};

package/dist/foundations/profiles/types.d.ts

@@ -0,0 +1,94 @@
+export interface DesignProfileSpacing {
+    unit?: string;
+    space1?: string;
+    space2?: string;
+    space3?: string;
+    space4?: string;
+    space5?: string;
+    space6?: string;
+    space8?: string;
+    space10?: string;
+    space12?: string;
+}
+export interface DesignProfileRadius {
+    size?: string;
+    medium?: string;
+    large?: string;
+    xlarge?: string;
+    control?: string;
+    field?: string;
+    nav?: string;
+    pill?: string;
+}
+export interface DesignProfileDensity {
+    panelPadding?: string;
+    panelGap?: string;
+    overlayPadding?: string;
+    overlayItemPadding?: string;
+    overlayItemMinHeight?: string;
+    modalPadding?: string;
+    modalWidth?: string;
+    drawerWidth?: string;
+    controlHeight?: string;
+    controlHeightLarge?: string;
+    controlPaddingInline?: string;
+    inputPadding?: string;
+    selectHeight?: string;
+    disabledOpacity?: string;
+}
+export interface DesignProfileTypography {
+    fontFamilyBase?: string;
+    controlFontSize?: string;
+    controlLetterSpacing?: string;
+    modalTitleSize?: string;
+}
+export interface DesignProfileElevation {
+    panel?: string;
+    overlay?: string;
+    modal?: string;
+    inputInset?: string;
+    primaryFocus?: string;
+}
+export interface DesignProfileMotion {
+    fast?: string;
+    interactive?: string;
+    medium?: string;
+    slow?: string;
+    spin?: string;
+    shimmer?: string;
+    easingStandard?: string;
+    easingEnter?: string;
+    easingExit?: string;
+    easingLinear?: string;
+}
+export interface DesignProfileDefinition {
+    name: string;
+    description?: string;
+    spacing?: DesignProfileSpacing;
+    radius?: DesignProfileRadius;
+    density?: DesignProfileDensity;
+    typography?: DesignProfileTypography;
+    elevation?: DesignProfileElevation;
+    motion?: DesignProfileMotion;
+    customProperties?: Record<`--${string}`, string>;
+}
+export interface DesignProfileChangeDetail {
+    profileName: string;
+}
+export interface DesignProfileController {
+    start(): void;
+    stop(): void;
+    setProfile(name: string): void;
+    getProfile(): string;
+}
+export interface DesignProfileControllerOptions {
+    root?: HTMLElement;
+    profile?: string;
+    registerBuiltIns?: boolean;
+    profileAttribute?: string | null;
+    storageKey?: string | null;
+    storage?: Storage | null;
+}
+export interface ApplyDesignProfileOptions {
+    selector?: string;
+}

package/dist/foundations/profiles/types.js

@@ -0,0 +1 @@
+export {};

package/dist/foundations/theming/controller.d.ts

@@ -0,0 +1,37 @@
+export declare const THEME_CHANGE_EVENT = "boe:theme-change";
+export declare const DEFAULT_THEME_STORAGE_KEY = "boe-theme";
+export declare const DARK_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export type ThemePreference = "light" | "dark" | "system";
+export type ResolvedTheme = Exclude<ThemePreference, "system">;
+export interface ThemeChangeDetail {
+    preference: ThemePreference;
+    resolvedTheme: ResolvedTheme;
+    designSystemName: string;
+}
+export interface ThemeControllerOptions {
+    root?: HTMLElement;
+    preference?: ThemePreference;
+    storageKey?: string | null;
+    storage?: Storage | null;
+    mediaQueryList?: MediaQueryList | null;
+    lightDesignSystem?: string;
+    darkDesignSystem?: string;
+    registerBuiltIns?: boolean;
+    themeAttribute?: string | null;
+    applyColorScheme?: boolean;
+}
+export interface ThemeController {
+    start(): void;
+    stop(): void;
+    toggle(): void;
+    setPreference(preference: ThemePreference): void;
+    getPreference(): ThemePreference;
+    getResolvedTheme(): ResolvedTheme;
+}
+export interface ThemeInitializationScriptOptions {
+    preference?: ThemePreference;
+    storageKey?: string | null;
+    themeAttribute?: string | null;
+}
+export declare const createThemeInitializationScript: (options?: ThemeInitializationScriptOptions) => string;
+export declare const createThemeController: (options?: ThemeControllerOptions) => ThemeController;

package/dist/foundations/theming/controller.js

@@ -0,0 +1,176 @@
+import { applyDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, setActiveDesignSystem, } from "../tokens/index.js";
+export const THEME_CHANGE_EVENT = "boe:theme-change";
+export const DEFAULT_THEME_STORAGE_KEY = "boe-theme";
+export const DARK_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const isThemePreference = (value) => value === "light" || value === "dark" || value === "system";
+const resolveDefaultRoot = () => typeof document === "undefined" ? null : document.documentElement;
+const resolveDefaultStorage = () => {
+    try {
+        return typeof localStorage === "undefined" ? null : localStorage;
+    }
+    catch {
+        return null;
+    }
+};
+const resolveDefaultMediaQueryList = () => typeof matchMedia === "function" ? matchMedia(DARK_MODE_MEDIA_QUERY) : null;
+const safeStoredPreference = (storage, storageKey) => {
+    if (!storage || !storageKey) {
+        return null;
+    }
+    try {
+        const value = storage.getItem(storageKey);
+        return isThemePreference(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+};
+const persistPreference = (storage, storageKey, preference) => {
+    if (!storage || !storageKey) {
+        return;
+    }
+    try {
+        storage.setItem(storageKey, preference);
+    }
+    catch {
+        // Storage may be unavailable in privacy-restricted or embedded contexts.
+    }
+};
+const escapeInlineScriptValue = (value) => JSON.stringify(value).replaceAll("<", "\\u003c");
+export const createThemeInitializationScript = (options = {}) => {
+    const preference = options.preference ?? "system";
+    const storageKey = options.storageKey === undefined
+        ? DEFAULT_THEME_STORAGE_KEY
+        : options.storageKey;
+    const themeAttribute = options.themeAttribute === undefined
+        ? "data-theme"
+        : options.themeAttribute;
+    return `(() => {
+  const fallback = ${escapeInlineScriptValue(preference)};
+  let preference = fallback;
+  try {
+    const stored = ${storageKey ? `localStorage.getItem(${escapeInlineScriptValue(storageKey)})` : "null"};
+    if (stored === "light" || stored === "dark" || stored === "system") preference = stored;
+  } catch {}
+  const resolved = preference === "system"
+    ? (typeof matchMedia === "function" && matchMedia(${escapeInlineScriptValue(DARK_MODE_MEDIA_QUERY)}).matches ? "dark" : "light")
+    : preference;
+  ${themeAttribute ? `document.documentElement.setAttribute(${escapeInlineScriptValue(themeAttribute)}, resolved);` : ""}
+  document.documentElement.style.colorScheme = resolved;
+})();`;
+};
+export const createThemeController = (options = {}) => {
+    const defaultPreference = options.preference ?? "system";
+    const storageKey = options.storageKey === undefined
+        ? DEFAULT_THEME_STORAGE_KEY
+        : options.storageKey;
+    const lightDesignSystem = options.lightDesignSystem ?? "box-default";
+    const darkDesignSystem = options.darkDesignSystem ?? "box-dark";
+    const themeAttribute = options.themeAttribute === undefined
+        ? "data-theme"
+        : options.themeAttribute;
+    const shouldApplyColorScheme = options.applyColorScheme ?? true;
+    let preference = defaultPreference;
+    let resolvedTheme = "light";
+    let root = options.root ?? null;
+    let storage = options.storage ?? null;
+    let mediaQueryList = options.mediaQueryList ?? null;
+    const shouldResolveDefaultStorage = options.storage === undefined;
+    const shouldResolveDefaultMediaQuery = options.mediaQueryList === undefined;
+    let started = false;
+    let appliedVariables = new Set();
+    const resolveTheme = () => preference === "system"
+        ? (mediaQueryList?.matches ? "dark" : "light")
+        : preference;
+    const emitThemeChange = (designSystemName) => {
+        if (!root || typeof CustomEvent === "undefined") {
+            return;
+        }
+        root.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                preference,
+                resolvedTheme,
+                designSystemName,
+            },
+        }));
+    };
+    const applyTheme = () => {
+        if (!root) {
+            throw new Error("ThemeController requires a root HTMLElement");
+        }
+        resolvedTheme = resolveTheme();
+        const designSystemName = resolvedTheme === "dark"
+            ? darkDesignSystem
+            : lightDesignSystem;
+        setActiveDesignSystem(designSystemName);
+        const nextVariables = new Set(applyDesignTokens(root, designSystemName));
+        for (const variable of appliedVariables) {
+            if (!nextVariables.has(variable)) {
+                root.style.removeProperty(variable);
+            }
+        }
+        appliedVariables = nextVariables;
+        if (themeAttribute) {
+            root.setAttribute(themeAttribute, resolvedTheme);
+        }
+        if (shouldApplyColorScheme) {
+            root.style.colorScheme = resolvedTheme;
+        }
+        emitThemeChange(designSystemName);
+    };
+    const handleSystemThemeChange = () => {
+        if (started && preference === "system") {
+            applyTheme();
+        }
+    };
+    const start = () => {
+        if (started) {
+            return;
+        }
+        root ??= resolveDefaultRoot();
+        if (shouldResolveDefaultStorage) {
+            storage = resolveDefaultStorage();
+        }
+        if (shouldResolveDefaultMediaQuery) {
+            mediaQueryList = resolveDefaultMediaQueryList();
+        }
+        if (!root) {
+            throw new Error("ThemeController cannot start without a document root");
+        }
+        if (options.registerBuiltIns ?? true) {
+            registerBoxDefaultDesignSystem();
+            registerBoxDarkDesignSystem();
+        }
+        preference = safeStoredPreference(storage, storageKey) ?? defaultPreference;
+        mediaQueryList?.addEventListener("change", handleSystemThemeChange);
+        started = true;
+        applyTheme();
+    };
+    const stop = () => {
+        if (!started) {
+            return;
+        }
+        mediaQueryList?.removeEventListener("change", handleSystemThemeChange);
+        started = false;
+    };
+    const setPreference = (nextPreference) => {
+        if (!isThemePreference(nextPreference)) {
+            throw new Error(`Unknown theme preference: ${String(nextPreference)}`);
+        }
+        preference = nextPreference;
+        persistPreference(storage, storageKey, preference);
+        if (started) {
+            applyTheme();
+        }
+    };
+    return {
+        start,
+        stop,
+        toggle: () => setPreference(resolvedTheme === "dark" ? "light" : "dark"),
+        setPreference,
+        getPreference: () => preference,
+        getResolvedTheme: () => resolvedTheme,
+    };
+};

package/dist/foundations/theming/index.d.ts

@@ -0,0 +1,2 @@
+export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./controller.js";
+export type { ResolvedTheme, ThemeChangeDetail, ThemeController, ThemeControllerOptions, ThemeInitializationScriptOptions, ThemePreference, } from "./controller.js";

package/dist/foundations/theming/index.js

@@ -0,0 +1 @@
+export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./controller.js";

package/dist/foundations/tokens/box-dark.d.ts

@@ -1,11 +1,11 @@
-import type { DesignSystemDefinition } from "./types.js";
+import type { RegisteredDesignSystemDefinition } from "./types.js";
 /**
  * Box dark theme. Same token keys, icons, and illustrations as
  * `boxDefaultDesignSystem` — only the surface / text / stroke / status values
  * change, so every component that consumes `--boe-token-*` re-themes with no
  * markup change when this bundle is made active.
  */
-export declare const boxDarkDesignSystem: DesignSystemDefinition;
+export declare const boxDarkDesignSystem: RegisteredDesignSystemDefinition;
 export declare const registerBoxDarkDesignSystem: (options?: {
     setActive?: boolean;
-}) => DesignSystemDefinition;
+}) => RegisteredDesignSystemDefinition;

package/dist/foundations/tokens/box-defaults.d.ts

@@ -1,5 +1,5 @@
-import type { DesignSystemDefinition } from "./types.js";
-export declare const boxDefaultDesignSystem: DesignSystemDefinition;
+import type { RegisteredDesignSystemDefinition } from "./types.js";
+export declare const boxDefaultDesignSystem: RegisteredDesignSystemDefinition;
 export declare const registerBoxDefaultDesignSystem: (options?: {
     setActive?: boolean;
-}) => DesignSystemDefinition;
+}) => RegisteredDesignSystemDefinition;

package/dist/foundations/tokens/index.d.ts

@@ -1,5 +1,5 @@
-export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
 export { boxDefaultDesignSystem, registerBoxDefaultDesignSystem } from "./box-defaults.js";
 export { boxDarkDesignSystem, registerBoxDarkDesignSystem } from "./box-dark.js";
 export { boeBrandInteractiveStyles, boeFocusRingShadow, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "./interaction.js";
-export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenMap, } from "./types.js";
+export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenInput, DesignTokenMap, RegisteredDesignSystemDefinition, SemanticDesignTokenMap, } from "./types.js";

package/dist/foundations/tokens/index.js

@@ -1,4 +1,4 @@
-export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./registry.js";
 export { boxDefaultDesignSystem, registerBoxDefaultDesignSystem } from "./box-defaults.js";
 export { boxDarkDesignSystem, registerBoxDarkDesignSystem } from "./box-dark.js";
 export { boeBrandInteractiveStyles, boeFocusRingShadow, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "./interaction.js";