@salt-ds/lab 1.0.0-alpha.57 → 1.0.0-alpha.58

package/CHANGELOG.md

@@ -1,5 +1,237 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.58
+
+### Minor Changes
+
+- 0302830: Updates to Lab `SkipLink`
+
+  - Remove `targetRef` prop, added `target` prop to accept a string representing the ID of the target element.
+  - Updated styling to adhere with the rest of the library styles for consistency.
+  - Fixed an issue where the `SkipLink` would render when the ref to the target element was broken. Now, the skip link will not render at all if the target element is not found.
+
+### Patch Changes
+
+- 0a5b68b: Marked CSS files as having side effects. This fixes Webpack tree-shaking CSS files when `sideEffects: true` is not set on style-loader rules.
+- a9edf03: Fixed DatePicker showing overlay when `readOnly`. Closes #4470.
+- 86d2a28: Refactored SteppedTracker, added Step and useStepReducer
+
+  The `SteppedTracker` is a component that helps you manage a series of steps in a process. It provides a way to navigate between steps, and to track the progress of the process.
+
+  The `<SteppedTracker />` is meant to be used in conjunction with the `<Step />` component and potentially the `useStepReducer()` hook.
+
+  In it's simplest form the `SteppedTracker` can be used like so:
+
+  ```tsx
+  import { SteppedTracker, Step } from "@salt-ds/lab";
+
+  function Example() {
+    return (
+      <SteppedTracker>
+        <Step label="Step 1" stage="completed" />
+        <Step label="Step 2" stage="active" />
+        <Step label="Step 3" stage="pending" />
+      </SteppedTracker>
+    );
+  }
+  ```
+
+  The SteppedTracker component supports nested steps, which can be used to represent sub-steps within a step. This can be done by nesting `<Step />` components within another `<Step />` component. We advise you not to go above 2 levels deep, as it becomes hard to follow for the user.
+
+  ```tsx
+  import { StackLayout } from "@salt-ds/core";
+  import { Step, SteppedTracker } from "@salt-ds/lab";
+
+  export function NestedSteps() {
+    return (
+      <StackLayout style={{ minWidth: "240px" }}>
+        <SteppedTracker orientation="vertical">
+          <Step label="Step 1" stage="completed">
+            <Step label="Step 1.1" stage="completed" />
+          </Step>
+          <Step label="Step 2" stage="inprogress">
+            <Step label="Step 2.1" stage="active" />
+            <Step label="Step 2.2" stage="pending">
+              <Step label="Step 2.2.1" stage="pending" />
+              <Step label="Step 2.2.2" stage="pending" />
+              <Step label="Step 2.2.3" stage="pending" />
+            </Step>
+          </Step>
+          <Step label="Step 3">
+            <Step label="Step 3.1" stage="pending" />
+            <Step label="Step 3.2" stage="pending" />
+            <Step label="Step 3.3" stage="pending">
+              <Step label="Step 3.3.1" stage="pending" />
+              <Step label="Step 3.3.2" stage="pending" />
+              <Step label="Step 3.3.3" stage="pending" />
+            </Step>
+          </Step>
+        </SteppedTracker>
+      </StackLayout>
+    );
+  }
+  ```
+
+  The `SteppedTracker` component is a purely presentational component, meaning that you need to manage the state of the steps yourself. That however becomes tricky when dealing with nested steps. This is where the `useStepReducer()` hook comes in. It is a custom hook that helps you manage the state of a `SteppedTracker` component with nested steps with ease. It has a built-in algorithm that determines the stage of all steps above and below the active step. All you need to do is add `stage: 'active'` to the desired step (see `step-3-3` in the hook example below), the hook will figure out the rest. This is what we call `autoStage`.
+
+  Migrating from the previous SteppedTracker API
+
+  Before:
+
+  ```tsx
+  function Before() {
+    return (
+      <SteppedTracker activeStep={0}>
+        <TrackerStep>
+          <StepLabel>Step One</StepLabel>
+        </TrackerStep>
+        <TrackerStep>
+          <StepLabel>Step Two</StepLabel>
+        </TrackerStep>
+        <TrackerStep>
+          <StepLabel>Step Three</StepLabel>
+        </TrackerStep>
+        <TrackerStep>
+          <StepLabel>Step Four</StepLabel>
+        </TrackerStep>
+      </SteppedTracker>
+    );
+  }
+  ```
+
+  After:
+
+  ```tsx
+  function After() {
+    return (
+      <SteppedTracker>
+        <Step label="Step One" stage="active" />
+        <Step label="Step Two" />
+        <Step label="Step Three" />
+        <Step label="Step Four" />
+      </SteppedTracker>
+    );
+  }
+  ```
+
+  Before:
+
+  ```tsx
+  function Before() {
+    return (
+      <SteppedTracker orientation="vertical" activeStep={8}>
+        <TrackerStep stage="completed">
+          <StepLabel>Step 1</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="completed">
+          <StepLabel>Step 1.1</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="completed">
+          <StepLabel>Step 1.2</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="completed">
+          <StepLabel>Step 1.3</StepLabel>
+        </TrackerStep>
+        <TrackerStep stage="completed">
+          <StepLabel>Step 2</StepLabel>
+        </TrackerStep>
+        <TrackerStep stage="inprogress">
+          <StepLabel>Step 3</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="completed">
+          <StepLabel>Step 3.1</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="completed">
+          <StepLabel>Step 3.2</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1} stage="inprogress">
+          <StepLabel>Step 3.3</StepLabel>
+        </TrackerStep>
+        <TrackerStep depth={1}>
+          <StepLabel>Step 3.4</StepLabel>
+        </TrackerStep>
+        <TrackerStep>
+          <StepLabel>Step 4</StepLabel>
+        </TrackerStep>
+      </SteppedTracker>
+    );
+  }
+  ```
+
+  After
+
+  ```tsx
+  function After() {
+    return (
+      <SteppedTracker orientation="vertical">
+        <Step label="Step 1" stage="completed">
+          <Step label="Step 1.1" stage="completed" />
+          <Step label="Step 1.2" stage="completed" />
+          <Step label="Step 1.3" stage="completed" />
+        </Step>
+        <Step label="Step 2" stage="completed" />
+        <Step label="Step 3" stage="inprogress">
+          <Step label="Step 3.1" stage="completed" />
+          <Step label="Step 3.2" stage="completed" />
+          <Step label="Step 3.3" stage="active" />
+          <Step label="Step 3.3" />
+        </Step>
+        <Step label="Step 4" />
+      </SteppedTracker>
+    );
+  }
+  ```
+
+  or you can utilize the hook for nested scenarios, such as the one above
+
+  ```tsx
+  import { Step, SteppedTracker, useStepReducer } from "@salt-ds/lab";
+
+  export function AfterWithHook() {
+    const [state, dispatch] = useStepReducer([
+      {
+        key: "step-1",
+        label: "Step 1",
+        substeps: [
+          { key: "step-1-1", label: "Step 1.1" },
+          { key: "step-1-2", label: "Step 1.2" },
+          { key: "step-1-3", label: "Step 1.3" },
+        ],
+      },
+      { key: "step-2", label: "Step 2" },
+      {
+        key: "step-3",
+        label: "Step 3",
+        substeps: [
+          { key: "step-3-1", label: "Step 3.1" },
+          { key: "step-3-2", label: "Step 3.2" },
+          { key: "step-3-3", label: "Step 3.3", stage: "active" },
+          { key: "step-3-4", label: "Step 3.4" },
+        ],
+      },
+      { key: "step-4", label: "Step 4" },
+    ]);
+
+    return (
+      <StackLayout style={{ width: 240 }}>
+        <SteppedTracker orientation="vertical">
+          {state.steps.map((step) => (
+            <Step key={step.key || step.id} {...step} />
+          ))}
+        </SteppedTracker>
+      </StackLayout>
+    );
+  }
+  ```
+
+- Updated dependencies [86d2a28]
+- Updated dependencies [dedbade]
+- Updated dependencies [0a5b68b]
+- Updated dependencies [cd98ba5]
+- Updated dependencies [bfea9b3]
+  - @salt-ds/core@1.38.0
+  - @salt-ds/icons@1.13.1
+
 ## 1.0.0-alpha.57
 
 ### Patch Changes

