@stn-uiux/pub-ui 0.1.72 → 0.1.74

package/styles/components/stn-status.css

@@ -19,7 +19,7 @@
   align-items: center;
   gap: var(--stn-space-6, 6px);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium, 500);
   line-height: 1;
   color: var(--stn-text-primary);
@@ -50,12 +50,12 @@
   padding: 0 var(--stn-space-6, 6px);
 }
 .stn-status-dot.xs .stn-status-dot__count {
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
 }
 
 /* sm — 24px (bordered: 버튼 sm과 1:1 일치) */
 .stn-status-dot.sm {
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   gap: var(--stn-space-4, 4px);
 }
 .stn-status-dot.sm .stn-status-dot__point {
@@ -72,7 +72,7 @@
 
 /* md — 32px (기본 · bordered: 버튼 md와 1:1 일치) */
 .stn-status-dot.md {
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   gap: var(--stn-space-6, 6px);
 }
 .stn-status-dot.md .stn-status-dot__point {
@@ -84,12 +84,12 @@
   padding: 0 var(--stn-space-10, 10px);
 }
 .stn-status-dot.md .stn-status-dot__count {
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
 }
 
 /* lg — 40px (bordered: 버튼 lg와 1:1 일치) */
 .stn-status-dot.lg {
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-dot.lg .stn-status-dot__point {
@@ -101,12 +101,12 @@
   padding: 0 var(--stn-space-12, 12px);
 }
 .stn-status-dot.lg .stn-status-dot__count {
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
 }
 
 /* xl — 48px (bordered) */
 .stn-status-dot.xl {
-  font-size: var(--stn-font-size-15, 15px);
+  font-size: var(--stn-text-label-medium-size, var(--stn-font-size-15, 15px));
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-dot.xl .stn-status-dot__point {
@@ -118,7 +118,7 @@
   padding: 0 var(--stn-space-14, 14px);
 }
 .stn-status-dot.xl .stn-status-dot__count {
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
 }
 
 /* 여백(Gap) 조절 */
@@ -153,7 +153,7 @@
   display: inline-flex;
   align-items: center;
   font-family: var(--stn-font-number, var(--stn-font-body));
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-bold, 700);
   line-height: 1;
   color: var(--stn-text-primary);
@@ -259,7 +259,7 @@
   height: 100%;
   box-sizing: border-box;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium, 500);
   color: var(--stn-text-primary);
   user-select: none;
@@ -302,7 +302,7 @@
   background-color: var(--_switch-bg);
   color: var(--_switch-color);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium, 500);
   cursor: pointer;
   user-select: none;
