@stn-uiux/pub-ui 0.1.69 → 0.1.71

package/dist/chunk-7ONB2WVN.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-7ONB2WVN.js.map

package/dist/{chunk-JHRYIWWJ.js → chunk-7YKAIENZ.js}

@@ -17,6 +17,11 @@ var STN_SECTION_SIDE_SPEC = [
     value: "`--stn-section-side-bg`",
     note: "light white \xB7 dark gray-900"
   },
+  {
+    property: "Translucent Bg",
+    value: "`--stn-section-side-bg-translucent`",
+    note: 'variant="translucent" \u2014 light white-50 \xB7 dark black-50 (blur 8px)'
+  },
   {
     property: "Border",
     value: "`--stn-section-side-border`",
@@ -32,6 +37,11 @@ var STN_SECTION_SIDE_SPEC = [
     property: "fill",
     value: "`fill` prop \u2192 `.stn-section-side--fill`",
     note: "list view \u2014 search+table \uC5F4 \uB192\uC774 \xB7 \uD558\uB2E8 inset\uC740 .stn-container padding-bottom"
+  },
+  {
+    property: "variant",
+    value: '`variant="translucent"`',
+    note: "\uAE00\uB798\uC2A4\uBAA8\uD53C\uC998 \uBC18\uD22C\uBA85 \uBE14\uB7EC \uD328\uB110 (.stn-section-side.translucent)"
   }
 ];
 var STN_SECTION_SIDE_USAGE = `import {
@@ -54,4 +64,4 @@ export {
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
 };
-//# sourceMappingURL=chunk-JHRYIWWJ.js.map
+//# sourceMappingURL=chunk-7YKAIENZ.js.map

package/dist/chunk-7YKAIENZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnSectionSide.ts"],"sourcesContent":["/**\n * Infomap section-side panel\n * Dark 40000040:102539 · Light 40000042:187762\n * @see StnSectionSide · stn-section-side.css\n */\n\nexport const STN_SECTION_SIDE_FIGMA = {\n  dark: '40000040:102539',\n  light: '40000042:187762',\n} as const\n\nexport const STN_SECTION_SIDE_INTRO =\n  '맵·대시보드 **사이드 패널** 패턴. Light: white · gray-25 border · radius 8 · shadow. Dark: gray-900 · gray-800 border · radius 10. 본문 `StnScroll` + `StnTree`.'\n\nexport const STN_SECTION_SIDE_SPEC = [\n  { property: 'Width', value: '264px', note: 'Figma frame' },\n  { property: 'Padding', value: '8px', note: '' },\n  {\n    property: 'Radius',\n    value: '`--stn-section-side-radius`',\n    note: 'light 8 · dark 10',\n  },\n  {\n    property: 'Background',\n    value: '`--stn-section-side-bg`',\n    note: 'light white · dark gray-900',\n  },\n  {\n    property: 'Translucent Bg',\n    value: '`--stn-section-side-bg-translucent`',\n    note: 'variant=\"translucent\" — light white-50 · dark black-50 (blur 8px)',\n  },\n  {\n    property: 'Border',\n    value: '`--stn-section-side-border`',\n    note: 'light gray-25 · dark gray-800',\n  },\n  {\n    property: 'Shadow',\n    value: '`--stn-section-side-shadow`',\n    note: 'light 0 3px 10px gray-75 · dark none',\n  },\n  { property: 'Body', value: 'StnScroll vertical', note: 'overflow tree' },\n  {\n    property: 'fill',\n    value: '`fill` prop → `.stn-section-side--fill`',\n    note: 'list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom',\n  },\n  {\n    property: 'variant',\n    value: '`variant=\"translucent\"`',\n    note: '글래스모피즘 반투명 블러 패널 (.stn-section-side.translucent)',\n  },\n] as const\n\nexport const STN_SECTION_SIDE_USAGE = `import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>`\n"],"mappings":";AAMO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,IAAM,yBACX;AAEK,IAAM,wBAAwB;AAAA,EACnC,EAAE,UAAU,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,EACzD,EAAE,UAAU,WAAW,OAAO,OAAO,MAAM,GAAG;AAAA,EAC9C;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,EAAE,UAAU,QAAQ,OAAO,sBAAsB,MAAM,gBAAgB;AAAA,EACvE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/chunk-O77GW7PM.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-O77GW7PM.js.map

