@seed-design/css 2.1.4 → 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 +192 -307
  2. package/all.layered.css +192 -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 +7 -18
  86. package/recipes/side-panel.layered.css +5 -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/menu.layered.css CHANGED
@@ -49,8 +49,7 @@
49
49
  .seed-menu__scrollArea {
50
50
  max-height: min(480px, var(--seed-menu-available-height, 480px));
51
51
  box-sizing: border-box;
52
- padding-top: var(--seed-dimension-x2);
53
- padding-bottom: var(--seed-dimension-x2);
52
+ padding-block: var(--seed-dimension-x2);
54
53
  gap: var(--seed-dimension-x2);
55
54
  flex-direction: column;
56
55
  display: flex;
@@ -64,8 +63,7 @@
64
63
 
65
64
  .seed-menu__group + .seed-menu__group:before {
66
65
  content: "";
67
- margin-left: var(--seed-dimension-x4);
68
- margin-right: var(--seed-dimension-x4);
66
+ margin-inline: var(--seed-dimension-x4);
69
67
  margin-bottom: var(--seed-dimension-x2);
70
68
  background-color: var(--seed-color-stroke-neutral-muted);
71
69
  flex-shrink: 0;
@@ -82,10 +80,8 @@
82
80
  }
83
81
 
84
82
  .seed-menu__groupLabel--size_medium {
85
- padding-top: var(--seed-dimension-x2_5);
86
- padding-bottom: var(--seed-dimension-x2_5);
87
- padding-left: var(--seed-dimension-x4);
88
- padding-right: var(--seed-dimension-x4);
83
+ padding-block: var(--seed-dimension-x2_5);
84
+ padding-inline: var(--seed-dimension-x4);
89
85
  font-size: var(--seed-font-size-t4);
90
86
  line-height: var(--seed-line-height-t4);
91
87
  font-weight: var(--seed-font-weight-medium);
@@ -96,10 +92,8 @@
96
92
  }
97
93
 
98
94
  .seed-menu__groupLabel--size_small {
99
- padding-top: var(--seed-dimension-x2);
100
- padding-bottom: var(--seed-dimension-x2);
101
- padding-left: var(--seed-dimension-x4);
102
- padding-right: var(--seed-dimension-x4);
95
+ padding-block: var(--seed-dimension-x2);
96
+ padding-inline: var(--seed-dimension-x4);
103
97
  font-size: var(--seed-font-size-t3);
104
98
  line-height: var(--seed-line-height-t3);
105
99
  font-weight: var(--seed-font-weight-regular);
@@ -116,10 +110,8 @@
116
110
  }
117
111
 
118
112
  .seed-menu__groupLabel--size_responsive {
119
- padding-top: var(--seed-dimension-x2_5);
120
- padding-bottom: var(--seed-dimension-x2_5);
121
- padding-left: var(--seed-dimension-x4);
122
- padding-right: var(--seed-dimension-x4);
113
+ padding-block: var(--seed-dimension-x2_5);
114
+ padding-inline: var(--seed-dimension-x4);
123
115
  font-size: var(--seed-font-size-t4);
124
116
  line-height: var(--seed-line-height-t4);
125
117
  font-weight: var(--seed-font-weight-medium);
@@ -127,10 +119,8 @@
127
119
 
128
120
  @media (width >= 1280px) {
129
121
  .seed-menu__groupLabel--size_responsive {
130
- padding-top: var(--seed-dimension-x2);
131
- padding-bottom: var(--seed-dimension-x2);
132
- padding-left: var(--seed-dimension-x4);
133
- padding-right: var(--seed-dimension-x4);
122
+ padding-block: var(--seed-dimension-x2);
123
+ padding-inline: var(--seed-dimension-x4);
134
124
  font-size: var(--seed-font-size-t3);
135
125
  line-height: var(--seed-line-height-t3);
136
126
  font-weight: var(--seed-font-weight-regular);
package/recipes/notification-badge.css CHANGED
@@ -20,10 +20,8 @@
20
20
  min-width: 18px;
21
21
  min-height: 18px;
22
22
  border-radius: var(--seed-radius-full);
23
- padding-left: var(--seed-dimension-x1);
24
- padding-right: var(--seed-dimension-x1);
25
- padding-top: 0px;
26
- padding-bottom: 0px;
23
+ padding-inline: var(--seed-dimension-x1);
24
+ padding-block: 0px;
27
25
  font-size: var(--seed-font-size-t1-static);
28
26
  line-height: var(--seed-line-height-t1-static);
29
27
  font-weight: var(--seed-font-weight-bold)
package/recipes/notification-badge.layered.css CHANGED
@@ -23,12 +23,10 @@
23
23
  border-radius: var(--seed-radius-full);
24
24
  min-width: 18px;
25
25
  min-height: 18px;
26
- padding-left: var(--seed-dimension-x1);
27
- padding-right: var(--seed-dimension-x1);
26
+ padding-inline: var(--seed-dimension-x1);
28
27
  font-size: var(--seed-font-size-t1-static);
29
28
  line-height: var(--seed-line-height-t1-static);
30
29
  font-weight: var(--seed-font-weight-bold);
31
- padding-top: 0;
32
- padding-bottom: 0;
30
+ padding-block: 0;
33
31
  }
34
32
  }
package/recipes/page-banner.css CHANGED
@@ -10,10 +10,8 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: var(--seed-dimension-x10);
13
- padding-left: var(--seed-dimension-x4);
14
- padding-right: var(--seed-dimension-x4);
15
- padding-top: var(--seed-dimension-x2_5);
16
- padding-bottom: var(--seed-dimension-x2_5);
13
+ padding-inline: var(--seed-dimension-x4);
14
+ padding-block: var(--seed-dimension-x2_5);
17
15
  --seed-prefix-icon-size: var(--seed-dimension-x4);
18
16
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
19
17
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * 0.5 - var(--seed-dimension-x2_5));
package/recipes/page-banner.layered.css CHANGED
@@ -8,10 +8,8 @@
8
8
  text-align: start;
9
9
  width: 100%;
10
10
  min-height: var(--seed-dimension-x10);
11
- padding-left: var(--seed-dimension-x4);
12
- padding-right: var(--seed-dimension-x4);
13
- padding-top: var(--seed-dimension-x2_5);
14
- padding-bottom: var(--seed-dimension-x2_5);
11
+ padding-inline: var(--seed-dimension-x4);
12
+ padding-block: var(--seed-dimension-x2_5);
15
13
  --seed-prefix-icon-size: var(--seed-dimension-x4);
16
14
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
17
15
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
package/recipes/reaction-button.css CHANGED
@@ -78,10 +78,8 @@
78
78
  }
