@seed-design/css 2.3.1 → 2.4.1

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 (58) hide show
  1. package/all.css +744 -61
  2. package/all.layered.css +748 -65
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +21 -4
  6. package/base.layered.css +21 -4
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/accordion.layered.css +6 -6
  11. package/recipes/action-button.layered.css +4 -4
  12. package/recipes/article.layered.css +1 -0
  13. package/recipes/attachment-input-item.layered.css +12 -0
  14. package/recipes/avatar.layered.css +15 -0
  15. package/recipes/bottom-sheet.layered.css +4 -4
  16. package/recipes/content-dialog.layered.css +7 -5
  17. package/recipes/date-picker.css +400 -0
  18. package/recipes/date-picker.d.ts +24 -0
  19. package/recipes/date-picker.layered.css +461 -0
  20. package/recipes/date-picker.layered.mjs +165 -0
  21. package/recipes/date-picker.mjs +165 -0
  22. package/recipes/help-bubble.layered.css +4 -4
  23. package/recipes/input-button.layered.css +9 -9
  24. package/recipes/layout.layered.css +2 -2
  25. package/recipes/list-item.layered.css +4 -4
  26. package/recipes/menu-item.layered.css +4 -3
  27. package/recipes/menu.layered.css +2 -2
  28. package/recipes/quantity-picker.css +4 -0
  29. package/recipes/quantity-picker.d.ts +4 -0
  30. package/recipes/quantity-picker.layered.css +5 -0
  31. package/recipes/quantity-picker.layered.mjs +5 -0
  32. package/recipes/quantity-picker.mjs +5 -0
  33. package/recipes/scroll-fog.layered.css +2 -0
  34. package/recipes/segmented-control.layered.css +1 -0
  35. package/recipes/select-item.layered.css +6 -5
  36. package/recipes/select-trigger.layered.css +5 -5
  37. package/recipes/select.layered.css +1 -1
  38. package/recipes/side-panel.layered.css +6 -5
  39. package/recipes/skeleton.layered.css +4 -4
  40. package/recipes/slider.layered.css +1 -0
  41. package/recipes/tag-group.layered.css +1 -0
  42. package/recipes/text-input.layered.css +34 -22
  43. package/recipes/time-picker.css +44 -0
  44. package/recipes/time-picker.d.ts +21 -0
  45. package/recipes/time-picker.layered.css +53 -0
  46. package/recipes/time-picker.layered.mjs +60 -0
  47. package/recipes/time-picker.mjs +60 -0
  48. package/recipes/wheel-picker.css +85 -0
  49. package/recipes/wheel-picker.d.ts +21 -0
  50. package/recipes/wheel-picker.layered.css +100 -0
  51. package/recipes/wheel-picker.layered.mjs +52 -0
  52. package/recipes/wheel-picker.mjs +52 -0
  53. package/vars/component/date-picker.d.ts +98 -0
  54. package/vars/component/date-picker.mjs +98 -0
  55. package/vars/component/index.d.ts +2 -0
  56. package/vars/component/index.mjs +2 -0
  57. package/vars/component/time-picker.d.ts +27 -0
  58. package/vars/component/time-picker.mjs +27 -0
