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

package/css/salt-lab.css

@@ -24,7 +24,7 @@
 .saltAppHeader {
   align-items: flex-start;
   background: var(--appHeader-background);
-  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);
+  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-border) var(--salt-separable-primary-borderColor);
   box-shadow: var(--appHeader-shadow);
   box-sizing: content-box;
   display: flex;
@@ -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,24 +974,33 @@
 /* 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-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/DialogTitle.css */
 .saltDialogTitle {
-  display: flex;
-  gap: var(--salt-spacing-100);
   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);
+}
+.saltDialogTitle-title {
   margin: 0;
 }
 .saltDialogTitle .saltStatusIndicator.saltIcon {
@@ -995,14 +1041,10 @@
   overflow: auto;
   padding: var(--salt-spacing-300);
   box-shadow: var(--salt-overlayable-shadow-modal);
-  z-index: calc(var(--salt-zIndex-appHeader) - 1);
+  z-index: var(--salt-zIndex-drawer);
   position: fixed;
   top: 0;
 }
-.saltDrawer-overlay {
-  background: var(--salt-overlayable-background);
-  z-index: var(--salt-zIndex-drawer);
-}
 .saltDrawer-primary {
   --drawer-background: var(--salt-container-primary-background);
 }
@@ -1020,10 +1062,6 @@
 .saltDrawer-top.saltDrawer-exitAnimation {
   animation: var(--salt-animation-slide-out-bottom);
 }
-.saltDrawer-right,
-.saltDrawer-left {
-  width: calc(10 * var(--salt-size-base));
-}
 .saltDrawer-right {
   left: auto;
   right: 0;
@@ -1059,6 +1097,18 @@
   animation: var(--salt-animation-slide-out-top);
 }
 
+/* src/drawer/DrawerCloseButton.css */
+.saltDrawerCloseButton-container {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+.saltButton-secondary.saltDrawerCloseButton {
+  position: fixed;
+  margin-top: calc(var(--salt-spacing-300) * -1);
+  margin-right: calc(var(--salt-spacing-300) * -1);
+}
+
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   --saltIcon-margin: 2px 0 0 8px;
@@ -2382,7 +2432,7 @@
   overflow: hidden;
   overflow-y: auto;
   position: relative;
-  z-index: var(--salt-zIndex-popout);
+  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   max-height: inherit;
   min-height: inherit;
@@ -2432,22 +2482,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 +2695,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));
@@ -3235,8 +3293,8 @@
 }
 .saltTabNext-main[aria-selected=true] {
   background: var(--tabNext-background-active);
-  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
-  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
 }
 .saltTabNext[aria-selected=true]::after {
   background: var(--salt-navigable-indicator-active);
@@ -3269,7 +3327,7 @@
   position: absolute;
   inset: auto 0 0 0;
   height: var(--salt-size-border);
-  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
 }
 .saltTabstripNext .saltTabNext-wrapper:not(:last-child) {
   padding-right: var(--salt-spacing-100);
@@ -4182,114 +4240,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 +4255,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 +4430,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/f810c73d-a24a-4a6f-a7cf-379b59798ff0.css */
+/* src/6968719c-0a90-4ad1-a18c-2d338be48eda.css */

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-border) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AppHeader.css.js.map