@@ -475,7 +475,7 @@
 .stn-status-flow.sm .stn-status-flow__badge {
   width: var(--stn-size-16, 16px);
   height: var(--stn-size-16, 16px);
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   border-radius: var(--stn-radius-3, 3px);
 }
 .stn-status-flow.sm .stn-status-flow__badge .stn-icon {
@@ -486,7 +486,7 @@
 /* md — 26px (기본) */
 .stn-status-flow.md .stn-status-flow__step {
   height: var(--stn-size-26, 26px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   padding: 0 var(--stn-space-10, 10px) 0 var(--stn-space-4, 4px);
   gap: var(--stn-space-6, 6px);
 }
@@ -500,14 +500,14 @@
 /* lg — 32px */
 .stn-status-flow.lg .stn-status-flow__step {
   height: var(--stn-size-32, 32px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   padding: 0 var(--stn-space-12, 12px) 0 var(--stn-space-5, 5px);
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-flow.lg .stn-status-flow__badge {
   width: var(--stn-size-22, 22px);
   height: var(--stn-size-22, 22px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   border-radius: var(--stn-radius-4, 4px);
 }
 .stn-status-flow.lg .stn-status-flow__badge .stn-icon {
@@ -518,14 +518,14 @@
 /* xl — 36px */
 .stn-status-flow.xl .stn-status-flow__step {
   height: var(--stn-size-36, 36px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   padding: 0 var(--stn-space-14, 14px) 0 var(--stn-space-6, 6px);
   gap: var(--stn-space-10, 10px);
 }
 .stn-status-flow.xl .stn-status-flow__badge {
   width: var(--stn-size-26, 26px);
   height: var(--stn-size-26, 26px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   border-radius: var(--stn-radius-6, 6px);
 }
 .stn-status-flow.xl .stn-status-flow__badge .stn-icon {
@@ -550,7 +550,7 @@
   align-items: center;
   color: var(--stn-status-flow-connector-color);
   opacity: var(--stn-status-flow-connector-opacity);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   user-select: none;
 }
 
@@ -617,7 +617,7 @@
 .stn-status-severity.sm {
   height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
   padding: var(--stn-severity-badge-padding-sm, var(--stn-space-2, 2px) var(--stn-space-4, 4px));
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   gap: var(--stn-severity-badge-gap-sm, var(--stn-space-2, 2px));
 }
 
@@ -643,7 +643,7 @@
 .stn-status-severity.lg {
   height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
   padding: var(--stn-severity-badge-padding-lg, var(--stn-space-4, 4px) var(--stn-space-10, 10px));
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   gap: var(--stn-severity-badge-gap-lg, var(--stn-space-4, 4px));
 }
 
@@ -688,7 +688,7 @@
   width: var(--stn-severity-filter-width, var(--stn-size-52, 52px));
   height: var(--stn-severity-filter-height, var(--stn-size-26, 26px));
   padding: var(--stn-space-4, 4px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   font-weight: var(--stn-font-weight-bold, 700);
   cursor: pointer;
   background: transparent;

package/styles/components/stn-table.css

@@ -354,6 +354,48 @@ td.stn-table__col-check .stn-checkbox {
   white-space: nowrap;
 }
 
+/* Density Modifiers — 인라인 padding 지정 없이 토큰 기반 조절 */
+.stn-table.stn-table--compact,
+.stn-table--compact .stn-table__grid {
+  --stn-table-cell-padding: var(--stn-space-1) var(--stn-space-2);
+  --stn-table-row-height: var(--stn-size-32);
+}
+
+.stn-table.stn-table--comfortable,
+.stn-table--comfortable .stn-table__grid {
+  --stn-table-cell-padding: var(--stn-space-3) var(--stn-space-4);
+  --stn-table-row-height: var(--stn-size-44);
+}
+
+/* Cell Helper Classes */
+.stn-table__font-number,
+.stn-table td.stn-table__font-number {
+  font-family: var(--stn-font-number);
+}
+
+.stn-table__cell-sub {
+  color: var(--stn-text-secondary);
+}
+
+.stn-table__cell-muted {
+  color: var(--stn-text-tertiary);
+  font-size: var(--stn-text-caption-size);
+}
+
+.stn-table__cell-primary {
+  color: var(--stn-text-primary);
+}
+
+.stn-table__cell-critical {
+  color: var(--stn-critical);
+  font-weight: var(--stn-font-weight-bold);
+}
+
+.stn-table__divider {
+  color: var(--stn-text-tertiary);
+  margin-inline: var(--stn-space-1);
+}
+
 /* align variant — Th/Td `align="left" | "center" | "right"` (기본 center) */
 .stn-table th.stn-table__th--align-left,
 .stn-table td.stn-table__td--align-left {

package/styles/components/stn-tabs.css

@@ -118,7 +118,7 @@
 .stn-tabs.sm .stn-tab {
   height: var(--stn-size-32, 32px);
   padding: 0 var(--stn-space-12, 12px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   border-radius: var(--stn-radius-sm, 6px);
 }
 
@@ -127,7 +127,7 @@
 .stn-tabs:not(.sm):not(.lg) .stn-tab {
   height: var(--stn-size-38, 38px);
   padding: 0 var(--stn-space-16, 16px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   border-radius: var(--stn-radius-md, 8px);
 }
 
@@ -135,7 +135,7 @@
 .stn-tabs.lg .stn-tab {
   height: var(--stn-size-44, 44px);
   padding: 0 var(--stn-space-20, 20px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   border-radius: var(--stn-radius-md, 8px);
 }
 

package/styles/components/stn-tooltip.css

@@ -203,7 +203,7 @@
 
 /* SM: 소형 (높이 20px, 폰트 11px) */
 .stn-tooltip.sm {
-  --stn-tooltip-font-size: var(--stn-font-size-11);
+  --stn-tooltip-font-size: var(--stn-text-caption-small-size, var(--stn-font-size-11, 11px));
   --stn-tooltip-pad-y: var(--stn-space-2);
   --stn-tooltip-pad-x: var(--stn-space-6);
   --stn-tooltip-min-height: var(--stn-size-20);

package/styles/components/stn-widget.css

@@ -268,9 +268,9 @@
 }
 
 /* Widget title size modifiers */
-.stn-widget .stn-widget__title.sm { font-size: var(--stn-font-size-14, 14px); }
-.stn-widget .stn-widget__title.md { font-size: var(--stn-font-size-16, 16px); }
-.stn-widget .stn-widget__title.lg { font-size: var(--stn-font-size-18, 18px); }
+.stn-widget .stn-widget__title.sm { font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px)); }
+.stn-widget .stn-widget__title.md { font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px)); }
+.stn-widget .stn-widget__title.lg { font-size: var(--stn-text-title-medium-size, var(--stn-font-size-18, 18px)); }
 
 /* Widget title weight modifiers */
 .stn-widget .stn-widget__title.regular { font-weight: var(--stn-font-weight-regular, 400); }

package/styles/patterns/stn-alert-center.css

@@ -148,7 +148,7 @@
   border: var(--stn-size-1) solid transparent;
   background: transparent;
   color: var(--stn-text-secondary);
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium);
   cursor: pointer;
   transition: color 0.15s ease;
@@ -294,7 +294,7 @@
 .stn-alert-card__title {
   flex: 1;
   min-width: 0;
-  font-size: var(--stn-font-size-15);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-15, 15px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-text-primary);
   letter-spacing: -0.01em;
@@ -302,7 +302,7 @@
 
 /* 작업/공사 타입 라벨 공통 */
 .stn-alert-card__type-label {
-  font-size: var(--stn-font-size-14);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-text-primary);
 }
@@ -329,7 +329,7 @@
 .stn-alert-card__desc {
   flex: 1;
   min-width: 0;
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   color: var(--stn-text-secondary);
   line-height: var(--stn-line-height-reading);
 }
@@ -429,7 +429,7 @@
 
 /* 시간 텍스트 */
 .stn-alert-card__time {
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-13, 13px));
   color: var(--stn-text-secondary);
   white-space: nowrap;
 }
@@ -446,7 +446,7 @@
   align-items: center;
   gap: var(--stn-space-4);
   color: var(--stn-text-secondary);
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium);
   text-decoration: none;
   cursor: pointer;

package/styles/patterns/stn-header.css

@@ -83,7 +83,7 @@
   justify-self: start;
   width: max-content;
   max-width: 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .stn-header__right {
@@ -287,8 +287,8 @@
     flex-shrink: 0;
   }
 
-  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
-  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 햄버거 버튼을 제외한 Left 서브 텍스트만 숨겨 중앙 공간 확보 */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left > *:not(.stn-side-nav__mobile-trigger) {
     display: none;
   }
 
@@ -303,7 +303,7 @@
     width: auto;
     min-width: 0;
     max-width: 100%;
-    overflow: hidden;
+    overflow: visible;
     flex: 1 1 auto;
   }
 
@@ -381,8 +381,8 @@
     flex-shrink: 0;
   }
 
-  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
-  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 햄버거 버튼을 제외한 Left 서브 텍스트만 숨겨 중앙 공간 확보 */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left > *:not(.stn-side-nav__mobile-trigger) {
     display: none !important;
   }
 
@@ -397,7 +397,7 @@
     width: auto !important;
     min-width: 0 !important;
     max-width: 100% !important;
-    overflow: hidden !important;
+    overflow: visible !important;
     flex: 1 1 auto !important;
   }
 

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

@@ -21,13 +21,14 @@
   overflow: hidden;
 }
 
