@stn-uiux/pub-ui 0.1.58 → 0.1.60

package/styles/patterns/stn-header.css

@@ -48,15 +48,11 @@
 .stn-header.gap-lg,
 .stn-header--gap-lg { column-gap: var(--stn-space-24, 24px); }
 
-/* Page Header 또는 Center가 없는 헤더 (Left 타이틀이 유연하게 확장되고 Right와 균형 유지) */
-.stn-header--page,
+/* Center 슬롯이 없는 헤더 (Left 타이틀이 유연하게 확장되고 Right와 균형 유지) */
 .stn-header:not(:has(> .stn-header__center)) {
   grid-template-columns: minmax(0, 1fr) auto;
-  padding-inline-start: var(--stn-spacing-header-padding-inline-start, var(--stn-space-8, 8px));
-  padding-inline-end: var(--stn-spacing-header-padding-inline-end, var(--stn-space-24, 24px));
 }
 
-.stn-header--page .stn-header__left,
 .stn-header:not(:has(> .stn-header__center)) .stn-header__left {
   grid-column: 1;
   width: auto;
@@ -65,7 +61,6 @@
   flex: 1 1 auto;
 }
 
-.stn-header--page .stn-header__right,
 .stn-header:not(:has(> .stn-header__center)) .stn-header__right {
   grid-column: 2;
   width: auto;
@@ -125,10 +120,6 @@
   flex-shrink: 0;
 }
 
-.stn-header--page .stn-header__center {
-  display: none;
-}
-
 
 .stn-header__page-title {
   margin: 0;
@@ -169,135 +160,7 @@
   flex: 0 1 auto;
 }
 
-/* System Chip — Figma light 43378 · dark 74893 */
-.stn-system-chip {
-  display: inline-flex;
-  align-items: center;
-  height: var(--stn-size-32);
-  border: var(--stn-size-1) solid var(--stn-system-chip-border);
-  border-radius: var(--stn-radius-8);
-  background: var(--stn-system-chip-bg);
-  box-shadow: var(--stn-system-chip-shadow);
-  box-sizing: border-box;
-}
-
-.stn-system-chip.no-border,
-.stn-system-chip.stn-system-chip--no-border {
-  border: none;
-  background: transparent;
-  box-shadow: none;
-}
-
-.stn-system-chip.no-border .stn-system-chip__item,
-.stn-system-chip.stn-system-chip--no-border .stn-system-chip__item {
-  border-right: none;
-}
-
-.stn-system-chip__item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--stn-space-8);
-  min-width: var(--stn-size-48);
-  padding: 0 var(--stn-space-12);
-  height: 100%;
-  box-sizing: border-box;
-  border-right: var(--stn-size-1) solid var(--stn-system-chip-divider);
-}
-
-.stn-system-chip__item:last-child {
-  border-right: none;
-}
-
-/* 텍스트 위치: 왼쪽 정렬 (점은 우측에 위치) */
-.stn-system-chip--text-left .stn-system-chip__dot {
-  order: 2;
-}
-
-.stn-system-chip--text-left .stn-system-chip__label {
-  order: 0;
-}
-
-.stn-system-chip--text-left .stn-system-chip__count {
-  order: 1;
-  text-align: left;
-}
-
-.stn-system-chip__dot {
-  flex-shrink: 0;
-  width: var(--stn-size-8);
-  height: var(--stn-size-8);
-  border-radius: 50%;
-  background-color: var(--stn-system-chip-dot-color, var(--stn-system-chip-dot));
-}
-
-.stn-system-chip__dot--cr,
-.stn-system-chip__dot--critical,
-.stn-system-chip__dot--red,
-.stn-system-chip__dot--error {
-  background-color: var(--stn-system-chip-dot-critical);
-}
-
-.stn-system-chip__dot--mj,
-.stn-system-chip__dot--major,
-.stn-system-chip__dot--orange {
-  background-color: var(--stn-system-chip-dot-major);
-}
-
-.stn-system-chip__dot--mn,
-.stn-system-chip__dot--minor,
-.stn-system-chip__dot--yellow,
-.stn-system-chip__dot--warn {
-  background-color: var(--stn-system-chip-dot-minor);
-}
-
-.stn-system-chip__dot--info,
-.stn-system-chip__dot--blue {
-  background-color: var(--stn-system-chip-dot-info);
-}
-
-.stn-system-chip__dot--wr,
-.stn-system-chip__dot--warning,
-.stn-system-chip__dot--teal {
-  background-color: var(--stn-system-chip-dot-warning);
-}
-
-.stn-system-chip__dot--success,
-.stn-system-chip__dot--green {
-  background-color: var(--stn-system-chip-dot-success);
-}
-
-.stn-system-chip__dot--purple {
-  background-color: var(--stn-system-chip-dot-secondary);
-}
-
-.stn-system-chip__dot--neutral,
-.stn-system-chip__dot--gray {
-  background-color: var(--stn-system-chip-dot-neutral);
-}
-
-.stn-system-chip__count {
-  flex: 1;
-  min-width: 0;
-  color: var(--stn-system-chip-count);
-  font-size: var(--stn-text-title-small-size);
-  font-weight: var(--stn-text-title-small-weight);
-  line-height: 1;
-  text-align: right;
-  font-family: var(--stn-font-body);
-}
 
