@unofficialbox/box-open-elements 0.3.0 → 0.5.0

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";

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

@@ -1,14 +1,44 @@
-import type { ApplyDesignTokensOptions, DesignSystemDefinition, DesignTokenMap } from "./types.js";
+import type { ApplyDesignTokensOptions, DesignSystemDefinition, DesignTokenInput, DesignTokenMap, RegisteredDesignSystemDefinition } from "./types.js";
 export declare const DESIGN_SYSTEM_CHANGE_EVENT = "boe:design-system-change";
+export declare const SEMANTIC_TOKEN_ALIASES: {
+    readonly fontFamilyBase: "FontFamilyBase";
+    readonly surfacePrimary: "SurfaceSurface";
+    readonly surfacePrimaryHover: "SurfaceSurfaceHover";
+    readonly surfaceSecondary: "SurfaceSurfaceSecondary";
+    readonly surfaceTertiary: "SurfaceSurfaceTertiary";
+    readonly surfaceQuaternary: "SurfaceSurfaceQuaternary";
+    readonly surfaceBrand: "SurfaceSurfaceBrand";
+    readonly surfaceBrandHover: "SurfaceSurfaceBrandHover";
+    readonly surfaceBrandPressed: "SurfaceSurfaceBrandPressed";
+    readonly surfaceSearch: "SurfaceSearchSurface";
+    readonly surfaceItemSelected: "SurfaceItemSurfaceSelected";
+    readonly surfaceItemHover: "SurfaceItemSurfaceHover";
+    readonly surfaceTooltip: "SurfaceTooltipSurface";
+    readonly surfaceStatusSuccess: "SurfaceStatusSurfaceSuccess";
+    readonly surfaceStatusError: "SurfaceStatusSurfaceError";
+    readonly surfaceStatusInProgress: "SurfaceStatusSurfaceInprogress";
+    readonly surfaceStatusAccent: "SurfaceStatusSurfaceAccent";
+    readonly surfaceIllustrationBoxNeutral: "SurfaceIllustrationSurfaceBoxNeutral";
+    readonly surfaceBadgeFolderShared: "SurfaceBadgeFoldersharedSurface";
+    readonly surfaceBadgePdf: "SurfaceBadgePdfSurface";
+    readonly textPrimary: "TextText";
+    readonly textSecondary: "TextTextSecondary";
+    readonly textPlaceholder: "TextTextPlaceholder";
+    readonly textOnBrand: "TextTextOnBrand";
+    readonly textDanger: "TextTextDanger";
+    readonly borderDefault: "StrokeStroke";
+    readonly borderHover: "StrokeStrokeHover";
+};
+export declare const normalizeDesignTokens: (tokens: DesignTokenInput) => DesignTokenMap;
 export declare const registerDesignSystem: (definition: DesignSystemDefinition, options?: {
     setActive?: boolean;
-}) => DesignSystemDefinition;
-export declare const getDesignSystem: (name: string | null | undefined) => DesignSystemDefinition | null;
+}) => RegisteredDesignSystemDefinition;
+export declare const getDesignSystem: (name: string | null | undefined) => RegisteredDesignSystemDefinition | null;
 export declare const setActiveDesignSystem: (name: string | null) => void;
-export declare const getActiveDesignSystem: () => DesignSystemDefinition | null;
-export declare const listDesignSystems: () => DesignSystemDefinition[];
+export declare const getActiveDesignSystem: () => RegisteredDesignSystemDefinition | null;
+export declare const listDesignSystems: () => RegisteredDesignSystemDefinition[];
 export declare const resolveDesignSystemTokens: (name?: string | null) => DesignTokenMap;
-export declare const applyDesignTokens: (target: HTMLElement, tokensOrSystemName?: DesignTokenMap | string | null, options?: ApplyDesignTokensOptions) => string[];
-export declare const createDesignTokenStyleText: (tokensOrSystemName?: DesignTokenMap | string | null, options?: ApplyDesignTokensOptions) => string;
+export declare const applyDesignTokens: (target: HTMLElement, tokensOrSystemName?: DesignTokenInput | string | null, options?: ApplyDesignTokensOptions) => string[];
+export declare const createDesignTokenStyleText: (tokensOrSystemName?: DesignTokenInput | string | null, options?: ApplyDesignTokensOptions) => string;
 export declare const resolveDesignIcon: (iconName: string, systemName?: string | null) => string | null;
 export declare const resolveDesignIllustration: (illustrationName: string, systemName?: string | null) => string | null;

