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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.99
+
+### Minor Changes
+
+- 9c9b83e: Added `BreadcrumbsNext`, `BreadcrumbNext`, `BreadcrumbNextTrigger`, and `BreadcrumbNextLabel` for accessible breadcrumb navigation. Supports wrapping, disclosure collapse, and routing integration via `render` props.
+
+### Patch Changes
+
+- d37a311: Updated Floating UI from `0.26.28` to `0.27.19`.
+- Updated dependencies [747cb08]
+- Updated dependencies [d84df88]
+- Updated dependencies [56855cb]
+- Updated dependencies [e226b17]
+- Updated dependencies [9c9b83e]
+- Updated dependencies [747cb08]
+- Updated dependencies [d37a311]
+  - @salt-ds/core@1.67.0
+
+## 1.0.0-alpha.98
+
+### Minor Changes
+
+- f9f9b8e: Removed `MegaMenu` and its related components (`MegaMenuActions`, `MegaMenuAside`, `MegaMenuContent`, `MegaMenuGroup`, `MegaMenuGroupHeading`, `MegaMenuGroups`, `MegaMenuList`, `MegaMenuListItem`, `MegaMenuPanel`, and `MegaMenuTrigger`) from lab and promoted to core.
+
+### Patch Changes
+
+- Updated dependencies [f9f9b8e]
+  - @salt-ds/core@1.66.0
+
 ## 1.0.0-alpha.97
 
 ### Minor Changes

package/css/salt-lab.css

@@ -174,6 +174,152 @@
   margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);
 }
 
