baseline-foundry 0.1.3

package/dist/contextual-menu.js

@@ -0,0 +1,156 @@
+const TOGGLE_SELECTOR = ".bf-contextual-menu-toggle";
+const DROPDOWN_SELECTOR = ".bf-contextual-menu-dropdown";
+const MENU_SELECTOR = ".bf-contextual-menu";
+const LINK_SELECTOR = ".bf-contextual-menu-link";
+function queryAllWithinRoot(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+    if (root instanceof Element && root.matches(selector)) {
+        elements.unshift(root);
+    }
+    return elements;
+}
+function getMenus(root) {
+    return queryAllWithinRoot(root, MENU_SELECTOR);
+}
+function getToggle(menu) {
+    return menu.querySelector(TOGGLE_SELECTOR);
+}
+function getMenuItems(menu) {
+    return Array.from(menu.querySelectorAll(LINK_SELECTOR)).filter(item => {
+        return !item.matches(".is-disabled, [aria-disabled='true']");
+    });
+}
+function closeMenu(menu, restoreFocus = false) {
+    const dropdown = menu.querySelector(DROPDOWN_SELECTOR);
+    if (dropdown) {
+        dropdown.setAttribute("aria-hidden", "true");
+    }
+    const toggle = getToggle(menu);
+    if (toggle) {
+        toggle.setAttribute("aria-expanded", "false");
+    }
+    if (restoreFocus && toggle) {
+        toggle.focus();
+    }
+}
+function openMenu(menu, focusIndex) {
+    const dropdown = menu.querySelector(DROPDOWN_SELECTOR);
+    if (dropdown) {
+        dropdown.setAttribute("aria-hidden", "false");
+    }
+    const toggle = getToggle(menu);
+    if (toggle) {
+        toggle.setAttribute("aria-expanded", "true");
+    }
+    if (focusIndex !== undefined) {
+        const items = getMenuItems(menu);
+        items[focusIndex]?.focus();
+    }
+}
+function isMenuOpen(menu) {
+    const dropdown = menu.querySelector(DROPDOWN_SELECTOR);
+    return dropdown?.getAttribute("aria-hidden") !== "true";
+}
+export function initContextualMenus(options = {}) {
+    const root = options.root ?? document;
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const toggle = target.closest(TOGGLE_SELECTOR);
+        if (toggle) {
+            const menu = toggle.closest(MENU_SELECTOR);
+            if (menu) {
+                if (isMenuOpen(menu)) {
+                    closeMenu(menu);
+                }
+                else {
+                    for (const otherMenu of getMenus(root)) {
+                        if (otherMenu !== menu && isMenuOpen(otherMenu)) {
+                            closeMenu(otherMenu);
+                        }
+                    }
+                    openMenu(menu);
+                }
+            }
+            event.stopPropagation();
+            return;
+        }
+        const link = target.closest(LINK_SELECTOR);
+        if (link) {
+            const menu = link.closest(MENU_SELECTOR);
+            if (menu) {
+                closeMenu(menu);
+            }
+            return;
+        }
+        for (const menu of getMenus(root)) {
+            if (isMenuOpen(menu) && !menu.contains(target)) {
+                closeMenu(menu);
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const menu = target.closest(MENU_SELECTOR);
+        const toggle = target.closest(TOGGLE_SELECTOR);
+        const link = target.closest(LINK_SELECTOR);
+        if (event.key === "Escape") {
+            for (const openMenuElement of getMenus(root)) {
+                if (isMenuOpen(openMenuElement)) {
+                    closeMenu(openMenuElement, true);
+                }
+            }
+            return;
+        }
+        if (toggle && menu) {
+            if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+                event.preventDefault();
+                openMenu(menu, 0);
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                const items = getMenuItems(menu);
+                openMenu(menu, items.length - 1);
+                return;
+            }
+        }
+        if (link && menu && isMenuOpen(menu)) {
+            const items = getMenuItems(menu);
+            const index = items.indexOf(link);
+            if (index === -1) {
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                items[(index + 1) % items.length]?.focus();
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                items[(index - 1 + items.length) % items.length]?.focus();
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                items[0]?.focus();
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                items[items.length - 1]?.focus();
+            }
+        }
+    };
+    root.addEventListener("click", onClick);
+    root.addEventListener("keydown", onKeyDown);
+    return () => {
+        root.removeEventListener("click", onClick);
+        root.removeEventListener("keydown", onKeyDown);
+    };
+}

package/dist/css-app-tier.d.ts

@@ -0,0 +1 @@
+export declare function appTierPresetCss(scopes: string[]): string;

package/dist/css-app-tier.js

