@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.27

package/css/salt-lab.css

@@ -568,20 +568,6 @@
   z-index: calc(var(--salt-zIndex-flyover) - 1);
 }
 
-/* src/combo-box-next/ComboBoxNext.css */
-.saltComboBoxNext-highlight {
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-.saltComboBoxNext-input:hover {
-  --saltInput-borderColor: var(--salt-focused-outlineColor);
-}
-.saltComboBoxNext-list.saltListNext {
-  border-color: var(--salt-selectable-borderColor-selected);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));
-  z-index: calc(var(--salt-zIndex-modal) + 1);
-}
-
 /* src/contact-details/ContactDetails.css */
 .salt-density-touch {
   --contactDetails-default-primary-fontSize: 30px;
@@ -1127,93 +1113,88 @@
 }
 
 /* src/dropdown-next/DropdownNext.css */
-.saltDropdownNext-button {
+.saltDropdownNext {
   --dropdownNext-borderColor: var(--salt-editable-borderColor);
-  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);
-  --dropdownNext-borderWidth: var(--salt-size-border);
-  align-items: center;
-  background: var(--saltDropdownNext-background, var(--dropdownNext-background));
-  color: var(--saltDropdownNext-color, var(--salt-content-primary-foreground));
+  --dropdownNext-color: var(--salt-content-primary-foreground);
+  --dropdownNext-cursor: var(--salt-selectable-cursor-hover);
+}
+.saltDropdownNext {
+  all: unset;
+  box-sizing: border-box;
+  min-width: 4em;
+  width: 100%;
+  background: var(--dropdownNext-background);
+  cursor: var(--dropdownNext-cursor);
+  min-height: var(--salt-size-base);
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdownNext-borderColor);
   display: flex;
+  align-items: center;
+  padding: 0 var(--salt-spacing-100);
+  gap: var(--salt-spacing-100);
+  color: var(--dropdownNext-color);
   font-family: var(--salt-text-fontFamily);
-  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));
-  height: var(--saltDropdownNext-height, var(--salt-size-base));
-  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));
-  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));
-  min-width: var(--saltDropdownNext-minWidth, 160px);
-  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));
-  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));
-  position: relative;
-  border: none;
-  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);
-  justify-content: space-between;
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
 }
-.saltDropdownNext-button:hover {
+.saltDropdownNext:hover {
   --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);
-  cursor: var(--salt-selectable-cursor-hover);
 }
-.saltDropdownNext-button:focus,
-.saltDropdownNext-button:active {
-  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);
-  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));
+.saltDropdownNext:focus-visible {
+  outline: var(--salt-focused-outline);
+  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);
 }
-.saltDropdownNext-buttonText {
-  text-align: left;
+.saltDropdownNext-content {
+  flex: 1;
+  max-width: 100%;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  padding-right: var(--salt-spacing-100);
-  user-select: text;
-}
-.saltDropdownNext-list.saltListNext {
-  border-color: var(--salt-selectable-borderColor-selected);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);
-  z-index: calc(var(--salt-zIndex-modal) + 1);
-}
-.saltDropdownNext-disabled,
-.saltDropdownNext-disabled:hover,
-.saltDropdownNext-disabled:active {
-  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);
-  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --dropdownNext-borderWidth: var(--salt-size-border);
-  cursor: var(--salt-selectable-cursor-disabled);
-  background: var(--dropdownNext-background-disabled);
-  color: var(--saltDropdownNext-color-disabled, var(--salt-content-primary-foreground-disabled));
-  outline: 0;
+  text-wrap: nowrap;
 }