package/dist/chunk-O77GW7PM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-RZCFFGBA.js

@@ -0,0 +1,9 @@
+// src/data/stnPackageVersion.ts
+var STN_UI_VERSION = "0.1.71";
+var STN_UI_VERSION_LABEL = "v0.1.71";
+
+export {
+  STN_UI_VERSION,
+  STN_UI_VERSION_LABEL
+};
+//# sourceMappingURL=chunk-RZCFFGBA.js.map

package/dist/chunk-RZCFFGBA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.71'\nexport const STN_UI_VERSION_LABEL = 'v0.1.71'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/cli.js

@@ -1,3 +1,6 @@
+import {
+  STN_TEXT_FIELD_USAGE
+} from "./chunk-NB4NJQYE.js";
 import {
   STN_TOAST_REACT_USAGE
 } from "./chunk-SOEBXG3T.js";
@@ -11,9 +14,6 @@ import {
 import {
   STN_TABLE_REACT_EXAMPLE
 } from "./chunk-IOBNIUK3.js";
-import {
-  STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_USAGE,
   STN_SIDE_NAV_ITEM_USAGE

package/dist/data/index.d.ts

@@ -64,4 +64,6 @@ export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LIN
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './stnWidget.js';
 export { STN_STATUS_DEMO_STEPS, StnStatusDotState, StnStatusFlowStep, StnStatusFlowStepColor } from './stnStatus.js';
+export { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant } from './stnTabs.js';
 export { SYSTEM_ICON_DATA_URLS } from './stnSystemIconsData.generated.js';
+import 'react';

package/dist/data/index.js

@@ -1,4 +1,4 @@
-import "../chunk-AVICAV6Z.js";
+import "../chunk-O77GW7PM.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -32,6 +32,7 @@ import {
 import {
   STN_STATUS_DEMO_STEPS
 } from "../chunk-SQJPE6HH.js";
+import "../chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
   STN_TEXT_AREA_INTRO,
@@ -104,7 +105,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "../chunk-JHRYIWWJ.js";
+} from "../chunk-7YKAIENZ.js";
 import {
   STN_SEGMENTED_FIGMA,
   STN_SEGMENTED_HTML,
@@ -135,7 +136,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-QQYDH4WU.js";
+} from "../chunk-RZCFFGBA.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -290,6 +291,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-NB4NJQYE.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -360,14 +369,6 @@ import {
   STN_TABLE_TH_CHECK_FIGMA,
   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-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_INTRO,
   STN_SIDE_NAVIGATION_USAGE,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.68";
-declare const STN_UI_VERSION_LABEL = "v0.1.68";
+declare const STN_UI_VERSION = "0.1.71";
+declare const STN_UI_VERSION_LABEL = "v0.1.71";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-QQYDH4WU.js";
+} from "../chunk-RZCFFGBA.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnSectionSide.d.ts