+/* src/breadcrumbs-next/BreadcrumbNext.css */
+.saltBreadcrumbNext {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumbNext-current,
+.saltBreadcrumbNext-label,
+.saltBreadcrumbNext-link,
+.saltBreadcrumbNext-trigger {
+  min-width: 0;
+}
+.saltBreadcrumbNext-trigger {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  max-width: 100%;
+}
+.saltBreadcrumbNext-link.saltLink {
+  --link-color-visited: var(--link-color);
+  --link-textDecoration-visited: var(--link-textDecoration);
+}
+.saltBreadcrumbNext-current.saltLink {
+  cursor: var(--salt-cursor-text);
+}
+.saltBreadcrumbNext-separator {
+  --saltIcon-color: var(--salt-content-secondary-foreground);
+  --saltIcon-size: var(--salt-size-icon);
+  flex: 0 0 auto;
+}
+
+/* src/breadcrumbs-next/BreadcrumbsNext.css */
+.saltBreadcrumbsNext {
+  display: block;
+  margin-block: var(--salt-spacing-25);
+}
+.saltBreadcrumbsNext-ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--salt-spacing-100);
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-ol-wrap {
+  flex-wrap: wrap;
+}
+.saltBreadcrumbsNext-collapseItem {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumbsNext-collapseButton[aria-expanded=true] {
+  background: var(--saltButton-background-active, var(--button-background-active));
+  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
+  color: var(--saltButton-text-color-active, var(--button-text-color-active));
+  cursor: var(--salt-cursor-active);
+}
+.saltBreadcrumbsNext-disclosure {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  min-width: 10em;
+  position: relative;
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+}
+.saltBreadcrumbsNext-disclosureList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-disclosureListItem {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-disclosureItem {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  cursor: var(--salt-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  text-decoration: none;
+  width: 100%;
+}
+.saltBreadcrumbsNext-disclosureItem.saltLink {
+  --link-color: var(--salt-content-primary-foreground);
+  --link-color-hover: var(--salt-content-primary-foreground);
+  --link-color-active: var(--salt-content-primary-foreground);
+  --link-color-focus: var(--salt-content-primary-foreground);
+  --link-color-visited: var(--salt-content-primary-foreground);
+  --link-textDecoration: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-active: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-focus: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-visited: var(--salt-typography-textDecoration-none);
+}
+.saltBreadcrumbsNext-disclosureItem.saltLink:focus:not(:focus-visible) {
+  outline: none;
+}
+.saltBreadcrumbsNext-disclosureItem:focus-visible,
+.saltBreadcrumbsNext-disclosureItem.saltLink:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltBreadcrumbsNext-disclosureItem:hover {
+  outline: none;
+}
+.saltBreadcrumbsNext-disclosureItem:hover,
+.saltBreadcrumbsNext-disclosureItem:focus-visible {
+  background: var(--salt-selectable-background-hover);
+}
+.saltBreadcrumbsNext-disclosureItem:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
+}
+.saltBreadcrumbsNext-disclosureItem[aria-disabled=true],
+.saltBreadcrumbsNext-disclosureItem[aria-disabled=true]:active {
+  background: var(--salt-selectable-background-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-cursor-disabled);
+  box-shadow: none;
+}
+
 /* src/button-bar/ButtonBar.css */
 .saltButtonBar {
   width: 100%;
@@ -1893,148 +2039,6 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
-/* src/mega-menu/MegaMenuActions.css */
-.saltMegaMenuActions {
-  display: flex;
-  flex-wrap: wrap;
-  margin-block-start: auto;
-}
-
-/* src/mega-menu/MegaMenuAside.css */
-.saltMegaMenuAside {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding: var(--salt-spacing-300);
-}
-
-/* src/mega-menu/MegaMenuContent.css */
-.saltMegaMenuContent {
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-300);
-  padding: var(--salt-spacing-300);
-  min-width: 0;
-  flex: 0 1 auto;
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
-  box-sizing: border-box;
-}
-
-/* src/mega-menu/MegaMenuGroup.css */
-.saltMegaMenuGroup {
-  display: flex;
-  flex-direction: column;
-}
-
-/* src/mega-menu/MegaMenuGroupHeading.css */
-.saltMegaMenuGroupHeading {
-  display: flex;
-  align-items: center;
-  margin: 0 0 var(--salt-spacing-50);
-  padding: var(--salt-spacing-50) var(--salt-spacing-100);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
-  min-height: var(--salt-size-base);
-  font-family: var(--salt-text-label-fontFamily);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-fontWeight-strong);
-  line-height: var(--salt-text-label-lineHeight);
-  color: var(--salt-content-secondary-foreground);
-}
-
-/* src/mega-menu/MegaMenuGroups.css */
-.saltMegaMenuGroups {
-  align-self: start;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(0, var(--saltMegaMenuGroups-columnWidth, 12rem)));
-  gap: var(--salt-spacing-300);
-  min-width: 0;
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
-}
-
-/* src/mega-menu/MegaMenuList.css */
-.saltMegaMenuList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  gap: var(--salt-spacing-fixed-100);
-  flex-direction: column;
-}
-
-/* src/mega-menu/MegaMenuListItem.css */
-.saltMegaMenuListItem {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-}
-.saltMegaMenuListItem-wrapper {
-  display: flex;
-  padding: var(--salt-spacing-50) var(--salt-spacing-100);
-  align-items: flex-start;
-  color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background);
-  cursor: var(--salt-cursor-hover);
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  box-sizing: border-box;
-  gap: var(--salt-spacing-100);
-  position: relative;
-  border-radius: var(--salt-palette-corner-weak, 0);
-  text-decoration: none;
-  border: none;
-  font: inherit;
-  text-align: start;
-}
-.saltMegaMenuListItem-wrapper > .saltIcon {
-  display: flex;
-  height: var(--salt-size-base);
-  align-items: center;
-}
-.saltMegaMenuListItem-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);
-}
-.saltMegaMenuListItem-wrapper:focus-visible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-}
-.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {
-  outline: none;
-  background: var(--salt-overlayable-background-hover);
-}
-.saltMegaMenuListItem-wrapper:active {
-  background: var(--salt-navigable-accent-background-active);
-}
-.saltMegaMenuListItem-wrapper:active::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border-radius: inherit;
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);
-  pointer-events: none;
-}
-
-/* src/mega-menu/MegaMenuPanel.css */
-.saltMegaMenuPanel {
-  --saltMegaMenuPanel-availableWidth: calc(100vw - var(--salt-spacing-600));
-  display: flex;
-  align-items: stretch;
-  inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);
-  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth));
-  max-block-size: 90vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
-  background: var(--salt-container-primary-background);
-  box-shadow: var(--salt-overlayable-shadow-modal);
-}
-
 /* src/menu-button/MenuButton.css */
 
 /* src/menu-button/MenuButtonTrigger.css */
