@salt-ds/lab 1.0.0-alpha.95 → 1.0.0-alpha.97

package/dist-es/mega-menu/useMegaMenuNavigation.js

@@ -0,0 +1,278 @@
+import { useMemo } from 'react';
+
+const COLUMN_SELECTOR = "[data-mega-menu-column]";
+const ACTIONS_SELECTOR = "[data-mega-menu-actions]";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const SELF_CONSUMING_SELECTOR = 'input, textarea, select, [contenteditable], [role="combobox"], [role="listbox"], [role="slider"], [role="spinbutton"], [role="textbox"]';
+const HIDDEN_ANCESTOR_SELECTOR = '[aria-hidden="true"], [inert]';
+function queryFocusables(root) {
+  return Array.from(
+    root.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((el) => !el.closest(HIDDEN_ANCESTOR_SELECTOR));
+}
+function firstFocusable(root) {
+  return root ? queryFocusables(root)[0] ?? null : null;
+}
+function buildModel(panel) {
+  const columns = Array.from(
+    panel.querySelectorAll(COLUMN_SELECTOR)
+  ).filter((el) => queryFocusables(el).length > 0);
+  const actions = Array.from(
+    panel.querySelectorAll(ACTIONS_SELECTOR)
+  ).filter((el) => queryFocusables(el).length > 0);
+  return { columns, actions };
+}
+function focusTrigger(context) {
+  var _a;
+  const reference = context.elements.reference;
+  (_a = firstFocusable(reference) ?? reference) == null ? void 0 : _a.focus();
+}
+function focusNextTriggerAndClose(context) {
+  const reference = context.elements.reference;
+  const trigger = firstFocusable(reference) ?? reference;
+  const li = trigger == null ? void 0 : trigger.closest("li");
+  const next = (li == null ? void 0 : li.nextElementSibling) instanceof HTMLElement ? firstFocusable(li.nextElementSibling) : null;
+  if (next) {
+    context.onOpenChange(false);
+    next.focus();
+    return true;
+  }
+  return false;
+}
+function columnsStacked(columns) {
+  if (columns.length < 2) return false;
+  const first = columns[0].getBoundingClientRect();
+  const second = columns[1].getBoundingClientRect();
+  return second.top >= first.bottom - 1;
+}
+function handleLinear(key, cell, panel, context) {
+  var _a, _b;
+  const cells = queryFocusables(panel);
+  const index = cells.indexOf(cell);
+  if (index === -1) return false;
+  switch (key) {
+    case "ArrowDown":
+    case "ArrowRight": {
+      if (index < cells.length - 1) {
+        cells[index + 1].focus();
+      }
+      return true;
+    }
+    case "ArrowUp":
+    case "ArrowLeft": {
+      if (index > 0) {
+        cells[index - 1].focus();
+      } else {
+        focusTrigger(context);
+      }
+      return true;
+    }
+    case "Home": {
+      (_a = cells[0]) == null ? void 0 : _a.focus();
+      return true;
+    }
+    case "End": {
+      (_b = cells[cells.length - 1]) == null ? void 0 : _b.focus();
+      return true;
+    }
+    default:
+      return false;
+  }
+}
+function handleArrow(key, cell, panel, context) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { columns, actions } = buildModel(panel);
+  if (columnsStacked(columns)) {
+    return handleLinear(key, cell, panel, context);
+  }
+  const column = cell.closest(COLUMN_SELECTOR);
+  const actionsEl = cell.closest(ACTIONS_SELECTOR);
+  if (column) {
+    const colIndex = columns.indexOf(column);
+    const cells = queryFocusables(column);
+    const rowIndex = cells.indexOf(cell);
+    switch (key) {
+      case "ArrowDown": {
+        if (rowIndex < cells.length - 1) {
+          cells[rowIndex + 1].focus();
+        } else if (colIndex < columns.length - 1) {
+          (_a = firstFocusable(columns[colIndex + 1])) == null ? void 0 : _a.focus();
+        } else if (actions.length > 0) {
+          (_b = firstFocusable(actions[0])) == null ? void 0 : _b.focus();
+        } else {
+          focusNextTriggerAndClose(context);
+        }
+        return true;
+      }
+      case "ArrowUp": {
+        if (rowIndex > 0) {
+          cells[rowIndex - 1].focus();
+        } else {
+          focusTrigger(context);
+        }
+        return true;
+      }
+      case "ArrowRight": {
+        if (colIndex < columns.length - 1) {
+          (_c = firstFocusable(columns[colIndex + 1])) == null ? void 0 : _c.focus();
+          return true;
+        }
+        if (rowIndex === cells.length - 1 && focusNextTriggerAndClose(context)) {
+          return true;
+        }
+        focusTrigger(context);
+        return true;
+      }
+      case "ArrowLeft": {
+        if (colIndex > 0) {
+          (_d = firstFocusable(columns[colIndex - 1])) == null ? void 0 : _d.focus();
+        } else {
+          focusTrigger(context);
+        }
+        return true;
+      }
+      case "Home": {
+        (_e = cells[0]) == null ? void 0 : _e.focus();
+        return true;
+      }
+      case "End": {
+        (_f = cells[cells.length - 1]) == null ? void 0 : _f.focus();
+        return true;
+      }
+      default:
+        return false;
+    }
+  }
+  if (actionsEl) {
+    const cells = queryFocusables(actionsEl);
+    const index = cells.indexOf(cell);
+    switch (key) {
+      case "ArrowRight": {
+        if (index < cells.length - 1) {
+          cells[index + 1].focus();
+        } else if (!focusNextTriggerAndClose(context)) {
+          focusTrigger(context);
+        }
+        return true;
+      }
+      case "ArrowLeft": {
+        if (index > 0) {
+          cells[index - 1].focus();
+        } else if (cell === firstFocusable(panel)) {
+          focusTrigger(context);
+        }
+        return true;
+      }
+      case "ArrowUp": {
+        if (columns.length > 0) {
+          const lastColumnCells = queryFocusables(columns[columns.length - 1]);
+          (_g = lastColumnCells[lastColumnCells.length - 1]) == null ? void 0 : _g.focus();
+        } else {
+          focusTrigger(context);
+        }
+        return true;
+      }
+      case "ArrowDown": {
+        if (index === cells.length - 1) {
+          focusNextTriggerAndClose(context);
+        }
+        return true;
+      }
+      case "Home": {
+        (_h = cells[0]) == null ? void 0 : _h.focus();
+        return true;
+      }
+      case "End": {
+        (_i = cells[cells.length - 1]) == null ? void 0 : _i.focus();
+        return true;
+      }
+      default:
+        return false;
+    }
+  }
+  return false;
+}
+function focusNextAfterPanel(context, panel) {
+  var _a;
+  const reference = context.elements.reference;
+  const refFocusable = firstFocusable(reference) ?? reference;
+  const nextLi = (_a = refFocusable == null ? void 0 : refFocusable.closest("li")) == null ? void 0 : _a.nextElementSibling;
+  const nextSibling = nextLi instanceof HTMLElement ? firstFocusable(nextLi) : null;
+  const nextOutside = nextSibling || (() => {
+    const allFocusable = queryFocusables(
+      panel.ownerDocument.documentElement
+    ).filter((el) => !panel.contains(el));
+    const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
+    return idx >= 0 ? allFocusable[idx + 1] : void 0;
+  })();
+  if (nextOutside) {
+    const view = panel.ownerDocument.defaultView;
+    view == null ? void 0 : view.requestAnimationFrame(() => {
+      view == null ? void 0 : view.requestAnimationFrame(() => {
+        nextOutside.focus();
+      });
+    });
+  }
+}
+function useMegaMenuNavigation(context, props = {}) {
+  const { enabled = true } = props;
+  const { open, onOpenChange } = context;
+  return useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      floating: {
+        onKeyDown(event) {
+          var _a, _b;
+          if (!open) return;
+          const panel = event.currentTarget;
+          const target = event.target;
+          const { key } = event;
+          const isArrowOrEdge = key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End";
+          if (isArrowOrEdge && target.closest(SELF_CONSUMING_SELECTOR)) {
+            return;
+          }
+          const cell = target.closest(FOCUSABLE_SELECTOR);
+          if (key === "Tab") {
+            const allCells = queryFocusables(panel);
+            const linearIndex = cell ? allCells.indexOf(cell) : -1;
+            if (linearIndex === -1) return;
+            event.preventDefault();
+            if (event.shiftKey) {
+              if (linearIndex === 0) {
+                focusTrigger(context);
+              } else {
+                (_a = allCells[linearIndex - 1]) == null ? void 0 : _a.focus();
+              }
+            } else if (linearIndex === allCells.length - 1) {
+              onOpenChange(false);
+              focusNextAfterPanel(context, panel);
+            } else {
+              (_b = allCells[linearIndex + 1]) == null ? void 0 : _b.focus();
+            }
+            return;
+          }
+          if (!cell || !isArrowOrEdge) return;
+          if (handleArrow(key, cell, panel, context)) {
+            event.preventDefault();
+          }
+        }
+      }
+    };
+  }, [enabled, open, context, onOpenChange]);
+}
+function focusFirstItem(panel, attempt = 0) {
+  const firstItem = firstFocusable(panel);
+  if (firstItem) {
+    firstItem.focus();
+    return;
+  }
+  const view = panel.ownerDocument.defaultView;
+  if (attempt < 3 && view) {
+    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));
+  }
+}
+
+export { FOCUSABLE_SELECTOR, focusFirstItem, useMegaMenuNavigation };
+//# sourceMappingURL=useMegaMenuNavigation.js.map