79
79
  .seed-reaction-button--size_xsmall {
80
80
  height: var(--seed-dimension-x8);
81
- padding-left: var(--seed-dimension-x3);
82
- padding-right: var(--seed-dimension-x3);
83
- padding-top: var(--seed-dimension-x1_5);
84
- padding-bottom: var(--seed-dimension-x1_5);
81
+ padding-inline: var(--seed-dimension-x3);
82
+ padding-block: var(--seed-dimension-x1_5);
85
83
  gap: var(--seed-dimension-x1);
86
84
  border-radius: var(--seed-radius-full);
87
85
  font-size: var(--seed-font-size-t3);
@@ -94,10 +92,8 @@
94
92
  }
95
93
  .seed-reaction-button--size_small {
96
94
  height: var(--seed-dimension-x9);
97
- padding-left: var(--seed-dimension-x3_5);
98
- padding-right: var(--seed-dimension-x3_5);
99
- padding-top: var(--seed-dimension-x2);
100
- padding-bottom: var(--seed-dimension-x2);
95
+ padding-inline: var(--seed-dimension-x3_5);
96
+ padding-block: var(--seed-dimension-x2);
101
97
  gap: var(--seed-dimension-x1);
102
98
  border-radius: var(--seed-radius-full);
103
99
  font-size: var(--seed-font-size-t3);
package/recipes/reaction-button.layered.css CHANGED
@@ -90,10 +90,8 @@
90
90
 
91
91
  .seed-reaction-button--size_xsmall {
92
92
  height: var(--seed-dimension-x8);
93
- padding-left: var(--seed-dimension-x3);
94
- padding-right: var(--seed-dimension-x3);
95
- padding-top: var(--seed-dimension-x1_5);
96
- padding-bottom: var(--seed-dimension-x1_5);
93
+ padding-inline: var(--seed-dimension-x3);
94
+ padding-block: var(--seed-dimension-x1_5);
97
95
  gap: var(--seed-dimension-x1);
98
96
  border-radius: var(--seed-radius-full);
99
97
  font-size: var(--seed-font-size-t3);
@@ -107,10 +105,8 @@
107
105
 
108
106
  .seed-reaction-button--size_small {
109
107
  height: var(--seed-dimension-x9);
110
- padding-left: var(--seed-dimension-x3_5);
111
- padding-right: var(--seed-dimension-x3_5);
112
- padding-top: var(--seed-dimension-x2);
113
- padding-bottom: var(--seed-dimension-x2);
108
+ padding-inline: var(--seed-dimension-x3_5);
109
+ padding-block: var(--seed-dimension-x2);
114
110
  gap: var(--seed-dimension-x1);
115
111
  border-radius: var(--seed-radius-full);
116
112
  font-size: var(--seed-font-size-t3);
package/recipes/segmented-control.css CHANGED
@@ -17,8 +17,7 @@
17
17
  z-index: -1;
18
18
  will-change: transform;
19
19
  transform: translateX(calc(var(--segment-index) * 100%));
20
- top: var(--seed-dimension-x1);
21
- bottom: var(--seed-dimension-x1);
20
+ inset-block: var(--seed-dimension-x1);
22
21
  left: var(--seed-dimension-x1);
23
22
  width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
24
23
  border-radius: var(--seed-radius-full);
@@ -39,10 +38,8 @@
39
38
  min-height: 34px;
40
39
  gap: var(--seed-dimension-x1_5);
41
40
  height: 100%;
42
- padding-left: var(--seed-dimension-x6);
43
- padding-right: var(--seed-dimension-x6);
44
- padding-top: var(--seed-dimension-x1_5);
45
- padding-bottom: var(--seed-dimension-x1_5);
41
+ padding-inline: var(--seed-dimension-x6);
42
+ padding-block: var(--seed-dimension-x1_5);
46
43
  border-radius: var(--seed-radius-full);
47
44
  font-weight: var(--seed-font-weight-bold);
48
45
  font-size: var(--seed-font-size-t5);
package/recipes/segmented-control.layered.css CHANGED
@@ -18,8 +18,7 @@
18
18
  z-index: -1;
19
19
  will-change: transform;
20
20
  transform: translateX(calc(var(--segment-index) * 100%));
21
- top: var(--seed-dimension-x1);
22
- bottom: var(--seed-dimension-x1);
21
+ inset-block: var(--seed-dimension-x1);
23
22
  left: var(--seed-dimension-x1);
24
23
  width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
25
24
  border-radius: var(--seed-radius-full);
@@ -41,10 +40,8 @@
41
40
  min-width: 86px;
42
41
  height: 100%;
43
42
  min-height: 34px;
44
- padding-left: var(--seed-dimension-x6);
45
- padding-right: var(--seed-dimension-x6);
46
- padding-top: var(--seed-dimension-x1_5);
47
- padding-bottom: var(--seed-dimension-x1_5);
43
+ padding-inline: var(--seed-dimension-x6);
44
+ padding-block: var(--seed-dimension-x1_5);
48
45
  border-radius: var(--seed-radius-full);
49
46
  font-weight: var(--seed-font-weight-bold);
50
47
  font-size: var(--seed-font-size-t5);
package/recipes/select-box-checkmark.css CHANGED
@@ -9,10 +9,7 @@
9
9
  display: block;
10
10
  position: absolute;
11
11
  margin: auto;
12
- left: 0;
13
- right: 0;
14
- top: 0;
15
- bottom: 0;
12
+ inset: 0;
16
13
  text-align: center;
17
14
  overflow: initial;
18
15
  width: 15px;
package/recipes/select-box.css CHANGED
@@ -12,10 +12,7 @@
12
12
  .seed-select-box__root::after {
13
13
  content: "";
14
14
  position: absolute;
15
- top: 0;
16
- right: 0;
17
- bottom: 0;
18
- left: 0;
15
+ inset: 0;
19
16
  border-radius: inherit;
20
17
  border-style: solid;
21
18
  border-color: transparent;
@@ -110,18 +107,15 @@
110
107
  align-items: center;
111
108
  padding-left: var(--seed-dimension-x5);
112
109
  padding-right: var(--seed-dimension-x4);
113
- padding-top: var(--seed-dimension-x4);
114
- padding-bottom: var(--seed-dimension-x4);
110
+ padding-block: var(--seed-dimension-x4);
115
111
  }
116
112
  .seed-select-box__content--layout_horizontal {
117
113
  align-items: center;
118
114
  gap: var(--seed-dimension-x3);
119
115
  }
120
116
  .seed-select-box__trigger--layout_vertical {
121
- padding-left: var(--seed-dimension-x4);
122
- padding-right: var(--seed-dimension-x4);
123
- padding-top: var(--seed-dimension-x5);
124
- padding-bottom: var(--seed-dimension-x5);
117
+ padding-inline: var(--seed-dimension-x4);
118
+ padding-block: var(--seed-dimension-x5);
125
119
  }
126
120
  .seed-select-box__content--layout_vertical {
127
121
  flex-direction: column;
package/recipes/select-box.layered.css CHANGED
@@ -124,8 +124,7 @@
124
124
  .seed-select-box__trigger--layout_horizontal {
125
125
  padding-left: var(--seed-dimension-x5);
126
126
  padding-right: var(--seed-dimension-x4);
127
- padding-top: var(--seed-dimension-x4);
128
- padding-bottom: var(--seed-dimension-x4);
127
+ padding-block: var(--seed-dimension-x4);
129
128
  align-items: center;
130
129
  }
131
130
 
@@ -135,10 +134,8 @@
135
134
  }
136
135
 
137
136
  .seed-select-box__trigger--layout_vertical {
138
- padding-left: var(--seed-dimension-x4);
139
- padding-right: var(--seed-dimension-x4);
140
- padding-top: var(--seed-dimension-x5);
141
- padding-bottom: var(--seed-dimension-x5);
137
+ padding-inline: var(--seed-dimension-x4);
138
+ padding-block: var(--seed-dimension-x5);
142
139
  }
143
140
 
144
141
  .seed-select-box__content--layout_vertical {
package/recipes/side-navigation-menu-item.css CHANGED
@@ -4,8 +4,7 @@
4
4
  align-items: center;
5
5
  gap: 12px;
6
6
  height: 44px;
7
- padding-left: 8px;
8
- padding-right: 8px;
7
+ padding-inline: 8px;
9
8
  width: 100%;
10
9
  overflow: hidden;
11
10
  text-align: left;
@@ -20,10 +19,7 @@
20
19
  .seed-side-navigation-menu-item__root::before {
21
20
  content: "";
22
21
  position: absolute;
23
- top: 0;
24
- right: 0;
25
- bottom: 0;
26
- left: 0;
22
+ inset: 0;
27
23
  border-radius: 10px;
28
24
  outline: var(--seed-dimension-x0_5) solid transparent;
29
25
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -67,8 +63,7 @@
67
63
  }
68
64
  }
69
65
  .seed-side-navigation-menu-item__root[data-side-navigation-state=collapsed] {
70
- padding-left: 10px;
71
- padding-right: 10px;
66
+ padding-inline: 10px;
72
67
  }
73
68
  .seed-side-navigation-menu-item__prefixIcon {
74
69
  width: 20px;
package/recipes/side-navigation-menu-item.layered.css CHANGED
@@ -9,8 +9,7 @@
9
9
  gap: 12px;
10
10
  width: 100%;
11
11
  height: 44px;
12
- padding-left: 8px;
13
- padding-right: 8px;
12
+ padding-inline: 8px;
14
13
  scroll-margin-top: 8px;
15
14
  scroll-margin-bottom: 24px;
16
15
  transition: padding .2s, background-color .2s;
@@ -76,8 +75,7 @@
76
75
  }
77
76
 
78
77
  .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"] {
79
- padding-left: 10px;
80
- padding-right: 10px;
78
+ padding-inline: 10px;
81
79
  }
82
80
 
83
81
  .seed-side-navigation-menu-item__prefixIcon {
@@ -107,8 +105,9 @@
107
105
  font-size: var(--seed-font-size-t4);
108
106
  line-height: var(--seed-line-height-t4);
109
107
  font-weight: var(--seed-font-weight-medium);
108
+ padding: 6px;
110
109
  flex-grow: 1;
111
- padding: 6px 6px 6px 32px;
110
+ padding-left: 32px;
112
111
  transition: opacity .2s, color .2s;
113
112
  overflow: hidden;
114
113
  }
package/recipes/side-navigation.css CHANGED
@@ -19,8 +19,7 @@
19
19
  }
20
20
  .seed-side-navigation__content {
21
21
  padding-top: 8px;
22
- padding-left: 8px;
23
- padding-right: 8px;
22
+ padding-inline: 8px;
24
23
  padding-bottom: 24px;
25
24
  flex: 1;
26
25
  overflow-y: auto;
package/recipes/side-navigation.layered.css CHANGED
@@ -22,10 +22,12 @@
22
22
  }
23
23
 
24
24
  .seed-side-navigation__content {
25
+ padding-top: 8px;
26
+ padding-inline: 8px;
25
27
  flex-direction: column;
26
28
  flex: 1;
27
29
  gap: 8px;
28
- padding: 8px 8px 24px;
30
+ padding-bottom: 24px;
29
31
  display: flex;
30
32
  overflow-y: auto;
31
33
  }
package/recipes/side-panel.css CHANGED
@@ -1,19 +1,13 @@
1
1
  .seed-side-panel__positioner {
2
2
  position: fixed;
3
- top: 0;
4
- right: 0;
5
- bottom: 0;
6
- left: 0;
3
+ inset: 0;
7
4
  overscroll-behavior-y: none;
8
5
  --side-panel-z-index: 2;
9
6
  z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
10
7
  }
11
8
  .seed-side-panel__backdrop {
12
9
  position: fixed;
13
- top: 0;
14
- right: 0;
15
- bottom: 0;
16
- left: 0;
10
+ inset: 0;
17
11
  background: var(--seed-color-bg-overlay);
18
12
  z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
19
13
  }
@@ -59,8 +53,7 @@
59
53
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
60
54
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
61
55
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
62
- top: 0;
63
- bottom: 0;
56
+ inset-block: 0;
64
57
  width: var(--seed-box-width);
65
58
  max-width: var(--seed-box-max-width);
66
59
  padding-bottom: var(--seed-safe-area-bottom);
@@ -73,8 +66,7 @@
73
66
  .seed-side-panel__content::after {
74
67
  content: "";
75
68
  position: absolute;
76
- top: 0;
77
- bottom: 0;
69
+ inset-block: 0;
78
70
  width: 100vw;
79
71
  background: inherit;
80
72
  z-index: -1;
@@ -141,8 +133,7 @@
141
133
  box-sizing: border-box;
142
134
  gap: var(--seed-dimension-x1_5);
143
135
  min-height: calc(70px + var(--seed-safe-area-top));
144
- padding-left: var(--seed-dimension-x6);
145
- padding-right: var(--seed-dimension-x6);
136
+ padding-inline: var(--seed-dimension-x6);
146
137
  padding-top: calc(var(--seed-dimension-x6) + var(--seed-safe-area-top));
147
138
  padding-bottom: var(--seed-dimension-x4);
148
139
  }
@@ -197,8 +188,7 @@
197
188
  --seed-box-max-height: var(--seed-box-max-height-base, initial);
198
189
  --seed-box-justify-content: initial;
199
190
  --seed-box-align-items: initial;
200
- padding-left: var(--seed-box-padding-x);
201
- padding-right: var(--seed-box-padding-x);
191
+ padding-inline: var(--seed-box-padding-x);
202
192
  padding-bottom: var(--seed-dimension-x12);
203
193
  height: var(--seed-box-height);
204
194
  min-height: var(--seed-box-min-height);
@@ -223,8 +213,7 @@
223
213
  .seed-side-panel__footer {
224
214
  display: flex;
225
215
  flex-direction: column;
226
- padding-left: var(--seed-dimension-x6);
227
- padding-right: var(--seed-dimension-x6);
216
+ padding-inline: var(--seed-dimension-x6);
228
217
  padding-top: var(--seed-dimension-x4);
229
218
  padding-bottom: var(--seed-dimension-x6);
230
219
  }
package/recipes/side-panel.layered.css CHANGED
@@ -61,8 +61,7 @@
61
61
  flex-direction: column;
62
62
  display: flex;
63
63
  position: absolute;
64
- top: 0;
65
- bottom: 0;
64
+ inset-block: 0;
66
65
  }
