sh-ui-cli 0.59.3 → 0.59.5

package/data/registry/react/components/page-toc/styles.css

@@ -4,12 +4,12 @@
 .sh-ui-page-toc {
   position: fixed;
   top: 5rem;
-  right: 1.5rem;
+  inset-inline-end: 1.5rem;
   width: 14rem;
   max-height: calc(100vh - 7rem);
   overflow-y: auto;
   padding: 0.75rem 0.5rem 0.75rem 1rem;
-  border-left: 1px solid var(--border);
+  border-inline-start: 1px solid var(--border);
   font-size: 0.8125rem;
   z-index: 5;
 }
@@ -34,13 +34,13 @@
 
 .sh-ui-page-toc__list > li[data-level="3"] .sh-ui-page-toc__link,
 .sh-ui-page-toc__list > li[data-level="4"] .sh-ui-page-toc__link {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
   font-size: 0.8125em;
   color: var(--foreground-subtle, var(--foreground-muted));
 }
 .sh-ui-page-toc__list > li[data-level="5"] .sh-ui-page-toc__link,
 .sh-ui-page-toc__list > li[data-level="6"] .sh-ui-page-toc__link {
-  padding-left: 2rem;
+  padding-inline-start: 2rem;
   font-size: 0.75em;
   color: var(--foreground-subtle, var(--foreground-muted));
 }

package/data/registry/react/components/page-toc/styles.module.css

@@ -4,12 +4,12 @@
 .page-toc {
   position: fixed;
   top: 5rem;
-  right: 1.5rem;
+  inset-inline-end: 1.5rem;
   width: 14rem;
   max-height: calc(100vh - 7rem);
   overflow-y: auto;
   padding: 0.75rem 0.5rem 0.75rem 1rem;
-  border-left: 1px solid var(--border);
+  border-inline-start: 1px solid var(--border);
   font-size: 0.8125rem;
   z-index: 5;
 }
@@ -34,13 +34,13 @@
 
 .page-toc__list > li[data-level="3"] .page-toc__link,
 .page-toc__list > li[data-level="4"] .page-toc__link {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
   font-size: 0.8125em;
   color: var(--foreground-subtle, var(--foreground-muted));
 }
 .page-toc__list > li[data-level="5"] .page-toc__link,
 .page-toc__list > li[data-level="6"] .page-toc__link {
-  padding-left: 2rem;
+  padding-inline-start: 2rem;
   font-size: 0.75em;
   color: var(--foreground-subtle, var(--foreground-muted));
 }

package/data/registry/react/components/radio/styles.css

@@ -78,3 +78,25 @@
     transition: none;
   }
 }
+
+/* Windows 고대비 모드. */
+@media (forced-colors: active) {
+  .sh-ui-radio {
+    border-color: ButtonBorder;
+  }
+  .sh-ui-radio[data-checked] {
+    border-color: Highlight;
+  }
+  .sh-ui-radio__indicator {
+    background: Highlight;
+  }
+  .sh-ui-radio:focus-visible {
+    outline-color: Highlight;
+  }
+  .sh-ui-radio[data-disabled] {
+    border-color: GrayText;
+  }
+  .sh-ui-radio[data-disabled] .sh-ui-radio__indicator {
+    background: GrayText;
+  }
+}

package/data/registry/react/components/radio/styles.module.css

@@ -78,3 +78,25 @@
     transition: none;
   }
 }
+
+/* Windows 고대비 모드. */
+@media (forced-colors: active) {
+  .radio {
+    border-color: ButtonBorder;
+  }
+  .radio[data-checked] {
+    border-color: Highlight;
+  }
+  .radio__indicator {
+    background: Highlight;
+  }
+  .radio:focus-visible {
+    outline-color: Highlight;
+  }
+  .radio[data-disabled] {
+    border-color: GrayText;
+  }
+  .radio[data-disabled] .radio__indicator {
+    background: GrayText;
+  }
+}

package/data/registry/react/components/rich-text-editor/index.tailwind.tsx

@@ -190,10 +190,10 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
 .sh-ui-rte__content h1 { font-size: 1.5rem; }
 .sh-ui-rte__content h2 { font-size: 1.25rem; }
 .sh-ui-rte__content h3 { font-size: 1.125rem; }
-.sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
+.sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }
 .sh-ui-rte__content li { margin-bottom: var(--space-1); }
 .sh-ui-rte__content li > p { margin: 0; }
-.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; }
+.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; }
 .sh-ui-rte__content blockquote > :last-child { margin-bottom: 0; }
 .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); }
 .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

