@salt-ds/lab 1.0.0-alpha.20 → 1.0.0-alpha.22

package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  padding: 0 var(--salt-spacing-25);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
+var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  padding: 0 var(--salt-spacing-25);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TrackerStep.css.js.map

package/dist-cjs/tabs/Tab.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tab.css.js.map

package/dist-cjs/tabs/Tabstrip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tabstrip.css.js.map

package/dist-cjs/tabs-next/TabNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltTabNext-inline {\n  min-height: var(--salt-size-base);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-text-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabNext.css.js.map

package/dist-cjs/tabs-next/TabstripNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\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.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabstripNext.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormFieldLegacy-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n}\n\n/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: center;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-right: var(--salt-size-unit);\n  align-self: center;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* copied over from Tabstrip.css */\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
+var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormFieldLegacy-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\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/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: center;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-right: var(--salt-size-unit);\n  align-self: center;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* copied over from Tabstrip.css */\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toolbar.css.js.map

package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverflowPanel.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  --saltDropdown-popup-maxHeight: auto;\n  align-items: stretch;\n  color: var(--salt-text-primary-foreground);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
+var css_248z = ".saltOverflowPanel.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  --saltDropdown-popup-maxHeight: auto;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverflowPanel.css.js.map

package/dist-cjs/tree/TreeNode.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTreeNode {\n  /* Color */\n  --tree-item-text-color: var(--salt-text-primary-foreground);\n  --tree-item-background: var(--salt-selectable-background);\n  --tree-item-background-hover: var(--salt-selectable-background-hover);\n\n  --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable));\n  --tree-node-icon-size: 12px;\n  --tree-node-icon-transform: none;\n  --tree-node-paddingLeft: 6px;\n\n  align-items: flex-start;\n  min-height: var(--tree-node-height, auto);\n  line-height: var(--salt-text-lineHeight);\n  list-style: none;\n  position: relative;\n  text-align: var(--list-item-textAlign);\n}\n\n.saltTreeNode-highlighted {\n  --tree-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-item[aria-selected=\"true\"] {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-text-primary-foreground);\n  --saltIcon-color: var(--salt-text-primary-foreground);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] {\n  --tree-node-icon-transform: rotate(45deg) translate(1px, 1px);\n}\n\n.saltTreeNode-item {\n  align-items: center;\n  background: var(--tree-item-background);\n  display: flex;\n  height: var(--tree-node-height);\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent));\n  position: relative;\n}\n\n.saltTreeNode-toggle {\n  display: inline-block;\n  flex: 0 0 18px;\n  height: var(--tree-node-icon-size);\n  transform: var(--tree-node-icon-transform);\n  transition: transform 0.1s ease;\n}\n\n.saltTreeNode-label {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n}\n.saltTreeNode-description {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n  padding-left: var(--salt-size-unit);\n}\n\n/* Leaf node or the div child of a collapsible node */\n/* .saltTreeNode:not([aria-expanded=\"true\"]), */\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  --checkbox-borderColor: black;\n  --checkbox-borderWidth: 1px;\n  --checkbox-tick: black;\n  /* --list-svg-toggle: var(--list-svg-chevron-down); */\n  --list-svg-toggle: var(--tree-node-collapse);\n\n  color: var(--list-item-text-color);\n  flex-wrap: nowrap;\n  line-height: var(--tree-node-height);\n  padding: var(--list-item-padding);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.saltTreeNode:not([aria-expanded]) {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTreeNode > *[role=\"group\"] {\n  padding-left: 0px;\n}\n\n[aria-level=\"2\"] {\n  --tree-node-indent: 24px;\n}\n[aria-level=\"3\"] {\n  --tree-node-indent: 36px;\n}\n[aria-level=\"4\"] {\n  --tree-node-indent: 48px;\n}\n\n.saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted],\n.saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child {\n  background: var(--list-background-highlighted);\n}\n\n.saltTree-toggle {\n  cursor: pointer;\n}\n\n.saltTreeNode[aria-selected=\"true\"] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n.saltTreeNode:not(.focusVisible):focus {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.saltTreeNode:not([aria-expanded]).focusVisible:before,\n.saltTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: \"\";\n  position: absolute;\n  top: 0px;\n  left: var(--tree-offset-left-focusVisible, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted rgb(141, 154, 179) 2px; /* FIXME: Needs checking */\n  background: var(--list-background-highlighted);\n}\n\n/* .saltTreeNode[aria-level='2'] {\n    --tree-offset-left-focusVisible: -13px;\n  }\n\n  .saltTreeNode[aria-level='3'] {\n    --tree-offset-left-focusVisible: -24px;\n  }\n\n  .saltTreeNode[aria-level='4'] {\n    --tree-offset-left-focusVisible: -36px;\n  } */\n\n.saltTreeNode[aria-expanded=\"false\"] > *:first-child:after {\n  --list-svg-toggle: var(--tree-node-expand);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=\"true\"],\n.saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=\"true\"] > div:first-child {\n  --checkbox-borderColor: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --tree-borderColor-focusVisible: var(--list-item-selected-color);\n  background: var(--list-item-background-active);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .saltTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .saltTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: \"\";\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n";
+var css_248z = ".saltTreeNode {\n  /* Color */\n  --tree-item-text-color: var(--salt-content-primary-foreground);\n  --tree-item-background: var(--salt-selectable-background);\n  --tree-item-background-hover: var(--salt-selectable-background-hover);\n\n  --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable));\n  --tree-node-icon-size: 12px;\n  --tree-node-icon-transform: none;\n  --tree-node-paddingLeft: 6px;\n\n  align-items: flex-start;\n  min-height: var(--tree-node-height, auto);\n  line-height: var(--salt-text-lineHeight);\n  list-style: none;\n  position: relative;\n  text-align: var(--list-item-textAlign);\n}\n\n.saltTreeNode-highlighted {\n  --tree-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-item[aria-selected=\"true\"] {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] {\n  --tree-node-icon-transform: rotate(45deg) translate(1px, 1px);\n}\n\n.saltTreeNode-item {\n  align-items: center;\n  background: var(--tree-item-background);\n  display: flex;\n  height: var(--tree-node-height);\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent));\n  position: relative;\n}\n\n.saltTreeNode-toggle {\n  display: inline-block;\n  flex: 0 0 18px;\n  height: var(--tree-node-icon-size);\n  transform: var(--tree-node-icon-transform);\n  transition: transform 0.1s ease;\n}\n\n.saltTreeNode-label {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n}\n.saltTreeNode-description {\n  align-items: center;\n  display: inline-flex;\n  height: var(--tree-node-height);\n  padding-left: var(--salt-size-unit);\n}\n\n/* Leaf node or the div child of a collapsible node */\n/* .saltTreeNode:not([aria-expanded=\"true\"]), */\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  --checkbox-borderColor: black;\n  --checkbox-borderWidth: 1px;\n  --checkbox-tick: black;\n  /* --list-svg-toggle: var(--list-svg-chevron-down); */\n  --list-svg-toggle: var(--tree-node-collapse);\n\n  color: var(--list-item-text-color);\n  flex-wrap: nowrap;\n  line-height: var(--tree-node-height);\n  padding: var(--list-item-padding);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.saltTreeNode:not([aria-expanded]) {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] > .saltTreeNode-label {\n  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.saltTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTreeNode > *[role=\"group\"] {\n  padding-left: 0px;\n}\n\n[aria-level=\"2\"] {\n  --tree-node-indent: 24px;\n}\n[aria-level=\"3\"] {\n  --tree-node-indent: 36px;\n}\n[aria-level=\"4\"] {\n  --tree-node-indent: 48px;\n}\n\n.saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted],\n.saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child {\n  background: var(--list-background-highlighted);\n}\n\n.saltTree-toggle {\n  cursor: pointer;\n}\n\n.saltTreeNode[aria-selected=\"true\"] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n.saltTreeNode:not(.focusVisible):focus {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.saltTreeNode:not([aria-expanded]).focusVisible:before,\n.saltTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: \"\";\n  position: absolute;\n  top: 0px;\n  left: var(--tree-offset-left-focusVisible, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted rgb(141, 154, 179) 2px; /* FIXME: Needs checking */\n  background: var(--list-background-highlighted);\n}\n\n/* .saltTreeNode[aria-level='2'] {\n    --tree-offset-left-focusVisible: -13px;\n  }\n\n  .saltTreeNode[aria-level='3'] {\n    --tree-offset-left-focusVisible: -24px;\n  }\n\n  .saltTreeNode[aria-level='4'] {\n    --tree-offset-left-focusVisible: -36px;\n  } */\n\n.saltTreeNode[aria-expanded=\"false\"] > *:first-child:after {\n  --list-svg-toggle: var(--tree-node-expand);\n}\n\n.saltTreeNode[aria-expanded=\"true\"] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=\"true\"],\n.saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=\"true\"] > div:first-child {\n  --checkbox-borderColor: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --tree-borderColor-focusVisible: var(--list-item-selected-color);\n  background: var(--list-item-background-active);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .saltTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .saltTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: \"\";\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TreeNode.css.js.map

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

@@ -1,4 +1,4 @@
-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-borderRegion));\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-container-borderStyle) var(--salt-size-border) var(--salt-container-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-border);\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-container-borderStyle) var(--salt-size-border) var(--salt-container-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-border);\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";
 
 export { css_248z as default };
 //# sourceMappingURL=AppHeader.css.js.map