package/css/salt-lab.css

@@ -2518,55 +2518,49 @@
 }
 
 /* src/skip-link/SkipLink.css */
-.saltSkipLink {
-  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));
-  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));
-  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));
-  --skipLink-color: var(--saltSkipLink-color, var(--salt-content-primary-foreground));
-}
-.saltSkipLink {
-  --saltLink-color-focus: var(--skipLink-color);
-}
-.saltSkipLink-target {
-  --skipLink-target-focus: var(--salt-focused-outline);
-}
 .saltSkipLink {
   top: 0;
   left: 0;
+  opacity: 0;
   width: 1px;
   height: 1px;
-  display: block;
-  opacity: 0;
+  margin: 0;
+  padding: 0;
   overflow: hidden;
   position: absolute;
+  color: var(--salt-content-primary-foreground);
+  letter-spacing: var(--salt-text-letterSpacing);
+  text-decoration: var(--salt-navigable-textDecoration);
+  font-family: var(--salt-text-fontFamily);
+  white-space: nowrap;
+  background: var(--saltSkipLink-background, var(--salt-container-primary-background));
+  z-index: calc(var(--salt-zIndex-appHeader) + 1);
 }
 .saltSkipLink:focus {
   opacity: 1;
   width: auto;
-  height: auto;
-  white-space: nowrap;
-  margin: var(--skipLink-margin);
-  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);
-  background: var(--skipLink-background);
-  color: var(--skipLink-color);
-  box-shadow: var(--salt-overlayable-shadow-popout);
+  height: max(var(--salt-size-base), auto);
+  padding: var(--salt-spacing-100) var(--salt-spacing-300);
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
+  box-shadow: var(--salt-overlayable-shadow);
 }