@@ -24,6 +24,10 @@ declare const STN_SECTION_SIDE_SPEC: readonly [{
     readonly property: "Background";
     readonly value: "`--stn-section-side-bg`";
     readonly note: "light white · dark gray-900";
+}, {
+    readonly property: "Translucent Bg";
+    readonly value: "`--stn-section-side-bg-translucent`";
+    readonly note: "variant=\"translucent\" — light white-50 · dark black-50 (blur 8px)";
 }, {
     readonly property: "Border";
     readonly value: "`--stn-section-side-border`";
@@ -40,6 +44,10 @@ declare const STN_SECTION_SIDE_SPEC: readonly [{
     readonly property: "fill";
     readonly value: "`fill` prop → `.stn-section-side--fill`";
     readonly note: "list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom";
+}, {
+    readonly property: "variant";
+    readonly value: "`variant=\"translucent\"`";
+    readonly note: "글래스모피즘 반투명 블러 패널 (.stn-section-side.translucent)";
 }];
 declare const STN_SECTION_SIDE_USAGE = "import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>";
 

package/dist/data/stnSectionSide.js

@@ -3,7 +3,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "../chunk-JHRYIWWJ.js";
+} from "../chunk-7YKAIENZ.js";
 export {
   STN_SECTION_SIDE_FIGMA,
   STN_SECTION_SIDE_INTRO,

package/dist/data/stnTabs.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+/**
+ * STN Tabs Data and Type Definitions
+ */
+
+type StnTabsSize = 'sm' | 'md' | 'lg';
+type StnTabsVariant = 'line';
+type StnTabScrollButtons = 'auto' | boolean;
+type StnTabIconPosition = 'start' | 'end' | 'top' | 'bottom';
+type StnTabIconSize = number | 'sm' | 'md' | 'lg';
+interface StnTabItem {
+    value: string | number;
+    label?: ReactNode;
+    icon?: ReactNode;
+    iconPosition?: StnTabIconPosition;
+    iconSize?: StnTabIconSize;
+    badge?: ReactNode;
+    count?: number | string;
+    disabled?: boolean;
+    wrapped?: boolean;
+    tooltip?: ReactNode;
+}
+type StnTabPanelPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export type { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant };

package/dist/data/stnTabs.js

@@ -0,0 +1,2 @@
+import "../chunk-7ONB2WVN.js";
+//# sourceMappingURL=stnTabs.js.map

package/dist/data/stnTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -64,5 +64,7 @@ export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LIN
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './data/stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './data/stnWidget.js';
 export { STN_STATUS_DEMO_STEPS, StnStatusDotState, StnStatusFlowStep, StnStatusFlowStepColor } from './data/stnStatus.js';
+export { StnTabIconPosition, StnTabIconSize, StnTabItem, StnTabPanelPadding, StnTabScrollButtons, StnTabsSize, StnTabsVariant } from './data/stnTabs.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-N46UQH6L.js";
-import "./chunk-AVICAV6Z.js";
+import "./chunk-O77GW7PM.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -37,6 +37,7 @@ import {
 import {
   STN_STATUS_DEMO_STEPS
 } from "./chunk-SQJPE6HH.js";
+import "./chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
   STN_TEXT_AREA_INTRO,
@@ -109,7 +110,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "./chunk-JHRYIWWJ.js";
+} from "./chunk-7YKAIENZ.js";
 import {
   STN_SEGMENTED_FIGMA,
   STN_SEGMENTED_HTML,
@@ -140,7 +141,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-QQYDH4WU.js";
+} from "./chunk-RZCFFGBA.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -295,6 +296,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-NB4NJQYE.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -365,14 +374,6 @@ import {
   STN_TABLE_TH_CHECK_FIGMA,
   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-NB4NJQYE.js";
 import {
   STN_SIDE_NAVIGATION_INTRO,
   STN_SIDE_NAVIGATION_USAGE,

package/package.json

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

package/styles/components/stn-checkbox.css

@@ -68,6 +68,26 @@
   background-color: var(--stn-checkbox-bg, transparent);
 }
 
+/* Variant: Translucent (반투명 블러 배경) */
+.stn-checkbox.translucent input + label:before {
+  border-color: var(--stn-checkbox-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-checkbox-bg-translucent, var(--stn-opacity-black-60));
+  backdrop-filter: blur(var(--stn-checkbox-translucent-blur, 4px));
+  -webkit-backdrop-filter: blur(var(--stn-checkbox-translucent-blur, 4px));
+}
+
+.stn-checkbox.translucent input:checked + label:before,
+.stn-checkbox.translucent input:indeterminate + label:before,
+.stn-checkbox.translucent.indeterminate input + label:before {
+  border-color: var(--stn-checkbox-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-checkbox-bg-translucent, var(--stn-opacity-black-60));
+}
+
+.stn-checkbox.translucent input:disabled + label:before {
+  border-color: var(--stn-checkbox-disabled-border);
+  background-color: var(--stn-checkbox-disabled-bg);
+}
+
 .stn-checkbox input:checked + label:after {
   content: '';
   position: absolute;

package/styles/components/stn-label-prefix.css

@@ -7,7 +7,7 @@
  *     └── .stn-label-prefix__control (children slot — StnDropdown·StnTextField·StnDateRangeField 등)
  *
  * Props:
- *   variant  : outline(기본) · filled · standard · transparent
+ *   variant  : outline(기본) · filled · standard · transparent · translucent
  *   size     : sm(24px) · md(32px, 기본) · lg(40px)
  *   radius   : none · sm · md · lg · xl (기본은 size에 따름)
  *   position : prefix(왼쪽, 기본) · suffix(오른쪽)
@@ -18,7 +18,7 @@
  * 3. Divider (.stn-label-prefix__divider)
  * 4. Control Slot (.stn-label-prefix__control)
  * 5. Size (sm · md · lg)
- * 6. Variant (outline · filled · standard · transparent)
+ * 6. Variant (outline · filled · standard · transparent · translucent)
  * 7. Focus-within State
  * 8. Suffix Position
  * 9. Radius Override
@@ -199,11 +199,24 @@
   background-color: transparent;
 }
 
+/* 6-5. Translucent (반투명 블러 배경) */
+.stn-label-prefix.translucent {
+  border: var(--stn-size-1, 1px) solid var(--stn-label-prefix-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-label-prefix-bg-translucent, var(--stn-opacity-black-60));
+  backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
+}
+
+.stn-label-prefix.translucent > .stn-label-prefix__label {
+  background-color: transparent;
+}
+
 /* ==========================================================================
    7. Focus-within State
    ========================================================================== */
 .stn-label-prefix.outline:focus-within,
-.stn-label-prefix.filled:focus-within {
+.stn-label-prefix.filled:focus-within,
+.stn-label-prefix.translucent:focus-within {
   border-color: var(--stn-input-focus-fg, var(--stn-primary));
 }
 

package/styles/components/stn-tabs.css

@@ -0,0 +1,412 @@
+@charset "utf-8";
+/**
+ * StnTabs — 탭 내비게이션 (Tabs, Tab, TabPanel)
+ *
+ * Classes:
+ *   - Container: `.stn-tabs`
+ *   - Scroll area: `.stn-tabs__scroller`
+ *   - Tab List: `.stn-tabs__list`
+ *   - Tab item: `.stn-tab`
+ *   - Floating indicator: `.stn-tabs__indicator`
+ *   - Scroll buttons: `.stn-tabs__scroll-button`
+ *   - Panel: `.stn-tab-panel`
+ *
+ * Variants:
+ *   - `line` (기본): 하단 2px 밑줄 인디케이터가 부드럽게 이동
+ *
+ * Sizes:
+ *   - `sm`: height 32px, font 12px
+ *   - `md` (기본): height 38px, font 13px
+ *   - `lg`: height 44px, font 14px
+ */
+
+/* ==========================================================================
+   1. StnTabs Container
+   ========================================================================== */
+.stn-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+  background-color: transparent;
+  border-bottom: 1px solid var(--stn-border-subtle);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.stn-tabs.line {
+  border-bottom: 1px solid var(--stn-border-subtle);
+}
+
+/* Full Width (stretch tabs) */
+.stn-tabs.full .stn-tabs__list {
+  width: 100%;
+}
+.stn-tabs.full .stn-tab {
+  flex: 1 1 0%;
+  text-align: center;
+  justify-content: center;
+}
+
+/* Centered Tabs */
+.stn-tabs.centered .stn-tabs__list {
+  justify-content: center;
+}
+
+/* ==========================================================================
+   2. Scroller & Tab List
+   ========================================================================== */
+.stn-tabs__scroller {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch; /* iOS Safari 관성 스크롤 */
+  touch-action: pan-x; /* 모바일 가로 제스처 최적화 */
+  overscroll-behavior-x: contain;
+  scrollbar-width: none; /* Hide scrollbar Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.stn-tabs__scroller::-webkit-scrollbar {
+  display: none; /* Hide scrollbar Chrome/Safari */
+}
+
+.stn-tabs__list {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: fit-content;
+}
+
+/* ==========================================================================
+   3. Tab Item (.stn-tab)
+   ========================================================================== */
+.stn-tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-space-6, 6px);
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--stn-text-tertiary);
+  font-family: var(--stn-font-body, Pretendard, sans-serif);
+  font-weight: var(--stn-font-weight-medium, 500);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Size: sm */
+.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);
+  border-radius: var(--stn-radius-sm, 6px);
+}
+
+/* Size: md (기본) */
+.stn-tabs.md .stn-tab,
+.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);
+  border-radius: var(--stn-radius-md, 8px);
+}
+
+/* Size: lg */
+.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);
+  border-radius: var(--stn-radius-md, 8px);
+}
+
+/* Wrapped Labels (긴 텍스트 2줄 자동 줄바꿈) */
+.stn-tab.is-wrapped {
+  white-space: normal;
+  line-height: var(--stn-line-height-tight, 1.35);
+  text-align: center;
+  max-width: 260px;
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-6, 6px);
+  padding-bottom: var(--stn-space-6, 6px);
+}
+
+.stn-tab.is-wrapped .stn-tab__label {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+
+/* Hover State */
+.stn-tab:hover:not(.is-disabled) {
+  color: var(--stn-text-primary);
+}
+
+/* Focus Visible */
+.stn-tab:focus-visible {
+  outline: var(--stn-focus-ring-width, var(--stn-size-2, 2px)) solid var(--stn-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Active / Selected State */
+.stn-tab.is-active {
+  color: var(--stn-primary, var(--stn-blue-400));
+  font-weight: var(--stn-font-weight-semibold, 600);
+}
+
+/* Disabled State */
+.stn-tab.is-disabled {
+  cursor: not-allowed;
+  opacity: var(--stn-disabled-opacity, 0.45);
+  pointer-events: none;
+}
+
+
+/* Icon in Tab */
+.stn-tab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.stn-tab__icon > svg,
+.stn-tab__icon > img,
+.stn-tab__icon > .stn-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Icon Sizes */
+.stn-tab__icon.icon-sm {
+  width: var(--stn-size-14, 14px);
+  height: var(--stn-size-14, 14px);
+}
+
+.stn-tab__icon.icon-md {
+  width: var(--stn-size-18, 18px);
+  height: var(--stn-size-18, 18px);
+}
+
+.stn-tab__icon.icon-lg {
+  width: var(--stn-size-22, 22px);
+  height: var(--stn-size-22, 22px);
+}
+
+/* Icon Positions: start (기본), end, top, bottom */
+.stn-tab.icon-top {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--stn-space-4, 4px);
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-8, 8px);
+  padding-bottom: var(--stn-space-8, 8px);
+}
+
+.stn-tab.icon-bottom {
+  flex-direction: column-reverse;
+  justify-content: center;
+  gap: var(--stn-space-4, 4px);
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-8, 8px);
+  padding-bottom: var(--stn-space-8, 8px);
+}
+
+.stn-tab.icon-end {
+  flex-direction: row-reverse;
+}
+
+/* Icon-only Tab (정방형 비율 & 툴팁 호환) */
+.stn-tab.icon-only {
+  padding: 0;
+  aspect-ratio: 1 / 1;
+}
+
+.stn-tabs.sm .stn-tab.icon-only {
+  width: var(--stn-size-32, 32px);
+  min-width: var(--stn-size-32, 32px);
+}
+
+.stn-tabs.md .stn-tab.icon-only,
+.stn-tabs:not(.sm):not(.lg) .stn-tab.icon-only {
+  width: var(--stn-size-38, 38px);
+  min-width: var(--stn-size-38, 38px);
+}
+
+.stn-tabs.lg .stn-tab.icon-only {
+  width: var(--stn-size-44, 44px);
+  min-width: var(--stn-size-44, 44px);
+}
+
+/* Badge / Count in Tab — StnChip 'sm' 표준 규격 1:1 연동 */
+.stn-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--stn-chip-height-sm, 20px);
+  height: var(--stn-chip-height-sm, 20px);
+  padding: 0 var(--stn-chip-padding-x-sm, 6px);
+  border-radius: var(--stn-radius-chip-pill, 9999px);
+  font-size: var(--stn-chip-font-size-sm, 11px);
+  font-family: var(--stn-font-number, Pretendard, sans-serif);
+  font-weight: var(--stn-font-weight-bold, 700);
+  line-height: 1;
+  background-color: var(--stn-tab-badge-bg);
+  color: var(--stn-tab-badge-fg);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.stn-tab.is-active .stn-tab__badge {
+  background-color: color-mix(in srgb, var(--stn-primary) 18%, transparent);
+  color: var(--stn-primary);
+}
+
+.stn-tab__extra {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+/* ==========================================================================
+   4. Floating Animated Indicator (.stn-tabs__indicator)
+   ========================================================================== */
+.stn-tabs__indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--stn-primary);
+  border-radius: var(--stn-radius-pill, 2px);
+  transition:
+    left 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    opacity 0.2s ease;
+}
+
+/* ==========================================================================
+   5. Scroll Buttons (.stn-tabs__scroll-button)
+   ========================================================================== */
+.stn-tabs__scroll-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stn-size-32, 32px);
+  height: 100%;
+  min-height: var(--stn-size-32, 32px);
+  background: transparent;
+  border: none;
+  color: var(--stn-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  outline: none;
+  z-index: 2;
+  transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
+  border-radius: var(--stn-radius-sm, 6px);
+}
+
+.stn-tabs__scroll-button:hover:not(:disabled) {
+  color: var(--stn-text-primary);
+  background-color: color-mix(in srgb, var(--stn-text-primary) 8%, transparent);
+}
+
+.stn-tabs__scroll-button:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.stn-tabs__scroll-button.start {
+  margin-right: var(--stn-space-2, 2px);
+}
+
+.stn-tabs__scroll-button.end {
+  margin-left: var(--stn-space-2, 2px);
+}
+
+/* Fade Edges when scrollable */
+.stn-tabs.is-scrollable.has-scroll-start .stn-tabs__scroller {
+  mask-image: linear-gradient(to right, transparent, black 28px, black 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black 100%);
+}
+
+.stn-tabs.is-scrollable.has-scroll-end .stn-tabs__scroller {
+  mask-image: linear-gradient(to left, transparent, black 28px, black 100%);
+  -webkit-mask-image: linear-gradient(to left, transparent, black 28px, black 100%);
+}
+
+.stn-tabs.is-scrollable.has-scroll-start.has-scroll-end .stn-tabs__scroller {
+  mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent 100%);
+}
+
+/* ==========================================================================
+   6. Tab Panel (.stn-tab-panel)
+   ========================================================================== */
+.stn-tab-panel {
+  box-sizing: border-box;
+  width: 100%;
+  outline: none;
+  animation: stn-tab-panel-fade-in 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.stn-tab-panel[hidden] {
+  display: none !important;
+}
+
+/* Padding Presets */
+.stn-tab-panel.padding-none {
+  padding: 0;
+}
+
+.stn-tab-panel.padding-sm {
+  padding: var(--stn-space-8, 8px);
+}
+
+.stn-tab-panel.padding-md {
+  padding: var(--stn-space-16, 16px);
+}
+
+.stn-tab-panel.padding-lg {
+  padding: var(--stn-space-24, 24px);
+}
+
+@keyframes stn-tab-panel-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -21,6 +21,15 @@
   overflow: hidden;
 }
 