package/recipes/date-picker.mjs ADDED
@@ -0,0 +1,165 @@
1
+ import './date-picker.css';
2
+ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
+
4
+ const datePickerSlotNames = [
5
+ [
6
+ "root",
7
+ "seed-date-picker__root"
8
+ ],
9
+ [
10
+ "header",
11
+ "seed-date-picker__header"
12
+ ],
13
+ [
14
+ "headerLabel",
15
+ "seed-date-picker__headerLabel"
16
+ ],
17
+ [
18
+ "headerChevron",
19
+ "seed-date-picker__headerChevron"
20
+ ],
21
+ [
22
+ "navigation",
23
+ "seed-date-picker__navigation"
24
+ ],
25
+ [
26
+ "navigationButton",
27
+ "seed-date-picker__navigationButton"
28
+ ],
29
+ [
30
+ "twoMonthHeader",
31
+ "seed-date-picker__twoMonthHeader"
32
+ ],
33
+ [
34
+ "twoMonthLabel",
35
+ "seed-date-picker__twoMonthLabel"
36
+ ],
37
+ [
38
+ "twoMonthNavigationButton",
39
+ "seed-date-picker__twoMonthNavigationButton"
40
+ ],
41
+ [
42
+ "weekdayRow",
43
+ "seed-date-picker__weekdayRow"
44
+ ],
45
+ [
46
+ "weekday",
47
+ "seed-date-picker__weekday"
48
+ ],
49
+ [
50
+ "months",
51
+ "seed-date-picker__months"
52
+ ],
53
+ [
54
+ "month",
55
+ "seed-date-picker__month"
56
+ ],
57
+ [
58
+ "monthLabel",
59
+ "seed-date-picker__monthLabel"
60
+ ],
61
+ [
62
+ "grid",
63
+ "seed-date-picker__grid"
64
+ ],
65
+ [
66
+ "weekRow",
67
+ "seed-date-picker__weekRow"
68
+ ],
69
+ [
70
+ "dateCell",
71
+ "seed-date-picker__dateCell"
72
+ ],
73
+ [
74
+ "dateButton",
75
+ "seed-date-picker__dateButton"
76
+ ],
77
+ [
78
+ "dateContent",
79
+ "seed-date-picker__dateContent"
80
+ ],
81
+ [
82
+ "emptyCell",
83
+ "seed-date-picker__emptyCell"
84
+ ],
85
+ [
86
+ "continuousScroll",
87
+ "seed-date-picker__continuousScroll"
88
+ ],
89
+ [
90
+ "continuousContent",
91
+ "seed-date-picker__continuousContent"
92
+ ],
93
+ [
94
+ "continuousSpacer",
95
+ "seed-date-picker__continuousSpacer"
96
+ ],
97
+ [
98
+ "wheelContainer",
99
+ "seed-date-picker__wheelContainer"
100
+ ],
101
+ [
102
+ "wheelView",
103
+ "seed-date-picker__wheelView"
104
+ ],
105
+ [
106
+ "wheelColumns",
107
+ "seed-date-picker__wheelColumns"
108
+ ],
109
+ [
110
+ "wheelSelectionIndicator",
111
+ "seed-date-picker__wheelSelectionIndicator"
112
+ ],
113
+ [
114
+ "wheelScrollFog",
115
+ "seed-date-picker__wheelScrollFog"
116
+ ],
117
+ [
118
+ "yearColumn",
119
+ "seed-date-picker__yearColumn"
120
+ ],
121
+ [
122
+ "monthColumn",
123
+ "seed-date-picker__monthColumn"
124
+ ],
125
+ [
126
+ "wheelItem",
127
+ "seed-date-picker__wheelItem"
128
+ ],
129
+ [
130
+ "liveRegion",
131
+ "seed-date-picker__liveRegion"
132
+ ]
133
+ ];
134
+
135
+ const defaultVariant = {
136
+ "visibleRange": "month"
137
+ };
138
+
139
+ const compoundVariants = [];
140
+
141
+ export const datePickerVariantMap = {
142
+ "visibleRange": [
143
+ "month",
144
+ "twoMonths",
145
+ "continuous",
146
+ "week"
147
+ ]
148
+ };
149
+
150
+ export const datePickerVariantKeys = Object.keys(datePickerVariantMap);
151
+
152
+ export function datePicker(props) {
153
+ return Object.fromEntries(
154
+ datePickerSlotNames.map(([slot, className]) => {
155
+ return [
156
+ slot,
157
+ createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
158
+ ];
159
+ }),
160
+ );
161
+ }
162
+
163
+ Object.assign(datePicker, { splitVariantProps: (props) => splitVariantProps(props, datePickerVariantMap) });
164
+
165
+ // @recipe(seed): date-picker
package/recipes/help-bubble.layered.css CHANGED
@@ -112,25 +112,25 @@
112
112
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
113
113
  }
114
114
 
