@stn-uiux/pub-ui 0.1.85 → 0.1.87

package/dist/index.d.ts

@@ -70,7 +70,9 @@ export { STN_DIVIDER_INTRO, STN_DIVIDER_ORIENTATIONS, STN_DIVIDER_TEXT_ALIGNS, S
 export { STN_STEP_STATUS_SPEC, StnStepItem, StnStepStatus, StnStepperLineThickness, StnStepperOrientation, StnStepperPosition, StnStepperSize } from './data/stnStepper.js';
 export { STN_POPOVER_INTRO, STN_POPOVER_USAGE, StnPopoverHorizontalOrigin, StnPopoverOrigin, StnPopoverPosition, StnPopoverReference, StnPopoverVerticalOrigin } from './data/stnPopover.js';
 export { STN_STEP_CARDS_INTRO, StnStepCardItem } from './data/stnStepCards.js';
-export { STN_SPLIT_VIEW_INTRO, STN_SPLIT_VIEW_OVERLAY_PLACEMENTS, STN_SPLIT_VIEW_SIDE_WIDTHS, StnSplitViewOverlayPlacement, StnSplitViewSideWidth } from './data/stnSplitView.js';
+export { STN_SPLIT_VIEW_INTRO, STN_SPLIT_VIEW_OVERLAY_PLACEMENTS, STN_SPLIT_VIEW_PADDINGS, STN_SPLIT_VIEW_SIDE_WIDTHS, StnSplitViewOverlayPlacement, StnSplitViewPadding, StnSplitViewSideWidth } from './data/stnSplitView.js';
+export { STN_LIST_INTRO, STN_LIST_SIZES, StnListPadding, StnListSize, StnListSizeSpec, StnListVariant, StnListWidth } from './data/stnList.js';
+export { STN_MENU_INTRO, STN_MENU_SIZES, StnMenuElevation, StnMenuItemRole, StnMenuPadding, StnMenuSize, StnMenuSizeSpec, StnMenuWidth } from './data/stnMenu.js';
 export { STN_UI_CATALOG, STN_UI_COMPONENTS, STN_UI_FOUNDATIONS, StnUiComponentId, StnUiEntry, StnUiFoundationId } from './components.js';
 export { SYSTEM_ICON_DATA_URLS } from './data/stnSystemIconsData.generated.js';
 import 'react';

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,
@@ -67,17 +82,16 @@ import {
 import {
   STN_SPLIT_VIEW_INTRO,
   STN_SPLIT_VIEW_OVERLAY_PLACEMENTS,
+  STN_SPLIT_VIEW_PADDINGS,
   STN_SPLIT_VIEW_SIDE_WIDTHS
-} from "./chunk-W7K3FSAX.js";
+} from "./chunk-F5WWHWEU.js";
 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,
@@ -97,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
@@ -141,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,
@@ -160,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,
@@ -174,19 +195,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-5QPBSOJ6.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-ZGYPJEU3.js";
 import {
   STN_HEADER_TITLE_DEMO,
   STN_HEADER_TITLE_FIGMA,
@@ -323,7 +332,7 @@ import {
   hexToRgbString,
   paletteToJsonRecord,
   semanticPaletteToJsonRecord
-} from "./chunk-YN774RCQ.js";
+} from "./chunk-6TQ4O7BK.js";
 import {
   STN_THEME_SEMANTIC_DARK_ROWS,
   STN_THEME_SEMANTIC_LIGHT_ROWS
@@ -333,6 +342,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,
@@ -342,7 +359,7 @@ import {
   STN_TOAST_SETUP,
   STN_TOAST_TOKEN_ROWS,
   STN_TOAST_USAGE_HTML
-} from "./chunk-SOEBXG3T.js";
+} from "./chunk-U66BCO23.js";
 import {
   STN_TREE_DEMO,
   STN_TREE_FIGMA,
@@ -404,13 +421,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,
@@ -441,13 +457,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,
@@ -530,7 +539,7 @@ import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
   STN_FEEDBACK_SOURCE
-} from "./chunk-BYGKJSDN.js";
+} from "./chunk-6HRKKRTT.js";
 import {
   STN_DATE_PICKER_INTRO,
   STN_DATE_PICKER_KO_NAME,
@@ -775,6 +784,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,
@@ -790,6 +801,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,
@@ -897,6 +910,7 @@ export {
   STN_SPACING_USECASE_ROWS,
   STN_SPLIT_VIEW_INTRO,
   STN_SPLIT_VIEW_OVERLAY_PLACEMENTS,
+  STN_SPLIT_VIEW_PADDINGS,
   STN_SPLIT_VIEW_SIDE_WIDTHS,
   STN_STATIC,
   STN_STATUS_DEMO_STEPS,

package/package.json

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

package/styles/components/stn-badge.css

@@ -97,6 +97,23 @@
   transform-origin: 0% 100%;
 }
 
+/* Center Horizontal Positions (노드 상단/하단 정중앙 배치) */
+.stn-badge.top-center,
+.stn-badge--top-center {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -65%);
+  transform-origin: 50% 100%;
+}
+
+.stn-badge.bottom-center,
+.stn-badge--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 65%);
+  transform-origin: 50% 0%;
+}
+
 /* Dot variant */
 .stn-badge.dot,
 .stn-badge--dot {

package/styles/components/stn-breadcrumb.css

@@ -200,6 +200,15 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   mask-size: contain;
 }
 