-.saltDropdownNext-button.saltDropdownNext-readOnly,
-.saltDropdownNext-button.saltDropdownNext-readOnly:hover,
-.saltDropdownNext-button.saltDropdownNext-readOnly:active {
-  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);
-  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --dropdownNext-borderWidth: var(--salt-size-border);
-  cursor: var(--salt-editable-cursor-readonly);
-  background: var(--dropdownNext-background-readonly);
-  padding-right: 0;
-}
-.saltDropdownNext-icon.saltDropdownNext-disabled,
-.saltDropdownNext-icon.saltDropdownNext-disabled:hover,
-.saltDropdownNext-icon.saltDropdownNext-disabled:active,
-.saltDropdownNext-icon.saltDropdownNext-readOnly,
-.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,
-.saltDropdownNext-icon.saltDropdownNext-readOnly:active {
-  color: var(--salt-content-primary-foreground-disabled);
+.saltDropdownNext-placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
 }
 .saltDropdownNext-primary {
   --dropdownNext-background: var(--salt-editable-primary-background);
-  --dropdownNext-background-active: var(--salt-editable-primary-background-active);
-  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);
-  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);
-  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltDropdownNext-secondary {
   --dropdownNext-background: var(--salt-editable-secondary-background);
-  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);
-  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);
-  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltDropdownNext:disabled {
+  --dropdownNext-background: var(--salt-editable-primary-background-disabled);
+  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);
+  --dropdownNext-color: var(--salt-content-primary-foreground-disabled);
+  --dropdownNext-cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltDropdownNext[aria-readonly=true] {
+  --dropdownNext-background: var(--salt-editable-primary-background-readonly);
+  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);
+  --dropdownNext-color: var(--salt-content-primary-foreground);
+  --dropdownNext-cursor: var(--salt-selectable-cursor-readonly);
+}
+.saltDropdownNext-error {
+  --dropdownNext-background: var(--salt-status-error-background);
+  --dropdownNext-borderColor: var(--salt-status-error-borderColor);
+}
+.saltDropdownNext-error .saltDropdownNext:focus-visible {
+  outline-color: var(--salt-status-error-borderColor);
+  --dropdownNext-borderColor: var(--salt-status-error-borderColor);
+}
+.saltDropdownNext-warning {
+  --dropdownNext-background: var(--salt-status-warning-background);
+  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);
+}
+.saltDropdownNext-warning .saltDropdownNext:focus-visible {
+  outline-color: var(--salt-status-warning-borderColor);
+  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);
+}
+.saltDropdownNext-success {
+  --dropdownNext-background: var(--salt-status-success-background);
+  --dropdownNext-borderColor: var(--salt-status-success-borderColor);
+}
+.saltDropdownNext-success .saltDropdownNext:focus-visible {
+  outline-color: var(--salt-status-success-borderColor);
+  --dropdownNext-borderColor: var(--salt-status-success-borderColor);
 }
 
 /* src/editable-label/EditableLabel.css */
@@ -2382,111 +2363,71 @@
 }
 
 /* src/navigation-item/NavigationItem.css */
-.saltNavigationItem {
-  --navigationItem-color: var(--salt-content-primary-foreground);
-  --navigationItem-fill: var(--salt-content-primary-foreground);
-  --navigationItem-bar-inset: var(--salt-spacing-25);
-  --navigationItem-bar-size: var(--salt-size-indicator);
-  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);
-  --navigationItem-gap: var(--salt-spacing-100);
-}
-.saltNavigationItem-active,
-.saltNavigationItem-rootItem {
-  --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);
-}
-.saltNavigationItem-blurActive,
-.saltNavigationItem-active.saltNavigationItem-nested {
-  --navigationItem-fontWeight: var(--salt-text-fontWeight);
-}
 .saltNavigationItem-wrapper {
   display: flex;
+  gap: var(--salt-spacing-100);
   align-items: center;
   position: relative;
-  gap: var(--navigationItem-gap);
-  font-weight: var(--navigationItem-fontWeight);
+  background: none;
+  border: none;
+  font-size: var(--salt-text-fontSize);
   text-decoration: none;
+  cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
 }
