@salt-ds/lab 1.0.0-alpha.33 → 1.0.0-alpha.35

package/css/salt-lab.css

@@ -196,6 +196,8 @@
 /* src/calendar/Calendar.css */
 .saltCalendar {
   width: min-content;
+  background: var(--salt-container-primary-background);
+  padding: var(--salt-spacing-100);
 }
 
 /* src/carousel/Carousel.css */
@@ -849,261 +851,6 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
-/* 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;
-}
-.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/DialogTitle.css */
-.saltDialogTitle {
-  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;
-}
-.saltDialogTitle-title {
-  margin: 0;
-}
-.saltDialogTitle .saltStatusIndicator.saltIcon {
-  --icon-size: var(--salt-text-h2-lineHeight);
-}
-.saltDialogTitle-withAccent {
-  position: relative;
-}
-.saltDialogTitle-withAccent::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: var(--salt-spacing-100);
-  width: var(--salt-size-accent);
-  background: var(--salt-accent-background);
-}
-.saltDialogTitle-error::before {
-  background: var(--salt-status-error-borderColor);
-}
-.saltDialogTitle-info::before {
-  background: var(--salt-status-info-borderColor);
-}
-.saltDialogTitle-success::before {
-  background: var(--salt-status-success-borderColor);
-}
-.saltDialogTitle-warning::before {
-  background: var(--salt-status-warning-borderColor);
-}
-
-/* src/drawer/Drawer.css */
-.saltDrawer {
-  background: var(--drawer-background);
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: auto;
-  padding: var(--salt-spacing-300);
-  box-shadow: var(--salt-overlayable-shadow-modal);
-  z-index: var(--salt-zIndex-drawer);
-  position: fixed;
-  top: 0;
-  box-sizing: border-box;
-}
-.saltDrawer-primary {
-  --drawer-background: var(--salt-container-primary-background);
-}
-.saltDrawer-secondary {
-  --drawer-background: var(--salt-container-secondary-background);
-}
-.saltDrawer-top {
-  left: 0;
-  right: 0;
-  bottom: auto;
-}
-.saltDrawer-top.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-bottom);
-}
-.saltDrawer-top.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-bottom);
-}
-.saltDrawer-right {
-  left: auto;
-  right: 0;
-  height: 100%;
-}
-.saltDrawer-right.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-right);
-}
-.saltDrawer-right.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-right);
-}
-.saltDrawer-left {
-  left: 0;
-  right: auto;
-  height: 100%;
-}
-.saltDrawer-left.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-left);
-}
-.saltDrawer-left.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-left);
-}
-.saltDrawer-bottom {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: auto;
-}
-.saltDrawer-bottom.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-top);
-}
-.saltDrawer-bottom.saltDrawer-exitAnimation {
-  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;
@@ -2407,6 +2154,7 @@
 }
 .saltOption[aria-disabled=true] {
   color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
 }
 
 /* src/option/OptionGroup.css */
@@ -2455,6 +2203,7 @@
   border-color: var(--overlay-borderColor);
   border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
   border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
   background: var(--overlay-background);
   box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
   color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
@@ -2462,17 +2211,9 @@
   width: max-content;
 }
 .saltOverlayPanelBase-container {
-  animation: fade-in var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-fade-in-center);
   position: relative;
 }
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .saltOverlayPanelBase-content {
   overflow: auto;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));
@@ -3320,6 +3061,11 @@
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
 }
