@salt-ds/lab 1.0.0-alpha.53 → 1.0.0-alpha.55

package/css/salt-lab.css

@@ -335,7 +335,14 @@
   height: calc(var(--salt-size-container-spacing) - 2px) !important;
   width: calc(var(--salt-size-container-spacing) - 2px) !important;
   border: 1px solid var(--salt-status-negative-foreground);
-  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);
+  background:
+    linear-gradient(
+      to top left,
+      rgba(166, 21, 11, 0) 0%,
+      rgba(166, 21, 11, 0) calc(50% - 0.8px),
+      rgba(166, 21, 11, 1) 50%,
+      rgba(166, 21, 11, 0) calc(50% + 0.8px),
+      rgba(166, 21, 11, 0) 100%);
 }
 .saltColorChooser-overlayButtonText {
   font-weight: var(--salt-text-fontWeight);
@@ -576,7 +583,14 @@
   height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;
   margin-bottom: 1px;
   margin-left: 1px;
-  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;
+  background:
+    linear-gradient(
+      to top left,
+      rgba(166, 21, 11, 0) 0%,
+      rgba(166, 21, 11, 0) calc(50% - 0.8px),
+      rgba(166, 21, 11, 1) 50%,
+      rgba(166, 21, 11, 0) calc(50% + 0.8px),
+      rgba(166, 21, 11, 0) 100%) !important;
 }
 
 /* src/color-chooser/Swatches.css */
@@ -1147,6 +1161,46 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
+/* src/dialog/DialogHeader.css */
+.saltDialogHeader {
+  padding-bottom: var(--salt-spacing-300);
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltDialogHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+}
+.saltDialogHeader-header > .saltText {
+  margin: 0;
+}
+.saltDialogHeader-actionsContainer {
+  align-self: flex-start;
+}
+.saltDialogHeader .saltStatusIndicator.saltIcon {
+  --icon-size: var(--salt-text-h2-lineHeight);
+}
+.saltDialogHeader-withAccent {
+  position: relative;
+}
+.saltDialogHeader-withAccent::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: var(--salt-spacing-300);
+  width: var(--salt-size-bar);
+  background: var(--salt-accent-background);
+}
+
 /* src/dropdown/Dropdown.css */
 .saltDropdownBase {
   --saltIcon-margin: 2px 0 0 8px;
@@ -1386,7 +1440,11 @@
   --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);
   --formFieldLegacy-label-paddingRight: var(--salt-size-unit);
   --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));
-  background: linear-gradient(to top, transparent var(--formFieldLegacy-background-offset-height), var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height));
+  background:
+    linear-gradient(
+      to top,
+      transparent var(--formFieldLegacy-background-offset-height),
+      var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height));
 }
 .saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {
   --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);
@@ -2140,7 +2198,7 @@
 .saltListItemNext-focused {
   border: var(--salt-focused-outline);
 }
-.saltListItemNext-highlighted:not([aria-disabled="true"]) {
+.saltListItemNext-highlighted:not([aria-disabled=true]) {
   --listNext-item-background: var(--salt-selectable-background-hover);
   cursor: var(--salt-selectable-cursor-hover);
 }
@@ -2600,6 +2658,7 @@
 /* src/static-list/StaticList.css */
 .saltStaticList {
   overflow-y: auto;
+  padding: 0;
 }
 
 /* src/static-list/StaticListItem.css */
@@ -3024,7 +3083,7 @@
   right: 2px;
   bottom: 0;
 }
-.saltTab-vertical .saltFocusVisible:not([aria-selected="true"]):before {
+.saltTab-vertical .saltFocusVisible:not([aria-selected=true]):before {
   left: auto;
   height: auto;
   top: 0;
@@ -3049,8 +3108,8 @@
   --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);
   --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
 }
