@seed-design/css 1.2.7 → 1.2.8

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 (68) hide show
  1. package/all.css +212 -200
  2. package/all.layered.css +212 -200
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +6 -2
  6. package/base.layered.css +6 -2
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/action-button.css +14 -14
  11. package/recipes/action-button.layered.css +14 -14
  12. package/recipes/action-sheet.layered.css +3 -3
  13. package/recipes/app-screen.layered.css +13 -13
  14. package/recipes/bottom-sheet-handle.css +2 -2
  15. package/recipes/bottom-sheet-handle.layered.css +2 -2
  16. package/recipes/bottom-sheet.layered.css +3 -3
  17. package/recipes/callout.css +12 -12
  18. package/recipes/callout.layered.css +13 -13
  19. package/recipes/checkbox.layered.css +2 -2
  20. package/recipes/checkmark.css +12 -12
  21. package/recipes/checkmark.layered.css +12 -12
  22. package/recipes/chip-tabs.css +12 -12
  23. package/recipes/chip-tabs.layered.css +12 -12
  24. package/recipes/chip.css +12 -12
  25. package/recipes/chip.layered.css +12 -12
  26. package/recipes/contextual-floating-button.css +4 -4
  27. package/recipes/contextual-floating-button.layered.css +4 -4
  28. package/recipes/dialog.layered.css +3 -3
  29. package/recipes/extended-action-sheet.layered.css +3 -3
  30. package/recipes/field.layered.css +2 -2
  31. package/recipes/floating-action-button.css +2 -2
  32. package/recipes/floating-action-button.layered.css +2 -2
  33. package/recipes/help-bubble.layered.css +4 -4
  34. package/recipes/image-frame-reaction-button.layered.css +4 -4
  35. package/recipes/image-frame.css +11 -5
  36. package/recipes/image-frame.layered.css +8 -0
  37. package/recipes/inline-banner.layered.css +3 -3
  38. package/recipes/input-button.css +2 -2
  39. package/recipes/input-button.layered.css +2 -2
  40. package/recipes/list-item.css +8 -8
  41. package/recipes/list-item.layered.css +8 -8
  42. package/recipes/menu-sheet-item.css +2 -2
  43. package/recipes/menu-sheet-item.layered.css +2 -2
  44. package/recipes/menu-sheet.css +2 -2
  45. package/recipes/menu-sheet.layered.css +6 -6
  46. package/recipes/page-banner.css +22 -22
  47. package/recipes/page-banner.layered.css +27 -27
  48. package/recipes/pull-to-refresh.layered.css +1 -1
  49. package/recipes/radio.layered.css +2 -2
  50. package/recipes/radiomark.css +6 -6
  51. package/recipes/radiomark.layered.css +6 -6
  52. package/recipes/reaction-button.css +4 -4
  53. package/recipes/reaction-button.layered.css +4 -4
  54. package/recipes/segmented-control.css +4 -4
  55. package/recipes/segmented-control.layered.css +4 -4
  56. package/recipes/select-box.css +2 -2
  57. package/recipes/select-box.layered.css +2 -2
  58. package/recipes/selectBoxCheckmark.css +2 -2
  59. package/recipes/selectBoxCheckmark.layered.css +2 -2
  60. package/recipes/slider.layered.css +2 -2
  61. package/recipes/snackbar-region.layered.css +1 -1
  62. package/recipes/switch.layered.css +3 -3
  63. package/recipes/switchmark.layered.css +3 -3
  64. package/recipes/tabs.layered.css +4 -4
  65. package/recipes/toggle-button.css +8 -8
  66. package/recipes/toggle-button.layered.css +8 -8
  67. package/vars/component/menu-sheet.d.ts +1 -0
  68. package/vars/component/menu-sheet.mjs +1 -0
package/recipes/reaction-button.css CHANGED
@@ -32,12 +32,12 @@
32
32
  --seed-count-font-weight: var(--seed-font-weight-bold);
33
33
  --seed-count-color: var(--seed-color-fg-neutral);
34
34
  }
