sh-ui-cli 0.59.4 → 0.59.5

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 (45) hide show
  1. package/data/changelog/versions.json +15 -0
  2. package/data/registry/react/components/accordion/styles.css +1 -1
  3. package/data/registry/react/components/accordion/styles.module.css +1 -1
  4. package/data/registry/react/components/card/styles.css +2 -2
  5. package/data/registry/react/components/card/styles.module.css +2 -2
  6. package/data/registry/react/components/carousel/styles.css +1 -1
  7. package/data/registry/react/components/carousel/styles.module.css +1 -1
  8. package/data/registry/react/components/code-editor/index.tailwind.tsx +2 -2
  9. package/data/registry/react/components/code-editor/styles.css +2 -2
  10. package/data/registry/react/components/code-editor/styles.module.css +2 -2
  11. package/data/registry/react/components/code-panel/styles.css +3 -3
  12. package/data/registry/react/components/code-panel/styles.module.css +3 -3
  13. package/data/registry/react/components/color-picker/styles.css +2 -2
  14. package/data/registry/react/components/color-picker/styles.module.css +2 -2
  15. package/data/registry/react/components/combobox/styles.css +2 -2
  16. package/data/registry/react/components/combobox/styles.module.css +2 -2
  17. package/data/registry/react/components/context-menu/styles.css +3 -3
  18. package/data/registry/react/components/context-menu/styles.module.css +3 -3
  19. package/data/registry/react/components/date-picker/styles.css +1 -1
  20. package/data/registry/react/components/date-picker/styles.module.css +1 -1
  21. package/data/registry/react/components/dropdown-menu/styles.css +3 -3
  22. package/data/registry/react/components/dropdown-menu/styles.module.css +3 -3
  23. package/data/registry/react/components/header/styles.css +2 -2
  24. package/data/registry/react/components/header/styles.module.css +2 -2
  25. package/data/registry/react/components/input/styles.css +4 -4
  26. package/data/registry/react/components/input/styles.module.css +4 -4
  27. package/data/registry/react/components/markdown-editor/index.tailwind.tsx +4 -4
  28. package/data/registry/react/components/markdown-editor/styles.css +4 -4
  29. package/data/registry/react/components/markdown-editor/styles.module.css +4 -4
  30. package/data/registry/react/components/numeric-input/styles.css +1 -1
  31. package/data/registry/react/components/numeric-input/styles.module.css +1 -1
  32. package/data/registry/react/components/page-toc/styles.css +4 -4
  33. package/data/registry/react/components/page-toc/styles.module.css +4 -4
  34. package/data/registry/react/components/rich-text-editor/index.tailwind.tsx +2 -2
  35. package/data/registry/react/components/rich-text-editor/styles.css +2 -2
  36. package/data/registry/react/components/rich-text-editor/styles.module.css +2 -2
  37. package/data/registry/react/components/select/styles.css +2 -2
  38. package/data/registry/react/components/select/styles.module.css +2 -2
  39. package/data/registry/react/components/sidebar/styles.css +14 -14
  40. package/data/registry/react/components/sidebar/styles.module.css +14 -14
  41. package/data/registry/react/components/slider/styles.css +2 -2
  42. package/data/registry/react/components/slider/styles.module.css +2 -2
  43. package/data/registry/react/components/toast/styles.css +2 -2
  44. package/data/registry/react/components/toast/styles.module.css +2 -2
  45. package/package.json +1 -1