+/* 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));
+}
+
 /* fullWidth prop 또는 부모 LNB 컨테이너 안에서 가로 100% 확장 지원 */
 .stn-section-side.is-full-width,
 .stn-section-side--full,

package/styles/style-pub.css

@@ -70,6 +70,7 @@
 @import './components/stn-card.css';
 @import './components/stn-topology.css';
 @import './components/stn-status.css';
+@import './components/stn-tabs.css';
 
 /* --- 5. Patterns (Composite UI Recipes) --- */
 @import './patterns/stn-section-side.css';

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

@@ -66,6 +66,8 @@
   --stn-input-placeholder: var(--stn-gray-600);
   --stn-dropdown-bg-translucent: var(--stn-opacity-black-25);
   --stn-label-prefix-label-bg: var(--stn-gray-800);
+  --stn-label-prefix-bg-translucent: var(--stn-opacity-black-60);
+  --stn-label-prefix-border-translucent: var(--stn-border-subtle);
   --stn-tooltip-bg-neutral: var(--stn-gray-700);
   --stn-tooltip-fg-neutral: var(--stn-static-white);
   --stn-tooltip-border-neutral: var(--stn-gray-600);
@@ -94,6 +96,8 @@
   --stn-login-field-fg: var(--stn-gray-50);
   --stn-login-field-placeholder: var(--stn-gray-500);
   --stn-checkbox-bg: var(--stn-gray-900);
