@salt-ds/lab 1.0.0-alpha.75 → 1.0.0-alpha.77

package/css/salt-lab.css

@@ -195,6 +195,8 @@
 
 /* src/calendar/Calendar.css */
 .saltCalendar {
+  --calendar-gap: var(--salt-spacing-fixed-100);
+  --calendar-day-size: var(--salt-size-base);
   background: var(--salt-container-primary-background);
   padding: var(--salt-spacing-100);
 }
@@ -228,6 +230,9 @@
   align-items: center;
   box-sizing: border-box;
 }
+.saltCalendarNavigation-yearDropdown {
+  min-width: 4.3em;
+}
 .saltCalendarNavigation-hideYearDropdown {
   grid-template-columns: min-content auto min-content;
   grid-gap: var(--salt-spacing-300);
@@ -240,16 +245,14 @@
 
 /* src/calendar/CalendarWeekHeader.css */
 .saltCalendarWeekHeader {
-  display: grid;
-  gap: var(--salt-spacing-fixed-100);
-  grid-template-columns: repeat(7, var(--salt-size-base));
+  display: flex;
   text-align: center;
   align-items: center;
   height: var(--salt-size-base);
-  margin: var(--salt-spacing-fixed-100);
+  gap: var(--calendar-gap);
 }
 .saltCalendarWeekHeader-dayOfWeek {
-  width: var(--salt-size-base);
+  width: var(--calendar-day-size);
   color: var(--salt-content-secondary-foreground);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
@@ -309,28 +312,6 @@
   --list-boxShadow: var(--salt-overlayable-shadow-popout);
 }
 
-/* src/collapsible/CollapsiblePanel.css */
-.saltCollapsiblePanel {
-  display: grid;
-  transition:
-    grid-template-rows var(--salt-duration-perceptible) ease-in-out,
-    opacity var(--salt-duration-perceptible) ease-in-out,
-    visibility var(--salt-duration-perceptible) ease-in-out;
-}
-.saltCollapsiblePanel[aria-hidden=true] {
-  grid-template-rows: 0fr;
-  opacity: 0;
-  visibility: hidden;
-}
-.saltCollapsiblePanel {
-  grid-template-rows: 1fr;
-  opacity: 1;
-  visibility: visible;
-}
-.saltCollapsiblePanel-inner {
-  overflow: hidden;
-}
-
 /* src/color-chooser/ColorChooser.css */
 .saltColorChooser-overlayButtonSwatch {
   margin-right: 10px;
@@ -2798,11 +2779,14 @@
 .saltTable-divider-tertiary {
   --table-divider-color: var(--salt-separable-tertiary-borderColor);
 }
-table.saltTable-zebra-primary tbody tr:nth-of-type(odd) {
+table.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-secondary-background);
+}
+table.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {
   --table-background: var(--salt-container-primary-background);
 }
-table.saltTable-zebra-secondary tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-secondary-background);
+table.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
 }
 table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
   --table-background: var(--salt-container-tertiary-background);
@@ -2827,7 +2811,6 @@ table.saltTable thead {
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   line-height: var(--salt-text-label-lineHeight);
-  white-space: nowrap;
 }
 table.saltTable thead.saltTable-thead-sticky {
   position: sticky;
@@ -2866,7 +2849,6 @@ table.saltTable tfoot {
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
   font-weight: var(--salt-text-fontWeight-strong);
-  white-space: nowrap;
 }
 table.saltTable tfoot.saltTable-tfoot-sticky {
   position: sticky;
@@ -2897,41 +2879,57 @@ table.saltTable tfoot.saltTable-tfoot-divider-none tr {
   --table-footer-divider-color: transparent;
 }
 table.saltTable th {
-  overflow: hidden;
-  padding: var(--salt-spacing-100);
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));
   position: relative;
   text-align: start;
+  vertical-align: top;
+  font-weight: inherit;
+}
+table.saltTable th.saltTable-th-align-left {
+  text-align: start;
 }