115
- @media (width >= 480px) {
115
+ @media (min-width: 480px) {
116
116
  .seed-help-bubble__content {
117
117
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
118
118
  }
119
119
  }
120
120
 
121
- @media (width >= 768px) {
121
+ @media (min-width: 768px) {
122
122
  .seed-help-bubble__content {
123
123
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
124
124
  }
125
125
  }
126
126
 
127
- @media (width >= 1280px) {
127
+ @media (min-width: 1280px) {
128
128
  .seed-help-bubble__content {
129
129
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
130
130
  }
131
131
  }
132
132
 
133
- @media (width >= 1440px) {
133
+ @media (min-width: 1440px) {
134
134
  .seed-help-bubble__content {
135
135
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
136
136
  }
package/recipes/input-button.layered.css CHANGED
@@ -237,7 +237,7 @@
237
237
  padding-inline: var(--seed-dimension-x4);
238
238
  }
239
239
 
240
- @media (width >= 1280px) {
240
+ @media (min-width: 1280px) {
241
241
  .seed-input-button__root--size_responsive {
242
242
  height: var(--seed-dimension-x10);
243
243
  gap: var(--seed-dimension-x2);
@@ -249,7 +249,7 @@
249
249
  border-radius: var(--seed-radius-r3);
250
250
  }
251
251
 
252
- @media (width >= 1280px) {
252
+ @media (min-width: 1280px) {
253
253
  .seed-input-button__button--size_responsive {
254
254
  border-radius: var(--seed-radius-r2);
255
255
  }
@@ -260,7 +260,7 @@
260
260
  line-height: var(--seed-line-height-t5);
261
261
  }
262
262
 
263
- @media (width >= 1280px) {
263
+ @media (min-width: 1280px) {
264
264
  .seed-input-button__value--size_responsive {
265
265
  font-size: var(--seed-font-size-t4);
266
266
  line-height: var(--seed-line-height-t4);
@@ -272,7 +272,7 @@
272
272
  line-height: var(--seed-line-height-t5);
273
273
  }
274
274
 
275
- @media (width >= 1280px) {
275
+ @media (min-width: 1280px) {
276
276
  .seed-input-button__placeholder--size_responsive {
277
277
  font-size: var(--seed-font-size-t4);
278
278
  line-height: var(--seed-line-height-t4);
@@ -284,7 +284,7 @@
284
284
  line-height: var(--seed-line-height-t5);
285
285
  }
286
286
 
287
- @media (width >= 1280px) {
287
+ @media (min-width: 1280px) {
288
288
  .seed-input-button__prefixText--size_responsive {
289
289
  font-size: var(--seed-font-size-t4);
290
290
  line-height: var(--seed-line-height-t4);
@@ -296,7 +296,7 @@
296
296
  height: var(--seed-dimension-x5);
297
297
  }
298
298
 
299
- @media (width >= 1280px) {
299
+ @media (min-width: 1280px) {
300
300
  .seed-input-button__prefixIcon--size_responsive {
301
301
  width: var(--seed-dimension-x4);
302
302
  height: var(--seed-dimension-x4);
@@ -308,7 +308,7 @@
308
308
  line-height: var(--seed-line-height-t5);
309
309
  }
310
310
 
311
- @media (width >= 1280px) {
311
+ @media (min-width: 1280px) {
312
312
  .seed-input-button__suffixText--size_responsive {
313
313
  font-size: var(--seed-font-size-t4);
314
314
  line-height: var(--seed-line-height-t4);
@@ -320,7 +320,7 @@
320
320
  height: var(--seed-dimension-x5);
321
321
  }
322
322
 
323
- @media (width >= 1280px) {
323
+ @media (min-width: 1280px) {
324
324
  .seed-input-button__suffixIcon--size_responsive {
325
325
  width: var(--seed-dimension-x4);
326
326
  height: var(--seed-dimension-x4);
@@ -331,7 +331,7 @@
331
331
  --seed-icon-size: 22px;
332
332
  }
333
333
 
334
- @media (width >= 1280px) {
334
+ @media (min-width: 1280px) {
335
335
  .seed-input-button__clearButton--size_responsive {
336
336
  --seed-icon-size: var(--seed-dimension-x4_5);
337
337
  }
package/recipes/layout.layered.css CHANGED
@@ -10,13 +10,13 @@
10
10
  margin-inline: auto;
11
11
  }
12
12
 
13
- @media (width >= 768px) {
13
+ @media (min-width: 768px) {
14
14
  .seed-layout__content--density_low, .seed-layout__content--density_medium {
15
15
  max-width: 720px;
16
16
  }
17
17
  }
18
18
 
19
- @media (width >= 1280px) {
19
+ @media (min-width: 1280px) {
20
20
  .seed-layout__content--density_medium {
21
21
  max-width: 1040px;
22
22
  }
package/recipes/list-item.layered.css CHANGED
@@ -199,7 +199,7 @@
199
199
  }
200
200
  }
201
201
 
202
- @media (width >= 480px) {
202
+ @media (min-width: 480px) {
203
203
  .seed-list-item__prefix {
204
204
  --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
205
205
  }
@@ -214,7 +214,7 @@
214
214
  }
215
215
  }
216
216
 
217
- @media (width >= 768px) {
217
+ @media (min-width: 768px) {
218
218
  .seed-list-item__prefix {
219
219
  --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
220
220
  }
@@ -229,7 +229,7 @@
229
229
  }
230
230
  }
231
231
 
232
- @media (width >= 1280px) {
232
+ @media (min-width: 1280px) {
233
233
  .seed-list-item__prefix {
234
234
  --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
235
235
  }
@@ -244,7 +244,7 @@
244
244
  }
245
245
  }
246
246
 
247
- @media (width >= 1440px) {
247
+ @media (min-width: 1440px) {
248
248
  .seed-list-item__prefix {
249
249
  --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
250
250
  }
package/recipes/menu-item.layered.css CHANGED
@@ -3,6 +3,7 @@
3
3
  scroll-margin-top: var(--seed-dimension-x2);
4
4
  scroll-margin-bottom: var(--seed-dimension-x2);
5
5
  cursor: default;
6
+ -webkit-user-select: none;
6
7
  user-select: none;
7
8
  color: inherit;
8
9
  text-align: start;
@@ -134,7 +135,7 @@
134
135
  --seed-suffix-icon-size: 18px;
135
136
  }
136
137
 
137
- @media (width >= 1280px) {
138
+ @media (min-width: 1280px) {
138
139
  .seed-menu-item__root--size_responsive {
139
140
  padding-block: var(--seed-dimension-x2_5);
140
141
  padding-inline: var(--seed-dimension-x4);
@@ -149,7 +150,7 @@
149
150
  line-height: var(--seed-line-height-t5);
150
151
  }
151
152
 
152
- @media (width >= 1280px) {
153
+ @media (min-width: 1280px) {
153
154
  .seed-menu-item__label--size_responsive {
154
155
  font-size: var(--seed-font-size-t4);
155
156
  line-height: var(--seed-line-height-t4);
@@ -161,7 +162,7 @@
161
162
  line-height: var(--seed-line-height-t3);
162
163
  }
163
164
 
164
- @media (width >= 1280px) {
165
+ @media (min-width: 1280px) {
165
166
  .seed-menu-item__description--size_responsive {
166
167
  font-size: var(--seed-font-size-t2);
167
168
  line-height: var(--seed-line-height-t2);
package/recipes/menu.layered.css CHANGED
@@ -103,7 +103,7 @@
103
103
  width: var(--seed-menu-reference-width, 240px);
104
104
  }
105
105
 
106
- @media (width >= 1280px) {
106
+ @media (min-width: 1280px) {
107
107
  .seed-menu__content--size_responsive {
108
108
  width: var(--seed-menu-reference-width, 200px);
109
109
  }
@@ -117,7 +117,7 @@
117
117
  font-weight: var(--seed-font-weight-medium);
118
118
  }
119
119
 
120
- @media (width >= 1280px) {
120
+ @media (min-width: 1280px) {
121
121
  .seed-menu__groupLabel--size_responsive {
122
122
  padding-block: var(--seed-dimension-x2);
123
123
  padding-inline: var(--seed-dimension-x4);
package/recipes/quantity-picker.css CHANGED
@@ -54,6 +54,7 @@
54
54
  }
55
55
  .seed-quantity-picker__valueDisplay {
56
56
  display: grid;
57
+ flex-grow: 1;
57
58
  flex-shrink: 0;
58
59
  align-items: center;
59
60
  justify-content: center;
@@ -123,6 +124,9 @@
123
124
  .seed-quantity-picker__incrementIcon:is(:disabled, [disabled], [data-disabled]) {
124
125
  color: var(--seed-color-fg-disabled);
125
126
  }
127
+ .seed-quantity-picker__root--layout_fill {
128
+ flex-grow: 1;
129
+ }
126
130
  .seed-quantity-picker__root--size_small {
127
131
  height: var(--seed-dimension-x9);
128
132
  border-radius: var(--seed-radius-r2);
package/recipes/quantity-picker.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  declare interface QuantityPickerVariant {
2
2
  /**
3
+ * @default "hug"
4
+ */
5
+ layout: "hug" | "fill";
6
+ /**
3
7
  * @default "medium"
4
8
  */
5
9
  size: "small" | "medium" | "large";
package/recipes/quantity-picker.layered.css CHANGED
@@ -67,6 +67,7 @@
67
67
  box-sizing: border-box;
68
68
  font-weight: var(--seed-font-weight-medium);
69
69
  color: var(--seed-color-fg-neutral);
70
+ flex-grow: 1;
70
71
  flex-shrink: 0;
71
72
  justify-content: center;
72
73
  align-items: center;
@@ -145,6 +146,10 @@
145
146
  color: var(--seed-color-fg-disabled);
146
147
  }
147
148
 
149
+ .seed-quantity-picker__root--layout_fill {
150
+ flex-grow: 1;
151
+ }
152
+
148
153
  .seed-quantity-picker__root--size_small {
149
154
  height: var(--seed-dimension-x9);
150
155
  border-radius: var(--seed-radius-r2);
package/recipes/quantity-picker.layered.mjs CHANGED
@@ -41,12 +41,17 @@ const quantityPickerSlotNames = [
41
41
  ];
42
42
 
43
43
  const defaultVariant = {
44
+ "layout": "hug",
44
45
  "size": "medium"
45
46
  };
46
47
 
47
48
  const compoundVariants = [];
48
49
 
49
50
  export const quantityPickerVariantMap = {
51
+ "layout": [
52
+ "hug",
53
+ "fill"
54
+ ],
50
55
  "size": [
51
56
  "small",
52
57
  "medium",
package/recipes/quantity-picker.mjs CHANGED
@@ -41,12 +41,17 @@ const quantityPickerSlotNames = [
41
41
  ];
42
42
 
43
43
  const defaultVariant = {
44
+ "layout": "hug",
44
45
  "size": "medium"
45
46
  };
46
47
 
47
48
  const compoundVariants = [];
48
49
 
49
50
  export const quantityPickerVariantMap = {
51
+ "layout": [
52
+ "hug",
53
+ "fill"
54
+ ],
50
55
  "size": [
51
56
  "small",
52
57
  "medium",
package/recipes/scroll-fog.layered.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --scroll-fog-to-color: #000;
5
5
  width: 100%;
6
6
  height: 100%;
7
+ -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
7
8
  mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
8
9
  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
9
10
  -webkit-mask-composite: source-in;
@@ -13,6 +14,7 @@
13
14
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
14
15
  -webkit-mask-repeat: no-repeat;
15
16
  mask-repeat: no-repeat;
17
+ -webkit-mask-composite: source-in;
16
18
  mask-composite: intersect;
17
19
  }
18
20
 
package/recipes/segmented-control.layered.css CHANGED
@@ -31,6 +31,7 @@
31
31
  .seed-segmented-control__item {
32
32
  text-align: center;
33
33
  cursor: pointer;
34
+ -webkit-user-select: none;
34
35
  user-select: none;
35
36
  box-sizing: border-box;
36
37
  overflow-wrap: break-word;
package/recipes/select-item.layered.css CHANGED
@@ -3,6 +3,7 @@
3
3
  scroll-margin-block: var(--seed-dimension-x2);
4
4
  padding-inline: var(--seed-dimension-x4);
5
5
  cursor: default;
6
+ -webkit-user-select: none;
6
7
  user-select: none;
7
8
  color: inherit;
8
9
  text-align: start;
@@ -134,7 +135,7 @@
134
135
  gap: var(--seed-dimension-x3);
135
136
  }
136
137
 
137
- @media (width >= 1280px) {
138
+ @media (min-width: 1280px) {
138
139
  .seed-select-item__root--size_responsive {
139
140
  padding-block: var(--seed-dimension-x2_5);
140
141
  gap: var(--seed-dimension-x2);
@@ -146,7 +147,7 @@
146
147
  height: 22px;
147
148
  }
148
149
 
149
- @media (width >= 1280px) {
150
+ @media (min-width: 1280px) {
150
151
  .seed-select-item__prefixIcon--size_responsive {
151
152
  width: var(--seed-dimension-x4_5);
152
153
  height: var(--seed-dimension-x4_5);
@@ -158,7 +159,7 @@
158
159
  line-height: var(--seed-line-height-t5);
159
160
  }
160
161
 
161
- @media (width >= 1280px) {
162
+ @media (min-width: 1280px) {
162
163
  .seed-select-item__label--size_responsive {
163
164
  font-size: var(--seed-font-size-t4);
164
165
  line-height: var(--seed-line-height-t4);
@@ -170,7 +171,7 @@
170
171
  line-height: var(--seed-line-height-t3);
171
172
  }
172
173
 
173
- @media (width >= 1280px) {
174
+ @media (min-width: 1280px) {
174
175
  .seed-select-item__description--size_responsive {
175
176
  font-size: var(--seed-font-size-t2);
176
177
  line-height: var(--seed-line-height-t2);
@@ -182,7 +183,7 @@
182
183
  height: var(--seed-dimension-x3_5);
183
184
  }
184
185
 
185
- @media (width >= 1280px) {
186
+ @media (min-width: 1280px) {
186
187
  .seed-select-item__indicator--size_responsive {
187
188
  width: var(--seed-dimension-x3);
188
189
  height: var(--seed-dimension-x3);
package/recipes/select-trigger.layered.css CHANGED
@@ -168,7 +168,7 @@
168
168
  border-radius: var(--seed-radius-r3);
169
169
  }
170
170
 
171
- @media (width >= 1280px) {
171
+ @media (min-width: 1280px) {
172
172
  .seed-select-trigger__root--size_responsive {
173
173
  height: var(--seed-dimension-x10);
174
174
  gap: var(--seed-dimension-x2);
@@ -182,7 +182,7 @@
182
182
  line-height: var(--seed-line-height-t5);
183
183
  }
184
184
 
185
- @media (width >= 1280px) {
185
+ @media (min-width: 1280px) {
186
186
  .seed-select-trigger__value--size_responsive {
187
187
  font-size: var(--seed-font-size-t4);
188
188
  line-height: var(--seed-line-height-t4);
@@ -194,7 +194,7 @@
194
194
  line-height: var(--seed-line-height-t5);
195
195
  }
196
196
 
197
- @media (width >= 1280px) {
197
+ @media (min-width: 1280px) {
198
198
  .seed-select-trigger__placeholder--size_responsive {
199
199
  font-size: var(--seed-font-size-t4);
200
200
  line-height: var(--seed-line-height-t4);
@@ -206,7 +206,7 @@
206
206
  height: var(--seed-dimension-x5);
207
207
  }
208
208
 
209
- @media (width >= 1280px) {
209
+ @media (min-width: 1280px) {
210
210
  .seed-select-trigger__prefixIcon--size_responsive {
211
211
  width: var(--seed-dimension-x4);
212
212
  height: var(--seed-dimension-x4);
@@ -218,7 +218,7 @@
218
218
  height: var(--seed-dimension-x5);
219
219
  }
220
220
 
221
- @media (width >= 1280px) {
221
+ @media (min-width: 1280px) {
222
222
  .seed-select-trigger__suffixIcon--size_responsive {
223
223
  width: var(--seed-dimension-x4);
224
224
  height: var(--seed-dimension-x4);
package/recipes/select.layered.css CHANGED
@@ -96,7 +96,7 @@
96
96
  font-weight: var(--seed-font-weight-medium);
97
97
  }
98
98
 
99
- @media (width >= 1280px) {
99
+ @media (min-width: 1280px) {
100
100
  .seed-select__groupLabel--size_responsive {
101
101
  padding-block: var(--seed-dimension-x2);
102
102
  padding-inline: var(--seed-dimension-x4);
package/recipes/side-panel.layered.css CHANGED
@@ -64,7 +64,7 @@
64
64
  inset-block: 0;
65
65
  }
66
66
 
67
- @media (width >= 768px) {
67
+ @media (min-width: 768px) {
68
68
  .seed-side-panel__content {
69
69
  --side-panel-default-width: var(--side-panel-size-width);
70
70
  }
@@ -224,6 +224,7 @@
224
224
  }
225
225
 
226
226
  .seed-side-panel__body {
227
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
227
228
  mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
228
229
  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
229
230
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -292,7 +293,7 @@
292
293
  --side-panel-size-width: 960px;
293
294
  }
294
295
 
295
- @media (width >= 480px) {
296
+ @media (min-width: 480px) {
296
297
  .seed-side-panel__content {
297
298
  --seed-box-width: var(--seed-box-width-sm, initial);
298
299
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
@@ -306,7 +307,7 @@
306
307
  }
307
308
  }
308
309
 
309
- @media (width >= 768px) {
310
+ @media (min-width: 768px) {
310
311
  .seed-side-panel__content {
311
312
  --seed-box-width: var(--seed-box-width-md, initial);
312
313
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
@@ -320,7 +321,7 @@
320
321
  }
321
322
  }
322
323
 
323
- @media (width >= 1280px) {
324
+ @media (min-width: 1280px) {
324
325
  .seed-side-panel__content {
325
326
  --seed-box-width: var(--seed-box-width-lg, initial);
326
327
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
@@ -334,7 +335,7 @@
334
335
  }
335
336
  }
336
337
 
337
- @media (width >= 1440px) {
338
+ @media (min-width: 1440px) {
338
339
  .seed-side-panel__content {
339
340
  --seed-box-width: var(--seed-box-width-xl, initial);
340
341
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
package/recipes/skeleton.layered.css CHANGED
@@ -64,28 +64,28 @@
64
64
  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
65
65
  }
66
66
 
67
- @media (width >= 480px) {
67
+ @media (min-width: 480px) {
68
68
  .seed-skeleton {
69
69
  --seed-box-width: var(--seed-box-width-sm, initial);
70
70
  --seed-box-height: var(--seed-box-height-sm, initial);
71
71
  }
72
72
  }
73
73
 
74
- @media (width >= 768px) {
74
+ @media (min-width: 768px) {
75
75
  .seed-skeleton {
76
76
  --seed-box-width: var(--seed-box-width-md, initial);
77
77
  --seed-box-height: var(--seed-box-height-md, initial);
78
78
  }
79
79
  }
80
80
 
81
- @media (width >= 1280px) {
81
+ @media (min-width: 1280px) {
82
82
  .seed-skeleton {
83
83
  --seed-box-width: var(--seed-box-width-lg, initial);
84
84
  --seed-box-height: var(--seed-box-height-lg, initial);
85
85
  }
86
86
  }
87
87
 
88
- @media (width >= 1440px) {
88
+ @media (min-width: 1440px) {
89
89
  .seed-skeleton {
90
90
  --seed-box-width: var(--seed-box-width-xl, initial);
91
91
  --seed-box-height: var(--seed-box-height-xl, initial);