-/* translucent variant — 반투명 블러 글래스모피즘 외형 */
+/* translucent variant — 반투명 블러 글래스모피즘 외형 (테두리 및 그림자 없음) */
 .stn-section-side.translucent,
 .stn-section-side--translucent {
   background: var(--stn-section-side-bg-translucent);
   backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
   -webkit-backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
-  border-color: var(--stn-section-side-border-translucent, var(--stn-border-subtle));
+  border-color: var(--stn-section-side-border-translucent);
+  box-shadow: none;
 }
 
 /* fullWidth prop 또는 부모 LNB 컨테이너 안에서 가로 100% 확장 지원 */

package/styles/style-pub.css

@@ -45,6 +45,7 @@
 @import './components/stn-side-nav.css';
 @import './components/stn-header-title.css';
 @import './components/stn-popup.css';
+@import './components/stn-drawer.css';
 @import './components/stn-table.css';
 @import './components/stn-pagination.css';
 @import './components/stn-slider.css';

package/styles/tokens/stn-breakpoint.css

@@ -15,16 +15,4 @@
   --stn-bp-md: 1024px;
   --stn-bp-lg: 1280px;
   --stn-bp-xl: 1440px;
-
-  /* Semantic Layout & Responsive Aliases */
-  --stn-layout-list-split-breakpoint: var(--stn-bp-md);
-  --stn-layout-list-tree-top-max-height: 240px;
-  --stn-table-footer-collapse-breakpoint: var(--stn-bp-sm);
-
-  /* Pagination — 좁은 화면 컴팩트 모드 (@media 480px 기준; CSS @media에서는 리터럴 사용) */
-  --stn-pagination-compact-breakpoint: 480px;
-  --stn-pagination-compact-size: var(--stn-size-28, 28px);
-  --stn-pagination-compact-padding: var(--stn-space-6, 6px);
-  --stn-pagination-compact-font-size: var(--stn-font-size-12, 12px);
-  --stn-pagination-compact-gap: var(--stn-space-4, 4px);
 }

package/styles/tokens/stn-colors-semantic.css

@@ -51,6 +51,7 @@
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-gray-800);
   --stn-elevation-surface-widget: var(--stn-gray-850);