@@ -3258,4 +3262,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/8f16bdce-6a2c-43c5-bef1-c547bffcc9de.css */
+/* src/a1e4b79c-9deb-4780-be8e-e16a36fe360d.css */

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltBreadcrumbNext {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbNext-current,\n.saltBreadcrumbNext-label,\n.saltBreadcrumbNext-link,\n.saltBreadcrumbNext-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumbNext-trigger {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  max-width: 100%;\n}\n\n.saltBreadcrumbNext-link.saltLink {\n  --link-color-visited: var(--link-color);\n  --link-textDecoration-visited: var(--link-textDecoration);\n}\n\n.saltBreadcrumbNext-current.saltLink {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumbNext-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=BreadcrumbNext.css.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js.map

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

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js

@@ -0,0 +1,99 @@
+'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 BreadcrumbNext$1 = require('./BreadcrumbNext.css.js');
+var BreadcrumbNextLabel = require('./BreadcrumbNextLabel.js');
+var BreadcrumbNextTrigger = require('./BreadcrumbNextTrigger.js');
+var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const withBreadcrumbsBaseName = core.makePrefixer("saltBreadcrumbsNext");
+function isPrimitiveBreadcrumbLabel(children) {
+  return typeof children === "string" && children.trim() !== "" || typeof children === "number";
+}
+function isMissingBreadcrumbContent(children) {
+  const childArray = react.Children.toArray(children);
+  return childArray.length === 0 || childArray.every(
+    (child) => typeof child === "string" && child.trim() === ""
+  );
+}
+let missingBreadcrumbContentWarningShown = false;
+function warnIfMissingBreadcrumbContent() {
+  if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
+    return;
+  }
+  missingBreadcrumbContentWarningShown = true;
+  console.warn(
+    "BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items."
+  );
+}
+const BreadcrumbNext = react.forwardRef(
+  function BreadcrumbNext2(props, ref) {
+    const {
+      children,
+      className,
+      current: currentProp,
+      href,
+      render,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-breadcrumb-next",
+      css: BreadcrumbNext$1,
+      window: targetWindow
+    });
+    const parentContext = BreadcrumbNextContext.useBreadcrumbNextContext();
+    const current = (parentContext == null ? void 0 : parentContext.current) ?? Boolean(currentProp);
+    const onNavigate = parentContext == null ? void 0 : parentContext.onNavigate;
+    const placement = (parentContext == null ? void 0 : parentContext.placement) ?? "trail";
+    const showSeparator = (parentContext == null ? void 0 : parentContext.showSeparator) ?? false;
+    const triggerRef = parentContext == null ? void 0 : parentContext.triggerRef;
+    const resolvedRender = render ?? (parentContext == null ? void 0 : parentContext.render);
+    const { LevelSeparatorIcon } = core.useIcon();
+    const missingContent = isMissingBreadcrumbContent(children);
+    if (missingContent) {
+      warnIfMissingBreadcrumbContent();
+    }
+    const primitiveChildren = isPrimitiveBreadcrumbLabel(children) ? children : void 0;
+    const content = missingContent ? null : primitiveChildren !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNextTrigger.BreadcrumbNextTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNextLabel.BreadcrumbNextLabel, { children: primitiveChildren }) }) : children;
+    const context = {
+      current,
+      href,
+      onNavigate,
+      placement,
+      render: resolvedRender,
+      showSeparator,
+      triggerRef
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        className: clsx.clsx(
+          placement === "disclosure" ? withBreadcrumbsBaseName("disclosureListItem") : withBaseName(),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbNextContext.BreadcrumbNextContext.Provider, { value: context, children: [
+          content,
+          placement === "trail" && showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(
+            LevelSeparatorIcon,
+            {
+              "aria-hidden": true,
+              className: withBaseName("separator")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+
+exports.BreadcrumbNext = BreadcrumbNext;
+//# sourceMappingURL=BreadcrumbNext.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNext.js","sources":["../src/breadcrumbs-next/BreadcrumbNext.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport breadcrumbNextCss from \"./BreadcrumbNext.css\";\nimport { BreadcrumbNextLabel } from \"./BreadcrumbNextLabel\";\nimport { BreadcrumbNextTrigger } from \"./BreadcrumbNextTrigger\";\nimport {\n  BreadcrumbNextContext,\n  useBreadcrumbNextContext,\n} from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV === \"production\" ||\n    missingBreadcrumbContentWarningShown\n  ) {\n    return;\n  }\n\n  missingBreadcrumbContentWarningShown = true;\n  console.warn(\n    \"BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbNextProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbNextTrigger` and `BreadcrumbNextLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const BreadcrumbNext = forwardRef<HTMLLIElement, BreadcrumbNextProps>(\n  function BreadcrumbNext(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb-next\",\n      css: breadcrumbNextCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbNextContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbNextTrigger>\n        <BreadcrumbNextLabel>{primitiveChildren}</BreadcrumbNextLabel>\n      </BreadcrumbNextTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbNextContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbNextContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","forwardRef","BreadcrumbNext","useWindow","useComponentCssInjection","breadcrumbNextCss","useBreadcrumbNextContext","useIcon","jsx","BreadcrumbNextTrigger","BreadcrumbNextLabel","clsx","jsxs","BreadcrumbNextContext"],"mappings":"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"}

package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const BreadcrumbNextLabel = react.forwardRef(function BreadcrumbNextLabel2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: clsx.clsx(withBaseName("label"), className),
+      ...rest
+    }
+  );
+});
+
+exports.BreadcrumbNextLabel = BreadcrumbNextLabel;
+//# sourceMappingURL=BreadcrumbNextLabel.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNextLabel.js","sources":["../src/breadcrumbs-next/BreadcrumbNextLabel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\n\nexport interface BreadcrumbNextLabelProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nexport const BreadcrumbNextLabel = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbNextLabelProps\n>(function BreadcrumbNextLabel({ className, ...rest }, ref) {\n  return (\n    <span\n      ref={ref}\n      className={clsx(withBaseName(\"label\"), className)}\n      {...rest}\n    />\n  );\n});\n"],"names":["makePrefixer","forwardRef","BreadcrumbNextLabel","jsx","clsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAK/C,MAAM,mBAAA,GAAsBC,iBAGjC,SAASC,oBAAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC1D,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const withBreadcrumbsBaseName = core.makePrefixer("saltBreadcrumbsNext");
+const BreadcrumbNextTrigger = react.forwardRef(function BreadcrumbNextTrigger2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const context = BreadcrumbNextContext.useBreadcrumbNextContext();
+  if (!context) {
+    throw new Error(
+      "BreadcrumbNextTrigger must be rendered inside BreadcrumbNext"
+    );
+  }
+  const { current, href, onNavigate, placement, render, triggerRef } = context;
+  const handleRef = core.useForkRef(ref, triggerRef);
+  const isDisclosure = placement === "disclosure";
+  const triggerClassName = clsx.clsx(
+    isDisclosure ? withBreadcrumbsBaseName("disclosureItem") : withBaseName("trigger"),
+    className
+  );
+  const isNavigable = href !== void 0;
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (isDisclosure || !event.defaultPrevented) {
+      onNavigate == null ? void 0 : onNavigate();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Link,
+    {
+      "aria-current": current ? "page" : void 0,
+      className: clsx.clsx(triggerClassName, {
+        [withBaseName("link")]: isNavigable,
+        [withBaseName("current")]: current
+      }),
+      color: isDisclosure ? "inherit" : void 0,
+      href,
+      onClick: isNavigable ? handleClick : onClick,
+      ref: handleRef,
+      render: isNavigable ? render : void 0,
+      styleAs: "label",
+      underline: current || !isNavigable || isDisclosure ? "never" : void 0,
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.BreadcrumbNextTrigger = BreadcrumbNextTrigger;
+//# sourceMappingURL=BreadcrumbNextTrigger.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNextTrigger.js","sources":["../src/breadcrumbs-next/BreadcrumbNextTrigger.tsx"],"sourcesContent":["import { Link, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { useBreadcrumbNextContext } from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nexport interface BreadcrumbNextTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"children\" | \"color\" | \"href\"> {\n  /**\n   * Breadcrumb trigger content.\n   */\n  children?: ReactNode;\n}\n\nexport const BreadcrumbNextTrigger = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbNextTriggerProps\n>(function BreadcrumbNextTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const context = useBreadcrumbNextContext();\n\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbNextTrigger must be rendered inside BreadcrumbNext\",\n    );\n  }\n\n  const { current, href, onNavigate, placement, render, triggerRef } = context;\n  const handleRef = useForkRef(ref, triggerRef);\n  const isDisclosure = placement === \"disclosure\";\n  const triggerClassName = clsx(\n    isDisclosure\n      ? withBreadcrumbsBaseName(\"disclosureItem\")\n      : withBaseName(\"trigger\"),\n    className,\n  );\n  const isNavigable = href !== undefined;\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    onClick?.(event);\n\n    if (isDisclosure || !event.defaultPrevented) {\n      onNavigate?.();\n    }\n  };\n\n  return (\n    <Link\n      aria-current={current ? \"page\" : undefined}\n      className={clsx(triggerClassName, {\n        [withBaseName(\"link\")]: isNavigable,\n        [withBaseName(\"current\")]: current,\n      })}\n      color={isDisclosure ? \"inherit\" : undefined}\n      href={href}\n      onClick={isNavigable ? handleClick : onClick}\n      ref={handleRef}\n      render={isNavigable ? render : undefined}\n      styleAs=\"label\"\n      underline={current || !isNavigable || isDisclosure ? \"never\" : undefined}\n      {...rest}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["makePrefixer","forwardRef","BreadcrumbNextTrigger","useBreadcrumbNextContext","useForkRef","clsx","jsx","Link"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AACtD,MAAM,uBAAA,GAA0BA,kBAAa,qBAAqB,CAAA;AAU3D,MAAM,qBAAA,GAAwBC,gBAAA,CAGnC,SAASC,sBAAAA,CAAsB,OAAO,GAAA,EAAK;AAC3C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAClD,EAAA,MAAM,UAAUC,8CAAA,EAAyB;AAEzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,YAAY,SAAA,EAAW,MAAA,EAAQ,YAAW,GAAI,OAAA;AACrE,EAAA,MAAM,SAAA,GAAYC,eAAA,CAAW,GAAA,EAAK,UAAU,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAA,KAAc,YAAA;AACnC,EAAA,MAAM,gBAAA,GAAmBC,SAAA;AAAA,IACvB,YAAA,GACI,uBAAA,CAAwB,gBAAgB,CAAA,GACxC,aAAa,SAAS,CAAA;AAAA,IAC1B;AAAA,GACF;AACA,EAAA,MAAM,cAAc,IAAA,KAAS,MAAA;AAC7B,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAEV,IAAA,IAAI,YAAA,IAAgB,CAAC,KAAA,CAAM,gBAAA,EAAkB;AAC3C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,EAAA;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,SAAA,EAAWF,UAAK,gBAAA,EAAkB;AAAA,QAChC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,WAAA;AAAA,QACxB,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,KAAA,EAAO,eAAe,SAAA,GAAY,MAAA;AAAA,MAClC,IAAA;AAAA,MACA,OAAA,EAAS,cAAc,WAAA,GAAc,OAAA;AAAA,MACrC,GAAA,EAAK,SAAA;AAAA,MACL,MAAA,EAAQ,cAAc,MAAA,GAAS,MAAA;AAAA,MAC/B,OAAA,EAAQ,OAAA;AAAA,MACR,SAAA,EAAW,OAAA,IAAW,CAAC,WAAA,IAAe,eAAe,OAAA,GAAU,MAAA;AAAA,MAC9D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltBreadcrumbsNext {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbsNext-ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--salt-spacing-100);\n  justify-content: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbsNext-collapseItem {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbsNext-collapseButton[aria-expanded=\"true\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbsNext-disclosure {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbsNext-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  width: 100%;\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink {\n  --link-color: var(--salt-content-primary-foreground);\n  --link-color-hover: var(--salt-content-primary-foreground);\n  --link-color-active: var(--salt-content-primary-foreground);\n  --link-color-focus: var(--salt-content-primary-foreground);\n  --link-color-visited: var(--salt-content-primary-foreground);\n  --link-textDecoration: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-active: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-focus: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-visited: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus:not(:focus-visible) {\n  outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:focus-visible,\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover,\n.saltBreadcrumbsNext-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbsNext-disclosureItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=BreadcrumbsNext.css.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js.map

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