@seed-design/css 1.1.6 → 1.1.7

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 (37) hide show
  1. package/all.css +200 -125
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar-main.css +2 -1
  5. package/recipes/app-bar.css +4 -2
  6. package/recipes/badge.css +8 -4
  7. package/recipes/bottom-sheet.css +4 -2
  8. package/recipes/callout.css +5 -3
  9. package/recipes/checkbox.css +3 -3
  10. package/recipes/chip.css +8 -4
  11. package/recipes/contextual-floating-button.css +4 -2
  12. package/recipes/dialog.css +4 -2
  13. package/recipes/field-label.css +3 -3
  14. package/recipes/field.css +4 -2
  15. package/recipes/floating-action-button.css +2 -1
  16. package/recipes/help-bubble.css +4 -2
  17. package/recipes/input-button.css +2 -1
  18. package/recipes/list-header.css +4 -2
  19. package/recipes/list-item.css +4 -2
  20. package/recipes/manner-temp-badge.css +4 -2
  21. package/recipes/menu-sheet-item.css +4 -2
  22. package/recipes/menu-sheet.css +8 -4
  23. package/recipes/notification-badge-positioner.css +10 -10
  24. package/recipes/notification-badge.css +4 -2
  25. package/recipes/page-banner.css +4 -2
  26. package/recipes/radio.css +3 -3
  27. package/recipes/reaction-button.css +8 -4
  28. package/recipes/segmented-control.css +7 -4
  29. package/recipes/select-box.css +4 -2
  30. package/recipes/slider.css +29 -23
  31. package/recipes/snackbar-region.css +4 -2
  32. package/recipes/snackbar.css +6 -3
  33. package/recipes/switch-mark.css +6 -6
  34. package/recipes/switch.css +3 -3
  35. package/recipes/tabs.css +12 -6
  36. package/recipes/text-input.css +12 -9
  37. package/recipes/toggle-button.css +8 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.1.6",
3
+ "version": "1.1.7",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/app-bar-main.css CHANGED
@@ -36,7 +36,8 @@
36
36
  bottom: 0;
37
37
  left: 0;
38
38
  right: 0;
39
- padding-inline: var(--centered-title-padding-x, 0);
39
+ padding-left: var(--centered-title-padding-x, 0);
40
+ padding-right: var(--centered-title-padding-x, 0);
40
41
  pointer-events: none
41
42
  }
42
43
  .seed-app-bar-main__root--theme_android {
package/recipes/app-bar.css CHANGED
@@ -43,7 +43,8 @@
43
43
  }
44
44
  .seed-app-bar__root--theme_cupertino {
45
45
  height: calc(44px + var(--seed-safe-area-top));
46
- padding-inline: var(--seed-dimension-x4);
46
+ padding-left: var(--seed-dimension-x4);
47
+ padding-right: var(--seed-dimension-x4);
47
48
  padding-top: var(--seed-safe-area-top);
48
49
  }
49
50
  .seed-app-bar__iconButton--theme_cupertino {
@@ -62,7 +63,8 @@
62
63
  }
63
64
  .seed-app-bar__root--theme_android {
64
65
  height: calc(56px + var(--seed-safe-area-top));
65
- padding-inline: var(--seed-dimension-x4);
66
+ padding-left: var(--seed-dimension-x4);
67
+ padding-right: var(--seed-dimension-x4);
66
68
  padding-top: var(--seed-safe-area-top);
67
69
  }