67
66
 
68
67
  @media (width >= 768px) {
@@ -77,8 +76,7 @@
77
76
  z-index: -1;
78
77
  width: 100vw;
79
78
  position: absolute;
80
- top: 0;
81
- bottom: 0;
79
+ inset-block: 0;
82
80
  }
83
81
 
84
82
  .seed-side-panel__content:is(:focus, [data-focus]) {
@@ -149,8 +147,7 @@
149
147
  box-sizing: border-box;
150
148
  gap: var(--seed-dimension-x1_5);
151
149
  min-height: calc(70px + var(--seed-safe-area-top));
152
- padding-left: var(--seed-dimension-x6);
153
- padding-right: var(--seed-dimension-x6);
150
+ padding-inline: var(--seed-dimension-x6);
154
151
  padding-top: calc(var(--seed-dimension-x6) + var(--seed-safe-area-top));
155
152
  padding-bottom: var(--seed-dimension-x4);
156
153
  flex-direction: column;
@@ -208,8 +205,7 @@
208
205
  --seed-box-max-height: var(--seed-box-max-height-base, initial);
209
206
  --seed-box-justify-content: initial;
210
207
  --seed-box-align-items: initial;
211
- padding-left: var(--seed-box-padding-x);
212
- padding-right: var(--seed-box-padding-x);
208
+ padding-inline: var(--seed-box-padding-x);
213
209
  padding-bottom: var(--seed-dimension-x12);
214
210
  height: var(--seed-box-height);
215
211
  min-height: var(--seed-box-min-height);
@@ -240,8 +236,7 @@
240
236
  }