package/dist-es/mega-menu/useMegaMenuNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMegaMenuNavigation.js","sources":["../src/mega-menu/useMegaMenuNavigation.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ACTIONS_SELECTOR = \"[data-mega-menu-actions]\";\n\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// Controls that own the arrow keys (caret, option lists, steppers); the engine\n// leaves their keys alone when focus is inside one.\nconst SELF_CONSUMING_SELECTOR =\n  'input, textarea, select, [contenteditable], [role=\"combobox\"], [role=\"listbox\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"textbox\"]';\n\n// aria-hidden / inert subtrees are out of the focus order; filtered by ancestor\n// lookup since `:not()` cannot match on an ancestor.\nconst HIDDEN_ANCESTOR_SELECTOR = '[aria-hidden=\"true\"], [inert]';\n\nfunction queryFocusables(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((el) => !el.closest(HIDDEN_ANCESTOR_SELECTOR));\n}\n\nfunction firstFocusable(root: HTMLElement | null): HTMLElement | null {\n  return root ? (queryFocusables(root)[0] ?? null) : null;\n}\n\ninterface NavModel {\n  /** Columns (`data-mega-menu-column`) in DOM order, each with ≥1 cell. */\n  columns: HTMLElement[];\n  /** Full-width actions row; the bottom of the center area. */\n  actions: HTMLElement[];\n}\n\n/** Build the navigation model from the panel DOM at keypress time. */\nfunction buildModel(panel: HTMLElement): NavModel {\n  const columns = Array.from(\n    panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  const actions = Array.from(\n    panel.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  return { columns, actions };\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  (firstFocusable(reference) ?? reference)?.focus();\n}\n\n/** Exit to the next nav-bar trigger and close. Returns false when there is none. */\nfunction focusNextTriggerAndClose(context: FloatingRootContext): boolean {\n  const reference = context.elements.reference as HTMLElement | null;\n  const trigger = firstFocusable(reference) ?? reference;\n  const li = trigger?.closest(\"li\");\n  const next =\n    li?.nextElementSibling instanceof HTMLElement\n      ? firstFocusable(li.nextElementSibling)\n      : null;\n  if (next) {\n    context.onOpenChange(false);\n    next.focus();\n    return true;\n  }\n  return false;\n}\n\n/** True when the grid has collapsed to one stacked column (small viewport). */\nfunction columnsStacked(columns: HTMLElement[]): boolean {\n  if (columns.length < 2) return false;\n  const first = columns[0].getBoundingClientRect();\n  const second = columns[1].getBoundingClientRect();\n  return second.top >= first.bottom - 1;\n}\n\n/** Stacked layout: all arrows degrade to prev/next over every cell. */\nfunction handleLinear(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const cells = queryFocusables(panel);\n  const index = cells.indexOf(cell);\n  if (index === -1) return false;\n\n  switch (key) {\n    case \"ArrowDown\":\n    case \"ArrowRight\": {\n      if (index < cells.length - 1) {\n        cells[index + 1].focus();\n      }\n      return true;\n    }\n    case \"ArrowUp\":\n    case \"ArrowLeft\": {\n      if (index > 0) {\n        cells[index - 1].focus();\n      } else {\n        focusTrigger(context);\n      }\n      return true;\n    }\n    case \"Home\": {\n      cells[0]?.focus();\n      return true;\n    }\n    case \"End\": {\n      cells[cells.length - 1]?.focus();\n      return true;\n    }\n    default:\n      return false;\n  }\n}\n\n/** Arrow/Home/End movement from `cell`. Returns `true` when the key was consumed. */\nfunction handleArrow(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const { columns, actions } = buildModel(panel);\n\n  if (columnsStacked(columns)) {\n    return handleLinear(key, cell, panel, context);\n  }\n\n  const column = cell.closest<HTMLElement>(COLUMN_SELECTOR);\n  const actionsEl = cell.closest<HTMLElement>(ACTIONS_SELECTOR);\n\n  if (column) {\n    const colIndex = columns.indexOf(column);\n    const cells = queryFocusables(column);\n    const rowIndex = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowDown\": {\n        if (rowIndex < cells.length - 1) {\n          cells[rowIndex + 1].focus();\n        } else if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n        } else if (actions.length > 0) {\n          firstFocusable(actions[0])?.focus();\n        } else {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (rowIndex > 0) {\n          cells[rowIndex - 1].focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowRight\": {\n        if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n          return true;\n        }\n        // Right border column: exit to the next trigger and close if available\n        if (\n          rowIndex === cells.length - 1 &&\n          focusNextTriggerAndClose(context)\n        ) {\n          return true;\n        }\n        // Wrap to the current trigger and keep the menu open,\n        // mirroring Left in the first column.\n        focusTrigger(context);\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (colIndex > 0) {\n          firstFocusable(columns[colIndex - 1])?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  if (actionsEl) {\n    const cells = queryFocusables(actionsEl);\n    const index = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowRight\": {\n        if (index < cells.length - 1) {\n          cells[index + 1].focus();\n        } else if (!focusNextTriggerAndClose(context)) {\n          // Last action with no next trigger: wrap to the current trigger.\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (index > 0) {\n          cells[index - 1].focus();\n        } else if (cell === firstFocusable(panel)) {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (columns.length > 0) {\n          const lastColumnCells = queryFocusables(columns[columns.length - 1]);\n          lastColumnCells[lastColumnCells.length - 1]?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowDown\": {\n        if (index === cells.length - 1) {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  return false;\n}\n\n/** Focus the first document-focusable after the panel, once it has unmounted. */\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable = firstFocusable(reference) ?? reference;\n\n  const nextLi = refFocusable?.closest(\"li\")?.nextElementSibling;\n  const nextSibling =\n    nextLi instanceof HTMLElement ? firstFocusable(nextLi) : null;\n\n  const nextOutside =\n    nextSibling ||\n    (() => {\n      const allFocusable = queryFocusables(\n        panel.ownerDocument.documentElement,\n      ).filter((el) => !panel.contains(el));\n      const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n      return idx >= 0 ? allFocusable[idx + 1] : undefined;\n    })();\n\n  if (nextOutside) {\n    const view = panel.ownerDocument.defaultView;\n    view?.requestAnimationFrame(() => {\n      view?.requestAnimationFrame(() => {\n        nextOutside.focus();\n      });\n    });\n  }\n}\n\nexport interface UseMegaMenuNavigationProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui interaction hook for mega menu keyboard navigation. Handles keys\n * on the panel only; the trigger keys are owned by `MegaMenuTrigger`.\n */\nexport function useMegaMenuNavigation(\n  context: FloatingRootContext,\n  props: UseMegaMenuNavigationProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n          const { key } = event;\n\n          const isArrowOrEdge =\n            key === \"ArrowUp\" ||\n            key === \"ArrowDown\" ||\n            key === \"ArrowLeft\" ||\n            key === \"ArrowRight\" ||\n            key === \"Home\" ||\n            key === \"End\";\n\n          // A self-consuming control keeps its own navigation keys.\n          if (isArrowOrEdge && target.closest(SELF_CONSUMING_SELECTOR)) {\n            return;\n          }\n\n          const cell = target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n\n          // Tab walks every cell in layout order; the panel is portaled, so the\n          // boundary transitions are handled manually.\n          if (key === \"Tab\") {\n            const allCells = queryFocusables(panel);\n            const linearIndex = cell ? allCells.indexOf(cell) : -1;\n            if (linearIndex === -1) return;\n            event.preventDefault();\n            if (event.shiftKey) {\n              if (linearIndex === 0) {\n                focusTrigger(context);\n              } else {\n                allCells[linearIndex - 1]?.focus();\n              }\n            } else if (linearIndex === allCells.length - 1) {\n              onOpenChange(false);\n              focusNextAfterPanel(context, panel);\n            } else {\n              allCells[linearIndex + 1]?.focus();\n            }\n            return;\n          }\n\n          if (!cell || !isArrowOrEdge) return;\n\n          if (handleArrow(key, cell, panel, context)) {\n            event.preventDefault();\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/** Focus the first navigable item inside a mega menu panel, retrying until rendered. */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const firstItem = firstFocusable(panel);\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-es/mega-menu/usePageMargin.js