package/dist/foundations/tokens/registry.js

@@ -2,6 +2,50 @@ export const DESIGN_SYSTEM_CHANGE_EVENT = "boe:design-system-change";
 const DEFAULT_TOKEN_PREFIX = "--boe-token-";
 const designSystems = new Map();
 let activeDesignSystemName = null;
+export const SEMANTIC_TOKEN_ALIASES = {
+    fontFamilyBase: "FontFamilyBase",
+    surfacePrimary: "SurfaceSurface",
+    surfacePrimaryHover: "SurfaceSurfaceHover",
+    surfaceSecondary: "SurfaceSurfaceSecondary",
+    surfaceTertiary: "SurfaceSurfaceTertiary",
+    surfaceQuaternary: "SurfaceSurfaceQuaternary",
+    surfaceBrand: "SurfaceSurfaceBrand",
+    surfaceBrandHover: "SurfaceSurfaceBrandHover",
+    surfaceBrandPressed: "SurfaceSurfaceBrandPressed",
+    surfaceSearch: "SurfaceSearchSurface",
+    surfaceItemSelected: "SurfaceItemSurfaceSelected",
+    surfaceItemHover: "SurfaceItemSurfaceHover",
+    surfaceTooltip: "SurfaceTooltipSurface",
+    surfaceStatusSuccess: "SurfaceStatusSurfaceSuccess",
+    surfaceStatusError: "SurfaceStatusSurfaceError",
+    surfaceStatusInProgress: "SurfaceStatusSurfaceInprogress",
+    surfaceStatusAccent: "SurfaceStatusSurfaceAccent",
+    surfaceIllustrationBoxNeutral: "SurfaceIllustrationSurfaceBoxNeutral",
+    surfaceBadgeFolderShared: "SurfaceBadgeFoldersharedSurface",
+    surfaceBadgePdf: "SurfaceBadgePdfSurface",
+    textPrimary: "TextText",
+    textSecondary: "TextTextSecondary",
+    textPlaceholder: "TextTextPlaceholder",
+    textOnBrand: "TextTextOnBrand",
+    textDanger: "TextTextDanger",
+    borderDefault: "StrokeStroke",
+    borderHover: "StrokeStrokeHover",
+};
+export const normalizeDesignTokens = (tokens) => {
+    const normalized = {};
+    const sourceNames = new Map();
+    for (const [tokenName, tokenValue] of Object.entries(tokens)) {
+        const canonicalName = SEMANTIC_TOKEN_ALIASES[tokenName] ??
+            tokenName;
+        const existingSourceName = sourceNames.get(canonicalName);
+        if (existingSourceName && existingSourceName !== tokenName) {
+            throw new Error(`Design token "${canonicalName}" was provided as both "${existingSourceName}" and "${tokenName}"`);
+        }
+        normalized[canonicalName] = tokenValue;
+        sourceNames.set(canonicalName, tokenName);
+    }
+    return normalized;
+};
 const toKebabCase = (value) => value
     .replace(/^--/, "")
     .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
