@seed-design/css 1.2.6 → 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 (88) hide show
  1. package/all.css +323 -200
  2. package/all.layered.css +323 -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-bar.css +93 -0
  14. package/recipes/app-bar.d.ts +1 -1
  15. package/recipes/app-bar.layered.css +90 -0
  16. package/recipes/app-bar.layered.mjs +4 -0
  17. package/recipes/app-bar.mjs +4 -0
  18. package/recipes/app-screen.layered.css +13 -13
  19. package/recipes/avatar-stack.css +7 -0
  20. package/recipes/avatar-stack.d.ts +1 -1
  21. package/recipes/avatar-stack.layered.css +9 -0
  22. package/recipes/avatar-stack.layered.mjs +1 -0
  23. package/recipes/avatar-stack.mjs +1 -0
  24. package/recipes/avatar.css +10 -0
  25. package/recipes/avatar.d.ts +1 -1
  26. package/recipes/avatar.layered.css +12 -0
  27. package/recipes/avatar.layered.mjs +1 -0
  28. package/recipes/avatar.mjs +1 -0
  29. package/recipes/bottom-sheet-handle.css +2 -2
  30. package/recipes/bottom-sheet-handle.layered.css +2 -2
  31. package/recipes/bottom-sheet.layered.css +3 -3
  32. package/recipes/callout.css +12 -12
  33. package/recipes/callout.layered.css +13 -13
  34. package/recipes/checkbox.layered.css +2 -2
  35. package/recipes/checkmark.css +12 -12
  36. package/recipes/checkmark.layered.css +12 -12
  37. package/recipes/chip-tabs.css +12 -12
  38. package/recipes/chip-tabs.layered.css +12 -12
  39. package/recipes/chip.css +12 -12
  40. package/recipes/chip.layered.css +12 -12
  41. package/recipes/contextual-floating-button.css +4 -4
  42. package/recipes/contextual-floating-button.layered.css +4 -4
  43. package/recipes/dialog.layered.css +3 -3
  44. package/recipes/extended-action-sheet.layered.css +3 -3
  45. package/recipes/field.layered.css +2 -2
  46. package/recipes/floating-action-button.css +2 -2
  47. package/recipes/floating-action-button.layered.css +2 -2
  48. package/recipes/help-bubble.layered.css +4 -4
  49. package/recipes/image-frame-reaction-button.layered.css +4 -4
  50. package/recipes/image-frame.css +11 -5
  51. package/recipes/image-frame.layered.css +8 -0
  52. package/recipes/inline-banner.layered.css +3 -3
  53. package/recipes/input-button.css +2 -2
  54. package/recipes/input-button.layered.css +2 -2
  55. package/recipes/list-item.css +8 -8
  56. package/recipes/list-item.layered.css +8 -8
  57. package/recipes/menu-sheet-item.css +2 -2
  58. package/recipes/menu-sheet-item.layered.css +2 -2
  59. package/recipes/menu-sheet.css +2 -2
  60. package/recipes/menu-sheet.layered.css +6 -6
  61. package/recipes/page-banner.css +22 -22
  62. package/recipes/page-banner.layered.css +27 -27
  63. package/recipes/pull-to-refresh.layered.css +1 -1
  64. package/recipes/radio.layered.css +2 -2
  65. package/recipes/radiomark.css +6 -6
  66. package/recipes/radiomark.layered.css +6 -6
  67. package/recipes/reaction-button.css +4 -4
  68. package/recipes/reaction-button.layered.css +4 -4
  69. package/recipes/segmented-control.css +4 -4
  70. package/recipes/segmented-control.layered.css +4 -4
  71. package/recipes/select-box.css +2 -2
  72. package/recipes/select-box.layered.css +2 -2
  73. package/recipes/selectBoxCheckmark.css +2 -2
  74. package/recipes/selectBoxCheckmark.layered.css +2 -2
  75. package/recipes/slider.layered.css +2 -2
  76. package/recipes/snackbar-region.layered.css +1 -1
  77. package/recipes/switch.layered.css +3 -3
  78. package/recipes/switchmark.layered.css +3 -3
  79. package/recipes/tabs.layered.css +4 -4
  80. package/recipes/toggle-button.css +8 -8
  81. package/recipes/toggle-button.layered.css +8 -8
  82. package/vars/color/bg.d.ts +5 -5
  83. package/vars/component/avatar-stack.d.ts +10 -0
  84. package/vars/component/avatar-stack.mjs +10 -0
  85. package/vars/component/avatar.d.ts +42 -0
  86. package/vars/component/avatar.mjs +16 -0
  87. package/vars/component/menu-sheet.d.ts +1 -0
  88. package/vars/component/menu-sheet.mjs +1 -0