-.stn-system-chip__label {
-  flex-shrink: 0;
-  color: var(--stn-system-chip-count);
-  font-size: var(--stn-text-body-small-size);
-  font-weight: var(--stn-font-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.stn-system-chip--labeled .stn-system-chip__item {
-  min-width: var(--stn-size-80);
-}
 
 /* Header toolbar — Figma map dark 74959 · 212175 · actions 40000040:75034 */
 .stn-header-toolbar {
@@ -424,13 +287,12 @@
     flex-shrink: 0;
   }
 
-  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 */
-  .stn-header:has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
     display: none;
   }
 
-  /* Page Header 또는 Center가 없는 헤더: 모바일에서도 Left(제목) 유지 및 말줄임표(...) 우선 축약 */
-  .stn-header--page,
+  /* Center가 없는 헤더: 모바일에서도 Left(제목) 유지 및 말줄임표(...) 우선 축약 */
   .stn-header:not(:has(> .stn-header__center)) {
     grid-template-columns: minmax(0, 1fr) auto;
   }
@@ -519,12 +381,12 @@
     flex-shrink: 0;
   }
 
-  .stn-header:has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
     display: none !important;
   }
 
-  /* Page Header 또는 Center가 없는 헤더: 모바일에서도 Left(제목) 유지 및 말줄임표(...) 우선 축약 */
-  .stn-header--page,
+  /* Center가 없는 헤더: 모바일에서도 Left(제목) 유지 및 말줄임표(...) 우선 축약 */
   .stn-header:not(:has(> .stn-header__center)) {
     grid-template-columns: minmax(0, 1fr) auto !important;
   }

package/styles/patterns/stn-section-side.css

@@ -21,6 +21,13 @@
   overflow: hidden;
 }
 
+/* fullWidth prop 또는 부모 LNB 컨테이너 안에서 가로 100% 확장 지원 */
+.stn-section-side.is-full-width,
+.stn-section-side--full,
+.stn-page-scaffold__lnb > .stn-section-side {
+  width: 100%;
+}
+
 /* list view — LNB 열(search+table) 높이에 맞춰 패널 세로 채움 · 하단 inset은 L1 .stn-container padding-bottom */
 .stn-section-side--fill {
   flex: 1 1 0%;
@@ -39,4 +46,47 @@
   max-height: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
+  /* list/tree LNB 스크롤바: thin (4px) — table 스크롤 규격과 완전 일치 */
+  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
+  scrollbar-width: thin;
+  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
+}
+
+
+
+/* 상단 고정 헤더 (제목, 탭, 검색바 등) */
+.stn-section-side__header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-8, 8px);
+  margin-bottom: var(--stn-space-8, 8px);
 }