@@ -0,0 +1,20 @@
+import { useDensity, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState } from 'react';
+
+function usePageMargin(referenceEl) {
+  const density = useDensity();
+  const [pageMargin, setPageMargin] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!(referenceEl == null ? void 0 : referenceEl.parentNode)) return;
+    const probe = referenceEl.ownerDocument.createElement("div");
+    probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:var(--saltMegaMenuPanel-pageMargin, var(--salt-layout-page-margin));";
+    referenceEl.insertAdjacentElement("afterend", probe);
+    const width = probe.getBoundingClientRect().width;
+    probe.remove();
+    setPageMargin((prev) => prev === width ? prev : width);
+  }, [referenceEl, density]);
+  return pageMargin;
+}
+
+export { usePageMargin };
+//# sourceMappingURL=usePageMargin.js.map

package/dist-es/mega-menu/usePageMargin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageMargin.js","sources":["../src/mega-menu/usePageMargin.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useState } from \"react\";\n\n/**\n * Resolves the panel's page-margin token to pixels for floating-ui padding, to\n * handle token (`--saltMegaMenuPanel-pageMargin`) override by consumers\n * (edge to edge example).\n */\nexport function usePageMargin(\n  referenceEl: HTMLElement | null | undefined,\n): number {\n  const density = useDensity();\n  const [pageMargin, setPageMargin] = useState(0);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: density isn't read here — signal that the resolved token changed.\n  useIsomorphicLayoutEffect(() => {\n    if (!referenceEl?.parentNode) return;\n    const probe = referenceEl.ownerDocument.createElement(\"div\");\n    probe.style.cssText =\n      \"position:absolute;visibility:hidden;pointer-events:none;width:var(--saltMegaMenuPanel-pageMargin, var(--salt-layout-page-margin));\";\n    referenceEl.insertAdjacentElement(\"afterend\", probe);\n    const width = probe.getBoundingClientRect().width;\n    probe.remove();\n    setPageMargin((prev) => (prev === width ? prev : width));\n  }, [referenceEl, density]);\n  return pageMargin;\n}\n"],"names":[],"mappings":";;;AAQO,SAAS,cACd,WAAA,EACQ;AACR,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAE9C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAC,2CAAa,UAAA,CAAA,EAAY;AAC9B,IAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,aAAA,CAAc,aAAA,CAAc,KAAK,CAAA;AAC3D,IAAA,KAAA,CAAM,MAAM,OAAA,GACV,oIAAA;AACF,IAAA,WAAA,CAAY,qBAAA,CAAsB,YAAY,KAAK,CAAA;AACnD,IAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,qBAAA,EAAsB,CAAE,KAAA;AAC5C,IAAA,KAAA,CAAM,MAAA,EAAO;AACb,IAAA,aAAA,CAAc,CAAC,IAAA,KAAU,IAAA,KAAS,KAAA,GAAQ,OAAO,KAAM,CAAA;AAAA,EACzD,CAAA,EAAG,CAAC,WAAA,EAAa,OAAO,CAAC,CAAA;AACzB,EAAA,OAAO,UAAA;AACT;;;;"}

