@stn-uiux/pub-ui 0.1.63 → 0.1.65

package/styles/components/stn-text-area.css

@@ -0,0 +1,375 @@
+@charset "utf-8";
+/**
+ * STN Pub TextArea (Figma Infomap multi-line input)
+ *
+ * StnTextField의 디자인 토큰과 스타일을 100% 계승하여 완벽한 시각적 일관성을 제공합니다.
+ *
+ * Variant: `.outlined` · `.filled` · `.standard` · `.transparent`
+ * Size: `.xs` · `.sm` · `.md` · `.lg` · `.xl`
+ * Width: `.w80` · `.w100` · `.w120` · `.w140` · `.w160` · `.w180` · `.w200` · `.full`
+ * Color: `.success` · `.error` · `.warning` · `.info`
+ * Resize: `.resize-none` · `.resize-vertical` · `.resize-horizontal` · `.resize-both`
+ * Wrap & Footer: `.stn-text-area-wrap` · `.stn-text-area__label` · `.stn-text-area__footer` · `.stn-text-area__helper` · `.stn-text-area__count`
+ */
+
+.stn-text-area {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  width: var(--stn-text-area-width, 100%);
+  min-width: var(--stn-text-area-min-width, 0);
+  max-width: 100%;
+  min-height: var(--stn-text-area-min-height, 80px);
+  padding: var(--stn-text-area-padding-y, var(--stn-space-8)) var(--stn-text-area-padding-x, var(--stn-space-10));
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  border-radius: var(--stn-text-area-radius, var(--stn-radius-input-md));
+  background-color: var(--stn-input-bg);
+  color: var(--stn-input-fg);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-area-font-size, var(--stn-text-body-small-size));
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-text-area-line-height, var(--stn-line-height-px-22));
+  outline: none;
+  resize: vertical;
+  appearance: none;
+  -webkit-appearance: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.stn-text-area::placeholder {
+  color: var(--stn-input-placeholder);
+  font-weight: var(--stn-font-weight-medium);
+}
+
+.stn-text-area:focus:not([readonly]) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-focus-bg, var(--stn-input-bg));
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-area[readonly] {
+  cursor: default;
+}
+
+.stn-text-area[readonly]:focus-visible {
+  outline: var(--stn-focus-ring-width, var(--stn-size-2)) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, var(--stn-size-2));
+}
+
+.stn-text-area:disabled {
+  cursor: not-allowed;
+  opacity: var(--stn-input-disabled-opacity);
+}
+
+/* ── 1. Variants ── */
+.stn-text-area.outlined {
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  background-color: var(--stn-input-bg);
+}
+
+.stn-text-area.filled {
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-filled-border, transparent);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+}
+
+.stn-text-area.filled:focus:not([readonly]) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-area.standard {
+  border: none;
+  border-bottom: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  border-radius: var(--stn-radius-0);
+  background-color: transparent;
+  padding-inline: 0;
+}
+
+.stn-text-area.standard:focus:not([readonly]) {
+  border: none;
+  border-bottom: var(--stn-input-focus);
+  background-color: transparent;
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-area.transparent {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.stn-text-area.transparent:focus:not([readonly]) {
+  border: none;
+  background-color: transparent;
+}
+
+/* ── 2. Invalid State ── */
+.stn-text-area[aria-invalid='true'],
+.stn-text-area.invalid {
+  border-color: var(--stn-feedback-error);
+}
+
+.stn-text-area.standard[aria-invalid='true'],
+.stn-text-area.standard.invalid {
+  border-color: transparent;
+  border-bottom-color: var(--stn-feedback-error);
+}
+
+.stn-text-area.transparent[aria-invalid='true'],
+.stn-text-area.transparent.invalid {
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-feedback-error);
+}
+
+.stn-text-area:is(.invalid, [aria-invalid='true']) {
+  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-feedback-error);
+  --stn-input-focus-fg: var(--stn-feedback-error);
+}
+
+/* ── 3. Color Tokens ── */
+.stn-text-area.success {
+  --stn-text-area-accent: var(--stn-feedback-success);
+}
+
+.stn-text-area.error {
+  --stn-text-area-accent: var(--stn-feedback-error);
+}
+
+.stn-text-area.warning {
+  --stn-text-area-accent: var(--stn-feedback-warning);
+}
+
+.stn-text-area.info {
+  --stn-text-area-accent: var(--stn-feedback-info);
+}
+
+.stn-text-area:is(.success, .error, .warning, .info) {
+  --stn-input-border: var(--stn-text-area-accent);
+  --stn-input-filled-border: var(--stn-text-area-accent);
+  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-text-area-accent);
+  --stn-input-focus-fg: var(--stn-text-area-accent);
+}
+
+/* ── 4. Width Presets (GEMINI.md Rule 3) ── */
+:is(.stn-text-area, .stn-text-area-wrap).w80 {
+  --stn-text-area-width: var(--stn-size-80, 80px);
+  width: var(--stn-size-80, 80px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w100 {
+  --stn-text-area-width: var(--stn-size-100, 100px);
+  width: var(--stn-size-100, 100px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w120 {
+  --stn-text-area-width: var(--stn-size-120, 120px);
+  width: var(--stn-size-120, 120px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w140 {
+  --stn-text-area-width: var(--stn-size-140, 140px);
+  width: var(--stn-size-140, 140px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w160 {
+  --stn-text-area-width: var(--stn-size-160, 160px);
+  width: var(--stn-size-160, 160px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w180 {
+  --stn-text-area-width: var(--stn-size-180, 180px);
+  width: var(--stn-size-180, 180px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).w200 {
+  --stn-text-area-width: var(--stn-size-200, 200px);
+  width: var(--stn-size-200, 200px);
+}
+
+:is(.stn-text-area, .stn-text-area-wrap).full {
+  --stn-text-area-width: 100%;
+  width: 100%;
+}
+
+/* ── 5. Size Presets (GEMINI.md Rule 1) ── */
+.stn-text-area.xs {
+  --stn-text-area-min-height: 56px;
+  --stn-text-area-padding-y: var(--stn-space-4);
+  --stn-text-area-padding-x: var(--stn-space-8);
+  --stn-text-area-radius: var(--stn-radius-input-sm, var(--stn-radius-4));
+  --stn-text-area-font-size: var(--stn-text-caption-medium-size);
+  --stn-text-area-line-height: var(--stn-line-height-px-18);
+}
+
+.stn-text-area.sm {
+  --stn-text-area-min-height: 64px;
+  --stn-text-area-padding-y: var(--stn-space-6);
+  --stn-text-area-padding-x: var(--stn-text-field-padding-x-sm, var(--stn-space-10));
+  --stn-text-area-radius: var(--stn-radius-input-sm, var(--stn-radius-4));
+  --stn-text-area-font-size: var(--stn-text-body-small-size);
+  --stn-text-area-line-height: var(--stn-line-height-px-20);
+}
+
+.stn-text-area.md {
+  --stn-text-area-min-height: 80px;
+  --stn-text-area-padding-y: var(--stn-space-8);
+  --stn-text-area-padding-x: var(--stn-text-field-padding-x-md, var(--stn-space-10));
+  --stn-text-area-radius: var(--stn-radius-input-md, var(--stn-radius-4));
+  --stn-text-area-font-size: var(--stn-text-body-small-size);
+  --stn-text-area-line-height: var(--stn-line-height-px-22);
+}
+
+.stn-text-area.lg {
+  --stn-text-area-min-height: 100px;
+  --stn-text-area-padding-y: var(--stn-space-10);
+  --stn-text-area-padding-x: var(--stn-text-field-padding-x-lg, var(--stn-space-12));
+  --stn-text-area-radius: var(--stn-radius-input-lg, var(--stn-radius-6));
+  --stn-text-area-font-size: var(--stn-text-body-medium-size);
+  --stn-text-area-line-height: var(--stn-line-height-px-24);
+}
+
+.stn-text-area.xl {
+  --stn-text-area-min-height: 120px;
+  --stn-text-area-padding-y: var(--stn-space-12);
+  --stn-text-area-padding-x: var(--stn-text-field-padding-x-xl, var(--stn-space-16));
+  --stn-text-area-radius: var(--stn-radius-input-xl, var(--stn-radius-16));
+  --stn-text-area-font-size: var(--stn-text-body-small-size);
+  --stn-text-area-line-height: var(--stn-line-height-px-24);
+}
+
+/* ── 6. Resize Options ── */
+.stn-text-area.resize-none {
+  resize: none;
+}
+
+.stn-text-area.resize-vertical {
+  resize: vertical;
+}
+
+.stn-text-area.resize-horizontal {
+  resize: horizontal;
+}
+
+.stn-text-area.resize-both {
+  resize: both;
+}
+
+/* ── 7. Wrap & Label & Footer Layout ── */
+.stn-text-area-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-shrink: 0;
+  width: var(--stn-text-area-width, 100%);
+  min-width: var(--stn-text-area-min-width, 0);
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.stn-text-area-wrap .stn-text-area {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.stn-text-area__label {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-body-small-size);
+  font-weight: var(--stn-font-weight-medium);
+  color: var(--stn-text-primary);
+  line-height: var(--stn-line-height-default);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.stn-text-area__label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-text-area__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: var(--stn-line-height-tight);
+}
+
+/* Top Label (기본 Column 배치) */
+.stn-text-area-wrap--col {
+  flex-direction: column;
+  gap: var(--stn-space-6);
+}
+
+.stn-text-area-wrap--col .stn-text-area-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Left / Right Label (Row 배치: 여러 줄 입력이므로 align-items: flex-start) */
+.stn-text-area-wrap--row {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--stn-space-12);
+}
+
+.stn-text-area-wrap--row .stn-text-area__label {
+  padding-top: var(--stn-space-8);
+}
+
+.stn-text-area-wrap--row .stn-text-area-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Footer: Helper Text (좌측) + Character Counter (우측) */
+.stn-text-area__footer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--stn-space-8);
+  margin: var(--stn-space-4) 0 0;
+  padding: 0;
+  width: 100%;
+}
+
+.stn-text-area__helper {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-caption-medium-size);
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-caption-medium-line-height);
+  color: var(--stn-text-secondary);
+  text-align: left;
+  word-break: break-word;
+}
+
+.stn-text-area__helper--error {
+  color: var(--stn-feedback-error);
+}
+
+.stn-text-area__count {
+  box-sizing: border-box;
+  margin: 0 0 0 auto;
+  padding: 0;
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-caption-medium-size);
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-caption-medium-line-height);
+  color: var(--stn-text-secondary);
+  white-space: nowrap;
+  user-select: none;
+}

package/styles/components/stn-tooltip.css

@@ -18,28 +18,6 @@
  * - `.stn-tooltip.no-arrow`: 말풍선 꼬리 숨김
  */
 
-:root,
-[data-theme='dark'] {
-  --stn-tooltip-bg-neutral: var(--stn-gray-700);
-  --stn-tooltip-fg-neutral: var(--stn-static-white);
-  --stn-tooltip-border-neutral: var(--stn-gray-600);
-  --stn-tooltip-outlined-fg-neutral: var(--stn-gray-100);
-  --stn-tooltip-shadow: var(--stn-shadow-3);
-  --stn-tooltip-radius: var(--stn-radius-tooltip, var(--stn-radius-6));
-  --stn-tooltip-border-width: var(--stn-size-1);
-  --stn-tooltip-z-index: 1000;
-  --stn-tooltip-blur: var(--stn-space-8);
-  --stn-tooltip-outlined-bg: var(--stn-opacity-black-60);
-}
-
-[data-theme='light'] {
-  --stn-tooltip-bg-neutral: var(--stn-gray-600);
-  --stn-tooltip-fg-neutral: var(--stn-static-white);
-  --stn-tooltip-border-neutral: var(--stn-gray-600);
-  --stn-tooltip-outlined-fg-neutral: var(--stn-gray-600);
-  --stn-tooltip-outlined-bg: var(--stn-opacity-white-60);
-}
-
 /* ==========================================================================
    1. Trigger Wrapper
    ========================================================================== */
@@ -57,12 +35,19 @@
 .stn-tooltip {
   --stn-tooltip-bg: var(--stn-tooltip-bg-neutral);
   --stn-tooltip-fg: var(--stn-tooltip-fg-neutral);
+  --stn-tooltip-shadow: var(--stn-shadow-tooltip, var(--stn-shadow-3));
+  --stn-tooltip-radius: var(--stn-radius-tooltip, var(--stn-radius-6));
+  --stn-tooltip-border-width: var(--stn-size-1);
+  --stn-tooltip-z-index: 1000;
+  --stn-tooltip-blur: var(--stn-space-8);
+  --stn-tooltip-offset: var(--stn-space-8);
   --stn-tooltip-font-size: var(--stn-text-caption-medium-size);
   --stn-tooltip-pad-y: var(--stn-space-4);
   --stn-tooltip-pad-x: var(--stn-space-8);
   --stn-tooltip-min-height: var(--stn-size-24);
   --stn-tooltip-arrow-size: var(--stn-size-6);
   --stn-tooltip-gap: var(--stn-space-4);
+  --stn-tooltip-offset: var(--stn-space-8);
 
   position: absolute;
   z-index: var(--stn-tooltip-z-index);
@@ -137,7 +122,7 @@
 /* Top (기본): 요소 위쪽, 아래쪽을 가리키는 꼬리 */
 .stn-tooltip.top,
 .stn-tooltip:not(.bottom):not(.left):not(.right) {
-  bottom: calc(100% + var(--stn-space-6));
+  bottom: calc(100% + var(--stn-tooltip-offset, var(--stn-space-8)));
   left: 50%;
   transform: translateX(-50%) translateY(var(--stn-space-4));
 }
@@ -160,7 +145,7 @@
 
 /* Bottom: 요소 아래쪽, 위쪽을 가리키는 꼬리 */
 .stn-tooltip.bottom {
-  top: calc(100% + var(--stn-space-6));
+  top: calc(100% + var(--stn-tooltip-offset, var(--stn-space-8)));
   left: 50%;
   transform: translateX(-50%) translateY(calc(-1 * var(--stn-space-4)));
 }
@@ -178,7 +163,7 @@
 
 /* Left: 요소 왼쪽, 오른쪽을 가리키는 꼬리 */
 .stn-tooltip.left {
-  right: calc(100% + var(--stn-space-6));
+  right: calc(100% + var(--stn-tooltip-offset, var(--stn-space-8)));
   top: 50%;
   transform: translateY(-50%) translateX(var(--stn-space-4));
 }
@@ -196,7 +181,7 @@
 
 /* Right: 요소 오른쪽, 왼쪽을 가리키는 꼬리 */
 .stn-tooltip.right {
-  left: calc(100% + var(--stn-space-6));
+  left: calc(100% + var(--stn-tooltip-offset, var(--stn-space-8)));
   top: 50%;
   transform: translateY(-50%) translateX(calc(-1 * var(--stn-space-4)));
 }

package/styles/layouts/stn-layer1-content.css

@@ -318,6 +318,20 @@
 /* ==========================================================================
    6. List view — 모바일/태블릿 반응형 (스크롤 & LNB/테이블 높이)
    ========================================================================== */
+/* LNB 헤더 행 & 타이틀 기본 공통 규격 (펼침/접힘 모두 space-between 기본 적용) */
+.stn-list-lnb__header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.stn-list-lnb__header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-8);
+}
+
 @media (max-width: 1279px) {
   /* 태블릿/모바일(column)에서는 본문 컨테이너가 스크롤되어 LNB -> 검색바 -> 테이블 순으로 전체 탐색 가능 */
   .stn-layer-1__body > .stn-container {
@@ -336,6 +350,17 @@
     flex-shrink: 0;
   }
 
+  /* 모바일(1280px 미만) 토글 버튼: 세로 아코디언 방향(위/아래)에 맞춰 90도 회전 */
+  .stn-list-lnb .stn-list-lnb__toggle-btn {
+    transform: rotate(90deg);
+    transition: transform 0.2s ease;
+  }
+
+  /* 모바일 펼침/접힘 모두 타이틀(좌측 끝)과 토글 버튼(우측 끝) 정렬 유지 */
+  .stn-list-lnb .stn-list-lnb__header-row {
+    justify-content: space-between !important;
+  }
+
   /* 모바일 접힘 시 아코디언 헤더만 표시 */
   .stn-list-lnb.is-collapsed {
     max-height: none;

package/styles/patterns/stn-alert-center.css

@@ -32,9 +32,6 @@
   --stn-alert-center-tab-pill-bg: var(--stn-gray-100);
   --stn-alert-center-tab-active-bg: var(--stn-static-white);
 
-  /* Scrollbar */
-  --stn-alert-center-scrollbar-thumb: var(--stn-border-subtle);
-  --stn-alert-center-scrollbar-width: var(--stn-size-6);
 
   /* List height */
   --stn-alert-center-list-height: 300px;
@@ -193,21 +190,31 @@
   padding: var(--stn-space-4) var(--stn-space-8) var(--stn-space-8);
   min-height: var(--stn-alert-center-list-height);
   max-height: var(--stn-alert-center-list-height);
+}
+
+/* StnScroll 미사용 순수 HTML용 fallback 스크롤 스타일 */
+.stn-alert-center__list-wrap:not(.stn-scroll) {
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--stn-scroll-thumb) transparent;
 }
 
-.stn-alert-center__list-wrap::-webkit-scrollbar {
-  width: var(--stn-alert-center-scrollbar-width);
+.stn-alert-center__list-wrap:not(.stn-scroll)::-webkit-scrollbar {
+  width: var(--stn-scroll-width-thin, 4px);
 }
 
-.stn-alert-center__list-wrap::-webkit-scrollbar-track {
+.stn-alert-center__list-wrap:not(.stn-scroll)::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.stn-alert-center__list-wrap::-webkit-scrollbar-thumb {
-  background: var(--stn-alert-center-scrollbar-thumb);
-  border-radius: var(--stn-radius-chip-pill);
+.stn-alert-center__list-wrap:not(.stn-scroll)::-webkit-scrollbar-thumb {
+  background: var(--stn-scroll-thumb);
+  border-radius: var(--stn-scroll-radius-thin, 2px);
+}
+
+.stn-alert-center__list-wrap:not(.stn-scroll)::-webkit-scrollbar-thumb:hover {
+  background: var(--stn-scroll-thumb-hover);
 }
 
 .stn-alert-center__list {

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

@@ -44,13 +44,6 @@
   min-height: 0;
   width: 100%;
   max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  /* list/tree LNB 스크롤바: thin (4px) — table 스크롤 규격과 완전 일치 */
-  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
-  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
-  scrollbar-width: thin;
-  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
 }
 
 

package/styles/style-pub.css

@@ -56,6 +56,7 @@
 @import './components/stn-loading-skeleton.css';
 @import './components/stn-search-requirement.css';
 @import './components/stn-text-field.css';
+@import './components/stn-text-area.css';
 @import './components/stn-label-prefix.css';
 @import './components/stn-segmented.css';
 @import './components/stn-toast.css';

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

@@ -67,6 +67,11 @@
   --stn-input-focus-fg: var(--stn-blue-300);
   --stn-input-placeholder: var(--stn-gray-600);
   --stn-label-prefix-label-bg: var(--stn-gray-800);
+  --stn-tooltip-bg-neutral: var(--stn-gray-700);
+  --stn-tooltip-fg-neutral: var(--stn-static-white);
+  --stn-tooltip-border-neutral: var(--stn-gray-600);
+  --stn-tooltip-outlined-fg-neutral: var(--stn-gray-100);
+  --stn-tooltip-outlined-bg: var(--stn-opacity-black-60);
   --stn-label-prefix-divider: var(--stn-gray-600);
   --stn-label-prefix-label-color: var(--stn-gray-400);
   --stn-input-disabled-opacity: 0.55;
@@ -115,7 +120,7 @@
   --stn-tree-label-server: var(--stn-gray-400);
   --stn-tree-selected: var(--stn-gray-800);
   --stn-tree-server-icon: var(--stn-gray-400);
-  --stn-scroll-thumb: var(--stn-gray-250);
+  --stn-scroll-thumb: var(--stn-gray-650);
   --stn-section-side-bg: var(--stn-gray-900);
   --stn-section-side-border: var(--stn-gray-800);
   --stn-section-side-radius: 10px;
@@ -286,6 +291,8 @@
   --stn-pop-shadow: 0 0 10px color-mix(in srgb, var(--stn-static-black) 100%, transparent);
   --stn-dropdown-menu-bg: var(--stn-gray-850);
   --stn-dropdown-menu-hover-bg: var(--stn-gray-800);
+  --stn-dropdown-menu-selected-bg: var(--stn-gray-800);
+  --stn-dropdown-menu-border: var(--stn-gray-700);
   --stn-dropdown-menu-blur: 4px;
   --stn-dropdown-menu-z: 150;
   --stn-icon-btn-fg: var(--stn-gray-50);
@@ -574,6 +581,24 @@
   --stn-event-banner-wr-shadow: 0 12px 36px var(--stn-opacity-black-85), inset 0 0 12px color-mix(in srgb, var(--stn-teal-400) 12%, transparent);
   --stn-event-banner-wr-blink-rest: 0 8px 32px var(--stn-opacity-black-70), inset 0 0 12px color-mix(in srgb, var(--stn-teal-400) 12%, transparent);
   --stn-event-banner-wr-blink-peak: 0 8px 32px var(--stn-opacity-black-70), inset 0 0 42px color-mix(in srgb, var(--stn-teal-400) 65%, transparent);
+  --stn-status-switch-bg: var(--stn-gray-900);
+  --stn-status-switch-border: var(--stn-gray-700);
+  --stn-status-switch-color: var(--stn-gray-400);
+  --stn-status-switch-badge-bg: var(--stn-gray-800);
+  --stn-status-switch-badge-color: var(--stn-gray-400);
+  --stn-status-switch-thumb-bg: var(--stn-gray-600);
+  --stn-status-switch-checked-border: var(--stn-blue-400);
+  --stn-status-switch-checked-bg: color-mix(in srgb, var(--stn-blue-500) 18%, var(--stn-gray-950));
+  --stn-status-switch-checked-color: var(--stn-blue-200);
+  --stn-status-switch-checked-badge-bg: var(--stn-blue-400);
+  --stn-status-switch-checked-badge-color: var(--stn-static-white);
+  --stn-status-switch-checked-thumb-bg: var(--stn-blue-300);
+  --stn-status-switch-checked-thumb-shadow: 0 0 6px var(--stn-blue-400);
+  --stn-status-flow-step-bg: var(--stn-gray-850);
+  --stn-status-flow-step-border: var(--stn-gray-700);
+  --stn-status-flow-step-color: var(--stn-gray-200);
+  --stn-status-flow-connector-color: var(--stn-gray-600);
+  --stn-status-flow-connector-opacity: 0.6;
 }
 
 [data-theme='light'] {
@@ -638,6 +663,11 @@
   --stn-label-prefix-label-bg: var(--stn-gray-50);
   --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);
+  --stn-tooltip-fg-neutral: var(--stn-static-white);
+  --stn-tooltip-border-neutral: var(--stn-gray-600);
+  --stn-tooltip-outlined-fg-neutral: var(--stn-gray-600);
+  --stn-tooltip-outlined-bg: var(--stn-opacity-white-60);
   --stn-input-disabled-opacity: 0.55;
   --stn-input-filled-bg: var(--stn-gray-50);
   --stn-input-filled-border: transparent;
@@ -684,7 +714,7 @@
   --stn-tree-label-server: var(--stn-gray-600);
   --stn-tree-selected: var(--stn-gray-100);
   --stn-tree-server-icon: var(--stn-gray-400);
-  --stn-scroll-thumb: var(--stn-gray-350);
+  --stn-scroll-thumb: var(--stn-gray-200);
   --stn-section-side-bg: var(--stn-static-white);
   --stn-section-side-border: var(--stn-gray-25);
   --stn-section-side-radius: 8px;
@@ -855,6 +885,8 @@
   --stn-pop-shadow: 0 0 12px color-mix(in srgb, var(--stn-static-black) 12%, transparent);
   --stn-dropdown-menu-bg: var(--stn-static-white);
   --stn-dropdown-menu-hover-bg: var(--stn-gray-100);
+  --stn-dropdown-menu-selected-bg: var(--stn-gray-100);
+  --stn-dropdown-menu-border: var(--stn-gray-200);
   --stn-dropdown-menu-blur: 4px;
   --stn-dropdown-menu-z: 150;
   --stn-icon-btn-fg: var(--stn-gray-800);
@@ -933,7 +965,7 @@
   --stn-badge-solid-warning: var(--stn-teal-500);
   --stn-badge-solid-neutral: var(--stn-gray-300);
   --stn-badge-solid-neutral-fg: var(--stn-static-white);
-  --stn-scroll-thumb-hover: var(--stn-gray-450);
+  --stn-scroll-thumb-hover: var(--stn-gray-300);
   --stn-scroll-track: var(--stn-opacity-black-5);
   --stn-scroll-thumb-primary: var(--stn-primary);
   --stn-scroll-thumb-primary-hover: var(--stn-blue-300);
@@ -1145,4 +1177,22 @@
   --stn-event-banner-wr-shadow: 0 12px 32px color-mix(in srgb, var(--stn-static-black) 14%, transparent), inset 0 0 16px color-mix(in srgb, var(--stn-teal-450) 12%, transparent);
   --stn-event-banner-wr-blink-rest: 0 8px 32px color-mix(in srgb, var(--stn-static-black) 14%, transparent), inset 0 0 16px color-mix(in srgb, var(--stn-teal-450) 12%, transparent);
   --stn-event-banner-wr-blink-peak: 0 8px 32px color-mix(in srgb, var(--stn-static-black) 14%, transparent), inset 0 0 42px color-mix(in srgb, var(--stn-teal-450) 65%, transparent);
+  --stn-status-switch-bg: var(--stn-gray-100);
+  --stn-status-switch-border: var(--stn-gray-300);
+  --stn-status-switch-color: var(--stn-gray-600);
+  --stn-status-switch-badge-bg: var(--stn-gray-200);
+  --stn-status-switch-badge-color: var(--stn-gray-600);
+  --stn-status-switch-thumb-bg: var(--stn-gray-400);
+  --stn-status-switch-checked-border: var(--stn-blue-500);
+  --stn-status-switch-checked-bg: color-mix(in srgb, var(--stn-blue-500) 10%, var(--stn-static-white));
+  --stn-status-switch-checked-color: var(--stn-blue-600);
+  --stn-status-switch-checked-badge-bg: var(--stn-blue-500);
+  --stn-status-switch-checked-badge-color: var(--stn-static-white);
+  --stn-status-switch-checked-thumb-bg: var(--stn-blue-500);
+  --stn-status-switch-checked-thumb-shadow: 0 0 4px color-mix(in srgb, var(--stn-blue-500) 50%, transparent);
+  --stn-status-flow-step-bg: var(--stn-gray-100);
+  --stn-status-flow-step-border: var(--stn-gray-300);
+  --stn-status-flow-step-color: var(--stn-gray-800);
+  --stn-status-flow-connector-color: var(--stn-gray-400);
+  --stn-status-flow-connector-opacity: 0.7;
 }

package/dist/chunk-A5KLX6NX.js

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