package/data/changelog/versions.json CHANGED
@@ -2,6 +2,21 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
4
4
  "versions": [
5
+ {
6
+ "version": "0.59.5",
7
+ "date": "2026-05-06",
8
+ "title": "접근성 라운드 5 — RTL via logical properties",
9
+ "type": "patch",
10
+ "highlights": [
11
+ "**모든 컴포넌트 CSS 를 logical property 로 전환** — `padding-left/right` → `padding-inline-start/end`, `margin-left/right` → `margin-inline-start/end`, `border-left/right` → `border-inline-start/end`, `text-align: left/right` → `start/end`. 60+ 파일, 155 라인 변경.",
12
+ "**affix / icon column / 닫기 버튼 등 절대 위치 요소** — `left:` / `right:` 도 `inset-inline-start/end` 로 전환. Input affix prefix/suffix, Dropdown/Context Menu indicator, Code-panel 복사 버튼, Carousel 컨트롤, Page-toc 위치, Toast close 버튼.",
13
+ "**그대로 유지한 패턴** — `left: 50% + transform: translateX(-50%)` 센터링 hack, `[data-side=\"left|right\"]` 사용자 명시 사이드 (Sidebar / Toast position), JS 가 측정해 주입하는 `--active-tab-left` (Tabs).",
14
+ "**RTL 효과** — `<html dir=\"rtl\">` 또는 `direction: rtl` 컨테이너에서 자동으로 padding/margin/icon-position 이 미러링. Arabic, Hebrew, Persian 등 지원.",
15
+ "**LTR 영향 0** — logical 속성은 LTR 에서 기존 physical 과 동일하게 해석. 회귀 없음.",
16
+ "**3 variant 동기화** — registry/react plain CSS + CSS Modules + apps/docs + Tailwind variant 의 inline CSS string."
17
+ ],
18
+ "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.5"
19
+ },
5
20
  {
6
21
  "version": "0.59.4",
7
22
  "date": "2026-05-06",
package/data/registry/react/components/accordion/styles.css CHANGED
@@ -30,7 +30,7 @@
30
30
  font-size: 0.9375rem;
31
31
  font-weight: var(--weight-medium);
32
32
  line-height: 1.4;
33
- text-align: left;
33
+ text-align: start;
34
34
  cursor: pointer;
35
35
  transition: background-color var(--duration-fast) var(--ease-standard);
36
36
  -webkit-tap-highlight-color: transparent;
package/data/registry/react/components/accordion/styles.module.css CHANGED
@@ -30,7 +30,7 @@
30
30
  font-size: 0.9375rem;
31
31
  font-weight: var(--weight-medium);
32
32
  line-height: 1.4;
33
- text-align: left;
33
+ text-align: start;
34
34
  cursor: pointer;
35
35
  transition: background-color var(--duration-fast) var(--ease-standard);
36
36
  -webkit-tap-highlight-color: transparent;
package/data/registry/react/components/card/styles.css CHANGED
@@ -82,8 +82,8 @@
82
82
  .sh-ui-card__header,
83
83
  .sh-ui-card__content,
84
84
  .sh-ui-card__footer {
85
- padding-left: var(--space-4);
86
- padding-right: var(--space-4);
85
+ padding-inline-start: var(--space-4);
86
+ padding-inline-end: var(--space-4);
87
87
  }
88
88
  .sh-ui-card__footer {
89
89
  flex-wrap: wrap;
package/data/registry/react/components/card/styles.module.css CHANGED
@@ -80,8 +80,8 @@
80
80
  .header,
81
81
  .content,
82
82
  .footer {
83
- padding-left: var(--space-4);
84
- padding-right: var(--space-4);
83
+ padding-inline-start: var(--space-4);
84
+ padding-inline-end: var(--space-4);
85
85
  }
86
86
  .footer {
87
87
  flex-wrap: wrap;
package/data/registry/react/components/carousel/styles.css CHANGED
@@ -111,7 +111,7 @@
111
111
  .sh-ui-carousel__indicators[data-orientation="vertical"] {
112
112
  position: absolute;
113
113
  top: 50%;
114
- right: 0.5rem;
114
+ inset-inline-end: 0.5rem;
115
115
  margin-top: 0;
116
116
  flex-direction: column;
117
117
  transform: translateY(-50%);
package/data/registry/react/components/carousel/styles.module.css CHANGED
@@ -111,7 +111,7 @@
111
111
  .carousel__indicators[data-orientation="vertical"] {
112
112
  position: absolute;
113
113
  top: 50%;
114
- right: 0.5rem;
114
+ inset-inline-end: 0.5rem;
115
115
  margin-top: 0;
116
116
  flex-direction: column;
117
117
  transform: translateY(-50%);
package/data/registry/react/components/code-editor/index.tailwind.tsx CHANGED
@@ -153,9 +153,9 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
153
153
  .sh-ui-code-editor .cm-scroller { font-family: inherit; min-height: var(--sh-ui-code-editor-min-height, 7.5rem); max-height: var(--sh-ui-code-editor-max-height, 25rem); }
154
154
  .sh-ui-code-editor .cm-content { caret-color: var(--foreground); color: var(--foreground); padding: var(--space-3) 0; }
155
155
  .sh-ui-code-editor .cm-line { padding: 0 var(--space-3); }
156
- .sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-right: 1px solid var(--border); }
156
+ .sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-inline-end: 1px solid var(--border); }
157
157
  .sh-ui-code-editor .cm-activeLineGutter, .sh-ui-code-editor .cm-activeLine { background: var(--background-muted); }
158
- .sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-left-color: var(--foreground); }
158
+ .sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-inline-start-color: var(--foreground); }
159
159
  .sh-ui-code-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .sh-ui-code-editor ::selection { background: var(--background-muted) !important; }
160
160
  .sh-ui-code-editor .cm-placeholder { color: var(--foreground-muted); }
161
161
  .sh-ui-code-editor .cm-tooltip { background: var(--background); border: 1px solid var(--border); color: var(--foreground); border-radius: calc(var(--radius) - 2px); }
package/data/registry/react/components/code-editor/styles.css CHANGED
@@ -40,7 +40,7 @@
40
40
  .sh-ui-code-editor .cm-gutters {
41
41
  background: var(--background-subtle);
42
42
  color: var(--foreground-muted);
43
- border-right: 1px solid var(--border);
43
+ border-inline-end: 1px solid var(--border);
44
44
  }
45
45
  .sh-ui-code-editor .cm-activeLineGutter,
46
46
  .sh-ui-code-editor .cm-activeLine {
@@ -48,7 +48,7 @@
48
48
  }
49
49
  .sh-ui-code-editor .cm-cursor,
50
50
  .sh-ui-code-editor .cm-dropCursor {
51
- border-left-color: var(--foreground);
51
+ border-inline-start-color: var(--foreground);
52
52
  }
53
53
  .sh-ui-code-editor .cm-selectionBackground,
54
54
  .sh-ui-code-editor .cm-editor .cm-selectionBackground,
package/data/registry/react/components/code-editor/styles.module.css CHANGED
@@ -40,7 +40,7 @@
40
40
  .code-editor .cm-gutters {
41
41
  background: var(--background-subtle);
42
42
  color: var(--foreground-muted);
43
- border-right: 1px solid var(--border);
43
+ border-inline-end: 1px solid var(--border);
44
44
  }
45
45
  .code-editor .cm-activeLineGutter,
46
46
  .code-editor .cm-activeLine {
@@ -48,7 +48,7 @@
48
48
  }
49
49
  .code-editor .cm-cursor,
50
50
  .code-editor .cm-dropCursor {
51
- border-left-color: var(--foreground);
51
+ border-inline-start-color: var(--foreground);
52
52
  }
53
53
  .code-editor .cm-selectionBackground,
54
54
  .code-editor .cm-editor .cm-selectionBackground,
package/data/registry/react/components/code-panel/styles.css CHANGED
@@ -33,7 +33,7 @@
33
33
  .sh-ui-code__copy-floating {
34
34
  position: absolute;
35
35
  top: var(--space-2);
36
- right: var(--space-2);
36
+ inset-inline-end: var(--space-2);
37
37
  z-index: 1;
38
38
  opacity: 0;
39
39
  transition: opacity var(--duration-fast);
@@ -116,8 +116,8 @@
116
116
  counter-increment: step;
117
117
  display: inline-block;
118
118
  width: 1.75rem;
119
- margin-right: var(--space-4);
120
- text-align: right;
119
+ margin-inline-end: var(--space-4);
120
+ text-align: end;
121
121
  color: var(--foreground-muted);
122
122
  opacity: 0.7;
123
123
  user-select: none;
package/data/registry/react/components/code-panel/styles.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  .code__copy-floating {
34
34
  position: absolute;
35
35
  top: var(--space-2);
36
- right: var(--space-2);
36
+ inset-inline-end: var(--space-2);
37
37
  z-index: 1;
38
38
  opacity: 0;
39
39
  transition: opacity var(--duration-fast);
@@ -116,8 +116,8 @@
116
116
  counter-increment: step;
117
117
  display: inline-block;
118
118
  width: 1.75rem;
119
- margin-right: var(--space-4);
120
- text-align: right;
119
+ margin-inline-end: var(--space-4);
120
+ text-align: end;
121
121
  color: var(--foreground-muted);
122
122
  opacity: 0.7;
123
123
  user-select: none;
package/data/registry/react/components/color-picker/styles.css CHANGED
@@ -36,7 +36,7 @@
36
36
  position: absolute;
37
37
  width: 0.875rem;
38
38
  height: 0.875rem;
39
- margin-left: -0.4375rem;
39
+ margin-inline-start: -0.4375rem;
40
40
  margin-top: -0.4375rem;
41
41
  border: 2px solid #fff;
42
42
  border-radius: 50%;
@@ -69,7 +69,7 @@
69
69
  top: 50%;
70
70
  width: 0.875rem;
71
71
  height: 0.875rem;
72
- margin-left: -0.4375rem;
72
+ margin-inline-start: -0.4375rem;
73
73
  transform: translateY(-50%);
74
74
  background: #fff;
75
75
  border-radius: 50%;
package/data/registry/react/components/color-picker/styles.module.css CHANGED
@@ -36,7 +36,7 @@
36
36
  position: absolute;
37
37
  width: 0.875rem;
38
38
  height: 0.875rem;
39
- margin-left: -0.4375rem;
39
+ margin-inline-start: -0.4375rem;
40
40
  margin-top: -0.4375rem;
41
41
  border: 2px solid #fff;
42
42
  border-radius: 50%;
@@ -69,7 +69,7 @@
69
69
  top: 50%;
70
70
  width: 0.875rem;
71
71
  height: 0.875rem;
72
- margin-left: -0.4375rem;
72
+ margin-inline-start: -0.4375rem;
73
73
  transform: translateY(-50%);
74
74
  background: #fff;
75
75
  border-radius: 50%;
package/data/registry/react/components/combobox/styles.css CHANGED
@@ -83,7 +83,7 @@
83
83
 
84
84
  .sh-ui-combobox__item-indicator {
85
85
  order: 1;
86
- margin-left: auto;
86
+ margin-inline-start: auto;
87
87
  display: inline-flex;
88
88
  align-items: center;
89
89
  justify-content: center;
@@ -121,7 +121,7 @@
121
121
  align-items: center;
122
122
  gap: var(--space-1);
123
123
  padding: 0.125rem 0.375rem 0.125rem var(--space-2);
124
- margin-right: var(--space-1);
124
+ margin-inline-end: var(--space-1);
125
125
  font-size: var(--text-xs);
126
126
  line-height: 1.25rem;
127
127
  background: var(--background-muted);
package/data/registry/react/components/combobox/styles.module.css CHANGED
@@ -83,7 +83,7 @@
83
83
 
84
84
  .combobox__item-indicator {
85
85
  order: 1;
86
- margin-left: auto;
86
+ margin-inline-start: auto;
87
87
  display: inline-flex;
88
88
  align-items: center;
89
89
  justify-content: center;
@@ -121,7 +121,7 @@
121
121
  align-items: center;
122
122
  gap: var(--space-1);
123
123
  padding: 0.125rem 0.375rem 0.125rem var(--space-2);
124
- margin-right: var(--space-1);
124
+ margin-inline-end: var(--space-1);
125
125
  font-size: var(--text-xs);
126
126
  line-height: 1.25rem;
127
127
  background: var(--background-muted);
package/data/registry/react/components/context-menu/styles.css CHANGED
@@ -78,12 +78,12 @@
78
78
  }
79
79
 
80
80
  .sh-ui-cm__item--check {
81
- padding-left: 1.75rem;
81
+ padding-inline-start: 1.75rem;
82
82
  }
83
83
 
84
84
  .sh-ui-cm__item-indicator {
85
85
  position: absolute;
86
- left: 0.5rem;
86
+ inset-inline-start: 0.5rem;
87
87
  display: inline-flex;
88
88
  align-items: center;
89
89
  justify-content: center;
@@ -119,7 +119,7 @@
119
119
  display: inline-flex;
120
120
  align-items: center;
121
121
  justify-content: center;
122
- margin-left: auto;
122
+ margin-inline-start: auto;
123
123
  color: var(--foreground-muted);
124
124
  }
125
125
 
package/data/registry/react/components/context-menu/styles.module.css CHANGED
@@ -78,12 +78,12 @@
78
78
  }
79
79
 
80
80
  .cm__item--check {
81
- padding-left: 1.75rem;
81
+ padding-inline-start: 1.75rem;
82
82
  }
83
83
 
84
84
  .cm__item-indicator {
85
85
  position: absolute;
86
- left: 0.5rem;
86
+ inset-inline-start: 0.5rem;
87
87
  display: inline-flex;
88
88
  align-items: center;
89
89
  justify-content: center;
@@ -119,7 +119,7 @@
119
119
  display: inline-flex;
120
120
  align-items: center;
121
121
  justify-content: center;
122
- margin-left: auto;
122
+ margin-inline-start: auto;
123
123
  color: var(--foreground-muted);
124
124
  }
125
125
 
package/data/registry/react/components/date-picker/styles.css CHANGED
@@ -63,7 +63,7 @@
63
63
  flex-shrink: 0;
64
64
  display: inline-flex;
65
65
  color: var(--foreground-muted);
66
- margin-left: var(--space-2);
66
+ margin-inline-start: var(--space-2);
67
67
  }
68
68
 
69
69
  /* ── Positioner / Popup ── */
package/data/registry/react/components/date-picker/styles.module.css CHANGED
@@ -63,7 +63,7 @@
63
63
  flex-shrink: 0;
64
64
  display: inline-flex;
65
65
  color: var(--foreground-muted);
66
- margin-left: var(--space-2);
66
+ margin-inline-start: var(--space-2);
67
67
  }
68
68
 
69
69
  /* ── Positioner / Popup ── */
package/data/registry/react/components/dropdown-menu/styles.css CHANGED
@@ -86,12 +86,12 @@
86
86
 
87
87
  /* checkbox/radio item — 왼쪽 인디케이터 공간 확보 */
88
88
  .sh-ui-dm__item--check {
89
- padding-left: 1.75rem;
89
+ padding-inline-start: 1.75rem;
90
90
  }
91
91
 
92
92
  .sh-ui-dm__item-indicator {
93
93
  position: absolute;
94
- left: 0.5rem;
94
+ inset-inline-start: 0.5rem;
95
95
  display: inline-flex;
96
96
  align-items: center;
97
97
  justify-content: center;
@@ -129,7 +129,7 @@
129
129
  display: inline-flex;
130
130
  align-items: center;
131
131
  justify-content: center;
132
- margin-left: auto;
132
+ margin-inline-start: auto;
133
133
  color: var(--foreground-muted);
134
134
  }
135
135
 
package/data/registry/react/components/dropdown-menu/styles.module.css CHANGED
@@ -86,12 +86,12 @@
86
86
 
87
87
  /* checkbox/radio item — 왼쪽 인디케이터 공간 확보 */
88
88
  .dm__item--check {
89
- padding-left: 1.75rem;
89
+ padding-inline-start: 1.75rem;
90
90
  }
91
91
 
92
92
  .dm__item-indicator {
93
93
  position: absolute;
94
- left: 0.5rem;
94
+ inset-inline-start: 0.5rem;
95
95
  display: inline-flex;
96
96
  align-items: center;
97
97
  justify-content: center;
@@ -129,7 +129,7 @@
129
129
  display: inline-flex;
130
130
  align-items: center;
131
131
  justify-content: center;
132
- margin-left: auto;
132
+ margin-inline-start: auto;
133
133
  color: var(--foreground-muted);
134
134
  }
135
135
 
package/data/registry/react/components/header/styles.css CHANGED
@@ -144,7 +144,7 @@
144
144
  display: inline-flex;
145
145
  align-items: center;
146
146
  gap: var(--space-2);
147
- margin-left: auto;
147
+ margin-inline-start: auto;
148
148
  flex-shrink: 0;
149
149
  }
150
150
 
@@ -296,7 +296,7 @@
296
296
  bottom: 0;
297
297
  width: min(17.5rem, 85vw);
298
298
  background: var(--background-subtle);
299
- border-right: 1px solid var(--border);
299
+ border-inline-end: 1px solid var(--border);
300
300
  z-index: var(--z-modal);
301
301
  transform: translateX(-100%);
302
302
  transition: transform var(--duration-base) var(--ease-standard);
package/data/registry/react/components/header/styles.module.css CHANGED
@@ -144,7 +144,7 @@
144
144
  display: inline-flex;
145
145
  align-items: center;
146
146
  gap: var(--space-2);
147
- margin-left: auto;
147
+ margin-inline-start: auto;
148
148
  flex-shrink: 0;
149
149
  }
