@salt-ds/core 1.68.0 → 1.69.0

package/dist-cjs/slider/internal/SliderTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-primary-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

package/dist-cjs/toast/Toast.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-bold-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toast.css.js.map

package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-bold-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/toggletip/ToggletipPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-primary-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
+var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-bold-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggletipPanel.css.js.map

package/dist-cjs/toolbar/Toolbar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToolbar {\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  position: relative;\n}\n\n.saltToolbar-layout {\n  align-items: center;\n  --saltToolbar-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout:not([data-centered]) {\n  display: flex;\n  column-gap: var(--saltToolbar-band-gap);\n}\n\n.saltToolbar-layout[data-centered] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbar-band {\n  display: flex;\n  align-items: center;\n  gap: var(--saltToolbar-band-gap);\n  min-width: 0;\n}\n\n.saltToolbar-layout:not([data-centered]) > .saltToolbar-band[data-band-position=\"end\"] {\n  justify-content: flex-end;\n  margin-inline-start: auto;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"start\"] {\n  grid-column: 1;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"center\"] {\n  grid-column: 2;\n  justify-content: center;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"end\"] {\n  grid-column: 3;\n  justify-content: flex-end;\n}\n\n.saltToolbar-fallback {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout > * {\n  min-width: 0;\n}\n\n.saltToolbar-primary {\n  --toolbar-background: var(--salt-container-primary-background);\n  --toolbar-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltToolbar-secondary {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltToolbar-tertiary {\n  --toolbar-background: var(--salt-container-tertiary-background);\n  --toolbar-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltToolbar-bordered {\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbar-borderColor, var(--toolbar-borderColor));\n  border-radius: var(--salt-palette-corner, 0);\n  padding: var(--salt-spacing-100);\n}\n\n.saltToolbar-transparent {\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.saltToolbar-measurements {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  inset: 0 auto auto 0;\n  block-size: 0;\n  overflow: hidden;\n}\n\n.saltToolbar-measureTrigger {\n  white-space: nowrap;\n}\n";
+var css_248z = ".saltToolbar {\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  position: relative;\n}\n\n.saltToolbar-layout {\n  align-items: center;\n  --saltToolbar-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout:not([data-centered]) {\n  display: flex;\n  column-gap: var(--saltToolbar-band-gap);\n}\n\n.saltToolbar-layout[data-centered] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbar-band {\n  display: flex;\n  align-items: center;\n  gap: var(--saltToolbar-band-gap);\n  min-width: 0;\n}\n\n.saltToolbar-layout:not([data-centered]) > .saltToolbar-band[data-band-position=\"end\"] {\n  justify-content: flex-end;\n  margin-inline-start: auto;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"start\"] {\n  grid-column: 1;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"center\"] {\n  grid-column: 2;\n  justify-content: center;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"end\"] {\n  grid-column: 3;\n  justify-content: flex-end;\n}\n\n.saltToolbar-fallback {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout > * {\n  min-width: 0;\n}\n\n.saltToolbar-primary {\n  --toolbar-background: var(--salt-container-primary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-secondary {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-tertiary {\n  --toolbar-background: var(--salt-container-tertiary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-bordered {\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbar-borderColor, var(--toolbar-borderColor));\n  border-radius: var(--salt-palette-corner, 0);\n  padding: var(--salt-spacing-100);\n}\n\n.saltToolbar-transparent {\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.saltToolbar-measurements {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  inset: 0 auto auto 0;\n  block-size: 0;\n  overflow: hidden;\n}\n\n.saltToolbar-measureTrigger {\n  white-space: nowrap;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toolbar.css.js.map

package/dist-cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-bold-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-cjs/viewport/ViewportProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        },\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAGA,MAAM,eAAA,GAAkBA,oBAA6B,IAAI;AAMzD,MAAM,gBAAA,GAAmB,CAAC,EAAE,QAAA,EAAS,KAA6B;AAEhE,EAAA,MAAM,gBAAA,GAAmBC,iBAAW,eAAe,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAA,KAAqB,IAAA;AAChD,EAAA,MAAM,aAAA,GAAgB,oBAAoB,QAAA,IAAY,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,GAAkC,IAAA;AAEtC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAAA,KAA2C;AAC1C,UAAA,WAAA,CAAY,eAAA,CAAgB,CAAC,CAAA,CAAE,WAAA,CAAY,KAAK,CAAA;AAAA,QAClD;AAAA,OACF;AAEA,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAI,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAA,CAAS,IAAA,CAAK,qBAAA,EAAsB,CAAE,KAAK,CAAA;AAAA,IACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,sCACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,eAC9B,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,cAAc,MAAc;AAChC,EAAA,MAAM,KAAA,GAAQF,iBAAW,eAAe,CAAA;AACxC,EAAA,OAAO,KAAA,KAAU,OAAO,CAAA,GAAI,KAAA;AAC9B;;;;;;"}
+{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        },\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { useViewport, ViewportContext, ViewportProvider };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAGA,MAAM,eAAA,GAAkBA,oBAA6B,IAAI;AAMzD,MAAM,gBAAA,GAAmB,CAAC,EAAE,QAAA,EAAS,KAA6B;AAEhE,EAAA,MAAM,gBAAA,GAAmBC,iBAAW,eAAe,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAA,KAAqB,IAAA;AAChD,EAAA,MAAM,aAAA,GAAgB,oBAAoB,QAAA,IAAY,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,GAAkC,IAAA;AAEtC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAAA,KAA2C;AAC1C,UAAA,WAAA,CAAY,eAAA,CAAgB,CAAC,CAAA,CAAE,WAAA,CAAY,KAAK,CAAA;AAAA,QAClD;AAAA,OACF;AAEA,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAI,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAA,CAAS,IAAA,CAAK,qBAAA,EAAsB,CAAE,KAAK,CAAA;AAAA,IACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,sCACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,eAC9B,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,cAAc,MAAc;AAChC,EAAA,MAAM,KAAA,GAAQF,iBAAW,eAAe,CAAA;AACxC,EAAA,OAAO,KAAA,KAAU,OAAO,CAAA,GAAI,KAAA;AAC9B;;;;;;"}

package/dist-es/avatar/Avatar.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Avatar.css.js.map

package/dist-es/avatar/Avatar.js

@@ -27,6 +27,7 @@ const Avatar = forwardRef(function Avatar2({
   color = "accent",
   name,
   nameToInitials = defaultNameToInitials,
+  kind = "person",
   src,
   size = DEFAULT_AVATAR_SIZE,
   style: styleProp,
@@ -35,8 +36,9 @@ const Avatar = forwardRef(function Avatar2({
   ...rest
 }, ref) {
   const targetWindow = useWindow();
-  const { UserIcon } = useIcon();
-  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsx(UserIcon, { "aria-hidden": true }) : fallbackIconProp;
+  const { UserIcon, EntityIcon } = useIcon();
+  const DefaultFallbackIcon = kind === "entity" ? EntityIcon : UserIcon;
+  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsx(DefaultFallbackIcon, { "aria-hidden": true }) : fallbackIconProp;
   useComponentCssInjection({
     testId: "salt-avatar",
     css: css_248z,
@@ -70,6 +72,7 @@ const Avatar = forwardRef(function Avatar2({
       className: clsx(
         withBaseName(),
         withBaseName(color),
+        withBaseName(kind),
         {
           [withBaseName("withImage")]: hasImgNotFailing
         },

package/dist-es/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["AvatarAction","Avatar","avatarCss"],"mappings":";;;;;;;;;;;;;;;AAqEA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAC9C,MAAM,mBAAA,GAAsB,CAAA;AAM5B,MAAM,YAAA,GAAe,UAAA;AAAA,EACnB,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,OAAO,YAAY,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA,EAC7C;AACF,CAAA;AAEA,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAAS,UAAA,CAAwC,SAASC,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,OAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,uBAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAAS,cAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,SAAA,GAAY,OACd,MAAA,GACE;AAAA,IACE,YAAA,EAAc;AAAA,GAChB,GACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAElB,EAAC;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to the semantic `UserIcon` when\n   * `kind` is `\"person\"`, and the semantic `EntityIcon` when `kind`\n   * is `\"entity\"`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * What the Avatar depicts, which determines its default shape and fallback icon:\n   * - `\"person\"` renders a circular Avatar (default).\n   * - `\"entity\"` renders a square Avatar.\n   *\n   * @default \"person\"\n   */\n  kind?: \"person\" | \"entity\";\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    kind = \"person\",\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon, EntityIcon } = useIcon();\n\n  const DefaultFallbackIcon = kind === \"entity\" ? EntityIcon : UserIcon;\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <DefaultFallbackIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        withBaseName(kind),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["AvatarAction","Avatar","avatarCss"],"mappings":"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"}

package/dist-es/breadcrumbs/Breadcrumb.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltBreadcrumb {\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.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  gap: var(--salt-spacing-50);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-label-lineHeight);\n  max-width: 100%;\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current) {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-trigger:focus {\n  outline: var(--salt-focused-outline);\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-current {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumb-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumb.css.js.map

package/dist-es/breadcrumbs/Breadcrumb.css.js.map

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

package/dist-es/breadcrumbs/Breadcrumb.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, Children } from 'react';
+import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Breadcrumb.css.js';
+import { BreadcrumbLabel } from './BreadcrumbLabel.js';
+import { BreadcrumbTrigger } from './BreadcrumbTrigger.js';
+import { useBreadcrumbContext, BreadcrumbContext } from './internal/BreadcrumbContext.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbs");
+function isPrimitiveBreadcrumbLabel(children) {
+  return typeof children === "string" && children.trim() !== "" || typeof children === "number";
+}
+function isMissingBreadcrumbContent(children) {
+  const childArray = 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(
+    "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
+  );
+}
+const Breadcrumb = forwardRef(
+  function Breadcrumb2(props, ref) {
+    const {
+      children,
+      className,
+      current: currentProp,
+      href,
+      render,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-breadcrumb",
+      css: css_248z,
+      window: targetWindow
+    });
+    const parentContext = useBreadcrumbContext();
+    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 } = useIcon();
+    const missingContent = isMissingBreadcrumbContent(children);
+    if (missingContent) {
+      warnIfMissingBreadcrumbContent();
+    }
+    const primitiveChildren = isPrimitiveBreadcrumbLabel(children) ? children : void 0;
+    const content = missingContent ? null : primitiveChildren !== void 0 ? /* @__PURE__ */ jsx(BreadcrumbTrigger, { children: /* @__PURE__ */ jsx(BreadcrumbLabel, { children: primitiveChildren }) }) : children;
+    const context = {
+      current,
+      href,
+      onNavigate,
+      placement,
+      render: resolvedRender,
+      showSeparator,
+      triggerRef
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: clsx(
+          placement === "disclosure" ? withBreadcrumbsBaseName("disclosureListItem") : withBaseName(),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs(BreadcrumbContext.Provider, { value: context, children: [
+          content,
+          placement === "trail" && showSeparator ? /* @__PURE__ */ jsx(
+            LevelSeparatorIcon,
+            {
+              "aria-hidden": true,
+              className: withBaseName("separator")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { 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 { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\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    \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\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 Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(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\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\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      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\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        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":"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"}

package/dist-es/breadcrumbs/BreadcrumbLabel.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const BreadcrumbLabel = forwardRef(function BreadcrumbLabel2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: clsx(withBaseName("label"), className),
+      ...rest
+    }
+  );
+});
+
+export { BreadcrumbLabel };
+//# sourceMappingURL=BreadcrumbLabel.js.map

package/dist-es/breadcrumbs/BreadcrumbLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLabel.js","sources":["../src/breadcrumbs/BreadcrumbLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbLabelProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nexport const BreadcrumbLabel = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbLabelProps\n>(function BreadcrumbLabel({ className, ...rest }, ref) {\n  return (\n    <span\n      ref={ref}\n      className={clsx(withBaseName(\"label\"), className)}\n      {...rest}\n    />\n  );\n});\n"],"names":["BreadcrumbLabel"],"mappings":";;;;;;;;;AAIA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAK3C,MAAM,eAAA,GAAkB,WAG7B,SAASA,gBAAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-es/breadcrumbs/BreadcrumbTrigger.js

@@ -0,0 +1,50 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { renderProps } from '../utils/renderProps.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useBreadcrumbContext } from './internal/BreadcrumbContext.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbs");
+const BreadcrumbTrigger = forwardRef(function BreadcrumbTrigger2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const context = useBreadcrumbContext();
+  if (!context) {
+    throw new Error("BreadcrumbTrigger must be rendered inside Breadcrumb");
+  }
+  const { current, href, onNavigate, placement, render, triggerRef } = context;
+  const handleRef = useForkRef(ref, triggerRef);
+  const isDisclosure = placement === "disclosure";
+  const triggerClassName = 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 renderProps("a", {
+    "aria-current": current ? "page" : void 0,
+    children,
+    className: clsx(triggerClassName, {
+      [withBaseName("link")]: !isDisclosure && isNavigable,
+      [withBaseName("current")]: current
+    }),
+    href,
+    onClick: isNavigable ? handleClick : onClick,
+    ref: handleRef,
+    render: isNavigable ? render : void 0,
+    ...rest
+  });
+});
+
+export { BreadcrumbTrigger };
+//# sourceMappingURL=BreadcrumbTrigger.js.map

package/dist-es/breadcrumbs/BreadcrumbTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbTrigger.js","sources":["../src/breadcrumbs/BreadcrumbTrigger.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, renderProps, useForkRef } from \"../utils\";\nimport { useBreadcrumbContext } from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nexport interface BreadcrumbTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"children\" | \"color\" | \"href\"> {\n  /**\n   * Breadcrumb trigger content.\n   */\n  children?: ReactNode;\n}\n\nexport const BreadcrumbTrigger = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbTriggerProps\n>(function BreadcrumbTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const context = useBreadcrumbContext();\n\n  if (!context) {\n    throw new Error(\"BreadcrumbTrigger must be rendered inside Breadcrumb\");\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 renderProps(\"a\", {\n    \"aria-current\": current ? \"page\" : undefined,\n    children,\n    className: clsx(triggerClassName, {\n      [withBaseName(\"link\")]: !isDisclosure && isNavigable,\n      [withBaseName(\"current\")]: current,\n    }),\n    href,\n    onClick: isNavigable ? handleClick : onClick,\n    ref: handleRef,\n    render: isNavigable ? render : undefined,\n    ...rest,\n  });\n});\n"],"names":["BreadcrumbTrigger"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAClD,MAAM,uBAAA,GAA0B,aAAa,iBAAiB,CAAA;AAUvD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAClD,EAAA,MAAM,UAAU,oBAAA,EAAqB;AAErC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,sDAAsD,CAAA;AAAA,EACxE;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,YAAY,SAAA,EAAW,MAAA,EAAQ,YAAW,GAAI,OAAA;AACrE,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,UAAU,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAA,KAAc,YAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,IAAA;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,OAAO,YAAY,GAAA,EAAK;AAAA,IACtB,cAAA,EAAgB,UAAU,MAAA,GAAS,MAAA;AAAA,IACnC,QAAA;AAAA,IACA,SAAA,EAAW,KAAK,gBAAA,EAAkB;AAAA,MAChC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,CAAC,YAAA,IAAgB,WAAA;AAAA,MACzC,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,KAC5B,CAAA;AAAA,IACD,IAAA;AAAA,IACA,OAAA,EAAS,cAAc,WAAA,GAAc,OAAA;AAAA,IACrC,GAAA,EAAK,SAAA;AAAA,IACL,MAAA,EAAQ,cAAc,MAAA,GAAS,MAAA;AAAA,IAC/B,GAAG;AAAA,GACJ,CAAA;AACH,CAAC;;;;"}

package/dist-es/breadcrumbs/Breadcrumbs.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltBreadcrumbs {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-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.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-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.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-subtle-background-active);\n  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-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.saltBreadcrumbs-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-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.saltBreadcrumbs-disclosureItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-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.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-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";
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumbs.css.js.map

package/dist-es/breadcrumbs/Breadcrumbs.css.js.map

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

package/dist-es/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, isValidElement } from 'react';
+import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import css_248z from './Breadcrumbs.css.js';
+import { BreadcrumbContext } from './internal/BreadcrumbContext.js';
+import { BreadcrumbOverflowDisclosure } from './internal/BreadcrumbOverflowDisclosure.js';
+import { flattenBreadcrumbItems } from './internal/breadcrumbItems.js';
+
+const withBaseName = makePrefixer("saltBreadcrumbs");
+const withItemBaseName = makePrefixer("saltBreadcrumb");
+function isBreadcrumbElement(child) {
+  return isValidElement(child) && child.type === Breadcrumb;
+}
+function getCurrentIndex(items) {
+  const explicitCurrentIndex = items.findIndex(({ props }) => props.current);
+  return explicitCurrentIndex === -1 ? Math.max(items.length - 1, 0) : explicitCurrentIndex;
+}
+function getCollapseRange({
+  currentIndex,
+  items,
+  itemsAfterCollapse,
+  itemsBeforeCollapse
+}) {
+  const itemCount = items.length;
+  const effectiveItemsAfterCollapse = Math.max(
+    itemsAfterCollapse,
+    itemCount - currentIndex
+  );
+  if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {
+    return void 0;
+  }
+  const hiddenStart = itemsBeforeCollapse;
+  const hiddenEnd = itemCount - effectiveItemsAfterCollapse;
+  const hiddenItems = items.slice(hiddenStart, hiddenEnd);
+  return {
+    hiddenItems,
+    visibleAfter: items.slice(hiddenEnd),
+    visibleBefore: items.slice(0, hiddenStart)
+  };
+}
+function renderSeparator(SeparatorIcon) {
+  return /* @__PURE__ */ jsx(SeparatorIcon, { "aria-hidden": true, className: withItemBaseName("separator") });
+}
+const Breadcrumbs = forwardRef(
+  function Breadcrumbs2(props, ref) {
+    const {
+      children,
+      className,
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems,
+      render,
+      wrap = false,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    const { LevelSeparatorIcon } = useIcon();
+    useComponentCssInjection({
+      testId: "salt-breadcrumbs",
+      css: css_248z,
+      window: targetWindow
+    });
+    const items = flattenBreadcrumbItems(children).filter(isBreadcrumbElement).map((element, index) => ({
+      element,
+      index,
+      key: element.key ?? index,
+      props: element.props
+    }));
+    const currentIndex = getCurrentIndex(items);
+    const shouldCollapse = !wrap && maxItems !== void 0 && items.length > maxItems;
+    const collapseRange = shouldCollapse ? getCollapseRange({
+      currentIndex,
+      items,
+      itemsAfterCollapse,
+      itemsBeforeCollapse
+    }) : void 0;
+    const renderParts = collapseRange ? [
+      ...collapseRange.visibleBefore.map(
+        (item) => ({ item, type: "breadcrumb" })
+      ),
+      {
+        hiddenItems: collapseRange.hiddenItems,
+        type: "collapse"
+      },
+      ...collapseRange.visibleAfter.map(
+        (item) => ({ item, type: "breadcrumb" })
+      )
+    ] : items.map((item) => ({ item, type: "breadcrumb" }));
+    return /* @__PURE__ */ jsx("nav", { ref, className: clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(withBaseName("ol"), {
+          [withBaseName("ol-wrap")]: wrap
+        }),
+        children: renderParts.map((part, index) => {
+          const showSeparator = index < renderParts.length - 1;
+          if (part.type === "collapse") {
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: clsx(
+                  withItemBaseName(),
+                  withBaseName("collapseItem")
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    BreadcrumbOverflowDisclosure,
+                    {
+                      currentIndex,
+                      items: part.hiddenItems,
+                      render
+                    }
+                  ),
+                  showSeparator ? renderSeparator(LevelSeparatorIcon) : null
+                ]
+              },
+              "breadcrumbs-collapse"
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            BreadcrumbContext.Provider,
+            {
+              value: {
+                current: part.item.index === currentIndex,
+                placement: "trail",
+                render,
+                showSeparator
+              },
+              children: part.item.element
+            },
+            part.item.key
+          );
+        })
+      }
+    ) });
+  }
+);
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map