+  --stn-drawer-bg: var(--stn-gray-750);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
   --stn-dim-blur: 4px;
   --stn-input-bg: var(--stn-gray-900);
@@ -126,7 +127,7 @@
   --stn-scroll-thumb: var(--stn-gray-650);
   --stn-section-side-bg: var(--stn-gray-900);
   --stn-section-side-bg-translucent: var(--stn-opacity-black-50);
-  --stn-section-side-border-translucent: var(--stn-border-subtle);
+  --stn-section-side-border-translucent: transparent;
   --stn-section-side-border: var(--stn-gray-800);
   --stn-section-side-radius: 10px;
   --stn-section-side-shadow: none;
@@ -146,7 +147,7 @@
   --stn-table-row-hover: var(--stn-gray-900);
   --stn-table-td-fg: var(--stn-gray-50);
   --stn-table-th-bg: var(--stn-gray-800);
-  --stn-table-th-fg: var(--stn-gray-350);
+  --stn-table-th-fg: var(--stn-gray-250);
   --stn-table-th-radius: 8px;
   --stn-pagination-active-bg: var(--stn-opacity-white-10);
   --stn-pagination-active-color: var(--stn-gray-50);
@@ -187,7 +188,7 @@
   --stn-header-toolbar-icon: var(--stn-blue-250);
   --stn-header-toolbar-outline-border: var(--stn-blue-600);
   --stn-header-toolbar-outline-fg: var(--stn-gray-50);
-  --stn-nav-menu-active-bg: color-mix(in srgb, var(--stn-static-black) 85%, transparent);
+  --stn-nav-menu-active-bg: var(--stn-opacity-black-10);
   --stn-nav-menu-active-border: var(--stn-blue-350);
   --stn-nav-menu-active-shadow-depth: color-mix(in srgb, var(--stn-static-black) 95%, transparent);
   --stn-nav-menu-active-shadow-highlight: color-mix(in srgb, var(--stn-static-white) 25%, transparent);
@@ -201,7 +202,7 @@
   --stn-side-nav-border: var(--stn-gray-800);
   --stn-side-nav-divider: var(--stn-gray-800);
   --stn-side-nav-shadow: 1px 1px 10px 0 var(--stn-gray-850);
-  --stn-side-nav-toggle-bg: var(--stn-gray-950);
+  --stn-side-nav-toggle-bg: var(--stn-opacity-black-50);
   --stn-side-nav-toggle-border: var(--stn-gray-800);
   --stn-side-nav-toggle-fg: var(--stn-static-white);
   --stn-side-nav-toggle-shadow: -1px -1px 3px 0 color-mix(in srgb, var(--stn-static-white) 12%, transparent), 1px 1px 4px 0 color-mix(in srgb, var(--stn-static-black) 70%, transparent);
@@ -219,9 +220,9 @@
   --stn-side-nav-sub-btn-hover-border: var(--stn-opacity-white-20);
   --stn-btn-disabled-bg: var(--stn-gray-750);
   --stn-btn-disabled-fg: var(--stn-gray-400);
-  --stn-btn-ghost-bg: color-mix(in srgb, var(--stn-static-white) 5%, transparent);
-  --stn-btn-ghost-bg-hover: color-mix(in srgb, var(--stn-static-white) 10%, transparent);
-  --stn-btn-ghost-bg-pressed: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
+  --stn-btn-ghost-bg: var(--stn-opacity-white-5);
+  --stn-btn-ghost-bg-hover: var(--stn-opacity-white-10);
+  --stn-btn-ghost-bg-pressed: var(--stn-opacity-white-15);
   --stn-btn-ghost-fg: var(--stn-gray-100);
   --stn-btn-outlined-border: var(--stn-blue-250);
   --stn-btn-outlined-border-hover: var(--stn-blue-350);
@@ -390,7 +391,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-400);
-  --stn-chip-neutral: var(--stn-gray-400);
+  --stn-chip-neutral: var(--stn-gray-200);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -443,9 +444,9 @@
   --stn-side-nav-glass-bg: var(--stn-opacity-black-25);
   --stn-side-nav-glass-shadow: 1px 1px 10px 0 var(--stn-gray-850);
   --stn-side-nav-glass-border: color-mix(in srgb, var(--stn-static-white) 6%, transparent);
-  --stn-side-nav-mobile-trigger-bg: var(--stn-gray-900);
-  --stn-side-nav-mobile-trigger-border: var(--stn-gray-700);
-  --stn-side-nav-mobile-trigger-fg: var(--stn-static-white);
+  --stn-side-nav-mobile-trigger-bg: color-mix(in srgb, var(--stn-gray-900) 65%, transparent);
+  --stn-side-nav-mobile-trigger-border: color-mix(in srgb, var(--stn-static-white) 14%, transparent);
+  --stn-side-nav-mobile-trigger-fg: var(--stn-gray-100);
   --stn-side-nav-mobile-backdrop: var(--stn-opacity-black-65);
   --stn-side-nav-drawer-shadow: 8px 0 32px var(--stn-opacity-black-45);
   --stn-side-nav-trigger-shadow: 0 4px 16px var(--stn-opacity-black-30);
