npm - sh-ui-cli - Versions diffs - 0.59.3 → 0.59.5 - Mend

sh-ui-cli 0.59.3 → 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 (55) hide show

package/data/changelog/versions.json CHANGED Viewed

@@ -2,6 +2,35 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.59.5",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 5 — RTL via logical properties",
+      "type": "patch",
+      "highlights": [
+        "**모든 컴포넌트 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 라인 변경.",
+        "**affix / icon column / 닫기 버튼 등 절대 위치 요소** — `left:` / `right:` 도 `inset-inline-start/end` 로 전환. Input affix prefix/suffix, Dropdown/Context Menu indicator, Code-panel 복사 버튼, Carousel 컨트롤, Page-toc 위치, Toast close 버튼.",
+        "**그대로 유지한 패턴** — `left: 50% + transform: translateX(-50%)` 센터링 hack, `[data-side=\"left|right\"]` 사용자 명시 사이드 (Sidebar / Toast position), JS 가 측정해 주입하는 `--active-tab-left` (Tabs).",
+        "**RTL 효과** — `<html dir=\"rtl\">` 또는 `direction: rtl` 컨테이너에서 자동으로 padding/margin/icon-position 이 미러링. Arabic, Hebrew, Persian 등 지원.",
+        "**LTR 영향 0** — logical 속성은 LTR 에서 기존 physical 과 동일하게 해석. 회귀 없음.",
+        "**3 variant 동기화** — registry/react plain CSS + CSS Modules + apps/docs + Tailwind variant 의 inline CSS string."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.5"
+    },
+    {
+      "version": "0.59.4",
+      "date": "2026-05-06",
+      "title": "접근성 라운드 4 — forced-colors 모드 (Windows High Contrast)",
+      "type": "patch",
+      "highlights": [
+        "**`@media (forced-colors: active)` 블록 추가** — Windows 고대비 / Edge 강제 색 모드에서 시스템 컬러 (Highlight, ButtonBorder, ButtonText, GrayText) 로 폴백. 사용자가 색 토큰을 OS 색상에 강제 매핑해도 컴포넌트 상태 (checked/pressed/active) 가 시각적으로 구별됨.",
+        "**대상 컴포넌트** — `Checkbox` / `Radio` (checked indicator) / `Switch` (on/off thumb + track) / `Tabs` (active indicator + selected color) / `Toggle` (pressed background+border).",
+        "**문제 원인** — 기존 디자인이 `background: var(--primary)` 만으로 active 상태를 표현. 강제 색 모드에서 `--primary` 가 시스템 `Canvas`/`ButtonFace` 로 덮이면 unchecked 와 동일하게 보여 구별 불가. 이제 `Highlight` (selection color) 로 명시 폴백.",
+        "**3 variant 동기화** — registry/react plain CSS + CSS Modules + apps/docs. Tailwind variant 는 별도 라운드 (forced-colors: 모디파이어 필요).",
+        "**일반 사용자 영향 0** — forced-colors 미활성 시 룰 무시. 활성 시에만 시스템 색이 우선되며 디자인 토큰을 덮어씀."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.59.4"
+    },
     {
       "version": "0.59.3",
       "date": "2026-05-06",

package/data/registry/react/components/accordion/styles.css CHANGED Viewed

@@ -30,7 +30,7 @@
   font-size: 0.9375rem;
   font-weight: var(--weight-medium);
   line-height: 1.4;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--duration-fast) var(--ease-standard);
   -webkit-tap-highlight-color: transparent;

package/data/registry/react/components/accordion/styles.module.css CHANGED Viewed

@@ -30,7 +30,7 @@
   font-size: 0.9375rem;
   font-weight: var(--weight-medium);
   line-height: 1.4;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--duration-fast) var(--ease-standard);
   -webkit-tap-highlight-color: transparent;

package/data/registry/react/components/card/styles.css CHANGED Viewed

