@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

package/css/salt-lab.css

@@ -24,7 +24,7 @@
 .saltAppHeader {
   align-items: flex-start;
   background: var(--appHeader-background);
-  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);
+  border-bottom: var(--salt-borderStyle-solid) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);
   box-shadow: var(--appHeader-shadow);
   box-sizing: content-box;
   display: flex;
@@ -270,6 +270,9 @@
   user-select: none;
   white-space: nowrap;
   text-overflow: ellipsis;
+  border-top: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;
+  border-bottom: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;
+  box-sizing: border-box;
 }
 .saltCascadingMenuItem-menuItemText {
   flex-grow: 2;
@@ -286,13 +289,15 @@
   visibility: hidden;
 }
 .saltCascadingMenuItem.saltCascadingMenuItem-menuItemDivider {
-  border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
 }
 .saltCascadingMenuItem-menuItemHover:hover {
   background: var(--salt-selectable-background-hover);
 }
 .saltCascadingMenuItem.saltCascadingMenuItem-menuItemBlurSelected {
-  background: var(--salt-selectable-background-blurSelected) !important;
+  background: var(--salt-selectable-background-selected);
+  border-top-color: var(--salt-selectable-borderColor-selected);
+  border-bottom-color: var(--salt-selectable-borderColor-selected);
 }
 
 /* src/cascading-menu/CascadingMenuList.css */
@@ -316,7 +321,7 @@
 .saltColorChooser-overlayButtonSwatchTransparent {
   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);
+  border: 1px solid var(--salt-sentiment-negative-foreground-decorative);
   background:
     linear-gradient(
       to top left,
@@ -348,7 +353,7 @@
   height: var(--salt-size-stackable);
 }
 .saltColorChooser-defaultButton {
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
 .saltColorChooser-overlayContent {
   max-width: 100%;
@@ -427,7 +432,7 @@
   width: 4px !important;
   height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
   background: var(--salt-container-primary-background) !important;
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
 
 /* src/color-chooser/DictTabs.css */
@@ -451,20 +456,20 @@
 }
 .saltColorChooserHexInput-input {
   width: var(--salt-size-unit);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
 
 /* src/color-chooser/RGBAInput.css */
 .saltColorChooser-rgbaInput {
   width: var(--salt-size-unit);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
   padding-top: var(--salt-size-unit);
 }
 .saltColorChooser-opacityInput {
   min-width: 40px !important;
   width: 40px !important;
   min-height: unset !important;
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
 .saltColorChooser-rgbaText {
   margin-top: 5px;
@@ -534,7 +539,7 @@
   cursor: var(--salt-cursor-hover);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch {
-  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch,
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
@@ -550,17 +555,17 @@
   height: calc(var(--colorChooser-swatch-size-unit) - 2);
 }
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
-  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
 }
 .saltColorChooserSwatch-active {
-  outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
-  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;
+  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;
   margin-bottom: 1px;
   margin-left: 1px;
   cursor: var(--salt-cursor-active);
 }
 .saltColorChooserSwatch-transparent {
-  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;
   width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;
   height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;
   margin-bottom: 1px;
@@ -880,25 +885,25 @@
   cursor: var(--salt-cursor-text);
 }
 .saltDateInput-bordered.saltDateInput {
-  border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);
 }
 .saltDateInput-bordered.saltDateInput:hover {
-  border-style: var(--salt-editable-borderStyle-hover);
+  border-style: var(--salt-borderStyle-solid);
   border-color: var(--input-borderColor-hover);
 }
 .saltDateInput-bordered.saltDateInput-focused,
 .saltDateInput-bordered.saltDateInput-focused:hover {
-  border-style: var(--salt-editable-borderStyle-active);
+  border-style: var(--salt-borderStyle-solid);
   border-color: var(--input-borderColor-active);
 }
 .saltDateInput-bordered.saltDateInput-readOnly,
 .saltDateInput-bordered.saltDateInput-readOnly:hover {
-  border-style: var(--salt-editable-borderStyle-readonly);
+  border-style: var(--salt-borderStyle-solid);
   border-color: var(--salt-editable-borderColor-readonly);
 }
 .saltDateInput-bordered.saltDateInput-disabled,
 .saltDateInput-bordered.saltDateInput-disabled:hover {
-  border-style: var(--salt-editable-borderStyle-disabled);
+  border-style: var(--salt-borderStyle-solid);
   border-color: var(--salt-editable-borderColor-disabled);
 }
 .saltDateInput-activationIndicator {
@@ -906,24 +911,24 @@
   bottom: 0;
   width: 100%;
   position: absolute;
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);
 }
 .saltDateInput:hover .saltDateInput-activationIndicator {
-  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-style: var(--salt-borderStyle-solid);
   border-bottom-color: var(--input-borderColor-hover);
 }
 .saltDateInput-focused .saltDateInput-activationIndicator,
 .saltDateInput-focused:hover .saltDateInput-activationIndicator {
-  border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
+  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);
 }
 .saltDateInput-readOnly .saltDateInput-activationIndicator,
 .saltDateInput-readOnly:hover .saltDateInput-activationIndicator {
-  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-style: var(--salt-borderStyle-solid);
   border-bottom-color: var(--salt-editable-borderColor-readonly);
 }
 .saltDateInput-disabled .saltDateInput-activationIndicator,
 .saltDateInput-disabled:hover .saltDateInput-activationIndicator {
-  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-style: var(--salt-borderStyle-solid);
   border-bottom-color: var(--salt-editable-borderColor-disabled);
 }
 .saltDateInput-bordered .saltDateInput-activationIndicator,