+
+/* 하단 고정 푸터 (옵션 스위치, 액션 등) */
+.stn-section-side__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--stn-space-8, 8px);
+  padding-top: var(--stn-space-8, 8px);
+  border-top: 1px solid var(--stn-border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+/* ─────────────────────────────────────────────────────────────
+ * 접힌 상태 (레일 모드 — 너비 56px)
+ * ───────────────────────────────────────────────────────────── */
+.stn-section-side.is-collapsed {
+  width: var(--stn-list-lnb-collapsed-width);
+  min-width: var(--stn-list-lnb-collapsed-width);
+  padding: var(--stn-space-8) var(--stn-space-4);
+  transition: width 0.2s ease;
+}
+
+.stn-section-side.is-collapsed .stn-section-side__header {
+  align-items: center;
+  margin-bottom: var(--stn-space-8);
+}
+

package/styles/patterns/stn-tree.css

@@ -13,13 +13,13 @@
 .stn-tree__heading {
   display: flex;
   align-items: center;
-  min-height: 24px;
+  min-height: var(--stn-tree-row-height);
   margin: 0;
   padding: 0 var(--stn-spacing-tree-label-pad-inline);
   color: var(--stn-tree-heading);
-  font-size: var(--stn-text-body-small-size);
-  font-weight: var(--stn-font-weight-bold, 700);
-  line-height: 1;
+  font-size: var(--stn-tree-heading-font-size);
+  font-weight: var(--stn-tree-heading-font-weight);
+  line-height: var(--stn-tree-heading-line-height);
 }
 
 .stn-tree__rows {
@@ -32,16 +32,21 @@
 .stn-tree__row {
   display: flex;
   align-items: center;
-  min-height: 24px;
+  min-height: var(--stn-tree-row-height);
   width: 100%;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-tree-row);
+  border: var(--stn-tree-border-width) solid transparent;
+  box-sizing: border-box;
   cursor: pointer;
   user-select: none;
+  transition: background-color var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out),
+              border-color var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out),
+              box-shadow var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__row:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
 }
 
 /* Interaction — selected 토큰 · hover/pressed는 selected의 약한/강한 면 */
@@ -60,17 +65,18 @@
 .stn-tree__row.is-selected.is-hover,
 .stn-tree__row.is-selected:active,
 .stn-tree__row.is-selected.is-pressed {
-  background: var(--stn-tree-selected);
+  background: color-mix(in srgb, var(--stn-primary) 10%, transparent);
+  border-color: var(--stn-nav-menu-active-border);
 }
 
 .stn-tree__cell {
   box-sizing: border-box;
   display: inline-flex;
-  flex: 0 0 24px;
+  flex: 0 0 var(--stn-tree-cell-size);
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-cell-size);
+  height: var(--stn-tree-cell-size);
 }
 
 .stn-tree__cell--blank {
@@ -79,19 +85,19 @@
 }
 
 .stn-tree__cell--icon {
-  flex-basis: 24px;
+  flex-basis: var(--stn-tree-cell-size);
 }
 
 .stn-tree__guide {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-guide-size);
+  height: var(--stn-tree-guide-size);
 }
 
 .stn-tree__guide-glyph {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-guide-size);
+  height: var(--stn-tree-guide-size);
   background-color: var(--stn-tree-guide);
   mask-position: center;
   mask-size: contain;
@@ -103,8 +109,8 @@
 
 .stn-tree__chevron-glyph {
   display: block;
-  width: 12px;
-  height: 12px;
+  width: var(--stn-tree-chevron-size);
+  height: var(--stn-tree-chevron-size);
   background-color: var(--stn-tree-chevron);
   mask-position: center;
   mask-size: contain;
@@ -113,7 +119,7 @@
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   transform: rotate(180deg);
-  transition: transform 0.15s ease;
+  transition: transform var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__chevron-glyph.is-expanded {
@@ -129,22 +135,21 @@
 }
 
 .stn-tree__toggle:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
-  border-radius: 2px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
+  border-radius: var(--stn-radius-tree-toggle-focus);
 }
 
 .stn-tree__chevron {
   display: block;
-  width: 12px;
-  height: 12px;
+  width: var(--stn-tree-chevron-size);
+  height: var(--stn-tree-chevron-size);
 }
 
 .stn-tree__icon-glyph {
   display: block;
-  width: 16px;
-  height: 16px;
-  background-color: var(--stn-tree-icon-default);
+  width: var(--stn-tree-icon-size);
+  height: var(--stn-tree-icon-size);
   mask-position: center;
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -171,8 +176,8 @@
 }
 
 .stn-tree__icon--server .stn-tree__icon-glyph {
-  width: 16px;
-  height: 16px;
+  width: var(--stn-tree-icon-size);
+  height: var(--stn-tree-icon-size);
 }
 
 /* fill/server_2 — 본색 SVG. 다크 invert 제외(stn-pub-icon--color) */