+/* Reverse Modifier — 역방향 브레드크럼 (구분자 화살표 < 반전 및 현재 항목 강조) */
+.stn-breadcrumb.reverse .separator > span {
+  transform: rotate(180deg);
+}
+
+.stn-breadcrumb.reverse .stn-breadcrumb__item--current .stn-breadcrumb__label {
+  font-weight: var(--stn-font-weight-bold, 700);
+}
+
 .stn-breadcrumb .collapsed {
   min-width: var(--stn-breadcrumb-icon-size);
   padding: 0 var(--stn-space-4, 4px);

package/styles/components/stn-card.css

@@ -116,6 +116,38 @@
   cursor: pointer;
 }
 
+/* Hover effects by variant (STN Semantic Token 준수) */
+:is(.stn-card.interactive, .stn-card[role='button']).flat:not([class*='severity-']):hover {
+  background-color: var(--stn-card-bg-flat-hover);
+}
+
+:is(.stn-card.interactive, .stn-card[role='button']).outlined:not([class*='severity-']):hover {
+  border-color: var(--stn-card-border-hover);
+  background-color: color-mix(in srgb, var(--stn-card-bg-flat) 40%, transparent);
+}
+
+:is(.stn-card.interactive, .stn-card[role='button']).elevated:hover {
+  box-shadow: var(--stn-card-shadow-hover);
+  transform: translateY(-2px);
+}
+
+/* Hover effects for Severity Surfaces (심각도 고유 틴트 유지) */
+:is(.stn-card.interactive, .stn-card[role='button']).severity-critical:hover {
+  background-color: color-mix(in srgb, var(--stn-card-severity-critical-bg) 85%, var(--stn-feedback-error) 15%);
+}
+
+:is(.stn-card.interactive, .stn-card[role='button']).severity-major:hover {
+  background-color: color-mix(in srgb, var(--stn-card-severity-major-bg) 85%, var(--stn-grade-major) 15%);
+}
+
+:is(.stn-card.interactive, .stn-card[role='button']).severity-minor:hover {
+  background-color: color-mix(in srgb, var(--stn-card-severity-minor-bg) 85%, var(--stn-grade-minor) 15%);
+}
+
+:is(.stn-card.interactive, .stn-card[role='button']).severity-warning:hover {
+  background-color: color-mix(in srgb, var(--stn-card-severity-warning-bg) 85%, var(--stn-grade-warning) 15%);
+}
+
 .stn-card.interactive:active,
 .stn-card[role='button']:active {
   transform: translateY(1px);

package/styles/components/stn-drawer.css

@@ -124,6 +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(96vw, 1920px)); --stn-drawer-active-height: var(--stn-drawer-height-full, min(96vh, 1080px)); }
 
 /* ── 6. Header, Body, Footer Subcomponents ── */
 .stn-drawer__head {
@@ -177,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;