-.saltNavigationItem-wrapper.saltLink {
-  --link-textDecoration: none;
-}
-.saltNavigationItem-wrapper .saltIcon {
-  fill: var(--navigationItem-fill);
-  top: var(--salt-size-border);
-}
-.saltNavigationItem-label .saltBadge {
-  margin-left: auto;
+.saltNavigationItem-rootItem {
+  font-weight: var(--salt-text-fontWeight-strong);
 }
-.saltNavigationItem {
-  margin: 0 var(--navigationItem-gap);
+.saltNavigationItem-label .saltIcon {
+  top: var(--salt-spacing-25);
 }
-.saltNavigationItem-wrapper.saltNavigationItem-horizontal {
-  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));
-  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;
+.saltNavigationItem-horizontal {
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);
+  padding: 0 var(--salt-spacing-100);
   width: fit-content;
 }
-.saltNavigationItem-wrapper.saltNavigationItem-vertical {
-  min-height: calc(var(--salt-size-base));
-  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));
-  padding-right: var(--navigationItem-gap);
-  margin: var(--salt-spacing-50) 0;
+.saltNavigationItem-vertical {
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: var(--salt-spacing-100);
+  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));
+  width: 100%;
 }
-.saltNavigationItem-wrapper .saltNavigationItem-label {
-  --link-color-visited: var(--navigationItem-color);
-  --link-color-hover: var(--navigationItem-color);
-  color: var(--navigationItem-color);
+.saltNavigationItem-label {
+  color: var(--salt-content-primary-foreground);
   line-height: var(--salt-text-lineHeight);
   font-family: var(--salt-text-fontFamily);
-  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));
+  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
   display: flex;
   align-items: baseline;
-  gap: var(--navigationItem-gap);
-}
-.saltNavigationItem-wrapper.saltNavigationItem-nested {
-  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));
-}
-.saltNavigationItem-wrapper.saltNavigationItem-expandButton {
-  --saltButton-background-hover: none;
-  --saltButton-background-active: none;
-  --saltButton-textTransform: none;
-  --saltButton-width: 100%;
-  --saltButton-letterSpacing: none;
-  gap: var(--navigationItem-gap);
-  outline-offset: var(--salt-size-border);
+  gap: var(--salt-spacing-100);
 }
-.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {
-  --saltIcon-color: var(--navigationItem-fill);
-  top: 0;
+.saltNavigationItem-label .saltBadge {
+  margin-left: auto;
 }
 .saltNavigationItem-wrapper:focus-visible {
   outline: var(--salt-focused-outline);
 }
-.saltNavigationItem-horizontal:focus-visible {
-  border-right: var(--navigationItem-gap) solid transparent;
-  border-left: var(--navigationItem-gap) solid transparent;
-  margin: 0 calc(var(--navigationItem-gap) * -1);
-}
 .saltNavigationItem-wrapper:focus:not(:focus-visible) {
   outline: 0;
 }
 .saltNavigationItem-wrapper::after {
   content: "";
   position: absolute;
-  top: 0;
+  top: var(--salt-spacing-25);
   left: 0;
   display: block;
 }
 .saltNavigationItem-horizontal::after {
   width: 100%;
-  height: var(--navigationItem-bar-size);
-  top: var(--navigationItem-bar-inset);
+  height: var(--salt-size-indicator);
 }
 .saltNavigationItem-vertical::after {
-  width: var(--navigationItem-bar-size);
-  left: var(--navigationItem-bar-inset);
-  top: var(--navigationItem-bar-inset);
+  width: var(--salt-size-indicator);
+  left: var(--salt-spacing-25);
   height: calc(100% - var(--salt-spacing-50));
 }
 .saltNavigationItem-wrapper:hover::after,
@@ -2494,13 +2435,82 @@
   background: var(--salt-navigable-indicator-hover);
   transition: all var(--salt-duration-perceptible) ease-in-out;
 }