@@ -659,6 +660,7 @@
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-static-white);
   --stn-elevation-surface-widget: var(--stn-static-white);
+  --stn-drawer-bg: var(--stn-static-white);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
   --stn-dim-blur: 2px;
   --stn-input-bg: var(--stn-static-white);
@@ -734,7 +736,7 @@
   --stn-scroll-thumb: var(--stn-gray-200);
   --stn-section-side-bg: var(--stn-static-white);
   --stn-section-side-bg-translucent: var(--stn-opacity-white-50);
-  --stn-section-side-border-translucent: var(--stn-border-subtle);
+  --stn-section-side-border-translucent: transparent;
   --stn-section-side-border: var(--stn-gray-25);
   --stn-section-side-radius: 8px;
   --stn-section-side-shadow: 0 3px 10px var(--stn-gray-75);
@@ -1000,7 +1002,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-500);
-  --stn-chip-neutral: var(--stn-gray-400);
+  --stn-chip-neutral: var(--stn-gray-500);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -1053,8 +1055,8 @@
   --stn-side-nav-glass-bg: var(--stn-opacity-white-40);
   --stn-side-nav-glass-shadow: 1px 1px 10px 0 var(--stn-gray-150);
   --stn-side-nav-glass-border: var(--stn-gray-150);
-  --stn-side-nav-mobile-trigger-bg: var(--stn-static-white);
-  --stn-side-nav-mobile-trigger-border: var(--stn-gray-200);
+  --stn-side-nav-mobile-trigger-bg: color-mix(in srgb, var(--stn-static-white) 75%, transparent);
+  --stn-side-nav-mobile-trigger-border: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
   --stn-side-nav-mobile-trigger-fg: var(--stn-gray-900);
   --stn-side-nav-mobile-backdrop: var(--stn-opacity-white-65);
   --stn-side-nav-drawer-shadow: 8px 0 32px var(--stn-opacity-black-20);
@@ -1224,3 +1226,11 @@
   --stn-status-dot-bordered-border: var(--stn-border-subtle);
   --stn-status-dot-bordered-bg: var(--stn-elevation-surface-2);
 }
+
+[data-theme='blue'][data-mode='dark'] {
+  --stn-table-th-bg: var(--stn-blue-750);
+}
+
+[data-theme='blue'][data-mode='light'] {
+  --stn-table-th-bg: var(--stn-blue-100);
+}

package/styles/tokens/stn-elevation.css

@@ -4,10 +4,14 @@
  * Regenerate: npm run generate:tokens
  */
 
-/* STN Design System — Elevation (Z-Index Hierarchy: Level 0–2) */
+/* STN Design System — Elevation (Z-Index Hierarchy: Level 0–3) */
 
 :root {
   --stn-elevation-z-0: 0;
   --stn-elevation-z-1: 100;
+  --stn-elevation-z-banner: 120;
+  --stn-elevation-z-dropdown: 150;
+  --stn-elevation-z-drawer: 180;
   --stn-elevation-z-2: 200;
+  --stn-elevation-z-toast: 300;
 }

package/styles/tokens/stn-radius-semantic.css

@@ -54,7 +54,7 @@
   --stn-side-nav-sub-item-radius: var(--stn-radius-4);
   --stn-side-nav-footer-curved-radius: var(--stn-radius-40);
   --stn-side-nav-dropdown-radius: var(--stn-radius-8);
-  --stn-side-nav-mobile-trigger-radius: var(--stn-radius-8);
+  --stn-side-nav-mobile-trigger-radius: var(--stn-radius-circle);
   --stn-side-nav-drawer-close-radius: var(--stn-radius-6);
   --stn-side-nav-scroll-radius: var(--stn-radius-2);
   --stn-scroll-radius: var(--stn-radius-4);

package/styles/tokens/stn-size-semantic.css

@@ -254,4 +254,12 @@
   --stn-tree-focus-ring-width: var(--stn-size-2);
   --stn-tree-focus-ring-offset: var(--stn-size-1);
   --stn-tree-collapsed-row-height: var(--stn-size-28);
+  --stn-breadcrumb-icon-size-sm: var(--stn-size-14);
+  --stn-breadcrumb-icon-size-md: var(--stn-size-16);
+  --stn-breadcrumb-icon-size-lg: var(--stn-size-18);
+  --stn-breadcrumb-sep-size-sm: var(--stn-size-10);
+  --stn-breadcrumb-sep-size-md: var(--stn-size-12);
+  --stn-breadcrumb-sep-size-lg: var(--stn-size-14);
+  --stn-event-banner-btn-height: var(--stn-size-28);
+  --stn-event-banner-icon-size: var(--stn-size-24);
 }