150
150
 
@@ -296,7 +296,7 @@
296
296
  bottom: 0;
297
297
  width: min(17.5rem, 85vw);
298
298
  background: var(--background-subtle);
299
- border-right: 1px solid var(--border);
299
+ border-inline-end: 1px solid var(--border);
300
300
  z-index: var(--z-modal);
301
301
  transform: translateX(-100%);
302
302
  transition: transform var(--duration-base) var(--ease-standard);
package/data/registry/react/components/input/styles.css CHANGED
@@ -65,8 +65,8 @@
65
65
  display: block;
66
66
  }
67
67
 
68
- .sh-ui-input--with-prefix { padding-left: var(--space-10); }
69
- .sh-ui-input--with-suffix { padding-right: var(--space-10); }
68
+ .sh-ui-input--with-prefix { padding-inline-start: var(--space-10); }
69
+ .sh-ui-input--with-suffix { padding-inline-end: var(--space-10); }
70
70
 
71
71
  .sh-ui-input__affix {
72
72
  position: absolute;
@@ -78,8 +78,8 @@
78
78
  color: var(--foreground-muted);
79
79
  pointer-events: none;
80
80
  }
81
- .sh-ui-input__affix--prefix { left: var(--space-3); }
82
- .sh-ui-input__affix--suffix { right: var(--space-1); }
81
+ .sh-ui-input__affix--prefix { inset-inline-start: var(--space-3); }
82
+ .sh-ui-input__affix--suffix { inset-inline-end: var(--space-1); }
83
83
 