-.saltNavigationItem-wrapper.saltNavigationItem-active::after,
-.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,
-.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {
-  background: var(--navigationItem-indicator-background);
+.saltNavigationItem-active::after,
+.saltNavigationItem-active:hover::after,
+.saltNavigationItem-active:focus::after {
+  background: var(--salt-navigable-indicator-active);
   transition: all var(--salt-duration-perceptible) ease-in-out;
 }
 
+/* src/option/Option.css */
+.saltOption {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  align-items: center;
+  margin-top: var(--salt-size-border);
+  margin-bottom: var(--salt-size-border);
+  border-top: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+  cursor: var(--salt-selectable-cursor-hover);
+}
+.saltOption-active {
+  background: var(--salt-selectable-background-hover);
+}
+.saltOption-focusVisible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-border) * -2);
+}
+.saltOption:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltOption[aria-selected=true] {
+  background: var(--salt-selectable-background-selected);
+  border-color: var(--salt-selectable-borderColor-selected);
+}
+.saltOption[aria-disabled=true] {
+  color: var(--salt-content-primary-foreground-disabled);
+}
+
+/* src/option/OptionGroup.css */
+.saltOptionGroup-label {
+  background: var(--salt-container-primary-background);
+  color: var(--salt-text-secondary-foreground);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+/* src/option/OptionList.css */
+.saltOptionList {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
+  z-index: var(--salt-zIndex-popout);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  max-height: inherit;
+  min-height: inherit;
+}
+.saltOptionList-collapsed {
+  display: none;
+}
+
 /* src/overlay/Overlay.css */
 .saltOverlay {
   --overlay-text-color: var(--salt-content-primary-foreground);
@@ -2693,241 +2703,6 @@
 .saltParentChildLayout {
 }
 
-/* src/pill/Pill.css */
-.salt-density-high {
-  --pill-icon-offset: 1px;
-}
-.salt-density-medium {
-  --pill-icon-offset: 2px;
-}
-.salt-density-low {
-  --pill-icon-offset: 3px;
-}
-.salt-density-touch {
-  --pill-icon-offset: 4px;
-}
-.saltPill {
-  --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background));
-  --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active));
-  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled));
-  --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover));
-  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));
-  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));
-  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));
-  --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground));
-  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active));
-  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover));
-  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled));
-  --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground));
-  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active));
-  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover));
-  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled));
-  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));
-  --saltButton-padding: var(--saltPill-button-padding, 0);
-  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);
-  --saltButton-cursor: normal;
-  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size));
-  --saltButton-background: var(--pill-background);
-  --saltButton-color: var(--pill-text-color);
-  --saltButton-fontSize: var(--pill-fontSize);
-  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);
-  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));
-  --saltButton-minWidth: var(--saltPill-minWidth, 40px);
-}
-.saltPill {
-  align-items: center;
-  border-radius: var(--saltPill-borderRadius, 0);
-  display: inline-flex;
-  max-width: var(--saltPill-maxWidth, 160px);
-  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));
-  outline: var(--saltPill-outline, 0);
-  position: relative;
-  gap: 0;
-}
-.saltPill:hover {
-  --saltButton-background-active: var(--pill-background-active);
-  --saltButton-background-hover: var(--pill-background-hover);
-  --saltIcon-color: var(--pill-icon-color);
-  --saltIcon-color-hover: var(--pill-icon-color-hover);
-  background: var(--pill-background-hover);
-}
-.saltPill:active,
-.saltPill-active {
-  --saltButton-background-active: var(--pill-background-active);
-}
-.saltPill:focus {
-  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));
-  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-offset: var(--salt-focused-outlineOffset);
-}
-.saltPill-clickable {
-  --saltButton-background-active: var(--pill-background);
-  --saltButton-background-hover: var(--pill-background);
-  cursor: var(--salt-selectable-cursor-hover);
-  user-select: none;
-}
-.saltPill-deletable {
-  --saltButton-background-active: var(--pill-background);
-  --saltButton-background-hover: var(--pill-background);
-}
-.saltPill-selectable:hover,
-.saltPill-deletable:hover {
-  --saltButton-background-active: var(--pill-background);
-  --saltButton-background-hover: var(--pill-background);
-}
-.saltPill-selectable:active,
-.saltPill-active.saltPill-selectable {
-  --saltButton-background-active: var(--pill-background);
-}
-.saltPill-disabled,
-.saltPill-disabled:hover,
-.saltPill-disabled:active {
-  --saltButton-background-active: var(--pill-background-disabled);
-  --saltButton-background-hover: var(--pill-background-disabled);
-  --saltButton-text-color-active: var(--pill-text-color);
-  --saltButton-text-color-hover: var(--pill-text-color);
-  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);
-  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);
-  background: var(--pill-background-disabled);
-  cursor: var(--salt-selectable-cursor-disabled);
-}
-.saltPill-disabled .saltPill-checkbox {
-  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);
-  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);
-  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);
-}
-.saltPill-label {
-  color: var(--saltPill-text-color, var(--pill-text-color));
-  display: inline;
-  flex-grow: 1;
-  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));
-  overflow: hidden;
-  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));
-  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));
-  pointer-events: none;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.saltPill-deletable .saltPill-label {
-  padding-right: 0px;
-}
-.saltPill-innerLabel {
-  vertical-align: top;
-  line-height: var(--pill-height);
-}
-.saltPill-disabled .saltPill-label,
-.saltPill-disabled .saltIcon {
-  cursor: var(--salt-selectable-cursor-disabled);
-  opacity: var(--salt-palette-opacity-disabled);
-  --saltIcon-color: var(--pill-icon-color-disabled);
-  --saltIcon-color-hover: var(--pill-icon-color-disabled);
-}
-.saltPill-deleteButton {
-  --saltButton-background-hover: var(--pill-background-hover);
-  --saltButton-background-active: var(--pill-background-active);
-  --saltButton-cursor: pointer;
-  flex-shrink: 0;
-  height: var(--pill-checkbox-size);
-  margin-left: calc(var(--salt-size-unit) / 2);
-  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));
-  padding-right: calc(var(--salt-size-unit) / 2);
-}
-.saltPill-deleteButton-disabled {
-  --saltButton-background-hover: var(--pill-background-disabled);
-  --saltButton-background-active: var(--pill-background-disabled);
-  --saltButton-background-disabled: initial;
-}
-.saltPill-deleteButton .saltPill-deleteIcon {
-  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));
-  position: relative;
-}
-.saltPill-deleteButton:active .saltPill-deleteIcon {
-  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));
-}
-.saltPill-disabled:active .saltPill-deleteIcon {
-  --saltButton-background-active: var(--pill-background-disabled);
-  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));
-}
-.saltPill .saltPill-icon {
-  fill: var(--pill-icon-color);
-  height: 12px;
-  margin-left: var(--salt-size-adornmentGap);
-  margin-right: calc(var(--salt-size-unit) * 0.5);
-}
-.saltPill:active .saltPill-icon,
-.saltPill-active .saltPill-icon {
-  fill: var(--pill-icon-color-active);
-}
-.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {
-  padding-left: 0;
-}
-.saltPill:hover .saltPill-label {
-  color: var(--pill-text-color-hover);
-}
-.saltPill:active .saltPill-label {
-  color: var(--pill-text-color-active);
-}
-.saltPill-selectable .saltPill-label,
-.saltPill-selectable:active .saltPill-label,
-.saltPill-deletable .saltPill-label,
-.saltPill-deletable:active .saltPill-label {
-  background: var(--pill-background);
-  color: var(--pill-text-color);
-}
-.saltPill-disabled .saltPill-label,
-.saltPill-disabled:active .saltPill-label {
-  background: initial;
-  color: var(--pill-text-color-disabled);
-}
-
-/* src/pill-next/PillNext.css */
-.saltPillNext {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  background: var(--saltPillNext-background, var(--salt-actionable-primary-background));
-  border-radius: 0;
-  border: 0;
-  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  min-height: var(--salt-text-minHeight);
-  outline: 0;
-  position: relative;
-  gap: var(--salt-spacing-50);
-  padding-left: var(--salt-spacing-50);
-  padding-right: var(--salt-spacing-50);
-  color: var(--saltPillNext-color, var(--salt-actionable-primary-foreground));
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-  overflow: hidden;
-  white-space: nowrap;
-}
-.saltPillNext-clickable {
-  cursor: var(--salt-selectable-cursor-hover);
-}
-.saltPillNext-clickable:hover,
-.saltPillNext-clickable:focus-visible {
-  color: var(--salt-actionable-primary-foreground-hover);
-  background: var(--salt-actionable-primary-background-hover);
-}
-.saltPillNext-clickable.saltPillNext-active,
-.saltPillNext-clickable:active {
-  background: var(--salt-actionable-primary-background-active);
-  color: var(--salt-actionable-primary-foreground-active);
-}
-.saltPillNext:focus-visible {
-  outline: var(--salt-focused-outline);
-}
-.saltPillNext:disabled,
-.saltPillNext:disabled:hover {
-  color: var(--salt-actionable-primary-foreground-disabled);
-  background: var(--salt-actionable-primary-background-disabled);
-  cursor: var(--salt-selectable-cursor-disabled);
-}
-
 /* src/query-input/QueryInput.css */
 .saltQueryInput {
 }