package/styles/tokens/stn-spacing-semantic.css

@@ -75,6 +75,18 @@
   --stn-icon-box-padding-md: var(--stn-space-6);
   --stn-icon-box-padding-lg: var(--stn-space-8);
   --stn-icon-box-padding-xl: var(--stn-space-10);
+  --stn-drawer-padding-none: 0px;
+  --stn-drawer-padding-xs: var(--stn-space-8);
+  --stn-drawer-padding-sm: var(--stn-space-12);
+  --stn-drawer-padding-md: var(--stn-space-16);
+  --stn-drawer-padding-lg: var(--stn-space-20);
+  --stn-drawer-padding-xl: var(--stn-space-24);
+  --stn-drawer-gap-none: 0px;
+  --stn-drawer-gap-xs: var(--stn-space-8);
+  --stn-drawer-gap-sm: var(--stn-space-12);
+  --stn-drawer-gap-md: var(--stn-space-16);
+  --stn-drawer-gap-lg: var(--stn-space-20);
+  --stn-drawer-gap-xl: var(--stn-space-24);
   --stn-segmented-padding: var(--stn-space-4);
   --stn-segmented-gap: var(--stn-space-4);
   --stn-segmented-item-padding-x: var(--stn-space-16);
@@ -244,4 +256,17 @@
   --stn-search-requirement-compact-gap: var(--stn-space-12);
   --stn-search-requirement-divider-margin-x: var(--stn-space-4);
   --stn-tree-collapsed-row-padding-block: var(--stn-space-2);
+  --stn-breadcrumb-gap-sm: var(--stn-space-8);
+  --stn-breadcrumb-gap-md: var(--stn-space-16);
+  --stn-breadcrumb-gap-lg: var(--stn-space-24);
+  --stn-breadcrumb-segment-gap-sm: var(--stn-space-4);
+  --stn-breadcrumb-segment-gap-md: var(--stn-space-8);
+  --stn-breadcrumb-segment-gap-lg: var(--stn-space-12);
+  --stn-breadcrumb-chip-pad-x-sm: var(--stn-space-6);
+  --stn-breadcrumb-chip-pad-x-md: var(--stn-space-8);
+  --stn-breadcrumb-chip-pad-x-lg: var(--stn-space-12);
+  --stn-event-banner-text-gap: var(--stn-space-4);
+  --stn-event-banner-actions-gap: var(--stn-space-8);
+  --stn-event-banner-btn-padding-inline: var(--stn-space-14);
+  --stn-event-banner-btn-padding-block: var(--stn-space-4);
 }