84
84
  /* suffix 내부 클릭 가능한 요소(버튼 등)는 pointer-events 복원 */
85
85
  .sh-ui-input__affix > * { pointer-events: auto; }
package/data/registry/react/components/input/styles.module.css CHANGED
@@ -64,8 +64,8 @@
64
64
  display: block;
65
65
  }
66
66
 
67
- .withPrefix { padding-left: var(--space-10); }
68
- .withSuffix { padding-right: var(--space-10); }
67
+ .withPrefix { padding-inline-start: var(--space-10); }
68
+ .withSuffix { padding-inline-end: var(--space-10); }
69
69
 
70
70
  .affix {
71
71
  position: absolute;
@@ -77,8 +77,8 @@
77
77
  color: var(--foreground-muted);
78
78
  pointer-events: none;
79
79
  }
80
- .affixPrefix { left: var(--space-3); }
81
- .affixSuffix { right: var(--space-1); }
80
+ .affixPrefix { inset-inline-start: var(--space-3); }
81
+ .affixSuffix { inset-inline-end: var(--space-1); }
82
82
 
83
83
  .affix > * { pointer-events: auto; }
84
84
 
package/data/registry/react/components/markdown-editor/index.tailwind.tsx CHANGED
@@ -95,19 +95,19 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
95
95
  .sh-ui-md-editor__preview-inner h3 { font-size: 1.125rem; }
96
96
  .sh-ui-md-editor__preview-inner h4, .sh-ui-md-editor__preview-inner h5, .sh-ui-md-editor__preview-inner h6 { font-size: 1rem; }