@@ -1011,7 +1016,7 @@
 .saltDateInput-endAdornmentContainer {
   display: inline-flex;
   column-gap: var(--salt-spacing-50);
-  align-items: end;
+  align-items: flex-end;
 }
 .saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
   margin-left: calc(-1 * var(--salt-spacing-50));
@@ -1040,7 +1045,6 @@
   overflow: hidden;
   padding: 0;
   text-align: left;
-  width: min-content;
   width: 100%;
 }
 .saltDateInput-input:focus {
@@ -1093,7 +1097,7 @@
 /* src/date-picker/DatePickerOverlay.css */
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -1106,7 +1110,7 @@
 /* src/date-picker/DatePickerPanel.css */
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
   border-radius: var(--salt-palette-corner, 0);
   overflow: hidden;
   overflow-y: auto;
@@ -1300,7 +1304,7 @@
 .saltFormFieldLegacy {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --formFieldLegacy-background: var(--salt-editable-primary-background);
   --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);
   --formFieldLegacy-helperText-height: 0px;
@@ -1325,7 +1329,7 @@
 .saltFormFieldLegacy:hover {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --saltInputLegacy-cursor: var(--salt-cursor-hover);
 }
 .saltFormFieldLegacy-focused,
@@ -1334,7 +1338,7 @@
 .saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --saltInputLegacy-cursor: var(--salt-cursor-active);
 }
 .saltFormFieldLegacy-withHelperText {
@@ -1358,14 +1362,14 @@
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);
   --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);
   --saltInputLegacy-cursor: var(--salt-cursor-disabled);
 }
 .saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --saltInputLegacy-cursor: var(--salt-cursor-disabled);
 }
 .saltFormFieldLegacy.saltFormFieldLegacy-warning {
@@ -1443,7 +1447,7 @@
 .saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
-  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);
+  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
   --saltInputLegacy-cursor: var(--salt-cursor-readonly);
 }
 .saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {
@@ -1869,7 +1873,7 @@
 /* src/list/List.css */
 .saltList {
   --list-background: var(--salt-container-primary-background);
-  --list-borderStyle: var(--salt-container-borderStyle);
+  --list-borderStyle: var(--salt-borderStyle-solid);
   --list-borderWidth: var(--salt-size-fixed-100);
   --list-height: auto;
   --list-item-height: var(--salt-size-stackable);
@@ -2026,7 +2030,7 @@
 .saltListDeprecated-wrapper {
   --list-background: var(--salt-container-primary-background);
   --list-borderColor: var(--salt-container-primary-borderColor);
-  --list-borderStyle: var(--salt-container-borderStyle);
+  --list-borderStyle: var(--salt-borderStyle-solid);
   --list-borderWidth: var(--salt-size-fixed-100);
   --list-borderRadius: 0;
   --list-boxShadow: none;
@@ -2164,7 +2168,7 @@
   cursor: var(--salt-cursor-hover);
 }
 .saltListItemNext[aria-selected=true] {
-  outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
+  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
   --listNext-item-background: var(--salt-selectable-background-selected);
   --saltIcon-color: var(--salt-selectable-foreground-selected);
 }
@@ -2176,7 +2180,7 @@
   color: var(--listNext-item-text-color);
 }
 .saltListItemNext[aria-disabled=true][aria-selected=true] {
-  outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);
+  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selectedDisabled);
   --listNext-item-background: var(--salt-selectable-background-selectedDisabled);
 }
 