@@ -82,8 +82,8 @@
   .sh-ui-card__header,
   .sh-ui-card__content,
   .sh-ui-card__footer {
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
+    padding-inline-start: var(--space-4);
+    padding-inline-end: var(--space-4);
   }
   .sh-ui-card__footer {
     flex-wrap: wrap;

package/data/registry/react/components/card/styles.module.css CHANGED Viewed

@@ -80,8 +80,8 @@
   .header,
   .content,
   .footer {
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
+    padding-inline-start: var(--space-4);
+    padding-inline-end: var(--space-4);
   }
   .footer {
     flex-wrap: wrap;

package/data/registry/react/components/carousel/styles.css CHANGED Viewed

@@ -111,7 +111,7 @@
 .sh-ui-carousel__indicators[data-orientation="vertical"] {
   position: absolute;
   top: 50%;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   margin-top: 0;
   flex-direction: column;
   transform: translateY(-50%);

package/data/registry/react/components/carousel/styles.module.css CHANGED Viewed

@@ -111,7 +111,7 @@
 .carousel__indicators[data-orientation="vertical"] {
   position: absolute;
   top: 50%;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   margin-top: 0;
   flex-direction: column;
   transform: translateY(-50%);

package/data/registry/react/components/checkbox/styles.css CHANGED Viewed

@@ -73,3 +73,23 @@
     transition: none;
   }
 }
+/* Windows 고대비 모드: 색만으로 표시되는 checked 상태가 시스템 색에 덮여 사라지는 걸 방지. */
+@media (forced-colors: active) {
+  .sh-ui-checkbox {
+    border-color: ButtonBorder;
+  }
+  .sh-ui-checkbox[data-checked],
+  .sh-ui-checkbox[data-indeterminate] {
+    background: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+  .sh-ui-checkbox:focus-visible {
+    outline-color: Highlight;
+  }
+  .sh-ui-checkbox[data-disabled] {
+    border-color: GrayText;
+    color: GrayText;
+  }
+}

package/data/registry/react/components/checkbox/styles.module.css CHANGED Viewed

@@ -73,3 +73,23 @@
     transition: none;
   }
 }
+/* Windows 고대비 모드: 색만으로 표시되는 checked 상태가 시스템 색에 덮여 사라지는 걸 방지. */
+@media (forced-colors: active) {
+  .checkbox {
+    border-color: ButtonBorder;
+  }
+  .checkbox[data-checked],
+  .checkbox[data-indeterminate] {
+    background: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+  .checkbox:focus-visible {
+    outline-color: Highlight;
+  }
+  .checkbox[data-disabled] {
+    border-color: GrayText;
+    color: GrayText;
+  }
+}

package/data/registry/react/components/code-editor/index.tailwind.tsx CHANGED Viewed

@@ -153,9 +153,9 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
 .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); }
 .sh-ui-code-editor .cm-content { caret-color: var(--foreground); color: var(--foreground); padding: var(--space-3) 0; }
 .sh-ui-code-editor .cm-line { padding: 0 var(--space-3); }
-.sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-right: 1px solid var(--border); }
+.sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-inline-end: 1px solid var(--border); }
 .sh-ui-code-editor .cm-activeLineGutter, .sh-ui-code-editor .cm-activeLine { background: var(--background-muted); }
-.sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-left-color: var(--foreground); }
+.sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-inline-start-color: var(--foreground); }
 .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; }
 .sh-ui-code-editor .cm-placeholder { color: var(--foreground-muted); }
 .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 Viewed

@@ -40,7 +40,7 @@
 .sh-ui-code-editor .cm-gutters {
   background: var(--background-subtle);
   color: var(--foreground-muted);
-  border-right: 1px solid var(--border);
+  border-inline-end: 1px solid var(--border);
 }
 .sh-ui-code-editor .cm-activeLineGutter,
 .sh-ui-code-editor .cm-activeLine {
@@ -48,7 +48,7 @@
 }
 .sh-ui-code-editor .cm-cursor,
 .sh-ui-code-editor .cm-dropCursor {
-  border-left-color: var(--foreground);
+  border-inline-start-color: var(--foreground);
 }
 .sh-ui-code-editor .cm-selectionBackground,
 .sh-ui-code-editor .cm-editor .cm-selectionBackground,

package/data/registry/react/components/code-editor/styles.module.css CHANGED Viewed

@@ -40,7 +40,7 @@
 .code-editor .cm-gutters {
   background: var(--background-subtle);
   color: var(--foreground-muted);
-  border-right: 1px solid var(--border);
+  border-inline-end: 1px solid var(--border);
 }
 .code-editor .cm-activeLineGutter,
 .code-editor .cm-activeLine {
@@ -48,7 +48,7 @@
 }
 .code-editor .cm-cursor,
 .code-editor .cm-dropCursor {
-  border-left-color: var(--foreground);
+  border-inline-start-color: var(--foreground);
 }
 .code-editor .cm-selectionBackground,
 .code-editor .cm-editor .cm-selectionBackground,