@@ -115,7 +115,7 @@
 .sh-ui-rte__content ul,
 .sh-ui-rte__content ol {
   margin: 0 0 var(--space-3);
-  padding-left: var(--space-5);
+  padding-inline-start: var(--space-5);
 }
 .sh-ui-rte__content li {
   margin-bottom: var(--space-1);
@@ -127,7 +127,7 @@
 .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);
+  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;

package/data/registry/react/components/rich-text-editor/styles.module.css

@@ -115,7 +115,7 @@
 .rte__content ul,
 .rte__content ol {
   margin: 0 0 var(--space-3);
-  padding-left: var(--space-5);
+  padding-inline-start: var(--space-5);
 }
 .rte__content li {
   margin-bottom: var(--space-1);
@@ -127,7 +127,7 @@
 .rte__content blockquote {
   margin: 0 0 var(--space-3);
   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;

package/data/registry/react/components/select/styles.css

@@ -38,7 +38,7 @@
 
 .sh-ui-select__value {
   flex: 1 1 auto;
-  text-align: left;
+  text-align: start;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -134,7 +134,7 @@
 
 .sh-ui-select__indicator {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/data/registry/react/components/select/styles.module.css

@@ -38,7 +38,7 @@
 
 .select__value {
   flex: 1 1 auto;
-  text-align: left;
+  text-align: start;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -134,7 +134,7 @@
 
 .select__indicator {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/data/registry/react/components/sidebar/styles.css

@@ -40,15 +40,15 @@
   flex-shrink: 0;
   background: var(--sidebar-bg);
   color: var(--sidebar-fg);
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
   transition: width var(--duration-slow) ease;
   position: relative;
   z-index: 5;
 }
 
 .sh-ui-sidebar[data-side="right"] {
-  border-right: none;
-  border-left: 1px solid var(--sidebar-border);
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--sidebar-border);
   order: 1;
 }
 
@@ -118,7 +118,7 @@
   width: var(--sidebar-width-mobile);
   z-index: var(--z-overlay);
   transition: transform var(--duration-slow) ease;
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
 }
 .sh-ui-sidebar--mobile[data-side="left"] {
   left: 0;
@@ -127,8 +127,8 @@
 .sh-ui-sidebar--mobile[data-side="right"] {
   right: 0;
   transform: translateX(100%);
-  border-right: none;
-  border-left: 1px solid var(--sidebar-border);
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--sidebar-border);
 }
 .sh-ui-sidebar--mobile[data-state="open"] {
   transform: translateX(0);
@@ -178,7 +178,7 @@
   width: var(--sidebar-panel-width);
   flex-shrink: 0;
   background: var(--background);
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
   position: relative;
   z-index: 4;
   overflow: hidden;
@@ -243,7 +243,7 @@
     left: 0;
     width: min(var(--sidebar-panel-width), 90vw);
     z-index: var(--z-modal);
-    border-right: 1px solid var(--sidebar-border);
+    border-inline-end: 1px solid var(--sidebar-border);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   }
 }
@@ -335,7 +335,7 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2);
-  text-align: left;
+  text-align: start;
   font-size: var(--text-sm);
   color: var(--sidebar-fg);
   background: transparent;
@@ -400,8 +400,8 @@
   list-style: none;
   margin: 0.125rem 0 0;
   padding: 0.125rem 0 0.125rem 0.625rem;
-  margin-left: 0.875rem;
-  border-left: 1px solid var(--sidebar-border);
+  margin-inline-start: 0.875rem;
+  border-inline-start: 1px solid var(--sidebar-border);
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
@@ -453,7 +453,7 @@
 .sh-ui-sidebar__chevron {
   width: 0.875rem !important;
   height: 0.875rem !important;
-  margin-left: auto;
+  margin-inline-start: auto;
   flex-shrink: 0;
   transition: transform 150ms ease;
   color: var(--foreground-muted);
@@ -474,10 +474,10 @@
   gap: 0.125rem;
   margin: 0;
   padding: 0;
-  border-left: 0;
+  border-inline-start: 0;
 }
 .sh-ui-sidebar__collapsible-flyout .sh-ui-sidebar__menu-sub-button {
-  padding-left: 0.625rem;
+  padding-inline-start: 0.625rem;
 }
 
 /* collapsed=icon 상태에서는 chevron 숨기고 content도 숨김 */

package/data/registry/react/components/sidebar/styles.module.css

@@ -40,15 +40,15 @@
   flex-shrink: 0;
   background: var(--sidebar-bg);
   color: var(--sidebar-fg);
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
   transition: width var(--duration-slow) ease;
   position: relative;
   z-index: 5;
 }
 
 .sidebar[data-side="right"] {
-  border-right: none;
-  border-left: 1px solid var(--sidebar-border);
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--sidebar-border);
   order: 1;
 }
 
