@stn-uiux/pub-ui 0.1.69 → 0.1.70

package/dist/chunk-7ONB2WVN.js

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

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/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,
@@ -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/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,
@@ -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.70",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

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/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

@@ -349,6 +349,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);
@@ -946,6 +948,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/dist/chunk-AVICAV6Z.js

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