@seed-design/css 2.1.3 → 2.2.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 (106) hide show
  1. package/all.css +199 -307
  2. package/all.layered.css +199 -307
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +14 -0
  6. package/base.layered.css +14 -0
  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.css +11 -25
  11. package/recipes/accordion.layered.css +9 -17
  12. package/recipes/action-button.css +14 -1
  13. package/recipes/action-button.layered.css +18 -1
  14. package/recipes/app-bar-main.css +2 -4
  15. package/recipes/app-bar-main.layered.css +3 -5
  16. package/recipes/app-bar.css +3 -8
  17. package/recipes/app-bar.layered.css +2 -4
  18. package/recipes/app-screen.css +5 -10
  19. package/recipes/app-screen.layered.css +6 -11
  20. package/recipes/aspect-ratio.css +1 -4
  21. package/recipes/attachment-input-item.css +5 -14
  22. package/recipes/attachment-input-item.layered.css +4 -7
  23. package/recipes/attachment-input.css +4 -8
  24. package/recipes/attachment-input.layered.css +4 -8
  25. package/recipes/avatar.css +1 -4
  26. package/recipes/badge.css +4 -8
  27. package/recipes/badge.layered.css +4 -8
  28. package/recipes/bottom-sheet.css +7 -20
  29. package/recipes/bottom-sheet.layered.css +5 -9
  30. package/recipes/callout.css +2 -4
  31. package/recipes/callout.layered.css +2 -4
  32. package/recipes/checkmark.css +1 -4
  33. package/recipes/chip-tabs.css +2 -4
  34. package/recipes/chip-tabs.layered.css +2 -4
  35. package/recipes/chip.css +4 -8
  36. package/recipes/chip.layered.css +4 -8
  37. package/recipes/contextual-floating-button.css +2 -4
  38. package/recipes/contextual-floating-button.layered.css +2 -4
  39. package/recipes/dialog.css +4 -12
  40. package/recipes/dialog.layered.css +2 -4
  41. package/recipes/field.css +2 -4
  42. package/recipes/field.layered.css +2 -4
  43. package/recipes/floating-action-button.css +1 -2
  44. package/recipes/floating-action-button.layered.css +1 -2
  45. package/recipes/help-bubble.css +3 -6
  46. package/recipes/help-bubble.layered.css +3 -6
  47. package/recipes/image-frame-indicator.css +2 -4
  48. package/recipes/image-frame-indicator.layered.css +2 -4
  49. package/recipes/image-frame-reaction-button.css +1 -4
  50. package/recipes/image-frame-reaction-button.layered.css +1 -4
  51. package/recipes/image-frame.css +1 -4
  52. package/recipes/input-button.css +6 -16
  53. package/recipes/input-button.layered.css +4 -8
  54. package/recipes/layout.css +1 -2
  55. package/recipes/layout.layered.css +1 -2
  56. package/recipes/list-header.css +2 -4
  57. package/recipes/list-header.layered.css +2 -4
  58. package/recipes/list-item.css +9 -21
  59. package/recipes/list-item.layered.css +7 -13
  60. package/recipes/manner-temp-badge.css +2 -4
  61. package/recipes/manner-temp-badge.layered.css +2 -4
  62. package/recipes/menu-item.css +14 -29
  63. package/recipes/menu-item.layered.css +13 -25
  64. package/recipes/menu-sheet-item.css +2 -4
  65. package/recipes/menu-sheet-item.layered.css +2 -4
  66. package/recipes/menu-sheet.css +6 -16
  67. package/recipes/menu-sheet.layered.css +5 -9
  68. package/recipes/menu.css +10 -20
  69. package/recipes/menu.layered.css +10 -20
  70. package/recipes/notification-badge.css +2 -4
  71. package/recipes/notification-badge.layered.css +2 -4
  72. package/recipes/page-banner.css +2 -4
  73. package/recipes/page-banner.layered.css +2 -4
  74. package/recipes/reaction-button.css +4 -8
  75. package/recipes/reaction-button.layered.css +4 -8
  76. package/recipes/segmented-control.css +3 -6
  77. package/recipes/segmented-control.layered.css +3 -6
  78. package/recipes/select-box-checkmark.css +1 -4
  79. package/recipes/select-box.css +4 -10
  80. package/recipes/select-box.layered.css +3 -6
  81. package/recipes/side-navigation-menu-item.css +3 -8
  82. package/recipes/side-navigation-menu-item.layered.css +4 -5
  83. package/recipes/side-navigation.css +1 -2
  84. package/recipes/side-navigation.layered.css +3 -1
  85. package/recipes/side-panel.css +13 -18
  86. package/recipes/side-panel.layered.css +12 -10
  87. package/recipes/slider-marker.css +1 -2
  88. package/recipes/slider-marker.layered.css +1 -2
  89. package/recipes/slider.css +3 -8
  90. package/recipes/slider.layered.css +2 -4
  91. package/recipes/snackbar-region.css +2 -4
  92. package/recipes/snackbar-region.layered.css +2 -4
  93. package/recipes/snackbar.css +4 -8
  94. package/recipes/snackbar.layered.css +4 -8
  95. package/recipes/tabs.css +8 -16
  96. package/recipes/tabs.layered.css +8 -16
  97. package/recipes/text-input.css +10 -22
  98. package/recipes/text-input.layered.css +9 -18
  99. package/recipes/toggle-button.css +4 -8
  100. package/recipes/toggle-button.layered.css +4 -8
  101. package/vars/component/action-button.d.ts +23 -1
  102. package/vars/component/action-button.mjs +23 -1
  103. package/vars/component/list-item.d.ts +2 -2
  104. package/vars/component/list-item.mjs +1 -1
  105. package/vars/scale.d.ts +3 -0
  106. package/vars/scale.mjs +3 -0