68
70
  .seed-app-bar__iconButton--theme_android {
package/recipes/badge.css CHANGED
@@ -16,8 +16,10 @@
16
16
  .seed-badge__root--size_medium {
17
17
  max-width: 7.5rem;
18
18
  min-height: var(--seed-dimension-x5);
19
- padding-inline: var(--seed-dimension-x1_5);
20
- padding-block: var(--seed-dimension-x0_5);
19
+ padding-left: var(--seed-dimension-x1_5);
20
+ padding-right: var(--seed-dimension-x1_5);
21
+ padding-top: var(--seed-dimension-x0_5);
22
+ padding-bottom: var(--seed-dimension-x0_5);
21
23
  border-radius: var(--seed-radius-r1);
22
24
  font-size: var(--seed-font-size-t1);
23
25
  line-height: var(--seed-line-height-t1)
@@ -25,8 +27,10 @@
25
27
  .seed-badge__root--size_large {
26
28
  max-width: 6.75rem;
27
29
  min-height: var(--seed-dimension-x6);
28
- padding-inline: var(--seed-dimension-x2);
29
- padding-block: var(--seed-dimension-x1);
30
+ padding-left: var(--seed-dimension-x2);
31
+ padding-right: var(--seed-dimension-x2);
32
+ padding-top: var(--seed-dimension-x1);
33
+ padding-bottom: var(--seed-dimension-x1);
30
34
  border-radius: var(--seed-radius-r1_5);
31
35
  font-size: var(--seed-font-size-t2);
32
36
  line-height: var(--seed-line-height-t2)
package/recipes/bottom-sheet.css CHANGED
@@ -123,7 +123,8 @@
123
123
  --seed-box-max-height: initial;
124
124
  --seed-box-justify-content: initial;
125
125
  --seed-box-align-items: initial;
126
- padding-inline: var(--seed-box-padding-x);
126
+ padding-left: var(--seed-box-padding-x);
127
+ padding-right: var(--seed-box-padding-x);
127
128
  height: var(--seed-box-height);
128
129
  min-height: var(--seed-box-min-height);
129
130
  max-height: var(--seed-box-max-height);
@@ -133,7 +134,8 @@
133
134
  .seed-bottom-sheet__footer {
134
135
  display: flex;
135
136
  flex-direction: column;
136
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
137
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
138
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
137
139
  padding-top: var(--seed-dimension-x3);
138
140
  padding-bottom: var(--seed-dimension-x4);
139
141
  }
package/recipes/callout.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: 50px;
13
- padding-inline: var(--seed-dimension-x3_5);
14
- padding-block: var(--seed-dimension-x3_5);
13
+ padding-left: var(--seed-dimension-x3_5);
14
+ padding-right: var(--seed-dimension-x3_5);
15
+ padding-top: var(--seed-dimension-x3_5);
16
+ padding-bottom: var(--seed-dimension-x3_5);
15
17
  gap: var(--seed-dimension-x3);
16
18
  border-radius: var(--seed-radius-r2_5);
17
19
  text-decoration: none;
@@ -22,7 +24,7 @@
22
24
  cursor: pointer;
23
25
  }
24
26
  .seed-callout__content {
25
- margin-inline-end: auto;
27
+ margin-right: auto;
26
28
  line-height: var(--seed-line-height-t4);
27
29
  }
28
30
  .seed-callout__title {
package/recipes/checkbox.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
4
  position: relative;
5
- max-inline-size: 100%;
5
+ max-width: 100%;
6
6
  vertical-align: top;
7
7
  isolation: isolate;
8
8
  cursor: pointer;
@@ -30,7 +30,7 @@
30
30
  .seed-checkbox__label--size_large {
31
31
  font-size: var(--seed-font-size-t5);
32
32
  line-height: var(--seed-line-height-t5);
33
- margin-block-start: calc(18px - 0.65625rem);
33
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
34
34
  }
35
35
  .seed-checkbox__root--size_medium {
36
36
  min-height: var(--seed-dimension-x8);
@@ -39,5 +39,5 @@
39
39
  .seed-checkbox__label--size_medium {
40
40
  font-size: var(--seed-font-size-t4);
41
41
  line-height: var(--seed-line-height-t4);
42
- margin-block-start: calc(16px - 0.59375rem);
42
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
43
43
  }
package/recipes/chip.css CHANGED
@@ -30,7 +30,8 @@
30
30
  align-items: center;
31
31
  justify-content: center;
32
32
  font-weight: var(--seed-font-weight-medium);
33
- padding-inline: var(--seed-dimension-x1_5);
33
+ padding-left: var(--seed-dimension-x1_5);
34
+ padding-right: var(--seed-dimension-x1_5);
34
35
  }
35
36
  .seed-chip__prefixIcon {
36
37
  display: inline-flex;
@@ -138,7 +139,8 @@
138
139
  }
139
140
  .seed-chip__root--size_large {
140
141
  height: 40px;
141
- padding-inline: var(--seed-dimension-x2_5);
142
+ padding-left: var(--seed-dimension-x2_5);
143
+ padding-right: var(--seed-dimension-x2_5);
142
144
  --seed-icon-size: var(--seed-dimension-x4);
143
145
  }
144
146
  .seed-chip__label--size_large {
@@ -153,7 +155,8 @@
153
155
  }
154
156
  .seed-chip__root--size_medium {
155
157
  height: 36px;
156
- padding-inline: var(--seed-dimension-x2);
158
+ padding-left: var(--seed-dimension-x2);
159
+ padding-right: var(--seed-dimension-x2);
157
160
  --seed-icon-size: var(--seed-dimension-x4);
158
161
  }
159
162
  .seed-chip__label--size_medium {
@@ -168,7 +171,8 @@
168
171
  }
169
172
  .seed-chip__root--size_small {
170
173
  height: 32px;
171
- padding-inline: var(--seed-dimension-x1_5);
174
+ padding-left: var(--seed-dimension-x1_5);
175
+ padding-right: var(--seed-dimension-x1_5);
172
176
  --seed-icon-size: var(--seed-dimension-x3_5);
173
177
  }
174
178
  .seed-chip__label--size_small {
package/recipes/contextual-floating-button.css CHANGED
@@ -82,8 +82,10 @@
82
82
  }
83
83
  .seed-contextual-floating-button--layout_withText {
84
84
  min-height: 36px;
85
- padding-inline: var(--seed-dimension-x3_5);
86
- padding-block: var(--seed-dimension-x2);
85
+ padding-left: var(--seed-dimension-x3_5);
86
+ padding-right: var(--seed-dimension-x3_5);
87
+ padding-top: var(--seed-dimension-x2);
88
+ padding-bottom: var(--seed-dimension-x2);
87
89
  gap: var(--seed-dimension-x1);
88
90
  --seed-prefix-icon-size: 16px;
89
91
  }
package/recipes/dialog.css CHANGED
@@ -74,7 +74,8 @@
74
74
  .seed-dialog__header {
75
75
  display: flex;
76
76
  flex-direction: column;
77
- padding-inline: var(--seed-dimension-x5);
77
+ padding-left: var(--seed-dimension-x5);
78
+ padding-right: var(--seed-dimension-x5);
78
79
  padding-top: var(--seed-dimension-x5);
79
80
  gap: var(--seed-dimension-x1_5);
80
81
  }
@@ -97,7 +98,8 @@
97
98
  display: flex;
98
99
  flex-direction: column;
99
100
  align-items: stretch;
100
- padding-inline: var(--seed-dimension-x5);
101
+ padding-left: var(--seed-dimension-x5);
102
+ padding-right: var(--seed-dimension-x5);
101
103
  padding-top: var(--seed-dimension-x4);
102
104
  padding-bottom: var(--seed-dimension-x5);
103
105
  }
package/recipes/field-label.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .seed-field-label__indicatorText {
7
7
  display: inline;
8
8
  vertical-align: bottom;
9
- padding-inline-start: 0.25rem;
9
+ padding-left: 0.25rem;
10
10
  color: var(--seed-color-fg-neutral-subtle);
11
11
  font-size: var(--seed-font-size-t4);
12
12
  line-height: var(--seed-line-height-t5);
@@ -17,8 +17,8 @@
17
17
  vertical-align: top;
18
18
  width: 0.375rem;
19
19
  height: 0.375rem;
20
- margin-block-start: 0.25rem;
21
- margin-inline-start: 0.125rem;
20
+ margin-top: 0.25rem;
21
+ margin-left: 0.125rem;
22
22
  color: var(--seed-color-fg-critical)
23
23
  }
24
24
  .seed-field-label__root--weight_medium {
package/recipes/field.css CHANGED
@@ -8,14 +8,16 @@
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
- padding-inline: var(--seed-dimension-x0_5);
11
+ padding-left: var(--seed-dimension-x0_5);
12
+ padding-right: var(--seed-dimension-x0_5);
12
13
  gap: var(--seed-dimension-x2_5);
13
14
  }
14
15
  .seed-field__footer {
15
16
  display: flex;
16
17
  justify-content: space-between;
17
18
  align-items: flex-start;
18
- padding-inline: var(--seed-dimension-x0_5);
19
+ padding-left: var(--seed-dimension-x0_5);
20
+ padding-right: var(--seed-dimension-x0_5);
19
21
  gap: var(--seed-dimension-x2);
20
22
  }
21
23
  .seed-field__description {
package/recipes/floating-action-button.css CHANGED
@@ -46,7 +46,8 @@
46
46
  overflow: hidden;
47
47
  }
48
48
  .seed-floating-action-button__root--extended_true {
49
- padding-inline: var(--seed-dimension-x4_5);
49
+ padding-left: var(--seed-dimension-x4_5);
50
+ padding-right: var(--seed-dimension-x4_5);
50
51
  height: 48px;
51
52
  width: fit-content;
52
53
  max-width: 999px;
package/recipes/help-bubble.css CHANGED
@@ -2,8 +2,10 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  background: var(--seed-color-bg-neutral-inverted);
5
- padding-inline: var(--seed-dimension-x3);
6
- padding-block: var(--seed-dimension-x2_5);
5
+ padding-left: var(--seed-dimension-x3);
6
+ padding-right: var(--seed-dimension-x3);
7
+ padding-top: var(--seed-dimension-x2_5);
8
+ padding-bottom: var(--seed-dimension-x2_5);
7
9
  border-radius: var(--seed-radius-r3);
8
10
  word-break: keep-all;
9
11
  --seed-box-max-width: initial;
package/recipes/input-button.css CHANGED
@@ -7,7 +7,8 @@
7
7
  isolation: isolate;
8
8
  height: var(--seed-dimension-x13);
9
9
  gap: var(--seed-dimension-x2_5);
10
- padding-inline: var(--seed-dimension-x4);
10
+ padding-left: var(--seed-dimension-x4);
11
+ padding-right: var(--seed-dimension-x4);
11
12
  }
12
13
  .seed-input-button__button {
13
14
  position: absolute;
package/recipes/list-header.css CHANGED
@@ -5,8 +5,10 @@
5
5
  gap: var(--seed-dimension-x2_5);
6
6
  justify-content: space-between;
7
7
  box-sizing: border-box;
8
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
9
- padding-block: var(--seed-dimension-x2);
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);
10
12
  font-size: var(--seed-font-size-t4);
11
13
  line-height: var(--seed-line-height-t4)
12
14
  }
package/recipes/list-item.css CHANGED
@@ -8,8 +8,10 @@
8
8
  display: flex;
9
9
  width: 100%;
10
10
  z-index: 0;
11
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
12
- padding-block: var(--seed-dimension-x3);
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);
13
15
  --seed-box-align-items: center;