+.saltTabstripNext-container {
+  display: inherit;
+  width: 100%;
+  position: relative;
+}
 .saltTabstripNext-main {
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
@@ -4056,137 +3802,95 @@
 .saltCalendarCarousel-track > :nth-child(2) {
   position: relative;
 }
-.saltCalendarCarousel-shouldAnimate {
-  transition: transform 200ms ease-in-out;
-}
 
 /* src/calendar/internal/CalendarDay.css */
 .saltCalendarDay {
-  --calendar-day-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-background: var(--salt-selectable-background);
-  --calendar-day-background-hover: var(--salt-selectable-background-hover);
-  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);
-  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);
-  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);
-  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);
-  --calendar-day-blocked-background: var(--calendar-day-background);
-  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);
-  --calendar-day-unselectable-background: var(--calendar-day-background);
-  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);
-  --calendar-day-selected-background: var(--salt-selectable-background-selected);
-  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);
-  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);
-  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);
-  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);
-  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);
-  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground);
-  --calendar-day-focused-outline: var(--salt-focused-outline);
-  --calendar-day-size: var(--salt-size-base);
-  --calendar-day-fontSize: var(--salt-text-fontSize);
-}
-.saltCalendarDay {
-  width: var(--calendar-day-size);
-  height: var(--calendar-day-size);
-  color: var(--calendar-day-text-color);
-  background-color: var(--calendar-day-background);
-  font-size: var(--calendar-day-fontSize);
-  border: 0;
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
   cursor: pointer;
-  position: relative;
+  border: none;
+  padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+.saltCalendarDay-content {
+  margin: 0 var(--salt-spacing-50);
+  width: 100%;
 }
 .saltCalendarDay:focus-visible {
-  outline: var(--calendar-day-focused-outline);
+  outline: var(--salt-focused-outline);
   outline-offset: calc(0px - var(--salt-focused-outlineWidth));
 }
 .saltCalendarDay-outOfRange {
-  color: var(--calendar-day-outOfRange-text-color);
-}
-.saltCalendarDay:hover {
-  background: var(--calendar-day-background-hover);
-  color: var(--calendar-day-text-color-hover);
-}
-.saltCalendarDay-unselectableMedium,
-.saltCalendarDay-unselectableMedium:hover {
-  color: var(--calendar-day-blocked-text-color);
-  cursor: var(--calendar-day-blocked-cursor);
-  background: var(--calendar-day-blocked-background);
-}
-.saltCalendarDay-today {
-  border: 1px solid var(--calendar-day-currentDay-borderColor);
-}
-.saltCalendarDay-selectedSpan {
-  background: var(--calendar-day-selectedSpan-background);
-  color: var(--calendar-day-selectedSpan-text-color);
-}
-.saltCalendarDay-hoveredSpan,
-.saltCalendarDay-hoveredSpan:hover {
-  background: var(--calendar-day-hoveredSpan-background);
-  color: var(--calendar-day-hoveredSpan-text-color);
+  color: var(--salt-content-secondary-foreground);
 }
+.saltCalendarDay:hover,
 .saltCalendarDay-hoveredOffset,
 .saltCalendarDay-hoveredOffset:hover {
-  background: var(--calendar-day-hoveredOffset-background);
-  color: var(--calendar-day-hoveredOffset-text-color);
+  background: var(--salt-selectable-background-hover);
 }
-.saltCalendarDay-selected,
-.saltCalendarDay-selected:hover {
-  background: var(--calendar-day-selected-background);
-  color: var(--calendar-day-selected-text-color);
+.saltCalendarDay-selectedStart {
+  z-index: var(--salt-zIndex-default);
 }
+.saltCalendarDay-selected,
+.saltCalendarDay-selected:hover,
 .saltCalendarDay-selectedStart,
-.saltCalendarDay-selectedStart:hover {
-  background: var(--calendar-day-selectedStart-background);
-  color: var(--calendar-day-selectedStart-text-color);
-}
+.saltCalendarDay-selectedStart:hover,
 .saltCalendarDay-selectedEnd,
 .saltCalendarDay-selectedEnd:hover {
-  background: var(--calendar-day-selectedEnd-background);
-  color: var(--calendar-day-selectedEnd-text-color);
-}
-.saltCalendarDay-selected:focus-visible {
-  outline-color: var(--calendar-day-selected-focused-outlineColor);
-}
-.saltCalendarDay-selectedStart:focus-visible {
-  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);
-}
-.saltCalendarDay-selectedEnd:focus-visible {
-  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);
-}
-.saltCalendarDay-unselectableLow,
-.saltCalendarDay-unselectableLow:hover {
-  color: var(--calendar-day-unselectable-text-color);
-  background: var(--calendar-day-unselectable-background);
-  cursor: var(--calendar-day-unselectable-cursor);
-  text-decoration: line-through;
-}
-.salt-density-high {
-  --calendar-day-blocked-icon-size: 14px;
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);
 }