-.saltTab:not([aria-selected="true"]).saltFocusVisible:before,
-.saltTab:hover:not([aria-selected="true"]):before {
+.saltTab:not([aria-selected=true]).saltFocusVisible:before,
+.saltTab:hover:not([aria-selected=true]):before {
   --tabs-tab-before-content: "";
   --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
   --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
@@ -3228,19 +3287,66 @@
   --toolbar-depth: calc(var(--salt-size-basis-unit) * 7);
 }
 
+/* src/tabs-next/TabBar.css */
+.saltTabBar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  box-sizing: border-box;
+}
+.saltTabBar-divider::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: var(--salt-size-border);
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+}
+.saltTabBar-inset {
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+}
+
+/* src/tabs-next/TabListNext.css */
+.saltTabListNext {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  gap: var(--salt-spacing-100);
+  max-width: 100%;
+}
+.saltTabListNext-center {
+  justify-content: center;
+}
+.saltTabListNext-right {
+  justify-content: flex-end;
+}
+.saltTabListNext-activeColorPrimary {
+  --saltTabListNext-activeColor: var(--salt-container-primary-background);
+}
+.saltTabListNext-activeColorSecondary {
+  --saltTabListNext-activeColor: var(--salt-container-secondary-background);
+}
+.saltTabListNext-activeColorTertiary {
+  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
+}
+
 /* src/tabs-next/TabNext.css */
 .saltTabNext {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   appearance: none;
   -webkit-appearance: none;
-  display: inline-flex;
-  background: var(--salt-navigable-primary-background);
   gap: var(--salt-spacing-100);
   border: none;
   border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
   border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
-  border-radius: 0;
   white-space: pre;
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   min-width: 4em;
@@ -3248,6 +3354,9 @@
   position: relative;
   flex-shrink: 0;
   box-sizing: border-box;
+  --tabNext-radius: var(--salt-palette-corner-weak, 0);
+  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
+  overflow: hidden;
   cursor: var(--salt-navigable-cursor-hover);
   color: var(--salt-content-primary-foreground);
   font-weight: var(--salt-navigable-fontWeight);
@@ -3257,12 +3366,6 @@
   line-height: var(--salt-text-lineHeight);
   font-size: var(--salt-text-fontSize);
 }
-.saltTabNext-primary {
-  --tabNext-background-active: var(--salt-container-primary-background);
-}
-.saltTabNext-secondary {
-  --tabNext-background-active: var(--salt-container-secondary-background);
-}
 .saltTabNext::after {
   content: "";
   position: absolute;
@@ -3270,71 +3373,129 @@
   right: calc(var(--salt-size-border) * -1);
   height: var(--salt-size-indicator);
 }