-.saltSkipLink {
-  font-size: var(--salt-text-fontSize);
-  font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));
-  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));
+@keyframes fade-out-back-outline {
+  0% {
+    outline-color: var(--salt-focused-outlineColor);
+  }
+  100% {
+    outline-color: transparent;
+  }
 }
 .saltSkipLink-target {
-  outline: var(--skipLink-target-focus);
+  animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;
+  outline: var(--salt-focused-outline);
 }
-
-/* src/skip-link/SkipLinks.css */
-.saltSkipLinks {
-  position: relative;
-  float: left;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+@media (prefers-reduced-motion: reduce) {
+  .saltSkipLink-target {
+    animation: none;
+  }
 }
 
 /* src/slider/Slider.css */
@@ -2720,21 +2714,202 @@
   letter-spacing: var(--salt-text-letterSpacing);
 }
 
+/* src/stepped-tracker/Step.Connector.css */
+.saltStepConnector {
+  grid-area: connector;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  transition-property: opacity, min-height;
+}
+.saltSteppedTracker-horizontal .saltStepConnector {
+  position: absolute;
+  transform: translateY(-100%);
+  top: calc(var(--step-icon-size) / 2);
+  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
+  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
+  border-top-width: var(--salt-size-border-strong);
+  border-top-style: var(--salt-track-borderStyle-incomplete);
+  border-top-color: var(--salt-track-borderColor);
+}
+.saltSteppedTracker-horizontal .saltStep-stage-completed > .saltStepConnector,
+.saltSteppedTracker-horizontal .saltStep-stage-inprogress > .saltStepConnector {
+  border-top-style: var(--salt-track-borderStyle-complete);
+}
+.saltSteppedTracker-vertical .saltStepConnector {
+  min-height: var(--salt-size-base);
+  align-self: stretch;
+  justify-self: center;
+  border-left-width: var(--salt-size-border-strong);
+  border-left-style: var(--salt-track-borderStyle-incomplete);
+  border-left-color: var(--salt-track-borderColor);
+}
+.saltSteppedTracker-vertical .saltStep-stage-completed > .saltStepConnector,
+.saltSteppedTracker-vertical .saltStep-stage-inprogress > .saltStepConnector {
+  border-left-style: var(--salt-track-borderStyle-complete);
+}
+.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {
+  opacity: 0;
+  min-height: 0;
+}
+.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {
+  opacity: 0;
+  min-height: 0;
+}
+
+/* src/stepped-tracker/Step.Description.css */
+.saltStepDescription {
+  grid-area: description;
+}
+.saltSteppedTracker-vertical .saltStepDescription {
+  padding-bottom: var(--salt-spacing-300);
+  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
+}
+.saltStep-status-warning > .saltStepDescription {
+  color: var(--salt-status-warning-foreground-informative);
+}
+.saltStep-status-error > .saltStepDescription {
+  color: var(--salt-status-error-foreground-informative);
+}
+
+/* src/stepped-tracker/Step.ExpandTrigger.css */
+.saltStepExpandTrigger {
+  grid-area: expand;
+}
+.saltButton.saltStepExpandTrigger:focus-visible {
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
+}
+
+/* src/stepped-tracker/Step.Icon.css */
+.saltStepIcon {
+  grid-area: icon;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-self: center;
+}
+.saltSteppedTracker-vertical .saltStepIcon {
+  height: var(--salt-size-base);
+}
+.saltStep-stage-pending > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-static-foreground);
+}
+.saltStep-stage-locked > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-static-foreground);
+}
+.saltStep-stage-inprogress > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-info-foreground-decorative);
+}
+.saltStep-stage-active > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-info-foreground-decorative);
+}
+.saltStep-stage-completed > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-success-foreground-decorative);
+}
+.saltStep-status-warning > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-warning-foreground-decorative);
+}
+.saltStep-status-error > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-error-foreground-decorative);
+}
+
+/* src/stepped-tracker/Step.Label.css */
+.saltStepLabel {
+  grid-area: label;
+}
+.saltSteppedTracker-horizontal .saltStepLabel {
+  margin-top: var(--salt-spacing-50);
+}
+.saltSteppedTracker-vertical .saltStepLabel {
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
+  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
+  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
+}
+.saltStep-depth-0 > .saltText.saltStepLabel {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+
+/* src/stepped-tracker/Step.SROnly.css */
+.saltStepSROnly {
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: translate(-100%, -100%);
+}
+
+/* src/stepped-tracker/Step.css */
+.saltStep {
+  --step-icon-base-size: var(--salt-size-icon, 12px);
+  --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);
+  --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));
+  --step-depth: var(--saltStep-depth, 0);
+}
+.saltSteppedTracker-horizontal .saltStep {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, min-content);
+  grid-template-areas: "icon" "label" "description";
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+  padding: 0 var(--salt-spacing-25);
+}
+.saltSteppedTracker-vertical .saltStep {
+  display: grid;
+  grid-template-columns: var(--step-icon-size) 1fr min-content;
+  grid-template-areas: "icon            label           expand" "connector       description     ." "stepped-tracker stepped-tracker stepped-tracker";
+  justify-items: start;
+  align-items: start;
+  gap: 0 var(--salt-spacing-100);
+  width: 100%;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  transition-property: grid-template-rows;
+}
+.saltSteppedTracker-vertical .saltStep-terminal {
+  grid-template-areas: "icon            label           label" "connector       description     description" "stepped-tracker stepped-tracker stepped-tracker";
+}
+.saltSteppedTracker-vertical > .saltStep.saltStep-expanded {
+  grid-template-rows: var(--salt-size-base) min-content 1fr;
+}
+.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed {
+  grid-template-rows: var(--salt-size-base) min-content 0fr;
+}
+
 /* src/stepped-tracker/SteppedTracker.css */
 .saltSteppedTracker {
+  grid-area: stepped-tracker;
+  width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
-  text-indent: 0;
   list-style-type: none;
-  display: flex;
-  width: 100%;
-  position: relative;
+  transition-duration: var(--salt-duration-perceptible);
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, visibility;
+}
+@media (prefers-reduced-motion) {
+  .saltSteppedTracker {
+    transition-duration: var(--salt-duration-instant);
+  }
 }
