@salt-ds/lab 1.0.0-alpha.21 → 1.0.0-alpha.23

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=Tabstrip.css.js.map

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

@@ -1,4 +1,4 @@
-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-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::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";
 
 export { css_248z as default };
 //# sourceMappingURL=TabNext.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=Toolbar.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=OverflowPanel.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=TreeNode.css.js.map

package/dist-types/index.d.ts

@@ -2,7 +2,6 @@ export type { SelectHandler, SelectionChangeHandler, SelectionStrategy, useColle
 export type { ListChangeHandler as ListChangeHandlerDeprecated, ListSelectHandler as ListSelectHandlerDeprecated, } from "./list-deprecated";
 export { ListItemBase as ListItemBaseDeprecated, useListItem as useListItemDeprecated, } from "./list-deprecated";
 export * from "./app-header";
-export * from "./badge";
 export * from "./breadcrumbs";
 export * from "./button-bar";
 export * from "./calendar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.11.1",
+    "@salt-ds/core": "^1.13.1",
     "@salt-ds/window": "^0.1.1",
-    "@salt-ds/styles": "^0.1.2",
-    "@salt-ds/icons": "^1.7.0"
+    "@salt-ds/styles": "^0.2.0",
+    "@salt-ds/icons": "^1.8.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",
@@ -45,12 +45,16 @@
     "directory": "../../dist/salt-ds-lab",
     "provenance": true
   },
-  "module": "dist-es/index.js",
-  "typings": "dist-types/index.d.ts",
+  "scripts": {
+    "bundle:css": "yarn node ./scripts/build.mjs"
+  },
   "files": [
+    "css",
     "dist-cjs",
     "dist-es",
     "dist-types",
     "README.md"
-  ]
+  ],
+  "module": "dist-es/index.js",
+  "typings": "dist-types/index.d.ts"
 }

package/dist-cjs/badge/Badge.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  line-height: var(--salt-accent-lineHeight);\n  height: var(--salt-accent-lineHeight);\n  min-width: var(--salt-accent-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-notification);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-accent-fontSize);\n  font-weight: var(--salt-accent-fontWeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Badge.css.js.map

package/dist-cjs/badge/Badge.css.js.map

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

package/dist-cjs/badge/Badge.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var React = require('react');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var Badge$1 = require('./Badge.css.js');
-
-const withBaseName = core.makePrefixer("saltBadge");
-const Badge = React.forwardRef(function Badge2({ value, max = 999, className, children, ...rest }, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-badge",
-    css: Badge$1,
-    window: targetWindow
-  });
-  const valueText = typeof value === "number" && value > max ? `${max}+` : value;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
-    className: clsx.clsx(withBaseName(), className),
-    ref,
-    ...rest,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: clsx.clsx(withBaseName("badge"), {
-          [withBaseName("topRight")]: children
-        }),
-        children: valueText
-      })
-    ]
-  });
-});
-
-exports.Badge = Badge;
-//# sourceMappingURL=Badge.js.map

package/dist-cjs/badge/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge\n   */\n  value: number | string;\n  /**\n   * If a child is provided the Badge will render top right. By defualt renders inline.\n   */\n  children?: ReactNode;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { value, max = 999, className, children, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-badge\",\n    css: badgeCss,\n    window: targetWindow,\n  });\n\n  const valueText =\n    typeof value === \"number\" && value > max ? `${max}+` : value;\n\n  return (\n    <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {children}\n      <span\n        className={clsx(withBaseName(\"badge\"), {\n          [withBaseName(\"topRight\")]: children,\n        })}\n      >\n        {valueText}\n      </span>\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,WAAW,CAAA,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,OAAO,KAAA,KAAU,YAAY,KAAQ,GAAA,GAAA,GAAM,GAAG,GAAS,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAEzD,EAAA,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACAC,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/badge/Badge.css.js

@@ -1,4 +0,0 @@
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  line-height: var(--salt-accent-lineHeight);\n  height: var(--salt-accent-lineHeight);\n  min-width: var(--salt-accent-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-notification);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-accent-fontSize);\n  font-weight: var(--salt-accent-fontWeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
-
-export { css_248z as default };
-//# sourceMappingURL=Badge.css.js.map

package/dist-es/badge/Badge.css.js.map

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

package/dist-es/badge/Badge.js

@@ -1,35 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './Badge.css.js';
-
-const withBaseName = makePrefixer("saltBadge");
-const Badge = forwardRef(function Badge2({ value, max = 999, className, children, ...rest }, ref) {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-badge",
-    css: css_248z,
-    window: targetWindow
-  });
-  const valueText = typeof value === "number" && value > max ? `${max}+` : value;
-  return /* @__PURE__ */ jsxs("span", {
-    className: clsx(withBaseName(), className),
-    ref,
-    ...rest,
-    children: [
-      children,
-      /* @__PURE__ */ jsx("span", {
-        className: clsx(withBaseName("badge"), {
-          [withBaseName("topRight")]: children
-        }),
-        children: valueText
-      })
-    ]
-  });
-});
-
-export { Badge };
-//# sourceMappingURL=Badge.js.map

package/dist-es/badge/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge\n   */\n  value: number | string;\n  /**\n   * If a child is provided the Badge will render top right. By defualt renders inline.\n   */\n  children?: ReactNode;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { value, max = 999, className, children, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-badge\",\n    css: badgeCss,\n    window: targetWindow,\n  });\n\n  const valueText =\n    typeof value === \"number\" && value > max ? `${max}+` : value;\n\n  return (\n    <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {children}\n      <span\n        className={clsx(withBaseName(\"badge\"), {\n          [withBaseName(\"topRight\")]: children,\n        })}\n      >\n        {valueText}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge","badgeCss"],"mappings":";;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEtC,MAAM,KAAQ,GAAA,UAAA,CAAwC,SAASA,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,OAAO,KAAA,KAAU,YAAY,KAAQ,GAAA,GAAA,GAAM,GAAG,GAAS,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAEzD,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-types/badge/Badge.d.ts

@@ -1,16 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /**
-     * The number to display on the badge
-     */
-    value: number | string;
-    /**
-     * If a child is provided the Badge will render top right. By defualt renders inline.
-     */
-    children?: ReactNode;
-    /**
-     * The max number to display on the badge.
-     */
-    max?: number;
-}
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/badge/index.d.ts

@@ -1 +0,0 @@
-export * from "./Badge";