97
97
  .sh-ui-md-editor__preview-inner p, .sh-ui-md-editor__preview-inner ul, .sh-ui-md-editor__preview-inner ol, .sh-ui-md-editor__preview-inner blockquote, .sh-ui-md-editor__preview-inner pre, .sh-ui-md-editor__preview-inner table { margin-top: 0; margin-bottom: var(--space-3); }
98
- .sh-ui-md-editor__preview-inner ul, .sh-ui-md-editor__preview-inner ol { padding-left: var(--space-5); }
98
+ .sh-ui-md-editor__preview-inner ul, .sh-ui-md-editor__preview-inner ol { padding-inline-start: var(--space-5); }
99
99
  .sh-ui-md-editor__preview-inner li { margin-bottom: var(--space-1); }
100
- .sh-ui-md-editor__preview-inner li > input[type="checkbox"] { margin-right: var(--space-2); }
100
+ .sh-ui-md-editor__preview-inner li > input[type="checkbox"] { margin-inline-end: var(--space-2); }
101
101
  .sh-ui-md-editor__preview-inner a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
102
102
  .sh-ui-md-editor__preview-inner a:hover { text-decoration-thickness: 2px; }
103
- .sh-ui-md-editor__preview-inner blockquote { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
103
+ .sh-ui-md-editor__preview-inner blockquote { padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
104
104
  .sh-ui-md-editor__preview-inner blockquote > :last-child { margin-bottom: 0; }
105
105
  .sh-ui-md-editor__preview-inner code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; padding: 0.125rem 0.375rem; border-radius: calc(var(--radius) - 4px); background: var(--background-muted); color: var(--foreground); }
106
106
  .sh-ui-md-editor__preview-inner pre { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background-subtle); overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; }
107
107
  .sh-ui-md-editor__preview-inner pre > code { padding: 0; background: transparent; font-size: inherit; }
108
108
  .sh-ui-md-editor__preview-inner hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
109
109
  .sh-ui-md-editor__preview-inner table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
110
- .sh-ui-md-editor__preview-inner th, .sh-ui-md-editor__preview-inner td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); text-align: left; }
110
+ .sh-ui-md-editor__preview-inner th, .sh-ui-md-editor__preview-inner td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); text-align: start; }
111
111
  .sh-ui-md-editor__preview-inner thead { background: var(--background-subtle); }
112
112
  .sh-ui-md-editor__preview-inner img { max-width: 100%; height: auto; border-radius: calc(var(--radius) - 2px); }
113
113
  .sh-ui-md-editor__preview-inner del { color: var(--foreground-muted); }
package/data/registry/react/components/markdown-editor/styles.css CHANGED
@@ -76,13 +76,13 @@
76
76
 
77
77
  .sh-ui-md-editor__preview-inner ul,
78
78
  .sh-ui-md-editor__preview-inner ol {
79
- padding-left: var(--space-5);
79
+ padding-inline-start: var(--space-5);
80
80
  }
81
81
  .sh-ui-md-editor__preview-inner li {
82
82
  margin-bottom: var(--space-1);
83
83
  }
84
84
  .sh-ui-md-editor__preview-inner li > input[type="checkbox"] {
85
- margin-right: var(--space-2);
85
+ margin-inline-end: var(--space-2);
86
86
  }
87
87
 