+  --stn-checkbox-bg-translucent: var(--stn-opacity-black-60);
+  --stn-checkbox-border-translucent: var(--stn-border-subtle);
   --stn-checkbox-border: var(--stn-gray-650);
   --stn-checkbox-check: var(--stn-blue-350);
   --stn-checkbox-check-disabled: var(--stn-gray-500);
@@ -121,6 +125,8 @@
   --stn-tree-server-icon: var(--stn-gray-400);
   --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: var(--stn-gray-800);
   --stn-section-side-radius: 10px;
   --stn-section-side-shadow: none;
@@ -325,7 +331,7 @@
   --stn-progress-circle-accent-end: var(--stn-blue-300);
   --stn-progress-circle-teal-start: var(--stn-teal-400);
   --stn-progress-circle-teal-end: var(--stn-blue-400);
-  --stn-header-subtitle: var(--stn-gray-400);
+  --stn-header-subtitle: var(--stn-gray-300);
   --stn-system-chip-dot: var(--stn-blue-400);
   --stn-system-chip-dot-critical: var(--stn-red-400);
   --stn-system-chip-dot-major: var(--stn-orange-400);
@@ -349,6 +355,8 @@
   --stn-side-nav-gradient-icon-glow: var(--stn-cobalt-75);
   --stn-on-color: var(--stn-static-white);
   --stn-shade: var(--stn-gray-950);