@@ -2185,7 +2189,7 @@
   margin: 0;
   background: var(--salt-container-primary-background);
   border-color: var(--salt-container-primary-borderColor);
-  border-style: var(--salt-container-borderStyle);
+  border-style: var(--salt-borderStyle-solid);
   border-width: var(--salt-size-fixed-100);
   height: 100%;
   outline: none;
@@ -2222,7 +2226,7 @@
 /* src/logo/LogoSeparator.css */
 .saltLogoSeparator {
   height: var(--salt-size-separator-height);
-  border-right: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
 /* src/menu-button/MenuButton.css */
@@ -2286,16 +2290,16 @@
   margin-top: var(--metric-content-valueContainer-marginTop, 0px);
 }
 .saltMetric-direction-up .saltMetricContent-indicator {
-  fill: var(--salt-status-positive-foreground);
+  fill: var(--salt-sentiment-positive-foreground-decorative);
 }
 .saltMetric-direction-up .saltMetricContent-subvalue {
-  color: var(--salt-status-positive-foreground);
+  color: var(--salt-sentiment-positive-foreground-informative);
 }
 .saltMetric-direction-down .saltMetricContent-indicator {
-  fill: var(--salt-status-negative-foreground);
+  fill: var(--salt-sentiment-negative-foreground-decorative);
 }
 .saltMetric-direction-down .saltMetricContent-subvalue {
-  color: var(--salt-status-negative-foreground);
+  color: var(--salt-sentiment-negative-foreground-informative);
 }
 .saltMetricContent-subvalue {
   margin-top: var(--metric-content-subvalue-marginTop, 0px);
@@ -2348,9 +2352,9 @@
 
 /* src/number-input/NumberInput.css */
 .saltNumberInput {
-  --numberInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--numberInput-borderColor);
+  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
   --numberInput-borderColor: var(--salt-editable-borderColor);
-  --numberInput-borderStyle: var(--salt-editable-borderStyle);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-outlineColor: var(--salt-focused-outlineColor);
   --numberInput-borderWidth: var(--salt-size-fixed-100);
   --numberInput-outline: none;
@@ -2376,14 +2380,14 @@
   width: 100%;
 }
 .saltNumberInput:hover {
-  --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--numberInput-background-hover);
   cursor: var(--salt-cursor-text);
 }
 .saltNumberInput:active {
   --numberInput-borderColor: var(--salt-editable-borderColor-active);
-  --numberInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-borderWidth: var(--salt-size-fixed-200);
   background: var(--numberInput-background-active);
 }
@@ -2461,7 +2465,7 @@
   outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));
 }
 .saltNumberInput-bordered {
-  --numberInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--numberInput-borderColor);
+  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
   --numberInput-borderWidth: 0;
   border: var(--numberInput-border);
 }