@@ -196,19 +201,20 @@
 }
 
 .stn-tree__label {
+  flex: 1 1 auto;
   min-width: 0;
   padding: 0 var(--stn-spacing-tree-label-pad-inline);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--stn-text-body-medium-size);
-  font-weight: var(--stn-font-weight-regular);
-  line-height: 1;
+  font-size: var(--stn-tree-label-font-size);
+  font-weight: var(--stn-tree-label-font-weight);
+  line-height: var(--stn-tree-label-line-height);
 }
 
 .stn-tree__row.is-bold .stn-tree__label,
 .stn-tree__label.is-bold {
-  font-weight: var(--stn-font-weight-bold, 700);
+  font-weight: var(--stn-tree-label-font-weight-bold);
 }
 
 .stn-tree__row--root .stn-tree__label {
@@ -248,36 +254,36 @@
   color: var(--stn-tree-label-folder-nested);
 }
 
-/* ── 가이드 라인 숨김 수식어 (--no-guides) ──────────────────
+/* ── 가이드 라인 숨김 수식어 (.no-guides) ─────────────────────
  * 인덴트 공간은 유지하고 연결선(connector · vertical) 글리프만 숨깁니다.
- * 사용법: <StnTree guides={false} /> 또는 <StnTree className="stn-tree--no-guides" />
+ * 사용법: <StnTree guides={false} /> 또는 <StnTree className="no-guides" />
  * ──────────────────────────────────────────────────────── */