14
16
  align-items: var(--seed-box-align-items);
15
17
  transition-property: background-color;
package/recipes/manner-temp-badge.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-decoration: none;
11
11
  border-radius: var(--seed-radius-full);
12
12
  min-height: var(--seed-dimension-x5);
13
- padding-inline: var(--seed-dimension-x1_5);
14
- padding-block: var(--seed-dimension-x0_5);
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);
15
17
  font-size: var(--seed-font-size-t1);
16
18
  line-height: var(--seed-line-height-t1);
17
19
  font-weight: var(--seed-font-weight-bold)
package/recipes/menu-sheet-item.css CHANGED
@@ -3,8 +3,10 @@
3
3
  align-items: center;
4
4
  background-color: var(--seed-color-bg-neutral-weak);
5
5
  min-height: 52px;
6
- padding-inline: var(--seed-dimension-x4);
7
- padding-block: var(--seed-dimension-x3_5);
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);
8
10
  gap: var(--seed-dimension-x3_5);
9
11
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
10
12
  font-size: var(--seed-font-size-t5);
package/recipes/menu-sheet.css CHANGED
@@ -48,8 +48,10 @@
48
48
  word-break: break-all;
49
49
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
50
50
  background: var(--seed-color-bg-layer-floating);
51
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
52
- padding-block: var(--seed-dimension-x4);
51
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
52
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
53
+ padding-top: var(--seed-dimension-x4);
54
+ padding-bottom: var(--seed-dimension-x4);
53
55
  border-top-left-radius: var(--seed-radius-r5);