@@ -2479,7 +2483,7 @@
 .saltNumberInput-readOnly,
 .saltNumberInput-bordered.saltNumberInput-readOnly {
   --numberInput-borderColor: var(--salt-editable-borderColor-readonly);
-  --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-borderWidth: var(--salt-size-fixed-100);
   background: var(--numberInput-background-readonly);
   cursor: var(--salt-cursor-readonly);
@@ -2501,7 +2505,7 @@
 .saltNumberInput-disabled:hover,
 .saltNumberInput-disabled:active {
   --numberInput-borderColor: var(--salt-editable-borderColor-disabled);
-  --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-borderWidth: var(--salt-size-fixed-100);
   background: var(--numberInput-background-disabled);
   cursor: var(--salt-cursor-disabled);
@@ -2562,10 +2566,10 @@
   bottom: 0;
   width: 100%;
   position: absolute;
-  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--numberInput-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
 }
 .saltNumberInput-focused .saltNumberInput-activationIndicator {
-  border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--salt-editable-borderColor-active);
+  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);
 }
 .saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {
   border-bottom-width: var(--salt-size-fixed-100);
@@ -2677,6 +2681,7 @@
 .saltStaticList {
   overflow-y: auto;
   padding: 0;
+  margin: 0;
 }
 
 /* src/static-list/StaticListItem.css */
@@ -2709,7 +2714,7 @@
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
   border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));
   border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-fixed-100));
-  border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle));
+  border-style: var(--saltSystemStatus-borderStyle, var(--salt-borderStyle-solid));
   box-sizing: border-box;
   display: flex;
   gap: var(--salt-spacing-75);
@@ -2793,7 +2798,7 @@
 }
 .saltTab[aria-selected=true] {
   color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-navigable-fontWeight-active);
+  font-weight: var(--salt-text-fontWeight-strong);
 }
 .saltTab-dragAway {
   display: none;
@@ -2840,7 +2845,7 @@
   content: attr(data-text);
   display: block;
   visibility: hidden;
-  font-weight: var(--salt-navigable-fontWeight-active);
+  font-weight: var(--salt-text-fontWeight-strong);
 }
 .saltTab-editing:after {
   content: "";
@@ -2911,7 +2916,7 @@
   inset: var(--saltTabs-activationIndicator-thumb-inset);
   position: absolute;
   height: var(--tabs-activationIndicator-thumb-height, auto);
-  background: var(--salt-navigable-indicator-active);
+  background: var(--salt-navigable-accent-indicator-active);
   transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));
   width: var(--tabs-activationIndicator-thumb-width, auto);
   z-index: 1;
@@ -3029,7 +3034,7 @@
   --tabs-activationIndicator-thumb-width: 2px;
 }
 .saltDraggable[class*=tabstrip] .saltTab[aria-selected=true]:before {
-  --tabs-tab-before-background: var(--salt-navigable-indicator-active);
+  --tabs-tab-before-background: var(--salt-navigable-accent-indicator-active);
 }
 .saltDraggable[class*=tabstrip] .saltTab {
   box-shadow: var(--salt-overlayable-shadow-drag);
@@ -3076,7 +3081,7 @@
   position: absolute;
   inset: auto 0 0 0;
   height: var(--salt-size-fixed-100);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
 }
 .saltTabBar-inset {
   padding-left: var(--salt-spacing-300);
@@ -3124,8 +3129,8 @@
   -webkit-appearance: none;
   gap: var(--salt-spacing-100);
   border: none;
-  border-left: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
-  border-right: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
   white-space: pre;
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   min-width: 4em;
@@ -3138,7 +3143,7 @@
   overflow: hidden;
   cursor: var(--salt-cursor-hover);
   color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-navigable-fontWeight);
+  font-weight: var(--salt-text-fontWeight);
   font-family: var(--salt-text-fontFamily);
   text-align: var(--salt-text-textAlign);
   letter-spacing: var(--salt-text-letterSpacing);