+  --stn-tab-badge-bg: var(--stn-gray-700);
+  --stn-tab-badge-fg: var(--stn-text-tertiary);
   --stn-badge-subtle-bg: var(--stn-opacity-white-10);
   --stn-badge-error: var(--stn-red-350);
   --stn-badge-primary: var(--stn-blue-400);
@@ -661,6 +669,8 @@
   --stn-input-placeholder: var(--stn-gray-400);
   --stn-dropdown-bg-translucent: var(--stn-opacity-white-50);
   --stn-label-prefix-label-bg: var(--stn-gray-50);
+  --stn-label-prefix-bg-translucent: var(--stn-opacity-white-50);
+  --stn-label-prefix-border-translucent: var(--stn-border-subtle);
   --stn-label-prefix-divider: var(--stn-gray-200);
   --stn-label-prefix-label-color: var(--stn-gray-500);
   --stn-tooltip-bg-neutral: var(--stn-gray-600);
@@ -689,6 +699,8 @@
   --stn-login-field-fg: var(--stn-gray-900);
   --stn-login-field-placeholder: var(--stn-gray-400);
   --stn-checkbox-bg: var(--stn-static-white);
+  --stn-checkbox-bg-translucent: var(--stn-opacity-white-50);
+  --stn-checkbox-border-translucent: var(--stn-border-subtle);
   --stn-checkbox-border: var(--stn-gray-200);
   --stn-checkbox-check: var(--stn-blue-350);
   --stn-checkbox-check-disabled: var(--stn-gray-400);