package/recipes/input-button.layered.css CHANGED
@@ -166,8 +166,7 @@
166
166
  .seed-input-button__root--size_large {
167
167
  height: var(--seed-dimension-x13);
168
168
  gap: var(--seed-dimension-x2_5);
169
- padding-left: var(--seed-dimension-x4);
170
- padding-right: var(--seed-dimension-x4);
169
+ padding-inline: var(--seed-dimension-x4);
171
170
  }
172
171
 
173
172
  .seed-input-button__button--size_large {
@@ -201,8 +200,7 @@
201
200
  .seed-input-button__root--size_medium {
202
201
  height: var(--seed-dimension-x10);
203
202
  gap: var(--seed-dimension-x2);
204
- padding-left: var(--seed-dimension-x3_5);
205
- padding-right: var(--seed-dimension-x3_5);
203
+ padding-inline: var(--seed-dimension-x3_5);
206
204
  }
207
205
 
208
206
  .seed-input-button__button--size_medium {
@@ -236,16 +234,14 @@
236
234
  .seed-input-button__root--size_responsive {
237
235
  height: var(--seed-dimension-x13);
238
236
  gap: var(--seed-dimension-x2_5);
239
- padding-left: var(--seed-dimension-x4);
240
- padding-right: var(--seed-dimension-x4);
237
+ padding-inline: var(--seed-dimension-x4);
241
238
  }
242
239
 
243
240
  @media (width >= 1280px) {
244
241
  .seed-input-button__root--size_responsive {
245
242
  height: var(--seed-dimension-x10);
246
243
  gap: var(--seed-dimension-x2);
247
- padding-left: var(--seed-dimension-x3_5);
248
- padding-right: var(--seed-dimension-x3_5);
244
+ padding-inline: var(--seed-dimension-x3_5);
249
245
  }
250
246
  }
251
247
 
package/recipes/layout.css CHANGED
@@ -5,8 +5,7 @@
5
5
  }
6
6
  .seed-layout__content {
7
7
  width: 100%;
8
- margin-left: auto;
9
- margin-right: auto
8
+ margin-inline: auto
10
9
  }
11
10
  @media (min-width: 768px) {
12
11
  .seed-layout__content--density_low {
package/recipes/layout.layered.css CHANGED
@@ -7,8 +7,7 @@
7
7
 
8
8
  .seed-layout__content {
9
9
  width: 100%;
10
- margin-left: auto;
11
- margin-right: auto;
10
+ margin-inline: auto;
12
11
  }
13
12
 
14
13
  @media (width >= 768px) {
package/recipes/list-header.css CHANGED
@@ -5,10 +5,8 @@
5
5
  gap: var(--seed-dimension-x2_5);
6
6
  justify-content: space-between;
7
7
  box-sizing: border-box;
8
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
9
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
10
- padding-top: var(--seed-dimension-x2);
11
- padding-bottom: var(--seed-dimension-x2);
8
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
9
+ padding-block: var(--seed-dimension-x2);
12
10
  font-size: var(--seed-font-size-t4);
13
11
  line-height: var(--seed-line-height-t4)
14
12
  }
package/recipes/list-header.layered.css CHANGED
@@ -4,10 +4,8 @@
4
4
  gap: var(--seed-dimension-x2_5);
5
5
  box-sizing: border-box;
6
6
  width: 100%;
7
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
8
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
9
- padding-top: var(--seed-dimension-x2);
10
- padding-bottom: var(--seed-dimension-x2);
7
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
8
+ padding-block: var(--seed-dimension-x2);
11
9
  font-size: var(--seed-font-size-t4);
12
10
  line-height: var(--seed-line-height-t4);
13
11
  justify-content: space-between;
package/recipes/list-item.css CHANGED
@@ -8,10 +8,8 @@
8
8
  display: flex;
9
9
  width: 100%;
10
10
  isolation: isolate;
11
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
12
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
13
- padding-top: var(--seed-dimension-x3);
14
- padding-bottom: var(--seed-dimension-x3);
11
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
12
+ padding-block: var(--seed-dimension-x3);
15
13
  --seed-box-align-items: center;
16
14
  align-items: var(--seed-box-align-items);
17
15
  }
@@ -86,10 +84,7 @@
86
84
  .seed-list-item__content::after {
87
85
  content: '';
88
86
  position: absolute;
89
- top: 0;
90
- right: 0;
91
- bottom: 0;
92
- left: 0;
87
+ inset: 0;
93
88
  outline: var(--seed-dimension-x0_5) solid transparent;
94
89
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
95
90
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -104,44 +99,37 @@
104
99
  .seed-list-item__content::before {
105
100
  content: '';
106
101
  position: absolute;
107
- top: 0;
108
- right: 0;
109
- bottom: 0;
110
- left: 0;
102
+ inset: 0;
111
103
  z-index: -1;
112
- transition-property: background-color, left, right, border-radius;
104
+ transition-property: background-color, inset-inline, border-radius;
113
105
  transition-duration: var(--seed-duration-color-transition);
114
106
  transition-timing-function: var(--seed-timing-function-easing);
115
107
  }
116
108
  @media (hover: hover) and (pointer: fine) {
117
109
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
118
110
  background-color: var(--seed-color-bg-transparent-pressed);
119
- left: var(--seed-dimension-x1_5);
120
- right: var(--seed-dimension-x1_5);
111
+ inset-inline: var(--seed-dimension-x1_5);
121
112
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
122
113
  }
123
114
  }
124
115
  @media not all and (hover: hover) and (pointer: fine) {
125
116
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
126
117
  background-color: var(--seed-color-bg-transparent-pressed);
127
- left: var(--seed-dimension-x1_5);
128
- right: var(--seed-dimension-x1_5);
118
+ inset-inline: var(--seed-dimension-x1_5);
129
119
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
130
120
  }
131
121
  }
132
122
  @media (hover: hover) and (pointer: fine) {
133
123
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]::before {
134
124
  background-color: var(--seed-color-bg-transparent-pressed);
135
- left: var(--seed-dimension-x1_5);
136
- right: var(--seed-dimension-x1_5);
125
+ inset-inline: var(--seed-dimension-x1_5);
137
126
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
138
127
  }
139
128
  }
