@stn-uiux/pub-ui 0.1.73 → 0.1.74

package/dist/{chunk-KLIYAEJA.js → chunk-2LRCGTKQ.js}

@@ -4,22 +4,12 @@ import {
 
 // src/data/stnChip.ts
 var STN_CHIP_BORDER_ACCENTS = [
-  { accent: "mint", descKo: "\uBBFC\uD2B8", cssBorder: "var(--stn-teal-300)", cssText: "var(--stn-teal-300)" },
-  { accent: "sky", descKo: "\uC2A4\uCE74\uC774", cssBorder: "var(--stn-blue-300)", cssText: "var(--stn-blue-300)" },
-  { accent: "violet", descKo: "\uBC14\uC774\uC62C\uB81B", cssBorder: "var(--stn-purple-300)", cssText: "var(--stn-purple-300)" },
-  {
-    accent: "orange",
-    descKo: "\uC624\uB80C\uC9C0",
-    cssBorder: "var(--stn-yellow-300)",
-    cssText: "var(--stn-yellow-300)"
-  },
-  {
-    accent: "yellow",
-    descKo: "\uC610\uB85C",
-    cssBorder: "var(--stn-yellow-300)",
-    cssText: "var(--stn-yellow-300)"
-  },
-  { accent: "gray", descKo: "\uADF8\uB808\uC774", cssBorder: "var(--stn-gray-350)", cssText: "var(--stn-gray-350)" }
+  { accent: "mint", descKo: "\uBBFC\uD2B8", className: "stn-chip--accent-mint" },
+  { accent: "sky", descKo: "\uC2A4\uCE74\uC774", className: "stn-chip--accent-sky" },
+  { accent: "violet", descKo: "\uBC14\uC774\uC62C\uB81B", className: "stn-chip--accent-violet" },
+  { accent: "orange", descKo: "\uC624\uB80C\uC9C0", className: "stn-chip--accent-orange" },
+  { accent: "yellow", descKo: "\uC610\uB85C", className: "stn-chip--accent-yellow" },
+  { accent: "gray", descKo: "\uADF8\uB808\uC774", className: "stn-chip--accent-gray" }
 ];
 var STN_CHIP_GRADE_LEGACY_CLASS = {
   critical: "critic",
@@ -76,4 +66,4 @@ export {
   STN_CHIP_USAGE_ROWS,
   STN_CHIP_GRADE_ROWS
 };
-//# sourceMappingURL=chunk-KLIYAEJA.js.map
+//# sourceMappingURL=chunk-2LRCGTKQ.js.map

package/dist/chunk-2LRCGTKQ.js.map

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

package/dist/{chunk-WN7FYFIO.js → chunk-AJLP3Y53.js}

@@ -2,12 +2,14 @@
 var STN_CARD_VARIANTS = ["flat", "outlined", "elevated"];
 var STN_CARD_RADII = ["sm", "md", "lg", "none"];
 var STN_CARD_PADDINGS = ["none", "sm", "md", "lg"];
+var STN_CARD_SEVERITIES = ["critical", "major", "minor", "warning"];
 var STN_CARD_INTRO = "\uCF58\uD150\uCE20\uB97C \uC2DC\uAC01\uC801\uC73C\uB85C \uADF8\uB8F9\uD654\uD558\uACE0 \uACC4\uCE35\uC744 \uBD80\uC5EC\uD558\uB294 \uD45C\uC900 \uC11C\uD53C\uC2A4(Surface) \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4. \uD50C\uB7AB, \uC544\uC6C3\uB77C\uC778, \uC5D8\uB9AC\uBCA0\uC774\uD2F0\uB4DC \uBCC0\uD615\uACFC \uB77C\uC6B4\uB4DC \uBC0F \uD328\uB529 \uADDC\uACA9\uC744 \uC81C\uACF5\uD558\uBA70, \uB2E8\uB3C5 \uD2C0\uB85C\uC11C \uD639\uC740 \uD5E4\uB354/\uBCF8\uBB38/\uD478\uD130 \uD569\uC131 \uAD6C\uC870\uB85C \uC720\uC5F0\uD558\uAC8C \uD65C\uC6A9\uB429\uB2C8\uB2E4.";
 
 export {
   STN_CARD_VARIANTS,
   STN_CARD_RADII,
   STN_CARD_PADDINGS,
+  STN_CARD_SEVERITIES,
   STN_CARD_INTRO
 };
-//# sourceMappingURL=chunk-WN7FYFIO.js.map
+//# sourceMappingURL=chunk-AJLP3Y53.js.map

package/dist/chunk-AJLP3Y53.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnCard.ts"],"sourcesContent":["export type StnCardVariant = 'flat' | 'outlined' | 'elevated'\nexport type StnCardRadius = 'sm' | 'md' | 'lg' | 'none'\nexport type StnCardPadding = 'none' | 'sm' | 'md' | 'lg'\nexport type StnCardSeverity = 'critical' | 'major' | 'minor' | 'warning'\n\nexport const STN_CARD_VARIANTS: readonly StnCardVariant[] = ['flat', 'outlined', 'elevated'] as const\nexport const STN_CARD_RADII: readonly StnCardRadius[] = ['sm', 'md', 'lg', 'none'] as const\nexport const STN_CARD_PADDINGS: readonly StnCardPadding[] = ['none', 'sm', 'md', 'lg'] as const\nexport const STN_CARD_SEVERITIES: readonly StnCardSeverity[] = ['critical', 'major', 'minor', 'warning'] as const\n\nexport const STN_CARD_INTRO =\n  '콘텐츠를 시각적으로 그룹화하고 계층을 부여하는 표준 서피스(Surface) 컨테이너 컴포넌트입니다. 플랫, 아웃라인, 엘리베이티드 변형과 라운드 및 패딩 규격을 제공하며, 단독 틀로서 혹은 헤더/본문/푸터 합성 구조로 유연하게 활용됩니다.'\n"],"mappings":";AAKO,IAAM,oBAA+C,CAAC,QAAQ,YAAY,UAAU;AACpF,IAAM,iBAA2C,CAAC,MAAM,MAAM,MAAM,MAAM;AAC1E,IAAM,oBAA+C,CAAC,QAAQ,MAAM,MAAM,IAAI;AAC9E,IAAM,sBAAkD,CAAC,YAAY,SAAS,SAAS,SAAS;AAEhG,IAAM,iBACX;","names":[]}

package/dist/chunk-DOD5KA5Y.js

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

package/dist/chunk-DOD5KA5Y.js.map

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

package/dist/{chunk-NB4NJQYE.js → chunk-YJLOIDKY.js}

@@ -3,41 +3,41 @@ var STN_TEXT_FIELD_FIGMA = "40000042:186898";
 var STN_TEXT_FIELD_INTRO = "Infomap \uAC80\uC0C9\xB7\uD544\uD130\uC6A9 **\uD14D\uC2A4\uD2B8 \uC785\uB825**\uC785\uB2C8\uB2E4. **outlined**(\uBC15\uC2A4, \uAE30\uBCF8) \xB7 **filled**(\uBA74) \xB7 **standard**(\uD558\uB2E8 \uB77C\uC778). Light filled = gray-50. Dark filled = gray-750. helperText\uB294 \uD558\uB2E8 \uC67C\uCABD \uCEA1\uC158. React `StnTextField` \xB7 Pub `.stn-text-field`.";
 var STN_TEXT_FIELD_SIZE_ROWS = [
   {
-    size: "S",
-    height: "24px",
-    radius: "4px (radius-4)",
-    fontSize: "13px",
-    paddingX: "10px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "sm",
+    height: "24px (var(--stn-size-sm))",
+    radius: "var(--stn-radius-sm, 4px)",
+    fontSize: "var(--stn-text-body-small-size, 13px)",
+    paddingX: "var(--stn-space-2, 8px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field sm",
     usedIn: "\uD14C\uC774\uBE14 \uC140 \xB7 \uC881\uC740 \uAC80\uC0C9"
   },
   {
-    size: "M",
-    height: "32px",
-    radius: "4px (radius-4)",
-    fontSize: "13px",
-    paddingX: "10px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "md",
+    height: "32px (var(--stn-size-md))",
+    radius: "var(--stn-radius-sm, 4px)",
+    fontSize: "var(--stn-text-body-small-size, 13px)",
+    paddingX: "var(--stn-space-3, 12px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field md",
     usedIn: "\uAC80\uC0C9\uC601\uC5ED \xB7 \uD544\uD130 \uAC12"
   },
   {
-    size: "L",
-    height: "40px",
-    radius: "6px (radius-6)",
-    fontSize: "14px",
-    paddingX: "12px",
-    typicalWidth: "width \uD504\uB9AC\uC14B \xB7 \uAE30\uBCF8 140px \xB7 fullWidth=100%",
+    size: "lg",
+    height: "40px (var(--stn-size-lg))",
+    radius: "var(--stn-radius-md, 6px)",
+    fontSize: "var(--stn-text-body-medium-size, 14px)",
+    paddingX: "var(--stn-space-4, 16px)",
+    typicalWidth: "width \uD504\uB9AC\uC14B (w80~w200) \xB7 fullWidth=100%",
     pubClass: "stn-text-field lg",
     usedIn: "\uAC15\uC870 \uAC80\uC0C9 \xB7 \uB113\uC740 \uB77C\uBCA8 \uC5F4"
   },
   {
-    size: "XL",
-    height: "56px",
-    radius: "16px (radius-16)",
-    fontSize: "14px",
-    paddingX: "16px",
+    size: "xl",
+    height: "56px (var(--stn-size-xl))",
+    radius: "var(--stn-radius-lg, 16px)",
+    fontSize: "var(--stn-text-body-medium-size, 14px)",
+    paddingX: "var(--stn-space-5, 20px)",
     typicalWidth: "fullWidth=100%",
     pubClass: "stn-text-field xl",
     usedIn: "\uB113\uC740 \uAC80\uC0C9 \xB7 \uAC15\uC870 \uC785\uB825"
@@ -70,4 +70,4 @@ export {
   STN_TEXT_FIELD_USAGE,
   STN_TEXT_FIELD_HTML
 };
-//# sourceMappingURL=chunk-NB4NJQYE.js.map
+//# sourceMappingURL=chunk-YJLOIDKY.js.map

package/dist/chunk-YJLOIDKY.js.map

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

package/dist/cli.js

@@ -1,6 +1,6 @@
 import {
   STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
+} from "./chunk-YJLOIDKY.js";
 import {
   STN_TOAST_REACT_USAGE
 } from "./chunk-SOEBXG3T.js";

package/dist/data/index.d.ts

@@ -61,7 +61,7 @@ export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTR
 export { 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, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './stnTree.js';
 export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './stnTypography.js';
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './stnCard.js';
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, 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';

package/dist/data/index.js

@@ -136,7 +136,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-Q363EBGR.js";
+} from "../chunk-DOD5KA5Y.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -229,8 +229,9 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "../chunk-WN7FYFIO.js";
+} from "../chunk-AJLP3Y53.js";
 import {
   STN_CHART_INTRO
 } from "../chunk-DGZVOSEM.js";
@@ -253,7 +254,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "../chunk-KLIYAEJA.js";
+} from "../chunk-2LRCGTKQ.js";
 import {
   STN_ALL_PALETTE_ROWS,
   STN_BLUE_SCALE,
@@ -298,7 +299,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "../chunk-NB4NJQYE.js";
+} from "../chunk-YJLOIDKY.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -585,6 +586,7 @@ export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS,
   STN_CDN_ASSET_BASE,
   STN_CHART_INTRO,

package/dist/data/stnCard.d.ts

@@ -1,9 +1,11 @@
 type StnCardVariant = 'flat' | 'outlined' | 'elevated';
 type StnCardRadius = 'sm' | 'md' | 'lg' | 'none';
 type StnCardPadding = 'none' | 'sm' | 'md' | 'lg';
+type StnCardSeverity = 'critical' | 'major' | 'minor' | 'warning';
 declare const STN_CARD_VARIANTS: readonly StnCardVariant[];
 declare const STN_CARD_RADII: readonly StnCardRadius[];
 declare const STN_CARD_PADDINGS: readonly StnCardPadding[];
+declare const STN_CARD_SEVERITIES: readonly StnCardSeverity[];
 declare const STN_CARD_INTRO = "\uCF58\uD150\uCE20\uB97C \uC2DC\uAC01\uC801\uC73C\uB85C \uADF8\uB8F9\uD654\uD558\uACE0 \uACC4\uCE35\uC744 \uBD80\uC5EC\uD558\uB294 \uD45C\uC900 \uC11C\uD53C\uC2A4(Surface) \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4. \uD50C\uB7AB, \uC544\uC6C3\uB77C\uC778, \uC5D8\uB9AC\uBCA0\uC774\uD2F0\uB4DC \uBCC0\uD615\uACFC \uB77C\uC6B4\uB4DC \uBC0F \uD328\uB529 \uADDC\uACA9\uC744 \uC81C\uACF5\uD558\uBA70, \uB2E8\uB3C5 \uD2C0\uB85C\uC11C \uD639\uC740 \uD5E4\uB354/\uBCF8\uBB38/\uD478\uD130 \uD569\uC131 \uAD6C\uC870\uB85C \uC720\uC5F0\uD558\uAC8C \uD65C\uC6A9\uB429\uB2C8\uB2E4.";
 
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, type StnCardPadding, type StnCardRadius, type StnCardVariant };
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, type StnCardPadding, type StnCardRadius, type StnCardSeverity, type StnCardVariant };