package/recipes/contextual-floating-button.css CHANGED
@@ -51,12 +51,12 @@
51
51
  --track-color: var(--seed-color-palette-gray-700);
52
52
  --range-color: var(--seed-color-fg-neutral-inverted);
53
53
  }
54
- @media (hover: hover) {
54
+ @media (hover: hover) and (pointer: fine) {
55
55
  .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
56
56
  background: var(--seed-color-bg-neutral-inverted-pressed);
57
57
  }
58
58
  }
59
- @media (hover: none) {
59
+ @media not all and (hover: hover) and (pointer: fine) {
60
60
  .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
61
61
  background: var(--seed-color-bg-neutral-inverted-pressed);
62
62
  }
@@ -78,12 +78,12 @@
78
78
  --track-color: var(--seed-color-palette-gray-500);
79
79
  --range-color: var(--seed-color-fg-neutral);
80
80
  }
81
- @media (hover: hover) {
81
+ @media (hover: hover) and (pointer: fine) {
82
82
  .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
83
83
  background: var(--seed-color-bg-layer-floating-pressed);
84
84
  }
85
85
  }
86
- @media (hover: none) {
86
+ @media not all and (hover: hover) and (pointer: fine) {
87
87
  .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
88
88
  background: var(--seed-color-bg-layer-floating-pressed);
89
89
  }
package/recipes/contextual-floating-button.layered.css CHANGED
@@ -57,13 +57,13 @@
57
57
  --range-color: var(--seed-color-fg-neutral-inverted);
58
58
  }
59
59
 
60
- @media (hover: hover) {
60
+ @media (hover: hover) and (pointer: fine) {
61
61
  .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
62
62
  background: var(--seed-color-bg-neutral-inverted-pressed);
63
63
  }
64
64
  }
65
65
 
66
- @media (hover: none) {
66
+ @media not all and (hover: hover) and (pointer: fine) {
67
67
  .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
68
68
  background: var(--seed-color-bg-neutral-inverted-pressed);
69
69
  }
@@ -89,13 +89,13 @@
89
89
  --range-color: var(--seed-color-fg-neutral);
90
90
  }
91
91
 
92
- @media (hover: hover) {
92
+ @media (hover: hover) and (pointer: fine) {
93
93
  .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
94
94
  background: var(--seed-color-bg-layer-floating-pressed);
95
95
  }
96
96
  }
97
97
 