package/data/registry/react/components/code-panel/styles.css CHANGED Viewed

@@ -33,7 +33,7 @@
 .sh-ui-code__copy-floating {
   position: absolute;
   top: var(--space-2);
-  right: var(--space-2);
+  inset-inline-end: var(--space-2);
   z-index: 1;
   opacity: 0;
   transition: opacity var(--duration-fast);
@@ -116,8 +116,8 @@
   counter-increment: step;
   display: inline-block;
   width: 1.75rem;
-  margin-right: var(--space-4);
-  text-align: right;
+  margin-inline-end: var(--space-4);
+  text-align: end;
   color: var(--foreground-muted);
   opacity: 0.7;
   user-select: none;

package/data/registry/react/components/code-panel/styles.module.css CHANGED Viewed

@@ -33,7 +33,7 @@
 .code__copy-floating {
   position: absolute;
   top: var(--space-2);
-  right: var(--space-2);
+  inset-inline-end: var(--space-2);
   z-index: 1;
   opacity: 0;
   transition: opacity var(--duration-fast);
@@ -116,8 +116,8 @@
   counter-increment: step;
   display: inline-block;
   width: 1.75rem;
-  margin-right: var(--space-4);
-  text-align: right;
+  margin-inline-end: var(--space-4);
+  text-align: end;
   color: var(--foreground-muted);
   opacity: 0.7;
   user-select: none;

package/data/registry/react/components/color-picker/styles.css CHANGED Viewed

@@ -36,7 +36,7 @@
   position: absolute;
   width: 0.875rem;
   height: 0.875rem;
-  margin-left: -0.4375rem;
+  margin-inline-start: -0.4375rem;
   margin-top: -0.4375rem;
   border: 2px solid #fff;
   border-radius: 50%;
@@ -69,7 +69,7 @@
   top: 50%;
   width: 0.875rem;
   height: 0.875rem;
-  margin-left: -0.4375rem;
+  margin-inline-start: -0.4375rem;
   transform: translateY(-50%);
   background: #fff;
   border-radius: 50%;

package/data/registry/react/components/color-picker/styles.module.css CHANGED Viewed

@@ -36,7 +36,7 @@
   position: absolute;
   width: 0.875rem;
   height: 0.875rem;
-  margin-left: -0.4375rem;
+  margin-inline-start: -0.4375rem;
   margin-top: -0.4375rem;
   border: 2px solid #fff;
   border-radius: 50%;
@@ -69,7 +69,7 @@
   top: 50%;
   width: 0.875rem;
   height: 0.875rem;
-  margin-left: -0.4375rem;
+  margin-inline-start: -0.4375rem;
   transform: translateY(-50%);
   background: #fff;
   border-radius: 50%;

package/data/registry/react/components/combobox/styles.css CHANGED Viewed

@@ -83,7 +83,7 @@
 .sh-ui-combobox__item-indicator {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -121,7 +121,7 @@
   align-items: center;
   gap: var(--space-1);
   padding: 0.125rem 0.375rem 0.125rem var(--space-2);
-  margin-right: var(--space-1);
+  margin-inline-end: var(--space-1);
   font-size: var(--text-xs);
   line-height: 1.25rem;
   background: var(--background-muted);

package/data/registry/react/components/combobox/styles.module.css CHANGED Viewed

@@ -83,7 +83,7 @@
 .combobox__item-indicator {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -121,7 +121,7 @@
   align-items: center;
   gap: var(--space-1);
   padding: 0.125rem 0.375rem 0.125rem var(--space-2);
-  margin-right: var(--space-1);
+  margin-inline-end: var(--space-1);
   font-size: var(--text-xs);
   line-height: 1.25rem;
   background: var(--background-muted);

package/data/registry/react/components/context-menu/styles.css CHANGED Viewed

@@ -78,12 +78,12 @@
 }
 .sh-ui-cm__item--check {
-  padding-left: 1.75rem;
+  padding-inline-start: 1.75rem;
 }
 .sh-ui-cm__item-indicator {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -119,7 +119,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--foreground-muted);
 }

package/data/registry/react/components/context-menu/styles.module.css CHANGED Viewed

@@ -78,12 +78,12 @@
 }
 .cm__item--check {
-  padding-left: 1.75rem;
+  padding-inline-start: 1.75rem;
 }
 .cm__item-indicator {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -119,7 +119,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--foreground-muted);
 }

package/data/registry/react/components/date-picker/styles.css CHANGED Viewed