241
237
 
242
238
  .seed-side-panel__footer {
243
- padding-left: var(--seed-dimension-x6);
244
- padding-right: var(--seed-dimension-x6);
239
+ padding-inline: var(--seed-dimension-x6);
245
240
  padding-top: var(--seed-dimension-x4);
246
241
  padding-bottom: var(--seed-dimension-x6);
247
242
  flex-direction: column;
package/recipes/slider-marker.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .seed-slider-marker {
2
2
  position: absolute;
3
- top: 0;
4
- bottom: 0;
3
+ inset-block: 0;
5
4
  width: max-content;
6
5
  color: var(--seed-color-fg-neutral-muted);
7
6
  font-weight: var(--seed-font-weight-regular);
package/recipes/slider-marker.layered.css CHANGED
@@ -6,8 +6,7 @@
6
6
  font-size: var(--seed-font-size-t3);
7
7
  line-height: var(--seed-line-height-t3);
8
8
  position: absolute;
9
- top: 0;
10
- bottom: 0;
9
+ inset-block: 0;
11
10
  }
12
11
 
13
12
  .seed-slider-marker[data-dir="ltr"] {
package/recipes/slider.css CHANGED
@@ -69,10 +69,7 @@
69
69
  .seed-slider__thumb::after {
70
70
  content: "";
71
71
  position: absolute;
72
- top: 0;
73
- left: 0;
74
- right: 0;
75
- bottom: 0;
72
+ inset: 0;
76
73
  background-color: var(--seed-color-bg-neutral-inverted);
77
74
  border-radius: var(--seed-radius-full);
78
75
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -112,10 +109,8 @@
112
109
  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
113
110
  will-change: left, right;
114
111
  background: var(--seed-color-bg-neutral-inverted);
115
- padding-left: var(--seed-dimension-x2);
116
- padding-right: var(--seed-dimension-x2);
117
- padding-top: var(--seed-dimension-x1);
118
- padding-bottom: var(--seed-dimension-x1);
112
+ padding-inline: var(--seed-dimension-x2);
113
+ padding-block: var(--seed-dimension-x1);
119
114
  border-radius: var(--seed-radius-r1_5);
120
115
  color: var(--seed-color-fg-neutral-inverted);
121
116
  font-size: var(--seed-font-size-t3);
package/recipes/slider.layered.css CHANGED
@@ -126,10 +126,8 @@
126
126
  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
127
127
  will-change: left, right;
128
128
  background: var(--seed-color-bg-neutral-inverted);
129
- padding-left: var(--seed-dimension-x2);
130
- padding-right: var(--seed-dimension-x2);
131
- padding-top: var(--seed-dimension-x1);
132
- padding-bottom: var(--seed-dimension-x1);
129
+ padding-inline: var(--seed-dimension-x2);
130
+ padding-block: var(--seed-dimension-x1);
133
131
  border-radius: var(--seed-radius-r1_5);
134
132
  color: var(--seed-color-fg-neutral-inverted);
135
133
  font-size: var(--seed-font-size-t3);
package/recipes/snackbar-region.css CHANGED
@@ -6,10 +6,8 @@
6
6
  left: calc(env(safe-area-inset-left, 0px));
7
7
  right: calc(env(safe-area-inset-right, 0px));
8
8
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
9
- padding-left: var(--seed-dimension-x2);
10
- padding-right: var(--seed-dimension-x2);
11
- padding-top: var(--seed-dimension-x2);
12
- padding-bottom: var(--seed-dimension-x2);
9
+ padding-inline: var(--seed-dimension-x2);
10
+ padding-block: var(--seed-dimension-x2);
13
11
  transition-property: bottom;
14
12
  transition-duration: var(--seed-duration-d4);
15
13
  transition-timing-function: var(--seed-timing-function-easing)
package/recipes/snackbar-region.layered.css CHANGED
@@ -4,10 +4,8 @@
4
4
  left: calc(env(safe-area-inset-left, 0px));
5
5
  right: calc(env(safe-area-inset-right, 0px));
6
6
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
7
- padding-left: var(--seed-dimension-x2);
8
- padding-right: var(--seed-dimension-x2);
9
- padding-top: var(--seed-dimension-x2);
10
- padding-bottom: var(--seed-dimension-x2);
7
+ padding-inline: var(--seed-dimension-x2);
8
+ padding-block: var(--seed-dimension-x2);
11
9
  transition-property: bottom;
12
10
  transition-duration: var(--seed-duration-d4);
13
11
  transition-timing-function: var(--seed-timing-function-easing);
package/recipes/snackbar.css CHANGED
@@ -6,10 +6,8 @@
6
6
  max-width: 560px;
7
7
  background: var(--seed-color-bg-neutral-inverted);
8
8
  border-radius: var(--seed-radius-r2);
9
- padding-left: var(--seed-dimension-x2_5);
10
- padding-right: var(--seed-dimension-x2_5);
11
- padding-top: var(--seed-dimension-x2_5);
12
- padding-bottom: var(--seed-dimension-x2_5);
9
+ padding-inline: var(--seed-dimension-x2_5);
10
+ padding-block: var(--seed-dimension-x2_5);
13
11
  min-height: 44px;
14
12
  animation: seed-enter;
15
13
  animation-timing-function: var(--seed-timing-function-enter);
@@ -43,8 +41,7 @@
43
41
  flex-grow: 1;
44
42
  justify-content: space-between;
45
43
  align-items: center;
46
- padding-left: var(--seed-dimension-x1_5);
47
- padding-right: var(--seed-dimension-x1_5);
44
+ padding-inline: var(--seed-dimension-x1_5);
48
45
  gap: var(--seed-dimension-x2_5);
49
46
  }
50
47
  .seed-snackbar__message {
@@ -84,8 +81,7 @@
84
81
  position: absolute;
85
82
  top: 50%;
86
83
  transform: translateY(-50%);
87
- left: calc(-1 * var(--seed-dimension-x2));
88
- right: calc(-1 * var(--seed-dimension-x2));
84
+ inset-inline: calc(-1 * var(--seed-dimension-x2));
89
85
  min-height: 44px;
90
86
  background: transparent;
91
87
  outline: var(--seed-dimension-x0_5) solid transparent;
package/recipes/snackbar.layered.css CHANGED
@@ -5,10 +5,8 @@
5
5
  border-radius: var(--seed-radius-r2);
6
6
  width: 100%;
7
7
  max-width: 560px;
8
- padding-left: var(--seed-dimension-x2_5);
9
- padding-right: var(--seed-dimension-x2_5);
10
- padding-top: var(--seed-dimension-x2_5);
11
- padding-bottom: var(--seed-dimension-x2_5);
8
+ padding-inline: var(--seed-dimension-x2_5);
9
+ padding-block: var(--seed-dimension-x2_5);
12
10
  min-height: 44px;
13
11
  animation: seed-enter;
14
12
  animation-timing-function: var(--seed-timing-function-enter);
@@ -44,8 +42,7 @@
44
42
  }
45
43
 
46
44
  .seed-snackbar__content {
47
- padding-left: var(--seed-dimension-x1_5);
48
- padding-right: var(--seed-dimension-x1_5);
45
+ padding-inline: var(--seed-dimension-x1_5);
49
46
  justify-content: space-between;
50
47
  align-items: center;
51
48
  gap: var(--seed-dimension-x2_5);
@@ -91,8 +88,7 @@
91
88
  .seed-snackbar__actionButton:after {
92
89
  content: "";
93
90
  top: 50%;
94
- left: calc(-1 * var(--seed-dimension-x2));
95
- right: calc(-1 * var(--seed-dimension-x2));
91
+ inset-inline: calc(-1 * var(--seed-dimension-x2));
96
92
  outline: var(--seed-dimension-x0_5) solid transparent;
97
93
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
98
94
  min-height: 44px;