@@ -0,0 +1,77 @@
+export function appTierPresetCss(scopes) {
+    const scoped = (suffix = "") => scopes.map(scope => `${scope}${suffix}`).join(",\n");
+    return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
+${scoped()} {
+  --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
+  --bf-radius: 0;
+  color-scheme: light;
+}
+
+${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+${scoped(" :where(.bf-application)")} {
+  background: var(--bf-app-demo-page-bg);
+}
+
+${scoped(" :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.12);
+}
+
+${scoped(" :where(.bf-panel-header)")} {
+  align-items: start;
+  gap: calc(var(--bf-baseline) * 1.5);
+  padding-block-end: var(--bf-panel-padding-block);
+  padding-block-start: var(--bf-panel-padding-block);
+}
+
+${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
+  gap: 0;
+  padding-block: 0;
+}
+
+${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+}
+
+${scoped(" :where(.bf-panel-controls)")} {
+  gap: calc(var(--bf-baseline) * 1.5);
+}
+
+${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
+  font-family: inherit;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
+  background: transparent;
+  box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
+}
+
+${scoped(" :where(.bf-navigation-bar)")},
+${scoped(" :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-aside)")},
+${scoped(" :where(.bf-panel)")} {
+  background: var(--vf-color-background-default, #ffffff);
+}
+
+`;
+}

package/dist/css-components/article-pagination.d.ts

@@ -0,0 +1,13 @@
+type ArticlePaginationCssOptions = {
+    bodyCaseTypeStyles: string;
+    titleTypeStyles: string;
+};
+/**
+ * Sequential documentation navigation. This intentionally does not share the
+ * numbered-pagination API: article destinations need their direction and full
+ * title in the accessible name at every container width. Current Vanilla's
+ * persistent row, directional halves and compact previous link are retained;
+ * BF typography and metric compensation keep the occupied block on-grid.
+ */
+export declare function articlePaginationCss(options: ArticlePaginationCssOptions): string;
+export {};

package/dist/css-components/article-pagination.js

@@ -0,0 +1,151 @@
+/**
+ * Sequential documentation navigation. This intentionally does not share the
+ * numbered-pagination API: article destinations need their direction and full
+ * title in the accessible name at every container width. Current Vanilla's
+ * persistent row, directional halves and compact previous link are retained;
+ * BF typography and metric compensation keep the occupied block on-grid.
+ */
+export function articlePaginationCss(options) {
+    const { bodyCaseTypeStyles, titleTypeStyles } = options;
+    return `:where(.bf-theme) :where(.bf-article-pagination) {
+  container-name: bf-article-pagination;
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  margin-block-end: var(--bf-section-space-shallow);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link) {
+  background-color: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid transparent;
+  box-sizing: border-box;
+  color: var(--bf-color-text-default);
+  display: grid;
+  column-gap: var(--bf-space-2);
+  grid-template-rows: auto auto;
+  inline-size: calc((100cqi - var(--bf-space-2)) / 2);
+  min-inline-size: 0;
+  padding-block: calc(var(--bf-space-2) + (var(--bf-baseline) / 4) - var(--bf-border-width));
+  position: relative;
+  row-gap: var(--bf-space-half);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link:hover) {
+  background-color: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: 2px;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
+  grid-column: 1;
+  grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
+  padding-inline: var(--bf-space-1) var(--bf-space-2);
+  text-align: start;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next) {
+  grid-column: 2;
+  grid-template-columns: minmax(0, 1fr) var(--bf-icon-size-default);
+  justify-self: end;
+  padding-inline: var(--bf-space-2) var(--bf-space-1);
+  text-align: end;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-direction) {
+${bodyCaseTypeStyles}  color: inherit;
+  display: contents;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-icon) {
+  align-self: center;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: start;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-label),
+:where(.bf-theme) :where(.bf-article-pagination-link.is-previous .bf-article-pagination-title) {
+  grid-column: 2;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-icon) {
+  align-self: center;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-label),
+:where(.bf-theme) :where(.bf-article-pagination-link.is-next .bf-article-pagination-title) {
+  grid-column: 1;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-direction > .bf-icon) {
+  --bf-icon-size: var(--bf-icon-size-default);
+}
+
+:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-previous .bf-icon {
+  --bf-icon-transform: rotate(-90deg);
+}
+
+:where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-next .bf-icon {
+  --bf-icon-transform: rotate(90deg);
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-label) {
+  grid-row: 1;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-article-pagination-title) {
+${titleTypeStyles}  color: inherit;
+  grid-row: 2;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+@container bf-article-pagination (width < 28.75rem) {
+  :where(.bf-theme) :where(.bf-article-pagination-link:only-child) {
+    grid-column: 1 / -1;
+    inline-size: 100%;
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child)) {
+    grid-template-columns: var(--bf-icon-size-default);
+    inline-size: calc(var(--bf-space-6) + var(--bf-space-1));
+    padding-inline: var(--bf-space-1);
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-next:not(:only-child)) {
+    inline-size: 100%;
+  }
+
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-label),
+  :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-title) {
+    block-size: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+  }
+}
+
+`;
+}

package/dist/css-components/button-actions.d.ts

@@ -0,0 +1,7 @@
+type ButtonActionCssOptions = {
+    bodyTypeStyles: string;
+    buttonMarginBottom: string;
+    buttonPadding: string;
+};
+export declare function buttonActionsCss(options: ButtonActionCssOptions): string;
+export {};

package/dist/css-components/button-actions.js

@@ -0,0 +1,165 @@
+export function buttonActionsCss(options) {
+    const { bodyTypeStyles, buttonMarginBottom, buttonPadding } = options;
+    return `:where(.bf-theme) :where(.bf-button, .bf-button.is-base) {
+${bodyTypeStyles}  appearance: none;
+  background-color: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
+  border-radius: var(--bf-radius);
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: ${buttonMarginBottom};
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
+  text-align: center;
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-button) {
+  background-color: var(--bf-color-background-default);
+}
+
+:where(.bf-theme) :where(.bf-button.is-base) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+:where(.bf-theme) :where(.bf-button:hover, .bf-button.is-base:hover) {
+  background-color: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-button:not(.is-base):is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-background-active);
+}
+
+:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus-visible {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — semantic positive modifier (Vanilla parity).               */
+/* Vanilla uses themed positive tokens for default/hover/active        */
+/* backgrounds plus a white text colour on a coloured surface.         */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-positive) {
+  background-color: var(--bf-color-button-positive-default);
+  border-color: var(--bf-color-button-positive-default);
+  color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-positive:hover) {
+  background-color: var(--bf-color-button-positive-hover);
+  border-color: var(--bf-color-button-positive-hover);
+  color: var(--bf-color-button-positive-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-positive:is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-button-positive-active);
+  border-color: var(--bf-color-button-positive-active);
+  color: var(--bf-color-button-positive-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — semantic negative modifier (Vanilla parity).               */
+/* Vanilla uses themed negative tokens for default/hover/active        */
+/* backgrounds plus a white text colour on a coloured surface.         */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-negative) {
+  background-color: var(--bf-color-button-negative-default);
+  border-color: var(--bf-color-button-negative-default);
+  color: var(--bf-color-button-negative-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-negative:hover) {
+  background-color: var(--bf-color-button-negative-hover);
+  border-color: var(--bf-color-button-negative-hover);
+  color: var(--bf-color-button-negative-text);
+}
+
+:where(.bf-theme) :where(.bf-button.is-negative:is(:active, [aria-pressed='true'])) {
+  background-color: var(--bf-color-button-negative-active);
+  border-color: var(--bf-color-button-negative-active);
+  color: var(--bf-color-button-negative-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — link-style modifier (Vanilla parity).                      */
+/* BF starts from the shared button control contract, so the modifier  */
+/* has to strip control chrome and padding back down to inline-link    */
+/* behavior while reusing the shared link tokens.                      */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-link) {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  color: var(--bf-color-link-default);
+  margin-bottom: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-link:hover) {
+  background-color: transparent;
+  color: var(--bf-color-link-default);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.075em;
+}
+
+:where(.bf-theme) :where(.bf-button.is-link:focus-visible) {
+  outline-offset: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Button — icon-spacing modifier (Vanilla parity).                    */
+/* Icon buttons make the icon/label relationship explicit. Bare text   */
+/* nodes cannot be distinguished from icon-only buttons in CSS because */
+/* :first-child/:last-child ignore text nodes. A real label slot lets   */
+/* the component use one truthful, token-driven gap in either order.   */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-button.is-icon) > :where(.bf-icon) {
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-icon) {
+  align-items: center;
+  column-gap: var(--bf-space-1);
+  display: inline-flex;
+  justify-content: center;
+}
+
+:where(.bf-theme) :where(.bf-button-label) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-actions) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-field-gap);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-end) {
+  justify-content: flex-end;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > * {
+  flex: 0 0 auto;
+}
+`;
+}

package/dist/css-components/cards-options.d.ts

@@ -0,0 +1,6 @@
+type CardsOptionsCssOptions = {
+    bodyStrongTypeStyles: string;
+    bodyTypeStyles: string;
+};
+export declare function cardsOptionsCss(options: CardsOptionsCssOptions): string;
+export {};