@salt-ds/lab 1.0.0-alpha.87 → 1.0.0-alpha.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/css/salt-lab.css +12 -21
  3. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  4. package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
  5. package/dist-cjs/tree/TreeNode.css.js +1 -1
  6. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +1 -1
  7. package/dist-cjs/tree/TreeNodeTrigger.css.js +1 -1
  8. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  9. package/dist-es/contact-details/ContactDetails.css.js +1 -1
  10. package/dist-es/tree/TreeNode.css.js +1 -1
  11. package/dist-es/tree/TreeNodeExpansionIcon.css.js +1 -1
  12. package/dist-es/tree/TreeNodeTrigger.css.js +1 -1
  13. package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
  14. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
  15. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @salt-ds/lab
2
2
 
3
+ ## 1.0.0-alpha.88
4
+
5
+ ### Patch Changes
6
+
7
+ - cfc1591: Simplify disabled styling across the system. This affected the following components:
8
+
9
+ ## Core
10
+
11
+ - Checkbox
12
+ - Combo box
13
+ - Dropdown
14
+ - List box
15
+ - Radio button
16
+ - Slider
17
+ - Switch
18
+
19
+ ## Lab
20
+
21
+ - Tree
22
+
23
+ - 89429e2: Updated accent token usage, to align to the recent theme change.
24
+ - Updated dependencies [5c36edc]
25
+ - Updated dependencies [cfc1591]
26
+ - Updated dependencies [89429e2]
27
+ - Updated dependencies [0a08ae0]
28
+ - Updated dependencies [49b3486]
29
+ - Updated dependencies [5c36edc]
30
+ - @salt-ds/core@1.59.0
31
+ - @salt-ds/icons@1.18.0
32
+
3
33
  ## 1.0.0-alpha.87
4
34
 
5
35
  ### Minor Changes
package/css/salt-lab.css CHANGED
@@ -654,7 +654,7 @@
654
654
  .saltContactDetails {
655
655
  --contactDetails-color: var(--salt-content-primary-foreground);
656
656
  --contactDetails-label-color: var(--salt-content-secondary-foreground);
657
- --contactDetails-noAvatar-color: var(--salt-accent-background);
657
+ --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);
658
658
  --contactDetails-noAvatar-indicator-width: 4px;
659
659
  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);
660
660
  --contactDetails-favoriteToggle-marginRight: 0px;
@@ -820,7 +820,7 @@
820
820
  outline: var(--salt-focused-outline);
821
821
  }
822
822
  .saltContactFavoriteToggle-deselected {
823
- --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);
823
+ --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);
824
824
  }
825
825
  .saltContactFavoriteToggle-selecting {
826
826
  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);
@@ -3716,9 +3716,6 @@
3716
3716
  outline: var(--salt-focused-outline);
3717
3717
  z-index: calc(var(--salt-zIndex-default) + 1);
3718
3718
  }