package/dist-types/index.d.ts

@@ -37,6 +37,5 @@ export * from "./toast-group";
 export * from "./tokenized-input";
 export * from "./tokenized-input-next";
 export * from "./toolbar";
-export * from "./toolbar-next";
 export * from "./utils";
 export * from "./window";

package/dist-types/mega-menu/MegaMenu.d.ts

@@ -1,5 +1,8 @@
-import { type Placement } from "@floating-ui/react";
 import { type ReactNode } from "react";
+/**
+ * Supported placements for the mega menu panel.
+ */
+export type MegaMenuPlacement = "bottom" | "bottom-start" | "bottom-end";
 export interface MegaMenuProps {
     /**
      * The content of the mega menu, typically `MegaMenuTrigger` and `MegaMenuPanel`.
@@ -22,6 +25,12 @@ export interface MegaMenuProps {
      * The placement of the mega menu panel relative to the trigger.
      * @default "bottom"
      */
-    placement?: Placement;
+    placement?: MegaMenuPlacement;
 }
+/**
+ * Root of a mega menu, coordinating its trigger and panel.
+ *
+ * Not intended to be nested inside another floating overlay (e.g. a dialog or
+ * popover): the mega menu does not participate in floating-ui's `FloatingTree`
+ */
 export declare function MegaMenu({ children, open, defaultOpen, onOpenChange, placement, }: MegaMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist-types/mega-menu/MegaMenuActions.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuActionsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the actions. Place `MegaMenuActions` inside
+     * `MegaMenuContent`, after `MegaMenuGroups`; it renders as a band beneath the
+     * groups, spanning their width.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuActions: import("react").ForwardRefExoticComponent<MegaMenuActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuAside.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuAsideProps extends ComponentPropsWithoutRef<"aside"> {
+    /**
+     * The content. Renders to the left of `MegaMenuContent` when placed before
+     * it, and to the right when placed after.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuAside: import("react").ForwardRefExoticComponent<MegaMenuAsideProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/mega-menu/MegaMenuContent.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the mega menu navigation area, typically a `MegaMenuGroups`
+     * and an optional `MegaMenuActions`.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuContent: import("react").ForwardRefExoticComponent<MegaMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuContext.d.ts

@@ -1,5 +1,6 @@
-import type { FloatingRootContext, Placement } from "@floating-ui/react";
-import type { Dispatch, HTMLProps, SetStateAction } from "react";
+import type { FloatingRootContext } from "@floating-ui/react";
+import type { Dispatch, HTMLProps, MutableRefObject, SetStateAction } from "react";
+import type { MegaMenuPlacement } from "./MegaMenu";
 export interface MegaMenuContextValue {
     /** Whether the mega menu is currently open. */
     openState: boolean;
@@ -8,7 +9,7 @@ export interface MegaMenuContextValue {
     /** The floating-ui root context for coordinating interactions. */
     floatingRootContext: FloatingRootContext;
     /** The placement of the mega menu panel relative to the trigger. */
-    placement: Placement;
+    placement: MegaMenuPlacement;
     /** Props getter for the trigger (reference) element. Merges floating-ui interaction props with user props. */
     getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
     /** Props getter for the floating panel element. Merges floating-ui interaction props with user props. */
@@ -18,12 +19,10 @@ export interface MegaMenuContextValue {
     /** Ref setter for the trigger (reference) element. */
     setReference: Dispatch<SetStateAction<HTMLElement | null>>;
     /** Whether the first item should receive focus when the panel opens. */
-    focusFirstItemOnOpen: boolean;
-    /** Toggle the focus-first-item-on-open flag. */
-    setFocusFirstItemOnOpen: Dispatch<SetStateAction<boolean>>;
+    focusFirstItemOnOpenRef: MutableRefObject<boolean>;
     /** The id of the mega menu panel, used for aria-controls on the trigger. */
     panelId: string | undefined;
-    /** Set the panel id when the panel mounts. */
+    /** Registers the panel's id so the trigger's aria-controls stays in sync. */
     setPanelId: Dispatch<SetStateAction<string | undefined>>;
 }
 export declare const MegaMenuContext: import("react").Context<MegaMenuContextValue | undefined>;

package/dist-types/mega-menu/MegaMenuGroup.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-export interface MegaMenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * The content of the mega menu group, typically MegaMenuHeader and MegaMenuItem components.
+     * The content of the mega menu group: a `MegaMenuGroupHeading` and a
+     * `MegaMenuList` of `MegaMenuListItem`s.
      */
     children?: ReactNode;
 }

package/dist-types/mega-menu/MegaMenuGroupContext.d.ts

@@ -0,0 +1,12 @@
+export interface MegaMenuGroupContextValue {
+    /**
+     * The rendered heading's id, used to label the item list via `aria-labelledby`.
+     * `undefined` when the group has no `MegaMenuGroupHeading`.
+     */
+    headingId: string | undefined;
+    /** Register (or clear, with `undefined`) the heading's id. */
+    setHeadingId: (id: string | undefined) => void;
+}
+export declare const MegaMenuGroupContext: import("react").Context<MegaMenuGroupContextValue>;
+/** Access the nearest `MegaMenuGroup` context. */
+export declare function useMegaMenuGroup(): MegaMenuGroupContextValue;

package/dist-types/mega-menu/MegaMenuGroupHeading.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupHeadingProps extends ComponentPropsWithoutRef<"h2"> {
+    /**
+     * The content of the mega menu group heading.
+     */
+    children?: ReactNode;
+    /**
+     * The heading element to render.
+     * @default "h3"
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export declare const MegaMenuGroupHeading: import("react").ForwardRefExoticComponent<MegaMenuGroupHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist-types/mega-menu/MegaMenuGroups.d.ts

@@ -1,7 +1,7 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-export interface MegaMenuGroupsProps extends HTMLAttributes<HTMLDivElement> {
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupsProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * The content of the mega menu section.
+     * The `MegaMenuGroup` columns of the mega menu.
      */
     children?: ReactNode;
 }

package/dist-types/mega-menu/MegaMenuList.d.ts

@@ -0,0 +1,16 @@
+import { type PolymorphicComponentPropWithRef } from "@salt-ds/core";
+import { type ElementType, type FunctionComponent, type ReactNode } from "react";
+export type MegaMenuListProps<T extends ElementType = "ul"> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * The items of the group, typically `MegaMenuListItem` components. Each
+     * `MegaMenuListItem` renders its own `<li>`.
+     */
+    children?: ReactNode;
+}>;
+type MegaMenuListComponent = <T extends ElementType = "ul">(props: MegaMenuListProps<T>) => ReturnType<FunctionComponent>;
+/**
+ * The list of a group's `MegaMenuListItem`s. Renders a `<ul>` by default; pass
+ * `as="ol"` for an ordered list.
+ */
+export declare const MegaMenuList: MegaMenuListComponent;
+export {};

package/dist-types/mega-menu/MegaMenuListItem.d.ts

@@ -0,0 +1,25 @@
+import { type RenderPropsType } from "@salt-ds/core";
+import { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from "react";
+export interface MegaMenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">, "onClick"> {
+    /**
+     * The content of the mega menu item.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the item is the current page. Sets `aria-current="page"`
+     */
+    current?: boolean;
+    /**
+     * Href passed to the link action element.
+     */
+    href?: string;
+    /**
+     * Called when the item's action is activated, before the menu closes.
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Render prop to enable customization of the underlying action element (e.g. a router `Link`).
+     */
+    render?: RenderPropsType["render"];
+}
+export declare const MegaMenuListItem: import("react").ForwardRefExoticComponent<MegaMenuListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/mega-menu/MegaMenuPanel.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-export interface MegaMenuPanelProps extends HTMLAttributes<HTMLDivElement> {
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuPanelProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The content of the mega menu panel.
      */

package/dist-types/mega-menu/MegaMenuTrigger.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 export interface MegaMenuTriggerProps {
     /**
      * The trigger element for the mega menu, typically a `NavigationItem` or `Button`.
+     * Wrap each mega menu in its own `<li>` — arrow-key navigation between triggers depends on it.
      */
     children?: ReactNode;
 }

package/dist-types/mega-menu/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./MegaMenu";
+export * from "./MegaMenuActions";
+export * from "./MegaMenuAside";
+export * from "./MegaMenuContent";
 export * from "./MegaMenuGroup";
+export * from "./MegaMenuGroupHeading";
 export * from "./MegaMenuGroups";
-export * from "./MegaMenuHeader";
-export * from "./MegaMenuItem";
+export * from "./MegaMenuList";
+export * from "./MegaMenuListItem";
 export * from "./MegaMenuPanel";
-export * from "./MegaMenuSupportingActions";
-export * from "./MegaMenuSupportingContent";
 export * from "./MegaMenuTrigger";

package/dist-types/mega-menu/useMegaMenuNavigation.d.ts

@@ -0,0 +1,16 @@
+import type { ElementProps, FloatingRootContext } from "@floating-ui/react";
+export declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+export interface UseMegaMenuNavigationProps {
+    /**
+     * Whether the interaction is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Floating-ui interaction hook for mega menu keyboard navigation. Handles keys
+ * on the panel only; the trigger keys are owned by `MegaMenuTrigger`.
+ */
+export declare function useMegaMenuNavigation(context: FloatingRootContext, props?: UseMegaMenuNavigationProps): ElementProps;
+/** Focus the first navigable item inside a mega menu panel, retrying until rendered. */
+export declare function focusFirstItem(panel: HTMLElement, attempt?: number): void;

package/dist-types/mega-menu/usePageMargin.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves the panel's page-margin token to pixels for floating-ui padding, to
+ * handle token (`--saltMegaMenuPanel-pageMargin`) override by consumers
+ * (edge to edge example).
+ */
+export declare function usePageMargin(referenceEl: HTMLElement | null | undefined): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.95",
+  "version": "1.0.0-alpha.97",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/core": "^1.64.0",
+    "@salt-ds/core": "^1.65.0",
     "@salt-ds/icons": "^1.18.0",
     "@salt-ds/styles": "0.3.0",
     "@salt-ds/window": "0.1.1",

package/dist-cjs/mega-menu/MegaMenuHeader.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltMegaMenuHeader-content {\n  display: flex;\n  align-items: center;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n  min-height: var(--salt-size-base);\n  color: var(--salt-content-secondary-foreground);\n}\n.saltMegaMenuHeader {\n  margin-bottom: var(--salt-spacing-50);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=MegaMenuHeader.css.js.map

package/dist-cjs/mega-menu/MegaMenuHeader.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MegaMenuHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}