@salt-ds/core 1.19.0 → 1.21.0

package/css/salt-core.css

@@ -668,6 +668,188 @@ a:link .saltInteractableCard * {
   color: var(--salt-content-primary-foreground);
 }
 
+/* src/combo-box/ComboBox.css */
+.saltComboBox-focused {
+  outline: var(--salt-focused-outline);
+}
+
+/* src/dialog/Dialog.css */
+.saltDialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--salt-spacing-300);
+  padding-bottom: var(--salt-spacing-300);
+  background: var(--salt-container-primary-background);
+  box-shadow: var(--salt-overlayable-shadow-modal);
+  overflow-y: auto;
+  z-index: var(--salt-zIndex-drawer);
+  height: min-content;
+  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+}
+.saltDialog-info {
+  border-color: var(--salt-status-info-borderColor);
+}
+.saltDialog-error {
+  border-color: var(--salt-status-error-borderColor);
+}
+.saltDialog-warning {
+  border-color: var(--salt-status-warning-borderColor);
+}
+.saltDialog-success {
+  border-color: var(--salt-status-success-borderColor);
+}
+.saltDialog.saltDialog-enterAnimation {
+  animation: var(--salt-animation-fade-in-center);
+}
+.saltDialog.saltDialog-exitAnimation {
+  animation: var(--salt-animation-fade-out-back);
+}
+.saltDialog-small-xs {
+  width: 100%;
+  max-height: 48%;
+}
+.saltDialog-small-sm {
+  width: 56%;
+  max-height: 48%;
+}
+.saltDialog-small-md {
+  width: 36%;
+  max-height: 48%;
+}
+.saltDialog-small-lg {
+  width: 24%;
+  max-height: 48%;
+}
+.saltDialog-small-xl {
+  width: 24%;
+  max-height: 48%;
+}
+.saltDialog-medium-xs {
+  width: 100%;
+  max-height: 72%;
+}
+.saltDialog-medium-sm {
+  width: 84%;
+  max-height: 72%;
+}
+.saltDialog-medium-md {
+  width: 68%;
+  max-height: 72%;
+}
+.saltDialog-medium-lg {
+  width: 48%;
+  max-height: 72%;
+}
+.saltDialog-medium-xl {
+  width: 48%;
+  max-height: 72%;
+}
+.saltDialog-large-xs {
+  width: 100%;
+  max-height: 84%;
+}
+.saltDialog-large-sm {
+  width: 96%;
+  max-height: 84%;
+}
+.saltDialog-large-md {
+  width: 84%;
+  max-height: 84%;
+}
+.saltDialog-large-lg {
+  width: 72%;
+  max-height: 84%;
+}
+.saltDialog-large-xl {
+  width: 72%;
+  max-height: 84%;
+}
+
+/* src/dialog/DialogActions.css */
+.saltDialogActions {
+  padding: var(--salt-spacing-300);
+  padding-bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--salt-spacing-100);
+}
+
+/* src/dialog/DialogCloseButton.css */
+.saltButton.saltDialogCloseButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* src/dialog/DialogContent.css */
+.saltDialogContent {
+  color: var(--salt-content-primary-foreground);
+  min-height: var(--salt-text-lineHeight);
+  overflow-y: auto;
+  background: var(--salt-container-primary-background);
+  padding-bottom: var(--salt-spacing-50);
+  margin-left: var(--salt-spacing-200);
+  margin-right: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  padding-left: var(--salt-spacing-100);
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
+  box-shadow: none;
+}
+.saltDialogContent-scroll {
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
+  box-shadow: var(--salt-overlayable-shadow-scroll);
+}
+
+/* src/dialog/DialogHeader.css */
+.saltDialogHeader {
+  padding-bottom: var(--salt-spacing-100);
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltDialogHeader-header {
+  margin: 0;
+}
+.saltDialogHeader .saltStatusIndicator.saltIcon {
+  --icon-size: var(--salt-text-h2-lineHeight);
+}
+.saltDialogHeader-withAccent {
+  position: relative;
+}
+.saltDialogHeader-withAccent::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: var(--salt-spacing-100);
+  width: var(--salt-size-accent);
+  background: var(--salt-accent-background);
+}
+.saltDialogHeader-error::before {
+  background: var(--salt-status-error-borderColor);
+}
+.saltDialogHeader-info::before {
+  background: var(--salt-status-info-borderColor);
+}
+.saltDialogHeader-success::before {
+  background: var(--salt-status-success-borderColor);
+}
+.saltDialogHeader-warning::before {
+  background: var(--salt-status-warning-borderColor);
+}
+
 /* src/drawer/Drawer.css */
 .saltDrawer {
   background: var(--drawer-background);
@@ -747,6 +929,91 @@ a:link .saltInteractableCard * {
   margin-right: calc(var(--salt-spacing-300) * -1);
 }
 
+/* src/dropdown/Dropdown.css */
+.saltDropdown {
+  --dropdown-borderColor: var(--salt-editable-borderColor);
+  --dropdown-color: var(--salt-content-primary-foreground);
+  --dropdown-cursor: var(--salt-selectable-cursor-hover);
+}
+.saltDropdown {
+  all: unset;
+  box-sizing: border-box;
+  min-width: 4em;
+  width: 100%;
+  background: var(--dropdown-background);
+  cursor: var(--dropdown-cursor);
+  min-height: var(--salt-size-base);
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--salt-spacing-100);
+  gap: var(--salt-spacing-100);
+  color: var(--dropdown-color);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+}
+.saltDropdown:hover {
+  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+}
+.saltDropdown:focus-visible {
+  outline: var(--salt-focused-outline);
+  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+}
+.saltDropdown-content {
+  flex: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+.saltDropdown-placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltDropdown-primary {
+  --dropdown-background: var(--salt-editable-primary-background);
+}
+.saltDropdown-secondary {
+  --dropdown-background: var(--salt-editable-secondary-background);
+}
+.saltDropdown:disabled {
+  --dropdown-background: var(--salt-editable-primary-background-disabled);
+  --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
+  --dropdown-color: var(--salt-content-primary-foreground-disabled);
+  --dropdown-cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltDropdown[aria-readonly=true] {
+  --dropdown-background: var(--salt-editable-primary-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
+  --dropdown-color: var(--salt-content-primary-foreground);
+  --dropdown-cursor: var(--salt-selectable-cursor-readonly);
+}
+.saltDropdown-error {
+  --dropdown-background: var(--salt-status-error-background);
+  --dropdown-borderColor: var(--salt-status-error-borderColor);
+}
+.saltDropdown-error .saltDropdown:focus-visible {
+  outline-color: var(--salt-status-error-borderColor);
+  --dropdown-borderColor: var(--salt-status-error-borderColor);
+}
+.saltDropdown-warning {
+  --dropdown-background: var(--salt-status-warning-background);
+  --dropdown-borderColor: var(--salt-status-warning-borderColor);
+}
+.saltDropdown-warning .saltDropdown:focus-visible {
+  outline-color: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor: var(--salt-status-warning-borderColor);
+}
+.saltDropdown-success {
+  --dropdown-background: var(--salt-status-success-background);
+  --dropdown-borderColor: var(--salt-status-success-borderColor);
+}
+.saltDropdown-success .saltDropdown:focus-visible {
+  outline-color: var(--salt-status-success-borderColor);
+  --dropdown-borderColor: var(--salt-status-success-borderColor);
+}
+
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
   color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
@@ -1319,6 +1586,7 @@ a:link .saltInteractableCard * {
   padding-right: var(--salt-spacing-100);
   position: relative;
   width: 100%;
+  box-sizing: border-box;
 }
 .saltMultilineInput:hover {
   --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);
@@ -1500,6 +1768,7 @@ a:link .saltInteractableCard * {
   text-decoration: none;
   cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
+  box-sizing: border-box;
 }
 .saltNavigationItem-rootItem {
   font-weight: var(--salt-text-fontWeight-strong);
@@ -1591,6 +1860,99 @@ a:link .saltInteractableCard * {
   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;
+  cursor: var(--salt-selectable-cursor-hover);
+  box-sizing: border-box;
+}
+.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);
+}
+.saltOption[aria-selected=true]::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+}
+.saltOption[aria-selected=true]::before {
+  border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+}
+.saltOption[aria-selected=true]:first-of-type::before {
+  border-top: unset;
+  top: 0;
+}
+.saltOption[aria-selected=true]:last-of-type::before {
+  border-bottom: unset;
+  bottom: 0;
+}
+.saltOption[aria-disabled=true] {
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-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-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+}
+.saltOptionList-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-border);
+  max-height: inherit;
+  min-height: inherit;
+}
+.saltOptionList-collapsed {
+  display: none;
+}
+
 /* src/pagination/CompactInput.css */
 .saltCompactInput {
   --saltInput-paddingLeft: 0;
@@ -1702,6 +2064,7 @@ a:link .saltInteractableCard * {
   padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
   width: var(--saltPanel-width, 100%);
   border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
+  box-sizing: border-box;
 }
 
 /* src/pill/Pill.css */
@@ -1750,6 +2113,223 @@ a:link .saltInteractableCard * {
   cursor: var(--salt-selectable-cursor-disabled);
 }
 
+/* src/pill-input/PillInput.css */
+.saltPillInput {
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderStyle: var(--salt-editable-borderStyle);
+  --input-outlineColor: var(--salt-focused-outlineColor);
+  --input-borderWidth: var(--salt-size-border);
+  align-items: center;
+  background: var(--saltInput-background, var(--input-background));
+  color: var(--saltInput-color, var(--salt-content-primary-foreground));
+  display: inline-flex;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
+  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
+  min-height: var(--saltInput-minHeight, var(--salt-size-base));
+  min-width: var(--saltInput-minWidth, 4em);
+  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
+  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.saltPillInput-truncate {
+  height: var(--salt-size-base);
+}
+.saltPillInput-truncate .saltPillInput-inputWrapper {
+  flex-wrap: nowrap;
+}
+.saltPillInput:hover {
+  --input-borderStyle: var(--salt-editable-borderStyle-hover);
+  --input-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--saltInput-background-hover, var(--input-background-hover));
+  cursor: var(--salt-editable-cursor-hover);
+}
+.saltPillInput:active {
+  --input-borderColor: var(--salt-editable-borderColor-active);
+  --input-borderStyle: var(--salt-editable-borderStyle-active);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltInput-background-active, var(--input-background-active));
+  cursor: var(--salt-editable-cursor-active);
+}
+.saltPillInput-primary {
+  --input-background: var(--salt-editable-primary-background);
+  --input-background-active: var(--salt-editable-primary-background-active);
+  --input-background-hover: var(--salt-editable-primary-background-hover);
+  --input-background-disabled: var(--salt-editable-primary-background-disabled);
+  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+.saltPillInput-secondary {
+  --input-background: var(--salt-editable-secondary-background);
+  --input-background-active: var(--salt-editable-secondary-background-active);
+  --input-background-hover: var(--salt-editable-secondary-background-active);
+  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltPillInput-error,
+.saltPillInput-error:hover {
+  --input-background: var(--salt-status-error-background);
+  --input-background-active: var(--salt-status-error-background);
+  --input-background-hover: var(--salt-status-error-background);
+  --input-borderColor: var(--salt-status-error-borderColor);
+  --input-outlineColor: var(--salt-status-error-borderColor);
+}
+.saltPillInput-warning,
+.saltPillInput-warning:hover {
+  --input-background: var(--salt-status-warning-background);
+  --input-background-active: var(--salt-status-warning-background);
+  --input-background-hover: var(--salt-status-warning-background);
+  --input-borderColor: var(--salt-status-warning-borderColor);
+  --input-outlineColor: var(--salt-status-warning-borderColor);
+}
+.saltPillInput-success,
+.saltPillInput-success:hover {
+  --input-background: var(--salt-status-success-background);
+  --input-background-active: var(--salt-status-success-background);
+  --input-background-hover: var(--salt-status-success-background);
+  --input-borderColor: var(--salt-status-success-borderColor);
+  --input-outlineColor: var(--salt-status-success-borderColor);
+}
+.saltPillInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltInput-letterSpacing, 0);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-align: var(--input-textAlign);
+  width: 100%;
+}
+.saltPillInput-input:focus {
+  outline: none;
+}
+.saltPillInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltPillInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltPillInput-focused {
+  --input-borderColor: var(--input-outlineColor);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+}
+.saltPillInput.saltPillInput-readOnly {
+  --input-borderColor: var(--salt-editable-borderColor-readonly);
+  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+.saltPillInput-focused.saltPillInput-disabled {
+  --input-borderWidth: var(--salt-size-border);
+  outline: none;
+}
+.saltPillInput-focused.saltPillInput-readOnly {
+  --input-borderWidth: var(--salt-size-border);
+}
+.saltPillInput-disabled .saltPillInput-input::selection {
+  background: none;
+}
+.saltPillInput.saltPillInput-disabled,
+.saltPillInput.saltPillInput-disabled:hover,
+.saltPillInput.saltPillInput-disabled:active {
+  --input-borderColor: var(--salt-editable-borderColor-disabled);
+  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+.saltPillInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+}
+.saltPillInput-startAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-right: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltPillInput-endAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-left: var(--salt-spacing-100);
+  padding-top: var(--salt-spacing-50);
+  column-gap: var(--salt-spacing-100);
+  align-self: flex-start;
+}
+.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
+  margin-left: var(--salt-spacing-50);
+}
+.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltPillInput-startAdornmentContainer .saltButton:first-child {
+  margin-left: calc(var(--salt-spacing-50) * -1);
+}
+.saltPillInput-endAdornmentContainer .saltButton:last-child {
+  margin-right: calc(var(--salt-spacing-50) * -1);
+}
+.saltPillInput-startAdornmentContainer > .saltButton,
+.saltPillInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
+.saltPillInput-inputWrapper {
+  display: flex;
+  gap: var(--salt-spacing-50);
+  align-items: center;
+  flex: 1;
+  padding: var(--salt-spacing-50) 0;
+  flex-wrap: wrap;
+  max-height: inherit;
+  height: inherit;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.saltPillInput-pillList {
+  display: contents;
+}
+.saltPillInput .saltPill:focus-visible {
+  background: var(--salt-selectable-background-hover);
+  outline: none;
+}
+.saltPillInput .saltPill:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltPillInput .saltPill:active {
+  background: var(--salt-actionable-primary-background-active);
+  --saltPill-color: var(--salt-actionable-primary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+}
+div[role=listitem] {
+  display: inline;
+}
+.saltPillInput-overflowIndicator {
+  width: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* src/radio-button/RadioButton.css */
 .saltRadioButton {
   display: flex;
@@ -2489,21 +3069,37 @@ label.saltText small,
 .saltCircularProgress-track {
   inline-size: calc(var(--salt-size-base) * 3);
   block-size: calc(var(--salt-size-base) * 3);
-  border-style: var(--salt-track-borderStyle);
-  border-width: var(--salt-size-bar-small);
+  outline-style: var(--salt-track-borderStyle);
+  outline-width: var(--salt-size-bar);
+  outline-offset: calc(var(--salt-size-bar) * -1.5);
   border-radius: calc(var(--salt-size-base) * 3);
-  border-color: var(--salt-track-borderColor);
+  outline-color: var(--salt-track-borderColor);
   box-sizing: border-box;
 }
-.saltCircularProgress-bar {
+.saltCircularProgress-bar,
+.saltCircularProgress-bufferBorder,
+.saltCircularProgress-bufferBackground {
   inline-size: calc(var(--salt-size-base) * 3);
   block-size: calc(var(--salt-size-base) * 3);
-  border-style: var(--salt-track-borderStyle);
-  border-width: var(--salt-size-bar-strong);
   border-radius: calc(var(--salt-size-base) * 3);
-  border-color: var(--salt-accent-background);
   box-sizing: border-box;
 }
+.saltCircularProgress-bar {
+  border-color: var(--salt-accent-background);
+  border-style: var(--salt-track-borderStyle);
+  border-width: var(--salt-size-bar-strong);
+}
+.saltCircularProgress-bufferBorder {
+  border: solid var(--salt-size-border) var(--salt-accent-background);
+  outline: solid var(--salt-size-border) var(--salt-accent-background);
+  outline-offset: calc(var(--salt-size-bar-strong) * -1);
+}
+.saltCircularProgress-bufferBackground {
+  border: solid var(--salt-size-bar-strong) var(--salt-container-primary-background);
+  position: absolute;
+  bottom: 0;
+  z-index: calc(var(--salt-zIndex-default) * -1);
+}
 .saltCircularProgress-bars {
   position: absolute;
   inset-block-start: 0;
@@ -2511,26 +3107,50 @@ label.saltText small,
   inline-size: 100%;
   block-size: 100%;
 }
+.saltCircularProgress-bufferOverlayRight,
+.saltCircularProgress-bufferOverlayLeft,
 .saltCircularProgress-barOverlayRight,
-.saltCircularProgress-barOverlayLeft {
-  inline-size: 50%;
+.saltCircularProgress-barOverlayLeft,
+.saltCircularProgress-bufferSubOverlayRight,
+.saltCircularProgress-bufferSubOverlayLeft,
+.saltCircularProgress-barSubOverlayRight,
+.saltCircularProgress-barSubOverlayLeft {
   block-size: 100%;
   transform-origin: 100% center;
-  transform: rotate(180deg);
   overflow: hidden;
+}
+.saltCircularProgress-bufferOverlayRight,
+.saltCircularProgress-bufferOverlayLeft,
+.saltCircularProgress-barOverlayRight,
+.saltCircularProgress-barOverlayLeft {
+  inline-size: 50%;
+  transform: rotate(180deg);
   position: absolute;
 }
+.saltCircularProgress-bufferSubOverlayRight,
+.saltCircularProgress-bufferSubOverlayLeft,
 .saltCircularProgress-barSubOverlayRight,
 .saltCircularProgress-barSubOverlayLeft {
   inline-size: 100%;
-  block-size: 100%;
-  transform-origin: 100% center;
-  overflow: hidden;
   transform: rotate(-180deg);
 }
+.saltCircularProgress-bufferOverlayLeft,
 .saltCircularProgress-barOverlayLeft {
   transform: rotate(0deg);
 }
+.saltCircularProgress-bufferOverlayRight:before,
+.saltCircularProgress-bufferSubOverlay:before {
+  content: "";
+  background: var(--salt-accent-background);
+  position: absolute;
+  right: 0;
+  width: var(--salt-size-border);
+  height: var(--salt-size-bar-strong);
+}
+.saltCircularProgress-bufferOverlayRight:before {
+  bottom: 0;
+  z-index: var(--salt-zIndex-default);
+}
 
 /* src/progress/LinearProgress/LinearProgress.css */
 .saltLinearProgress {
@@ -2548,23 +3168,34 @@ label.saltText small,
   overflow: hidden;
   height: var(--salt-size-bar-strong);
 }
-.saltLinearProgress-bar {
-  width: 100%;
+.saltLinearProgress-bar,
+.saltLinearProgress-buffer {
   position: absolute;
   left: 0;
   bottom: 0;
   top: 0;
   transition: transform 0.2s linear;
   transform-origin: left;
+}
+.saltLinearProgress-buffer {
+  width: 0;
+  background: var(--salt-container-primary-background);
+  outline: solid var(--salt-size-border) var(--salt-accent-background);
+  z-index: var(--salt-zIndex-default);
+  outline-offset: calc(var(--salt-size-border) * -1);
+}
+.saltLinearProgress-bar {
+  width: 100%;
   background: var(--salt-accent-background);
-  z-index: 2;
+  z-index: calc(var(--salt-zIndex-default) * 2);
 }
 .saltLinearProgress-track {
   background: var(--salt-track-borderColor);
   width: 100%;
-  height: var(--salt-size-bar-small);
+  height: var(--salt-size-bar);
   position: absolute;
-  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);
+  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar)) / 2);
+  right: 0;
   transition: transform 0.2s linear;
   transform-origin: left;
 }
@@ -2575,4 +3206,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/74bb8614-e2fd-43f5-8567-6cfe0430ac06.css */
+/* src/27680800-7be6-4fe8-984e-51d71cc3f624.css */