@salt-ds/lab 1.0.0-alpha.30 → 1.0.0-alpha.31

package/css/salt-lab.css

@@ -851,33 +851,22 @@
 
 /* src/dialog/Dialog.css */
 .saltDialog {
-  position: relative;
+  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);
-  max-height: 100%;
-  max-width: 100%;
   box-shadow: var(--salt-overlayable-shadow-modal);
-  z-index: calc(var(--salt-zIndex-appHeader) - 1);
   overflow-y: auto;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-}
-.salt-density-high {
-  --saltDialog-minWidth: 240px;
-}
-.salt-density-medium {
-  --saltDialog-minWidth: 320px;
-}
-.salt-density-low {
-  --saltDialog-minWidth: 400px;
-}
-.salt-density-touch {
-  --saltDialog-minWidth: 480px;
+  z-index: var(--salt-zIndex-drawer);
+  height: min-content;
+  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
 }
 .saltDialog-overlay {
   background: var(--salt-overlayable-background);
@@ -887,10 +876,6 @@
   padding: var(--salt-spacing-100);
   z-index: var(--salt-zIndex-modal);
 }
-.saltDialog-withStatus {
-  border-width: var(--salt-size-border);
-  border-style: var(--salt-container-borderStyle);
-}
 .saltDialog-info {
   border-color: var(--salt-status-info-borderColor);
 }
@@ -909,13 +894,65 @@
 .saltDialog.saltDialog-exitAnimation {
   animation: var(--salt-animation-fade-out-back);
 }
-@media screen and (min-width: 480px) {
-  .saltDialog {
-    min-width: var(--saltDialog-minWidth);
-  }
-  .saltDialog-overlay {
-    padding: var(--salt-spacing-400);
-  }
+.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 */
@@ -937,15 +974,19 @@
 /* src/dialog/DialogContent.css */
 .saltDialogContent {
   color: var(--salt-content-primary-foreground);
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  flex: 1 1 auto;
   min-height: var(--salt-text-lineHeight);
   overflow-y: auto;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
+  background: var(--salt-container-primary-background);
+  padding-bottom: var(--salt-spacing-50);
+  margin-left: var(--salt-spacing-300);
+  margin-right: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  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/DialogTitle.css */
@@ -2432,22 +2473,30 @@
   float: right;
 }
 
-/* src/parent-child-item/ParentChildItem.css */
-.saltParentChildItem-slide-top {
-  animation: var(--salt-animation-slide-in-top);
-}
-.saltParentChildItem-slide-bottom {
-  animation: var(--salt-animation-slide-in-bottom);
+/* src/parent-child-layout/ParentChildLayout.css */
+.saltParentChildLayout {
+  overflow: hidden;
 }
-.saltParentChildItem-slide-left {
+.saltParentChildLayout-parent {
   animation: var(--salt-animation-slide-in-left);
 }
-.saltParentChildItem-slide-right {
+.saltParentChildLayout-child {
   animation: var(--salt-animation-slide-in-right);
 }
-
-/* src/parent-child-layout/ParentChildLayout.css */
-.saltParentChildLayout {
+.saltParentChildLayout-reversed.saltFlexLayout {
+  --flexLayout-direction: row-reverse;
+}
+.saltParentChildLayout-no-animations .saltParentChildLayout-parent,
+.saltParentChildLayout-no-animations .saltParentChildLayout-child {
+  animation: none;
+}
+@media (prefers-reduced-motion) {
+  .reduced-motion .saltParentChildLayout-parent {
+    animation: none;
+  }
+  .reduced-motion .saltParentChildLayout-child {
+    animation: none;
+  }
 }
 
 /* src/query-input/QueryInput.css */
@@ -2637,7 +2686,7 @@
 }
 .saltSlider {
   --slider-rail-height: var(--saltSlider-rail-height, 8px);
-  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-palette-neutral-secondary-border));
+  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor));
   --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);
   --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));
   --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background));
@@ -4182,114 +4231,6 @@
   font-weight: 700;
 }
 
-/* src/progress/CircularProgress/CircularProgress.css */
-.saltCircularProgress {
-  color: var(--salt-content-primary-foreground);
-  display: inline-flex;
-  position: relative;
-}
-.saltCircularProgress-progressValue {
-  align-items: center;
-  color: var(--salt-content-primary-foreground);
-  display: flex;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  width: 100%;
-}
-.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);
-  border-radius: calc(var(--salt-size-base) * 3);
-  border-color: var(--salt-palette-neutral-secondary-border);
-}
-.saltCircularProgress-bar {
-  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);
-}
-.saltCircularProgress-bars {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inline-size: 100%;
-  block-size: 100%;
-}
-.saltCircularProgress-barOverlayRight,
-.saltCircularProgress-barOverlayLeft {
-  inline-size: 50%;
-  block-size: 100%;
-  transform-origin: 100% center;
-  transform: rotate(180deg);
-  overflow: hidden;
-  position: absolute;
-}
-.saltCircularProgress-barSubOverlayRight,
-.saltCircularProgress-barSubOverlayLeft {
-  inline-size: 100%;
-  block-size: 100%;
-  transform-origin: 100% center;
-  overflow: hidden;
-  transform: rotate(-180deg);
-}
-.saltCircularProgress-barOverlayLeft {
-  transform: rotate(0deg);
-}
-
-/* src/progress/LinearProgress/LinearProgress.css */
-.saltLinearProgress {
-  align-items: center;
-  color: var(--salt-content-primary-foreground);
-  display: flex;
-  min-width: 400px;
-  font-size: var(--linearProgress-fontSize);
-}
-.saltLinearProgress-barContainer {
-  background: none;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  height: var(--salt-size-bar-strong);
-}
-.saltLinearProgress-bar {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  transition: transform 0.2s linear;
-  transform-origin: left;
-  background: var(--salt-accent-background);
-  z-index: 2;
-}
-.saltLinearProgress-track {
-  background: var(--salt-palette-neutral-secondary-border);
-  width: 100%;
-  height: var(--salt-size-bar-small);
-  position: absolute;
-  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);
-  transition: transform 0.2s linear;
-  transform-origin: left;
-}
-.saltLinearProgress-progressValue {
-  color: inherit;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
-  margin: 0;
-  white-space: nowrap;
-  padding-left: var(--salt-spacing-100);
-}
-
 /* src/stepped-tracker/StepLabel/StepLabel.css */
 .saltStepLabel {
   width: 100%;
@@ -4305,7 +4246,7 @@
 .saltTrackerConnector {
   --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));
   --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));
-  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-palette-neutral-secondary-border));
+  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));
   --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));
   --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));
   --trackerConnector-style-border: var(--trackerConnector-style-default);
@@ -4480,4 +4421,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/f810c73d-a24a-4a6f-a7cf-379b59798ff0.css */
+/* src/433580a0-111c-460c-b182-06d17f9e210a.css */