package/dist-es/calendar/internal/CalendarDay.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-text-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-text-primary-foreground);\n  /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground);\n  /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground);\n  /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-text-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CalendarDay.css.js.map

package/dist-es/calendar/internal/CalendarWeekHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCalendarWeekHeader {\n  --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);\n  --calendar-week-header-text-color: var(--salt-text-secondary-foreground);\n  --calendar-week-header-size: var(--salt-size-base);\n  --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));\n}\n\n.saltCalendarWeekHeader {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n  box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--calendar-week-header-size);\n  height: var(--calendar-week-header-size);\n  color: var(--calendar-week-header-text-color);\n  line-height: var(--calendar-week-header-size);\n  font-size: var(--calendar-week-header-fontSize);\n}\n";
+var css_248z = ".saltCalendarWeekHeader {\n  --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);\n  --calendar-week-header-text-color: var(--salt-content-secondary-foreground);\n  --calendar-week-header-size: var(--salt-size-base);\n  --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));\n}\n\n.saltCalendarWeekHeader {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n  box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--calendar-week-header-size);\n  height: var(--calendar-week-header-size);\n  color: var(--calendar-week-header-text-color);\n  line-height: var(--calendar-week-header-size);\n  font-size: var(--calendar-week-header-fontSize);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CalendarWeekHeader.css.js.map