package/dist/data/stnCard.js

@@ -2,12 +2,14 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "../chunk-WN7FYFIO.js";
+} from "../chunk-AJLP3Y53.js";
 export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
 };
 //# sourceMappingURL=stnCard.js.map

package/dist/data/stnChip.d.ts

@@ -4,13 +4,12 @@ import './stnColorPalette.js';
 
 /** 등급 칩 — 알림센터 `.tag` · equip-search `.tag` · `error_tag` 와 동일 토큰 */
 type StnChipGrade = StnGradeKind;
-/** 테이블 `border_chip` accent (등급과 별도) */
+/** 테두리 액센트 칩 스케일 */
 type StnChipBorderAccent = 'mint' | 'sky' | 'violet' | 'orange' | 'yellow' | 'gray';
 declare const STN_CHIP_BORDER_ACCENTS: readonly {
     accent: StnChipBorderAccent;
     descKo: string;
-    cssBorder: string;
-    cssText: string;
+    className: string;
 }[];
 /** Pub HTML 레거시 modifier (`critic` = critical) */
 type StnChipLegacyGradeClass = 'critic' | 'major' | 'minor' | 'warning';

package/dist/data/stnChip.js

@@ -5,7 +5,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "../chunk-KLIYAEJA.js";
+} from "../chunk-2LRCGTKQ.js";
 import {
   STN_GRADE_SOURCE
 } from "../chunk-E26XJXQY.js";

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.73";
-declare const STN_UI_VERSION_LABEL = "v0.1.73";
+declare const STN_UI_VERSION = "0.1.74";
+declare const STN_UI_VERSION_LABEL = "v0.1.74";
 
 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-Q363EBGR.js";
+} from "../chunk-DOD5KA5Y.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnTextField.d.ts

@@ -2,8 +2,8 @@
  * Pub text input — Infomap `input` (Figma 40000042:186898)
  * @see common.css form inputs · StnTextField
  */
-/** S 24px · M 32px · L 40px · XL 56px */
-type StnTextFieldSize = 'S' | 'M' | 'L' | 'XL';
+/** sm (24px) · md (32px) · lg (40px) · xl (56px) */
+type StnTextFieldSize = 'sm' | 'md' | 'lg' | 'xl';
 declare const STN_TEXT_FIELD_FIGMA = "40000042:186898";
 declare const STN_TEXT_FIELD_INTRO = "Infomap \uAC80\uC0C9\u00B7\uD544\uD130\uC6A9 **\uD14D\uC2A4\uD2B8 \uC785\uB825**\uC785\uB2C8\uB2E4. **outlined**(\uBC15\uC2A4, \uAE30\uBCF8) \u00B7 **filled**(\uBA74) \u00B7 **standard**(\uD558\uB2E8 \uB77C\uC778). Light filled = gray-50. Dark filled = gray-750. helperText\uB294 \uD558\uB2E8 \uC67C\uCABD \uCEA1\uC158. React `StnTextField` \u00B7 Pub `.stn-text-field`.";
 declare const STN_TEXT_FIELD_SIZE_ROWS: readonly {

package/dist/data/stnTextField.js

@@ -5,7 +5,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "../chunk-NB4NJQYE.js";
+} from "../chunk-YJLOIDKY.js";
 export {
   STN_TEXT_FIELD_FIGMA,
   STN_TEXT_FIELD_HTML,

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTR
 export { 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, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './data/stnTree.js';
 export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './data/stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './data/stnTypography.js';
-export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './data/stnCard.js';
+export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, 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';

package/dist/index.js

@@ -141,7 +141,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-Q363EBGR.js";
+} from "./chunk-DOD5KA5Y.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -234,8 +234,9 @@ import {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS
-} from "./chunk-WN7FYFIO.js";
+} from "./chunk-AJLP3Y53.js";
 import {
   STN_CHART_INTRO
 } from "./chunk-DGZVOSEM.js";
@@ -258,7 +259,7 @@ import {
   STN_CHIP_INTRO,
   STN_CHIP_METRICS,
   STN_CHIP_USAGE_ROWS
-} from "./chunk-KLIYAEJA.js";
+} from "./chunk-2LRCGTKQ.js";
 import {
   STN_ALL_PALETTE_ROWS,
   STN_BLUE_SCALE,
@@ -303,7 +304,7 @@ import {
   STN_TEXT_FIELD_SIZE_ROWS,
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
-} from "./chunk-NB4NJQYE.js";
+} from "./chunk-YJLOIDKY.js";
 import {
   STN_TOAST_DEMO_MSG,
   STN_TOAST_ICON_SLUG,
@@ -590,6 +591,7 @@ export {
   STN_CARD_INTRO,
   STN_CARD_PADDINGS,
   STN_CARD_RADII,
+  STN_CARD_SEVERITIES,
   STN_CARD_VARIANTS,
   STN_CDN_ASSET_BASE,
   STN_CHART_INTRO,

package/package.json

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

package/styles/components/stn-breadcrumb.css

@@ -12,13 +12,13 @@
  */
 
 .stn-breadcrumb {
-  --stn-breadcrumb-gap: var(--stn-space-16, 16px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-14, 14px);
-  --stn-breadcrumb-icon-size: var(--stn-size-16, 16px);
-  --stn-breadcrumb-sep-size: var(--stn-size-12, 12px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-md, var(--stn-space-16, 16px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-md, var(--stn-space-8, 8px));
+  --stn-breadcrumb-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-md, var(--stn-size-16, 16px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-md, var(--stn-size-12, 12px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-md, var(--stn-size-24, 24px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-8, 8px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-md, var(--stn-space-8, 8px));
 
   box-sizing: border-box;
   color: var(--stn-breadcrumb-fg);
@@ -26,33 +26,33 @@
 }
 
 .stn-breadcrumb.sm {
-  --stn-breadcrumb-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-4, 4px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-12, 12px);
-  --stn-breadcrumb-icon-size: var(--stn-size-14, 14px);
-  --stn-breadcrumb-sep-size: var(--stn-size-10, 10px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-sm, var(--stn-space-8, 8px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-sm, var(--stn-space-4, 4px));
+  --stn-breadcrumb-font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-sm, var(--stn-size-14, 14px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-sm, var(--stn-size-10, 10px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-sm, var(--stn-size-20, 20px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-6, 6px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-sm, var(--stn-space-6, 6px));
 }
 
 .stn-breadcrumb.md {
-  --stn-breadcrumb-gap: var(--stn-space-16, 16px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-14, 14px);
-  --stn-breadcrumb-icon-size: var(--stn-size-16, 16px);
-  --stn-breadcrumb-sep-size: var(--stn-size-12, 12px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-md, var(--stn-space-16, 16px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-md, var(--stn-space-8, 8px));
+  --stn-breadcrumb-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-md, var(--stn-size-16, 16px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-md, var(--stn-size-12, 12px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-md, var(--stn-size-24, 24px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-8, 8px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-md, var(--stn-space-8, 8px));
 }
 
 .stn-breadcrumb.lg {
-  --stn-breadcrumb-gap: var(--stn-space-24, 24px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-12, 12px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-16, 16px);
-  --stn-breadcrumb-icon-size: var(--stn-size-18, 18px);
-  --stn-breadcrumb-sep-size: var(--stn-size-14, 14px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-lg, var(--stn-space-24, 24px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-lg, var(--stn-space-12, 12px));
+  --stn-breadcrumb-font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-lg, var(--stn-size-18, 18px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-lg, var(--stn-size-14, 14px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-lg, var(--stn-size-28, 28px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-12, 12px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-lg, var(--stn-space-12, 12px));
 }
 
 .stn-breadcrumb__list {
@@ -89,7 +89,7 @@
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: transparent;
   color: inherit;
   font: inherit;
@@ -131,8 +131,8 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 .stn-breadcrumb__segment:focus-visible,
 .stn-breadcrumb .collapsed:focus-visible,
 .stn-breadcrumb__back:focus-visible {
-  outline: 2px solid var(--stn-focus-ring);
-  outline-offset: 1px;
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, 1px);
 }
 
 .stn-breadcrumb__icon-glyph {
@@ -214,12 +214,12 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   z-index: var(--stn-dropdown-menu-z, 150);
   display: flex;
   flex-direction: column;
-  min-width: var(--stn-size-120, 120px);
+  min-width: var(--stn-input-w120, var(--stn-size-120, 120px));
   margin: 0;
   padding: var(--stn-space-4, 4px);
   list-style: none;
   border: 1px solid var(--stn-pop-border);
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: var(--stn-dropdown-menu-bg, var(--stn-pop-surface));
   box-shadow: var(--stn-pop-shadow);
 }
@@ -233,7 +233,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   margin: 0;
   padding: var(--stn-space-8, 8px);
   border: 0;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: transparent;
   color: var(--stn-pop-title, inherit);
   font: inherit;
@@ -313,7 +313,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   background: color-mix(in srgb, var(--stn-breadcrumb-fg) 16%, transparent);
 }
 
-/* Compact — 좁은 폭: 아이콘만 (라벨 숨김). 아이콘 없는 세그먼트는 라벨 유지 */
+/* Compact — STN Breakpoint md (1024px) 미만 좁은 화면: 아이콘만 (라벨 숨김). 아이콘 없는 세그먼트는 라벨 유지 */
 .stn-breadcrumb--icon-only .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
 .stn-breadcrumb--icon-only .stn-breadcrumb__back .stn-breadcrumb__label {
   position: absolute;
@@ -334,9 +334,10 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
 .stn-breadcrumb--icon-only.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
 .stn-breadcrumb--icon-only.chip .stn-breadcrumb__back {
-  padding-inline: var(--stn-space-6, 6px);
+  padding-inline: var(--stn-space-6);
 }
 
+/* STN Viewport Breakpoint md (1024px) 미만 기준 - CSS media query는 var() 미지원이므로 1023px 리터럴 명시 */
 @media (max-width: 1023px) {
   .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
   .stn-breadcrumb__back .stn-breadcrumb__label {
@@ -358,10 +359,11 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
   .stn-breadcrumb.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
   .stn-breadcrumb.chip .stn-breadcrumb__back {
-    padding-inline: var(--stn-space-6, 6px);
+    padding-inline: var(--stn-space-6);
   }
 }
 
+/* Container Query: stn-header 컨테이너 1024px(md) 미만 */
 @container stn-header (max-width: 1023px) {
   .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
   .stn-breadcrumb__back .stn-breadcrumb__label {
@@ -383,6 +385,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
   .stn-breadcrumb.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
   .stn-breadcrumb.chip .stn-breadcrumb__back {
-    padding-inline: var(--stn-space-6, 6px);
+    padding-inline: var(--stn-space-6);
   }
 }
+

package/styles/components/stn-card.css

@@ -31,6 +31,27 @@
   box-shadow: var(--stn-card-shadow);
 }
 
+/* Severity Tint Surfaces (critical · major · minor · warning) */
+.stn-card.severity-critical {
+  background-color: var(--stn-severity-critical-bg);
+  border: 1px solid var(--stn-severity-critical-border);
+}
+
+.stn-card.severity-major {
+  background-color: var(--stn-severity-major-bg);
+  border: 1px solid var(--stn-severity-major-border);
+}
+
+.stn-card.severity-minor {
+  background-color: var(--stn-severity-minor-bg);
+  border: 1px solid var(--stn-severity-minor-border);
+}
+
+.stn-card.severity-warning {
+  background-color: var(--stn-severity-warning-bg);
+  border: 1px solid var(--stn-severity-warning-border);
+}
+
 /* Radius */
 .stn-card.radius-sm { border-radius: var(--stn-radius-8, 8px); }
 .stn-card.radius-md { border-radius: var(--stn-radius-12, 12px); }
@@ -99,9 +120,9 @@
 }
 
 /* Card title size modifiers */
-.stn-card__header-title.sm { font-size: var(--stn-font-size-14, 14px); }
-.stn-card__header-title.md { font-size: var(--stn-font-size-16, 16px); }
-.stn-card__header-title.lg { font-size: var(--stn-font-size-18, 18px); }
+.stn-card__header-title.sm { font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px)); }
+.stn-card__header-title.md { font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px)); }
+.stn-card__header-title.lg { font-size: var(--stn-text-title-medium-size, var(--stn-font-size-18, 18px)); }
 
 /* Card title weight modifiers */
 .stn-card__header-title.regular { font-weight: var(--stn-font-weight-regular, 400); }

package/styles/components/stn-date-picker.css

@@ -16,7 +16,7 @@
   --calendar-disabled-font: var(--stn-date-picker-disabled-fg);
 
   position: fixed;
-  z-index: 1300;
+  z-index: var(--stn-elevation-z-dropdown);
   box-sizing: border-box;
   border: var(--stn-size-1) solid var(--calendar-border);
   border-radius: var(--stn-radius-8);