sh-ui-cli 0.112.0 → 0.114.0

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

@@ -433,6 +433,15 @@
   margin: 0;
 }
 
+/* trailing 슬롯(badge/action)이 있으면 내부 button/anchor 에 우측 패딩을 확보해
+ * 라벨이 trailing 요소 밑으로 들어가지 않게 한다. */
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-badge) > a,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-badge) > button,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-action) > a,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-action) > button {
+  padding-inline-end: 2rem;
+}
+
 .sh-ui-sidebar__menu-button {
   display: flex;
   width: 100%;
@@ -499,6 +508,73 @@
   font-size: 0.9375rem;
 }
 
+/* ───────────── Menu trailing slots (badge / action) ───────────── */
+.sh-ui-sidebar__menu-badge {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 0.25rem;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--sidebar-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.sh-ui-sidebar__menu-action {
+  position: absolute;
+  right: var(--space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
+}
+.sh-ui-sidebar__menu-action > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.sh-ui-sidebar__menu-action:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-fg);
+}
+.sh-ui-sidebar__menu-action:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+}
+
+/* showOnHover — 행 hover/포커스 시에만 노출. 부모 menu-item hover/focus-within 셀렉터. */
+.sh-ui-sidebar__menu-action--hover {
+  opacity: 0;
+}
+.sh-ui-sidebar__menu-item:hover .sh-ui-sidebar__menu-action--hover,
+.sh-ui-sidebar__menu-item:focus-within .sh-ui-sidebar__menu-action--hover,
+.sh-ui-sidebar__menu-action--hover:focus-visible,
+.sh-ui-sidebar__menu-action--hover[data-active] {
+  opacity: 1;
+}
+
+/* collapsed=icon 모드에서는 trailing 슬롯 숨김 (라벨도 숨겨지므로) */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] .sh-ui-sidebar__menu-badge,
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] .sh-ui-sidebar__menu-action {
+  display: none;
+}
+
 /* ───────────── Sub menu ───────────── */
 .sh-ui-sidebar__menu-sub {
   list-style: none;
@@ -607,6 +683,7 @@
   .sh-ui-sidebar__trigger,
   .sh-ui-sidebar__menu-button,
   .sh-ui-sidebar__menu-sub-button,
+  .sh-ui-sidebar__menu-action,
   .sh-ui-sidebar__panel-close,
   .sh-ui-sidebar__chevron,
   .sh-ui-sidebar__collapsible-content {

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

@@ -412,6 +412,15 @@
   margin: 0;
 }
 
+/* trailing 슬롯(badge/action)이 있으면 내부 button/anchor 에 우측 패딩을 확보해
+ * 라벨이 trailing 요소 밑으로 들어가지 않게 한다. */
+.sidebar__menu-item:has(.sidebar__menu-badge) > a,
+.sidebar__menu-item:has(.sidebar__menu-badge) > button,
+.sidebar__menu-item:has(.sidebar__menu-action) > a,
+.sidebar__menu-item:has(.sidebar__menu-action) > button {
+  padding-inline-end: 2rem;
+}
+
 .sidebar__menu-button {
   display: flex;
   width: 100%;
@@ -478,6 +487,73 @@
   font-size: 0.9375rem;
 }
 
+/* ───────────── Menu trailing slots (badge / action) ───────────── */
+.sidebar__menu-badge {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 0.25rem;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--sidebar-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.sidebar__menu-action {
+  position: absolute;
+  right: var(--space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
+}
+.sidebar__menu-action > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.sidebar__menu-action:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-fg);
+}
+.sidebar__menu-action:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+}
+
+/* showOnHover — 행 hover/포커스 시에만 노출. 부모 menu-item hover/focus-within 셀렉터. */
+.sidebar__menu-action--hover {
+  opacity: 0;
+}
+.sidebar__menu-item:hover .sidebar__menu-action--hover,
+.sidebar__menu-item:focus-within .sidebar__menu-action--hover,
+.sidebar__menu-action--hover:focus-visible,
+.sidebar__menu-action--hover[data-active] {
+  opacity: 1;
+}
+
+/* collapsed=icon 모드에서는 trailing 슬롯 숨김 (라벨도 숨겨지므로) */
+.sidebar[data-state="collapsed"][data-collapsible="icon"] .sidebar__menu-badge,
+.sidebar[data-state="collapsed"][data-collapsible="icon"] .sidebar__menu-action {
+  display: none;
+}
+
 /* ───────────── Sub menu ───────────── */
 .sidebar__menu-sub {
   list-style: none;
@@ -575,6 +651,7 @@
   .sidebar__trigger,
   .sidebar__menu-button,
   .sidebar__menu-sub-button,
+  .sidebar__menu-action,
   .sidebar__panel-close,
   .sidebar__chevron {
     transition: none;

package/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-21T07:02:56.611Z",
+  "$generated": "2026-05-26T05:20:38.023Z",
   "components": {
     "button": {
       "plain": [
@@ -1486,11 +1486,13 @@
     },
     "separator": {
       "plain": [
-        "--border"
+        "--border",
+        "--foreground-subtle"
       ],
       "tailwind": [],
       "css-modules": [
-        "--border"
+        "--border",
+        "--foreground-subtle"
       ],
       "vanilla-extract": []
     },

package/data/summaries/react.json

@@ -35,7 +35,7 @@
     "badge": "상태 뱃지 — variant, size.",
     "progress": "선형 진행률 — value 0~100, indeterminate.",
     "spinner": "로딩 스피너 — size.",
-    "separator": "구분선 — orientation(horizontal/vertical).",
+    "separator": "구분선 — 두 변종 한 컴포넌트: children 없으면 가로/세로 1px 선(orientation), children 있으면 가운데 라벨 \"── label ──\"(align=start/center/end, horizontal 강제). decorative={false} 시 role=separator.",
     "skeleton": "스켈레톤 로딩 플레이스홀더.",
     "code-panel": "Shiki 기반 코드 하이라이트 패널 — 복사 버튼 포함.",
     "code-tabs": "여러 코드 뷰(예: React/Flutter, 강조/전체)를 탭으로 전환 — Tabs + CodePanel 합성, 각 탭 내용은 CodePanelProps 그대로.",

package/package.json

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