140
129
  @media not all and (hover: hover) and (pointer: fine) {
141
130
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
142
131
  background-color: var(--seed-color-bg-transparent-pressed);
143
- left: var(--seed-dimension-x1_5);
144
- right: var(--seed-dimension-x1_5);
132
+ inset-inline: var(--seed-dimension-x1_5);
145
133
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
146
134
  }
147
135
  }
package/recipes/list-item.layered.css CHANGED
@@ -5,10 +5,8 @@
5
5
  -moz-osx-font-smoothing: grayscale;
6
6
  isolation: isolate;
7
7
  width: 100%;
8
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
9
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
10
- padding-top: var(--seed-dimension-x3);
11
- padding-bottom: var(--seed-dimension-x3);
8
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
9
+ padding-block: var(--seed-dimension-x3);
12
10
  --seed-box-align-items: center;
13
11
  align-items: var(--seed-box-align-items);
14
12
  border: none;
@@ -111,7 +109,7 @@
111
109
  .seed-list-item__content:before {
112
110
  content: "";
113
111
  z-index: -1;
114
- transition-property: background-color, left, right, border-radius;
112
+ transition-property: background-color, inset-inline, border-radius;
115
113
  transition-duration: var(--seed-duration-color-transition);
116
114
  transition-timing-function: var(--seed-timing-function-easing);
117
115
  position: absolute;
@@ -121,8 +119,7 @@
121
119
  @media (hover: hover) and (pointer: fine) {
122
120
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
123
121
  background-color: var(--seed-color-bg-transparent-pressed);
124
- left: var(--seed-dimension-x1_5);
125
- right: var(--seed-dimension-x1_5);
122
+ inset-inline: var(--seed-dimension-x1_5);
126
123
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
127
124
  }
128
125
  }
