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

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.95
+
+### Minor Changes
+
+- 8043fee: Updated `MegaMenu` with several API improvements:
+
+  - **Renamed `MegaMenuSection` to `MegaMenuGroups`.** The associated CSS custom property `--saltMegaMenuSection-columnWidth` has been renamed to `--saltMegaMenuGroups-columnWidth`.
+  - **Renamed `MegaMenuContent` to `MegaMenuSupportingContent`** to better convey its purpose as a region for supporting content alongside the menu groups.
+  - **Removed `MegaMenuItemContent`.** Pass the label directly to `MegaMenuItem`.
+  - **Added `MegaMenuSupportingActions`.** Use it to group one or more supporting action links beneath the menu groups in a `MegaMenuPanel`.
+  - **Added a `render` prop to `MegaMenuItem`** for integration with custom link or routing components (such as `react-router`'s `Link`).
+
+  ```diff
+  - <MegaMenuSection>
+  + <MegaMenuGroups>
+      <MegaMenuGroup>
+        <MegaMenuHeader>Financial services</MegaMenuHeader>
+  -     <MegaMenuItem>
+  -       <Icon aria-hidden />
+  -       <MegaMenuItemContent>Digital banking</MegaMenuItemContent>
+  -     </MegaMenuItem>
+  +     <MegaMenuItem render={<Link to="/digital-banking" />}>
+  +       <Icon aria-hidden />
+  +       Digital banking
+  +     </MegaMenuItem>
+      </MegaMenuGroup>
+  - </MegaMenuSection>
+  + </MegaMenuGroups>
+  - <MegaMenuContent>...</MegaMenuContent>
+  + <MegaMenuSupportingContent>...</MegaMenuSupportingContent>
+  + <MegaMenuSupportingActions>
+  +   <Link href="#demo" IconComponent={ChevronRightIcon}>Book a demo</Link>
+  + </MegaMenuSupportingActions>
+  ```
+
+- 8687aa7: Date-related components and utilities are no longer re-exported from `@salt-ds/lab`. Update the import source to `@salt-ds/date-components`.
+
+  The exact set of components depends on the selection variant you're using.
+
+  **Single-date selection** (`DateInputSingle`, single `DatePicker`, `DatePickerSingleInput`, `DatePickerSingleGridPanel`, single `Calendar`):
+
+  ```diff
+    import {
+      type DateInputSingleDetails,
+      DateInputSingle,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerSingleGridPanel,
+      DatePickerSingleInput,
+      DatePickerTrigger,
+      type SingleDateSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Range selection** (`DateInputRange`, range `DatePicker`, `DatePickerRangeInput`, `DatePickerRangePanel`, `DatePickerRangeGridPanel`, range `Calendar`):
+
+  ```diff
+    import {
+      type DateInputRangeDetails,
+      DateInputRange,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeGridPanel,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Offset selection** (offset `Calendar`; offset `DatePicker` built from the range input + range panel with `selectionVariant="offset"`):
+
+  ```diff
+    import {
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+### Patch Changes
+
+- 4314ca5: Fixed `ToolbarNext` focus handling when composing multiselect `ComboBox` controls, preserving pill keyboard navigation and preventing focus flashes when restoring toolbar focus.
+- Updated dependencies [9729a10]
+- Updated dependencies [52daa64]
+- Updated dependencies [ed2779c]
+- Updated dependencies [07e4d5d]
+  - @salt-ds/core@1.64.0
+
 ## 1.0.0-alpha.94
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1893,11 +1893,6 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
-/* src/mega-menu/MegaMenuContent.css */
-.saltMegaMenuContent {
-  padding: var(--salt-spacing-300);
-}
-
 /* src/mega-menu/MegaMenuGroup.css */
 .saltMegaMenuGroup {
   display: flex;
@@ -1912,6 +1907,15 @@
   flex-direction: column;
 }
 
+/* src/mega-menu/MegaMenuGroups.css */
+.saltMegaMenuGroups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-columnWidth, 12rem));
+  gap: var(--salt-spacing-300);
+  padding: var(--salt-spacing-300);
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
+}
+
 /* src/mega-menu/MegaMenuHeader.css */
 .saltMegaMenuHeader-content {
   display: flex;
@@ -1952,6 +1956,14 @@
   height: var(--salt-size-base);
   align-items: center;
 }
+.saltMegaMenuItem-content {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
 .saltMegaMenuItem > a:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(var(--salt-size-fixed-100) * -2);
@@ -1973,16 +1985,6 @@
   pointer-events: none;
 }
 
-/* src/mega-menu/MegaMenuItemContent.css */
-.saltMegaMenuItemContent {
-  flex: 1 0;
-  margin: var(--salt-spacing-75) 0;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/mega-menu/MegaMenuPanel.css */
 .saltMegaMenuPanel {
   display: flex;
@@ -1999,13 +2001,17 @@
   box-shadow: var(--salt-overlayable-shadow-popout);
 }
 
-/* src/mega-menu/MegaMenuSection.css */
-.saltMegaMenuSection {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuSection-columnWidth, 12rem));
-  gap: var(--salt-spacing-300);
+/* src/mega-menu/MegaMenuSupportingActions.css */
+.saltMegaMenuSupportingActions {
+  display: flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  padding-bottom: var(--salt-spacing-300);
+}
+
+/* src/mega-menu/MegaMenuSupportingContent.css */
+.saltMegaMenuSupportingContent {
   padding: var(--salt-spacing-300);
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
 }
 
 /* src/menu-button/MenuButton.css */
@@ -3431,4 +3437,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/90f79509-9c05-4f28-ba07-621519e16301.css */
+/* src/0af170c9-7e3f-4fb8-8504-21af9780540e.css */

package/dist-cjs/index.js

@@ -5,7 +5,6 @@ var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
 var Breadcrumbs = require('./breadcrumbs/Breadcrumbs.js');
 var ButtonBar = require('./button-bar/ButtonBar.js');
 var OrderedButton = require('./button-bar/OrderedButton.js');
-var index = require('./calendar/index.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
 var Color = require('./color-chooser/Color.js');
 var ColorChooser = require('./color-chooser/ColorChooser.js');
@@ -30,8 +29,6 @@ var ContactSecondaryInfo = require('./contact-details/ContactSecondaryInfo.js');
 var ContactTertiaryInfo = require('./contact-details/ContactTertiaryInfo.js');
 var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
-var index$1 = require('./date-input/index.js');
-var index$2 = require('./date-picker/index.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
 var Dropdown = require('./dropdown/Dropdown.js');
@@ -78,18 +75,17 @@ var useOverflowDetection = require('./utils/useOverflowDetection.js');
 var useSlideSelection = require('./utils/useSlideSelection.js');
 var ListItemNext = require('./list-next/ListItemNext.js');
 var ListNext = require('./list-next/ListNext.js');
-var index$3 = require('./localization-provider/index.js');
 var Logo = require('./logo/Logo.js');
 var LogoImage = require('./logo/LogoImage.js');
 var LogoSeparator = require('./logo/LogoSeparator.js');
 var MegaMenu = require('./mega-menu/MegaMenu.js');
-var MegaMenuContent = require('./mega-menu/MegaMenuContent.js');
 var MegaMenuGroup = require('./mega-menu/MegaMenuGroup.js');
+var MegaMenuGroups = require('./mega-menu/MegaMenuGroups.js');
 var MegaMenuHeader = require('./mega-menu/MegaMenuHeader.js');
 var MegaMenuItem = require('./mega-menu/MegaMenuItem.js');
-var MegaMenuItemContent = require('./mega-menu/MegaMenuItemContent.js');
 var MegaMenuPanel = require('./mega-menu/MegaMenuPanel.js');
-var MegaMenuSection = require('./mega-menu/MegaMenuSection.js');
+var MegaMenuSupportingActions = require('./mega-menu/MegaMenuSupportingActions.js');
+var MegaMenuSupportingContent = require('./mega-menu/MegaMenuSupportingContent.js');
 var MegaMenuTrigger = require('./mega-menu/MegaMenuTrigger.js');
 var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
@@ -135,7 +131,6 @@ var ToolbarNext = require('./toolbar-next/ToolbarNext.js');
 var TooltrayNext = require('./toolbar-next/TooltrayNext.js');
 var ElectronWindow = require('./window/ElectronWindow.js');
 var WindowContext = require('./window/WindowContext.js');
-var dateComponents = require('@salt-ds/date-components');
 
 
 
@@ -145,16 +140,6 @@ exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
 exports.ButtonBar = ButtonBar.ButtonBar;
 exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
 exports.OrderedButton = OrderedButton.OrderedButton;
-exports.Calendar = index.Calendar;
-exports.CalendarGrid = index.CalendarGrid;
-exports.CalendarNavigation = index.CalendarNavigation;
-exports.CalendarWeekHeader = index.CalendarWeekHeader;
-exports.isDateRangeSelection = index.isDateRangeSelection;
-exports.useCalendar = index.useCalendar;
-exports.useCalendarDay = index.useCalendarDay;
-exports.useCalendarSelection = index.useCalendarSelection;
-exports.useCalendarSelectionDay = index.useCalendarSelectionDay;
-exports.useDateSelectionAnnouncer = index.useDateSelectionAnnouncer;
 exports.CascadingMenu = CascadingMenu.CascadingMenu;
 exports.Color = Color.Color;
 exports.ColorChooser = ColorChooser.ColorChooser;
@@ -186,21 +171,6 @@ exports.ContactSecondaryInfo = ContactSecondaryInfo.ContactSecondaryInfo;
 exports.ContactTertiaryInfo = ContactTertiaryInfo.ContactTertiaryInfo;
 exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
-exports.DateInputRange = index$1.DateInputRange;
-exports.DateInputSingle = index$1.DateInputSingle;
-exports.DatePicker = index$2.DatePicker;
-exports.DatePickerActions = index$2.DatePickerActions;
-exports.DatePickerHelperText = index$2.DatePickerHelperText;
-exports.DatePickerOverlay = index$2.DatePickerOverlay;
-exports.DatePickerOverlayProvider = index$2.DatePickerOverlayProvider;
-exports.DatePickerRangeGridPanel = index$2.DatePickerRangeGridPanel;
-exports.DatePickerRangeInput = index$2.DatePickerRangeInput;
-exports.DatePickerRangePanel = index$2.DatePickerRangePanel;
-exports.DatePickerSingleGridPanel = index$2.DatePickerSingleGridPanel;
-exports.DatePickerSingleInput = index$2.DatePickerSingleInput;
-exports.DatePickerTrigger = index$2.DatePickerTrigger;
-exports.useDatePickerContext = index$2.useDatePickerContext;
-exports.useDatePickerOverlay = index$2.useDatePickerOverlay;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
 exports.Dropdown = Dropdown.Dropdown;
@@ -242,19 +212,17 @@ exports.useOverflowDetection = useOverflowDetection.useOverflowDetection;
 exports.useSlideSelection = useSlideSelection.useSlideSelection;
 exports.ListItemNext = ListItemNext.ListItemNext;
 exports.ListNext = ListNext.ListNext;
-exports.LocalizationProvider = index$3.LocalizationProvider;
-exports.useLocalization = index$3.useLocalization;
 exports.Logo = Logo.Logo;
 exports.LogoImage = LogoImage.LogoImage;
 exports.LogoSeparator = LogoSeparator.LogoSeparator;
 exports.MegaMenu = MegaMenu.MegaMenu;
-exports.MegaMenuContent = MegaMenuContent.MegaMenuContent;
 exports.MegaMenuGroup = MegaMenuGroup.MegaMenuGroup;
+exports.MegaMenuGroups = MegaMenuGroups.MegaMenuGroups;
 exports.MegaMenuHeader = MegaMenuHeader.MegaMenuHeader;
 exports.MegaMenuItem = MegaMenuItem.MegaMenuItem;
-exports.MegaMenuItemContent = MegaMenuItemContent.MegaMenuItemContent;
 exports.MegaMenuPanel = MegaMenuPanel.MegaMenuPanel;
-exports.MegaMenuSection = MegaMenuSection.MegaMenuSection;
+exports.MegaMenuSupportingActions = MegaMenuSupportingActions.MegaMenuSupportingActions;
+exports.MegaMenuSupportingContent = MegaMenuSupportingContent.MegaMenuSupportingContent;
 exports.MegaMenuTrigger = MegaMenuTrigger.MegaMenuTrigger;
 exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
@@ -328,16 +296,4 @@ exports.Window = WindowContext.Window;
 exports.WindowContext = WindowContext.WindowContext;
 exports.isDesktop = WindowContext.isDesktop;
 exports.useWindow = WindowContext.useWindow;
-Object.defineProperty(exports, "DateRangeSelectionContext", {
-  enumerable: true,
-  get: function () { return dateComponents.DateRangeSelectionContext; }
-});
-Object.defineProperty(exports, "LocalizationProviderContext", {
-  enumerable: true,
-  get: function () { return dateComponents.LocalizationProviderContext; }
-});
-Object.defineProperty(exports, "SingleDateSelectionContext", {
-  enumerable: true,
-  get: function () { return dateComponents.SingleDateSelectionContext; }
-});
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

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

package/dist-cjs/mega-menu/MegaMenuGroup.js

@@ -7,12 +7,9 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var MegaMenuGroup$1 = require('./MegaMenuGroup.css.js');
+var MegaMenuHeader = require('./MegaMenuHeader.js');
 
 const withBaseName = core.makePrefixer("saltMegaMenuGroup");
-function isMegaMenuHeader(child) {
-  var _a;
-  return !!((_a = child.type) == null ? void 0 : _a.__isMegaMenuHeader);
-}
 const MegaMenuGroup = react.forwardRef(
   function MegaMenuGroup2({ children, className, ...rest }, ref) {
     const targetWindow = window.useWindow();
@@ -25,7 +22,7 @@ const MegaMenuGroup = react.forwardRef(
     let header = null;
     const items = [];
     react.Children.forEach(children, (child) => {
-      if (react.isValidElement(child) && isMegaMenuHeader(child) && !header) {
+      if (react.isValidElement(child) && child.type === MegaMenuHeader.MegaMenuHeader && !header) {
         header = react.cloneElement(child, { id: headerId });
       } else {
         items.push(child);

package/dist-cjs/mega-menu/MegaMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nfunction isMegaMenuHeader(child: ReactElement): boolean {\n  return !!(child.type as { __isMegaMenuHeader?: boolean })?.__isMegaMenuHeader;\n}\n\nexport interface MegaMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu group, typically MegaMenuHeader and MegaMenuItem components.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n  function MegaMenuGroup({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-group\",\n      css: megaMenuGroupCss,\n      window: targetWindow,\n    });\n\n    const headerId = useId();\n    let header: ReactNode = null;\n    const items: ReactNode[] = [];\n\n    Children.forEach(children, (child) => {\n      if (isValidElement(child) && isMegaMenuHeader(child) && !header) {\n        header = cloneElement(child, { id: headerId });\n      } else {\n        items.push(child);\n      }\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        data-mega-menu-column=\"\"\n        ref={ref}\n        {...rest}\n      >\n        {header}\n        <ol\n          className={withBaseName(\"list\")}\n          aria-labelledby={header ? headerId : undefined}\n        >\n          {items}\n        </ol>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroup","useWindow","useComponentCssInjection","megaMenuGroupCss","useId","Children","isValidElement","cloneElement","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAErD,SAAS,iBAAiB,KAAA,EAA8B;AAjBxD,EAAA,IAAA,EAAA;AAkBE,EAAA,OAAO,CAAC,EAAA,CAAE,EAAA,GAAA,KAAA,CAAM,IAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAiD,kBAAA,CAAA;AAC7D;AASO,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAWC,UAAA,EAAM;AACvB,IAAA,IAAI,MAAA,GAAoB,IAAA;AACxB,IAAA,MAAM,QAAqB,EAAC;AAE5B,IAAAC,cAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,MAAA,IAAIC,qBAAe,KAAK,CAAA,IAAK,iBAAiB,KAAK,CAAA,IAAK,CAAC,MAAA,EAAQ;AAC/D,QAAA,MAAA,GAASC,kBAAA,CAAa,KAAA,EAAO,EAAE,EAAA,EAAI,UAAU,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA,MAClB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,uBAAA,EAAsB,EAAA;AAAA,QACtB,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,iBAAA,EAAiB,SAAS,QAAA,GAAW,MAAA;AAAA,cAEpC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\nimport { MegaMenuHeader } from \"./MegaMenuHeader\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nexport interface MegaMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu group, typically MegaMenuHeader and MegaMenuItem components.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n  function MegaMenuGroup({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-group\",\n      css: megaMenuGroupCss,\n      window: targetWindow,\n    });\n\n    const headerId = useId();\n    let header: ReactNode = null;\n    const items: ReactNode[] = [];\n\n    Children.forEach(children, (child) => {\n      if (isValidElement(child) && child.type === MegaMenuHeader && !header) {\n        header = cloneElement(child, { id: headerId });\n      } else {\n        items.push(child);\n      }\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        data-mega-menu-column=\"\"\n        ref={ref}\n        {...rest}\n      >\n        {header}\n        <ol\n          className={withBaseName(\"list\")}\n          aria-labelledby={header ? headerId : undefined}\n        >\n          {items}\n        </ol>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroup","useWindow","useComponentCssInjection","megaMenuGroupCss","useId","Children","isValidElement","MegaMenuHeader","cloneElement","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAWC,UAAA,EAAM;AACvB,IAAA,IAAI,MAAA,GAAoB,IAAA;AACxB,IAAA,MAAM,QAAqB,EAAC;AAE5B,IAAAC,cAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,MAAA,IAAIC,qBAAe,KAAK,CAAA,IAAK,MAAM,IAAA,KAASC,6BAAA,IAAkB,CAAC,MAAA,EAAQ;AACrE,QAAA,MAAA,GAASC,kBAAA,CAAa,KAAA,EAAO,EAAE,EAAA,EAAI,UAAU,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA,MAClB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,uBAAA,EAAsB,EAAA;AAAA,QACtB,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,iBAAA,EAAiB,SAAS,QAAA,GAAW,MAAA;AAAA,cAEpC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuGroups {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-columnWidth, 12rem));\n  gap: var(--salt-spacing-300);\n  padding: var(--salt-spacing-300);\n  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuGroups.css.js.map

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

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

package/dist-cjs/mega-menu/{MegaMenuSection.js → MegaMenuGroups.js}

@@ -6,20 +6,20 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
-var MegaMenuSection$1 = require('./MegaMenuSection.css.js');
+var MegaMenuGroups$1 = require('./MegaMenuGroups.css.js');
 
-const withBaseName = core.makePrefixer("saltMegaMenuSection");
-const MegaMenuSection = react.forwardRef(
-  function MegaMenuSection2({ children, className, ...rest }, ref) {
+const withBaseName = core.makePrefixer("saltMegaMenuGroups");
+const MegaMenuGroups = react.forwardRef(
+  function MegaMenuGroups2({ children, className, ...rest }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
-      testId: "salt-mega-menu-section",
-      css: MegaMenuSection$1,
+      testId: "salt-mega-menu-groups",
+      css: MegaMenuGroups$1,
       window: targetWindow
     });
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
   }
 );
 
-exports.MegaMenuSection = MegaMenuSection;
-//# sourceMappingURL=MegaMenuSection.js.map
+exports.MegaMenuGroups = MegaMenuGroups;
+//# sourceMappingURL=MegaMenuGroups.js.map

package/dist-cjs/mega-menu/MegaMenuGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuGroups.js","sources":["../src/mega-menu/MegaMenuGroups.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport megaMenuGroupsCss from \"./MegaMenuGroups.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroups\");\n\nexport interface MegaMenuGroupsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu section.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroups = forwardRef<HTMLDivElement, MegaMenuGroupsProps>(\n  function MegaMenuGroups({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-groups\",\n      css: megaMenuGroupsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroups","useWindow","useComponentCssInjection","megaMenuGroupsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -20,7 +20,6 @@ const MegaMenuHeader = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("content")), children }) });
   }
 );
-MegaMenuHeader.__isMegaMenuHeader = true;
 
 exports.MegaMenuHeader = MegaMenuHeader;
 //# sourceMappingURL=MegaMenuHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MegaMenuHeader.js","sources":["../src/mega-menu/MegaMenuHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport megaMenuHeaderCss from \"./MegaMenuHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuHeader\");\n\nexport interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the mega menu header.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuHeader = forwardRef<HTMLDivElement, MegaMenuHeaderProps>(\n  function MegaMenuHeader({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-header\",\n      css: megaMenuHeaderCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <div className={clsx(withBaseName(\"content\"))}>{children}</div>\n      </div>\n    );\n  },\n);\n\n/** @internal Marker used by MegaMenuGroup to identify header children. */\n(MegaMenuHeader as any).__isMegaMenuHeader = true;\n"],"names":["makePrefixer","forwardRef","MegaMenuHeader","useWindow","useComponentCssInjection","megaMenuHeaderCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,SAAI,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAAW,GAAG,MAC7D,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAAI,UAAS,CAAA,EAC3D,CAAA;AAAA,EAEJ;AACF;AAGC,cAAA,CAAuB,kBAAA,GAAqB,IAAA;;;;"}
+{"version":3,"file":"MegaMenuHeader.js","sources":["../src/mega-menu/MegaMenuHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport megaMenuHeaderCss from \"./MegaMenuHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuHeader\");\n\nexport interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the mega menu header.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuHeader = forwardRef<HTMLDivElement, MegaMenuHeaderProps>(\n  function MegaMenuHeader({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-header\",\n      css: megaMenuHeaderCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <div className={clsx(withBaseName(\"content\"))}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuHeader","useWindow","useComponentCssInjection","megaMenuHeaderCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,SAAI,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAAW,GAAG,MAC7D,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAAI,UAAS,CAAA,EAC3D,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltMegaMenuItem {\n  list-style: none;\n}\n\n.saltMegaMenuItem > a {\n  display: flex;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: flex-start;\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  box-sizing: border-box;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  border-radius: var(--salt-palette-corner-weak);\n  text-decoration: none;\n}\n\n.saltMegaMenuItem > a > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuItem > a:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuItem > a:hover {\n  outline: none;\n  background: var(--salt-navigable-background-hover);\n}\n\n.saltMegaMenuItem > a:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuItem > a:active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n  pointer-events: none;\n}\n";
+var css_248z = ".saltMegaMenuItem {\n  list-style: none;\n}\n\n.saltMegaMenuItem > a {\n  display: flex;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: flex-start;\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  box-sizing: border-box;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  border-radius: var(--salt-palette-corner-weak);\n  text-decoration: none;\n}\n\n.saltMegaMenuItem > a > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuItem-content {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltMegaMenuItem > a:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuItem > a:hover {\n  outline: none;\n  background: var(--salt-navigable-background-hover);\n}\n\n.saltMegaMenuItem > a:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuItem > a:active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=MegaMenuItem.css.js.map

package/dist-cjs/mega-menu/MegaMenuItem.js

@@ -14,7 +14,7 @@ function ItemAction(props) {
   return core.renderProps("a", props);
 }
 const MegaMenuItem = react.forwardRef(
-  function MegaMenuItem2({ children, className, href = "#", onClick, onKeyDown, ...rest }, ref) {
+  function MegaMenuItem2({ children, className, onClick, onKeyDown, ...rest }, ref) {
     const targetWindow = window.useWindow();
     const megaMenu = useMegaMenu.useMegaMenu();
     styles.useComponentCssInjection({
@@ -33,16 +33,17 @@ const MegaMenuItem = react.forwardRef(
         event.currentTarget.click();
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: withBaseName(), ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: clsx.clsx(withBaseName(), className), ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       ItemAction,
       {
-        className: clsx.clsx(withBaseName(), className),
         "data-mega-menu-item": "",
-        href,
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...rest,
-        children
+        children: react.Children.map(
+          children,
+          (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("content"), children: child }) : child
+        )
       }
     ) });
   }

package/dist-cjs/mega-menu/MegaMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenuItem.js","sources":["../src/mega-menu/MegaMenuItem.tsx"],"sourcesContent":["import { makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport megaMenuItemCss from \"./MegaMenuItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n  return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The content of the mega menu item.\n   */\n  children?: ReactNode;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nexport const MegaMenuItem = forwardRef<HTMLLIElement, MegaMenuItemProps>(\n  function MegaMenuItem(\n    { children, className, href = \"#\", onClick, onKeyDown, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const megaMenu = useMegaMenu();\n\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-item\",\n      css: megaMenuItemCss,\n      window: targetWindow,\n    });\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n      onClick?.(event);\n      megaMenu.setOpen(false);\n    };\n\n    // Native `<a>` activates on Enter but not Space — handle Space here for parity.\n    const handleKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented && event.key === \" \") {\n        event.preventDefault();\n        event.currentTarget.click();\n      }\n    };\n\n    return (\n      <li className={withBaseName()} ref={ref}>\n        <ItemAction\n          className={clsx(withBaseName(), className)}\n          data-mega-menu-item=\"\"\n          href={href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          {...rest}\n        >\n          {children}\n        </ItemAction>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","renderProps","forwardRef","MegaMenuItem","useWindow","useMegaMenu","useComponentCssInjection","megaMenuItemCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAGpD,SAAS,WAAW,KAAA,EAAsC;AACxD,EAAA,OAAOC,gBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAcO,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,GAAO,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,WAAWC,uBAAA,EAAY;AAE7B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,IACxB,CAAA;AAGA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4C;AACjE,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,MAAA,IAAI,CAAC,KAAA,CAAM,gBAAA,IAAoB,KAAA,CAAM,QAAQ,GAAA,EAAK;AAChD,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,cAAc,KAAA,EAAM;AAAA,MAC5B;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,YAAA,IAAgB,GAAA,EAC7B,QAAA,kBAAAA,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,qBAAA,EAAoB,EAAA;AAAA,QACpB,IAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MegaMenuItem.js","sources":["../src/mega-menu/MegaMenuItem.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnchorHTMLAttributes,\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport megaMenuItemCss from \"./MegaMenuItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n  return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The content of the mega menu item.\n   */\n  children?: ReactNode;\n  /**\n   * Render prop to enable customization of the underlying action element (e.g. a router `Link`).\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const MegaMenuItem = forwardRef<HTMLLIElement, MegaMenuItemProps>(\n  function MegaMenuItem(\n    { children, className, onClick, onKeyDown, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const megaMenu = useMegaMenu();\n\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-item\",\n      css: megaMenuItemCss,\n      window: targetWindow,\n    });\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n      onClick?.(event);\n      megaMenu.setOpen(false);\n    };\n\n    // Native `<a>` activates on Enter but not Space — handle Space here for parity.\n    const handleKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented && event.key === \" \") {\n        event.preventDefault();\n        event.currentTarget.click();\n      }\n    };\n\n    return (\n      <li className={clsx(withBaseName(), className)} ref={ref}>\n        <ItemAction\n          data-mega-menu-item=\"\"\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          {...rest}\n        >\n          {Children.map(children, (child) =>\n            typeof child === \"string\" || typeof child === \"number\" ? (\n              <span className={withBaseName(\"content\")}>{child}</span>\n            ) : (\n              child\n            ),\n          )}\n        </ItemAction>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","renderProps","forwardRef","MegaMenuItem","useWindow","useMegaMenu","useComponentCssInjection","megaMenuItemCss","jsx","clsx","Children"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAGpD,SAAS,WAAW,KAAA,EAAsC;AACxD,EAAA,OAAOC,gBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAcO,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EACnD,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,WAAWC,uBAAA,EAAY;AAE7B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,IACxB,CAAA;AAGA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4C;AACjE,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,MAAA,IAAI,CAAC,KAAA,CAAM,gBAAA,IAAoB,KAAA,CAAM,QAAQ,GAAA,EAAK;AAChD,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,cAAc,KAAA,EAAM;AAAA,MAC5B;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,cAAA,CAAC,QAAG,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAC9C,QAAA,kBAAAD,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,qBAAA,EAAoB,EAAA;AAAA,QACpB,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH,QAAA,EAAAE,cAAA,CAAS,GAAA;AAAA,UAAI,QAAA;AAAA,UAAU,CAAC,KAAA,KACvB,OAAO,KAAA,KAAU,YAAY,OAAO,KAAA,KAAU,QAAA,mBAC5CF,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EAAI,iBAAM,CAAA,GAEjD;AAAA;AAEJ;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuSupportingActions {\n  display: flex;\n  flex-wrap: wrap;\n  width: fit-content;\n  padding-bottom: var(--salt-spacing-300);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuSupportingActions.css.js.map

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

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

package/dist-cjs/mega-menu/MegaMenuSupportingActions.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var MegaMenuSupportingActions$1 = require('./MegaMenuSupportingActions.css.js');
+
+const withBaseName = core.makePrefixer("saltMegaMenuSupportingActions");
+const MegaMenuSupportingActions = react.forwardRef(function MegaMenuSupportingActions2({ className, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-mega-menu-supporting-actions",
+    css: MegaMenuSupportingActions$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      "data-mega-menu-column": "",
+      ref,
+      ...rest
+    }
+  );
+});
+
+exports.MegaMenuSupportingActions = MegaMenuSupportingActions;
+//# sourceMappingURL=MegaMenuSupportingActions.js.map

package/dist-cjs/mega-menu/MegaMenuSupportingActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuSupportingActions.js","sources":["../src/mega-menu/MegaMenuSupportingActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport megaMenuSupportingActionsCss from \"./MegaMenuSupportingActions.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuSupportingActions\");\n\nexport interface MegaMenuSupportingActionsProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Supporting action links displayed below the menu sections.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuSupportingActions = forwardRef<\n  HTMLDivElement,\n  MegaMenuSupportingActionsProps\n>(function MegaMenuSupportingActions({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-mega-menu-supporting-actions\",\n    css: megaMenuSupportingActionsCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      data-mega-menu-column=\"\"\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n"],"names":["makePrefixer","forwardRef","MegaMenuSupportingActions","useWindow","useComponentCssInjection","megaMenuSupportingActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,+BAA+B,CAAA;AAU1D,MAAM,yBAAA,GAA4BC,iBAGvC,SAASC,0BAAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAChE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,mCAAA;AAAA,IACR,GAAA,EAAKC,2BAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,uBAAA,EAAsB,EAAA;AAAA,MACtB,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuSupportingContent {\n  padding: var(--salt-spacing-300);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuSupportingContent.css.js.map

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

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

package/dist-cjs/mega-menu/MegaMenuSupportingContent.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var MegaMenuSupportingContent$1 = require('./MegaMenuSupportingContent.css.js');
+
+const withBaseName = core.makePrefixer("saltMegaMenuSupportingContent");
+const MegaMenuSupportingContent = react.forwardRef(function MegaMenuSupportingContent2({ className, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-mega-menu-supporting-content",
+    css: MegaMenuSupportingContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      "data-mega-menu-column": "",
+      ref,
+      ...rest
+    }
+  );
+});
+
+exports.MegaMenuSupportingContent = MegaMenuSupportingContent;
+//# sourceMappingURL=MegaMenuSupportingContent.js.map

package/dist-cjs/mega-menu/MegaMenuSupportingContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuSupportingContent.js","sources":["../src/mega-menu/MegaMenuSupportingContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport megaMenuSupportingContentCss from \"./MegaMenuSupportingContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuSupportingContent\");\n\nexport interface MegaMenuSupportingContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the region.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuSupportingContent = forwardRef<\n  HTMLDivElement,\n  MegaMenuSupportingContentProps\n>(function MegaMenuSupportingContent({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-mega-menu-supporting-content\",\n    css: megaMenuSupportingContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      data-mega-menu-column=\"\"\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n"],"names":["makePrefixer","forwardRef","MegaMenuSupportingContent","useWindow","useComponentCssInjection","megaMenuSupportingContentCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,+BAA+B,CAAA;AAU1D,MAAM,yBAAA,GAA4BC,iBAGvC,SAASC,0BAAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAChE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,mCAAA;AAAA,IACR,GAAA,EAAKC,2BAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,uBAAA,EAAsB,EAAA;AAAA,MACtB,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-cjs/mega-menu/useMegaMenuKeyboard.js

@@ -8,7 +8,7 @@ const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tab
 function getColumnItems(column) {
   const marked = Array.from(
     column.querySelectorAll(ITEM_SELECTOR)
-  );
+  ).filter((el) => el.matches(FOCUSABLE_SELECTOR));
   if (marked.length > 0) return marked;
   return Array.from(column.querySelectorAll(FOCUSABLE_SELECTOR));
 }
@@ -26,7 +26,7 @@ function buildGrid(panel) {
       if (items.length > 0) grid.push(items);
     } else if (el.matches(ITEM_SELECTOR)) {
       const parentCol = el.closest(COLUMN_SELECTOR);
-      if (!parentCol || !columns.has(parentCol)) {
+      if ((!parentCol || !columns.has(parentCol)) && el.matches(FOCUSABLE_SELECTOR)) {
         grid.push([el]);
       }
     }