@@ -3171,11 +3176,11 @@
 }
 .saltTabListNext-bordered .saltTabNext.saltTabNext-selected {
   background: var(--saltTabListNext-activeColor);
-  border-left: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
-  border-right: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
 }
 .saltTabNext.saltTabNext-selected::after {
-  background: var(--salt-navigable-indicator-active);
+  background: var(--salt-navigable-accent-indicator-active);
 }
 .saltTabNext.saltTabNext-disabled {
   cursor: var(--salt-cursor-disabled);
@@ -3218,7 +3223,7 @@
 }
 .saltTabOverflow-list {
   background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
   overflow: hidden;
   overflow-y: auto;
   position: absolute;
@@ -3436,7 +3441,7 @@
 }
 .saltTokenizedInputNext {
   --tokenizedInput-borderColor: var(--salt-editable-borderColor);
-  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);
+  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);
   --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);
   --tokenizedInput-border: none;
   --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);
@@ -3458,14 +3463,14 @@
   box-sizing: border-box;
 }
 .saltTokenizedInputNext:hover {
-  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);
   --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--tokenizedInput-background-hover);
   cursor: var(--salt-cursor-hover);
 }
 .saltTokenizedInputNext:active {
   --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);
-  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);
   --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);
   background: var(--tokenizedInput-background-active);
   cursor: var(--salt-cursor-active);
@@ -3546,7 +3551,7 @@
 .saltTokenizedInputNext-readOnly:active,
 .saltTokenizedInputNext-readOnly:hover {
   --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);
-  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);
   --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);
   background: var(--tokenizedInput-background-readonly);
   cursor: var(--salt-cursor-readonly);
@@ -3558,7 +3563,7 @@
 .saltTokenizedInputNext-disabled:hover,
 .saltTokenizedInputNext-disabled:active {
   --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);
-  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --tokenizedInput-borderStyle: var(--salt-borderStyle-solid);
   --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-100);
   background: var(--tokenizedInput-background-disabled);
   cursor: var(--salt-cursor-disabled);
@@ -3572,7 +3577,7 @@
   border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);
 }
 .saltTokenizedInputNext.saltTokenizedInputNext-bordered {
-  --tokenizedInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);
+  --tokenizedInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tokenizedInput-borderColor);
   --tokenizedInput-activationIndicator-borderWidth: 0;
 }
 .saltTokenizedInputNext-bordered:active,
@@ -3621,7 +3626,6 @@
   overflow: hidden;
   position: relative;
   font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
 }
@@ -4020,7 +4024,7 @@
   color: var(--salt-content-primary-foreground);
 }
 .saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
-  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);
+  border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);
 }
 .saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
   background: var(--salt-content-secondary-foreground);
@@ -4193,7 +4197,7 @@
   --saltButton-justifyContent: flex-start;
   align-items: stretch;
   color: var(--salt-content-primary-foreground);
-  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
   display: flex;
   flex-direction: column;
   padding: calc(var(--salt-size-unit) * 1.5) 0;
@@ -4218,4 +4222,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/f741130d-3b1f-4499-8cd4-f65e6b5365f5.css */
+/* src/0418c448-15fe-4a92-87ef-3abef3bd7323.css */

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-fixed-100);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-borderStyle-solid) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-fixed-100);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AppHeader.css.js.map

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

@@ -3,15 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var Toolbar = require('../toolbar/Toolbar.js');
 var react = require('react');
-require('../toolbar/overflow-panel/OverflowPanel.js');
+var Toolbar = require('../toolbar/Toolbar.js');
+require('../toolbar/ToolbarButton.js');
 require('../responsive/useResizeObserver.js');
 require('../toolbar/toolbar-field/ToolbarField.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-require('../toolbar/ToolbarButton.js');
+require('../toolbar/overflow-panel/OverflowPanel.js');
 var AppHeader$1 = require('./AppHeader.css.js');
 
 const withBaseName = core.makePrefixer("saltAppHeader");

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;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;;;;"}
+{"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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { Toolbar } from \"../toolbar\";\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":";;;;;;;;;;;;;;;;AAUA,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

@@ -2,12 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var react = require('react');
-var BreadcrumbsContext = require('./internal/BreadcrumbsContext.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
 var Breadcrumb$1 = require('./Breadcrumb.css.js');
+var BreadcrumbsContext = require('./internal/BreadcrumbsContext.js');
 
 const withBaseName = core.makePrefixer("saltBreadcrumb");
 const Breadcrumb = react.forwardRef(