@@ -130,8 +127,7 @@
130
127
  @media not all and (hover: hover) and (pointer: fine) {
131
128
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
132
129
  background-color: var(--seed-color-bg-transparent-pressed);
133
- left: var(--seed-dimension-x1_5);
134
- right: var(--seed-dimension-x1_5);
130
+ inset-inline: var(--seed-dimension-x1_5);
135
131
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
136
132
  }
137
133
  }
@@ -139,8 +135,7 @@
139
135
  @media (hover: hover) and (pointer: fine) {
140
136
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
141
137
  background-color: var(--seed-color-bg-transparent-pressed);
142
- left: var(--seed-dimension-x1_5);
143
- right: var(--seed-dimension-x1_5);
138
+ inset-inline: var(--seed-dimension-x1_5);
144
139
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
145
140
  }
146
141
  }
@@ -148,8 +143,7 @@
148
143
  @media not all and (hover: hover) and (pointer: fine) {
149
144
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
150
145
  background-color: var(--seed-color-bg-transparent-pressed);
151
- left: var(--seed-dimension-x1_5);
152
- right: var(--seed-dimension-x1_5);
146
+ inset-inline: var(--seed-dimension-x1_5);
153
147
  border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
154
148
  }
155
149
  }
package/recipes/manner-temp-badge.css CHANGED
@@ -10,10 +10,8 @@
10
10
  text-decoration: none;
11
11
  border-radius: var(--seed-radius-full);
12
12
  min-height: var(--seed-dimension-x5);
13
- padding-left: var(--seed-dimension-x1_5);
14
- padding-right: var(--seed-dimension-x1_5);
15
- padding-top: var(--seed-dimension-x0_5);
16
- padding-bottom: var(--seed-dimension-x0_5);
13
+ padding-inline: var(--seed-dimension-x1_5);
14
+ padding-block: var(--seed-dimension-x0_5);
17
15
  font-size: var(--seed-font-size-t1);
18
16
  line-height: var(--seed-line-height-t1);
19
17
  font-weight: var(--seed-font-weight-bold)
package/recipes/manner-temp-badge.layered.css CHANGED
@@ -7,10 +7,8 @@
7
7
  -moz-osx-font-smoothing: grayscale;
8
8
  border-radius: var(--seed-radius-full);
9
9
  min-height: var(--seed-dimension-x5);
10
- padding-left: var(--seed-dimension-x1_5);
11
- padding-right: var(--seed-dimension-x1_5);
12
- padding-top: var(--seed-dimension-x0_5);
13
- padding-bottom: var(--seed-dimension-x0_5);
10
+ padding-inline: var(--seed-dimension-x1_5);
11
+ padding-block: var(--seed-dimension-x0_5);
14
12
  font-size: var(--seed-font-size-t1);
15
13
  line-height: var(--seed-line-height-t1);
16
14
  font-weight: var(--seed-font-weight-bold);
package/recipes/menu-item.css CHANGED
@@ -19,22 +19,17 @@
19
19
  .seed-menu-item__root::before {
20
20
  content: "";
21
21
  position: absolute;
22
- top: 0;
23
- bottom: 0;
24
- left: 0;
25
- right: 0;
22
+ inset: 0;
26
23
  z-index: -1;
27
- transition-property: background-color, left, right, border-radius;
24
+ transition-property: background-color, inset-inline, border-radius;
28
25
  transition-duration: var(--seed-duration-color-transition);
29
26
  transition-timing-function: var(--seed-timing-function-easing);
30
27
  }