@@ -3040,8 +2815,8 @@
   bottom: 0;
   height: 100%;
   display: flex;
-  z-index: 1199;
-  position: fixed;
+  z-index: calc(var(--salt-zIndex-drawer) - 1);
+  position: absolute;
   align-items: center;
   justify-content: center;
   background: var(--saltScrim-background, var(--salt-overlayable-background));
@@ -3050,9 +2825,8 @@
 .saltScrim:focus {
   outline: none;
 }
-.saltScrim-containerFix {
-  position: absolute;
-  z-index: calc(var(--salt-zIndex-appHeader) - 1);
+.saltScrim-fixed {
+  position: fixed;
 }
 
 /* src/search-input/SearchInput.css */
@@ -3922,6 +3696,183 @@
   background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));
 }
 
+/* src/tokenized-input-next/TokenizedInputNext.css */
+.saltTokenizedInputNext-container {
+  width: 100%;
+}
+.saltTokenizedInputNext {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);
+  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);
+  --tokenizedInput-border: none;
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+  align-items: center;
+  background: var(--tokenizedInput-background);
+  border: var(--tokenizedInput-border);
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  height: 100%;
+  line-height: var(--salt-text-lineHeight);
+  min-height: var(--salt-size-base);
+  padding: 0 var(--salt-spacing-100);
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.saltTokenizedInputNext:hover {
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--tokenizedInput-background-hover);
+  cursor: var(--salt-editable-cursor-hover);
+}
+.saltTokenizedInputNext:active {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--tokenizedInput-background-active);
+  cursor: var(--salt-editable-cursor-active);
+}
+.saltTokenizedInputNext-primary {
+  --tokenizedInput-background: var(--salt-editable-primary-background);
+  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);
+  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);
+  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+.saltTokenizedInputNext-secondary {
+  --tokenizedInput-background: var(--salt-editable-secondary-background);
+  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);
+  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);
+  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltTokenizedInputNext-error,
+.saltTokenizedInputNext-error:hover {
+  --tokenizedInput-background: var(--salt-status-error-background);
+  --tokenizedInput-background-active: var(--salt-status-error-background);
+  --tokenizedInput-background-hover: var(--salt-status-error-background);
+  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);
+}
+.saltTokenizedInputNext-warning,
+.saltTokenizedInputNext-warning:hover {
+  --tokenizedInput-background: var(--salt-status-warning-background);
+  --tokenizedInput-background-active: var(--salt-status-warning-background);
+  --tokenizedInput-background-hover: var(--salt-status-warning-background);
+  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);
+}
+.saltTokenizedInputNext-success,
+.saltTokenizedInputNext-success:hover {
+  --tokenizedInput-background: var(--salt-status-success-background);
+  --tokenizedInput-background-active: var(--salt-status-success-background);
+  --tokenizedInput-background-hover: var(--salt-status-success-background);
+  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);
+  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);
+}
+.saltTokenizedInputNext-textarea {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: inline-flex;
+  flex-basis: 0;
+  height: var(--salt-text-lineHeight);
+  font: inherit;
+  letter-spacing: 0;
+  overflow: hidden;
+  resize: none;
+  padding: 0;
+  min-width: 1px;
+}
+.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {
+  flex-grow: 1;
+  min-width: 4em;
+}
+.saltTokenizedInputNext-textarea::placeholder {
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltTokenizedInputNext-textarea:focus {
+  outline: none;
+}
+.saltTokenizedInputNext-textarea::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltTokenizedInputNext-focused {
+  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);
+}
+.saltTokenizedInputNext-readOnly,
+.saltTokenizedInputNext-readOnly:active,
+.saltTokenizedInputNext-readOnly:hover {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+  background: var(--tokenizedInput-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {
+  background: none;
+}
+.saltTokenizedInputNext-disabled,
+.saltTokenizedInputNext-disabled:hover,
+.saltTokenizedInputNext-disabled:active {
+  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);
+  background: var(--tokenizedInput-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+}
+.saltTokenizedInputNext-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);
+}
+.saltTokenizedInputNext.saltTokenizedInputNext-bordered {
+  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);
+  --tokenizedInput-activationIndicator-borderWidth: 0;
+}
+.saltTokenizedInputNext-bordered:active,
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {
+  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,
+.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {
+  --tokenizedInput-activationIndicator-borderWidth: 0;
+}
+.saltTokenizedInputNext-statusAdornment {
+  margin-left: auto;
+  margin-right: var(--salt-spacing-100);
+}
+.saltTokenizedInputNext-endAdornmentContainer {
+  margin-left: auto;
+  align-self: self-end;
+  display: inline-flex;
+  min-height: var(--salt-size-base);
+}
+.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {
+  margin-left: 0;
+}
+.saltTokenizedInputNext .saltButton {
+  --saltButton-padding: 0;
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
+.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {
+  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;
+}
+.saltTokenizedInputNext-hidden {
+  display: none;
+}
+
 /* src/toolbar/Toolbar.css */
 .saltToolbar {
   --toolbar-background: var(--salt-container-secondary-background);
@@ -4502,20 +4453,6 @@
   font-weight: 700;
 }
 
-/* src/pill/internal/PillCheckbox.css */
-.saltPill-checkbox {
-  height: var(--pill-checkbox-size);
-  margin-left: 1px;
-  padding-right: 0;
-  width: var(--pill-checkbox-size);
-  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);
-  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);
-  --saltCheckbox-icon-fill: none;
-  --saltCheckbox-icon-fill-checked: none;
-  --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);
-  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground);
-}
-
 /* src/progress/CircularProgress/CircularProgress.css */
 .saltCircularProgress {
   color: var(--salt-content-primary-foreground);
@@ -4728,6 +4665,34 @@
   max-width: 100%;
 }
 
+/* src/tokenized-input-next/internal/InputPill.css */
+.saltInputPill {
+  max-width: 100%;
+  margin: var(--salt-spacing-25) var(--salt-spacing-50);
+  margin-left: 0;
+}
+.saltInputPill-expanded {
+  max-width: calc(100% - (var(--salt-size-base) - var(--salt-spacing-100)));
+}
+.saltInputPill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.saltInputPill.saltInputPill-hidden {
+  display: none;
+}
+.saltInputPill.saltInputPill:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltInputPill.saltInputPill-pillHighlighted {
+  --saltPill-background: var(--salt-selectable-background-hover);
+}
+.saltInputPill.saltInputPill:active {
+  background: var(--salt-actionable-primary-background-active);
+  --saltPill-color: var(--salt-actionable-primary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+}
+
 /* src/toolbar/overflow-panel/OverflowPanel.css */
 .saltOverflowPanel.saltDropdown-popup {
   background: var(--salt-container-primary-background);
@@ -4764,4 +4729,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/9bca76ec-eb3b-42a1-96c2-e524fd8f78b1.css */
+/* src/41bc2559-7199-41be-8e85-b1f19e44903a.css */