package/dist-es/color-chooser/ColorPicker.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-text-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ColorPicker.css.js.map

package/dist-es/color-chooser/HexInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-text-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=HexInput.css.js.map

package/dist-es/color-chooser/RGBAInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-text-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-text-primary-foreground);\n  border-bottom: 1px solid var(--salt-text-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-text-primary-foreground);\n  padding: 0px !important;\n}\n";
+var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=RGBAInput.css.js.map

package/dist-es/color-chooser/Swatches.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatches-colorNameTextDiv {\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltColorChooserSwatches-colorNameTextDiv,\n.saltColorChooserSwatches-colorTextDiv,\n.saltColorChooserSwatches-alphaTextDiv {\n  color: var(--salt-text-secondary-foreground);\n}\n\n.saltColorChooserSwatches-colorTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-alphaTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-textDiv {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 8px 0px 8px;\n}\n\n.saltColorChooserSwatches-pickerDiv {\n  padding-top: calc(2 * var(--salt-size-unit));\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatches-colorNameTextDiv {\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltColorChooserSwatches-colorNameTextDiv,\n.saltColorChooserSwatches-colorTextDiv,\n.saltColorChooserSwatches-alphaTextDiv {\n  color: var(--salt-content-secondary-foreground);\n}\n\n.saltColorChooserSwatches-colorTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-alphaTextDiv {\n  font-size: var(--salt-text-fontSize);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltColorChooserSwatches-textDiv {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 8px 0px 8px;\n}\n\n.saltColorChooserSwatches-pickerDiv {\n  padding-top: calc(2 * var(--salt-size-unit));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Swatches.css.js.map

package/dist-es/combo-box/useCombobox.js

@@ -153,6 +153,13 @@ const useCombobox = ({
     },
     [allowFreeText, applySelection, indexPositions, quickSelection]
   );
+  const {
+    onKeyDown: inputOnKeyDown,
+    onFocus: inputOnFocus,
+    onChange: inputOnChange,
+    onBlur: inputOnBlur,
+    onSelect: inputOnSelect
+  } = inputProps;
   const handleInputKeyDown = useCallback(
     (evt) => {
       if ("Escape" === evt.key) {
@@ -167,8 +174,15 @@ const useCombobox = ({
         }
       }
       handleFirstItemSelection(evt);
+      inputOnKeyDown == null ? void 0 : inputOnKeyDown(evt);
     },
-    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]
+    [
+      allowFreeText,
+      handleFirstItemSelection,
+      inputOnKeyDown,
+      reconcileInput,
+      setTextValue
+    ]
   );
   const handleKeyboardNavigation = useCallback(() => {
     setDisableAriaActiveDescendant(false);
@@ -222,22 +236,24 @@ const useCombobox = ({
     (evt) => {
       const newValue = evt.target.value;
       setValue(newValue);
-      if (newValue && newValue.trim().length) {
+      if (newValue == null ? void 0 : newValue.trim().length) {
         setFilterPattern(newValue);
       } else {
         setFilterPattern(void 0);
+        if (selectedRef.current !== null) {
+          onSelectionChange == null ? void 0 : onSelectionChange(
+            evt,
+            null
+          );
+        }
         selectedRef.current = null;
-        onSelectionChange == null ? void 0 : onSelectionChange(
-          evt,
-          null
-        );
       }
       setIsOpen(true);
       setQuickSelection(newValue.length > 0 && !allowFreeText);
+      inputOnChange == null ? void 0 : inputOnChange(evt, newValue);
     },
-    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]
+    [allowFreeText, inputOnChange, setFilterPattern, setIsOpen, setValue]
   );
-  const { onFocus: inputOnFocus } = inputProps;
   const { onFocus: listOnFocus } = listControlProps;
   const handleInputFocus = useCallback(
     (evt) => {
@@ -280,7 +296,6 @@ const useCombobox = ({
     },
     [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]
   );
-  const { onBlur: inputOnBlur } = inputProps;
   const { onBlur: listOnBlur } = listControlProps;
   const handleInputBlur = useCallback(
     (evt) => {
@@ -305,7 +320,6 @@ const useCombobox = ({
       selectInputValue
     ]
   );
-  const { onSelect: inputOnSelect } = inputProps;
   const handleInputSelect = useCallback(
     (event) => {
       if (ignoreSelectOnFocus.current) {

package/dist-es/combo-box/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"../dropdown\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport { InputLegacyProps as InputProps } from \"../input-legacy\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<\n      ListHookProps<Item, Strategy>,\n      \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n    > {\n  InputProps?: InputProps;\n  allowFreeText?: boolean;\n  ariaLabel?: string;\n  defaultValue?: string;\n  id: string;\n  itemToString?: (item: Item) => string;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item, Selection>,\n      | \"focusVisible\"\n      | \"highlightedIndex\"\n      | \"listControlProps\"\n      | \"listHandlers\"\n      | \"selected\"\n    >,\n    Partial<DropdownHookResult> {\n  inputProps: InputProps;\n  onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultValue,\n  disabled,\n  onBlur,\n  onFocus,\n  onChange,\n  onSelect,\n  id,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onOpenChange,\n  onSelectionChange,\n  selectionStrategy,\n  stringToItem,\n  value: valueProp,\n  InputProps: inputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n  type selectedCollectionType = Selection extends SingleSelectionStrategy\n    ? CollectionItem<Item> | null\n    : CollectionItem<Item>[];\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n    valueProp ?? defaultValue ?? null\n  );\n\n  const {\n    data: indexPositions,\n    itemToCollectionItem,\n    setFilterPattern,\n    stringToCollectionItem,\n  } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const setSelectedRef = useRef<\n    null | ListHookResult<Item, Selection>[\"setSelected\"]\n  >(null);\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n  const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  // TODO repeated in ComboboxNext, move to utils\n  const collectionItemsToItem = useCallback(\n    (\n      sel: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n  const [quickSelection, setQuickSelection] = useState(false);\n\n  const highlightSelectedItem = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected == null) {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        const indexOfSelectedItem = indexPositions.indexOf(selected);\n        setHighlightedIndexRef.current?.(indexOfSelectedItem);\n      }\n    },\n    [indexPositions]\n  );\n\n  const setTextValue = useCallback(\n    (value: string) => {\n      setValue(value);\n      setFilterPattern(value === \"\" ? undefined : value);\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      let value = \"\";\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected != null && selected.value !== null) {\n        value = itemToString(selected.value);\n      }\n      setTextValue(value);\n      if (value === \"\") {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        highlightSelectedItem(selected);\n      }\n    },\n    [highlightSelectedItem, itemToString, setTextValue]\n  );\n\n  const applySelection = useCallback(\n    (evt: any, selected: selectedCollectionType) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n      }\n      selectedRef.current = selected;\n      reconcileInput(selected);\n      onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n    },\n    [\n      collectionItemsToItem,\n      isMultiSelect,\n      onSelectionChange,\n      reconcileInput,\n      setIsOpen,\n    ]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        const selectedCollectionItem = itemToCollectionItem<\n          Selection,\n          typeof selected\n        >(selected);\n        applySelection(evt, selectedCollectionItem);\n      }\n    },\n    [applySelection, isMultiSelect, itemToCollectionItem]\n  );\n\n  const handleFirstItemSelection = useCallback(\n    (evt: KeyboardEvent | ChangeEvent) => {\n      if (\n        !allowFreeText &&\n        (evt as KeyboardEvent).key === \"Enter\" &&\n        quickSelection\n      ) {\n        const [firstItem] = indexPositions;\n        applySelection(evt, firstItem as selectedCollectionType);\n      }\n    },\n    [allowFreeText, applySelection, indexPositions, quickSelection]\n  );\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (\"Escape\" === evt.key) {\n        if (allowFreeText) {\n          setTextValue(\"\");\n        } else {\n          reconcileInput();\n        }\n      } else if (\"Tab\" === evt.key) {\n        if (!allowFreeText) {\n          reconcileInput();\n        }\n      }\n\n      handleFirstItemSelection(evt);\n\n      // if (inputProps.onKeyDown) {\n      //   inputProps.onKeyDown(event as KeyboardEvent<HTMLInputElement>);\n      // }\n    },\n    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]\n  );\n\n  const handleKeyboardNavigation = useCallback(() => {\n    setDisableAriaActiveDescendant(false);\n  }, []);\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setSelected,\n  } = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: -1,\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    onKeyDown: handleInputKeyDown,\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    // we are controlling selection from a ref value - is this right ?\n    selected: selectedRef.current,\n    selectionKeys: EnterOnly,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n  setSelectedRef.current = setSelected;\n  // selectedRef.current = selected;\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        setQuickSelection(false);\n      }\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      //TODO use ref\n      document.getElementById(`${id}-input`)?.focus();\n      // const inputEl = inputRef.current;\n      console.log(\"handle list click\");\n      listHandlersOnClick?.(evt);\n      // if (inputEl != null) {\n      //   inputEl.focus();\n      // }\n\n      // if (restListProps.onClick) {\n      //   restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n      // }\n\n      // notifyPopper(event);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue && newValue.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        selectedRef.current = null as selectedCollectionType;\n        onSelectionChange?.(\n          evt,\n          null as Selection extends SingleSelectionStrategy\n            ? Item | null\n            : Item[]\n        );\n      }\n\n      setIsOpen(true);\n\n      setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n      // if (inputProps.onChange) {\n      //   inputProps.onChange(event, \"\");\n      // }\n    },\n    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]\n  );\n\n  const { onFocus: inputOnFocus } = inputProps;\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n      return true;\n    },\n    [id]\n  );\n\n  // When focus leaves a free text combo, check to see if the entered text is\n  // a valid selection, if so fire a change event\n  const selectInputValue = useCallback(\n    (evt: ChangeEvent) => {\n      const text = value.trim();\n      if (text) {\n        const selectedCollectionItem = stringToCollectionItem<\"default\">(\n          text\n        ) as selectedCollectionType;\n        if (selectedCollectionItem) {\n          if (Array.isArray(selectedCollectionItem)) {\n            // TODO multi select\n          } else if (selectedCollectionItem !== selected) {\n            setSelectedRef.current?.(selectedCollectionItem);\n            onSelectionChange?.(\n              evt,\n              selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n                ? Item | null\n                : Item[]\n            );\n          }\n        } else if (stringToItem) {\n          const item = stringToItem(text);\n          if (item) {\n            console.log(\"we have a new item\");\n          }\n        }\n        // Hoiw do we check if string is Item\n      }\n    },\n    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]\n  );\n\n  const { onBlur: inputOnBlur } = inputProps;\n  const { onBlur: listOnBlur } = listControlProps;\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        if (allowFreeText) {\n          selectInputValue(evt as ChangeEvent);\n        } else {\n          reconcileInput();\n        }\n        setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [\n      allowFreeText,\n      listFocused,\n      inputOnBlur,\n      listOnBlur,\n      reconcileInput,\n      selectInputValue,\n    ]\n  );\n\n  const { onSelect: inputOnSelect } = inputProps;\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useEffect(() => {\n    highlightSelectedItem();\n    // TODO may need to scrollIntoView\n    if (indexPositions.length === 0) {\n      setIsOpen(false);\n    }\n  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);\n\n  // const activeDescendant: string | undefined = selectionChanged\n  //   ? \"\"\n  //   : undefined;\n\n  const mergedInputProps = {\n    ...inputProps.inputProps,\n    // \"aria-owns\": listId,\n    \"aria-label\": ariaLabel,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    inputProps: {\n      ...inputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    // listControlProps,\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected","_a","value"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"../dropdown\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport { InputLegacyProps as InputProps } from \"../input-legacy\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<\n      ListHookProps<Item, Strategy>,\n      \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n    > {\n  InputProps?: InputProps;\n  allowFreeText?: boolean;\n  ariaLabel?: string;\n  defaultValue?: string;\n  id: string;\n  itemToString?: (item: Item) => string;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item, Selection>,\n      | \"focusVisible\"\n      | \"highlightedIndex\"\n      | \"listControlProps\"\n      | \"listHandlers\"\n      | \"selected\"\n    >,\n    Partial<DropdownHookResult> {\n  inputProps: InputProps;\n  onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultValue,\n  disabled,\n  onBlur,\n  onFocus,\n  onChange,\n  onSelect,\n  id,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onOpenChange,\n  onSelectionChange,\n  selectionStrategy,\n  stringToItem,\n  value: valueProp,\n  InputProps: inputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n  type selectedCollectionType = Selection extends SingleSelectionStrategy\n    ? CollectionItem<Item> | null\n    : CollectionItem<Item>[];\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n    valueProp ?? defaultValue ?? null\n  );\n\n  const {\n    data: indexPositions,\n    itemToCollectionItem,\n    setFilterPattern,\n    stringToCollectionItem,\n  } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const setSelectedRef = useRef<\n    null | ListHookResult<Item, Selection>[\"setSelected\"]\n  >(null);\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n  const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  // TODO repeated in ComboboxNext, move to utils\n  const collectionItemsToItem = useCallback(\n    (\n      sel: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n  const [quickSelection, setQuickSelection] = useState(false);\n\n  const highlightSelectedItem = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected == null) {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        const indexOfSelectedItem = indexPositions.indexOf(selected);\n        setHighlightedIndexRef.current?.(indexOfSelectedItem);\n      }\n    },\n    [indexPositions]\n  );\n\n  const setTextValue = useCallback(\n    (value: string) => {\n      setValue(value);\n      setFilterPattern(value === \"\" ? undefined : value);\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      let value = \"\";\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected != null && selected.value !== null) {\n        value = itemToString(selected.value);\n      }\n      setTextValue(value);\n      if (value === \"\") {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        highlightSelectedItem(selected);\n      }\n    },\n    [highlightSelectedItem, itemToString, setTextValue]\n  );\n\n  const applySelection = useCallback(\n    (evt: any, selected: selectedCollectionType) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n      }\n      selectedRef.current = selected;\n      reconcileInput(selected);\n      onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n    },\n    [\n      collectionItemsToItem,\n      isMultiSelect,\n      onSelectionChange,\n      reconcileInput,\n      setIsOpen,\n    ]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        const selectedCollectionItem = itemToCollectionItem<\n          Selection,\n          typeof selected\n        >(selected);\n        applySelection(evt, selectedCollectionItem);\n      }\n    },\n    [applySelection, isMultiSelect, itemToCollectionItem]\n  );\n\n  const handleFirstItemSelection = useCallback(\n    (evt: KeyboardEvent | ChangeEvent) => {\n      if (\n        !allowFreeText &&\n        (evt as KeyboardEvent).key === \"Enter\" &&\n        quickSelection\n      ) {\n        const [firstItem] = indexPositions;\n        applySelection(evt, firstItem as selectedCollectionType);\n      }\n    },\n    [allowFreeText, applySelection, indexPositions, quickSelection]\n  );\n\n  const {\n    onKeyDown: inputOnKeyDown,\n    onFocus: inputOnFocus,\n    onChange: inputOnChange,\n    onBlur: inputOnBlur,\n    onSelect: inputOnSelect,\n  } = inputProps;\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (\"Escape\" === evt.key) {\n        if (allowFreeText) {\n          setTextValue(\"\");\n        } else {\n          reconcileInput();\n        }\n      } else if (\"Tab\" === evt.key) {\n        if (!allowFreeText) {\n          reconcileInput();\n        }\n      }\n\n      handleFirstItemSelection(evt);\n\n      inputOnKeyDown?.(evt as KeyboardEvent<HTMLInputElement>);\n    },\n    [\n      allowFreeText,\n      handleFirstItemSelection,\n      inputOnKeyDown,\n      reconcileInput,\n      setTextValue,\n    ]\n  );\n\n  const handleKeyboardNavigation = useCallback(() => {\n    setDisableAriaActiveDescendant(false);\n  }, []);\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setSelected,\n  } = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: -1,\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    onKeyDown: handleInputKeyDown,\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    // we are controlling selection from a ref value - is this right ?\n    selected: selectedRef.current,\n    selectionKeys: EnterOnly,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n  setSelectedRef.current = setSelected;\n  // selectedRef.current = selected;\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        setQuickSelection(false);\n      }\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      //TODO use ref\n      document.getElementById(`${id}-input`)?.focus();\n      // const inputEl = inputRef.current;\n      console.log(\"handle list click\");\n      listHandlersOnClick?.(evt);\n      // if (inputEl != null) {\n      //   inputEl.focus();\n      // }\n\n      // if (restListProps.onClick) {\n      //   restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n      // }\n\n      // notifyPopper(event);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue?.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        if (selectedRef.current !== null) {\n          onSelectionChange?.(\n            evt,\n            null as Selection extends SingleSelectionStrategy\n              ? Item | null\n              : Item[]\n          );\n        }\n        selectedRef.current = null as selectedCollectionType;\n      }\n\n      setIsOpen(true);\n\n      setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n      inputOnChange?.(evt, newValue);\n    },\n    [allowFreeText, inputOnChange, setFilterPattern, setIsOpen, setValue]\n  );\n\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n      return true;\n    },\n    [id]\n  );\n\n  // When focus leaves a free text combo, check to see if the entered text is\n  // a valid selection, if so fire a change event\n  const selectInputValue = useCallback(\n    (evt: ChangeEvent) => {\n      const text = value.trim();\n      if (text) {\n        const selectedCollectionItem = stringToCollectionItem<\"default\">(\n          text\n        ) as selectedCollectionType;\n        if (selectedCollectionItem) {\n          if (Array.isArray(selectedCollectionItem)) {\n            // TODO multi select\n          } else if (selectedCollectionItem !== selected) {\n            setSelectedRef.current?.(selectedCollectionItem);\n            onSelectionChange?.(\n              evt,\n              selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n                ? Item | null\n                : Item[]\n            );\n          }\n        } else if (stringToItem) {\n          const item = stringToItem(text);\n          if (item) {\n            console.log(\"we have a new item\");\n          }\n        }\n        // Hoiw do we check if string is Item\n      }\n    },\n    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]\n  );\n\n  const { onBlur: listOnBlur } = listControlProps;\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        if (allowFreeText) {\n          selectInputValue(evt as ChangeEvent);\n        } else {\n          reconcileInput();\n        }\n        setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [\n      allowFreeText,\n      listFocused,\n      inputOnBlur,\n      listOnBlur,\n      reconcileInput,\n      selectInputValue,\n    ]\n  );\n\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useEffect(() => {\n    highlightSelectedItem();\n    // TODO may need to scrollIntoView\n    if (indexPositions.length === 0) {\n      setIsOpen(false);\n    }\n  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);\n\n  // const activeDescendant: string | undefined = selectionChanged\n  //   ? \"\"\n  //   : undefined;\n\n  const mergedInputProps = {\n    ...inputProps.inputProps,\n    // \"aria-owns\": listId,\n    \"aria-label\": ariaLabel,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    inputProps: {\n      ...inputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    // listControlProps,\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected","_a","value"],"mappings":"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"}

package/dist-es/combo-box-next/ComboBoxNext.js

@@ -94,7 +94,7 @@ const ComboBoxNext = forwardRef(function ComboBoxNext2({
       return null;
     if (selectedItem && inputValue === selectedItem)
       return source;
-    return itemFilter && itemFilter(source, inputValue);
+    return itemFilter == null ? void 0 : itemFilter(source, inputValue);
   };
   const filteredSource = getFilteredSource();
   const onChange = (event) => {
@@ -111,7 +111,7 @@ const ComboBoxNext = forwardRef(function ComboBoxNext2({
         setHighlightedItem(filteredSource[0]);
       }
     }
-    onInputChange == null ? void 0 : onInputChange(event, { value: inputValue != null ? inputValue : "" });
+    onInputChange == null ? void 0 : onInputChange(event, { value: value != null ? value : "" });
   };
   const adornment = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
     className: withBaseName("chevron")

package/dist-es/combo-box-next/ComboBoxNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  Input,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * Additional props for the list component.\n   */\n  ListProps?: ListNextProps;\n  /**\n   * Additional props for the portal.\n   */\n  PortalProps?: UseComboBoxPortalProps;\n  /**\n   * Controlled prop. Controls the Input value in the Combo Box Input.\n   */\n  inputValue?: string;\n  /**\n   * Controlled prop. Controls the Highlighted item in the Combo Box list.\n   */\n  highlightedItem?: string;\n  /**\n   * Controlled prop. Controls the Selected value in the Combo Box list.\n   */\n  selected?: string;\n  /**\n   * Initial input value for when the list is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /**\n   * Initial selected value for when the list is uncontrolled.\n   */\n  defaultSelected?: string;\n  /**\n   * If `true`, the component will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n  /**\n   * The source of combobox items.\n   */\n  source: T[];\n  /**\n   * Optional ref for the list component\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * The component used for item instead of the default.\n   */\n  ListItem?: (\n    props: ComboBoxItemProps<T>\n  ) => ReactElement<ComboBoxItemProps<T>>;\n  /**\n   * Function to be used as filter.\n   */\n  itemFilter?: (source: T[], filterValue?: string) => T[];\n  /**\n   * Callback for mouse over event\n   */\n  onMouseOver?: (event: SyntheticEvent) => void;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /**\n   * Callback for list change event\n   */\n  onListChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined }\n  ) => void;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n  {\n    ListProps = {},\n    PortalProps = {},\n    inputValue: inputValueProp,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultInputValue,\n    defaultSelected,\n    disabled,\n    variant = \"primary\",\n    source,\n    listRef: listRefProp,\n    ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n    itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n    onMouseOver,\n    onFocus,\n    onKeyDown,\n    onSelect,\n    onListChange,\n    onChange: onInputChange,\n    ...rest\n  }: ComboBoxNextProps<T>,\n  ref?: ForwardedRef<HTMLInputElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-next\",\n    css: comboBoxNextCss,\n    window: targetWindow,\n  });\n  const listId = useId(ListProps?.id);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    disabled,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultSelected,\n    onChange: onListChange,\n    onSelect: onSelect,\n    id: listId,\n    ref: listRef,\n  };\n\n  const {\n    inputValue,\n    setInputValue,\n    portalProps,\n    selectedItem,\n    highlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    setSelectedItem,\n    setHighlightedItem,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = useComboBox({\n    defaultInputValue,\n    inputValue: inputValueProp,\n    onFocus,\n    onMouseOver,\n    onKeyDown,\n    listProps,\n    PortalProps,\n  });\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getTriggerProps,\n    getPortalProps,\n    getPosition,\n  } = portalProps;\n\n  // floating references\n  const triggerRef = useForkRef(ref, reference);\n  const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const getFilteredSource = () => {\n    if (!source) return null;\n    if (selectedItem && inputValue === selectedItem) return source;\n    return itemFilter && itemFilter(source, inputValue);\n  };\n  const filteredSource = getFilteredSource();\n\n  const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setInputValue(value);\n    if (value === \"\") {\n      setHighlightedItem(undefined);\n      setSelectedItem(value);\n    } else {\n      if (!open) {\n        setOpen(true);\n      }\n      if (filteredSource) {\n        setHighlightedItem(filteredSource[0] as unknown as string);\n      }\n    }\n    onInputChange?.(event, { value: inputValue ?? \"\" });\n  };\n\n  const adornment = open ? (\n    <ChevronUpIcon className={withBaseName(\"chevron\")} />\n  ) : (\n    <ChevronDownIcon className={withBaseName(\"chevron\")} />\n  );\n\n  const { className: listClassName, ...restListProps } = ListProps;\n  const { className: inputClassName, ...restInputProps } = rest;\n\n  return (\n    <>\n      <Input\n        aria-controls={listId}\n        aria-activedescendant={disabled ? undefined : activeDescendant}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        disabled={disabled}\n        endAdornment={adornment}\n        onChange={onChange}\n        onMouseDown={mouseDownHandler}\n        inputRef={inputRef as Ref<HTMLInputElement>}\n        inputProps={{\n          \"aria-expanded\": open,\n          tabIndex: disabled ? -1 : 0,\n          onFocus: focusHandler,\n          onKeyDown: keyDownHandler,\n        }}\n        role=\"combobox\"\n        variant={variant}\n        value={inputValue}\n        {...getTriggerProps()}\n        {...restInputProps}\n      />\n\n      <FloatingComponent\n        open={Boolean(open && !disabled && filteredSource)}\n        ref={floating}\n        {...getPortalProps()}\n        {...getPosition()}\n      >\n        <ListNext\n          className={clsx(withBaseName(\"list\"), listClassName)}\n          disableFocus\n          highlightedItem={highlightedItem}\n          onMouseOver={mouseOverHandler}\n          onSelect={listSelectHandler}\n          selected={selectedItem}\n          {...restListProps}\n          ref={setListRef}\n        >\n          {filteredSource?.map((value, index) => {\n            const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n              setSelectedItem(event.currentTarget?.dataset.value);\n              setInputValue(event.currentTarget?.dataset.value);\n            };\n            return (\n              ListItem && (\n                <ListItem\n                  key={index}\n                  value={value}\n                  matchPattern={inputValue}\n                  onMouseDown={onMouseDown}\n                />\n              )\n            );\n          })}\n        </ListNext>\n      </FloatingComponent>\n    </>\n  );\n});\n"],"names":["ComboBoxNext","comboBoxNextCss"],"mappings":"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"}
+{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  Input,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * Additional props for the list component.\n   */\n  ListProps?: ListNextProps;\n  /**\n   * Additional props for the portal.\n   */\n  PortalProps?: UseComboBoxPortalProps;\n  /**\n   * Controlled prop. Controls the Input value in the Combo Box Input.\n   */\n  inputValue?: string;\n  /**\n   * Controlled prop. Controls the Highlighted item in the Combo Box list.\n   */\n  highlightedItem?: string;\n  /**\n   * Controlled prop. Controls the Selected value in the Combo Box list.\n   */\n  selected?: string;\n  /**\n   * Initial input value for when the list is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /**\n   * Initial selected value for when the list is uncontrolled.\n   */\n  defaultSelected?: string;\n  /**\n   * If `true`, the component will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n  /**\n   * The source of combobox items.\n   */\n  source: T[];\n  /**\n   * Optional ref for the list component\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * The component used for item instead of the default.\n   */\n  ListItem?: (\n    props: ComboBoxItemProps<T>\n  ) => ReactElement<ComboBoxItemProps<T>>;\n  /**\n   * Function to be used as filter.\n   */\n  itemFilter?: (source: T[], filterValue?: string) => T[];\n  /**\n   * Callback for mouse over event\n   */\n  onMouseOver?: (event: SyntheticEvent) => void;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /**\n   * Callback for list change event\n   */\n  onListChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined }\n  ) => void;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n  {\n    ListProps = {},\n    PortalProps = {},\n    inputValue: inputValueProp,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultInputValue,\n    defaultSelected,\n    disabled,\n    variant = \"primary\",\n    source,\n    listRef: listRefProp,\n    ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n    itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n    onMouseOver,\n    onFocus,\n    onKeyDown,\n    onSelect,\n    onListChange,\n    onChange: onInputChange,\n    ...rest\n  }: ComboBoxNextProps<T>,\n  ref?: ForwardedRef<HTMLInputElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-next\",\n    css: comboBoxNextCss,\n    window: targetWindow,\n  });\n  const listId = useId(ListProps?.id);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    disabled,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultSelected,\n    onChange: onListChange,\n    onSelect: onSelect,\n    id: listId,\n    ref: listRef,\n  };\n\n  const {\n    inputValue,\n    setInputValue,\n    portalProps,\n    selectedItem,\n    highlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    setSelectedItem,\n    setHighlightedItem,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = useComboBox({\n    defaultInputValue,\n    inputValue: inputValueProp,\n    onFocus,\n    onMouseOver,\n    onKeyDown,\n    listProps,\n    PortalProps,\n  });\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getTriggerProps,\n    getPortalProps,\n    getPosition,\n  } = portalProps;\n\n  // floating references\n  const triggerRef = useForkRef(ref, reference);\n  const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const getFilteredSource = () => {\n    if (!source) return null;\n    if (selectedItem && inputValue === selectedItem) return source;\n    return itemFilter?.(source, inputValue);\n  };\n  const filteredSource = getFilteredSource();\n\n  const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setInputValue(value);\n    if (value === \"\") {\n      setHighlightedItem(undefined);\n      setSelectedItem(value);\n    } else {\n      if (!open) {\n        setOpen(true);\n      }\n      if (filteredSource) {\n        setHighlightedItem(filteredSource[0] as unknown as string);\n      }\n    }\n    onInputChange?.(event, { value: value ?? \"\" });\n  };\n\n  const adornment = open ? (\n    <ChevronUpIcon className={withBaseName(\"chevron\")} />\n  ) : (\n    <ChevronDownIcon className={withBaseName(\"chevron\")} />\n  );\n\n  const { className: listClassName, ...restListProps } = ListProps;\n  const { className: inputClassName, ...restInputProps } = rest;\n\n  return (\n    <>\n      <Input\n        aria-controls={listId}\n        aria-activedescendant={disabled ? undefined : activeDescendant}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        disabled={disabled}\n        endAdornment={adornment}\n        onChange={onChange}\n        onMouseDown={mouseDownHandler}\n        inputRef={inputRef as Ref<HTMLInputElement>}\n        inputProps={{\n          \"aria-expanded\": open,\n          tabIndex: disabled ? -1 : 0,\n          onFocus: focusHandler,\n          onKeyDown: keyDownHandler,\n        }}\n        role=\"combobox\"\n        variant={variant}\n        value={inputValue}\n        {...getTriggerProps()}\n        {...restInputProps}\n      />\n\n      <FloatingComponent\n        open={Boolean(open && !disabled && filteredSource)}\n        ref={floating}\n        {...getPortalProps()}\n        {...getPosition()}\n      >\n        <ListNext\n          className={clsx(withBaseName(\"list\"), listClassName)}\n          disableFocus\n          highlightedItem={highlightedItem}\n          onMouseOver={mouseOverHandler}\n          onSelect={listSelectHandler}\n          selected={selectedItem}\n          {...restListProps}\n          ref={setListRef}\n        >\n          {filteredSource?.map((value, index) => {\n            const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n              setSelectedItem(event.currentTarget?.dataset.value);\n              setInputValue(event.currentTarget?.dataset.value);\n            };\n            return (\n              ListItem && (\n                <ListItem\n                  key={index}\n                  value={value}\n                  matchPattern={inputValue}\n                  onMouseDown={onMouseDown}\n                />\n              )\n            );\n          })}\n        </ListNext>\n      </FloatingComponent>\n    </>\n  );\n});\n"],"names":["ComboBoxNext","comboBoxNextCss"],"mappings":"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"}