@seed-design/css 2.4.1 → 2.5.0

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 (11) hide show
  1. package/all.css +13 -7
  2. package/all.layered.css +13 -7
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/bottom-sheet.css +1 -3
  7. package/recipes/bottom-sheet.layered.css +1 -3
  8. package/recipes/date-picker.css +10 -4
  9. package/recipes/date-picker.layered.css +12 -4
  10. package/vars/component/date-picker.d.ts +5 -0
  11. package/vars/component/date-picker.mjs +5 -0
package/all.css CHANGED
@@ -2859,13 +2859,11 @@
2859
2859
  padding-bottom: var(--seed-safe-area-bottom);
2860
2860
  touch-action: none;
2861
2861
  will-change: transform;
2862
- --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
2863
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
2862
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
2864
2863
  flex-direction: column;
2865
2864
  flex: 1;
2866
2865
  display: flex;
2867
2866
  position: relative;
2868
- bottom: 0;
2869
2867
  }
2870
2868
 
2871
2869
  .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -4816,29 +4814,37 @@
4816
4814
  }
4817
4815
 
4818
4816
  @media (hover: hover) and (pointer: fine) {
4819
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
4817
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
4820
4818
  background-color: var(--seed-color-bg-transparent-pressed);
4821
4819
  }
4822
4820
  }
4823
4821
 
4824
4822
  @media not all and (hover: hover) and (pointer: fine) {
4825
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
4823
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
4826
4824
  background-color: var(--seed-color-bg-transparent-pressed);
4827
4825
  }
4828
4826
  }
4829
4827
 
4830
4828
  @media (hover: hover) and (pointer: fine) {
4831
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
4829
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
4832
4830
  background-color: var(--seed-color-bg-neutral-inverted);
4833
4831
  }
4834
4832
  }
4835
4833
 
4836
4834
  @media not all and (hover: hover) and (pointer: fine) {
4837
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
4835
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
4838
4836
  background-color: var(--seed-color-bg-neutral-inverted);
4839
4837
  }
4840
4838
  }
4841
4839
 
4840
+ .seed-date-picker__dateButton[data-range-start-readonly]:before {
4841
+ background-color: var(--seed-color-palette-gray-600);
4842
+ }
4843
+
4844
+ .seed-date-picker__dateButton[data-range-start-readonly] {
4845
+ cursor: default;
4846
+ }
4847
+
4842
4848
  .seed-date-picker__dateButton[data-in-range] {
4843
4849
  color: var(--seed-color-fg-neutral-muted);
4844
4850
  }
package/all.layered.css CHANGED
@@ -3108,13 +3108,11 @@
3108
3108
  padding-bottom: var(--seed-safe-area-bottom);
3109
3109
  touch-action: none;
3110
3110
  will-change: transform;
3111
- --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
3112
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
3111
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
3113
3112
  flex-direction: column;
3114
3113
  flex: 1;
3115
3114
  display: flex;
3116
3115
  position: relative;
3117
- bottom: 0;
3118
3116
  }
3119
3117
 
3120
3118
  .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -5065,29 +5063,37 @@
5065
5063
  }
5066
5064
 
5067
5065
  @media (hover: hover) and (pointer: fine) {
5068
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5066
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
5069
5067
  background-color: var(--seed-color-bg-transparent-pressed);
5070
5068
  }
5071
5069
  }
5072
5070
 
5073
5071
  @media not all and (hover: hover) and (pointer: fine) {
5074
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5072
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
5075
5073
  background-color: var(--seed-color-bg-transparent-pressed);
5076
5074
  }
5077
5075
  }
5078
5076
 
5079
5077
  @media (hover: hover) and (pointer: fine) {
5080
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
5078
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
5081
5079
  background-color: var(--seed-color-bg-neutral-inverted);
5082
5080
  }
5083
5081
  }
5084
5082
 
5085
5083
  @media not all and (hover: hover) and (pointer: fine) {
5086
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
5084
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
5087
5085
  background-color: var(--seed-color-bg-neutral-inverted);
5088
5086
  }
5089
5087
  }
5090
5088
 
5089
+ .seed-date-picker__dateButton[data-range-start-readonly]:before {
5090
+ background-color: var(--seed-color-palette-gray-600);
5091
+ }
5092
+
5093
+ .seed-date-picker__dateButton[data-range-start-readonly] {
5094
+ cursor: default;
5095
+ }
5096
+
5091
5097
  .seed-date-picker__dateButton[data-in-range] {
5092
5098
  color: var(--seed-color-fg-neutral-muted);
5093
5099
  }