-.salt-density-medium {
-  --calendar-day-blocked-icon-size: 18px;
+.saltCalendarDay-hoveredSpan,
+.saltCalendarDay-hoveredSpan:hover,
+.saltCalendarDay-selectedSpan,
+.saltCalendarDay-selectedSpan:hover {
+  background: var(--salt-selectable-background-hover);
+  box-shadow:
+    calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
+    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
+    0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
+}
+.saltCalendarDay-disabled,
+.saltCalendarDay-disabled:hover,
+.saltCalendarDay-unselectable,
+.saltCalendarDay-unselectable:hover {
+  background: var(--salt-selectable-background-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
 }
-.salt-density-low {
-  --calendar-day-blocked-icon-size: 24px;
+.saltCalendarDay-highlighted:before {
+  content: "";
+  height: var(--salt-spacing-200);
+  width: var(--salt-spacing-200);
+  top: calc(var(--salt-spacing-100) * -1);
+  right: calc(var(--salt-spacing-100) * -1);
+  transform: rotate(45deg);
+  background: var(--salt-selectable-borderColor-selected);
+  position: absolute;
 }
-.salt-density-touch {
-  --calendar-day-blocked-icon-size: 28px;
+.saltCalendarDay-disabled {
+  color: var(--salt-content-secondary-foreground-disabled);
 }
-.saltCalendarDay-blockedIcon {
-  fill: var(--calendar-day-blocked-icon-color);
+.saltCalendarDay-unselectable:after {
+  content: "";
+  height: var(--salt-size-border);
+  width: calc(100% - var(--salt-spacing-100));
+  background: var(--salt-content-secondary-foreground);
   position: absolute;
-  --icon-size: var(--calendar-day-blocked-icon-size);
-  pointer-events: none;
-  line-height: 1.29;
+}
+.saltCalendarDay-today,
+.saltCalendarDay-today:hover {
+  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);
+  margin-bottom: calc(var(--salt-size-indicator) * -1);
 }
 .saltCalendarDay-hidden {
   visibility: hidden;
@@ -4195,50 +3899,49 @@
 /* src/calendar/internal/CalendarMonth.css */
 .saltCalendarMonth-dateGrid {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
+  grid-template-rows: repeat(6, var(--salt-size-base));
   text-align: center;
+  margin: var(--salt-size-border);
 }
 
 /* src/calendar/internal/CalendarNavigation.css */
-.salt-density-medium,
-.salt-density-touch,
-.salt-density-low {
-  --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);
-}
-.salt-density-high {
-  --calendar-navigation-gap: 0px;
-}
-.saltCalendarNavigation-hideYearDropdown {
-  --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);
-}
 .saltCalendarNavigation {
   display: grid;
-  grid-template-columns: min-content auto auto min-content;
-  grid-gap: var(--calendar-navigation-gap);
+  grid-template-columns: min-content auto min-content;
+  padding-bottom: var(--salt-spacing-100);
+  grid-gap: 0;
+  align-items: center;
+  height: var(--salt-size-base);
 }
 .saltCalendarNavigation-hideYearDropdown {
   grid-template-columns: min-content auto min-content;
+  grid-gap: var(--salt-spacing-300);
+}
+.saltCalendarNavigation-dropdowns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--salt-spacing-100);
 }
 
 /* src/calendar/internal/CalendarWeekHeader.css */
-.saltCalendarWeekHeader {
-  --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);
-  --calendar-week-header-text-color: var(--salt-content-secondary-foreground);
-  --calendar-week-header-size: var(--salt-size-base);
-  --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));
-}
 .saltCalendarWeekHeader {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
   text-align: center;
-  box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);
+  align-items: center;
+  height: var(--salt-size-base);
+  margin: var(--salt-size-border);
 }
 .saltCalendarWeekHeader-dayOfWeek {
-  width: var(--calendar-week-header-size);
-  height: var(--calendar-week-header-size);
-  color: var(--calendar-week-header-text-color);
-  line-height: var(--calendar-week-header-size);
-  font-size: var(--calendar-week-header-fontSize);
+  width: var(--salt-size-base);
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
 }
 
 /* src/list-deprecated/internal/Highlighter.css */