35
- @media (hover: hover) {
35
+ @media (hover: hover) and (pointer: fine) {
36
36
  .seed-reaction-button:is(:hover, [data-hover]) {
37
37
  background: var(--seed-color-bg-transparent-pressed);
38
38
  }
39
39
  }
40
- @media (hover: none) {
40
+ @media not all and (hover: hover) and (pointer: fine) {
41
41
  .seed-reaction-button:is(:active, [data-active]) {
42
42
  background: var(--seed-color-bg-transparent-pressed);
43
43
  }
@@ -49,12 +49,12 @@
49
49
  --seed-prefix-icon-color: var(--seed-color-fg-brand);
50
50
  --seed-count-color: var(--seed-color-fg-brand);
51
51
  }
52
- @media (hover: hover) {
52
+ @media (hover: hover) and (pointer: fine) {
53
53
  .seed-reaction-button:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
54
54
  background: var(--seed-color-bg-transparent-pressed);
55
55
  }
56
56
  }
57
- @media (hover: none) {
57
+ @media not all and (hover: hover) and (pointer: fine) {
58
58
  .seed-reaction-button:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
59
59
  background: var(--seed-color-bg-transparent-pressed);
60
60
  }
package/recipes/reaction-button.layered.css CHANGED
@@ -36,13 +36,13 @@
36
36
  --seed-count-color: var(--seed-color-fg-neutral);
37
37
  }
38
38
 
39
- @media (hover: hover) {
39
+ @media (hover: hover) and (pointer: fine) {
40
40
  .seed-reaction-button:is(:hover, [data-hover]) {
41
41
  background: var(--seed-color-bg-transparent-pressed);
42
42
  }
43
43
  }
44
44
 
45
- @media (hover: none) {
45
+ @media not all and (hover: hover) and (pointer: fine) {
46
46
  .seed-reaction-button:is(:active, [data-active]) {
47
47
  background: var(--seed-color-bg-transparent-pressed);
48
48
  }
@@ -56,13 +56,13 @@
56
56
  --seed-count-color: var(--seed-color-fg-brand);
57
57
  }
58
58
 
59
- @media (hover: hover) {
59
+ @media (hover: hover) and (pointer: fine) {
60
60
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
61
61
  background: var(--seed-color-bg-transparent-pressed);
62
62
  }
63
63
  }
64
64
 
65
- @media (hover: none) {
65
+ @media not all and (hover: hover) and (pointer: fine) {
66
66
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
67
67
  background: var(--seed-color-bg-transparent-pressed);
68
68
  }
package/recipes/segmented-control.css CHANGED
@@ -69,25 +69,25 @@
69
69
  background-color: var(--seed-color-bg-disabled);
70
70
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
71
71
  }
72
- @media (hover: hover) {
72
+ @media (hover: hover) and (pointer: fine) {
73
73
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
74
74
  background-color: var(--seed-color-palette-gray-100);
75
75
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
76
76
  }
77
77
  }
78
- @media (hover: none) {
78
+ @media not all and (hover: hover) and (pointer: fine) {
79
79
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
80
80
  background-color: var(--seed-color-palette-gray-100);
81
81
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
82
82
  }
83
83
  }
84
- @media (hover: hover) {
84
+ @media (hover: hover) and (pointer: fine) {
85
85
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
86
86
  background-color: var(--seed-color-bg-neutral-weak-pressed);
87
87
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
88
88
  }
89
89
  }
90
- @media (hover: none) {
90
+ @media not all and (hover: hover) and (pointer: fine) {
91
91
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
92
92
  background-color: var(--seed-color-bg-neutral-weak-pressed);
93
93
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
package/recipes/segmented-control.layered.css CHANGED
@@ -78,28 +78,28 @@
78
78
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
79
79
  }
80
80
 
81
- @media (hover: hover) {
81
+ @media (hover: hover) and (pointer: fine) {
82
82
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
83
83
  background-color: var(--seed-color-palette-gray-100);
84
84
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
85
85
  }
86
86
  }
87
87
 
88
- @media (hover: none) {
88
+ @media not all and (hover: hover) and (pointer: fine) {
89
89
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
90
90
  background-color: var(--seed-color-palette-gray-100);
91
91
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
92
92
  }
93
93
  }
94
94
 
95
- @media (hover: hover) {
95
+ @media (hover: hover) and (pointer: fine) {
96
96
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
97
97
  background-color: var(--seed-color-bg-neutral-weak-pressed);
98
98
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
99
99
  }
100
100
  }
101
101
 
102
- @media (hover: none) {
102
+ @media not all and (hover: hover) and (pointer: fine) {
103
103
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
104
104
  background-color: var(--seed-color-bg-neutral-weak-pressed);
105
105
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
package/recipes/select-box.css CHANGED
@@ -23,12 +23,12 @@
23
23
  transition: border-color 0.1s var(--seed-timing-function-easing);
24
24
  pointer-events: none;
25
25
  }
26
- @media (hover: hover) {
26
+ @media (hover: hover) and (pointer: fine) {
27
27
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
28
28
  background-color: var(--seed-color-bg-transparent-pressed);
29
29
  }
30
30
  }
31
- @media (hover: none) {
31
+ @media not all and (hover: hover) and (pointer: fine) {
32
32
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
33
33
  background-color: var(--seed-color-bg-transparent-pressed);
34
34
  }
package/recipes/select-box.layered.css CHANGED
@@ -21,13 +21,13 @@
21
21
  inset: 0;
22
22
  }
23
23
 
24
- @media (hover: hover) {
24
+ @media (hover: hover) and (pointer: fine) {
25
25
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
26
26
  background-color: var(--seed-color-bg-transparent-pressed);
27
27
  }
28
28
  }
29
29
 
30
- @media (hover: none) {
30
+ @media not all and (hover: hover) and (pointer: fine) {
31
31
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
32
32
  background-color: var(--seed-color-bg-transparent-pressed);
33
33
  }
package/recipes/selectBoxCheckmark.css CHANGED
@@ -20,12 +20,12 @@
20
20
  color: var(--seed-color-fg-placeholder);
21
21
  transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
22
22
  }
23
- @media (hover: hover) {
23
+ @media (hover: hover) and (pointer: fine) {
24
24
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
25
25
  color: var(--seed-color-fg-neutral-subtle);
26
26
  }
27
27
  }
28
- @media (hover: none) {
28
+ @media not all and (hover: hover) and (pointer: fine) {
29
29
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
30
30
  color: var(--seed-color-fg-neutral-subtle);
31
31
  }
package/recipes/selectBoxCheckmark.layered.css CHANGED
@@ -20,13 +20,13 @@
20
20
  inset: 0;
21
21
  }
22
22
 
23
- @media (hover: hover) {
23
+ @media (hover: hover) and (pointer: fine) {
24
24
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
25
25
  color: var(--seed-color-fg-neutral-subtle);
26
26
  }
27
27
  }
28
28
 
29
- @media (hover: none) {
29
+ @media not all and (hover: hover) and (pointer: fine) {
30
30
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
31
31
  color: var(--seed-color-fg-neutral-subtle);
32
32
  }
package/recipes/slider.layered.css CHANGED
@@ -216,12 +216,12 @@
216
216
  }
217
217
 
218
218
  .seed-slider__valueIndicatorArrow[data-dir="ltr"] {
219
- left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
219
+ left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
220
220
  transform: translateX(-50%);
221
221
  }
222
222
 
223
223
  .seed-slider__valueIndicatorArrow[data-dir="rtl"] {
224
- right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
224
+ right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
225
225
  transform: translateX(50%);
226
226
  }
227
227
 
package/recipes/snackbar-region.layered.css CHANGED
@@ -3,7 +3,7 @@
3
3
  z-index: 2147483647;
4
4
  left: calc(env(safe-area-inset-left, 0px));
5
5
  right: calc(env(safe-area-inset-right, 0px));
6
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
6
+ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
7
7
  padding-left: var(--seed-dimension-x2);
8
8
  padding-right: var(--seed-dimension-x2);
9
9
  padding-top: var(--seed-dimension-x2);
package/recipes/switch.layered.css CHANGED
@@ -27,7 +27,7 @@
27
27
  .seed-switch__root--size_16 {
28
28
  min-height: var(--seed-dimension-x6);
29
29
  gap: var(--seed-dimension-x1_5);
30
- --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
30
+ --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
31
31
  }
32
32
 
33
33
  .seed-switch__label--size_16 {
@@ -39,7 +39,7 @@
39
39
  .seed-switch__root--size_24 {
40
40
  min-height: var(--seed-dimension-x6);
41
41
  gap: var(--seed-dimension-x2);
42
- --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
42
+ --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
43
43
  }
44
44
 
45
45
  .seed-switch__label--size_24 {
@@ -51,7 +51,7 @@
51
51
  .seed-switch__root--size_32 {
52
52
  min-height: var(--seed-dimension-x8);
53
53
  gap: var(--seed-dimension-x2_5);
54
- --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
54
+ --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
55
55
  }
56
56
 
57
57
  .seed-switch__label--size_32 {
package/recipes/switchmark.layered.css CHANGED
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  .seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
68
- transform: scale(1)translateX(10px);
68
+ transform: scale(1) translateX(10px);
69
69
  }
70
70
 
71
71
  .seed-switchmark__root--size_24 {
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  .seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
83
- transform: scale(1)translateX(14px);
83
+ transform: scale(1) translateX(14px);
84
84
  }
85
85
 
86
86
  .seed-switchmark__root--size_32 {
@@ -95,6 +95,6 @@
95
95
  }
96
96
 
97
97
  .seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
98
- transform: scale(1)translateX(20px);
98
+ transform: scale(1) translateX(20px);
99
99
  }
100
100
  }
package/recipes/tabs.layered.css CHANGED
@@ -113,8 +113,8 @@
113
113
  }
114
114
 
115
115
  .seed-tabs__indicator--triggerLayout_fill {
116
- left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
117
- width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
116
+ left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
117
+ width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
118
118
  }
119
119
 
120
120
  .seed-tabs__trigger--triggerLayout_fill {
@@ -133,8 +133,8 @@
133
133
  }
134
134
 
135
135
  .seed-tabs__indicator--triggerLayout_hug {
136
- left: calc(var(--indicator-left, 0px) + 0px);
137
- width: calc(var(--indicator-width, 0px) - 2 * 0px);
136
+ left: calc(var(--indicator-left, 0px) + 0px);
137
+ width: calc(var(--indicator-width, 0px) - 2 * 0px);
138
138
  }
139
139
 
140
140
  .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
package/recipes/toggle-button.css CHANGED
@@ -34,12 +34,12 @@
34
34
  --track-color: var(--seed-color-palette-static-white-alpha-300);
35
35
  --range-color: var(--seed-color-palette-static-white);
36
36
  }
37
- @media (hover: hover) {
37
+ @media (hover: hover) and (pointer: fine) {
38
38
  .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
39
39
  background: var(--seed-color-bg-brand-solid-pressed);
40
40
  }
41
41
  }
42
- @media (hover: none) {
42
+ @media not all and (hover: hover) and (pointer: fine) {
43
43
  .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
44
44
  background: var(--seed-color-bg-brand-solid-pressed);
45
45
  }
@@ -52,12 +52,12 @@
52
52
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
53
53
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
54
54
  }
55
- @media (hover: hover) {
55
+ @media (hover: hover) and (pointer: fine) {
56
56
  .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
57
57
  background: var(--seed-color-bg-neutral-weak-pressed);
58
58
  }
59
59
  }
60
- @media (hover: none) {
60
+ @media not all and (hover: hover) and (pointer: fine) {
61
61
  .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
62
62
  background: var(--seed-color-bg-neutral-weak-pressed);
63
63
  }
@@ -84,12 +84,12 @@
84
84
  --track-color: var(--seed-color-palette-gray-500);
85
85
  --range-color: var(--seed-color-fg-neutral);
86
86
  }
87
- @media (hover: hover) {
87
+ @media (hover: hover) and (pointer: fine) {
88
88
  .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
89
89
  background: var(--seed-color-bg-neutral-weak-pressed);
90
90
  }
91
91
  }
92
- @media (hover: none) {
92
+ @media not all and (hover: hover) and (pointer: fine) {
93
93
  .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
94
94
  background: var(--seed-color-bg-neutral-weak-pressed);
95
95
  }
@@ -102,12 +102,12 @@
102
102
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
103
103
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
104
104
  }
105
- @media (hover: hover) {
105
+ @media (hover: hover) and (pointer: fine) {
106
106
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
107
107
  background: var(--seed-color-bg-neutral-weak-pressed);
108
108
  }
109
109
  }
110
- @media (hover: none) {
110
+ @media not all and (hover: hover) and (pointer: fine) {
111
111
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
112
112
  background: var(--seed-color-bg-neutral-weak-pressed);
113
113
  }
package/recipes/toggle-button.layered.css CHANGED
@@ -40,13 +40,13 @@
40
40
  --range-color: var(--seed-color-palette-static-white);
41
41
  }
42
42
 
43
- @media (hover: hover) {
43
+ @media (hover: hover) and (pointer: fine) {
44
44
  .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
45
45
  background: var(--seed-color-bg-brand-solid-pressed);
46
46
  }
47
47
  }
48
48
 
49
- @media (hover: none) {
49
+ @media not all and (hover: hover) and (pointer: fine) {
50
50
  .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
51
51
  background: var(--seed-color-bg-brand-solid-pressed);
52
52
  }
@@ -61,13 +61,13 @@
61
61
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
62
62
  }
63
63
 
64
- @media (hover: hover) {
64
+ @media (hover: hover) and (pointer: fine) {
65
65
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
66
66
  background: var(--seed-color-bg-neutral-weak-pressed);
67
67
  }
68
68
  }
69
69
 
70
- @media (hover: none) {
70
+ @media not all and (hover: hover) and (pointer: fine) {
71
71
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
72
72
  background: var(--seed-color-bg-neutral-weak-pressed);
73
73
  }
@@ -100,13 +100,13 @@
100
100
  --range-color: var(--seed-color-fg-neutral);
101
101
  }
102
102
 
103
- @media (hover: hover) {
103
+ @media (hover: hover) and (pointer: fine) {
104
104
  .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
105
105
  background: var(--seed-color-bg-neutral-weak-pressed);
106
106
  }
107
107
  }
108
108
 
109
- @media (hover: none) {
109
+ @media not all and (hover: hover) and (pointer: fine) {
110
110
  .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
111
111
  background: var(--seed-color-bg-neutral-weak-pressed);
112
112
  }
@@ -121,13 +121,13 @@
121
121
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
122
122
  }
123
123
 
124
- @media (hover: hover) {
124
+ @media (hover: hover) and (pointer: fine) {
125
125
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
126
126
  background: var(--seed-color-bg-neutral-weak-pressed);
127
127
  }
128
128
  }
129
129
 
130
- @media (hover: none) {
130
+ @media not all and (hover: hover) and (pointer: fine) {
131
131
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
132
132
  background: var(--seed-color-bg-neutral-weak-pressed);
133
133
  }
package/vars/component/menu-sheet.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare const vars: {
23
23
  },
24
24
  "header": {
25
25
  "gap": "var(--seed-dimension-x1)",
26
+ "paddingTop": "var(--seed-dimension-x2)",
26
27
  "paddingBottom": "var(--seed-dimension-x4)"
27
28
  },
28
29
  "title": {
package/vars/component/menu-sheet.mjs CHANGED
@@ -23,6 +23,7 @@ export const vars = {
23
23
  },
24
24
  "header": {
25
25
  "gap": "var(--seed-dimension-x1)",
26
+ "paddingTop": "var(--seed-dimension-x2)",
26
27
  "paddingBottom": "var(--seed-dimension-x4)"
27
28
  },
28
29
  "title": {