@salt-ds/lab 1.0.0-alpha.66 → 1.0.0-alpha.68

package/CHANGELOG.md

@@ -1,5 +1,189 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.68
+
+### Minor Changes
+
+- 4a240fd: - Removed `Splitter` component from labs, replaced with `@salt-ds/react-resizable-panels-theme` package.
+
+### Patch Changes
+
+- 1a50f7b: - `DatePickerSinglePanel` has been deprecated, use `DatePickerSingleGridPanel` instead.
+
+  - `DatePickerSinglePanel` has been renamed to `DatePickerSingleGridPanel` to align the naming with `DatePickerRangeGridPanel`. This component now provides up to 12 `Calendars` within a panel via the `numberOfVisibleMonths` and `columns` props, enabling multi-month date selection (defaults to 1 visible calendar).
+
+  ```
+  <DatePicker
+    selectionVariant="single"
+  >
+    <DatePickerTrigger>
+      <DatePickerSingleInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerSingleGridPanel numberOfVisibleMonths={12} columns={3} />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  - `DatePickerRangeGridPanel` has been added. It provides up to 12 Calendars within a panel via the `numberOfVisibleMonths` and `columns` props, enabling multi-month date range selection (defaults to 2 visible calendars and 2 columns).
+
+  ```
+  <DatePicker
+    selectionVariant="range"
+  >
+    <DatePickerTrigger>
+      <DatePickerRangeInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerRangeGridPanel numberOfVisibleMonths={12} columns={3} />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  Note: `DatePickerRangePanel` remains unchanged and provides a dual `Calendar` date view, with individual month/year dropdowns for the start and end date range.
+
+  - `CalendarWeekHeader` is now rendered by `CalendarGrid` and can be customized using the `CalendarWeekHeaderProps` prop. If you currently use `CalendarWeekHeader`, you may see two day of week headers, so delete the version from your code.
+  - `CalendarMonthHeader` is now rendered by `CalendarGrid` and can be customized using the `CalendarMonthHeaderProps` prop.
+  - A new `CalendarMonthHeader` component has been added, used by `CalendarGrid` to display a multi-month grid of `Calendar` components.
+  - `DatePickerRangePanel` props `StartCalendarWeekHeaderProps` and `EndCalendarWeekHeaderProps` removed.
+    Pass props to `CalendarWeekHeader` using `StartCalendarGridProps -> CalendarWeekHeaderProps` and `EndCalendarGridProps -> CalendarWeekHeaderProps`.
+
+  ```
+  <DatePicker
+    selectionVariant="range"
+  >
+    <DatePickerTrigger>
+      <DatePickerRangeInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerRangePanel
+       StartCalendarGridProps={{ CalendarWeekHeaderProps: { "data-test-id" : "some value" }}}
+       EndCalendarGridProps={{ CalendarWeekHeaderProps: { "data-test-id" : "some value" }}}
+       />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  - `DatePicker` now supports `isDayDisabled`, `isDayUnselectable`, and `isDayHighlighted` props, rather than providing them through the `Calendar` props.
+  - The `DatePickerOverlayProvider` prop `onOpenChange` has changed signature and `event` has been removed, to create a consistent API with other components.
+
+  ```diff
+  - onOpenChange?: ( newOpen: boolean, event?: Event, reason?: DatePickerOpenChangeReason) => void;
+  + onOpenChange?: ( newOpen: boolean, reason?: DatePickerOpenChangeReason) => void;
+  ```
+
+  - DatePicker helper text simplified and resizing bug fixed
+
+  In our DatePicker examples, we demonstrate how to include helper text when using a DatePicker within a FormField.
+  The design requires the helper text to move inside the panel when the DatePicker is opened.
+  However, this caused a resizing issue with the original date input.
+
+  To resolve this, we have refactored the implementation by introducing a `DatePickerHelperText` component.
+  This component is used as a child of the `DatePicker`, streamlining the process and removing the need for users to manage the visibility of the helper text themselves.
+
+  ```diff
+  - <FormField validationStatus={validationStatus}>
+  -   <FormLabel>Select a date</FormLabel>
+  -   <DatePicker
+  -     selectionVariant={"single"}
+  -   >
+  -     <DatePickerTrigger>
+  -       <DatePickerSingleInput />
+  -     </DatePickerTrigger>
+  -     <DatePickerOverlay>
+  -       <DatePickerSingleGridPanel
+  -         helperText={helperText}
+  -       />
+  -       <DatePickerHelperText>{helperText}</DatePickerHelperText>
+  -     </DatePickerOverlay>
+  -   </DatePicker>
+  -   {!open ? <FormHelperText>{helperText}</FormHelperText> : null}
+  - </FormField>
+  + <FormField validationStatus={validationStatus}>
+  +   <FormLabel>Select a date</FormLabel>
+  +   <DatePicker
+  +     selectionVariant={"single"}
+  +   >
+  +     <DatePickerTrigger>
+  +       <DatePickerSingleInput />
+  +     </DatePickerTrigger>
+  +     <DatePickerOverlay>
+  +       <DatePickerSingleGridPanel
+  +         helperText={helperText}
+  +       />
+  +     </DatePickerOverlay>
+  +     <DatePickerHelperText>{helperText}</DatePickerHelperText>
+  +   </DatePicker>
+  + </FormField>
+  ```
+
+  - Added `useFocusOut` floating-ui middleware to close the overlay upon focus out.
+  - Fixed a bug where the change event was triggered by blur when the entered date had not changed.
+  - Fixed the styling of disabled and unselectable days, which previously used the same style.
+  - Fixed invalid date ranges so they do not render as selected.
+  - Fixed a bug for helper text to ensure it wraps during overflow.
+  - Timezone prop added to date components, `DatePicker`, `DatePickerSingleInput`, `DatePickerRangeInput`, `DateInputSingle`, `DateInputRange`, `Calendar`.
+    The `timezone` prop defines the timezone for the date components, when working with dates and times, it is important to ensure that the correct timezone is applied to avoid confusion and errors.
+    If not working with times, the timezone can still affect the date displayed, as the date may be interpreted in a different timezone than intended.
+    For this reason, when working with dates, it is recommended to always set the timezone to ensure that the date is displayed correctly.
+    "UTC" is a cross-platform standard and is the most common timezone used in programming but may require you to convert to your local timezone for display purposes.
+    If `timezone` is not set the timezone will be defined by the default behaviour of your configured date framework.
+    The `timezone` prop can be set to one of the following values:
+  - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate` or "default" if no date is defined.
+  - If set to "default", the default timezone of the date library will be used.
+  - If set to "system", the local system's timezone will be applied.
+  - If set to "UTC", the time will be returned in UTC.
+  - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+    Timezone is not supported by v3 of `date-fns`, so if you are using `date-fns` v3, the timezone will be set to "default" by default. If you require timezone support, use a date framework such as `luxon` or `dayjs`.
+  - `Calendar` previously could render custom contents but did not provide a way to change the highlight styles, so `renderDayContents` has been replaced with `render`, passed through `CalendarDayProps`.
+
+  ```
+  function renderDayButton({
+    className,
+    date,
+    status,
+    ...rest
+  }: renderCalendarDayProps<DateFrameworkType>): ReactElement {
+    return (
+      <button
+        {...rest}
+        className={clsx([{ buttonWithDot: !status.outOfRange }, className])}
+      >
+        <span className={clsx({ dot: !status.outOfRange })}>
+          {dateAdapter.format(date, "D")}
+        </span>
+        {status.today ? <span className={"today"} /> : null}
+      </button>
+    );
+  }
+
+  return (
+    <Calendar hideOutOfRangeDates {...args}>
+      <CalendarNavigation />
+      <CalendarGrid CalendarDayProps={{ render: renderDayButton }} />
+    </Calendar>
+  );
+  ```
+
+- Updated dependencies [1a50f7b]
+- Updated dependencies [8b4cbfb]
+- Updated dependencies [bbdf4a6]
+- Updated dependencies [ec1736e]
+  - @salt-ds/date-adapters@0.1.0-alpha.4
+  - @salt-ds/core@1.46.0
+
+## 1.0.0-alpha.67
+
+### Minor Changes
+
+- c664e97: - Moved `SteppedTracker` component from labs to core, renamed as `Stepper`.
+
+### Patch Changes
+
+- Updated dependencies [c664e97]
+- Updated dependencies [06232b0]
+  - @salt-ds/core@1.45.0
+
 ## 1.0.0-alpha.66
 
 ### Minor Changes