@@ -4436,4 +4139,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/00f2fde8-73d7-4e9d-b591-059001f044c9.css */
+/* src/f96ec07e-dc55-4df2-91fd-46b77d4db9c0.css */

package/dist-cjs/calendar/Calendar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCalendar {\n  width: min-content;\n}\n";
+var css_248z = ".saltCalendar {\n  width: min-content;\n  background: var(--salt-container-primary-background);\n  padding: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Calendar.css.js.map

package/dist-cjs/calendar/internal/CalendarCarousel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n\n.saltCalendarCarousel-shouldAnimate {\n  transition: transform 200ms ease-in-out;\n}\n";
+var css_248z = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarCarousel.css.js.map

package/dist-cjs/calendar/internal/CalendarCarousel.js

@@ -10,20 +10,16 @@ var core = require('@salt-ds/core');
 var CalendarContext = require('./CalendarContext.js');
 var CalendarCarousel$1 = require('./CalendarCarousel.css.js');
 var utils = require('./utils.js');
-var window$1 = require('@salt-ds/window');
+var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 
 function getMonths(month) {
   return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
 }
-function usePreviousMonth(visibleMonth) {
-  const previous = core.usePrevious(visibleMonth, [utils.formatDate(visibleMonth)]);
-  return previous != null ? previous : date.today(date.getLocalTimeZone());
-}
 const withBaseName = core.makePrefixer("saltCalendarCarousel");
 const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref) {
   const { ...rest } = props;
-  const targetWindow = window$1.useWindow();
+  const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-calendar-carousel",
     css: CalendarCarousel$1,
@@ -35,18 +31,9 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
   const containerRef = React.useRef(null);
   const diffIndex = (a, b) => utils.monthDiff(a, b);
   const { current: baseIndex } = React.useRef(visibleMonth);
-  const previousVisibleMonth = usePreviousMonth(visibleMonth);
-  core.useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
-      (_a = containerRef.current) == null ? void 0 : _a.classList.remove(withBaseName("shouldAnimate"));
-    } else {
-      (_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName("shouldAnimate"));
-    }
-  }, [utils.formatDate(visibleMonth), utils.formatDate(previousVisibleMonth)]);
   core.useIsomorphicLayoutEffect(() => {
     if (containerRef.current) {
-      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
+      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
     }
   });
   const [months, setMonths] = React.useState(() => getMonths(visibleMonth));
@@ -57,18 +44,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
       });
       return oldMonths.concat(newMonths);
     });
-    const finishTransition = () => {
-      setMonths(getMonths(visibleMonth));
-    };
-    const container = containerRef.current;
-    if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
-      container == null ? void 0 : container.addEventListener("transitionend", finishTransition);
-      return () => {
-        container == null ? void 0 : container.removeEventListener("transitionend", finishTransition);
-      };
-    } else {
-      finishTransition();
-    }
+    setMonths(getMonths(visibleMonth));
     return void 0;
   }, [utils.formatDate(visibleMonth)]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -84,7 +60,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
       children: months.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: withBaseName("slide"),
         style: {
-          transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
+          transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
         },
         "aria-hidden": index !== 1 ? "true" : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, {