@stn-uiux/pub-ui 0.1.86 → 0.1.88

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   STN_UI_COMPONENTS,
   STN_UI_FOUNDATIONS
 } from "./chunk-K6TWXWIO.js";
-import "./chunk-ERZPIKPF.js";
+import "./chunk-PXTPAYC3.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -34,6 +34,12 @@ import {
   typographyPrimitivesToJson,
   typographySemanticsToJson
 } from "./chunk-2TRZNWCA.js";
+import {
+  STN_STEP_CARDS_INTRO
+} from "./chunk-NYZMUDVK.js";
+import {
+  STN_STEP_STATUS_SPEC
+} from "./chunk-N4PVFFKV.js";
 import "./chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
@@ -45,6 +51,15 @@ import {
 import {
   STN_TEXT_COLOR_ROWS
 } from "./chunk-4HUY6TN4.js";
+import {
+  STN_SIZE_INTRO,
+  STN_SIZE_ROWS,
+  sizeTokensToJson
+} from "./chunk-YI22T66L.js";
+import {
+  STN_SIZE_SEMANTIC_INTRO,
+  STN_SIZE_SEMANTIC_ROWS
+} from "./chunk-2FHXIAM3.js";
 import {
   STN_SLIDER_HTML,
   STN_SLIDER_INTRO,
@@ -74,11 +89,9 @@ import {
   STN_STATUS_DEMO_STEPS
 } from "./chunk-R6NCTORS.js";
 import {
-  STN_STEP_CARDS_INTRO
-} from "./chunk-NYZMUDVK.js";
-import {
-  STN_STEP_STATUS_SPEC
-} from "./chunk-N4PVFFKV.js";
+  STN_RADIUS_USECASE_INTRO,
+  STN_RADIUS_USECASE_ROWS
+} from "./chunk-666SNAJT.js";
 import {
   STN_SECTION_SIDE_FIGMA,
   STN_SECTION_SIDE_INTRO,
@@ -98,14 +111,17 @@ import {
   STN_SIDE_NAV_SUB_ICON
 } from "./chunk-QIX7SYPC.js";
 import {
-  STN_SIZE_INTRO,
-  STN_SIZE_ROWS,
-  sizeTokensToJson
-} from "./chunk-YI22T66L.js";
+  STN_PAGE_ENTER_MOTION_INTRO,
+  STN_PAGE_ENTER_MOTION_ROWS,
+  STN_PAGE_ENTER_MOTION_USAGE,
+  STN_PAGE_ENTER_MOTION_USAGE_HTML
+} from "./chunk-R65PNEWS.js";
 import {
-  STN_SIZE_SEMANTIC_INTRO,
-  STN_SIZE_SEMANTIC_ROWS
-} from "./chunk-2FHXIAM3.js";
+  STN_PAGINATION_EXAMPLE,
+  STN_PAGINATION_FIGMA,
+  STN_PAGINATION_INTRO,
+  STN_PAGINATION_REACT
+} from "./chunk-PE4ZB5QC.js";
 import {
   STN_POPOVER_INTRO,
   STN_POPOVER_USAGE
@@ -142,9 +158,9 @@ import {
   radiusSemanticToJson
 } from "./chunk-I7S5YLB3.js";
 import {
-  STN_RADIUS_USECASE_INTRO,
-  STN_RADIUS_USECASE_ROWS
-} from "./chunk-666SNAJT.js";
+  STN_LIST_INTRO,
+  STN_LIST_SIZES
+} from "./chunk-I2Y7E4TU.js";
 import {
   STN_LIST_TABLE_FIGMA,
   STN_LIST_TABLE_FOOTER_MAX_ACTIONS,
@@ -161,6 +177,10 @@ import {
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "./chunk-3DAZMM4T.js";
+import {
+  STN_MENU_INTRO,
+  STN_MENU_SIZES
+} from "./chunk-7OZGRHFD.js";
 import {
   STN_MOTION_CONSTRAINT_ROWS,
   STN_MOTION_DELAY_ROWS,
@@ -175,19 +195,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-2PIUQUBN.js";
-import {
-  STN_PAGE_ENTER_MOTION_INTRO,
-  STN_PAGE_ENTER_MOTION_ROWS,
-  STN_PAGE_ENTER_MOTION_USAGE,
-  STN_PAGE_ENTER_MOTION_USAGE_HTML
-} from "./chunk-R65PNEWS.js";
-import {
-  STN_PAGINATION_EXAMPLE,
-  STN_PAGINATION_FIGMA,
-  STN_PAGINATION_INTRO,
-  STN_PAGINATION_REACT
-} from "./chunk-PE4ZB5QC.js";
+} from "./chunk-6RJFVO4M.js";
 import {
   STN_HEADER_TITLE_DEMO,
   STN_HEADER_TITLE_FIGMA,
@@ -266,12 +274,13 @@ import {
   getButtonStateCell
 } from "./chunk-ZVBPC3MI.js";
 import {
+  STN_CARD_FOOTER_ALIGNS,
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
   STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "./chunk-2VSSPMZ3.js";
+} from "./chunk-R7HPVMSM.js";
 import {
   STN_CHART_COLOR_DEFINITIONS,
   STN_CHART_INTRO,
@@ -334,6 +343,14 @@ import {
   STN_GRADE_SEMANTIC_ROWS,
   STN_GRADE_SOURCE
 } from "./chunk-E26XJXQY.js";
+import {
+  STN_TEXT_FIELD_FIGMA,
+  STN_TEXT_FIELD_HTML,
+  STN_TEXT_FIELD_INTRO,
+  STN_TEXT_FIELD_SIZE_ROWS,
+  STN_TEXT_FIELD_STATES,
+  STN_TEXT_FIELD_USAGE
+} from "./chunk-YJLOIDKY.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -405,13 +422,12 @@ import {
   STN_TABLE_TH_LABEL_FIGMA
 } from "./chunk-IOBNIUK3.js";
 import {
-  STN_TEXT_FIELD_FIGMA,
-  STN_TEXT_FIELD_HTML,
-  STN_TEXT_FIELD_INTRO,
-  STN_TEXT_FIELD_SIZE_ROWS,
-  STN_TEXT_FIELD_STATES,
-  STN_TEXT_FIELD_USAGE
-} from "./chunk-YJLOIDKY.js";
+  STN_SCROLL_FIGMA,
+  STN_SCROLL_INTRO,
+  STN_SCROLL_SPEC,
+  STN_SCROLL_USAGE,
+  STN_SCROLL_USAGE_HTML
+} from "./chunk-CHJATVOT.js";
 import {
   STN_SEARCH_REQUIREMENT_DEMO_FIELDS,
   STN_SEARCH_REQUIREMENT_FIGMA,
@@ -442,13 +458,6 @@ import {
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
 } from "./chunk-G4SOYIHZ.js";
-import {
-  STN_SCROLL_FIGMA,
-  STN_SCROLL_INTRO,
-  STN_SCROLL_SPEC,
-  STN_SCROLL_USAGE,
-  STN_SCROLL_USAGE_HTML
-} from "./chunk-CHJATVOT.js";
 import {
   STN_LOADING_SKELETON_COLORS,
   STN_LOADING_SKELETON_INTRO,
@@ -627,6 +636,7 @@ export {
   STN_BUTTON_STATE_STATES,
   STN_BUTTON_STATE_VARIANTS,
   STN_BUTTON_VARIANT_MAP,
+  STN_CARD_FOOTER_ALIGNS,
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
@@ -776,6 +786,8 @@ export {
   STN_LAYOUT_SLOT_USAGE,
   STN_LAYOUT_WHEN_TO_USE,
   STN_LINE_HEIGHT_ROWS,
+  STN_LIST_INTRO,
+  STN_LIST_SIZES,
   STN_LIST_TABLE_FIGMA,
   STN_LIST_TABLE_FOOTER_MAX_ACTIONS,
   STN_LIST_TABLE_OPTION_ROWS,
@@ -791,6 +803,8 @@ export {
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE,
   STN_MAP_DASHBOARD_OPTION_ROWS,
+  STN_MENU_INTRO,
+  STN_MENU_SIZES,
   STN_MOTION_CONSTRAINT_ROWS,
   STN_MOTION_DELAY_ROWS,
   STN_MOTION_DISTANCE_ROWS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

package/styles/components/stn-badge.css

@@ -312,17 +312,3 @@
   background-color: var(--stn-badge-solid-neutral);
   color: var(--stn-badge-solid-neutral-fg);
 }
-
-/* Inverted / Mono (다크: 흰색 배경 + 검은색 텍스트, 라이트: 검은색 배경 + 흰색 텍스트) */
-.stn-badge.inverted,
-.stn-badge--color-inverted {
-  color: var(--stn-topology-badge-bg, var(--stn-neutral-90));
-  background: var(--stn-opacity-white-10);
-}
-.stn-badge.solid.inverted,
-.stn-badge--solid.stn-badge--color-inverted {
-  background-color: var(--stn-topology-badge-bg, var(--stn-neutral-90));
-  color: var(--stn-topology-badge-text, var(--stn-static-white));
-  border-color: var(--stn-topology-badge-border, var(--stn-elevation-surface-0));
-  box-shadow: 0 0 8px color-mix(in srgb, var(--stn-topology-badge-bg, var(--stn-neutral-90)) 25%, transparent);
-}

package/styles/components/stn-card.css

@@ -210,4 +210,12 @@
   padding-top: var(--stn-space-12, 12px);
   border-top: var(--stn-size-1, 1px) solid var(--stn-card-border-color);
   margin-top: var(--stn-space-12, 12px);
+  box-sizing: border-box;
+  width: 100%;
 }
+
+/* Card footer alignment modifiers (right · left · center · between) */
+.stn-card__footer.align-right { justify-content: flex-end; }
+.stn-card__footer.align-left { justify-content: flex-start; }
+.stn-card__footer.align-center { justify-content: center; }
+.stn-card__footer.align-between { justify-content: space-between; }

package/styles/components/stn-drawer.css

@@ -124,7 +124,7 @@
 .stn-drawer--md { --stn-drawer-active-width: var(--stn-drawer-width-md, 480px); --stn-drawer-active-height: var(--stn-drawer-height-md, 480px); }
 .stn-drawer--lg { --stn-drawer-active-width: var(--stn-drawer-width-lg, 640px); --stn-drawer-active-height: var(--stn-drawer-height-lg, 640px); }
 .stn-drawer--xl { --stn-drawer-active-width: var(--stn-drawer-width-xl, 800px); --stn-drawer-active-height: var(--stn-drawer-height-xl, 800px); }
-.stn-drawer--full { --stn-drawer-active-width: var(--stn-drawer-width-full, min(80vw, 1600px)); --stn-drawer-active-height: var(--stn-drawer-height-full, min(80vh, 900px)); }
+.stn-drawer--full { --stn-drawer-active-width: var(--stn-drawer-width-full, min(96vw, 1920px)); --stn-drawer-active-height: var(--stn-drawer-height-full, min(96vh, 1080px)); }
 
 /* ── 6. Header, Body, Footer Subcomponents ── */
 .stn-drawer__head {
@@ -178,6 +178,12 @@
 .stn-drawer__body.gap-lg   { gap: var(--stn-drawer-gap-lg); }
 .stn-drawer__body.gap-xl   { gap: var(--stn-drawer-gap-xl); }
 
+/* Drawer Body Surface Tone (.stn-drawer__body--subtle, .stn-drawer--subtle) */
+.stn-drawer--subtle,
+.stn-drawer__body--subtle {
+  background-color: var(--stn-drawer-bg-subtle, var(--stn-surface-subtle));
+}
+
 .stn-drawer__footer {
   display: flex;
   align-items: center;

package/styles/components/stn-list.css

@@ -0,0 +1,430 @@
+@charset "utf-8";
+/**
+ * StnList — STN 디자인 시스템 표준 목록(List) 컴포넌트 CSS (SSOT)
+ *
+ * 4대 표준 규격:
+ * 1. Size 규격: xs (28px) · sm (36px) · md (44px 표준 기본값) · lg (52px) · xl (60px)
+ * 2. Width 규격: w80 · w100 · w120 · w140 · w160 · w180 · w200 · full
+ * 3. Semantic Token 100% 강제 (var(--stn-*))
+ * 4. Compound Component 완벽 지원 (.stn-list, .stn-list-item, .stn-list-item-button 등)
+ */
+
+/* ==========================================================================
+   1. StnList 루트 컨테이너
+   ========================================================================== */
+.stn-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--stn-space-4) 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: transparent;
+  color: var(--stn-text-primary);
+
+  /* 기본 md 규격 */
+  --stn-list-item-min-height: var(--stn-list-item-height-md);
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+  --stn-list-item-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-line-height: var(--stn-text-body-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-18);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+/* 4대 표준 Size 규격 (스케일별 높이/패딩/폰트) */
+.stn-list--xs,
+.stn-list-item--xs,
+.stn-list-item-button--xs {
+  --stn-list-item-min-height: var(--stn-list-item-height-xs);
+  --stn-list-item-padding-y: var(--stn-space-4);
+  --stn-list-item-padding-x: var(--stn-space-8);
+  --stn-list-item-font-size: var(--stn-text-caption-small-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-label-xsmall-size);
+  --stn-list-item-line-height: var(--stn-text-caption-small-line-height);
+  --stn-list-item-icon-size: var(--stn-size-14);
+  --stn-list-item-gap: var(--stn-space-6);
+}
+
+.stn-list--sm,
+.stn-list-item--sm,
+.stn-list-item-button--sm {
+  --stn-list-item-min-height: var(--stn-list-item-height-sm);
+  --stn-list-item-padding-y: var(--stn-space-6);
+  --stn-list-item-padding-x: var(--stn-space-10);
+  --stn-list-item-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-small-size);
+  --stn-list-item-line-height: var(--stn-text-caption-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-16);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+.stn-list--md,
+.stn-list-item--md,
+.stn-list-item-button--md {
+  --stn-list-item-min-height: var(--stn-list-item-height-md);
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+  --stn-list-item-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-line-height: var(--stn-text-body-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-18);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+.stn-list--lg,
+.stn-list-item--lg,
+.stn-list-item-button--lg {
+  --stn-list-item-min-height: var(--stn-list-item-height-lg);
+  --stn-list-item-padding-y: var(--stn-space-12);
+  --stn-list-item-padding-x: var(--stn-space-14);
+  --stn-list-item-font-size: var(--stn-text-body-large-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-body-small-size);
+  --stn-list-item-line-height: var(--stn-text-body-large-line-height);
+  --stn-list-item-icon-size: var(--stn-size-20);
+  --stn-list-item-gap: var(--stn-space-10);
+}
+
+.stn-list--xl,
+.stn-list-item--xl,
+.stn-list-item-button--xl {
+  --stn-list-item-min-height: var(--stn-list-item-height-xl);
+  --stn-list-item-padding-y: var(--stn-space-16);
+  --stn-list-item-padding-x: var(--stn-space-16);
+  --stn-list-item-font-size: var(--stn-text-title-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-line-height: var(--stn-text-title-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-24);
+  --stn-list-item-gap: var(--stn-space-12);
+}
+
+/* 패딩 규격 프리셋 (Padding Presets — pure CSS Custom Property SSOT) */
+.stn-list--pad-none,
+.stn-list-item--pad-none {
+  --stn-list-item-padding-y: 0;
+  --stn-list-item-padding-x: 0;
+  --stn-list-item-min-height: auto;
+}
+
+.stn-list--pad-xs,
+.stn-list-item--pad-xs {
+  --stn-list-item-padding-y: var(--stn-space-4);
+  --stn-list-item-padding-x: var(--stn-space-8);
+}
+
+.stn-list--pad-sm,
+.stn-list-item--pad-sm {
+  --stn-list-item-padding-y: var(--stn-space-6);
+  --stn-list-item-padding-x: var(--stn-space-10);
+}
+
+.stn-list--pad-md,
+.stn-list-item--pad-md {
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+}
+
+.stn-list--pad-lg,
+.stn-list-item--pad-lg {
+  --stn-list-item-padding-y: var(--stn-space-12);
+  --stn-list-item-padding-x: var(--stn-space-14);
+}
+
+.stn-list--pad-xl,
+.stn-list-item--pad-xl {
+  --stn-list-item-padding-y: var(--stn-space-16);
+  --stn-list-item-padding-x: var(--stn-space-16);
+}
+
+.stn-list--disable-padding {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* 외형 변형 (Variants) */
+.stn-list--card {
+  background: var(--stn-elevation-surface-0);
+  border: var(--stn-size-1) solid var(--stn-border-subtle);
+  border-radius: var(--stn-radius-md);
+  box-shadow: var(--stn-shadow-sm);
+  padding: var(--stn-space-6);
+}
+
+.stn-list--bordered {
+  border: var(--stn-size-1) solid var(--stn-border-subtle);
+  border-radius: var(--stn-radius-sm);
+}
+
+/* 스크롤 가능 (Scrollable) */
+.stn-list--scrollable {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 4대 표준 너비 규격 (Width Presets — STN 4대 표준 규격: .w80 ~ .w200, .full) */
+.stn-list.w80  { width: var(--stn-size-80); }
+.stn-list.w100 { width: var(--stn-size-100); }
+.stn-list.w120 { width: var(--stn-size-120); }
+.stn-list.w140 { width: var(--stn-size-140); }
+.stn-list.w160 { width: var(--stn-size-160); }
+.stn-list.w180 { width: var(--stn-size-180); }
+.stn-list.w200 { width: var(--stn-size-200); }
+.stn-list.full { width: 100%; }
+
+/* 들여쓰기 깊이 (Indent Depth for Nested Lists) */
+.stn-list--indent-1 { padding-left: var(--stn-space-24); }
+.stn-list--indent-2 { padding-left: var(--stn-space-36); }
+.stn-list--indent-3 { padding-left: var(--stn-space-48); }
+
+
+/* ==========================================================================
+   2. StnList.Subheader (섹션/카테고리 헤더)
+   ========================================================================== */
+.stn-list-subheader {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: var(--stn-space-6) var(--stn-space-12);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-caption-medium-size);
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-tertiary);
+  line-height: var(--stn-text-caption-medium-line-height, 1.4);
+  letter-spacing: 0.02em;
+  user-select: none;
+  list-style: none;
+}
+
+.stn-list-subheader--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--stn-elevation-surface-0);
+  backdrop-filter: blur(var(--stn-space-8));
+  -webkit-backdrop-filter: blur(var(--stn-space-8));
+}
+
+
+/* ==========================================================================
+   3. StnList.Item (<li> 행 래퍼)
+   ========================================================================== */
+.stn-list-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: var(--stn-list-item-min-height, var(--stn-size-40));
+  padding: var(--stn-list-item-padding-y, var(--stn-space-8)) var(--stn-list-item-padding-x, var(--stn-space-12));
+  gap: var(--stn-list-item-gap, var(--stn-space-8));
+  color: var(--stn-text-primary);
+  text-align: left;
+}
+
+.stn-list-item--disable-padding,
+.stn-list-item.stn-list-item--disable-padding,
+.stn-list-item:has(> .stn-list-item-button) {
+  padding: 0;
+}
+
+.stn-list-item--divider {
+  border-bottom: var(--stn-size-1) solid var(--stn-border-subtle);
+}
+
+.stn-list-item--divider:last-child {
+  border-bottom: none;
+}
+
+
+/* ==========================================================================
+   4. StnList.Button (인터랙션 버튼 / 링크)
+   ========================================================================== */
+.stn-list-item-button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--stn-list-item-min-height, var(--stn-size-40));
+  padding: var(--stn-list-item-padding-y, var(--stn-space-8)) var(--stn-list-item-padding-x, var(--stn-space-12));
+  gap: var(--stn-list-item-gap, var(--stn-space-8));
+  border: none;
+  background: transparent;
+  color: var(--stn-text-primary);
+  border-radius: var(--stn-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  position: relative;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  user-select: none;
+  -webkit-appearance: none;
+}
+
+/* 호버 상태 */
+.stn-list-item-button:hover:not(.is-disabled) {
+  background: color-mix(in srgb, var(--stn-primary) 10%, var(--stn-dropdown-menu-hover-bg));
+}
+
+/* 포커스 링 (접근성) */
+.stn-list-item-button:focus-visible {
+  background: color-mix(in srgb, var(--stn-primary) 10%, var(--stn-dropdown-menu-hover-bg));
+  outline: var(--stn-size-2) solid var(--stn-focus-ring);
+  outline-offset: calc(-1 * var(--stn-size-2));
+}
+
+/* 선택(Active/Selected) 상태 */
+.stn-list-item-button.is-selected {
+  background: color-mix(in srgb, var(--stn-primary) 14%, transparent);
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-semibold);
+}
+
+.stn-list-item-button.is-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 15%;
+  bottom: 15%;
+  width: var(--stn-size-3);
+  background: var(--stn-primary);
+  border-radius: var(--stn-radius-xs);
+}
+
+/* 비활성화 상태 */
+.stn-list-item-button.is-disabled,
+.stn-list-item-button[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+
+/* ==========================================================================
+   5. StnList.Icon & Avatar (좌측 시각 슬롯)
+   ========================================================================== */
+.stn-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  height: var(--stn-list-item-icon-size, var(--stn-size-18));
+  min-width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  color: var(--stn-text-secondary);
+  font-size: var(--stn-list-item-icon-size, var(--stn-size-18));
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.stn-list-item-icon .stn-icon,
+.stn-list-item-icon img,
+.stn-list-item-icon svg {
+  width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  height: var(--stn-list-item-icon-size, var(--stn-size-18));
+}
+
+.stn-list-item-button.is-selected .stn-list-item-icon {
+  color: var(--stn-primary);
+}
+
+.stn-list-item-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: var(--stn-space-12);
+}
+
+
+/* ==========================================================================
+   6. StnList.Text (본문 텍스트 슬롯 — Primary + Secondary)
+   ========================================================================== */
+.stn-list-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+}
+
+.stn-list-item-text__primary {
+  display: block;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-list-item-font-size, var(--stn-text-body-medium-size));
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-list-item-line-height, var(--stn-line-height-default));
+  color: var(--stn-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-list-item-button.is-selected .stn-list-item-text__primary {
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-semibold);
+}
+
+.stn-list-item-text__secondary {
+  display: block;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-list-item-secondary-font-size, var(--stn-text-caption-medium-size));
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-caption-medium-line-height, var(--stn-line-height-reading-3));
+  color: var(--stn-text-tertiary);
+  margin-top: var(--stn-space-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 텍스트 색상 수식어 (Semantic Color Modifier) */
+.stn-list-item-text--color-primary .stn-list-item-text__primary {
+  color: var(--stn-text-primary);
+}
+.stn-list-item-text--color-secondary .stn-list-item-text__primary {
+  color: var(--stn-text-secondary);
+}
+.stn-list-item-text--color-tertiary .stn-list-item-text__primary {
+  color: var(--stn-text-tertiary);
+}
+
+/* 아이콘 없는 항목 정렬 정합성 (Inset Indentation) */
+.stn-list-item-text--inset {
+  padding-left: calc(var(--stn-list-item-icon-size, var(--stn-size-18)) + var(--stn-list-item-gap, var(--stn-space-8)));
+}
+
+
+/* ==========================================================================
+   7. StnList.Action (우측 도킹 다중 액션 슬롯)
+   ========================================================================== */
+.stn-list-item-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+
+/* ==========================================================================
+   8. StnList.Collapse (중첩 접힘/펼침 트랜지션)
+   ========================================================================== */
+.stn-list-collapse {
+  overflow: hidden;
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+  width: 100%;
+  list-style: none;
+}
+
+.stn-list-collapse.is-closed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.stn-list-collapse.is-open {
+  opacity: 1;
+}