54
56
  border-top-right-radius: var(--seed-radius-r5);
55
57
  }
@@ -111,8 +113,10 @@
111
113
  justify-content: center;
112
114
  background-color: var(--seed-color-bg-neutral-weak);
113
115
  min-height: 52px;
114
- padding-inline: var(--seed-dimension-x5);
115
- padding-block: var(--seed-dimension-x3_5);
116
+ padding-left: var(--seed-dimension-x5);
117
+ padding-right: var(--seed-dimension-x5);
118
+ padding-top: var(--seed-dimension-x3_5);
119
+ padding-bottom: var(--seed-dimension-x3_5);
116
120
  border-radius: var(--seed-radius-r3);
117
121
  border: none;
118
122
  font-family: inherit;
package/recipes/notification-badge-positioner.css CHANGED
@@ -7,27 +7,27 @@
7
7
  }
8
8
  .seed-notification-badge-positioner--attach_icon {
9
9
  translate: 100% -100%;
10
- inset-block-end: auto;
11
- inset-inline-start: auto
10
+ bottom: auto;
11
+ left: auto
12
12
  }
13
13
  .seed-notification-badge-positioner--attach_text {
14
14
  translate: 100% 0%;
15
- inset-block-end: auto;
16
- inset-inline-start: auto
15
+ bottom: auto;
16
+ left: auto
17
17
  }