-.saltTabNext-main::after {
+.saltTabListNext-bordered .saltTabNext::after {
   top: 0;
 }
-.saltTabNext-inline::after {
+.saltTabListNext-transparent .saltTabNext::after {
   bottom: 0;
 }
 .saltTabNext:hover::after,
-.saltTabNext:focus-visible::after {
+.saltTabNext-focusVisible::after {
   background: var(--salt-navigable-indicator-hover);
 }
-.saltTabNext:disabled:hover::after,
-.saltTabNext:disabled:focus-visible::after {
+.saltTabNext-disabled:hover::after,
+.saltTabNext-disabled.saltTabNext-focusVisible::after {
   background: none;
 }
-.saltTabNext:focus-visible {
+.saltTabNext-focusVisible {
   outline: var(--salt-focused-outline);
 }
-.saltTabNext-main[aria-selected=true] {
-  background: var(--tabNext-background-active);
+.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {
+  background: var(--saltTabListNext-activeColor);
   border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
   border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
 }
-.saltTabNext[aria-selected=true]::after {
+.saltTabNext.saltTabNext-selected::after {
   background: var(--salt-navigable-indicator-active);
 }
-.saltTabNext:disabled {
+.saltTabNext.saltTabNext-disabled {
   cursor: var(--salt-navigable-cursor-disabled);
   color: var(--salt-content-primary-foreground-disabled);
 }
 
-/* src/tabs-next/TabstripNext.css */
-.saltTabstripNext {
+/* src/tabs-next/TabNextPanel.css */
+.saltTabNextPanel {
+  height: 100%;
+  width: 100%;
+}
+.saltTabNextPanel[hidden] {
+  display: none;
+}
+.saltTabNextPanel:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+/* src/tabs-next/TabNextTrigger.css */
+.saltTabNextTrigger {
+  all: unset;
   display: flex;
-  flex-wrap: nowrap;
-  justify-content: var(--tabstripNext-justifyContent);
+  gap: var(--salt-spacing-100);
   align-items: center;
-  position: relative;
-  background: transparent;
-  width: 100%;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
+  justify-content: center;
+  flex: 1;
 }
-.saltTabstripNext-container {
-  display: block;
+.saltTabNextTrigger::before {
+  content: "";
+  position: absolute;
   width: 100%;
-  height: fit-content;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/* src/tabs-next/TabOverflowList.css */
+.saltTabOverflow {
   position: relative;
 }
-.saltTabstripNext-main {
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
+.saltTabOverflow-list {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
 }
-.saltTabstripNext-main::before {
-  content: "";
-  position: absolute;
-  inset: auto 0 0 0;
-  height: var(--salt-size-border);
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+.saltTabOverflow-listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-border);
+  max-height: inherit;
+  min-height: inherit;
+}
+.saltTabOverflow-list[data-hidden=true] {
+  opacity: 0;
+  pointer-events: none;
 }
-.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {
+.saltTabOverflow-list .saltTabNext {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  align-items: center;
+  cursor: var(--salt-selectable-cursor-hover);
   box-sizing: border-box;
+  flex-shrink: 0;
+  justify-content: flex-start;
+}
+.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {
+  justify-content: start;
+}
+.saltTabOverflow-list .saltTabNext::after {
+  display: none;
+}
+.saltTabOverflow-list .saltTabNext[aria-disabled=true] {
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltTabOverflow-list .saltTabNext-focusVisible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-border) * -2);
+}
+.saltTabOverflow-list .saltTabNext:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltTabOverflow-list .saltTabNext:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
 /* src/toast-group/ToastGroup.css */
@@ -4371,4 +4532,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/a9f7fc8f-a7aa-4043-9f09-029432b66a3d.css */
+/* src/af7c52bf-6cbd-4d27-940f-b761495ee395.css */

package/dist-cjs/app-header/AppHeader.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
@@ -25,12 +23,15 @@ const AppHeader = react.forwardRef(
       css: AppHeader$1,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar, {
-      className: clsx.clsx(withBaseName(), className),
-      ref,
-      overflowButtonIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.MenuIcon, {}),
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Toolbar.Toolbar,
+      {
+        className: clsx.clsx(withBaseName(), className),
+        ref,
+        overflowButtonIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.MenuIcon, {}),
+        children
+      }
+    );
   }
 );
 

package/dist-cjs/app-header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { Toolbar } from \"../toolbar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAOD,IAAA,uBACGC,cAAA,CAAAC,eAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,MAG7B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAcJ;AACF;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { Toolbar } from \"../toolbar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAOD,IACE,uBAAAC,cAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,QAG7B;AAAA;AAAA,KACH;AAAA;AAeN;;;;"}

package/dist-cjs/breadcrumbs/Breadcrumb.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
@@ -36,53 +34,55 @@ const Breadcrumb = react.forwardRef(
     const { itemsMaxWidth, itemsMinWidth, liClass } = BreadcrumbsContext.useBreadcrumbsContext();
     const hasChildren = react.Children.count(children) !== 0;
     const hasOnlyIcon = Icon && !hasChildren;
-    const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
-      maxRows: 1,
-      className: clsx.clsx(
-        withBaseName(),
-        className,
-        withBaseName("currentLevel")
-      ),
-      styleAs: "label",
-      children
-    }) : /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.clsx(
-        withBaseName(),
-        className,
-        {
-          [withBaseName("justifyContentCenter")]: hasOnlyIcon
-        },
-        withBaseName("regular")
-      ),
-      children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-          className: withBaseName("icon")
-        }),
-        hasChildren && /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
-          maxRows: 1,
-          styleAs: "label",
-          ...props,
-          children
-        })
-      ]
-    });
+    const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsxRuntime.jsx(
+      core.Text,
+      {
+        maxRows: 1,
+        className: clsx.clsx(
+          withBaseName(),
+          className,
+          withBaseName("currentLevel")
+        ),
+        styleAs: "label",
+        children
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          className,
+          {
+            [withBaseName("justifyContentCenter")]: hasOnlyIcon
+          },
+          withBaseName("regular")
+        ),
+        children: [
+          Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: withBaseName("icon") }),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx(core.Link, { maxRows: 1, styleAs: "label", ...props, children })
+        ]
+      }
+    );
     const content = getDefaultBreadcrumb();
     const {
       style: containerStyle,
       className: containerClassName,
       ...containerPropsRest
     } = ContainerProps;
-    return /* @__PURE__ */ jsxRuntime.jsx("li", {
-      ref,
-      style: {
-        ...containerStyle,
-        minWidth: minWidth != null ? minWidth : itemsMinWidth,
-        maxWidth: maxWidth != null ? maxWidth : itemsMaxWidth
-      },
-      className: clsx.clsx(liClass, containerClassName),
-      ...containerPropsRest,
-      children: content
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        style: {
+          ...containerStyle,
+          minWidth: minWidth ?? itemsMinWidth,
+          maxWidth: maxWidth ?? itemsMaxWidth
+        },
+        className: clsx.clsx(liClass, containerClassName),
+        ...containerPropsRest,
+        children: content
+      }
+    );
   }
 );
 