31
28
  .seed-menu-item__root::after {
32
29
  content: "";
33
30
  position: absolute;
34
- top: 0;
35
- right: var(--seed-dimension-x2);
36
- bottom: 0;
37
- left: var(--seed-dimension-x2);
31
+ inset-block: 0;
32
+ inset-inline: var(--seed-dimension-x2);
38
33
  border-radius: var(--seed-radius-r3);
39
34
  outline: var(--seed-dimension-x0_5) solid transparent;
40
35
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -43,16 +38,14 @@
43
38
  @media (hover: hover) and (pointer: fine) {
44
39
  .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
45
40
  background-color: var(--seed-color-bg-transparent-pressed);
46
- left: var(--seed-dimension-x2);
47
- right: var(--seed-dimension-x2);
41
+ inset-inline: var(--seed-dimension-x2);
48
42
  border-radius: var(--seed-radius-r3);
49
43
  }
50
44
  }
51
45
  @media not all and (hover: hover) and (pointer: fine) {
52
46
  .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
53
47
  background-color: var(--seed-color-bg-transparent-pressed);
54
- left: var(--seed-dimension-x2);
55
- right: var(--seed-dimension-x2);
48
+ inset-inline: var(--seed-dimension-x2);
56
49
  border-radius: var(--seed-radius-r3);
57
50
  }
58
51
  }
@@ -85,10 +78,8 @@
85
78
  color: var(--seed-color-fg-disabled);
86
79
  }
87
80
  .seed-menu-item__root--size_medium {
88
- padding-top: var(--seed-dimension-x3);
89
- padding-bottom: var(--seed-dimension-x3);
90
- padding-left: var(--seed-dimension-x4);
91
- padding-right: var(--seed-dimension-x4);
81
+ padding-block: var(--seed-dimension-x3);
82
+ padding-inline: var(--seed-dimension-x4);
92
83
  gap: var(--seed-dimension-x3);
93
84
  --seed-prefix-icon-size: 22px;
94
85
  --seed-suffix-icon-size: 18px;
@@ -102,10 +93,8 @@
102
93
  line-height: var(--seed-line-height-t3);
103
94
  }
104
95
  .seed-menu-item__root--size_small {
105
- padding-top: var(--seed-dimension-x2_5);
106
- padding-bottom: var(--seed-dimension-x2_5);
107
- padding-left: var(--seed-dimension-x4);
108
- padding-right: var(--seed-dimension-x4);
96
+ padding-block: var(--seed-dimension-x2_5);
97
+ padding-inline: var(--seed-dimension-x4);
109
98
  gap: var(--seed-dimension-x2);
110
99
  --seed-prefix-icon-size: 18px;
111
100
  --seed-suffix-icon-size: 16px;
@@ -119,20 +108,16 @@
119
108
  line-height: var(--seed-line-height-t2);
120
109
  }
121
110
  .seed-menu-item__root--size_responsive {
122
- padding-top: var(--seed-dimension-x3);
123
- padding-bottom: var(--seed-dimension-x3);
124
- padding-left: var(--seed-dimension-x4);
125
- padding-right: var(--seed-dimension-x4);
111
+ padding-block: var(--seed-dimension-x3);
112
+ padding-inline: var(--seed-dimension-x4);
126
113
  gap: var(--seed-dimension-x3);
127
114
  --seed-prefix-icon-size: 22px;
128
115
  --seed-suffix-icon-size: 18px;
129
116
  }