3719
- .saltTreeNode-disabled {
3720
- cursor: var(--salt-cursor-disabled);
3721
- }
3722
3719
  .saltTreeNode-group {
3723
3720
  list-style: none;
3724
3721
  margin: 0;
@@ -3740,9 +3737,6 @@
3740
3737
  .saltTreeNode-icon > * {
3741
3738
  color: var(--salt-content-primary-foreground);
3742
3739
  }
3743
- .saltTreeNode-disabled .saltTreeNode-icon > * {
3744
- color: var(--salt-content-primary-foreground-disabled);
3745
- }
3746
3740
 
3747
3741
  /* src/tree/TreeNodeExpansionIcon.css */
3748
3742
  .saltTreeNodeExpansionIcon {
@@ -3768,9 +3762,6 @@
3768
3762
  left: 50%;
3769
3763
  transform: translate(-50%, -50%);
3770
3764
  }
3771
- .saltTreeNode-disabled .saltTreeNodeExpansionIcon-icon {
3772
- color: var(--salt-content-primary-foreground-disabled);
3773
- }
3774
3765
 
3775
3766
  /* src/tree/TreeNodeLabel.css */
3776
3767
  .saltTreeNodeLabel {
@@ -3819,9 +3810,12 @@
3819
3810
  .saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
3820
3811
  background: var(--salt-selectable-background-selected);
3821
3812
  }
3822
- .saltTreeNode-disabled > .saltTreeNodeTrigger {
3823
- color: var(--salt-content-primary-foreground-disabled);
3824
- background: var(--salt-selectable-background-disabled);
3813
+ .saltTreeNode-disabled > .saltTreeNodeTrigger,
3814
+ .saltTreeNode-disabled:hover > .saltTreeNodeTrigger {
3815
+ opacity: 0.4;
3816
+ cursor: var(--salt-cursor-disabled);
3817
+ background: var(--salt-selectable-background);
3818
+ color: var(--salt-content-primary-foreground);
3825
3819
  }
3826
3820
  .saltTreeNodeTrigger > .saltIcon {
3827
3821
  width: var(--salt-size-selectable);
@@ -3834,9 +3828,6 @@
3834
3828
  margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
3835
3829
  margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
3836
3830
  }
3837
- .saltTreeNode-disabled .saltTreeNodeTrigger > .saltIcon {
3838
- color: var(--salt-content-primary-foreground-disabled);
3839
- }
3840
3831
 
3841
3832
  /* src/window/ElectronWindow.css */
3842
3833
  .saltWindow {
@@ -4095,7 +4086,7 @@
4095
4086
  box-sizing: border-box;
4096
4087
  height: var(--calendar-day-highlight-size);
4097
4088
  width: var(--calendar-day-highlight-size);
4098
- background: var(--salt-accent-background);
4089
+ background: var(--salt-sentiment-accent-background);
4099
4090
  position: absolute;
4100
4091
  clip-path: polygon(100% 0, 100% 100%, 0 0);
4101
4092
  z-index: var(--calendar-day-zIndex-highlight);
@@ -4115,7 +4106,7 @@
4115
4106
  display: block;
4116
4107
  width: calc(100% - calc(var(--salt-spacing-50) * 2));
4117
4108
  height: var(--salt-size-indicator);
4118
- background: var(--salt-accent-borderColor);
4109
+ background: var(--salt-sentiment-accent-borderColor);
4119
4110
  border-radius: var(--salt-palette-corner-weak);
4120
4111
  position: absolute;
4121
4112
  bottom: var(--salt-spacing-50);
@@ -4174,7 +4165,7 @@
4174
4165
 
4175
4166
  /* src/tabs/drag-drop/DropIndicator.css */
4176
4167
  .saltDropIndicator {
4177
- background: var(--salt-accent-background);
4168
+ background: var(--salt-sentiment-accent-background);
4178
4169
  cursor: move;
4179
4170
  position: absolute;
4180
4171
  transform: translate(-4px, 0);
@@ -4253,4 +4244,4 @@
4253
4244
  margin: calc(var(--salt-size-unit) / 2) 0;
4254
4245
  }
4255
4246
 
4256
- /* src/25083a77-6c67-4f88-8e75-5cf4c8a0746c.css */
4247
+ /* src/4ab77bbb-d93c-4e89-bc2e-478a2cbac219.css */
package/dist-cjs/calendar/internal/CalendarDay.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
3
+ var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-sentiment-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-sentiment-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=CalendarDay.css.js.map
package/dist-cjs/contact-details/ContactDetails.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
3
+ var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ContactDetails.css.js.map
package/dist-cjs/tree/TreeNode.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltTreeNode {\n list-style: none;\n position: relative;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltTreeNode:focus {\n outline: none;\n}\n\n/* Focus visible styles - applied when keyboard navigation is used */\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n position: relative;\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Selected + focus visible */\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Disabled cursor */\n.saltTreeNode-disabled {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltTreeNode-group {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltTreeNode-checkbox {\n flex-shrink: 0;\n height: var(--salt-size-selectable);\n}\n\n.saltTreeNode-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n}\n\n.saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNode-disabled .saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
3
+ var css_248z = ".saltTreeNode {\n list-style: none;\n position: relative;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltTreeNode:focus {\n outline: none;\n}\n\n/* Focus visible styles - applied when keyboard navigation is used */\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n position: relative;\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Selected + focus visible */\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n.saltTreeNode-group {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltTreeNode-checkbox {\n flex-shrink: 0;\n height: var(--salt-size-selectable);\n}\n\n.saltTreeNode-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n}\n\n.saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TreeNode.css.js.map
package/dist-cjs/tree/TreeNodeExpansionIcon.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltTreeNodeExpansionIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n position: relative;\n}\n\n.saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeExpansionIcon::before {\n content: \"\";\n display: block;\n position: absolute;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.saltTreeNode-disabled .saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
3
+ var css_248z = ".saltTreeNodeExpansionIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n position: relative;\n}\n\n.saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeExpansionIcon::before {\n content: \"\";\n display: block;\n position: absolute;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TreeNodeExpansionIcon.css.js.map
package/dist-cjs/tree/TreeNodeTrigger.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltTreeNodeTrigger {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--salt-spacing-100);\n width: 100%;\n min-height: var(--salt-size-base);\n\n padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-right: var(--salt-spacing-100);\n /* Base padding for level-1 nodes, plus one indent step per additional level.\n Each indent step = (selectable element width + gap).\n Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n --saltTreeNodeTrigger-indentStep is overridden in multiselect to account\n for the wider spacing around the checkbox. */\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n[aria-multiselectable=\"true\"] .saltTreeNodeTrigger {\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));\n}\n\n.saltTreeNodeTrigger:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger {\n color: var(--salt-content-primary-foreground-disabled);\n background: var(--salt-selectable-background-disabled);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n flex-shrink: 0;\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n}\n\n.saltTreeNode-disabled .saltTreeNodeTrigger > .saltIcon {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
3
+ var css_248z = ".saltTreeNodeTrigger {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--salt-spacing-100);\n width: 100%;\n min-height: var(--salt-size-base);\n\n padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-right: var(--salt-spacing-100);\n /* Base padding for level-1 nodes, plus one indent step per additional level.\n Each indent step = (selectable element width + gap).\n Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n --saltTreeNodeTrigger-indentStep is overridden in multiselect to account\n for the wider spacing around the checkbox. */\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n[aria-multiselectable=\"true\"] .saltTreeNodeTrigger {\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));\n}\n\n.saltTreeNodeTrigger:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n opacity: 0.4;\n cursor: var(--salt-cursor-disabled);\n\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n flex-shrink: 0;\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TreeNodeTrigger.css.js.map
package/dist-es/calendar/internal/CalendarDay.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
1
+ var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-sentiment-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-sentiment-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=CalendarDay.css.js.map
package/dist-es/contact-details/ContactDetails.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
1
+ var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=ContactDetails.css.js.map
package/dist-es/tree/TreeNode.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltTreeNode {\n list-style: none;\n position: relative;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltTreeNode:focus {\n outline: none;\n}\n\n/* Focus visible styles - applied when keyboard navigation is used */\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n position: relative;\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Selected + focus visible */\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Disabled cursor */\n.saltTreeNode-disabled {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltTreeNode-group {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltTreeNode-checkbox {\n flex-shrink: 0;\n height: var(--salt-size-selectable);\n}\n\n.saltTreeNode-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n}\n\n.saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNode-disabled .saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
1
+ var css_248z = ".saltTreeNode {\n list-style: none;\n position: relative;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltTreeNode:focus {\n outline: none;\n}\n\n/* Focus visible styles - applied when keyboard navigation is used */\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n position: relative;\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n/* Selected + focus visible */\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n outline: var(--salt-focused-outline);\n z-index: calc(var(--salt-zIndex-default) + 1);\n}\n\n.saltTreeNode-group {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltTreeNode-checkbox {\n flex-shrink: 0;\n height: var(--salt-size-selectable);\n}\n\n.saltTreeNode-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n}\n\n.saltTreeNode-icon > * {\n color: var(--salt-content-primary-foreground);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=TreeNode.css.js.map
package/dist-es/tree/TreeNodeExpansionIcon.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltTreeNodeExpansionIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n position: relative;\n}\n\n.saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeExpansionIcon::before {\n content: \"\";\n display: block;\n position: absolute;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.saltTreeNode-disabled .saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
1
+ var css_248z = ".saltTreeNodeExpansionIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n flex-shrink: 0;\n position: relative;\n}\n\n.saltTreeNodeExpansionIcon-icon {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeExpansionIcon::before {\n content: \"\";\n display: block;\n position: absolute;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=TreeNodeExpansionIcon.css.js.map
package/dist-es/tree/TreeNodeTrigger.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltTreeNodeTrigger {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--salt-spacing-100);\n width: 100%;\n min-height: var(--salt-size-base);\n\n padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-right: var(--salt-spacing-100);\n /* Base padding for level-1 nodes, plus one indent step per additional level.\n Each indent step = (selectable element width + gap).\n Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n --saltTreeNodeTrigger-indentStep is overridden in multiselect to account\n for the wider spacing around the checkbox. */\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n[aria-multiselectable=\"true\"] .saltTreeNodeTrigger {\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));\n}\n\n.saltTreeNodeTrigger:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger {\n color: var(--salt-content-primary-foreground-disabled);\n background: var(--salt-selectable-background-disabled);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n flex-shrink: 0;\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n}\n\n.saltTreeNode-disabled .saltTreeNodeTrigger > .saltIcon {\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
1
+ var css_248z = ".saltTreeNodeTrigger {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--salt-spacing-100);\n width: 100%;\n min-height: var(--salt-size-base);\n\n padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-right: var(--salt-spacing-100);\n /* Base padding for level-1 nodes, plus one indent step per additional level.\n Each indent step = (selectable element width + gap).\n Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n --saltTreeNodeTrigger-indentStep is overridden in multiselect to account\n for the wider spacing around the checkbox. */\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n[aria-multiselectable=\"true\"] .saltTreeNodeTrigger {\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));\n}\n\n.saltTreeNodeTrigger:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n opacity: 0.4;\n cursor: var(--salt-cursor-disabled);\n\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n width: var(--salt-size-selectable);\n height: var(--salt-size-selectable);\n min-width: var(--salt-size-selectable);\n flex-shrink: 0;\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=TreeNodeTrigger.css.js.map
package/dist-types/tokenized-input/internal/InputPill.d.ts CHANGED
@@ -30,4 +30,4 @@ export type InputPillProps = PillProps & {
30
30
  */
31
31
  onDelete?: (index: number) => void;
32
32
  };
33
- export declare const InputPill: import("react").NamedExoticComponent<InputPillProps>;
33
+ export declare const InputPill: import("react").MemoExoticComponent<(props: InputPillProps) => import("react/jsx-runtime").JSX.Element>;
package/dist-types/tokenized-input-next/internal/InputPill.d.ts CHANGED
@@ -26,4 +26,4 @@ export type InputPillProps = PillProps & {
26
26
  */
27
27
  onClose?: (event: SyntheticEvent, index: number) => void;
28
28
  };
29
- export declare const InputPill: import("react").NamedExoticComponent<InputPillProps>;
29
+ export declare const InputPill: import("react").MemoExoticComponent<(props: InputPillProps) => import("react/jsx-runtime").JSX.Element>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/lab",
3
- "version": "1.0.0-alpha.87",
3
+ "version": "1.0.0-alpha.88",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,9 +21,9 @@
21
21
  ],
22
22
  "dependencies": {
23
23
  "@floating-ui/react": "^0.26.28",
24
- "@salt-ds/core": "^1.58.0",
24
+ "@salt-ds/core": "^1.59.0",
25
25
  "@salt-ds/date-adapters": "0.1.0-alpha.6",
26
- "@salt-ds/icons": "^1.17.1",
26
+ "@salt-ds/icons": "^1.18.0",
27
27
  "@salt-ds/styles": "0.3.0",
28
28
  "@salt-ds/window": "0.1.1",
29
29
  "@types/react-window": "^1.8.2",