package/css/salt-lab.css

@@ -213,6 +213,12 @@
   position: relative;
 }
 
+/* src/calendar/CalendarMonthHeader.css */
+.saltCalendarMonthHeader {
+  width: 100%;
+  text-align: center;
+}
+
 /* src/calendar/CalendarNavigation.css */
 .saltCalendarNavigation {
   display: grid;
@@ -1194,6 +1200,15 @@
   margin-left: var(--salt-spacing-100);
 }
 
+/* src/date-picker/DatePickerHelperText.css */
+.saltDatePickerHelperText {
+  visibility: visible;
+  margin-top: var(--salt-spacing-75);
+}
+.saltDatePickerHelperText-open {
+  visibility: hidden;
+}
+
 /* src/date-picker/DatePickerOverlay.css */
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
@@ -1211,6 +1226,7 @@
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -1223,7 +1239,7 @@
   width: min-content;
   gap: 1px;
 }
-.saltDatePickerPanel-header {
+.saltDatePickerPanel-container > .saltDatePickerPanel-header {
   padding: var(--salt-spacing-100);
 }
 
@@ -2773,189 +2789,6 @@
   display: none;
 }
 
-/* src/splitter/SplitHandle.css */
-.saltSplitHandle {
-  --splitHandle-size: var(--salt-size-thickness-400, calc(var(--salt-size-border) * 4));
-  --splitHandle-borderWidth: var(--salt-size-thickness-100, var(--salt-size-border));
-  --splitHandle-borderColor: var(--salt-separable-secondary-borderColor);
-  --splitHandle-borderStyle: var(--salt-separable-borderStyle);
-  --splitHandle-dot-background: var(--salt-separable-foreground);
-  --splitHandle-dot-background-hover: var(--salt-separable-foreground-hover);
-  --splitHandle-dot-background-active: var(--salt-separable-foreground-active);
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-  box-sizing: content-box;
-  background: var(--splitHandle-background);
-}
-.saltSplitHandle-bordered,
-.saltSplitHandle-variant-primary {
-  --splitHandle-background: var(--salt-container-primary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-secondary {
-  --splitHandle-background: var(--salt-container-secondary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-tertiary {
-  --splitHandle-background: var(--salt-container-tertiary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-transparent {
-  --splitHandle-background: var(--salt-separable-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle[data-resize-handle-state=hover] {
-  background: var(--splitHandle-background-hover);
-}
-.saltSplitHandle[data-resize-handle-state=drag] {
-  --splitHandle-background: var(--splitHandle-background-active);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] {
-  flex-direction: column;
-  width: var(--splitHandle-size);
-}
-.saltSplitHandle[data-panel-group-direction=vertical] {
-  flex-direction: row;
-  height: var(--splitHandle-size);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal]::after {
-  content: "";
-  position: absolute;
-  left: -10px;
-  right: -10px;
-  top: 0;
-  bottom: 0;
-}
-.saltSplitHandle[data-panel-group-direction=vertical]::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  bottom: -10px;
-}
-.saltSplitHandle: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);
-}
-.saltSplitHandle-border-top {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: var(--splitHandle-borderColor);
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: transparent;
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-bottom {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: transparent;
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: var(--splitHandle-borderColor);
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-top-bottom {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: var(--splitHandle-borderColor);
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: var(--splitHandle-borderColor);
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-left {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: var(--splitHandle-borderColor);
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: transparent;
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-right {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: transparent;
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: var(--splitHandle-borderColor);
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-left-right {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: var(--splitHandle-borderColor);
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: var(--splitHandle-borderColor);
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=horizontal] {
-  margin-left: -1px;
-}
-.saltSplitHandle[data-panel-group-direction=vertical] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=vertical] {
-  margin-top: -1px;
-}
-@supports selector(:has(*)) {
-  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=horizontal] {
-    margin-left: -1px;
-  }
-  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=vertical] {
-    margin-top: -1px;
-  }
-  .saltSplitHandle-bordered[data-panel-group-direction=horizontal]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
-    margin-right: -1px;
-  }
-  .saltSplitHandle-bordered[data-panel-group-direction=vertical]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
-    margin-bottom: -1px;
-  }
-}
-.saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background);
-}
-.saltSplitHandle[data-resize-handle-state=hover] > .saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background-hover);
-}
-.saltSplitHandle[data-resize-handle-state=drag] > .saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background-active);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] > .saltSplitHandle-dot {
-  width: 2px;
-  height: 1px;
-}
-.saltSplitHandle[data-panel-group-direction=vertical] > .saltSplitHandle-dot {
-  height: 2px;
-  width: 1px;
-}
-
-/* src/splitter/SplitPanel.css */
-.saltSplitPanel {
-  box-sizing: border-box;
-  background: var(--splitPanel-background);
-}
-.saltSplitPanel[data-panel-size="0.0"] {
-  visibility: hidden;
-}
-.saltSplitPanel-primary {
-  --splitPanel-background: var(--salt-container-primary-background);
-}
-.saltSplitPanel-secondary {
-  --splitPanel-background: var(--salt-container-secondary-background);
-}
-.saltSplitPanel-tertiary {
-  --splitPanel-background: var(--salt-container-tertiary-background);
-}
-@supports selector(:has(*)) {
-  .saltSplitPanel:has(.saltSplitPanel) {
-    background: unset;
-  }
-}
-
 /* src/static-list/StaticList.css */
 .saltStaticList {
   overflow-y: auto;
@@ -2987,204 +2820,6 @@
   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;
-  list-style-type: none;
-  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-horizontal {
-  display: flex;
-  flex-direction: row;
-}
-.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/system-status/SystemStatus.css */
 .saltSystemStatus {
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
@@ -4489,7 +4124,8 @@
   margin: 0 var(--salt-spacing-50);
   width: 100%;
 }
-.saltCalendarDay:focus-visible {
+.saltCalendarDay-focused,
+.saltCalendarDay.saltCalendarDay:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(0px - var(--salt-focused-outlineWidth));
 }
@@ -4499,7 +4135,7 @@
 .saltCalendarDay-outOfRange:hover {
   color: var(--salt-content-primary-foreground);
 }
-.saltCalendarDay-outOfRange .saltCalendarDay-today {
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
   border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);
 }
 .saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
@@ -4568,9 +4204,9 @@
   background: var(--salt-content-secondary-foreground);
   position: absolute;
 }
-.saltCalendarDay-today,
-.saltCalendarDay-today:hover,
-.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {
+.saltCalendarDay-today > span:last-of-type,
+.saltCalendarDay-today > span:last-of-type:hover,
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type:hover {
   border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);
   margin-bottom: calc(var(--salt-size-indicator) * -1);
 }
@@ -4692,4 +4328,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/89b851ef-eba4-4203-af10-5eb7e5bfc25b.css */
+/* src/e490f1e6-13bb-414e-a4b0-3d2a81175265.css */

package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n  wrap?: boolean;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext | undefined>(\n  undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n  const context = useContext(BreadcrumbsContext);\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AASO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC,KAAA;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}
+{"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n  wrap?: boolean;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext | undefined>(\n  undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n  const context = useContext(BreadcrumbsContext);\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AASO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}