18
18
  .seed-notification-badge-positioner--size_small {}
19
19
  .seed-notification-badge-positioner--size_large {}
20
20
  .seed-notification-badge-positioner--size_large-attach_icon {
21
- inset-block-start: 14px;
22
- inset-inline-end: 8px
21
+ top: 14px;
22
+ right: 8px
23
23
  }
24
24
  .seed-notification-badge-positioner--size_small-attach_icon {
25
- inset-block-start: 7px;
26
- inset-inline-end: 7px
25
+ top: 7px;
26
+ right: 7px
27
27
  }
28
28
  .seed-notification-badge-positioner--size_large-attach_text {
29
- inset-inline-end: calc(-1 * 2px)
29
+ right: calc(-1 * 2px)
30
30
  }
31
31
  .seed-notification-badge-positioner--size_small-attach_text {
32
- inset-inline-end: calc(-1 * 2px)
32
+ right: calc(-1 * 2px)
33
33
  }
package/recipes/notification-badge.css CHANGED
@@ -19,8 +19,10 @@
19
19
  .seed-notification-badge--size_large {
20
20
  min-height: 18px;
21
21
  border-radius: var(--seed-radius-full);
22
- padding-inline: var(--seed-dimension-x1);
23
- padding-block: 0px;
22
+ padding-left: var(--seed-dimension-x1);
23
+ padding-right: var(--seed-dimension-x1);
24
+ padding-top: 0px;
25
+ padding-bottom: 0px;
24
26
  font-size: var(--seed-font-size-t1);
25
27
  line-height: var(--seed-line-height-t1);
26
28
  font-weight: var(--seed-font-weight-bold)
package/recipes/page-banner.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: var(--seed-dimension-x10);
13
- padding-inline: var(--seed-dimension-x4);
14
- padding-block: var(--seed-dimension-x2_5);
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);
15
17
  --seed-prefix-icon-size: var(--seed-dimension-x4);
16
18
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
17
19
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * 0.5 - var(--seed-dimension-x2_5));
package/recipes/radio.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
4
  position: relative;
5
- max-inline-size: 100%;
5
+ max-width: 100%;
6
6
  vertical-align: top;
7
7
  isolation: isolate;
8
8
  cursor: pointer;
@@ -30,7 +30,7 @@
30
30
  .seed-radio__label--size_large {
31
31
  font-size: var(--seed-font-size-t5);
32
32
  line-height: var(--seed-line-height-t5);
33
- margin-block-start: calc(18px - 0.65625rem);
33
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
34
34
  }
35
35
  .seed-radio__root--size_medium {
36
36
  min-height: var(--seed-dimension-x8);
@@ -39,5 +39,5 @@
39
39
  .seed-radio__label--size_medium {
40
40
  font-size: var(--seed-font-size-t4);
41
41
  line-height: var(--seed-line-height-t4);
42
- margin-block-start: calc(16px - 0.59375rem);
42
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
43
43
  }
package/recipes/reaction-button.css CHANGED
@@ -61,8 +61,10 @@
61
61
  }