@@ -118,7 +118,7 @@
   width: var(--sidebar-width-mobile);
   z-index: var(--z-overlay);
   transition: transform var(--duration-slow) ease;
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
 }
 .sidebar--mobile[data-side="left"] {
   left: 0;
@@ -127,8 +127,8 @@
 .sidebar--mobile[data-side="right"] {
   right: 0;
   transform: translateX(100%);
-  border-right: none;
-  border-left: 1px solid var(--sidebar-border);
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--sidebar-border);
 }
 .sidebar--mobile[data-state="open"] {
   transform: translateX(0);
@@ -178,7 +178,7 @@
   width: var(--sidebar-panel-width);
   flex-shrink: 0;
   background: var(--background);
-  border-right: 1px solid var(--sidebar-border);
+  border-inline-end: 1px solid var(--sidebar-border);
   position: relative;
   z-index: 4;
   overflow: hidden;
@@ -243,7 +243,7 @@
     left: 0;
     width: min(var(--sidebar-panel-width), 90vw);
     z-index: var(--z-modal);
-    border-right: 1px solid var(--sidebar-border);
+    border-inline-end: 1px solid var(--sidebar-border);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   }
 }
@@ -335,7 +335,7 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2);
-  text-align: left;
+  text-align: start;
   font-size: var(--text-sm);
   color: var(--sidebar-fg);
   background: transparent;
@@ -400,8 +400,8 @@
   list-style: none;
   margin: 0.125rem 0 0;
   padding: 0.125rem 0 0.125rem 0.625rem;
-  margin-left: 0.875rem;
-  border-left: 1px solid var(--sidebar-border);
+  margin-inline-start: 0.875rem;
+  border-inline-start: 1px solid var(--sidebar-border);
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
@@ -453,7 +453,7 @@
 .sidebar__chevron {
   width: 0.875rem !important;
   height: 0.875rem !important;
-  margin-left: auto;
+  margin-inline-start: auto;
   flex-shrink: 0;
   transition: transform 150ms ease;
   color: var(--foreground-muted);
@@ -474,10 +474,10 @@
   gap: 0.125rem;
   margin: 0;
   padding: 0;
-  border-left: 0;
+  border-inline-start: 0;
 }
 .sidebar__collapsible-flyout .sidebar__menu-sub-button {
-  padding-left: 0.625rem;
+  padding-inline-start: 0.625rem;
 }
 
 /* collapsed=icon 상태에서는 chevron 숨기고 content도 숨김 */

package/data/registry/react/components/slider/styles.css

@@ -36,7 +36,7 @@
   top: 50%;
   width: 1rem;
   height: 1rem;
-  margin-left: -0.5rem;
+  margin-inline-start: -0.5rem;
   transform: translateY(-50%);
   background: var(--background);
   border: 2px solid var(--primary);
@@ -59,6 +59,6 @@
   .sh-ui-slider__thumb {
     width: 1.25rem;
     height: 1.25rem;
-    margin-left: -0.625rem;
+    margin-inline-start: -0.625rem;
   }
 }

package/data/registry/react/components/slider/styles.module.css

@@ -36,7 +36,7 @@
   top: 50%;
   width: 1rem;
   height: 1rem;
-  margin-left: -0.5rem;
+  margin-inline-start: -0.5rem;
   transform: translateY(-50%);
   background: var(--background);
   border: 2px solid var(--primary);
@@ -59,6 +59,6 @@
   .slider__thumb {
     width: 1.25rem;
     height: 1.25rem;
-    margin-left: -0.625rem;
+    margin-inline-start: -0.625rem;
   }
 }

package/data/registry/react/components/switch/styles.css