package/dist/chunk-KLIYAEJA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnChip.ts"],"sourcesContent":["import { STN_GRADE_SOURCE, type StnGradeKind } from './stnGradeColors'\n\nexport { STN_GRADE_SOURCE }\n\n/** 등급 칩 — 알림센터 `.tag` · equip-search `.tag` · `error_tag` 와 동일 토큰 */\nexport type StnChipGrade = StnGradeKind\n\n/** 테이블 `border_chip` accent (등급과 별도) */\nexport type StnChipBorderAccent = 'mint' | 'sky' | 'violet' | 'orange' | 'yellow' | 'gray'\n\nexport const STN_CHIP_BORDER_ACCENTS: readonly {\n  accent: StnChipBorderAccent\n  descKo: string\n  cssBorder: string\n  cssText: string\n}[] = [\n  { accent: 'mint', descKo: '민트', cssBorder: 'var(--stn-teal-300)', cssText: 'var(--stn-teal-300)' },\n  { accent: 'sky', descKo: '스카이', cssBorder: 'var(--stn-blue-300)', cssText: 'var(--stn-blue-300)' },\n  { accent: 'violet', descKo: '바이올렛', cssBorder: 'var(--stn-purple-300)', cssText: 'var(--stn-purple-300)' },\n  {\n    accent: 'orange',\n    descKo: '오렌지',\n    cssBorder: 'var(--stn-yellow-300)',\n    cssText: 'var(--stn-yellow-300)',\n  },\n  {\n    accent: 'yellow',\n    descKo: '옐로',\n    cssBorder: 'var(--stn-yellow-300)',\n    cssText: 'var(--stn-yellow-300)',\n  },\n  { accent: 'gray', descKo: '그레이', cssBorder: 'var(--stn-gray-350)', cssText: 'var(--stn-gray-350)' },\n] as const\n\n/** Pub HTML 레거시 modifier (`critic` = critical) */\nexport type StnChipLegacyGradeClass = 'critic' | 'major' | 'minor' | 'warning'\n\nexport const STN_CHIP_GRADE_LEGACY_CLASS: Record<StnChipGrade, StnChipLegacyGradeClass> = {\n  critical: 'critic',\n  major: 'major',\n  minor: 'minor',\n  warning: 'warning',\n}\n\nexport const STN_CHIP_INTRO =\n  '짧은 상태·등급·속성 라벨용 뱃지입니다. `variant=\"filled\"`는 등급 배경색(알림센터 `.tag`), `variant=\"border\"`는 테이블 `border_chip`처럼 테두리만 있는 뱃지입니다. filled·border 모두 `--stn-badge-*` 토큰(11px·16px 높이·4px radius)으로 맞춥니다. 가로 너비는 글자 길이에 따라 늘어나며 `sideLabel`로 옆 설명을 붙일 수 있습니다.'\n\n/** Badge shell metrics — `stn-badge.css` */\nexport const STN_CHIP_METRICS = [\n  { token: '--stn-badge-font-size', value: '11px (gnb alert tag)' },\n  { token: '--stn-badge-height', value: '16px' },\n  { token: '--stn-badge-radius', value: '4px (--stn-radius-4)' },\n  { token: '--stn-badge-padding-x', value: '6px (세로 0 — grid 중앙 정렬)' },\n  { token: '--stn-badge-line-height', value: '16px (= height)' },\n] as const\n\nexport type StnChipUsageRow = {\n  context: string\n  pubMarkup: string\n  note?: string\n}\n\nexport const STN_CHIP_USAGE_ROWS: StnChipUsageRow[] = [\n  {\n    context: 'GNB 알림센터',\n    pubMarkup: '<span class=\"stn-badge stn-badge--filled tag critic\">CR</span>',\n    note: '`.stn-gnb` 알림 목록 — `tag` 유지 시 레이아웃 호환',\n  },\n  {\n    context: '노드 다이얼로그 · equip-search col1',\n    pubMarkup: '<span class=\"stn-badge stn-badge--filled tag major\">MJ</span>',\n    note: '`.layer_pop.node_dialog .equip-search-table`',\n  },\n  {\n    context: '검색 필터 · error_tag',\n    pubMarkup:\n      '<span class=\"stn-badge stn-badge--filled stn-badge--critical error_tag grade-critical tag critic\">CR</span>',\n    note: '등급 filled + 레거시 `error_tag`',\n  },\n  {\n    context: '테이블 border chip',\n    pubMarkup:\n      '<span class=\"border_chip orange stn-badge stn-badge--border\"><span class=\"label\">ETH</span><span class=\"value\">100G</span></span>',\n    note: '`.value` = 칩 옆 글자 (`sideLabel`)',\n  },\n]\n\nexport const STN_CHIP_GRADE_ROWS = (Object.keys(STN_GRADE_SOURCE) as StnChipGrade[]).map(\n  (grade) => ({\n    grade,\n    label: STN_GRADE_SOURCE[grade].label,\n    descKo: STN_GRADE_SOURCE[grade].descKo,\n    cssVar: STN_GRADE_SOURCE[grade].pubVar,\n    legacyClass: STN_CHIP_GRADE_LEGACY_CLASS[grade],\n    canonicalClass: `stn-badge--${grade}`,\n  }),\n)\n"],"mappings":";;;;;AAUO,IAAM,0BAKP;AAAA,EACJ,EAAE,QAAQ,QAAQ,QAAQ,gBAAM,WAAW,uBAAuB,SAAS,sBAAsB;AAAA,EACjG,EAAE,QAAQ,OAAO,QAAQ,sBAAO,WAAW,uBAAuB,SAAS,sBAAsB;AAAA,EACjG,EAAE,QAAQ,UAAU,QAAQ,4BAAQ,WAAW,yBAAyB,SAAS,wBAAwB;AAAA,EACzG;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,EAAE,QAAQ,QAAQ,QAAQ,sBAAO,WAAW,uBAAuB,SAAS,sBAAsB;AACpG;AAKO,IAAM,8BAA6E;AAAA,EACxF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAEO,IAAM,iBACX;AAGK,IAAM,mBAAmB;AAAA,EAC9B,EAAE,OAAO,yBAAyB,OAAO,uBAAuB;AAAA,EAChE,EAAE,OAAO,sBAAsB,OAAO,OAAO;AAAA,EAC7C,EAAE,OAAO,sBAAsB,OAAO,uBAAuB;AAAA,EAC7D,EAAE,OAAO,yBAAyB,OAAO,6DAA0B;AAAA,EACnE,EAAE,OAAO,2BAA2B,OAAO,kBAAkB;AAC/D;AAQO,IAAM,sBAAyC;AAAA,EACpD;AAAA,IACE,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WACE;AAAA,IACF,MAAM;AAAA,EACR;AACF;AAEO,IAAM,sBAAuB,OAAO,KAAK,gBAAgB,EAAqB;AAAA,EACnF,CAAC,WAAW;AAAA,IACV;AAAA,IACA,OAAO,iBAAiB,KAAK,EAAE;AAAA,IAC/B,QAAQ,iBAAiB,KAAK,EAAE;AAAA,IAChC,QAAQ,iBAAiB,KAAK,EAAE;AAAA,IAChC,aAAa,4BAA4B,KAAK;AAAA,IAC9C,gBAAgB,cAAc,KAAK;AAAA,EACrC;AACF;","names":[]}