62
62
  .seed-reaction-button--size_xsmall {
63
63
  height: var(--seed-dimension-x8);
64
- padding-inline: var(--seed-dimension-x3);
65
- padding-block: var(--seed-dimension-x1_5);
64
+ padding-left: var(--seed-dimension-x3);
65
+ padding-right: var(--seed-dimension-x3);
66
+ padding-top: var(--seed-dimension-x1_5);
67
+ padding-bottom: var(--seed-dimension-x1_5);
66
68
  gap: var(--seed-dimension-x1);
67
69
  border-radius: var(--seed-radius-full);
68
70
  font-size: var(--seed-font-size-t3);
@@ -75,8 +77,10 @@
75
77
  }
76
78
  .seed-reaction-button--size_small {
77
79
  height: var(--seed-dimension-x9);
78
- padding-inline: var(--seed-dimension-x3_5);
79
- padding-block: var(--seed-dimension-x2);
80
+ padding-left: var(--seed-dimension-x3_5);
81
+ padding-right: var(--seed-dimension-x3_5);
82
+ padding-top: var(--seed-dimension-x2);
83
+ padding-bottom: var(--seed-dimension-x2);
80
84
  gap: var(--seed-dimension-x1);
81
85
  border-radius: var(--seed-radius-full);
82
86
  font-size: var(--seed-font-size-t3);
package/recipes/segmented-control.css CHANGED
@@ -16,8 +16,9 @@
16
16
  z-index: -1;
17
17
  will-change: transform;
18
18
  transform: translateX(calc(var(--segment-index) * 100%));
19
- inset-block: var(--seed-dimension-x1);
20
- inset-inline-start: var(--seed-dimension-x1);
19
+ top: var(--seed-dimension-x1);
20
+ bottom: var(--seed-dimension-x1);
21
+ left: var(--seed-dimension-x1);
21
22
  width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
22
23
  border-radius: var(--seed-radius-full);
23
24
  background-color: var(--seed-color-palette-gray-00);
@@ -37,8 +38,10 @@
37
38
  min-height: 34px;
38
39
  gap: var(--seed-dimension-x1_5);
39
40
  height: 100%;
40
- padding-inline: var(--seed-dimension-x6);
41
- padding-block: var(--seed-dimension-x1_5);
41
+ padding-left: var(--seed-dimension-x6);
42
+ padding-right: var(--seed-dimension-x6);
43
+ padding-top: var(--seed-dimension-x1_5);
44
+ padding-bottom: var(--seed-dimension-x1_5);
42
45
  border-radius: var(--seed-radius-full);
43
46
  font-weight: var(--seed-font-weight-bold);
44
47
  font-size: var(--seed-font-size-t5);
package/recipes/select-box.css CHANGED
@@ -4,8 +4,10 @@
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
6
  gap: var(--seed-dimension-x2_5);
7
- padding-inline: var(--seed-dimension-x4);
8
- padding-block: var(--seed-dimension-x5);
7
+ padding-left: var(--seed-dimension-x4);
8
+ padding-right: var(--seed-dimension-x4);
9
+ padding-top: var(--seed-dimension-x5);
10
+ padding-bottom: var(--seed-dimension-x5);
9
11
  border-radius: var(--seed-radius-r3);
10
12
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
11
13
  background-color: var(--seed-color-bg-transparent);
package/recipes/slider.css CHANGED
@@ -91,9 +91,15 @@
91
91
  .seed-slider__valueIndicatorRoot {
92
92
  display: flex;
93
93
  flex-direction: column;
94
+ align-items: center;
95
+ position: absolute;
96
+ top: 50%;
97
+ box-sizing: border-box;
94
98
  background: var(--seed-color-bg-neutral-inverted);
95
- padding-inline: var(--seed-dimension-x1_5);
96
- padding-block: var(--seed-dimension-x0_5);
99
+ padding-left: var(--seed-dimension-x1_5);
100
+ padding-right: var(--seed-dimension-x1_5);
101
+ padding-top: var(--seed-dimension-x0_5);
102
+ padding-bottom: var(--seed-dimension-x0_5);
97
103
  border-radius: var(--seed-radius-r1);
98
104
  color: var(--seed-color-fg-neutral-inverted);
99
105
  font-size: var(--seed-font-size-t1);
@@ -102,70 +108,70 @@
102
108
  white-space: pre-wrap;
103
109
  text-align: center;
104
110
  width: max-content;
105
- position: absolute;
106
- bottom: calc(100% + var(--seed-dimension-x3));
107
- opacity: 0;
108
111
  }
109
112
  .seed-slider__valueIndicatorRoot[data-dir='ltr'] {
110
- left: calc(var(--indicator-position) * 1% + var(--indicator-offset));
111
- transform: translateX(-50%);
113
+ left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
114
+ transform: translate(-50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
112
115
  }
113
116
  .seed-slider__valueIndicatorRoot[data-dir='rtl'] {
114
- right: calc(var(--indicator-position) * 1% + var(--indicator-offset));
115
- transform: translateX(50%);
116
- }
117
- .seed-slider__valueIndicatorRoot[data-thumb-dragging] {
118
- opacity: 1;
117
+ right: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
118
+ transform: translate(50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
119
119
  }
120
- .seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir='ltr'] {
120
+ .seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir='ltr'] {
121
121
  animation: seed-enter;
122
122
  animation-timing-function: var(--seed-timing-function-enter);
123
123
  animation-duration: var(--seed-duration-d4);
124
124
  --seed-enter-translate-x: -50%;
125
- --seed-enter-translate-y: var(--seed-dimension-x3);
125
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
126
126
  --seed-enter-opacity: 0;
127
127
  --seed-enter-scale: 0.9;
128
128
  }
129
- .seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir='rtl'] {
129
+ .seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir='rtl'] {
130
130
  animation: seed-enter;
131
131
  animation-timing-function: var(--seed-timing-function-enter);
132
132
  animation-duration: var(--seed-duration-d4);
133
133
  --seed-enter-translate-x: 50%;
134
- --seed-enter-translate-y: var(--seed-dimension-x3);
134
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
135
135
  --seed-enter-opacity: 0;
136
136
  --seed-enter-scale: 0.9;
137
137
  }
138
- .seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir='ltr'] {
138
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir='ltr'] {
139
139
  animation: seed-exit;
140
140
  animation-timing-function: var(--seed-timing-function-easing);
141
141
  animation-duration: var(--seed-duration-d4);
142
142
  animation-fill-mode: forwards;
143
143
  --seed-exit-translate-x: -50%;
144
- --seed-exit-translate-y: var(--seed-dimension-x3);
144
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
145
145
  --seed-exit-opacity: 0;
146
146
  --seed-exit-scale: 1;
147
147
  }