@@ -63,7 +63,7 @@
   flex-shrink: 0;
   display: inline-flex;
   color: var(--foreground-muted);
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
 }
 /* ── Positioner / Popup ── */

package/data/registry/react/components/date-picker/styles.module.css CHANGED Viewed

@@ -63,7 +63,7 @@
   flex-shrink: 0;
   display: inline-flex;
   color: var(--foreground-muted);
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
 }
 /* ── Positioner / Popup ── */

package/data/registry/react/components/dropdown-menu/styles.css CHANGED Viewed

@@ -86,12 +86,12 @@
 /* checkbox/radio item — 왼쪽 인디케이터 공간 확보 */
 .sh-ui-dm__item--check {
-  padding-left: 1.75rem;
+  padding-inline-start: 1.75rem;
 }
 .sh-ui-dm__item-indicator {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +129,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--foreground-muted);
 }

package/data/registry/react/components/dropdown-menu/styles.module.css CHANGED Viewed

@@ -86,12 +86,12 @@
 /* checkbox/radio item — 왼쪽 인디케이터 공간 확보 */
 .dm__item--check {
-  padding-left: 1.75rem;
+  padding-inline-start: 1.75rem;
 }
 .dm__item-indicator {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +129,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--foreground-muted);
 }

package/data/registry/react/components/header/styles.css CHANGED Viewed

@@ -144,7 +144,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  margin-left: auto;
+  margin-inline-start: auto;
   flex-shrink: 0;
 }
@@ -296,7 +296,7 @@
     bottom: 0;
     width: min(17.5rem, 85vw);
     background: var(--background-subtle);
-    border-right: 1px solid var(--border);
+    border-inline-end: 1px solid var(--border);
     z-index: var(--z-modal);
     transform: translateX(-100%);
     transition: transform var(--duration-base) var(--ease-standard);

package/data/registry/react/components/header/styles.module.css CHANGED Viewed

@@ -144,7 +144,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  margin-left: auto;
+  margin-inline-start: auto;
   flex-shrink: 0;
 }
@@ -296,7 +296,7 @@
     bottom: 0;
     width: min(17.5rem, 85vw);
     background: var(--background-subtle);
-    border-right: 1px solid var(--border);
+    border-inline-end: 1px solid var(--border);
     z-index: var(--z-modal);
     transform: translateX(-100%);
     transition: transform var(--duration-base) var(--ease-standard);

package/data/registry/react/components/input/styles.css CHANGED Viewed

@@ -65,8 +65,8 @@
   display: block;
 }
-.sh-ui-input--with-prefix { padding-left: var(--space-10); }
-.sh-ui-input--with-suffix { padding-right: var(--space-10); }
+.sh-ui-input--with-prefix { padding-inline-start: var(--space-10); }
+.sh-ui-input--with-suffix { padding-inline-end: var(--space-10); }
 .sh-ui-input__affix {
   position: absolute;
@@ -78,8 +78,8 @@
   color: var(--foreground-muted);
   pointer-events: none;
 }
-.sh-ui-input__affix--prefix { left: var(--space-3); }
-.sh-ui-input__affix--suffix { right: var(--space-1); }
+.sh-ui-input__affix--prefix { inset-inline-start: var(--space-3); }
+.sh-ui-input__affix--suffix { inset-inline-end: var(--space-1); }
 /* suffix 내부 클릭 가능한 요소(버튼 등)는 pointer-events 복원 */
 .sh-ui-input__affix > * { pointer-events: auto; }

package/data/registry/react/components/input/styles.module.css CHANGED Viewed

@@ -64,8 +64,8 @@
   display: block;
 }
-.withPrefix { padding-left: var(--space-10); }
-.withSuffix { padding-right: var(--space-10); }
+.withPrefix { padding-inline-start: var(--space-10); }
+.withSuffix { padding-inline-end: var(--space-10); }
 .affix {
   position: absolute;
@@ -77,8 +77,8 @@
   color: var(--foreground-muted);
   pointer-events: none;
 }
-.affixPrefix { left: var(--space-3); }
-.affixSuffix { right: var(--space-1); }
+.affixPrefix { inset-inline-start: var(--space-3); }
+.affixSuffix { inset-inline-end: var(--space-1); }
 .affix > * { pointer-events: auto; }

package/data/registry/react/components/markdown-editor/index.tailwind.tsx CHANGED Viewed