88
88
  .sh-ui-md-editor__preview-inner a {
@@ -96,7 +96,7 @@
96
96
 
97
97
  .sh-ui-md-editor__preview-inner blockquote {
98
98
  padding: var(--space-2) var(--space-3);
99
- border-left: 3px solid var(--border-strong);
99
+ border-inline-start: 3px solid var(--border-strong);
100
100
  background: var(--background-subtle);
101
101
  color: var(--foreground-muted);
102
102
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
@@ -143,7 +143,7 @@
143
143
  .sh-ui-md-editor__preview-inner td {
144
144
  padding: var(--space-2) var(--space-3);
145
145
  border: 1px solid var(--border);
146
- text-align: left;
146
+ text-align: start;
147
147
  }
148
148
  .sh-ui-md-editor__preview-inner thead {
149
149
  background: var(--background-subtle);
package/data/registry/react/components/markdown-editor/styles.module.css CHANGED
@@ -76,13 +76,13 @@
76
76
 
77
77
  .md-editor__preview-inner ul,
78
78
  .md-editor__preview-inner ol {
79
- padding-left: var(--space-5);
79
+ padding-inline-start: var(--space-5);
80
80
  }
81
81
  .md-editor__preview-inner li {
82
82
  margin-bottom: var(--space-1);
83
83
  }
84
84
  .md-editor__preview-inner li > input[type="checkbox"] {
85
- margin-right: var(--space-2);
85
+ margin-inline-end: var(--space-2);
86
86
  }
87
87
 
88
88
  .md-editor__preview-inner a {
@@ -96,7 +96,7 @@
96
96
 
97
97
  .md-editor__preview-inner blockquote {
98
98
  padding: var(--space-2) var(--space-3);
99
- border-left: 3px solid var(--border-strong);
99
+ border-inline-start: 3px solid var(--border-strong);
100
100
  background: var(--background-subtle);
101
101
  color: var(--foreground-muted);
102
102
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
@@ -143,7 +143,7 @@
143
143
  .md-editor__preview-inner td {
144
144
  padding: var(--space-2) var(--space-3);
145
145
  border: 1px solid var(--border);
146
- text-align: left;
146
+ text-align: start;
147
147
  }
148
148
  .md-editor__preview-inner thead {
149
149
  background: var(--background-subtle);
package/data/registry/react/components/numeric-input/styles.css CHANGED
@@ -15,7 +15,7 @@
15
15
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
16
16
  font-size: var(--text-xs);
17
17
  line-height: 1.2;
18
- text-align: right;
18
+ text-align: end;
19
19
  border: 1px solid transparent;
20
20
  border-radius: calc(var(--radius) - 4px);
21
21
  background: transparent;
package/data/registry/react/components/numeric-input/styles.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
16
16
  font-size: var(--text-xs);
17
17
  line-height: 1.2;
18
- text-align: right;
18
+ text-align: end;
19
19
  border: 1px solid transparent;
20
20
  border-radius: calc(var(--radius) - 4px);
21
21
  background: transparent;
package/data/registry/react/components/page-toc/styles.css CHANGED
@@ -4,12 +4,12 @@
4
4
  .sh-ui-page-toc {
5
5
  position: fixed;
6
6
  top: 5rem;
7
- right: 1.5rem;
7
+ inset-inline-end: 1.5rem;
8
8
  width: 14rem;
9
9
  max-height: calc(100vh - 7rem);
10
10
  overflow-y: auto;
11
11
  padding: 0.75rem 0.5rem 0.75rem 1rem;
12
- border-left: 1px solid var(--border);
12
+ border-inline-start: 1px solid var(--border);
13
13
  font-size: 0.8125rem;
14
14
  z-index: 5;
15
15
  }
@@ -34,13 +34,13 @@
34
34
 
35
35
  .sh-ui-page-toc__list > li[data-level="3"] .sh-ui-page-toc__link,
36
36
  .sh-ui-page-toc__list > li[data-level="4"] .sh-ui-page-toc__link {
37
- padding-left: 1.25rem;
37
+ padding-inline-start: 1.25rem;
38
38
  font-size: 0.8125em;
39
39
  color: var(--foreground-subtle, var(--foreground-muted));
40
40
  }
41
41
  .sh-ui-page-toc__list > li[data-level="5"] .sh-ui-page-toc__link,
42
42
  .sh-ui-page-toc__list > li[data-level="6"] .sh-ui-page-toc__link {
43
- padding-left: 2rem;
43
+ padding-inline-start: 2rem;
44
44
  font-size: 0.75em;
45
45
  color: var(--foreground-subtle, var(--foreground-muted));
46
46
  }
package/data/registry/react/components/page-toc/styles.module.css CHANGED
@@ -4,12 +4,12 @@
4
4
  .page-toc {
5
5
  position: fixed;
6
6
  top: 5rem;
7
- right: 1.5rem;
7
+ inset-inline-end: 1.5rem;
8
8
  width: 14rem;
9
9
  max-height: calc(100vh - 7rem);
10
10
  overflow-y: auto;
11
11
  padding: 0.75rem 0.5rem 0.75rem 1rem;
12
- border-left: 1px solid var(--border);
12
+ border-inline-start: 1px solid var(--border);
13
13
  font-size: 0.8125rem;
14
14
  z-index: 5;
15
15
  }
@@ -34,13 +34,13 @@
34
34
 
35
35
  .page-toc__list > li[data-level="3"] .page-toc__link,
36
36
  .page-toc__list > li[data-level="4"] .page-toc__link {
37
- padding-left: 1.25rem;
37
+ padding-inline-start: 1.25rem;
38
38
  font-size: 0.8125em;
39
39
  color: var(--foreground-subtle, var(--foreground-muted));
40
40
  }
41
41
  .page-toc__list > li[data-level="5"] .page-toc__link,
42
42
  .page-toc__list > li[data-level="6"] .page-toc__link {
43
- padding-left: 2rem;
43
+ padding-inline-start: 2rem;
44
44
  font-size: 0.75em;
45
45
  color: var(--foreground-subtle, var(--foreground-muted));
46
46
  }
package/data/registry/react/components/rich-text-editor/index.tailwind.tsx CHANGED
@@ -190,10 +190,10 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
190
190
  .sh-ui-rte__content h1 { font-size: 1.5rem; }
191
191
  .sh-ui-rte__content h2 { font-size: 1.25rem; }
192
192
  .sh-ui-rte__content h3 { font-size: 1.125rem; }
193
- .sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
193
+ .sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }
194
194
  .sh-ui-rte__content li { margin-bottom: var(--space-1); }
195
195
  .sh-ui-rte__content li > p { margin: 0; }
196
- .sh-ui-rte__content blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
196
+ .sh-ui-rte__content blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
197
197
  .sh-ui-rte__content blockquote > :last-child { margin-bottom: 0; }
198
198
  .sh-ui-rte__content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; padding: 0.125rem 0.375rem; border-radius: calc(var(--radius) - 4px); background: var(--background-muted); color: var(--foreground); }
199
199
  .sh-ui-rte__content pre { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background-subtle); overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; }
package/data/registry/react/components/rich-text-editor/styles.css CHANGED
@@ -115,7 +115,7 @@
115
115
  .sh-ui-rte__content ul,
116
116
  .sh-ui-rte__content ol {
117
117
  margin: 0 0 var(--space-3);
118
- padding-left: var(--space-5);
118
+ padding-inline-start: var(--space-5);
119
119
  }
120
120
  .sh-ui-rte__content li {
121
121
  margin-bottom: var(--space-1);
@@ -127,7 +127,7 @@
127
127
  .sh-ui-rte__content blockquote {
128
128
  margin: 0 0 var(--space-3);
129
129
  padding: var(--space-2) var(--space-3);
130
- border-left: 3px solid var(--border-strong);
130
+ border-inline-start: 3px solid var(--border-strong);
131
131
  background: var(--background-subtle);
132
132
  color: var(--foreground-muted);
133
133
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
package/data/registry/react/components/rich-text-editor/styles.module.css CHANGED
@@ -115,7 +115,7 @@
115
115
  .rte__content ul,
116
116
  .rte__content ol {
117
117
  margin: 0 0 var(--space-3);
118
- padding-left: var(--space-5);
118
+ padding-inline-start: var(--space-5);
119
119
  }
120
120
  .rte__content li {
121
121
  margin-bottom: var(--space-1);
@@ -127,7 +127,7 @@
127
127
  .rte__content blockquote {
128
128
  margin: 0 0 var(--space-3);
129
129
  padding: var(--space-2) var(--space-3);
130
- border-left: 3px solid var(--border-strong);
130
+ border-inline-start: 3px solid var(--border-strong);
131
131
  background: var(--background-subtle);
132
132
  color: var(--foreground-muted);
133
133
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
package/data/registry/react/components/select/styles.css CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  .sh-ui-select__value {
40
40
  flex: 1 1 auto;
41
- text-align: left;
41
+ text-align: start;
42
42
  overflow: hidden;
43
43
  text-overflow: ellipsis;
44
44
  white-space: nowrap;
@@ -134,7 +134,7 @@
134
134
 
135
135
  .sh-ui-select__indicator {
136
136
  order: 1;
137
- margin-left: auto;
137
+ margin-inline-start: auto;
138
138
  display: inline-flex;
139
139
  align-items: center;
140
140
  justify-content: center;
package/data/registry/react/components/select/styles.module.css CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  .select__value {
40
40
  flex: 1 1 auto;
41
- text-align: left;
41
+ text-align: start;
42
42
  overflow: hidden;
43
43
  text-overflow: ellipsis;
44
44
  white-space: nowrap;
@@ -134,7 +134,7 @@
134
134
 
135
135
  .select__indicator {
136
136
  order: 1;
137
- margin-left: auto;
137
+ margin-inline-start: auto;
138
138
  display: inline-flex;
139
139
  align-items: center;
140
140
  justify-content: center;
package/data/registry/react/components/sidebar/styles.css CHANGED
@@ -40,15 +40,15 @@
40
40
  flex-shrink: 0;
41
41
  background: var(--sidebar-bg);
42
42
  color: var(--sidebar-fg);
43
- border-right: 1px solid var(--sidebar-border);
43
+ border-inline-end: 1px solid var(--sidebar-border);
44
44
  transition: width var(--duration-slow) ease;
45
45
  position: relative;
46
46
  z-index: 5;
47
47
  }
48
48
 
49
49
  .sh-ui-sidebar[data-side="right"] {
50
- border-right: none;
51
- border-left: 1px solid var(--sidebar-border);
50
+ border-inline-end: none;
51
+ border-inline-start: 1px solid var(--sidebar-border);
52
52
  order: 1;
53
53
  }
54
54
 
@@ -118,7 +118,7 @@
118
118
  width: var(--sidebar-width-mobile);
119
119
  z-index: var(--z-overlay);
120
120
  transition: transform var(--duration-slow) ease;
121
- border-right: 1px solid var(--sidebar-border);
121
+ border-inline-end: 1px solid var(--sidebar-border);
122
122
  }
123
123
  .sh-ui-sidebar--mobile[data-side="left"] {
124
124
  left: 0;
@@ -127,8 +127,8 @@
127
127
  .sh-ui-sidebar--mobile[data-side="right"] {
128
128
  right: 0;
129
129
  transform: translateX(100%);
130
- border-right: none;
131
- border-left: 1px solid var(--sidebar-border);
130
+ border-inline-end: none;
131
+ border-inline-start: 1px solid var(--sidebar-border);
132
132
  }
133
133
  .sh-ui-sidebar--mobile[data-state="open"] {
134
134
  transform: translateX(0);
@@ -178,7 +178,7 @@
178
178
  width: var(--sidebar-panel-width);
179
179
  flex-shrink: 0;
180
180
  background: var(--background);
181
- border-right: 1px solid var(--sidebar-border);
181
+ border-inline-end: 1px solid var(--sidebar-border);
182
182
  position: relative;
183
183
  z-index: 4;
184
184
  overflow: hidden;
@@ -243,7 +243,7 @@
243
243
  left: 0;
244
244
  width: min(var(--sidebar-panel-width), 90vw);
245
245
  z-index: var(--z-modal);
246
- border-right: 1px solid var(--sidebar-border);
246
+ border-inline-end: 1px solid var(--sidebar-border);
247
247
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
248
248
  }
249
249
  }
@@ -335,7 +335,7 @@
335
335
  align-items: center;
336
336
  gap: var(--space-2);
337
337
  padding: var(--space-2);
338
- text-align: left;
338
+ text-align: start;
339
339
  font-size: var(--text-sm);
340
340
  color: var(--sidebar-fg);
341
341
  background: transparent;
@@ -400,8 +400,8 @@
400
400
  list-style: none;
401
401
  margin: 0.125rem 0 0;
402
402
  padding: 0.125rem 0 0.125rem 0.625rem;
403
- margin-left: 0.875rem;
404
- border-left: 1px solid var(--sidebar-border);
403
+ margin-inline-start: 0.875rem;
404
+ border-inline-start: 1px solid var(--sidebar-border);
405
405
  display: flex;
406
406
  flex-direction: column;
407
407
  gap: 0.125rem;
@@ -453,7 +453,7 @@
453
453
  .sh-ui-sidebar__chevron {
454
454
  width: 0.875rem !important;
455
455
  height: 0.875rem !important;
456
- margin-left: auto;
456
+ margin-inline-start: auto;
457
457
  flex-shrink: 0;
458
458
  transition: transform 150ms ease;
459
459
  color: var(--foreground-muted);
@@ -474,10 +474,10 @@
474
474
  gap: 0.125rem;
475
475
  margin: 0;
476
476
  padding: 0;
477
- border-left: 0;
477
+ border-inline-start: 0;
478
478
  }
479
479
  .sh-ui-sidebar__collapsible-flyout .sh-ui-sidebar__menu-sub-button {
480
- padding-left: 0.625rem;
480
+ padding-inline-start: 0.625rem;
481
481
  }
482
482
 
483
483
  /* collapsed=icon 상태에서는 chevron 숨기고 content도 숨김 */
package/data/registry/react/components/sidebar/styles.module.css CHANGED
@@ -40,15 +40,15 @@
40
40
  flex-shrink: 0;
41
41
  background: var(--sidebar-bg);
42
42
  color: var(--sidebar-fg);
43
- border-right: 1px solid var(--sidebar-border);
43
+ border-inline-end: 1px solid var(--sidebar-border);
44
44
  transition: width var(--duration-slow) ease;
45
45
  position: relative;
46
46
  z-index: 5;
47
47
  }
48
48
 
49
49
  .sidebar[data-side="right"] {
50
- border-right: none;
51
- border-left: 1px solid var(--sidebar-border);
50
+ border-inline-end: none;
51
+ border-inline-start: 1px solid var(--sidebar-border);
52
52
  order: 1;
53
53
  }
54
54
 
@@ -118,7 +118,7 @@
118
118
  width: var(--sidebar-width-mobile);
119
119
  z-index: var(--z-overlay);
120
120
  transition: transform var(--duration-slow) ease;
121
- border-right: 1px solid var(--sidebar-border);
121
+ border-inline-end: 1px solid var(--sidebar-border);
122
122
  }
123
123
  .sidebar--mobile[data-side="left"] {
124
124
  left: 0;
@@ -127,8 +127,8 @@
127
127
  .sidebar--mobile[data-side="right"] {
128
128
  right: 0;
129
129
  transform: translateX(100%);
130
- border-right: none;
131
- border-left: 1px solid var(--sidebar-border);
130
+ border-inline-end: none;
131
+ border-inline-start: 1px solid var(--sidebar-border);
132
132
  }
133
133
  .sidebar--mobile[data-state="open"] {
134
134
  transform: translateX(0);
@@ -178,7 +178,7 @@
178
178
  width: var(--sidebar-panel-width);
179
179
  flex-shrink: 0;
180
180
  background: var(--background);
181
- border-right: 1px solid var(--sidebar-border);
181
+ border-inline-end: 1px solid var(--sidebar-border);
182
182
  position: relative;
183
183
  z-index: 4;
184
184
  overflow: hidden;
@@ -243,7 +243,7 @@
243
243
  left: 0;
244
244
  width: min(var(--sidebar-panel-width), 90vw);
245
245
  z-index: var(--z-modal);
246
- border-right: 1px solid var(--sidebar-border);
246
+ border-inline-end: 1px solid var(--sidebar-border);
247
247
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
248
248
  }
249
249
  }
@@ -335,7 +335,7 @@
335
335
  align-items: center;
336
336
  gap: var(--space-2);
337
337
  padding: var(--space-2);
338
- text-align: left;
338
+ text-align: start;
339
339
  font-size: var(--text-sm);
340
340
  color: var(--sidebar-fg);
341
341
  background: transparent;
@@ -400,8 +400,8 @@
400
400
  list-style: none;
401
401
  margin: 0.125rem 0 0;
402
402
  padding: 0.125rem 0 0.125rem 0.625rem;
403
- margin-left: 0.875rem;
404
- border-left: 1px solid var(--sidebar-border);
403
+ margin-inline-start: 0.875rem;
404
+ border-inline-start: 1px solid var(--sidebar-border);
405
405
  display: flex;
406
406
  flex-direction: column;
407
407
  gap: 0.125rem;
@@ -453,7 +453,7 @@
453
453
  .sidebar__chevron {
454
454
  width: 0.875rem !important;
455
455
  height: 0.875rem !important;
456
- margin-left: auto;
456
+ margin-inline-start: auto;
457
457
  flex-shrink: 0;
458
458
  transition: transform 150ms ease;
459
459
  color: var(--foreground-muted);
@@ -474,10 +474,10 @@
474
474
  gap: 0.125rem;
475
475
  margin: 0;
476
476
  padding: 0;
477
- border-left: 0;
477
+ border-inline-start: 0;
478
478
  }
479
479
  .sidebar__collapsible-flyout .sidebar__menu-sub-button {
480
- padding-left: 0.625rem;
480
+ padding-inline-start: 0.625rem;
481
481
  }
482
482
 
483
483
  /* collapsed=icon 상태에서는 chevron 숨기고 content도 숨김 */
package/data/registry/react/components/slider/styles.css CHANGED
@@ -36,7 +36,7 @@
36
36
  top: 50%;
37
37
  width: 1rem;
38
38
  height: 1rem;
39
- margin-left: -0.5rem;
39
+ margin-inline-start: -0.5rem;
40
40
  transform: translateY(-50%);
41
41
  background: var(--background);
42
42
  border: 2px solid var(--primary);
@@ -59,6 +59,6 @@
59
59
  .sh-ui-slider__thumb {
60
60
  width: 1.25rem;
61
61
  height: 1.25rem;
62
- margin-left: -0.625rem;
62
+ margin-inline-start: -0.625rem;
63
63
  }
64
64
  }
package/data/registry/react/components/slider/styles.module.css CHANGED
@@ -36,7 +36,7 @@
36
36
  top: 50%;
37
37
  width: 1rem;
38
38
  height: 1rem;
39
- margin-left: -0.5rem;
39
+ margin-inline-start: -0.5rem;
40
40
  transform: translateY(-50%);
41
41
  background: var(--background);
42
42
  border: 2px solid var(--primary);
@@ -59,6 +59,6 @@
59
59
  .slider__thumb {
60
60
  width: 1.25rem;
61
61
  height: 1.25rem;
62
- margin-left: -0.625rem;
62
+ margin-inline-start: -0.625rem;
63
63
  }
64
64
  }
package/data/registry/react/components/toast/styles.css CHANGED
@@ -245,7 +245,7 @@
245
245
  flex-shrink: 0;
246
246
  display: inline-flex;
247
247
  align-items: center;
248
- margin-left: auto;
248
+ margin-inline-start: auto;
249
249
  }
250
250
 
251
251
  /* ── Close ── */
@@ -253,7 +253,7 @@
253
253
  .sh-ui-toast__close {
254
254
  position: absolute;
255
255
  top: 0.375rem;
256
- right: 0.375rem;
256
+ inset-inline-end: 0.375rem;
257
257
  display: inline-flex;
258
258
  align-items: center;
259
259
  justify-content: center;
package/data/registry/react/components/toast/styles.module.css CHANGED
@@ -245,7 +245,7 @@
245
245
  flex-shrink: 0;
246
246
  display: inline-flex;
247
247
  align-items: center;
248
- margin-left: auto;
248
+ margin-inline-start: auto;
249
249
  }
250
250
 
251
251
  /* ── Close ── */
@@ -253,7 +253,7 @@
253
253
  .toast__close {
254
254
  position: absolute;
255
255
  top: 0.375rem;
256
- right: 0.375rem;
256
+ inset-inline-end: 0.375rem;
257
257
  display: inline-flex;
258
258
  align-items: center;
259
259
  justify-content: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sh-ui-cli",
3
- "version": "0.59.4",
3
+ "version": "0.59.5",
4
4
  "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
5
5
  "license": "MIT",
6
6
  "repository": {