@@ -81,3 +81,30 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Windows 고대비 모드: on/off 가 background-color 만으로 표시되므로 시스템 색에 덮이면 구별 불가. */
+@media (forced-colors: active) {
+  .sh-ui-switch {
+    border: 1px solid ButtonBorder;
+    background: ButtonFace;
+  }
+  .sh-ui-switch[data-checked] {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .sh-ui-switch__thumb {
+    background: ButtonText;
+  }
+  .sh-ui-switch[data-checked] .sh-ui-switch__thumb {
+    background: HighlightText;
+  }
+  .sh-ui-switch:focus-visible {
+    outline-color: Highlight;
+  }
+  .sh-ui-switch[data-disabled] {
+    border-color: GrayText;
+  }
+  .sh-ui-switch[data-disabled] .sh-ui-switch__thumb {
+    background: GrayText;
+  }
+}

package/data/registry/react/components/switch/styles.module.css

@@ -81,3 +81,30 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Windows 고대비 모드: on/off 가 background-color 만으로 표시되므로 시스템 색에 덮이면 구별 불가. */
+@media (forced-colors: active) {
+  .switch {
+    border: 1px solid ButtonBorder;
+    background: ButtonFace;
+  }
+  .switch[data-checked] {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .switch__thumb {
+    background: ButtonText;
+  }
+  .switch[data-checked] .switch__thumb {
+    background: HighlightText;
+  }
+  .switch:focus-visible {
+    outline-color: Highlight;
+  }
+  .switch[data-disabled] {
+    border-color: GrayText;
+  }
+  .switch[data-disabled] .switch__thumb {
+    background: GrayText;
+  }
+}

package/data/registry/react/components/tabs/styles.css

@@ -146,3 +146,27 @@
 .sh-ui-tabs[data-variant="plain"] .sh-ui-tabs__indicator {
   display: none;
 }
+
+/* Windows 고대비 모드: indicator 색이 시스템 색에 덮이면 active 탭 구별 불가. */
+@media (forced-colors: active) {
+  .sh-ui-tabs__trigger[data-selected] {
+    color: Highlight;
+  }
+  .sh-ui-tabs[data-variant="underline"] .sh-ui-tabs__indicator {
+    box-shadow: inset 0 -2px 0 Highlight;
+  }
+  .sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] .sh-ui-tabs__indicator {
+    box-shadow: inset -2px 0 0 Highlight;
+  }
+  .sh-ui-tabs[data-variant="pill"] .sh-ui-tabs__indicator {
+    border: 1px solid Highlight;
+    background: ButtonFace;
+  }
+  .sh-ui-tabs[data-variant="plain"] .sh-ui-tabs__trigger[data-selected] {
+    outline: 1px solid Highlight;
+  }
+  .sh-ui-tabs__trigger:focus-visible,
+  .sh-ui-tabs__content:focus-visible {
+    outline-color: Highlight;
+  }
+}

package/data/registry/react/components/tabs/styles.module.css

@@ -146,3 +146,27 @@
 .tabs[data-variant="plain"] .tabs__indicator {
   display: none;
 }
+
+/* Windows 고대비 모드: indicator 색이 시스템 색에 덮이면 active 탭 구별 불가. */
+@media (forced-colors: active) {
+  .tabs__trigger[data-selected] {
+    color: Highlight;
+  }
+  .tabs[data-variant="underline"] .tabs__indicator {
+    box-shadow: inset 0 -2px 0 Highlight;
+  }
+  .tabs[data-variant="underline"][data-orientation="vertical"] .tabs__indicator {
+    box-shadow: inset -2px 0 0 Highlight;
+  }
+  .tabs[data-variant="pill"] .tabs__indicator {
+    border: 1px solid Highlight;
+    background: ButtonFace;
+  }
+  .tabs[data-variant="plain"] .tabs__trigger[data-selected] {
+    outline: 1px solid Highlight;
+  }
+  .tabs__trigger:focus-visible,
+  .tabs__content:focus-visible {
+    outline-color: Highlight;
+  }
+}

package/data/registry/react/components/toast/styles.css

@@ -245,7 +245,7 @@
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* ── Close ── */
@@ -253,7 +253,7 @@
 .sh-ui-toast__close {
   position: absolute;
   top: 0.375rem;
-  right: 0.375rem;
+  inset-inline-end: 0.375rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/data/registry/react/components/toast/styles.module.css

@@ -245,7 +245,7 @@
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* ── Close ── */
@@ -253,7 +253,7 @@
 .toast__close {
   position: absolute;
   top: 0.375rem;
-  right: 0.375rem;
+  inset-inline-end: 0.375rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/data/registry/react/components/toggle/styles.css

@@ -83,3 +83,19 @@
     transition: none;
   }
 }
+
+/* Windows 고대비 모드: pressed 가 background-color 만으로 표시되므로 시스템 색에 덮이면 구별 불가. */
+@media (forced-colors: active) {
+  .sh-ui-toggle[data-pressed] {
+    background: Highlight;
+    color: HighlightText;
+    border-color: Highlight;
+  }
+  .sh-ui-toggle:focus-visible {
+    outline-color: Highlight;
+  }
+  .sh-ui-toggle:disabled {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}

package/data/registry/react/components/toggle/styles.module.css

@@ -83,3 +83,19 @@
     transition: none;
   }
 }
+
+/* Windows 고대비 모드: pressed 가 background-color 만으로 표시되므로 시스템 색에 덮이면 구별 불가. */
+@media (forced-colors: active) {
+  .toggle[data-pressed] {
+    background: Highlight;
+    color: HighlightText;
+    border-color: Highlight;
+  }
+  .toggle:focus-visible {
+    outline-color: Highlight;
+  }
+  .toggle:disabled {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.59.3",
+  "version": "0.59.5",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {