@stn-uiux/pub-ui 0.1.78 → 0.1.80

package/dist/data/stnSystemIcons.js

@@ -4,10 +4,10 @@ import {
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-AHS3E6AS.js";
+} from "../chunk-U5K73762.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-AR7NYVE5.js";
+} from "../chunk-SAKMHUIL.js";
 export {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/dist/data/stnSystemIconsData.generated.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-AR7NYVE5.js";
+} from "../chunk-SAKMHUIL.js";
 export {
   SYSTEM_ICON_DATA_URLS
 };

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES,
 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_DIVIDER_INTRO, STN_DIVIDER_ORIENTATIONS, STN_DIVIDER_TEXT_ALIGNS, STN_DIVIDER_VARIANTS, StnDividerOrientation, StnDividerTextAlign, StnDividerVariant } from './data/stnDivider.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,10 @@ import {
   STN_UI_COMPONENTS,
   STN_UI_FOUNDATIONS
 } from "./chunk-N46UQH6L.js";
-import "./chunk-O77GW7PM.js";
+import "./chunk-WKQLAHIG.js";
+import {
+  STN_TEXT_COLOR_ROWS
+} from "./chunk-4HUY6TN4.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -31,13 +34,18 @@ import {
   typographyPrimitivesToJson,
   typographySemanticsToJson
 } from "./chunk-6FEWLKVE.js";
+import {
+  STN_SPACING_SEMANTIC_INTRO,
+  STN_SPACING_SEMANTIC_ROWS,
+  spacingSemanticToJson
+} from "./chunk-XBY73BTI.js";
 import {
   STN_SPACING_USECASE_INTRO,
   STN_SPACING_USECASE_ROWS
 } from "./chunk-AFDRRCY6.js";
 import {
   STN_STATUS_DEMO_STEPS
-} from "./chunk-SQJPE6HH.js";
+} from "./chunk-R6NCTORS.js";
 import "./chunk-7ONB2WVN.js";
 import {
   STN_TEXT_AREA_HTML,
@@ -47,14 +55,17 @@ import {
   STN_TEXT_AREA_USAGE
 } from "./chunk-VNQUWGQ7.js";
 import {
-  STN_TEXT_COLOR_ROWS
-} from "./chunk-4HUY6TN4.js";
+  STN_SEGMENTED_FIGMA,
+  STN_SEGMENTED_HTML,
+  STN_SEGMENTED_INTRO,
+  STN_SEGMENTED_USAGE
+} from "./chunk-TKS725I7.js";
 import {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-J5UYMTVQ.js";
+} from "./chunk-QIX7SYPC.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -75,10 +86,13 @@ import {
   spaceTokensToJson
 } from "./chunk-2TUC7FFY.js";
 import {
-  STN_SPACING_SEMANTIC_INTRO,
-  STN_SPACING_SEMANTIC_ROWS,
-  spacingSemanticToJson
-} from "./chunk-XBY73BTI.js";
+  STN_PROGRESS_BAR_PLAYGROUND_DEFAULT,
+  STN_PROGRESS_BAR_PLAYGROUND_PROPERTIES,
+  STN_PROGRESS_BAR_REACT_USAGE,
+  STN_PROGRESS_BAR_TONES,
+  STN_PROGRESS_BAR_USAGE_HTML,
+  describeProgressBarPlaygroundReact
+} from "./chunk-I677MVNJ.js";
 import {
   STN_RADIO_DEMO_OPTIONS,
   STN_RADIO_FIGMA,
@@ -112,12 +126,6 @@ import {
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
 } from "./chunk-RVYQ7WL3.js";
-import {
-  STN_SEGMENTED_FIGMA,
-  STN_SEGMENTED_HTML,
-  STN_SEGMENTED_INTRO,
-  STN_SEGMENTED_USAGE
-} from "./chunk-TKS725I7.js";
 import {
   STN_LOGIN_ASSETS,
   STN_LOGIN_FIGMA,
@@ -142,7 +150,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-GYPBZAB2.js";
+} from "./chunk-PSVPO4FH.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -156,13 +164,16 @@ import {
   STN_PAGINATION_REACT
 } from "./chunk-PE4ZB5QC.js";
 import {
-  STN_PROGRESS_BAR_PLAYGROUND_DEFAULT,
-  STN_PROGRESS_BAR_PLAYGROUND_PROPERTIES,
-  STN_PROGRESS_BAR_REACT_USAGE,
-  STN_PROGRESS_BAR_TONES,
-  STN_PROGRESS_BAR_USAGE_HTML,
-  describeProgressBarPlaygroundReact
-} from "./chunk-I677MVNJ.js";
+  STN_HEADER_TITLE_DEMO,
+  STN_HEADER_TITLE_FIGMA,
+  STN_HEADER_TITLE_FRAME,
+  STN_HEADER_TITLE_GRADIENT,
+  STN_HEADER_TITLE_HTML,
+  STN_HEADER_TITLE_INTRO,
+  STN_HEADER_TITLE_PARTS,
+  STN_HEADER_TITLE_SPEC_ROWS,
+  STN_HEADER_TITLE_USAGE
+} from "./chunk-7YNWSFGA.js";
 import {
   STN_ICONOGRAPHY_INTRO,
   STN_ICONOGRAPHY_PRIMITIVE_ROWS,
@@ -186,6 +197,12 @@ import {
   STN_LIST_TABLE_OPTION_ROWS,
   STN_LIST_TABLE_PAGE_SIZE_OPTIONS
 } from "./chunk-5DGK35SP.js";
+import {
+  STN_DIVIDER_INTRO,
+  STN_DIVIDER_ORIENTATIONS,
+  STN_DIVIDER_TEXT_ALIGNS,
+  STN_DIVIDER_VARIANTS
+} from "./chunk-W54SOSHJ.js";
 import {
   STN_ELEVATION_LAYER_BG_INTRO,
   STN_ELEVATION_LAYER_INTRO,
@@ -205,17 +222,6 @@ import {
   STN_GRADIENT_ROWS_DARK,
   STN_GRADIENT_ROWS_LIGHT
 } from "./chunk-BMMVI6IA.js";
-import {
-  STN_HEADER_TITLE_DEMO,
-  STN_HEADER_TITLE_FIGMA,
-  STN_HEADER_TITLE_FRAME,
-  STN_HEADER_TITLE_GRADIENT,
-  STN_HEADER_TITLE_HTML,
-  STN_HEADER_TITLE_INTRO,
-  STN_HEADER_TITLE_PARTS,
-  STN_HEADER_TITLE_SPEC_ROWS,
-  STN_HEADER_TITLE_USAGE
-} from "./chunk-7YNWSFGA.js";
 import {
   STN_BUTTON_ICON_ONLY_INTRO,
   STN_BUTTON_ICON_ONLY_ROWS,
@@ -298,36 +304,6 @@ 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,
-  STN_TOAST_INTRO,
-  STN_TOAST_KINDS,
-  STN_TOAST_REACT_USAGE,
-  STN_TOAST_SETUP,
-  STN_TOAST_TOKEN_ROWS,
-  STN_TOAST_USAGE_HTML
-} from "./chunk-SOEBXG3T.js";
-import {
-  STN_TREE_DEMO,
-  STN_TREE_FIGMA,
-  STN_TREE_INTRO,
-  STN_TREE_PARTS,
-  STN_TREE_PATTERN_PLAYGROUND_DEFAULT,
-  STN_TREE_PATTERN_PLAYGROUND_PROPERTIES,
-  STN_TREE_REACT_EXAMPLE,
-  STN_TREE_SECTION_SIDE_FIGMA,
-  STN_TREE_USAGE_HTML,
-  describeTreePatternReact
-} from "./chunk-AOS3IX4T.js";
 import {
   STN_ALERT_CENTER_DASHBOARD_USAGE,
   STN_ALERT_CENTER_DASHBOARD_WIDGETS,
@@ -360,6 +336,36 @@ import {
   resolveStnWidgetKindBodySlot,
   stnWidgetSampleUrl
 } from "./chunk-JBOXRPR7.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,
+  STN_TOAST_INTRO,
+  STN_TOAST_KINDS,
+  STN_TOAST_REACT_USAGE,
+  STN_TOAST_SETUP,
+  STN_TOAST_TOKEN_ROWS,
+  STN_TOAST_USAGE_HTML
+} from "./chunk-SOEBXG3T.js";
+import {
+  STN_TREE_DEMO,
+  STN_TREE_FIGMA,
+  STN_TREE_INTRO,
+  STN_TREE_PARTS,
+  STN_TREE_PATTERN_PLAYGROUND_DEFAULT,
+  STN_TREE_PATTERN_PLAYGROUND_PROPERTIES,
+  STN_TREE_REACT_EXAMPLE,
+  STN_TREE_SECTION_SIDE_FIGMA,
+  STN_TREE_USAGE_HTML,
+  describeTreePatternReact
+} from "./chunk-AOS3IX4T.js";
 import {
   STN_TABLE_EXAMPLE,
   STN_TABLE_EXAMPLE_HTML,
@@ -398,6 +404,13 @@ import {
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
 } from "./chunk-AE4CKAEK.js";
+import {
+  STN_LOADING_SKELETON_COLORS,
+  STN_LOADING_SKELETON_INTRO,
+  STN_LOADING_SKELETON_PARTS,
+  STN_LOADING_SKELETON_USAGE,
+  STN_LOADING_SKELETON_USAGE_HTML
+} from "./chunk-5BGXBJXN.js";
 import {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,
@@ -465,13 +478,6 @@ import {
   pubContentAreaClasses,
   pubLayoutRegionClass
 } from "./chunk-36QC3ZAD.js";
-import {
-  STN_LOADING_SKELETON_COLORS,
-  STN_LOADING_SKELETON_INTRO,
-  STN_LOADING_SKELETON_PARTS,
-  STN_LOADING_SKELETON_USAGE,
-  STN_LOADING_SKELETON_USAGE_HTML
-} from "./chunk-5BGXBJXN.js";
 import {
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,
@@ -490,7 +496,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-YRZXP3U5.js";
+} from "./chunk-ONXZQ5LE.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -540,17 +546,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-LEAQPPMM.js";
+} from "./chunk-JFTEZMSS.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-AHS3E6AS.js";
+} from "./chunk-U5K73762.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-AR7NYVE5.js";
+} from "./chunk-SAKMHUIL.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,
@@ -629,6 +635,10 @@ export {
   STN_DATE_RANGE_FIELD_NAME,
   STN_DATE_RANGE_FIELD_SIZE_ROWS,
   STN_DATE_RANGE_FIELD_USAGE,
+  STN_DIVIDER_INTRO,
+  STN_DIVIDER_ORIENTATIONS,
+  STN_DIVIDER_TEXT_ALIGNS,
+  STN_DIVIDER_VARIANTS,
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,
   STN_DROPDOWN_INTRO,

package/package.json

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

package/styles/@assets/svg/system/line/topology-ai.svg

@@ -0,0 +1,21 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5 12.5L9.5 10L8 7L6.5 10L5.5 12.5M6.5 10H9.5" stroke="currentColor"/>
+  <path d="M12.5 6V12.5" stroke="currentColor"/>
+  <rect x="2.5" y="2.5" width="14" height="14" rx="1" stroke="currentColor"/>
+  <path d="M2.5 5H0" stroke="currentColor"/>
+  <path d="M19 5H16.5" stroke="currentColor"/>
+  <path d="M14 2.5L14 0" stroke="currentColor"/>
+  <path d="M14 19L14 16.5" stroke="currentColor"/>
+  <path d="M2.5 8H0" stroke="currentColor"/>
+  <path d="M19 8H16.5" stroke="currentColor"/>
+  <path d="M11 2.5L11 0" stroke="currentColor"/>
+  <path d="M11 19L11 16.5" stroke="currentColor"/>
+  <path d="M2.5 11H0" stroke="currentColor"/>
+  <path d="M19 11H16.5" stroke="currentColor"/>
+  <path d="M8 2.5L8 0" stroke="currentColor"/>
+  <path d="M8 19L8 16.5" stroke="currentColor"/>
+  <path d="M2.5 14H0" stroke="currentColor"/>
+  <path d="M19 14H16.5" stroke="currentColor"/>
+  <path d="M5 2.5L5 0" stroke="currentColor"/>
+  <path d="M5 19L5 16.5" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-chart.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="8.5" width="3" height="7" stroke="currentColor"/>
+  <rect x="5.5" y="4.5" width="3" height="11" stroke="currentColor"/>
+  <rect x="10.5" y="0.5" width="3" height="15" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-cluster.svg

@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 8.07715L18.3301 10.5771V15.5771L14 18.0771L9.66987 15.5771V10.5771L14 8.07715Z" stroke="currentColor"/>
+  <path d="M5 8.07715L9.33013 10.5771V15.5771L5 18.0771L0.669873 15.5771V10.5771L5 8.07715Z" stroke="currentColor"/>
+  <path d="M9.5 0.577148L13.8301 3.07715V8.07715L9.5 10.5771L5.16987 8.07715V3.07715L9.5 0.577148Z" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-cube.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.5 5.19605L8.5 9.81494M8.5 19.196L16.5002 15.196V5.19605L8.5 0.577148L0.5 5.19605V15.196L8.5 19.196ZM8.5 9.81494L16.5002 5.19605M8.5 9.81494V19.196" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-firewall.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0.400391C9.33333 1.40039 12.8 3.40039 16 3.40039V13.9004C14.8333 16.0671 11.6 20.4004 8 20.4004M8.5 0.400391C7.16667 1.40039 3.7 3.40039 0.5 3.40039V13.9004C1.66667 16.0671 4.9 20.4004 8.5 20.4004" stroke="currentColor"/>
+  <rect x="5.25" y="8.40039" width="6" height="6" rx="1" stroke="currentColor"/>
+  <path d="M6.75 8.40039V6.40039C6.75 5.90039 7.05 4.90039 8.25 4.90039C9.45 4.90039 9.75 5.90039 9.75 6.40039V8.40039" stroke="currentColor"/>
+  <path d="M8.25 10.4004V12.4004" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-layers.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 9.81485L1 5.19604L9 0.577148L17 5.19604L9 9.81485Z" stroke="currentColor"/>
+  <path d="M9 14.3148L1 9.69604L9 5.07715L17 9.69604L9 14.3148Z" stroke="currentColor"/>
+  <path d="M9 19.3148L1 14.696L9 10.0771L17 14.696L9 19.3148Z" stroke="currentColor"/>
+</svg>

package/styles/@assets/svg/system/line/topology-server.svg

@@ -0,0 +1,14 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="13" height="5" stroke="currentColor"/>
+  <rect x="0.5" y="5.5" width="13" height="5" stroke="currentColor"/>
+  <rect x="0.5" y="10.5" width="13" height="5" stroke="currentColor"/>
+  <rect x="3.25" y="2.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="3.25" y="7.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="3.25" y="12.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="8.25" y="2.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="8.25" y="7.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="8.25" y="12.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="10.25" y="2.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="10.25" y="7.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+  <rect x="10.25" y="12.75" width="0.5" height="0.5" stroke="currentColor" stroke-width="0.5"/>
+</svg>

package/styles/@assets/svg/system/line/topology-wifi.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.46387 7.5C3.46387 7.5 4.46387 5 8.46387 5C12.4639 5 13.4639 7.5 13.4639 7.5" stroke="currentColor" stroke-linecap="round"/>
+  <path d="M0.463867 4.5C0.463867 4.5 2.06387 0.5 8.46387 0.5C14.8639 0.5 16.4639 4.5 16.4639 4.5" stroke="currentColor" stroke-linecap="round"/>
+  <circle cx="8.46387" cy="11" r="1" stroke="currentColor" fill="currentColor"/>
+</svg>

package/styles/components/stn-divider.css

@@ -0,0 +1,153 @@
+@charset "utf-8";
+/**
+ * STN Components — StnDivider
+ *
+ * 표준 1px 구분선 컴포넌트:
+ * - 가로/세로 방향 (orientation: 'horizontal' | 'vertical')
+ * - 레이아웃 변형 (variant: 'fullWidth' | 'inset' | 'middle')
+ * - Flex 컨테이너 높이 맞춤 (flexItem)
+ * - 텍스트/칩 내장 및 정렬 (with-children, textAlign: 'left' | 'center' | 'right')
+ * - li 태그 다형성 대응 (list-style: none)
+ */
+
+.stn-divider {
+  margin: 0;
+  flex-shrink: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--stn-divider-border);
+  box-sizing: border-box;
+}
+
+/* li 태그로 렌더링될 때 기본 불릿 제거 */
+li.stn-divider {
+  list-style: none;
+}
+
+/* ==========================================================================
+   1. Horizontal Divider (가로 구분선, 기본값)
+   ========================================================================== */
+
+.stn-divider--horizontal {
+  display: block;
+  width: 100%;
+  border-bottom-width: var(--stn-divider-thickness);
+}
+
+/* 1-1. Full Width (기본) */
+.stn-divider--horizontal.stn-divider--full-width {
+  width: 100%;
+}
+
+/* 1-2. Inset (좌측 시작 인덴트) */
+.stn-divider--horizontal.stn-divider--inset {
+  margin-left: var(--stn-divider-inset-margin);
+  width: calc(100% - var(--stn-divider-inset-margin));
+}
+
+/* 1-3. Middle (양쪽 여백 인덴트) */
+.stn-divider--horizontal.stn-divider--middle {
+  margin-left: var(--stn-divider-middle-margin);
+  margin-right: var(--stn-divider-middle-margin);
+  width: calc(100% - (var(--stn-divider-middle-margin) * 2));
+}
+
+/* ==========================================================================
+   2. Vertical Divider (세로 구분선)
+   ========================================================================== */
+
+.stn-divider--vertical {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  min-height: var(--stn-divider-vertical-height);
+  border-right-width: var(--stn-divider-thickness);
+  vertical-align: middle;
+}
+
+/* 2-1. Vertical Inset */
+.stn-divider--vertical.stn-divider--inset {
+  margin-top: var(--stn-space-16);
+  height: calc(100% - var(--stn-space-16));
+}
+
+/* 2-2. Vertical Middle */
+.stn-divider--vertical.stn-divider--middle {
+  margin-top: var(--stn-space-8);
+  margin-bottom: var(--stn-space-8);
+  height: calc(100% - (var(--stn-space-8) * 2));
+}
+
+/* 2-3. flexItem (Flex 부모 내 자동 세로 스트레칭) */
+.stn-divider--vertical.stn-divider--flex-item,
+.stn-divider--flex-item {
+  align-self: stretch;
+  height: auto;
+}
+
+/* ==========================================================================
+   3. Divider with Children (텍스트 / 칩 내장)
+   ========================================================================== */
+
+.stn-divider--with-children {
+  display: flex;
+  align-items: center;
+  border: 0;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.stn-divider--with-children::before,
+.stn-divider--with-children::after {
+  content: '';
+  border-top: var(--stn-divider-thickness) solid var(--stn-divider-border);
+}
+
+/* 3-1. Text Align Center */
+.stn-divider--text-center::before,
+.stn-divider--text-center::after {
+  flex: 1 1 0%;
+}
+
+/* 3-2. Text Align Left */
+.stn-divider--text-left::before {
+  flex: 0 0 var(--stn-divider-text-offset);
+}
+
+.stn-divider--text-left::after {
+  flex: 1 1 0%;
+}
+
+/* 3-3. Text Align Right */
+.stn-divider--text-right::before {
+  flex: 1 1 0%;
+}
+
+.stn-divider--text-right::after {
+  flex: 0 0 var(--stn-divider-text-offset);
+}
+
+/* 3-4. Inset / Middle 적용 시 with-children 너비 보정 */
+.stn-divider--with-children.stn-divider--inset {
+  margin-left: var(--stn-divider-inset-margin);
+  width: calc(100% - var(--stn-divider-inset-margin));
+}
+
+.stn-divider--with-children.stn-divider--middle {
+  margin-left: var(--stn-divider-middle-margin);
+  margin-right: var(--stn-divider-middle-margin);
+  width: calc(100% - (var(--stn-divider-middle-margin) * 2));
+}
+
+/* 3-5. 라벨 / 칩 래퍼 */
+.stn-divider__wrapper {
+  display: inline-flex;
+  align-items: center;
+  padding-left: var(--stn-divider-text-gap);
+  padding-right: var(--stn-divider-text-gap);
+  font-family: var(--stn-font-family);
+  font-size: var(--stn-text-caption-size, 12px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  color: var(--stn-text-muted);
+  line-height: var(--stn-text-caption-line-height, 1.4);
+}

package/styles/components/stn-segmented.css

@@ -69,6 +69,38 @@
   flex: 1 1 0%;
 }
 
+/* ==========================================================================
+   Width Presets (.w80 ~ .w200) — STN 4대 표준 규격
+   컨테이너 지정 너비 내에서 아이템들이 균등(flex: 1 1 0%)하게 분할 배치됩니다.
+   ========================================================================== */
+.stn-segmented.w80 { width: var(--stn-size-80, 80px); }
+.stn-segmented.w100 { width: var(--stn-size-100, 100px); }
+.stn-segmented.w120 { width: var(--stn-size-120, 120px); }
+.stn-segmented.w140 { width: var(--stn-size-140, 140px); }
+.stn-segmented.w160 { width: var(--stn-size-160, 160px); }
+.stn-segmented.w180 { width: var(--stn-size-180, 180px); }
+.stn-segmented.w200 { width: var(--stn-size-200, 200px); }
+
+.stn-segmented.w80,
+.stn-segmented.w100,
+.stn-segmented.w120,
+.stn-segmented.w140,
+.stn-segmented.w160,
+.stn-segmented.w180,
+.stn-segmented.w200 {
+  display: inline-flex;
+}
+
+.stn-segmented.w80 .stn-segmented__item,
+.stn-segmented.w100 .stn-segmented__item,
+.stn-segmented.w120 .stn-segmented__item,
+.stn-segmented.w140 .stn-segmented__item,
+.stn-segmented.w160 .stn-segmented__item,
+.stn-segmented.w180 .stn-segmented__item,
+.stn-segmented.w200 .stn-segmented__item {
+  flex: 1 1 0%;
+}
+
 /* Segmented Item */
 .stn-segmented__item {
   box-sizing: border-box;

package/styles/components/stn-status.css

@@ -219,6 +219,59 @@
   box-shadow: 0 0 6px var(--stn-feedback-error);
 }
 
+.stn-status-dot.normal .stn-status-dot__point {
+  background-color: var(--stn-text-muted);
+}
+
+/* Colorize Text (점과 글자 색상 일치) */
+.stn-status-dot.colorize-text.critical,
+.stn-status-dot.colorize-text.critical .stn-status-dot__label {
+  color: var(--stn-grade-critical);
+}
+.stn-status-dot.colorize-text.major,
+.stn-status-dot.colorize-text.major .stn-status-dot__label {
+  color: var(--stn-grade-major);
+}
+.stn-status-dot.colorize-text.minor,
+.stn-status-dot.colorize-text.minor .stn-status-dot__label {
+  color: var(--stn-grade-minor);
+}
+.stn-status-dot.colorize-text.warning,
+.stn-status-dot.colorize-text.warning .stn-status-dot__label {
+  color: var(--stn-grade-warning);
+}
+.stn-status-dot.colorize-text.up,
+.stn-status-dot.colorize-text.up .stn-status-dot__label {
+  color: var(--stn-primary);
+}
+.stn-status-dot.colorize-text.normal,
+.stn-status-dot.colorize-text.normal .stn-status-dot__label {
+  color: var(--stn-text-muted);
+}
+.stn-status-dot.colorize-text.normal .stn-status-dot__point {
+  background-color: var(--stn-text-muted);
+}
+.stn-status-dot.colorize-text.success,
+.stn-status-dot.colorize-text.success .stn-status-dot__label {
+  color: var(--stn-feedback-success);
+}
+.stn-status-dot.colorize-text.error,
+.stn-status-dot.colorize-text.error .stn-status-dot__label {
+  color: var(--stn-feedback-error);
+}
+.stn-status-dot.colorize-text.info,
+.stn-status-dot.colorize-text.info .stn-status-dot__label {
+  color: var(--stn-feedback-info);
+}
+.stn-status-dot.colorize-text.down,
+.stn-status-dot.colorize-text.down .stn-status-dot__label {
+  color: var(--stn-gray-550);
+}
+.stn-status-dot.colorize-text.neutral,
+.stn-status-dot.colorize-text.neutral .stn-status-dot__label {
+  color: var(--stn-gray-400);
+}
+
 /* 펄스 애니메이션 */
 .stn-status-dot.pulse .stn-status-dot__point {
   animation: stn-status-pulse 1.8s infinite;