-.stn-tree--no-guides .stn-tree__guide-glyph,
-.stn-tree--no-guides .stn-tree__cell--guide .stn-tree__guide-glyph {
+.stn-tree.no-guides .stn-tree__guide-glyph,
+.stn-tree.no-guides .stn-tree__cell--guide .stn-tree__guide-glyph {
   display: none !important;
 }
 
-/* ── 너비 규격 수식어 (Tree 권장 표준 규격: w160~w240, full) ──
- * width prop → .stn-tree--{w160|w180|w200|w220|w240|full}
+/* ── 너비 규격 수식어 (Tree 권장 표준 규격: w80~w240, full) ──
+ * STN 표준 규격: .w80, .w100, .w120, .w140, .w160, .w180, .w200, .w220, .w240, .full
  * ──────────────────────────────────────────────────────── */
-.stn-tree--w80 { width: var(--stn-size-80, 80px); }
-.stn-tree--w100 { width: var(--stn-size-100, 100px); }
-.stn-tree--w120 { width: var(--stn-size-120, 120px); }
-.stn-tree--w140 { width: var(--stn-size-140, 140px); }
-.stn-tree--w160 { width: var(--stn-size-160, 160px); }
-.stn-tree--w180 { width: var(--stn-size-180, 180px); }
-.stn-tree--w200 { width: var(--stn-size-200, 200px); }
-.stn-tree--w220 { width: var(--stn-size-220, 220px); }
-.stn-tree--w240 { width: var(--stn-size-240, 240px); }
-.stn-tree--full { width: 100%; }
+.stn-tree.w80 { width: var(--stn-size-80); }
+.stn-tree.w100 { width: var(--stn-size-100); }
+.stn-tree.w120 { width: var(--stn-size-120); }
+.stn-tree.w140 { width: var(--stn-size-140); }
+.stn-tree.w160 { width: var(--stn-size-160); }
+.stn-tree.w180 { width: var(--stn-size-180); }
+.stn-tree.w200 { width: var(--stn-size-200); }
+.stn-tree.w220 { width: var(--stn-size-220); }
+.stn-tree.w240 { width: var(--stn-size-240); }
+.stn-tree.full { width: 100%; }
 
 /* ── 선택/호버 테두리 곡률 수식어 (Border Radius) ────────────
- * radius prop → .stn-tree--radius-{none|sm|md|full}
+ * radius prop → .radius-none, .radius-sm, .radius-md, .radius-full
  * ──────────────────────────────────────────────────────── */
-.stn-tree--radius-none .stn-tree__row { border-radius: var(--stn-radius-0, 0px); }
-.stn-tree--radius-sm .stn-tree__row { border-radius: var(--stn-radius-4, 4px); }
-.stn-tree--radius-md .stn-tree__row { border-radius: var(--stn-radius-8, 8px); }
-.stn-tree--radius-full .stn-tree__row { border-radius: var(--stn-radius-circle, 9999px); }
+.stn-tree.radius-none .stn-tree__row { border-radius: var(--stn-radius-tree-row-none); }
+.stn-tree.radius-sm .stn-tree__row { border-radius: var(--stn-radius-tree-row-sm); }
+.stn-tree.radius-md .stn-tree__row { border-radius: var(--stn-radius-tree-row-md); }
+.stn-tree.radius-full .stn-tree__row { border-radius: var(--stn-radius-tree-row-full); }
 
 /* ── 가시성(눈) 토글 버튼 및 숨김 상태 ──────────────────────
  * showVisibilityToggle={true} 일 때 행 우측 끝에 표시됩니다.
@@ -287,16 +293,16 @@
   align-items: center;
   justify-content: center;
   margin-left: auto;
-  margin-right: var(--stn-space-4, 4px);
+  margin-right: var(--stn-tree-visibility-btn-margin-inline-end);
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: var(--stn-tree-visibility-btn-size);
+  height: var(--stn-tree-visibility-btn-size);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--stn-radius-2, 2px);
+  border-radius: var(--stn-radius-tree-visibility-btn);
   opacity: 0.7;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__visibility-btn:hover {
@@ -304,15 +310,15 @@
 }
 
 .stn-tree__visibility-btn:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
 }
 
 .stn-tree__visibility-glyph {
   display: block;
-  width: 14px;
-  height: 14px;
-  background-color: var(--stn-text-tertiary, #8b93a1);
+  width: var(--stn-tree-visibility-icon-size);
+  height: var(--stn-tree-visibility-icon-size);
+  background-color: var(--stn-text-tertiary);
   mask-position: center;
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -322,7 +328,7 @@
 }
 
 .stn-tree__visibility-glyph.is-off {
-  background-color: var(--stn-text-disabled, #a0aec0);
+  background-color: var(--stn-text-disabled);
 }
 
 /* 숨김/미사용 처리된 노드 — 텍스트/아이콘 반투명(dimmed) */
@@ -331,54 +337,105 @@
   opacity: 0.38;
 }
 
+/* ── 카운트 표시 (Node Count) ──────────────────────────────
+ * count prop → 노드 우측에 표시되는 개수 숫자
+ * ──────────────────────────────────────────────────────── */
+.stn-tree__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--stn-font-number, var(--stn-font-body));
+  font-size: var(--stn-tree-count-font-size);
+  font-weight: var(--stn-tree-count-font-weight);
+  line-height: var(--stn-tree-count-line-height);
+  color: var(--stn-text-tertiary);
+  margin-left: auto;
+  margin-right: var(--stn-tree-count-margin-inline-end);
+  flex-shrink: 0;
+}
+
+.stn-tree__count + .stn-tree__visibility-btn {
+  margin-left: 0;
+}
+
+.stn-tree__icon--custom .stn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 /* ── 행 높이 크기 수식어 (Row Size) ─────────────────────────
- * size prop → .stn-tree--{xs|md|lg|xl} 수식어로 자동 적용.
- * 기본값: sm (24px) — 수식어 없음.
+ * STN 표준 규격: .xs · .sm · .md · .lg · .xl
+ * (기본값: sm 24px)
  *
  * Guide cell: align-self:stretch + guide-glyph height:100% 로
  * 행이 높아져도 vertical 연결선이 끊기지 않게 유지합니다.
  * ──────────────────────────────────────────────────────── */
 
 /* xs — 20px: 초밀집 사이드바 목록 */