package/dist-cjs/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, Text, type TooltipProps, makePrefixer } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport breadcrumbCss from \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAECC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAD,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACEA,cAAA,CAAAI,SAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACGJ,cAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAWE,SAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAC1C,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, Text, type TooltipProps, makePrefixer } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport breadcrumbCss from \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cACE,mBAAAC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,CAAA;AAAA,QACT,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QAEP;AAAA;AAAA,KAGH,mBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAD,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UAC/C,WAAA,mCACEI,SAAK,EAAA,EAAA,OAAA,EAAS,GAAG,OAAQ,EAAA,OAAA,EAAS,GAAG,KAAA,EACnC,QACH,EAAA;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IACE,uBAAAJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAY,IAAA,aAAA;AAAA,UACtB,UAAU,QAAY,IAAA;AAAA,SACxB;AAAA,QACA,SAAA,EAAWE,SAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/breadcrumbs/Breadcrumbs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
@@ -20,11 +18,7 @@ function insertSeparators(items, className, separator, hideCurrentLevel, shouldR
     if (index < items.length - 1) {
       return acc.concat(
         current,
-        /* @__PURE__ */ jsxRuntime.jsx("li", {
-          "aria-hidden": true,
-          className,
-          children: separator
-        }, `separator-${index}`)
+        /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": true, className, children: separator }, `separator-${index}`)
       );
     }
     const skipLastElement = hideCurrentLevel && shouldRenderAllItems || hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0;
@@ -64,9 +58,7 @@ const Breadcrumbs = react.forwardRef(
       }),
       [wrap, itemsMaxWidth, itemsMinWidth]
     );
-    const separator = separatorProp || /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsSeparator.BreadcrumbsSeparator, {
-      ...SeparatorProps
-    });
+    const separator = separatorProp || /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsSeparator.BreadcrumbsSeparator, { ...SeparatorProps });
     const childrenArray = react.Children.toArray(children);
     const shouldRenderAllItems = wrap || maxItems == null || childrenArray.length <= maxItems;
     const allItems = childrenArray.filter(react.isValidElement).map((child, index) => {
@@ -91,14 +83,14 @@ const Breadcrumbs = react.forwardRef(
       );
       return [
         ...allItems.slice(0, itemsBeforeCollapse),
-        /* @__PURE__ */ jsxRuntime.jsx("li", {
-          className: withBaseName("li"),
-          children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsCollapsed.BreadcrumbsCollapsed, {
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: withBaseName("li"), children: /* @__PURE__ */ jsxRuntime.jsx(
+          BreadcrumbsCollapsed.BreadcrumbsCollapsed,
+          {
             accessibleText: `Breadcrumb levels ${itemsBeforeCollapse + 1} to ${allItems.length - itemsAfterCollapse}`,
             className: withBaseName("overflowButton"),
             children: hiddenItems
-          })
-        }, "breadcrumbs-collapsed"),
+          }
+        ) }, "breadcrumbs-collapsed"),
         ...allItems.slice(
           allItems.length - itemsAfterCollapse,
           allItems.length
@@ -106,29 +98,32 @@ const Breadcrumbs = react.forwardRef(
       ];
     };
     const itemsToRender = shouldRenderAllItems ? allItems : renderItemsBeforeAndAfter();
-    return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsContext.BreadcrumbsContext.Provider, {
-      value: breadcrumbsContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx("nav", {
+    return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsContext.BreadcrumbsContext.Provider, { value: breadcrumbsContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
         "aria-label": "Breadcrumb",
         className: clsx.clsx(withBaseName(), className),
         "data-testid": "breadcrumbs",
         ref,
         ...other,
-        children: /* @__PURE__ */ jsxRuntime.jsx("ol", {
-          className: clsx.clsx(withBaseName("ol"), {
-            [withBaseName("ol-wrap")]: wrap
-          }),
-          children: insertSeparators(
-            itemsToRender,
-            withBaseName("separator"),
-            separator,
-            hideCurrentLevel,
-            shouldRenderAllItems,
-            itemsAfterCollapse
-          )
-        })
-      })
-    });
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            className: clsx.clsx(withBaseName("ol"), {
+              [withBaseName("ol-wrap")]: wrap
+            }),
+            children: insertSeparators(
+              itemsToRender,
+              withBaseName("separator"),
+              separator,
+              hideCurrentLevel,
+              shouldRenderAllItems,
+              itemsAfterCollapse
+            )
+          }
+        )
+      }
+    ) });
   }
 );