-.saltSteppedTracker.saltSteppedTracker-horizontal {
+.saltSteppedTracker-horizontal {
+  display: flex;
   flex-direction: row;
 }
-.saltSteppedTracker.saltSteppedTracker-vertical {
+.saltSteppedTracker-vertical {
+  display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+.saltSteppedTracker-vertical > .saltStep.saltStep-expanded > .saltSteppedTracker {
+  opacity: 1;
+  visibility: visible;
+}
+.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed > .saltSteppedTracker {
+  opacity: 0;
+  visibility: hidden;
 }
 
 /* src/stepper-input/StepperInput.css */
@@ -4372,108 +4547,6 @@
   font-weight: 700;
 }
 
-/* src/stepped-tracker/StepLabel/StepLabel.css */
-.saltStepLabel {
-  width: 100%;
-}
-.saltSteppedTracker.saltSteppedTracker-horizontal .saltStepLabel {
-  text-align: center;
-}
-.saltSteppedTracker.saltSteppedTracker-vertical .saltStepLabel {
-  text-align: left;
-}
-
-/* src/stepped-tracker/TrackerConnector/TrackerConnector.css */
-.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-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);
-}
-.saltTrackerConnector {
-  position: absolute;
-}
-.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {
-  border-top-width: var(--trackerConnector-thickness);
-  border-top-style: var(--trackerConnector-style-border);
-  border-top-color: var(--trackerConnector-color);
-  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
-  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
-  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));
-  height: 0;
-}
-.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {
-  top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
-  left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));
-  height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
-  border-left-width: var(--trackerConnector-thickness);
-  border-left-style: var(--trackerConnector-style-border);
-  border-left-color: var(--trackerConnector-color);
-}
-.saltTrackerConnector.saltTrackerConnector-active {
-  --trackerConnector-style-border: var(--trackerConnector-style-active);
-}
-
-/* src/stepped-tracker/TrackerStep/TrackerStep.css */
-.saltTrackerStep {
-  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));
-  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));
-  --trackerStep-icon-color-warning: var(--saltTrackerStep-icon-color-warning, var(--salt-status-warning-foreground-decorative));
-  --trackerStep-icon-color-error: var(--saltTrackerStep-icon-color-error, var(--salt-status-error-foreground-decorative));
-  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));
-  --saltIcon-color: var(--trackerStep-icon-color);
-  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));
-}
-.saltTrackerStep {
-  margin: 0;
-  text-indent: 0;
-  list-style-type: none;
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: var(--saltTrackerStep-width, 100%);
-  gap: var(--salt-spacing-50);
-  color: var(--salt-content-primary-foreground);
-  font-size: var(--salt-text-label-fontSize);
-  line-height: var(--salt-text-label-lineHeight);
-}
-.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {
-  flex-direction: column;
-  padding: 0 var(--salt-spacing-25);
-}
-.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {
-  flex-direction: row;
-  min-height: calc(var(--salt-size-base) * 2);
-  width: 100%;
-}
-.saltTrackerStep:focus-visible {
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-}
-.saltTrackerStep .saltTrackerStep-body {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.saltTrackerStep.saltTrackerStep-status-warning {
-  --trackerStep-icon-color: var(--trackerStep-icon-color-warning);
-}
-.saltTrackerStep.saltTrackerStep-status-error {
-  --trackerStep-icon-color: var(--trackerStep-icon-color-error);
-}
-.saltTrackerStep.saltTrackerStep-active {
-  --trackerStep-icon-color: var(--trackerStep-icon-color-active);
-}
-.saltTrackerStep.saltTrackerStep-stage-completed {
-  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);
-}
-
 /* src/tabs/drag-drop/Draggable.css */
 .saltDraggable {
   background: transparent;
@@ -4569,4 +4642,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/ed092e1f-b9df-46b0-8077-975db17781fb.css */
+/* src/c5418088-c5e4-4ec2-81ea-2a7cd7cdba69.css */

package/dist-cjs/date-picker/DatePicker.js

@@ -50,14 +50,15 @@ const DatePickerMain = react.forwardRef(
   }
 );
 const DatePicker = react.forwardRef(function DatePicker2(props, ref) {
-  const { open, defaultOpen, onOpen, ...rest } = props;
+  const { open, defaultOpen, onOpen, readOnly, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     DatePickerOverlayProvider.DatePickerOverlayProvider,
     {
       open,
       defaultOpen,
       onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerMain, { ...rest, ref })
+      readOnly,
+      children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerMain, { ...rest, readOnly, ref })
     }
   );
 });