@@ -716,6 +728,8 @@
   --stn-tree-server-icon: var(--stn-gray-400);
   --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: var(--stn-gray-25);
   --stn-section-side-radius: 8px;
   --stn-section-side-shadow: 0 3px 10px var(--stn-gray-75);
@@ -946,6 +960,8 @@
   --stn-side-nav-gradient-icon-glow: var(--stn-cobalt-75);
   --stn-on-color: var(--stn-static-white);
   --stn-shade: var(--stn-gray-950);
+  --stn-tab-badge-bg: var(--stn-gray-100);
+  --stn-tab-badge-fg: var(--stn-text-secondary);
   --stn-badge-subtle-bg: var(--stn-opacity-black-5);
   --stn-badge-error: var(--stn-red-500);
   --stn-badge-primary: var(--stn-blue-500);

package/styles/tokens/stn-colors.css

@@ -91,15 +91,15 @@
   --stn-blue-250: #5bc7fa;
   --stn-blue-300: #46bdf7;
   --stn-blue-350: #28b2f2;
-  --stn-blue-400: #00aeef;
-  --stn-blue-450: #009cda;
-  --stn-blue-500: #0089c2;
-  --stn-blue-550: #0077a8;
-  --stn-blue-600: #00638d;
-  --stn-blue-650: #005174;
-  --stn-blue-700: #003f5c;
-  --stn-blue-750: #002f46;
-  --stn-blue-800: #001f30;
+  --stn-blue-400: #0091ef;
+  --stn-blue-450: #008edb;
+  --stn-blue-500: #007fc5;
+  --stn-blue-550: #006fac;
+  --stn-blue-600: #005e92;
+  --stn-blue-650: #004c77;
+  --stn-blue-700: #00385d;
+  --stn-blue-750: #001f46;
+  --stn-blue-800: #00182f;
   --stn-cobalt-25: #f2f6ff;
   --stn-cobalt-50: #e6eeff;
   --stn-cobalt-75: #d9e5ff;

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