130
117
  @media (min-width: 1280px) {
131
118
  .seed-menu-item__root--size_responsive {
132
- padding-top: var(--seed-dimension-x2_5);
133
- padding-bottom: var(--seed-dimension-x2_5);
134
- padding-left: var(--seed-dimension-x4);
135
- padding-right: var(--seed-dimension-x4);
119
+ padding-block: var(--seed-dimension-x2_5);
120
+ padding-inline: var(--seed-dimension-x4);
136
121
  gap: var(--seed-dimension-x2);
137
122
  --seed-prefix-icon-size: 18px;
138
123
  --seed-suffix-icon-size: 16px;
package/recipes/menu-item.layered.css CHANGED
@@ -21,7 +21,7 @@
21
21
  .seed-menu-item__root:before {
22
22
  content: "";
23
23
  z-index: -1;
24
- transition-property: background-color, left, right, border-radius;
24
+ transition-property: background-color, inset-inline, border-radius;
25
25
  transition-duration: var(--seed-duration-color-transition);
26
26
  transition-timing-function: var(--seed-timing-function-easing);
27
27
  position: absolute;
@@ -30,10 +30,8 @@
30
30
 
31
31
  .seed-menu-item__root:after {
32
32
  content: "";
33
- top: 0;
34
- right: var(--seed-dimension-x2);
35
- bottom: 0;
36
- left: var(--seed-dimension-x2);
33
+ inset-block: 0;
34
+ inset-inline: var(--seed-dimension-x2);
37
35
  border-radius: var(--seed-radius-r3);
38
36
  outline: var(--seed-dimension-x0_5) solid transparent;
39
37
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -44,8 +42,7 @@
44
42
  @media (hover: hover) and (pointer: fine) {
45
43
  .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
46
44
  background-color: var(--seed-color-bg-transparent-pressed);
47
- left: var(--seed-dimension-x2);
48
- right: var(--seed-dimension-x2);
45
+ inset-inline: var(--seed-dimension-x2);
49
46
  border-radius: var(--seed-radius-r3);
50
47
  }
51
48
  }
@@ -53,8 +50,7 @@
53
50
  @media not all and (hover: hover) and (pointer: fine) {
54
51
  .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
55
52
  background-color: var(--seed-color-bg-transparent-pressed);
56
- left: var(--seed-dimension-x2);
57
- right: var(--seed-dimension-x2);
53
+ inset-inline: var(--seed-dimension-x2);
58
54
  border-radius: var(--seed-radius-r3);
59
55
  }
60
56
  }
@@ -95,10 +91,8 @@
95
91
  }
96
92
 
97
93
  .seed-menu-item__root--size_medium {
98
- padding-top: var(--seed-dimension-x3);
99
- padding-bottom: var(--seed-dimension-x3);
100
- padding-left: var(--seed-dimension-x4);
101
- padding-right: var(--seed-dimension-x4);
94
+ padding-block: var(--seed-dimension-x3);
95
+ padding-inline: var(--seed-dimension-x4);
102
96
  gap: var(--seed-dimension-x3);
103
97
  --seed-prefix-icon-size: 22px;
104
98
  --seed-suffix-icon-size: 18px;
@@ -115,10 +109,8 @@
115
109
  }
116
110
 
117
111
  .seed-menu-item__root--size_small {
118
- padding-top: var(--seed-dimension-x2_5);
119
- padding-bottom: var(--seed-dimension-x2_5);
120
- padding-left: var(--seed-dimension-x4);
121
- padding-right: var(--seed-dimension-x4);
112
+ padding-block: var(--seed-dimension-x2_5);
113
+ padding-inline: var(--seed-dimension-x4);
122
114
  gap: var(--seed-dimension-x2);
123
115
  --seed-prefix-icon-size: 18px;
124
116
  --seed-suffix-icon-size: 16px;
@@ -135,10 +127,8 @@
135
127
  }
136
128
 
137
129
  .seed-menu-item__root--size_responsive {
138
- padding-top: var(--seed-dimension-x3);
139
- padding-bottom: var(--seed-dimension-x3);
140
- padding-left: var(--seed-dimension-x4);
141
- padding-right: var(--seed-dimension-x4);
130
+ padding-block: var(--seed-dimension-x3);
131
+ padding-inline: var(--seed-dimension-x4);
142
132
  gap: var(--seed-dimension-x3);
143
133
  --seed-prefix-icon-size: 22px;
144
134
  --seed-suffix-icon-size: 18px;
@@ -146,10 +136,8 @@
146
136
 
147
137
  @media (width >= 1280px) {
148
138
  .seed-menu-item__root--size_responsive {
149
- padding-top: var(--seed-dimension-x2_5);
150
- padding-bottom: var(--seed-dimension-x2_5);
151
- padding-left: var(--seed-dimension-x4);
152
- padding-right: var(--seed-dimension-x4);
139
+ padding-block: var(--seed-dimension-x2_5);
140
+ padding-inline: var(--seed-dimension-x4);
153
141
  gap: var(--seed-dimension-x2);
154
142
  --seed-prefix-icon-size: 18px;
155
143
  --seed-suffix-icon-size: 16px;
package/recipes/menu-sheet-item.css CHANGED
@@ -3,10 +3,8 @@
3
3
  align-items: center;
4
4
  background-color: var(--seed-color-bg-neutral-weak);
5
5
  min-height: 52px;
6
- padding-left: var(--seed-dimension-x4);
7
- padding-right: var(--seed-dimension-x4);
8
- padding-top: var(--seed-dimension-x3_5);
9
- padding-bottom: var(--seed-dimension-x3_5);
6
+ padding-inline: var(--seed-dimension-x4);
7
+ padding-block: var(--seed-dimension-x3_5);
10
8
  gap: var(--seed-dimension-x3_5);
11
9
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
12
10
  margin: 0;
package/recipes/menu-sheet-item.layered.css CHANGED
@@ -2,10 +2,8 @@
2
2
  .seed-menu-sheet-item__root {
3
3
  background-color: var(--seed-color-bg-neutral-weak);
4
4
  min-height: 52px;
5
- padding-left: var(--seed-dimension-x4);
6
- padding-right: var(--seed-dimension-x4);
7
- padding-top: var(--seed-dimension-x3_5);
8
- padding-bottom: var(--seed-dimension-x3_5);
5
+ padding-inline: var(--seed-dimension-x4);
6
+ padding-block: var(--seed-dimension-x3_5);
9
7
  align-items: center;
10
8
  gap: var(--seed-dimension-x3_5);
11
9
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
package/recipes/menu-sheet.css CHANGED
@@ -3,20 +3,14 @@
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: flex-end;
6
- top: 0;
7
- right: 0;
8
- bottom: 0;
9
- left: 0;
6
+ inset: 0;
10
7
  overscroll-behavior-y: none;
11
8
  --sheet-z-index: 2;
12
9
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
13
10
  }
14
11
  .seed-menu-sheet__backdrop {
15
12
  position: fixed;
16
- top: 0;
17
- right: 0;
18
- bottom: 0;
19
- left: 0;
13
+ inset: 0;
20
14
  background: var(--seed-color-bg-overlay);
21
15
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
22
16
  }
@@ -30,8 +24,7 @@
30
24
  word-break: break-all;
31
25
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
32
26
  background: var(--seed-color-bg-layer-floating);
33
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
34
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
27
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
35
28
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
36
29
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
37
30
  border-top-left-radius: var(--seed-radius-r5);
@@ -50,8 +43,7 @@
50
43
  height: 200vh;
51
44
  content: "";
52
45
  position: absolute;
53
- left: 0;
54
- right: 0;
46
+ inset-inline: 0;
55
47
  background: inherit;
56
48
  z-index: -1;
57
49
  }
@@ -102,10 +94,8 @@
102
94
  justify-content: center;
103
95
  background-color: var(--seed-color-bg-neutral-weak);
104
96
  min-height: 52px;
105
- padding-left: var(--seed-dimension-x5);
106
- padding-right: var(--seed-dimension-x5);
107
- padding-top: var(--seed-dimension-x3_5);
108
- padding-bottom: var(--seed-dimension-x3_5);
97
+ padding-inline: var(--seed-dimension-x5);
98
+ padding-block: var(--seed-dimension-x3_5);
109
99
  border-radius: var(--seed-radius-r3);
110
100
  border: none;
111
101
  font-family: inherit;
package/recipes/menu-sheet.layered.css CHANGED
@@ -22,8 +22,7 @@
22
22
  word-break: break-all;
23
23
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
24
24
  background: var(--seed-color-bg-layer-floating);
25
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
26
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
25
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
27
26
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
28
27
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
29
28
  border-top-left-radius: var(--seed-radius-r5);
@@ -47,13 +46,12 @@
47
46
 
48
47
  .seed-menu-sheet__content[data-drawer]:after {
49
48
  content: "";
49
+ top: 100%;
50
50
  background: inherit;
51
51
  z-index: -1;
52
52
  height: 200vh;
53
53
  position: absolute;
54
- top: 100%;
55
- left: 0;
56
- right: 0;
54
+ inset-inline: 0;
57
55
  }
58
56
 
59
57
  .seed-menu-sheet__header {
@@ -106,10 +104,8 @@
106
104
  .seed-menu-sheet__closeButton {
107
105
  background-color: var(--seed-color-bg-neutral-weak);
108
106
  min-height: 52px;
109
- padding-left: var(--seed-dimension-x5);
110
- padding-right: var(--seed-dimension-x5);
111
- padding-top: var(--seed-dimension-x3_5);
112
- padding-bottom: var(--seed-dimension-x3_5);
107
+ padding-inline: var(--seed-dimension-x5);
108
+ padding-block: var(--seed-dimension-x3_5);
113
109
  border-radius: var(--seed-radius-r3);
114
110
  color: var(--seed-color-fg-neutral);
115
111
  font-family: inherit;
package/recipes/menu.css CHANGED
@@ -42,8 +42,7 @@
42
42
  overflow-y: auto;
43
43
  max-height: min(480px, var(--seed-menu-available-height, 480px));
44
44
  box-sizing: border-box;
45
- padding-top: var(--seed-dimension-x2);
46
- padding-bottom: var(--seed-dimension-x2);
45
+ padding-block: var(--seed-dimension-x2);
47
46
  display: flex;
48
47
  flex-direction: column;
49
48
  gap: var(--seed-dimension-x2);
@@ -55,8 +54,7 @@
55
54
  .seed-menu__group + .seed-menu__group::before {
56
55
  content: "";
57
56
  display: block;
58
- margin-left: var(--seed-dimension-x4);
59
- margin-right: var(--seed-dimension-x4);
57
+ margin-inline: var(--seed-dimension-x4);
60
58
  margin-bottom: var(--seed-dimension-x2);
61
59
  height: 1px;
62
60
  flex-shrink: 0;
@@ -69,10 +67,8 @@
69
67
  width: var(--seed-menu-reference-width, 240px);
70
68
  }
71
69
  .seed-menu__groupLabel--size_medium {
72
- padding-top: var(--seed-dimension-x2_5);
73
- padding-bottom: var(--seed-dimension-x2_5);
74
- padding-left: var(--seed-dimension-x4);
75
- padding-right: var(--seed-dimension-x4);
70
+ padding-block: var(--seed-dimension-x2_5);
71
+ padding-inline: var(--seed-dimension-x4);
76
72
  font-size: var(--seed-font-size-t4);
77
73
  line-height: var(--seed-line-height-t4);
78
74
  font-weight: var(--seed-font-weight-medium);
@@ -81,10 +77,8 @@
81
77
  width: var(--seed-menu-reference-width, 200px);
82
78
  }
83
79
  .seed-menu__groupLabel--size_small {
84
- padding-top: var(--seed-dimension-x2);
85
- padding-bottom: var(--seed-dimension-x2);
86
- padding-left: var(--seed-dimension-x4);
87
- padding-right: var(--seed-dimension-x4);
80
+ padding-block: var(--seed-dimension-x2);
81
+ padding-inline: var(--seed-dimension-x4);
88
82
  font-size: var(--seed-font-size-t3);
89
83
  line-height: var(--seed-line-height-t3);
90
84
  font-weight: var(--seed-font-weight-regular);
@@ -98,20 +92,16 @@
98
92
  }
99
93
  }
100
94
  .seed-menu__groupLabel--size_responsive {
101
- padding-top: var(--seed-dimension-x2_5);
102
- padding-bottom: var(--seed-dimension-x2_5);
103
- padding-left: var(--seed-dimension-x4);
104
- padding-right: var(--seed-dimension-x4);
95
+ padding-block: var(--seed-dimension-x2_5);
96
+ padding-inline: var(--seed-dimension-x4);
105
97
  font-size: var(--seed-font-size-t4);
106
98
  line-height: var(--seed-line-height-t4);
107
99
  font-weight: var(--seed-font-weight-medium);
108
100
  }
109
101
  @media (min-width: 1280px) {
110
102
  .seed-menu__groupLabel--size_responsive {
111
- padding-top: var(--seed-dimension-x2);
112
- padding-bottom: var(--seed-dimension-x2);
113
- padding-left: var(--seed-dimension-x4);
114
- padding-right: var(--seed-dimension-x4);
103
+ padding-block: var(--seed-dimension-x2);
104
+ padding-inline: var(--seed-dimension-x4);
115
105
  font-size: var(--seed-font-size-t3);
116
106
  line-height: var(--seed-line-height-t3);
117
107
  font-weight: var(--seed-font-weight-regular);