98
- @media (hover: none) {
98
+ @media not all and (hover: hover) and (pointer: fine) {
99
99
  .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
100
100
  background: var(--seed-color-bg-layer-floating-pressed);
101
101
  }
package/recipes/dialog.layered.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .seed-dialog__positioner {
3
3
  overscroll-behavior-y: none;
4
4
  --dialog-z-index: 2;
5
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
6
6
  justify-content: center;
7
7
  align-items: center;
8
8
  display: flex;
@@ -12,7 +12,7 @@
12
12
 
13
13
  .seed-dialog__backdrop {
14
14
  background: var(--seed-color-bg-overlay);
15
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
15
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
16
16
  position: fixed;
17
17
  inset: 0;
18
18
  }
@@ -20,7 +20,7 @@
20
20
  .seed-dialog__content {
21
21
  box-sizing: border-box;
22
22
  word-break: break-all;
23
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
23
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
24
24
  background: var(--seed-color-bg-layer-floating);
25
25
  max-width: 272px;
26
26
  margin: auto var(--seed-dimension-x8);
package/recipes/extended-action-sheet.layered.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .seed-extended-action-sheet__positioner {
3
3
  overscroll-behavior-y: none;
4
4
  --sheet-z-index: 2;
5
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
6
6
  justify-content: center;
7
7
  align-items: flex-end;
8
8
  display: flex;
@@ -12,7 +12,7 @@
12
12
 
13
13
  .seed-extended-action-sheet__backdrop {
14
14
  background: var(--seed-color-bg-overlay);
15
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
15
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
16
16
  position: fixed;
17
17
  inset: 0;
18
18
  }
@@ -41,7 +41,7 @@
41
41
  .seed-extended-action-sheet__content {
42
42
  box-sizing: border-box;
43
43
  word-break: break-all;
44
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
44
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
45
45
  background: var(--seed-color-bg-layer-floating);
46
46
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
47
47
  padding-block: var(--seed-dimension-x4);
package/recipes/field.layered.css CHANGED
@@ -31,7 +31,7 @@
31
31
  --seed-prefix-icon-size: var(--seed-dimension-x4);
32
32
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
33
33
  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
34
- --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
34
+ --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
35
35
  display: flex;
36
36
  }
37
37
 
@@ -43,7 +43,7 @@
43
43
  --seed-prefix-icon-size: var(--seed-dimension-x4);
44
44
  --seed-prefix-icon-color: var(--seed-color-fg-critical);
45
45
  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
46
- --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
46
+ --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
47
47
  display: flex;
48
48
  }
49
49
 
package/recipes/floating-action-button.css CHANGED
@@ -32,12 +32,12 @@
32
32
  font-weight: var(--seed-font-weight-bold);
33
33
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
34
34
  }
35
- @media (hover: hover) {
35
+ @media (hover: hover) and (pointer: fine) {
36
36
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
37
37
  background: var(--seed-color-bg-brand-solid-pressed);
38
38
  }
39
39
  }
40
- @media (hover: none) {
40
+ @media not all and (hover: hover) and (pointer: fine) {
41
41
  .seed-floating-action-button__root:is(:active, [data-active]) {
42
42
  background: var(--seed-color-bg-brand-solid-pressed);
43
43
  }
package/recipes/floating-action-button.layered.css CHANGED
@@ -37,13 +37,13 @@
37
37
  overflow: hidden;
38
38
  }
39
39
 
40
- @media (hover: hover) {
40
+ @media (hover: hover) and (pointer: fine) {
41
41
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
42
42
  background: var(--seed-color-bg-brand-solid-pressed);
43
43
  }
44
44
  }
45
45
 
46
- @media (hover: none) {
46
+ @media not all and (hover: hover) and (pointer: fine) {
47
47
  .seed-floating-action-button__root:is(:active, [data-active]) {
48
48
  background: var(--seed-color-bg-brand-solid-pressed);
49
49
  }
package/recipes/help-bubble.layered.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer seed-components {
2
2
  .seed-help-bubble__positioner {
3
3
  --popover-z-index: 99;
4
- z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
5
5
  }
6
6
 
7
7
  .seed-help-bubble__content {
@@ -80,10 +80,10 @@
80
80
  .seed-help-bubble__closeButton {
81
81
  cursor: pointer;
82
82
  padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
83
- margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
83
+ margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
84
84
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
85
- margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
86
- margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
85
+ margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
86
+ margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
87
87
  color: var(--seed-color-fg-neutral-inverted);
88
88
  --seed-icon-size: var(--seed-dimension-x3_5);
89
89
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
package/recipes/image-frame-reaction-button.layered.css CHANGED
@@ -15,10 +15,10 @@
15
15
 
16
16
  .seed-image-frame-reaction-button__root:before {
17
17
  content: "";
18
- top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
19
- right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
20
- bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
21
- left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
18
+ top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
19
+ right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
20
+ bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
21
+ left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
22
22
  outline: var(--seed-dimension-x0_5) solid transparent;
23
23
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
24
24
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
package/recipes/image-frame.css CHANGED
@@ -1,18 +1,24 @@
1
1
  .seed-image-frame__root {
2
2
  position: relative;
3
3
  overflow: hidden;
4
- border-radius: inherit
4
+ border-radius: inherit;
5
5
  }
6
6
  .seed-image-frame__content {
7
7
  display: block;
8
8
  width: 100%;
9
9
  height: 100%;
10
10
  object-fit: cover;
11
- border-radius: inherit
11
+ border-radius: inherit;
12
+ }
13
+ .seed-image-frame__content:not([data-loading-state='loaded']) {
14
+ display: none;
12
15
  }
13
16
  .seed-image-frame__fallback {
14
17
  width: 100%;
15
- height: 100%
18
+ height: 100%;
19
+ }
20
+ .seed-image-frame__fallback[data-loading-state='loaded'] {
21
+ display: none;
16
22
  }
17
23
  .seed-image-frame__root--stroke_true::after {
18
24
  content: '';
@@ -23,8 +29,8 @@
23
29
  bottom: 0;
24
30
  pointer-events: none;
25
31
  border-radius: inherit;
26
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
32
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
27
33
  }
28
34
  .seed-image-frame__root--rounded_true {
29
- border-radius: var(--seed-radius-r2)
35
+ border-radius: var(--seed-radius-r2);
30
36
  }
package/recipes/image-frame.layered.css CHANGED
@@ -13,11 +13,19 @@
13
13
  display: block;
14
14
  }
15
15
 
16
+ .seed-image-frame__content:not([data-loading-state="loaded"]) {
17
+ display: none;
18
+ }
19
+
16
20
  .seed-image-frame__fallback {
17
21
  width: 100%;
18
22
  height: 100%;
19
23
  }
20
24
 
25
+ .seed-image-frame__fallback[data-loading-state="loaded"] {
26
+ display: none;
27
+ }
28
+
21
29
  .seed-image-frame__root--stroke_true:after {
22
30
  content: "";
23
31
  pointer-events: none;
package/recipes/inline-banner.layered.css CHANGED
@@ -10,7 +10,7 @@
10
10
  padding-block: var(--seed-dimension-x2_5);
11
11
  --seed-prefix-icon-size: var(--seed-dimension-x4);
12
12
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
13
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
13
+ --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
14
14
  --seed-suffix-icon-size: var(--seed-dimension-x4);
15
15
  --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
16
16
  --seed-suffix-icon-align-self: center;
@@ -67,8 +67,8 @@
67
67
  .seed-inline-banner__closeButton {
68
68
  width: var(--seed-dimension-x10);
69
69
  height: var(--seed-dimension-x10);
70
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
71
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
70
+ margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
71
+ margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
72
72
  --seed-suffix-icon-margin-left: initial;
73
73
  cursor: pointer;
74
74
  background-color: #0000;
package/recipes/input-button.css CHANGED
@@ -43,12 +43,12 @@
43
43
  cursor: not-allowed;
44
44
  background-color: var(--seed-color-bg-disabled);
45
45
  }
46
- @media (hover: hover) {
46
+ @media (hover: hover) and (pointer: fine) {
47
47
  .seed-input-button__button:not([data-disabled]):not(:is([data-readonly])):is(:hover, [data-hover]) {
48
48
  background-color: var(--seed-color-bg-transparent-pressed);
49
49
  }
50
50
  }
51
- @media (hover: none) {
51
+ @media not all and (hover: hover) and (pointer: fine) {
52
52
  .seed-input-button__button:not([data-disabled]):not(:is([data-readonly])):is(:active, [data-active]) {
53
53
  background-color: var(--seed-color-bg-transparent-pressed);
54
54
  }
package/recipes/input-button.layered.css CHANGED
@@ -40,13 +40,13 @@
40
40
  background-color: var(--seed-color-bg-disabled);
41
41
  }
42
42
 
43
- @media (hover: hover) {
43
+ @media (hover: hover) and (pointer: fine) {
44
44
  .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
45
45
  background-color: var(--seed-color-bg-transparent-pressed);
46
46
  }
47
47
  }
48
48
 
49
- @media (hover: none) {
49
+ @media not all and (hover: hover) and (pointer: fine) {
50
50
  .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
51
51
  background-color: var(--seed-color-bg-transparent-pressed);
52
52
  }
package/recipes/list-item.css CHANGED
@@ -93,7 +93,7 @@
93
93
  transition-duration: var(--seed-duration-color-transition);
94
94
  transition-timing-function: var(--seed-timing-function-easing);
95
95
  }
96
- @media (hover: hover) {
96
+ @media (hover: hover) and (pointer: fine) {
97
97
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
98
98
  background-color: var(--seed-color-bg-transparent-pressed);
99
99
  left: var(--seed-dimension-x1_5);
@@ -101,7 +101,7 @@
101
101
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
102
102
  }
103
103
  }
104
- @media (hover: none) {
104
+ @media not all and (hover: hover) and (pointer: fine) {
105
105
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
106
106
  background-color: var(--seed-color-bg-transparent-pressed);
107
107
  left: var(--seed-dimension-x1_5);
@@ -109,7 +109,7 @@
109
109
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
110
110
  }
111
111
  }
112
- @media (hover: hover) {
112
+ @media (hover: hover) and (pointer: fine) {
113
113
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]::before {
114
114
  background-color: var(--seed-color-bg-transparent-pressed);
115
115
  left: var(--seed-dimension-x1_5);
@@ -117,7 +117,7 @@
117
117
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
118
118
  }
119
119
  }
120
- @media (hover: none) {
120
+ @media not all and (hover: hover) and (pointer: fine) {
121
121
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
122
122
  background-color: var(--seed-color-bg-transparent-pressed);
123
123
  left: var(--seed-dimension-x1_5);
@@ -147,22 +147,22 @@
147
147
  .seed-list-item__content--highlighted_true::before {
148
148
  background-color: var(--seed-color-bg-brand-weak);
149
149
  }
150
- @media (hover: hover) {
150
+ @media (hover: hover) and (pointer: fine) {
151
151
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
152
152
  background-color: var(--seed-color-bg-brand-weak-pressed);
153
153
  }
154
154
  }
155
- @media (hover: none) {
155
+ @media not all and (hover: hover) and (pointer: fine) {
156
156
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
157
157
  background-color: var(--seed-color-bg-brand-weak-pressed);
158
158
  }
159
159
  }
160
- @media (hover: hover) {
160
+ @media (hover: hover) and (pointer: fine) {
161
161
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]::before {
162
162
  background-color: var(--seed-color-bg-brand-weak-pressed);
163
163
  }
164
164
  }
165
- @media (hover: none) {
165
+ @media not all and (hover: hover) and (pointer: fine) {
166
166
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
167
167
  background-color: var(--seed-color-bg-brand-weak-pressed);
168
168
  }
package/recipes/list-item.layered.css CHANGED
@@ -98,7 +98,7 @@
98
98
  inset: 0;
99
99
  }
100
100
 
101
- @media (hover: hover) {
101
+ @media (hover: hover) and (pointer: fine) {
102
102
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
103
103
  background-color: var(--seed-color-bg-transparent-pressed);
104
104
  left: var(--seed-dimension-x1_5);
@@ -107,7 +107,7 @@
107
107
  }
108
108
  }
109
109
 
110
- @media (hover: none) {
110
+ @media not all and (hover: hover) and (pointer: fine) {
111
111
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
112
112
  background-color: var(--seed-color-bg-transparent-pressed);
113
113
  left: var(--seed-dimension-x1_5);
@@ -116,7 +116,7 @@
116
116
  }
117
117
  }
118
118
 
119
- @media (hover: hover) {
119
+ @media (hover: hover) and (pointer: fine) {
120
120
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
121
121
  background-color: var(--seed-color-bg-transparent-pressed);
122
122
  left: var(--seed-dimension-x1_5);
@@ -125,7 +125,7 @@
125
125
  }
126
126
  }
127
127
 
128
- @media (hover: none) {
128
+ @media not all and (hover: hover) and (pointer: fine) {
129
129
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
130
130
  background-color: var(--seed-color-bg-transparent-pressed);
131
131
  left: var(--seed-dimension-x1_5);
@@ -161,25 +161,25 @@
161
161
  background-color: var(--seed-color-bg-brand-weak);
162
162
  }
163
163
 
164
- @media (hover: hover) {
164
+ @media (hover: hover) and (pointer: fine) {
165
165
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
166
166
  background-color: var(--seed-color-bg-brand-weak-pressed);
167
167
  }
168
168
  }
169
169
 
170
- @media (hover: none) {
170
+ @media not all and (hover: hover) and (pointer: fine) {
171
171
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
172
172
  background-color: var(--seed-color-bg-brand-weak-pressed);
173
173
  }
174
174
  }
175
175
 
176
- @media (hover: hover) {
176
+ @media (hover: hover) and (pointer: fine) {
177
177
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
178
178
  background-color: var(--seed-color-bg-brand-weak-pressed);
179
179
  }
180
180
  }
181
181
 
182
- @media (hover: none) {
182
+ @media not all and (hover: hover) and (pointer: fine) {
183
183
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
184
184
  background-color: var(--seed-color-bg-brand-weak-pressed);
185
185
  }
package/recipes/menu-sheet-item.css CHANGED
@@ -13,12 +13,12 @@
13
13
  border: none;
14
14
  font-family: inherit;
15
15
  }
16
- @media (hover: hover) {
16
+ @media (hover: hover) and (pointer: fine) {
17
17
  .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
18
18
  background-color: var(--seed-color-bg-neutral-weak-pressed);
19
19
  }
20
20
  }
21
- @media (hover: none) {
21
+ @media not all and (hover: hover) and (pointer: fine) {
22
22
  .seed-menu-sheet-item__root:is(:active, [data-active]) {
23
23
  background-color: var(--seed-color-bg-neutral-weak-pressed);
24
24
  }
package/recipes/menu-sheet-item.layered.css CHANGED
@@ -15,13 +15,13 @@
15
15
  display: flex;
16
16
  }
17
17
 
18
- @media (hover: hover) {
18
+ @media (hover: hover) and (pointer: fine) {
19
19
  .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
20
20
  background-color: var(--seed-color-bg-neutral-weak-pressed);
21
21
  }
22
22
  }
23
23
 
24
- @media (hover: none) {
24
+ @media not all and (hover: hover) and (pointer: fine) {
25
25
  .seed-menu-sheet-item__root:is(:active, [data-active]) {
26
26
  background-color: var(--seed-color-bg-neutral-weak-pressed);
27
27
  }
package/recipes/menu-sheet.css CHANGED
@@ -96,12 +96,12 @@
96
96
  font-weight: var(--seed-font-weight-medium);
97
97
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
98
98
  }
99
- @media (hover: hover) {
99
+ @media (hover: hover) and (pointer: fine) {
100
100
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
101
101
  background-color: var(--seed-color-bg-neutral-weak-pressed);
102
102
  }
103
103
  }
104
- @media (hover: none) {
104
+ @media not all and (hover: hover) and (pointer: fine) {
105
105
  .seed-menu-sheet__closeButton:is(:active, [data-active]) {
106
106
  background-color: var(--seed-color-bg-neutral-weak-pressed);
107
107
  }
package/recipes/menu-sheet.layered.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .seed-menu-sheet__positioner {
3
3
  overscroll-behavior-y: none;
4
4
  --sheet-z-index: 2;
5
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
6
6
  justify-content: center;
7
7
  align-items: flex-end;
8
8
  display: flex;
@@ -12,7 +12,7 @@
12
12
 
13
13
  .seed-menu-sheet__backdrop {
14
14
  background: var(--seed-color-bg-overlay);
15
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
15
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
16
16
  position: fixed;
17
17
  inset: 0;
18
18
  }
@@ -20,12 +20,12 @@
20
20
  .seed-menu-sheet__content {
21
21
  box-sizing: border-box;
22
22
  word-break: break-all;
23
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
23
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
24
24
  background: var(--seed-color-bg-layer-floating);
25
25
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
26
26
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
27
27
  padding-top: var(--seed-dimension-x4);
28
- padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
28
+ padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
29
29
  border-top-left-radius: var(--seed-radius-r5);
30
30
  border-top-right-radius: var(--seed-radius-r5);
31
31
  flex-direction: column;
@@ -101,13 +101,13 @@
101
101
  display: flex;
102
102
  }
103
103
 
104
- @media (hover: hover) {
104
+ @media (hover: hover) and (pointer: fine) {
105
105
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
106
106
  background-color: var(--seed-color-bg-neutral-weak-pressed);
107
107
  }
108
108
  }
109
109
 
110
- @media (hover: none) {
110
+ @media not all and (hover: hover) and (pointer: fine) {
111
111
  .seed-menu-sheet__closeButton:is(:active, [data-active]) {
112
112
  background-color: var(--seed-color-bg-neutral-weak-pressed);
113
113
  }