package/dist/chunk-NB4NJQYE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnTextField.ts"],"sourcesContent":["/**\n * Pub text input — Infomap `input` (Figma 40000042:186898)\n * @see common.css form inputs · StnTextField\n */\n\n/** S 24px · M 32px · L 40px · XL 56px */\nexport type StnTextFieldSize = 'S' | 'M' | 'L' | 'XL'\n\nexport const STN_TEXT_FIELD_FIGMA = '40000042:186898'\n\nexport const STN_TEXT_FIELD_INTRO =\n  \"Infomap 검색·필터용 **텍스트 입력**입니다. **outlined**(박스, 기본) · **filled**(면) · **standard**(하단 라인). Light filled = gray-50. Dark filled = gray-750. helperText는 하단 왼쪽 캡션. React `StnTextField` · Pub `.stn-text-field`.\"\n\nexport const STN_TEXT_FIELD_SIZE_ROWS: readonly {\n  size: StnTextFieldSize\n  height: string\n  radius: string\n  fontSize: string\n  paddingX: string\n  typicalWidth: string\n  pubClass: string\n  usedIn: string\n}[] = [\n  {\n    size: 'S',\n    height: '24px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    paddingX: '10px',\n    typicalWidth: 'width 프리셋 · 기본 140px · fullWidth=100%',\n    pubClass: 'stn-text-field sm',\n    usedIn: '테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'M',\n    height: '32px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    paddingX: '10px',\n    typicalWidth: 'width 프리셋 · 기본 140px · fullWidth=100%',\n    pubClass: 'stn-text-field md',\n    usedIn: '검색영역 · 필터 값',\n  },\n  {\n    size: 'L',\n    height: '40px',\n    radius: '6px (radius-6)',\n    fontSize: '14px',\n    paddingX: '12px',\n    typicalWidth: 'width 프리셋 · 기본 140px · fullWidth=100%',\n    pubClass: 'stn-text-field lg',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'XL',\n    height: '56px',\n    radius: '16px (radius-16)',\n    fontSize: '14px',\n    paddingX: '16px',\n    typicalWidth: 'fullWidth=100%',\n    pubClass: 'stn-text-field xl',\n    usedIn: '넓은 검색 · 강조 입력',\n  },\n] as const\n\nexport const STN_TEXT_FIELD_STATES = [\n  { id: 'default', label: 'Default', note: 'border `--stn-input-border` · bg `--stn-input-bg`' },\n  { id: 'focus', label: 'Focus', note: 'border `--stn-input-focus` (2px)' },\n  { id: 'placeholder', label: 'Placeholder', note: 'color `--stn-input-placeholder`' },\n  { id: 'disabled', label: 'Disabled', note: 'opacity 0.55 · not-allowed' },\n  { id: 'invalid', label: 'Invalid', note: 'border `--stn-feedback-error` · `aria-invalid` 또는 `invalid` prop' },\n] as const\n\nexport const STN_TEXT_FIELD_USAGE = \"import { StnTextField } from '@stn-uiux/pub-ui-react'\\n\\n<StnTextField variant=\\\"outlined\\\" placeholder=\\\"검색\\\" />\\n<StnTextField variant=\\\"filled\\\" placeholder=\\\"입력\\\" />\\n<StnTextField variant=\\\"standard\\\" placeholder=\\\"입력\\\" helperText=\\\"도움말\\\" />\"\n\nexport const STN_TEXT_FIELD_HTML = `<input\n  type=\"text\"\n  class=\"stn-text-field md\"\n  value=\"전체\"\n  aria-label=\"필터\"\n/>`\n"],"mappings":";AAQO,IAAM,uBAAuB;AAE7B,IAAM,uBACX;AAEK,IAAM,2BASP;AAAA,EACJ;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;AAEO,IAAM,wBAAwB;AAAA,EACnC,EAAE,IAAI,WAAW,OAAO,WAAW,MAAM,uDAAoD;AAAA,EAC7F,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,mCAAmC;AAAA,EACxE,EAAE,IAAI,eAAe,OAAO,eAAe,MAAM,kCAAkC;AAAA,EACnF,EAAE,IAAI,YAAY,OAAO,YAAY,MAAM,gCAA6B;AAAA,EACxE,EAAE,IAAI,WAAW,OAAO,WAAW,MAAM,gFAAmE;AAC9G;AAEO,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAE7B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}