baseline-foundry 0.1.3

package/dist/top-navigation.js

@@ -0,0 +1,354 @@
+const ROOT_SELECTOR = ".bf-top-navigation";
+const NAV_SELECTOR = ".bf-top-navigation-nav";
+const SEARCH_SELECTOR = ".bf-top-navigation-search";
+const SEARCH_INPUT_SELECTOR = ".bf-top-navigation-search .bf-search-box-input";
+const DROPDOWN_ITEM_SELECTOR = ".bf-top-navigation-item.is-dropdown-toggle";
+const DROPDOWN_TOGGLE_SELECTOR = ".bf-top-navigation-dropdown-toggle";
+const DROPDOWN_SELECTOR = ".bf-top-navigation-dropdown";
+const MENU_TOGGLE_SELECTOR = ".bf-top-navigation-menu-toggle";
+const SEARCH_TOGGLE_SELECTOR = ".bf-top-navigation-search-toggle";
+const OVERLAY_SELECTOR = ".bf-top-navigation-search-overlay";
+const DROPDOWN_ACTION_SELECTOR = ".bf-top-navigation-dropdown-item";
+const DROPDOWN_ACTIVE_CLASS = "is-active";
+const LARGE_BREAKPOINT = "(min-width: 64.75rem)";
+let generatedIdCounter = 0;
+const lastMenuTriggerByRoot = new WeakMap();
+const lastSearchTriggerByRoot = new WeakMap();
+const lastDropdownTriggerByRoot = new WeakMap();
+const menuOpenRoots = new WeakSet();
+const searchOpenRoots = new WeakSet();
+function queryAllWithinRoot(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+    if (root instanceof Element && root.matches(selector)) {
+        elements.unshift(root);
+    }
+    return elements;
+}
+function getRootWindow(root) {
+    if (root instanceof Document) {
+        return root.defaultView;
+    }
+    return root.ownerDocument?.defaultView ?? null;
+}
+function getRoots(root) {
+    return queryAllWithinRoot(root, ROOT_SELECTOR);
+}
+function getNav(topNavigation) {
+    return topNavigation.querySelector(NAV_SELECTOR);
+}
+function getSearch(topNavigation) {
+    return topNavigation.querySelector(SEARCH_SELECTOR);
+}
+function getSearchInput(topNavigation) {
+    return topNavigation.querySelector(SEARCH_INPUT_SELECTOR);
+}
+function getDropdownItems(topNavigation) {
+    return Array.from(topNavigation.querySelectorAll(DROPDOWN_ITEM_SELECTOR));
+}
+function getDropdownToggles(topNavigation) {
+    return Array.from(topNavigation.querySelectorAll(DROPDOWN_TOGGLE_SELECTOR));
+}
+function getDropdownItemForToggle(toggle) {
+    return toggle.closest(DROPDOWN_ITEM_SELECTOR);
+}
+function getDropdownForToggle(toggle) {
+    const controlledId = toggle.getAttribute("aria-controls");
+    if (controlledId) {
+        const controlledElement = toggle.ownerDocument.getElementById(controlledId);
+        if (controlledElement instanceof HTMLElement && controlledElement.matches(DROPDOWN_SELECTOR)) {
+            return controlledElement;
+        }
+    }
+    const dropdownItem = getDropdownItemForToggle(toggle);
+    return dropdownItem?.querySelector(DROPDOWN_SELECTOR) ?? null;
+}
+function getOverlay(topNavigation) {
+    return topNavigation.querySelector(OVERLAY_SELECTOR);
+}
+function getMenuToggles(topNavigation) {
+    return Array.from(topNavigation.querySelectorAll(MENU_TOGGLE_SELECTOR));
+}
+function getSearchToggles(topNavigation) {
+    return Array.from(topNavigation.querySelectorAll(SEARCH_TOGGLE_SELECTOR));
+}
+function isLargeViewport(target) {
+    return target.ownerDocument.defaultView?.matchMedia(LARGE_BREAKPOINT).matches ?? false;
+}
+function isMenuOpen(topNavigation) {
+    return menuOpenRoots.has(topNavigation);
+}
+function isSearchOpen(topNavigation) {
+    return searchOpenRoots.has(topNavigation);
+}
+function setMenuOpen(topNavigation, isOpen) {
+    if (isOpen) {
+        menuOpenRoots.add(topNavigation);
+        return;
+    }
+    menuOpenRoots.delete(topNavigation);
+}
+function setSearchOpen(topNavigation, isOpen) {
+    if (isOpen) {
+        searchOpenRoots.add(topNavigation);
+        return;
+    }
+    searchOpenRoots.delete(topNavigation);
+}
+function isDropdownOpen(dropdownItem) {
+    return dropdownItem.classList.contains(DROPDOWN_ACTIVE_CLASS);
+}
+function hasOpenDropdown(topNavigation) {
+    return getDropdownItems(topNavigation).some(isDropdownOpen);
+}
+function ensureId(element, prefix) {
+    if (!element.id) {
+        generatedIdCounter += 1;
+        element.id = `${prefix}-${generatedIdCounter}`;
+    }
+    return element.id;
+}
+function ensureRelationships(topNavigation) {
+    const nav = getNav(topNavigation);
+    if (nav) {
+        const navId = ensureId(nav, "bf-top-navigation-nav");
+        for (const toggle of getMenuToggles(topNavigation)) {
+            if (!toggle.hasAttribute("aria-controls")) {
+                toggle.setAttribute("aria-controls", navId);
+            }
+        }
+    }
+    const search = getSearch(topNavigation);
+    if (search) {
+        const searchId = ensureId(search, "bf-top-navigation-search");
+        for (const toggle of getSearchToggles(topNavigation)) {
+            if (!toggle.hasAttribute("aria-controls")) {
+                toggle.setAttribute("aria-controls", searchId);
+            }
+        }
+    }
+    for (const toggle of getDropdownToggles(topNavigation)) {
+        const dropdown = getDropdownForToggle(toggle);
+        if (!dropdown) {
+            continue;
+        }
+        const dropdownId = ensureId(dropdown, "bf-top-navigation-dropdown");
+        if (!toggle.hasAttribute("aria-controls")) {
+            toggle.setAttribute("aria-controls", dropdownId);
+        }
+        toggle.setAttribute("aria-haspopup", "true");
+    }
+}
+function closeDropdowns(topNavigation, activeItem) {
+    for (const item of getDropdownItems(topNavigation)) {
+        item.classList.toggle(DROPDOWN_ACTIVE_CLASS, item === activeItem);
+    }
+}
+function updateA11y(topNavigation) {
+    ensureRelationships(topNavigation);
+    const menuOpen = isMenuOpen(topNavigation);
+    const searchOpen = isSearchOpen(topNavigation);
+    const largeViewport = isLargeViewport(topNavigation);
+    for (const toggle of getMenuToggles(topNavigation)) {
+        toggle.setAttribute("aria-expanded", String(menuOpen));
+    }
+    for (const toggle of getSearchToggles(topNavigation)) {
+        toggle.setAttribute("aria-expanded", String(searchOpen));
+        toggle.setAttribute("aria-pressed", String(searchOpen));
+    }
+    for (const toggle of getDropdownToggles(topNavigation)) {
+        const dropdownItem = getDropdownItemForToggle(toggle);
+        const dropdown = getDropdownForToggle(toggle);
+        const expanded = dropdownItem ? isDropdownOpen(dropdownItem) : false;
+        toggle.setAttribute("aria-expanded", String(expanded));
+        dropdown?.setAttribute("aria-hidden", String(!expanded));
+    }
+    getNav(topNavigation)?.setAttribute("aria-hidden", String(!largeViewport && !menuOpen && !searchOpen));
+    getSearch(topNavigation)?.setAttribute("aria-hidden", String(!searchOpen));
+    getOverlay(topNavigation)?.setAttribute("aria-hidden", String(!(largeViewport && searchOpen)));
+}
+function focusSearch(topNavigation) {
+    const input = getSearchInput(topNavigation);
+    if (input) {
+        queueMicrotask(() => input.focus());
+        return;
+    }
+    const search = getSearch(topNavigation);
+    const focusTarget = search?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
+    if (focusTarget) {
+        queueMicrotask(() => focusTarget.focus());
+    }
+}
+function closeAll(topNavigation, restoreFocus) {
+    const hadSearchOpen = isSearchOpen(topNavigation);
+    const hadMenuOpen = isMenuOpen(topNavigation);
+    const hadDropdownOpen = hasOpenDropdown(topNavigation);
+    setMenuOpen(topNavigation, false);
+    setSearchOpen(topNavigation, false);
+    closeDropdowns(topNavigation);
+    updateA11y(topNavigation);
+    if (!restoreFocus) {
+        return;
+    }
+    if (hadSearchOpen) {
+        lastSearchTriggerByRoot.get(topNavigation)?.focus();
+        return;
+    }
+    if (hadDropdownOpen) {
+        lastDropdownTriggerByRoot.get(topNavigation)?.focus();
+        return;
+    }
+    if (hadMenuOpen) {
+        lastMenuTriggerByRoot.get(topNavigation)?.focus();
+    }
+}
+function openMenu(topNavigation, trigger) {
+    setSearchOpen(topNavigation, false);
+    closeDropdowns(topNavigation);
+    setMenuOpen(topNavigation, true);
+    updateA11y(topNavigation);
+    if (trigger) {
+        lastMenuTriggerByRoot.set(topNavigation, trigger);
+    }
+}
+function openSearch(topNavigation, trigger) {
+    closeDropdowns(topNavigation);
+    setMenuOpen(topNavigation, false);
+    setSearchOpen(topNavigation, true);
+    updateA11y(topNavigation);
+    if (trigger) {
+        lastSearchTriggerByRoot.set(topNavigation, trigger);
+    }
+    focusSearch(topNavigation);
+}
+function openDropdown(topNavigation, trigger) {
+    const dropdownItem = getDropdownItemForToggle(trigger);
+    if (!dropdownItem) {
+        return;
+    }
+    setSearchOpen(topNavigation, false);
+    closeDropdowns(topNavigation, dropdownItem);
+    updateA11y(topNavigation);
+    lastDropdownTriggerByRoot.set(topNavigation, trigger);
+}
+function syncInitialState(root) {
+    for (const topNavigation of getRoots(root)) {
+        ensureRelationships(topNavigation);
+        if (isLargeViewport(topNavigation)) {
+            setMenuOpen(topNavigation, false);
+        }
+        if (isMenuOpen(topNavigation) && isSearchOpen(topNavigation)) {
+            setMenuOpen(topNavigation, false);
+        }
+        if (isSearchOpen(topNavigation) || (!isLargeViewport(topNavigation) && !isMenuOpen(topNavigation))) {
+            closeDropdowns(topNavigation);
+        }
+        updateA11y(topNavigation);
+    }
+}
+export function initTopNavigations(options = {}) {
+    const root = options.root ?? document;
+    const rootWindow = getRootWindow(root);
+    syncInitialState(root);
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const menuToggle = target.closest(MENU_TOGGLE_SELECTOR);
+        if (menuToggle) {
+            const topNavigation = menuToggle.closest(ROOT_SELECTOR);
+            if (!topNavigation) {
+                return;
+            }
+            event.preventDefault();
+            if (isMenuOpen(topNavigation)) {
+                closeAll(topNavigation, false);
+            }
+            else {
+                openMenu(topNavigation, menuToggle);
+            }
+            return;
+        }
+        const searchToggle = target.closest(SEARCH_TOGGLE_SELECTOR);
+        if (searchToggle) {
+            const topNavigation = searchToggle.closest(ROOT_SELECTOR);
+            if (!topNavigation) {
+                return;
+            }
+            event.preventDefault();
+            if (isSearchOpen(topNavigation)) {
+                closeAll(topNavigation, true);
+            }
+            else {
+                openSearch(topNavigation, searchToggle);
+            }
+            return;
+        }
+        const dropdownToggle = target.closest(DROPDOWN_TOGGLE_SELECTOR);
+        if (dropdownToggle) {
+            const topNavigation = dropdownToggle.closest(ROOT_SELECTOR);
+            const dropdownItem = getDropdownItemForToggle(dropdownToggle);
+            if (!topNavigation || !dropdownItem) {
+                return;
+            }
+            event.preventDefault();
+            lastDropdownTriggerByRoot.set(topNavigation, dropdownToggle);
+            if (isDropdownOpen(dropdownItem)) {
+                closeDropdowns(topNavigation);
+                updateA11y(topNavigation);
+            }
+            else {
+                openDropdown(topNavigation, dropdownToggle);
+            }
+            return;
+        }
+        const overlay = target.closest(OVERLAY_SELECTOR);
+        if (overlay) {
+            const topNavigation = overlay.closest(ROOT_SELECTOR);
+            if (!topNavigation) {
+                return;
+            }
+            event.preventDefault();
+            closeAll(topNavigation, true);
+            return;
+        }
+        const dropdownAction = target.closest(DROPDOWN_ACTION_SELECTOR);
+        if (dropdownAction) {
+            const topNavigation = dropdownAction.closest(ROOT_SELECTOR);
+            if (topNavigation && hasOpenDropdown(topNavigation)) {
+                closeAll(topNavigation, false);
+            }
+            return;
+        }
+        const clickedTopNavigation = target.closest(ROOT_SELECTOR);
+        for (const topNavigation of getRoots(root)) {
+            if (clickedTopNavigation && topNavigation === clickedTopNavigation) {
+                continue;
+            }
+            if (isMenuOpen(topNavigation) || isSearchOpen(topNavigation) || hasOpenDropdown(topNavigation)) {
+                closeAll(topNavigation, false);
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        if (!(event instanceof KeyboardEvent) || event.key !== "Escape") {
+            return;
+        }
+        for (const topNavigation of getRoots(root)) {
+            if (isMenuOpen(topNavigation) || isSearchOpen(topNavigation) || hasOpenDropdown(topNavigation)) {
+                closeAll(topNavigation, true);
+            }
+        }
+    };
+    const onResize = () => {
+        syncInitialState(root);
+    };
+    root.addEventListener("click", onClick);
+    root.addEventListener("keydown", onKeyDown);
+    rootWindow?.addEventListener("resize", onResize);
+    return () => {
+        root.removeEventListener("click", onClick);
+        root.removeEventListener("keydown", onKeyDown);
+        rootWindow?.removeEventListener("resize", onResize);
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,155 @@
+export interface ThemeFontFile {
+    family: string;
+    path: string;
+    cssFamily?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    fontStretch?: string;
+    fontDisplay?: string;
+    emitFontFace?: boolean;
+    runtimeOnly?: boolean;
+}
+export interface ThemeElementConfig {
+    identifier: string;
+    fontSize: number;
+    lineHeight: number;
+    spaceAfter: number;
+    fontFamily?: string;
+    fontWeight?: number;
+    fontStyle?: string;
+    fontVariantCaps?: string;
+    letterSpacing?: string;
+    textTransform?: string;
+}
+export interface ThemeLayoutConfig {
+    contentMaxWidthRem: number;
+    contentPaddingInlineRem: number;
+    measureRem: number;
+    sectionSpaceBaselineUnits: number;
+    sectionSpaceShallowBaselineUnits: number;
+    sectionSpaceDeepBaselineUnits: number;
+    stripSpaceBaselineUnits: number;
+    gridGapInlineBaselineUnits: number;
+    gridGapBlockBaselineUnits: number;
+    pageMarginBaselineUnits: number;
+}
+export interface ThemeComponentsConfig {
+    borderWidthPx: number;
+    radiusRem: number;
+    controlBlockPaddingRem: number;
+    controlCompactBlockPaddingRem?: number;
+    controlInlinePaddingRem: number;
+    controlInlinePaddingActionRem?: number;
+    controlInlinePaddingFieldRem?: number;
+    controlVisualSizeRem: number;
+    fieldGapBaselineUnits: number;
+    panelPaddingInlineBaselineUnits: number;
+    panelPaddingBlockBaselineUnits: number;
+    accordionIndentBaselineUnits: number;
+}
+export interface ThemeConfig {
+    baselineUnit: number;
+    fontFiles: ThemeFontFile[];
+    fontStacks: Record<string, string>;
+    elements: ThemeElementConfig[];
+    roles: Record<string, string>;
+    layout: ThemeLayoutConfig;
+    components: ThemeComponentsConfig;
+}
+export interface BaselineGeneratorElementToken {
+    fontSize: string;
+    lineHeight: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    fontStyle?: string;
+    spaceAfter: string;
+    nudgeTop: string;
+}
+export interface BaselineGeneratorTokens {
+    baselineUnit: string;
+    fontFiles: ThemeFontFile[];
+    elements: Record<string, BaselineGeneratorElementToken>;
+}
+export interface TypographyToken extends BaselineGeneratorElementToken {
+    identifier: string;
+    fontStack: string;
+    marginBottom: string;
+    fontVariantCaps?: string;
+    letterSpacing?: string;
+    textTransform?: string;
+}
+export interface LayoutTokens {
+    contentMaxWidth: string;
+    contentPaddingInline: string;
+    measure: string;
+    sectionSpace: string;
+    sectionSpaceShallow: string;
+    sectionSpaceDeep: string;
+    stripSpace: string;
+    gridGapInline: string;
+    gridGapBlock: string;
+    pageMargin: string;
+}
+export interface ComponentTokens {
+    borderWidth: string;
+    barThickness: string;
+    radius: string;
+    controlBlockPadding: string;
+    controlCompactBlockPadding: string;
+    controlInlinePadding: string;
+    controlInlinePaddingAction: string;
+    controlInlinePaddingField: string;
+    controlVisualSize: string;
+    fieldGap: string;
+    panelPaddingInline: string;
+    panelPaddingBlock: string;
+    accordionIndent: string;
+}
+export interface ThemeTokens {
+    baselineUnit: string;
+    fontFiles: ThemeFontFile[];
+    fontStacks: Record<string, string>;
+    roles: Record<string, TypographyToken>;
+    elements: Record<string, TypographyToken>;
+    layout: LayoutTokens;
+    components: ComponentTokens;
+}
+export interface ThemeSurface {
+    name: string;
+    label?: string;
+    className?: string;
+    engine: string;
+    configPath: string;
+    baselineConfigPath: string;
+    baselineTokensPath: string;
+    tokens: ThemeTokens;
+    metrics: BaselineGeneratorTokens;
+}
+export interface ThemeSurfaceManifestEntry {
+    label?: string;
+    className?: string;
+    engine: string;
+    tokens: ThemeTokens;
+    metrics: BaselineGeneratorTokens;
+}
+export interface ThemeSurfaceManifest {
+    defaultSurface: string;
+    surfaces: Record<string, ThemeSurfaceManifestEntry>;
+}
+export interface BuildThemeResult {
+    configPath: string;
+    baselineConfigPath: string;
+    baselineTokensPath: string;
+    tokensPath: string;
+    cssPath: string;
+    surfaceManifestPath: string;
+    tokens: ThemeTokens;
+    css: string;
+    surfaces: ThemeSurfaceManifest;
+}
+export interface DeriveBaselineTokensResult {
+    configPath: string;
+    baselineConfigPath: string;
+    baselineTokensPath: string;
+    tokens: BaselineGeneratorTokens;
+}

package/dist/types.js

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

package/dist/vanilla-theme-colors.d.ts

@@ -0,0 +1,5 @@
+type ThemeTone = "light" | "dark";
+export declare function vanillaThemeColorVars(tone: ThemeTone): string;
+export declare function foundryThemeRootColorVars(tone: ThemeTone): string;
+export declare function foundryComponentColorVars(tone: ThemeTone): string;
+export {};