@@ -95,19 +95,19 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
 .sh-ui-md-editor__preview-inner h3 { font-size: 1.125rem; }
 .sh-ui-md-editor__preview-inner h4, .sh-ui-md-editor__preview-inner h5, .sh-ui-md-editor__preview-inner h6 { font-size: 1rem; }
 .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); }
-.sh-ui-md-editor__preview-inner ul, .sh-ui-md-editor__preview-inner ol { padding-left: var(--space-5); }
+.sh-ui-md-editor__preview-inner ul, .sh-ui-md-editor__preview-inner ol { padding-inline-start: var(--space-5); }
 .sh-ui-md-editor__preview-inner li { margin-bottom: var(--space-1); }
-.sh-ui-md-editor__preview-inner li > input[type="checkbox"] { margin-right: var(--space-2); }
+.sh-ui-md-editor__preview-inner li > input[type="checkbox"] { margin-inline-end: var(--space-2); }
 .sh-ui-md-editor__preview-inner a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
 .sh-ui-md-editor__preview-inner a:hover { text-decoration-thickness: 2px; }
-.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; }
+.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; }
 .sh-ui-md-editor__preview-inner blockquote > :last-child { margin-bottom: 0; }
 .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); }
 .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; }
 .sh-ui-md-editor__preview-inner pre > code { padding: 0; background: transparent; font-size: inherit; }
 .sh-ui-md-editor__preview-inner hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
 .sh-ui-md-editor__preview-inner table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
-.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; }
+.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; }
 .sh-ui-md-editor__preview-inner thead { background: var(--background-subtle); }
 .sh-ui-md-editor__preview-inner img { max-width: 100%; height: auto; border-radius: calc(var(--radius) - 2px); }
 .sh-ui-md-editor__preview-inner del { color: var(--foreground-muted); }

package/data/registry/react/components/markdown-editor/styles.css CHANGED Viewed

@@ -76,13 +76,13 @@
 .sh-ui-md-editor__preview-inner ul,
 .sh-ui-md-editor__preview-inner ol {
-  padding-left: var(--space-5);
+  padding-inline-start: var(--space-5);
 }
 .sh-ui-md-editor__preview-inner li {
   margin-bottom: var(--space-1);
 }
 .sh-ui-md-editor__preview-inner li > input[type="checkbox"] {
-  margin-right: var(--space-2);
+  margin-inline-end: var(--space-2);
 }
 .sh-ui-md-editor__preview-inner a {
@@ -96,7 +96,7 @@
 .sh-ui-md-editor__preview-inner blockquote {
   padding: var(--space-2) var(--space-3);
-  border-left: 3px solid var(--border-strong);
+  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;
@@ -143,7 +143,7 @@
 .sh-ui-md-editor__preview-inner td {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--border);
-  text-align: left;
+  text-align: start;
 }
 .sh-ui-md-editor__preview-inner thead {
   background: var(--background-subtle);

package/data/registry/react/components/markdown-editor/styles.module.css CHANGED Viewed

@@ -76,13 +76,13 @@
 .md-editor__preview-inner ul,
 .md-editor__preview-inner ol {
-  padding-left: var(--space-5);
+  padding-inline-start: var(--space-5);
 }
 .md-editor__preview-inner li {
   margin-bottom: var(--space-1);
 }
 .md-editor__preview-inner li > input[type="checkbox"] {
-  margin-right: var(--space-2);
+  margin-inline-end: var(--space-2);
 }
 .md-editor__preview-inner a {
@@ -96,7 +96,7 @@
 .md-editor__preview-inner blockquote {
   padding: var(--space-2) var(--space-3);
-  border-left: 3px solid var(--border-strong);
+  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;
@@ -143,7 +143,7 @@
 .md-editor__preview-inner td {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--border);
-  text-align: left;
+  text-align: start;
 }
 .md-editor__preview-inner thead {
   background: var(--background-subtle);

package/data/registry/react/components/numeric-input/styles.css CHANGED Viewed

@@ -15,7 +15,7 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: var(--text-xs);
   line-height: 1.2;
-  text-align: right;
+  text-align: end;
   border: 1px solid transparent;
   border-radius: calc(var(--radius) - 4px);
   background: transparent;

package/data/registry/react/components/numeric-input/styles.module.css CHANGED Viewed

@@ -15,7 +15,7 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: var(--text-xs);
   line-height: 1.2;
-  text-align: right;
+  text-align: end;
   border: 1px solid transparent;
   border-radius: calc(var(--radius) - 4px);
   background: transparent;