@@ -222,6 +222,9 @@
   --stn-header-breadcrumb-mobile-max-width: var(--stn-size-140);
   --stn-widget-translucent-blur: var(--stn-size-8);
   --stn-dropdown-translucent-blur: var(--stn-size-8);
+  --stn-section-side-translucent-blur: var(--stn-size-8);
+  --stn-label-prefix-translucent-blur: var(--stn-size-8);
+  --stn-checkbox-translucent-blur: var(--stn-size-4);
   --stn-widget-overlay-blur: var(--stn-size-4);
   --stn-widget-severity-blur: var(--stn-size-6);
   --stn-widget-dot-size: var(--stn-size-8);

package/dist/chunk-AVICAV6Z.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-AVICAV6Z.js.map

package/dist/chunk-JHRYIWWJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnSectionSide.ts"],"sourcesContent":["/**\n * Infomap section-side panel\n * Dark 40000040:102539 · Light 40000042:187762\n * @see StnSectionSide · stn-section-side.css\n */\n\nexport const STN_SECTION_SIDE_FIGMA = {\n  dark: '40000040:102539',\n  light: '40000042:187762',\n} as const\n\nexport const STN_SECTION_SIDE_INTRO =\n  '맵·대시보드 **사이드 패널** 패턴. Light: white · gray-25 border · radius 8 · shadow. Dark: gray-900 · gray-800 border · radius 10. 본문 `StnScroll` + `StnTree`.'\n\nexport const STN_SECTION_SIDE_SPEC = [\n  { property: 'Width', value: '264px', note: 'Figma frame' },\n  { property: 'Padding', value: '8px', note: '' },\n  {\n    property: 'Radius',\n    value: '`--stn-section-side-radius`',\n    note: 'light 8 · dark 10',\n  },\n  {\n    property: 'Background',\n    value: '`--stn-section-side-bg`',\n    note: 'light white · dark gray-900',\n  },\n  {\n    property: 'Border',\n    value: '`--stn-section-side-border`',\n    note: 'light gray-25 · dark gray-800',\n  },\n  {\n    property: 'Shadow',\n    value: '`--stn-section-side-shadow`',\n    note: 'light 0 3px 10px gray-75 · dark none',\n  },\n  { property: 'Body', value: 'StnScroll vertical', note: 'overflow tree' },\n  {\n    property: 'fill',\n    value: '`fill` prop → `.stn-section-side--fill`',\n    note: 'list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom',\n  },\n] as const\n\nexport const STN_SECTION_SIDE_USAGE = `import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>`\n"],"mappings":";AAMO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,IAAM,yBACX;AAEK,IAAM,wBAAwB;AAAA,EACnC,EAAE,UAAU,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,EACzD,EAAE,UAAU,WAAW,OAAO,OAAO,MAAM,GAAG;AAAA,EAC9C;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,EAAE,UAAU,QAAQ,OAAO,sBAAsB,MAAM,gBAAgB;AAAA,EACvE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/chunk-QQYDH4WU.js

@@ -1,9 +0,0 @@
-// src/data/stnPackageVersion.ts
-var STN_UI_VERSION = "0.1.68";
-var STN_UI_VERSION_LABEL = "v0.1.68";
-
-export {
-  STN_UI_VERSION,
-  STN_UI_VERSION_LABEL
-};
-//# sourceMappingURL=chunk-QQYDH4WU.js.map

package/dist/chunk-QQYDH4WU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.68'\nexport const STN_UI_VERSION_LABEL = 'v0.1.68'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}