-.table.saltTable th[scope=row] {
+table.saltTable th.saltTable-th-align-right {
+  text-align: end;
+}
+table.saltTable tbody th[scope=row] {
   font-weight: var(--salt-text-fontWeight-strong);
   line-height: var(--salt-text-lineHeight);
 }
 table.saltTable th + th::before {
-  --table-th-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
   background: var(--salt-separable-tertiary-borderColor);
   content: "";
   position: absolute;
   z-index: 1;
   display: block;
-  width: var(--salt-size-border);
-  height: var(--table-th-separator-height);
-  top: calc(50% - var(--table-th-separator-height) * 0.5);
+  width: var(--salt-size-fixed-100);
+  height: calc(100% - var(--salt-spacing-200));
   left: 0;
+  top: var(--salt-spacing-100);
 }
 table.saltTable tr {
   background: var(--table-background);
+}
+table.saltTable tbody tr {
   height: var(--table-row-height);
   min-height: var(--table-row-height);
 }
 table.saltTable tbody tr:not(:last-child) {
   border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
 }
-table.saltTable-divider-none tbody tr {
+table.saltTable.saltTable-divider-none tbody tr {
   --table-divider-color: transparent;
 }
 table.saltTable td {
   height: 100%;
-  padding: var(--salt-spacing-100);
+  vertical-align: top;
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+}
+table.saltTable td.saltTable-td-align-left {
+  text-align: start;
+}
+table.saltTable td.saltTable-td-align-right {
+  text-align: end;
 }
 
 /* src/tabs/Tab.css */
@@ -3269,6 +3267,7 @@ table.saltTable td {
   gap: var(--salt-spacing-100);
   max-width: 100%;
   width: 100%;
+  min-width: 0;
 }
 .saltTabListNext-center {
   justify-content: center;
@@ -3307,8 +3306,6 @@ table.saltTable td {
   position: relative;
   flex-shrink: 0;
   box-sizing: border-box;
-  --tabNext-radius: var(--salt-palette-corner-weak, 0);
-  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
   overflow: hidden;
   cursor: var(--salt-cursor-hover);
   color: var(--salt-content-primary-foreground);
@@ -3318,6 +3315,12 @@ table.saltTable td {
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);
   font-size: var(--salt-text-fontSize);
+  max-width: 100%;
+}
+@supports selector(:has(*)) {
+  .saltTabListNext:has([data-overflowbutton]) .saltTabNext {
+    max-width: calc(100% - var(--salt-spacing-100) - var(--salt-size-base));
+  }
 }
 .saltTabNext::after {
   content: "";
@@ -3376,6 +3379,7 @@ table.saltTable td {
   align-items: center;
   justify-content: center;
   flex: 1;
+  overflow: hidden;
 }
 .saltTabNextTrigger::before {
   content: "";
@@ -3431,6 +3435,11 @@ table.saltTable td {
   flex-shrink: 0;
   justify-content: flex-start;
 }
+@supports selector(:has(*)) {
+  .saltTabListNext:has([data-overflowbutton]) .saltTabOverflow-list .saltTabNext {
+    max-width: unset;
+  }
+}
 .saltTabOverflow-list .saltTabNext .saltTabNextTrigger {
   justify-content: start;
 }
@@ -4145,154 +4154,6 @@ table.saltTable td {
   width: 12px;
 }
 
-/* src/vertical-navigation/VerticalNavigation.css */
-.saltVerticalNavigation ol {
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-fixed-100);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  position: relative;
-}
-.saltVerticalNavigationSubMenu > .saltDivider-horizontal,
-.saltVerticalNavigationItem > .saltDivider-horizontal,
-.saltVerticalNavigation ol > .saltDivider-horizontal {
-  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
-}
-.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner {
-  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
-}
-.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
-  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
-}
-.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,
-.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner {
-  margin-bottom: 0;
-}
-.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,
-.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
-  border-bottom: none;
-}
-
-/* src/vertical-navigation/VerticalNavigationItemContent.css */
-.saltVerticalNavigationItemContent {
-  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));
-  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));
-}
-.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {
-  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
-  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);
-}
-.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
-  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
-  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));
-}
-.saltVerticalNavigationItemContent {
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-100);
-  appearance: none;
-  -webkit-appearance: none;
-  white-space: pre;
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  min-width: 4em;
-  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);
-  position: relative;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner-weak, 0);
-  overflow: hidden;
-  cursor: var(--salt-cursor-hover);
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-text-h4-fontWeight);
-  font-family: var(--salt-text-h4-fontFamily);
-  text-align: var(--salt-text-textAlign);
-  letter-spacing: var(--salt-text-letterSpacing);
-  line-height: var(--salt-text-h4-lineHeight);
-  font-size: var(--salt-text-h4-fontSize);
-}
-.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,
-.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {
-  background: var(--salt-navigable-accent-background-active);
-}
-.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {
-  left: var(--salt-spacing-50);
-  content: "";
-  position: absolute;
-  height: var(--salt-size-base);
-  border-radius: var(--salt-palette-corner-strongest);
-  width: var(--salt-size-indicator);
-}
-.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {
-  background: var(--salt-navigable-accent-indicator-active);
-}
-.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
-}
-.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,
-.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {
-  background: var(--salt-navigable-accent-background-active);
-  border-color: var(--salt-navigable-accent-borderColor-active);
-}
-.saltVerticalNavigationItemContent .saltIcon,
-.saltVerticalNavigationItemContent .saltBadge {
-  min-height: var(--salt-text-lineHeight);
-}
-.saltVerticalNavigationItemContent-focused {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-  z-index: 1;
-}
-.saltVerticalNavigationItemContent:hover {
-  background: var(--salt-navigable-background-hover);
-}
-.saltVerticalNavigation .saltVerticalNavigationItemContent-active,
-.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
-  font-weight: var(--salt-text-h4-fontWeight);
-}
-@supports selector(:has(*)) {
-  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
-    background: linear-gradient(var(--salt-navigable-background-hover), var(--salt-navigable-background-hover)) var(--salt-navigable-accent-background-active);
-  }
-}
-
-/* src/vertical-navigation/VerticalNavigationItemLabel.css */
-.saltVerticalNavigationItemLabel {
-  flex: 1;
-}
-
-/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
-.saltVerticalNavigationItemTrigger {
-  all: unset;
-  padding: var(--salt-spacing-75) 0;
-  display: flex;
-  gap: var(--salt-spacing-100);
-  width: 100%;
-}
-.saltVerticalNavigationItemTrigger::before {
-  content: "";
-  display: block;
-  width: 100%;
-  position: absolute;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-
-/* src/vertical-navigation/VerticalNavigationSubMenu.css */
-.saltVerticalNavigationSubMenu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-fixed-100);
-  list-style: none;
-  padding: var(--salt-spacing-fixed-100) 0 0;
-  margin: 0;
-}
-.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
-  font-weight: var(--salt-text-h4-fontWeight-small);
-}
-
 /* src/window/ElectronWindow.css */
 .saltWindow {
   --saltDialog-boxShadow: none;
@@ -4304,7 +4165,21 @@ table.saltTable td {
 }
 
 /* src/calendar/internal/CalendarDay.css */
+.salt-density-touch {
+  --calendar-day-highlight-size: 14px;
+}
+.salt-density-low {
+  --calendar-day-highlight-size: 12px;
+}
+.salt-density-medium {
+  --calendar-day-highlight-size: 10px;
+}
+.salt-density-high {
+  --calendar-day-highlight-size: 8px;
+}
 .saltCalendarDay {
+  --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);
+  --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
@@ -4320,86 +4195,231 @@ table.saltTable td {
   justify-content: center;
   align-items: center;
   position: relative;
-  overflow: hidden;
 }
 .saltCalendarDay-content {
   margin: 0 var(--salt-spacing-50);
   width: 100%;
+  z-index: var(--calendar-day-zIndex-content);
+}
+.saltCalendarDay:hover {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {
+  border-radius: 0;
 }
 .saltCalendarDay-focused,
-.saltCalendarDay.saltCalendarDay:focus-visible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(0px - var(--salt-focused-outlineWidth));
+.saltCalendarDay:focus,
+.saltCalendarDay:focus-visible {
+  outline: none;
+  z-index: var(--calendar-day-zIndex-content);
 }
-.saltCalendarDay-outOfRange {
-  color: var(--salt-content-secondary-foreground);
+.saltCalendarDay-focused:focus-visible::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-outOfRange:hover {
+.saltCalendarDay-selected .saltCalendarDay-content,
+.saltCalendarDay-selected:hover .saltCalendarDay-content,
+.saltCalendarDay-selectedStart .saltCalendarDay-content,
+.saltCalendarDay-hoveredStart .saltCalendarDay-content,
+.saltCalendarDay-selectedSpan .saltCalendarDay-content,
+.saltCalendarDay-hoveredSpan .saltCalendarDay-content,
+.saltCalendarDay-selectedEnd .saltCalendarDay-content,
+.saltCalendarDay-hoveredEnd .saltCalendarDay-content {
   color: var(--salt-content-primary-foreground);
 }
-.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
-  border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: calc(var(--calendar-gap) * -1);
+  right: calc(var(--calendar-gap) * -1);
+  bottom: 0;
+  background: var(--salt-selectable-background-hover);
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
-  background: var(--salt-content-secondary-foreground);
+.saltCalendarDay-selectedStart::before,
+.saltCalendarDay-selectedEnd::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--salt-selectable-background-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay:hover,
-.saltCalendarDay-hoveredOffset,
-.saltCalendarDay-hoveredOffset:hover {
-  background: var(--salt-selectable-background-hover);
+.saltCalendarDay-selectedStart,
+.saltCalendarDay-selectedStart::before,
+.saltCalendarDay-focused.saltCalendarDay-selectedStart,
+.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),
+.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,
+.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),
+.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {
+  border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;
+}
+.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,
+.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,
+.saltCalendarDay-selectedSameDay,
+.saltCalendarDay-selectedSameDay::before {
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selected {
+.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-hover);
   border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selectedStart {
-  z-index: var(--salt-zIndex-default);
-  border-top-left-radius: var(--salt-palette-corner-weak, 0);
-  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);
+.saltCalendarMonth-single .saltCalendarDay-selected::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selectedEnd {
-  border-top-right-radius: var(--salt-palette-corner-weak, 0);
-  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {
+  outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));
 }
-.saltCalendarDay-selected,
-.saltCalendarDay-selected:hover,
-.saltCalendarDay-selectedStart,
-.saltCalendarDay-selectedStart:hover,
-.saltCalendarDay-selectedEnd,
-.saltCalendarDay-selectedEnd:hover {
+.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {
   color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background-selected);
-  box-shadow: 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected);
+  background: var(--salt-selectable-background-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,
+.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {
+  border-radius: 0;
 }
-.saltCalendarDay-hoveredSpan,
-.saltCalendarDay-hoveredSpan:hover,
-.saltCalendarDay-selectedSpan,
-.saltCalendarDay-selectedSpan:hover {
+.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {
+  border-radius: 0;
+}
+.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(var(--calendar-gap) * -1);
+  right: 0;
+  bottom: 0;
+  background: var(--salt-selectable-background-hover);
+  border-radius: 0;
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+}
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {
+  border-radius: 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),
+.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {
   color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background-hover);
-  box-shadow:
-    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),
-    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
-    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay-disabled,
-.saltCalendarDay-disabled:hover,
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);
+}
+.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,
+.saltCalendarMonth-offset .saltCalendarDay-selectedStart {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,
+.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {
+  border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,
+.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {
+  border-radius: 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-outOfRange {
+  color: var(--salt-content-secondary-foreground);
+}
+.saltCalendarDay-outOfRange:hover {
+  color: var(--salt-content-primary-foreground);
+}
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
+  border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);
+}
+.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {
+  background: var(--salt-content-secondary-foreground);
+}
 .saltCalendarDay-unselectable,
 .saltCalendarDay-unselectable:hover {
   background: var(--salt-selectable-background-disabled);
   cursor: var(--salt-cursor-disabled);
 }
-.saltCalendarDay-highlighted:before,
-.saltCalendarDay-highlighted:hover:before {
+.saltCalendarDay-highlighted {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {
+  right: 1px;
+}
+.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {
+  right: -1px;
+}
+.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,
+.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,
+.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,
+.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {
+  border-radius: 0;
+}
+.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-highlighted::after {
   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);
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  height: var(--calendar-day-highlight-size);
+  width: var(--calendar-day-highlight-size);
   background: var(--salt-accent-background);
   position: absolute;
+  clip-path: polygon(100% 0, 100% 100%, 0 0);
+  z-index: var(--calendar-day-zIndex-highlight);
+}
+.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {
+  border: var(--salt-focused-outline);
 }
-.saltCalendarDay-unselectable:after {
+.saltCalendarDay-unselectable::after {
   content: "";
   height: var(--salt-size-fixed-100);
   width: calc(100% - var(--salt-spacing-100));
@@ -4411,29 +4431,42 @@ table.saltTable td {
   display: block;
   width: calc(100% - calc(var(--salt-spacing-50) * 2));
   height: var(--salt-size-indicator);
-  background-color: var(--salt-accent-borderColor);
+  background: var(--salt-accent-borderColor);
   border-radius: var(--salt-palette-corner-weak);
   position: absolute;
   bottom: var(--salt-spacing-50);
   left: var(--salt-spacing-50);
   right: var(--salt-spacing-50);
 }
-.saltCalendarDay-disabled,
-.saltCalendarDay-disabled:hover {
-  color: var(--salt-content-secondary-foreground-disabled);
-}
 .saltCalendarDay-hidden {
   visibility: hidden;
 }
 
 /* src/calendar/internal/CalendarMonth.css */
 .saltCalendarMonth-grid {
-  display: grid;
-  gap: var(--salt-spacing-fixed-100);
-  grid-template-columns: repeat(7, var(--salt-size-base));
-  grid-template-rows: repeat(6, var(--salt-size-base));
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: calc(var(--calendar-day-size) * 7 + var(--calendar-gap) * 6);
   text-align: center;
-  margin: var(--salt-spacing-fixed-100);
+  gap: var(--calendar-gap);
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week {
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--calendar-gap);
+  width: 100%;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > .saltCalendarDay:last-child::before {
+  right: 0;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > .saltCalendarDay:first-child::before {
+  left: 0;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > * {
+  width: var(--calendar-day-size);
+  height: var(--calendar-day-size);
+  box-sizing: border-box;
 }
 
 /* src/list-deprecated/internal/Highlighter.css */
@@ -4536,4 +4569,4 @@ table.saltTable td {
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/488767dd-9d4f-43da-a25d-e000701919fe.css */
+/* src/f07ce41b-6a4e-4158-bb04-2ac297d35d57.css */