148
- .seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir='rtl'] {
148
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir='rtl'] {
149
149
  animation: seed-exit;
150
150
  animation-timing-function: var(--seed-timing-function-easing);
151
151
  animation-duration: var(--seed-duration-d4);
152
152
  animation-fill-mode: forwards;
153
153
  --seed-exit-translate-x: 50%;
154
- --seed-exit-translate-y: var(--seed-dimension-x3);
154
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
155
155
  --seed-exit-opacity: 0;
156
156
  --seed-exit-scale: 1;
157
157
  }
158
- .seed-slider__valueIndicatorRoot:is(:hidden, [hidden], [data-hidden]) {
159
- display: none !important;
158
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
159
+ animation-duration: 0s;
160
160
  }
161
161
  .seed-slider__valueIndicatorArrow {
162
162
  width: var(--seed-dimension-x2_5);
163
163
  height: var(--seed-dimension-x2_5);
164
164
  position: absolute;
165
165
  top: 100%;
166
- left: 50%;
166
+ }
167
+ .seed-slider__valueIndicatorArrow[data-dir='ltr'] {
168
+ left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
167
169
  transform: translateX(-50%);
168
170
  }
171
+ .seed-slider__valueIndicatorArrow[data-dir='rtl'] {
172
+ right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
173
+ transform: translateX(50%);
174
+ }
169
175
  .seed-slider__valueIndicatorArrowTip {
170
176
  display: block;
171
177
  fill: var(--seed-color-bg-neutral-inverted);
package/recipes/snackbar-region.css CHANGED
@@ -6,8 +6,10 @@
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-inline: var(--seed-dimension-x2);
10
- padding-block: var(--seed-dimension-x2);
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);
11
13
  transition-property: bottom;
12
14
  transition-duration: var(--seed-duration-d4);
13
15
  transition-timing-function: var(--seed-timing-function-easing)