-.stn-tree--xs .stn-tree__row { min-height: 20px; }
-.stn-tree--xs .stn-tree__cell { height: 20px; }
+.stn-tree.xs .stn-tree__row { min-height: var(--stn-tree-row-height-xs); }
+.stn-tree.xs .stn-tree__cell { height: var(--stn-tree-row-height-xs); }
+
+/* sm — 24px: 기본 콤팩트 */
+.stn-tree.sm .stn-tree__row { min-height: var(--stn-tree-row-height-sm); }
+.stn-tree.sm .stn-tree__cell { height: var(--stn-tree-row-height-sm); }
 
 /* md — 32px: comfortable */
-.stn-tree--md .stn-tree__row { min-height: 32px; }
-.stn-tree--md .stn-tree__cell { height: 32px; }
-.stn-tree--md .stn-tree__cell--guide {
+.stn-tree.md .stn-tree__row { min-height: var(--stn-tree-row-height-md); }
+.stn-tree.md .stn-tree__cell { height: var(--stn-tree-row-height-md); }
+.stn-tree.md .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
 }
-.stn-tree--md .stn-tree__cell--guide .stn-tree__guide-glyph {
+.stn-tree.md .stn-tree__cell--guide .stn-tree__guide-glyph {
   height: 100%;
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 }
 
 /* lg — 40px: spacious */
-.stn-tree--lg .stn-tree__row { min-height: 40px; }
-.stn-tree--lg .stn-tree__cell { height: 40px; }
-.stn-tree--lg .stn-tree__cell--guide {
+.stn-tree.lg .stn-tree__row { min-height: var(--stn-tree-row-height-lg); }
+.stn-tree.lg .stn-tree__cell { height: var(--stn-tree-row-height-lg); }
+.stn-tree.lg .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
 }
-.stn-tree--lg .stn-tree__cell--guide .stn-tree__guide-glyph {
+.stn-tree.lg .stn-tree__cell--guide .stn-tree__guide-glyph {
   height: 100%;
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 }
 
 /* xl — 48px: extra spacious */
-.stn-tree--xl .stn-tree__row { min-height: 48px; }
-.stn-tree--xl .stn-tree__cell { height: 48px; }
-.stn-tree--xl .stn-tree__cell--guide {
+.stn-tree.xl .stn-tree__row { min-height: var(--stn-tree-row-height-xl); }
+.stn-tree.xl .stn-tree__cell { height: var(--stn-tree-row-height-xl); }
+.stn-tree.xl .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
 }
-.stn-tree--xl .stn-tree__cell--guide .stn-tree__guide-glyph {
+.stn-tree.xl .stn-tree__cell--guide .stn-tree__guide-glyph {
   height: 100%;
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 }
+
+/* ── 접힌 레일 모드 (.is-collapsed) ─────────────────────────
+ * collapsed prop → LNB 축소 레일 모드 시 아이콘만 세로 중앙 정렬
+ * ──────────────────────────────────────────────────────── */
+.stn-tree.is-collapsed .stn-tree__heading,
+.stn-tree.is-collapsed .stn-tree__cell:not(.stn-tree__cell--icon),
+.stn-tree.is-collapsed .stn-tree__label,
+.stn-tree.is-collapsed .stn-tree__count,
+.stn-tree.is-collapsed .stn-tree__visibility-btn {
+  display: none;
+}
+
+.stn-tree.is-collapsed .stn-tree__row {
+  justify-content: center;
+  padding: var(--stn-tree-collapsed-row-padding-block) 0;
+  min-height: var(--stn-tree-collapsed-row-height);
+}
+
+.stn-tree.is-collapsed .stn-tree__cell--icon {
+  margin: 0 auto;
+}

package/styles/style-pub.css

@@ -42,7 +42,6 @@
 @import './components/stn-chip.css';
 @import './components/stn-breadcrumb.css';
 @import './components/stn-badge.css';
-@import './components/stn-severity-badge.css';
 @import './components/stn-side-nav.css';
 @import './components/stn-header-title.css';
 @import './components/stn-popup.css';
@@ -69,6 +68,7 @@
 @import './components/stn-icon.css';
 @import './components/stn-card.css';
 @import './components/stn-topology.css';
+@import './components/stn-status.css';
 
 /* --- 5. Patterns (Composite UI Recipes) --- */
 @import './patterns/stn-section-side.css';