@@ -29,12 +73,18 @@ const renderAsset = (asset, context) => {
     return typeof asset === "function" ? asset(context) : asset;
 };
 export const registerDesignSystem = (definition, options = {}) => {
-    designSystems.set(definition.name, definition);
+    const normalizedDefinition = {
+        ...definition,
+        tokens: definition.tokens
+            ? normalizeDesignTokens(definition.tokens)
+            : undefined,
+    };
+    designSystems.set(definition.name, normalizedDefinition);
     if (options.setActive) {
         activeDesignSystemName = definition.name;
         emitDesignSystemChange();
     }
-    return definition;
+    return normalizedDefinition;
 };
 export const getDesignSystem = (name) => {
     if (!name) {
@@ -53,13 +103,13 @@ export const getActiveDesignSystem = () => activeDesignSystemName ? getDesignSys
 export const listDesignSystems = () => Array.from(designSystems.values());
 export const resolveDesignSystemTokens = (name) => {
     const system = name === undefined ? getActiveDesignSystem() : getDesignSystem(name);
-    return system?.tokens ?? {};
+    return system?.tokens ? normalizeDesignTokens(system.tokens) : {};
 };
 export const applyDesignTokens = (target, tokensOrSystemName, options = {}) => {
     const prefix = options.prefix ?? DEFAULT_TOKEN_PREFIX;
     const tokens = typeof tokensOrSystemName === "string" || tokensOrSystemName == null
         ? resolveDesignSystemTokens(tokensOrSystemName)
-        : tokensOrSystemName;
+        : normalizeDesignTokens(tokensOrSystemName);
     const appliedVariables = [];
     for (const [tokenName, tokenValue] of Object.entries(tokens)) {
         const variableName = resolveTokenVariableName(tokenName, prefix);
@@ -73,7 +123,7 @@ export const createDesignTokenStyleText = (tokensOrSystemName, options = {}) =>
     const selector = options.selector ?? ":root";
     const tokens = typeof tokensOrSystemName === "string" || tokensOrSystemName == null
         ? resolveDesignSystemTokens(tokensOrSystemName)
-        : tokensOrSystemName;
+        : normalizeDesignTokens(tokensOrSystemName);
     const declarations = Object.entries(tokens)
         .map(([tokenName, tokenValue]) => `  ${resolveTokenVariableName(tokenName, prefix)}: ${tokenValue};`)
         .join("\n");

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

@@ -1,4 +1,38 @@
 export type DesignTokenMap = Record<string, string>;
+/**
+ * Preferred authoring names for the semantic tokens consumed by the component
+ * catalog. The registry translates these names to Box-compatible token keys.
+ */
+export interface SemanticDesignTokenMap {
+    fontFamilyBase?: string;
+    surfacePrimary?: string;
+    surfacePrimaryHover?: string;
+    surfaceSecondary?: string;
+    surfaceTertiary?: string;
+    surfaceQuaternary?: string;
+    surfaceBrand?: string;
+    surfaceBrandHover?: string;
+    surfaceBrandPressed?: string;
+    surfaceSearch?: string;
+    surfaceItemSelected?: string;
+    surfaceItemHover?: string;
+    surfaceTooltip?: string;
+    surfaceStatusSuccess?: string;
+    surfaceStatusError?: string;
+    surfaceStatusInProgress?: string;
+    surfaceStatusAccent?: string;
+    surfaceIllustrationBoxNeutral?: string;
+    surfaceBadgeFolderShared?: string;
+    surfaceBadgePdf?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    textPlaceholder?: string;
+    textOnBrand?: string;
+    textDanger?: string;
+    borderDefault?: string;
+    borderHover?: string;
+}
+export type DesignTokenInput = DesignTokenMap | SemanticDesignTokenMap;
 export interface DesignAssetRenderContext {
     kind: "icon" | "illustration";
     name: string;
@@ -6,10 +40,13 @@ export interface DesignAssetRenderContext {
 export type DesignAssetRenderer = string | ((context: DesignAssetRenderContext) => string);
 export interface DesignSystemDefinition {
     name: string;
-    tokens?: DesignTokenMap;
+    tokens?: DesignTokenInput;
     icons?: Record<string, DesignAssetRenderer>;
     illustrations?: Record<string, DesignAssetRenderer>;
 }
+export interface RegisteredDesignSystemDefinition extends Omit<DesignSystemDefinition, "tokens"> {
+    tokens?: DesignTokenMap;
+}
 export interface ApplyDesignTokensOptions {
     prefix?: string;
     selector?: string;

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 export { Controller, TypedEventEmitter } from "./core/index.js";
 export type { EventMap, Unsubscribe } from "./core/index.js";
 export type { JsonSchema } from "./core/json-schema.js";
-export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
-export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenMap, } from "./foundations/tokens/index.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
+export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenInput, DesignTokenMap, RegisteredDesignSystemDefinition, SemanticDesignTokenMap, } from "./foundations/tokens/index.js";
+export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./foundations/theming/index.js";
+export type { ResolvedTheme, ThemeChangeDetail, ThemeController, ThemeControllerOptions, ThemeInitializationScriptOptions, ThemePreference, } from "./foundations/theming/index.js";
+export { DESIGN_PROFILE_CHANGE_EVENT, DESIGN_PROFILE_VARIABLES, DEFAULT_DESIGN_PROFILE_STORAGE_KEY, applyDesignProfile, boxDefaultDesignProfile, compactNeutralDesignProfile, createDesignProfileController, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerBuiltInDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./foundations/profiles/index.js";
+export type { ApplyDesignProfileOptions, DesignProfileChangeDetail, DesignProfileController, DesignProfileControllerOptions, DesignProfileDefinition, DesignProfileDensity, DesignProfileElevation, DesignProfileMotion, DesignProfileRadius, DesignProfileSpacing, DesignProfileTypography, } from "./foundations/profiles/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 export type { OverlayAlign, OverlayPlacement, OverlaySide, PositionOptions, PositionResult, } from "./foundations/overlay/index.js";
@@ -80,6 +84,7 @@ export * from "./components/layout/split-view.js";
 export * from "./components/overlays/context-menu.js";
 export * from "./components/overlays/dialog.js";
 export * from "./components/overlays/drawer.js";
+export * from "./components/overlays/guide-tooltip.js";
 export * from "./components/overlays/popover.js";
 export * from "./components/overlays/tooltip.js";
 export * from "./patterns/content-explorer/index.js";

package/dist/index.js

@@ -1,7 +1,9 @@
 // Core runtime
 export { Controller, TypedEventEmitter } from "./core/index.js";
 // Foundations
-export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
+export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, normalizeDesignTokens, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
+export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./foundations/theming/index.js";
+export { DESIGN_PROFILE_CHANGE_EVENT, DESIGN_PROFILE_VARIABLES, DEFAULT_DESIGN_PROFILE_STORAGE_KEY, applyDesignProfile, boxDefaultDesignProfile, compactNeutralDesignProfile, createDesignProfileController, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerBuiltInDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./foundations/profiles/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
 // Foundations: viewport-aware overlay positioning (for building custom overlays)
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
@@ -89,6 +91,7 @@ export * from "./components/layout/split-view.js";
 export * from "./components/overlays/context-menu.js";
 export * from "./components/overlays/dialog.js";
 export * from "./components/overlays/drawer.js";
+export * from "./components/overlays/guide-tooltip.js";
 export * from "./components/overlays/popover.js";
 export * from "./components/overlays/tooltip.js";
 // Patterns: content explorer (headless blocks, contracts, transport, adapters)

package/dist/patterns/content-explorer/adapters/action-menu.d.ts

@@ -1,6 +1,7 @@
 import { ContentExplorerController } from "../controller.js";
 import { BaseElement } from "../../../core/index.js";
-export declare class BoxExplorerActionMenuElement extends BaseElement {
+export declare class ExplorerActionMenu extends BaseElement {
+    static readonly tagName: string;
     private controllerValue;
     private itemIdValue;
     private open;
@@ -21,4 +22,3 @@ export declare class BoxExplorerActionMenuElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxExplorerActionMenuElement: (tagName?: string) => typeof BoxExplorerActionMenuElement;

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -114,7 +114,8 @@ const elementStyles = `
 
         ${boeNeutralInteractiveStyles('[part="menu-item"]')}
       `;
-export class BoxExplorerActionMenuElement extends BaseElement {
+export class ExplorerActionMenu extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     controllerValue = null;
     itemIdValue = null;
     open = false;
@@ -302,11 +303,4 @@ export class BoxExplorerActionMenuElement extends BaseElement {
         }
     }
 }
-export const defineBoxExplorerActionMenuElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxExplorerActionMenuElement);
-    return BoxExplorerActionMenuElement;
-};
+ExplorerActionMenu.register();

package/dist/patterns/content-explorer/adapters/breadcrumbs.d.ts

@@ -1,6 +1,7 @@
 import { ContentExplorerController } from "../controller.js";
 import { BaseElement } from "../../../core/index.js";
-export declare class BoxExplorerBreadcrumbsElement extends BaseElement {
+export declare class ExplorerBreadcrumbs extends BaseElement {
+    static readonly tagName: string;
     private controllerValue;
     private unsubscribeFns;
     get controller(): ContentExplorerController | null;
@@ -12,4 +13,3 @@ export declare class BoxExplorerBreadcrumbsElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxExplorerBreadcrumbsElement: (tagName?: string) => typeof BoxExplorerBreadcrumbsElement;

package/dist/patterns/content-explorer/adapters/breadcrumbs.js

@@ -72,7 +72,8 @@ const elementStyles = `
           font-size: 0.9rem;
         }
       `;
-export class BoxExplorerBreadcrumbsElement extends BaseElement {
+export class ExplorerBreadcrumbs extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     controllerValue = null;
     unsubscribeFns = [];
     get controller() {
@@ -151,11 +152,4 @@ export class BoxExplorerBreadcrumbsElement extends BaseElement {
         });
     }
 }
-export const defineBoxExplorerBreadcrumbsElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxExplorerBreadcrumbsElement);
-    return BoxExplorerBreadcrumbsElement;
-};
+ExplorerBreadcrumbs.register();

package/dist/patterns/content-explorer/adapters/items.d.ts

@@ -1,4 +1,4 @@
-import { BoxExplorerListElement } from "./list.js";
-export declare class BoxExplorerItemsElement extends BoxExplorerListElement {
+import { ExplorerList } from "./list.js";
+export declare class ExplorerItems extends ExplorerList {
+    static readonly tagName: string;
 }
-export declare const defineBoxExplorerItemsElement: (tagName?: string) => typeof BoxExplorerItemsElement;

package/dist/patterns/content-explorer/adapters/items.js

@@ -1,12 +1,6 @@
-import { BoxExplorerListElement } from "./list.js";
+import { ExplorerList } from "./list.js";
 const DEFAULT_TAG_NAME = "box-explorer-items";
-export class BoxExplorerItemsElement extends BoxExplorerListElement {
+export class ExplorerItems extends ExplorerList {
+    static tagName = DEFAULT_TAG_NAME;
 }
-export const defineBoxExplorerItemsElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxExplorerItemsElement);
-    return BoxExplorerItemsElement;
-};
+ExplorerItems.register();

package/dist/patterns/content-explorer/adapters/list.d.ts

@@ -1,7 +1,8 @@
 import { ContentExplorerController } from "../controller.js";
 import { resolveExplorerItemGesture } from "../types.js";
 import { BaseElement } from "../../../core/index.js";
-export declare class BoxExplorerListElement extends BaseElement {
+export declare class ExplorerList extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private controllerValue;
     private focusItemId;
@@ -25,4 +26,3 @@ export declare class BoxExplorerListElement extends BaseElement {
     private patchFocusAndSelection;
     protected update(): void;
 }
-export declare const defineBoxExplorerListElement: (tagName?: string) => typeof BoxExplorerListElement;

package/dist/patterns/content-explorer/adapters/list.js

@@ -191,7 +191,8 @@ const elementStyles = `
 
         ${boeNeutralInteractiveStyles('[part="load-more"]')}
       `;
-export class BoxExplorerListElement extends BaseElement {
+export class ExplorerList extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["item-gesture"];
     }
@@ -517,11 +518,4 @@ export class BoxExplorerListElement extends BaseElement {
         this.patchFocusAndSelection();
     }
 }
-export const defineBoxExplorerListElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxExplorerListElement);
-    return BoxExplorerListElement;
-};
+ExplorerList.register();

package/dist/patterns/content-explorer/adapters/table.d.ts

@@ -1,7 +1,8 @@
 import { ContentExplorerController } from "../controller.js";
 import { resolveExplorerItemGesture } from "../types.js";
 import { BaseElement } from "../../../core/index.js";
-export declare class BoxExplorerTableElement extends BaseElement {
+export declare class ExplorerTable extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private controllerValue;
     private unsubscribeFns;
@@ -20,4 +21,3 @@ export declare class BoxExplorerTableElement extends BaseElement {
     private patchSelection;
     protected update(): void;
 }
-export declare const defineBoxExplorerTableElement: (tagName?: string) => typeof BoxExplorerTableElement;