@stn-uiux/pub-ui 0.1.64 → 0.1.66

package/package.json

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

package/styles/components/stn-dropdown.css

@@ -70,14 +70,6 @@
   font-size: var(--stn-text-body-small-size);
 }
 
-.stn-dropdown.sm.on>.selected {
-  border-radius: var(--stn-radius-dropdown-sm) var(--stn-radius-dropdown-sm) 0 0;
-}
-
-.stn-dropdown.sm>.select_option {
-  border-radius: 0 0 var(--stn-radius-dropdown-sm) var(--stn-radius-dropdown-sm);
-}
-
 .stn-dropdown.sm>.select_option>li {
   height: var(--stn-dropdown-height-sm);
   line-height: var(--stn-line-height-px-22);
@@ -93,14 +85,6 @@
   font-size: var(--stn-text-body-small-size);
 }
 
-.stn-dropdown.md.on>.selected {
-  border-radius: var(--stn-radius-dropdown-md) var(--stn-radius-dropdown-md) 0 0;
-}
-
-.stn-dropdown.md>.select_option {
-  border-radius: 0 0 var(--stn-radius-dropdown-md) var(--stn-radius-dropdown-md);
-}
-
 .stn-dropdown.md>.select_option>li {
   height: var(--stn-dropdown-height-md);
   line-height: var(--stn-line-height-px-30);
@@ -116,14 +100,6 @@
   font-size: var(--stn-text-body-medium-size);
 }
 
-.stn-dropdown.lg.on>.selected {
-  border-radius: var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg) 0 0;
-}
-
-.stn-dropdown.lg>.select_option {
-  border-radius: 0 0 var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg);
-}
-
 .stn-dropdown.lg>.select_option>li {
   height: var(--stn-dropdown-height-lg);
   line-height: var(--stn-line-height-px-38);
@@ -143,14 +119,6 @@
   font-size: var(--stn-text-body-large-size, 15px);
 }
 
-.stn-dropdown.xl.on>.selected {
-  border-radius: var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg) 0 0;
-}
-
-.stn-dropdown.xl>.select_option {
-  border-radius: 0 0 var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg);
-}
-
 .stn-dropdown.xl>.select_option>li {
   height: var(--stn-dropdown-height-xl);
   line-height: var(--stn-line-height-px-54);
@@ -497,7 +465,7 @@
 }
 
 /* ==========================================================================
-   8. Options Popup (select_option & li items)
+   8. Options Popup (select_option & li items) — Modern 8px Floating Card
    ========================================================================== */
 .stn-dropdown>.select_option {
   display: none;
@@ -505,17 +473,21 @@
   left: 0;
   top: 100%;
   width: 100%;
-  margin: 0;
-  padding: 0;
+  min-width: 100%;
+  margin: var(--stn-space-4, 4px) 0 0 0;
+  padding: var(--stn-space-4, 4px);
   list-style: none;
   box-sizing: border-box;
-  background-color: var(--stn-dropdown-menu-bg, var(--stn-input-bg));
-  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
+  background-color: var(--stn-dropdown-menu-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-dropdown-menu-border, var(--stn-input-border));
+  border-radius: var(--stn-radius-8, 8px) !important;
   z-index: var(--stn-dropdown-menu-z, 150);
   box-shadow: var(--stn-dropdown-menu-shadow);
   max-height: 220px;
   overflow-y: auto;
   overflow-x: hidden;
+  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
 }
 
 .stn-dropdown.on>.select_option {
@@ -525,30 +497,53 @@
 .stn-dropdown>.select_option>li {
   display: flex;
   align-items: center;
-  padding: 4px 8px;
+  gap: var(--stn-space-6, 6px);
+  padding: var(--stn-space-6, 6px) var(--stn-space-8, 8px);
+  border-radius: var(--stn-radius-4, 4px);
   box-sizing: border-box;
-  color: var(--stn-input-fg, var(--stn-text-primary));
+  font-size: var(--stn-text-body-small-size, 13px);
+  line-height: var(--stn-line-height-tight, 1.4);
+  color: var(--stn-text-primary);
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  transition: background-color var(--stn-motion-duration-fast, 150ms) ease;
+  transition: background-color var(--stn-motion-duration-fast, 150ms) ease,
+    color var(--stn-motion-duration-fast, 150ms) ease;
 }
 
 .stn-dropdown>.select_option>li:hover,
 .stn-dropdown>.select_option>li.is-active,
 .stn-dropdown>.select_option>li.active {
-  background-color: var(--stn-dropdown-menu-hover-bg, var(--stn-table-row-hover));
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  color: var(--stn-text-primary);
 }
 
 .stn-dropdown>.select_option>li.is-selected,
 .stn-dropdown>.select_option>li.selected {
-  background-color: var(--stn-table-row-selected);
-  font-weight: var(--stn-font-weight-bold);
+  background-color: var(--stn-dropdown-menu-selected-bg);
+  font-weight: var(--stn-font-weight-medium, 500);
+  color: var(--stn-text-primary);
+}
+
+.stn-dropdown__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
   color: var(--stn-primary);
 }
 
+.stn-dropdown__item-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .stn-dropdown>.select_option>li.is-disabled,
 .stn-dropdown>.select_option>li[aria-disabled='true'] {
   opacity: 0.4;
@@ -565,63 +560,13 @@
 .stn-table .stn-table__footer .stn-dropdown>.select_option {
   top: auto;
   bottom: 100%;
-  border-top: var(--stn-size-1, 1px) solid var(--stn-input-border);
-  border-bottom: none;
+  margin-top: 0;
+  margin-bottom: var(--stn-space-4, 4px);
+  border: var(--stn-size-1, 1px) solid var(--stn-dropdown-menu-border, var(--stn-input-border));
+  border-radius: var(--stn-radius-8, 8px) !important;
   box-shadow: var(--stn-dropdown-menu-shadow-flip);
 }
 
-.stn-dropdown.up.on>.selected,
-.stn-dropdown.stn-table__page-size.on>.selected,
-.stn-table .stn-table__footer .stn-dropdown.on>.selected {
-  border-top: none;
-  border-bottom: var(--stn-size-1, 1px) solid var(--stn-input-border);
-}
-
-.stn-dropdown.up.sm>.select_option,
-.stn-table .stn-table__footer .stn-dropdown.sm>.select_option {
-  border-radius: var(--stn-radius-dropdown-sm) var(--stn-radius-dropdown-sm) 0 0;
-}
-
-.stn-dropdown.up.sm.on>.selected,
-.stn-table .stn-table__footer .stn-dropdown.sm.on>.selected {
-  border-radius: 0 0 var(--stn-radius-dropdown-sm) var(--stn-radius-dropdown-sm);
-}
-
-.stn-dropdown.up.md>.select_option,
-.stn-table .stn-table__footer .stn-dropdown.md>.select_option {
-  border-radius: var(--stn-radius-dropdown-md) var(--stn-radius-dropdown-md) 0 0;
-}
-
-.stn-dropdown.up.md.on>.selected,
-.stn-table .stn-table__footer .stn-dropdown.md.on>.selected {
-  border-radius: 0 0 var(--stn-radius-dropdown-md) var(--stn-radius-dropdown-md);
-}
-
-.stn-dropdown.up.lg>.select_option,
-.stn-table .stn-table__footer .stn-dropdown.lg>.select_option {
-  border-radius: var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg) 0 0;
-}
-
-.stn-dropdown.up.lg.on>.selected,
-.stn-table .stn-table__footer .stn-dropdown.lg.on>.selected {
-  border-radius: 0 0 var(--stn-radius-dropdown-lg) var(--stn-radius-dropdown-lg);
-}
-
-.stn-dropdown.up.xl>.select_option {
-  border-radius: var(--stn-radius-dropdown-prominent) var(--stn-radius-dropdown-prominent) 0 0;
-}
-
-.stn-dropdown.up.xl.on>.selected {
-  border-radius: 0 0 var(--stn-radius-dropdown-prominent) var(--stn-radius-dropdown-prominent);
-}
-
-/* 9-2. Z-Index & Elevation Safeguards */
-.search_area:has(.stn-dropdown.on),
-.stn-page-scaffold__search:has(.stn-dropdown.on) {
-  position: relative;
-  z-index: var(--stn-dropdown-menu-z, 150) !important;
-}
-
 .stn-search-requirement:has(.stn-dropdown.on),
 .stn-search-requirement__fields:has(.stn-dropdown.on),
 .stn-label-prefix:has(.stn-dropdown.on) {

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

@@ -53,16 +53,9 @@
   position: relative;
 }
 
-.stn-label-prefix .stn-dropdown > .select_option {
-  top: 100%;
-  border-top: none;
-  border-radius: 0 0 var(--stn-radius-input-md, 4px) var(--stn-radius-input-md, 4px);
-}
 
-.stn-label-prefix:has(.stn-dropdown.on) {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
+
+
 
 /* ==========================================================================
    2. Label Area

package/styles/components/stn-scroll.css

@@ -24,7 +24,9 @@
 /* ===== 2. Unified Scrollbar Base (.stn-scroll 단일화) ===== */
 /* Firefox 및 webkit-scrollbar 미지원 브라우저용 W3C 표준 Scrollbar 속성 */
 @supports not selector(::-webkit-scrollbar) {
-  .stn-scroll {
+  .stn-scroll,
+  .stn-dropdown > .select_option,
+  .stn-side-nav__menu {
     scrollbar-width: thin;
     scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
   }
@@ -47,31 +49,45 @@
 }
 
 /* Chrome, Edge, Safari 등 WebKit / Chromium 기반 브라우저 세부 픽셀 스크롤바 */
-.stn-scroll::-webkit-scrollbar {
+.stn-scroll::-webkit-scrollbar,
+.stn-dropdown > .select_option::-webkit-scrollbar,
+.stn-side-nav__menu::-webkit-scrollbar {
   width: var(--stn-scroll-width);
   height: var(--stn-scroll-width);
   background: var(--stn-scroll-track);
 }
 
-.stn-scroll::-webkit-scrollbar-track {
+.stn-scroll::-webkit-scrollbar-track,
+.stn-dropdown > .select_option::-webkit-scrollbar-track,
+.stn-side-nav__menu::-webkit-scrollbar-track {
   background: var(--stn-scroll-track);
   border-radius: 99px;
 }
 
-.stn-scroll::-webkit-scrollbar-thumb {
+.stn-scroll::-webkit-scrollbar-thumb,
+.stn-dropdown > .select_option::-webkit-scrollbar-thumb,
+.stn-side-nav__menu::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb);
   border-radius: var(--stn-scroll-radius);
 }
 
-.stn-scroll::-webkit-scrollbar-thumb:hover {
+.stn-scroll::-webkit-scrollbar-thumb:hover,
+.stn-dropdown > .select_option::-webkit-scrollbar-thumb:hover,
+.stn-side-nav__menu::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-hover);
 }
 
 /* OS 스크롤바 화살표 버튼은 항상 숨긴다. */
-.stn-scroll::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
+.stn-scroll::-webkit-scrollbar-button,
+.stn-scroll::-webkit-scrollbar-button:single-button,
+.stn-dropdown > .select_option::-webkit-scrollbar-button,
+.stn-dropdown > .select_option::-webkit-scrollbar-button:single-button,
+.stn-side-nav__menu::-webkit-scrollbar-button,
+.stn-side-nav__menu::-webkit-scrollbar-button:single-button {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent !important;
 }
 
 /* ===== 3. StnScroll Container Base & Orientation ===== */

package/styles/components/stn-side-nav.css

@@ -196,34 +196,8 @@ box-sizing: border-box;
   padding: var(--stn-side-nav-menu-padding);
   overflow-y: auto;
   overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar {
-  width: var(--stn-side-nav-scroll-width, 4px);
-  height: var(--stn-side-nav-scroll-width, 4px);
-  background: var(--stn-scroll-track, transparent);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-track {
-  background: var(--stn-scroll-track, transparent);
-  border-radius: var(--stn-radius-full);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-thumb {
-  background: var(--stn-scroll-thumb);
-  border-radius: var(--stn-side-nav-scroll-radius, 2px);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-thumb:hover {
-background: var(--stn-scroll-thumb-hover);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-button {
-display: none;
-  width: 0;
-  height: 0;
+  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
 }
 
 .stn-side-nav__group {

package/styles/components/stn-table.css

@@ -16,40 +16,11 @@
 }
 
 .stn-table__scroll {
-  overflow-x: auto;
   position: relative;
-  /* STN 표준 슬림 스크롤 (thin 4px) 규격 연동 */
-  --stn-scroll-width: var(--stn-scroll-width-thin);
-  --stn-scroll-radius: var(--stn-scroll-radius-thin);
-  scrollbar-width: thin;
-  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
 }
 
-.stn-table__scroll::-webkit-scrollbar {
-  width: var(--stn-scroll-width-thin);
-  height: var(--stn-scroll-width-thin);
-  background: var(--stn-scroll-track);
-}
 
-.stn-table__scroll::-webkit-scrollbar-track {
-  background: var(--stn-scroll-track);
-  border-radius: var(--stn-radius-circle);
-}
 
-.stn-table__scroll::-webkit-scrollbar-thumb {
-  background: var(--stn-scroll-thumb);
-  border-radius: var(--stn-scroll-radius-thin);
-}
-
-.stn-table__scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--stn-scroll-thumb-hover);
-}
-
-.stn-table__scroll::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
 
 /* List view — StnTable `fill` · content_box 남은 높이에 스크롤 영역 채움 */
 .content_box:has(> .stn-table--fill) {

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/tokens/stn-colors-semantic.css

@@ -120,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;
@@ -291,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);
@@ -367,7 +369,7 @@
   --stn-badge-solid-warning: var(--stn-teal-400);
   --stn-badge-solid-neutral: var(--stn-gray-600);
   --stn-badge-solid-neutral-fg: var(--stn-gray-100);
-  --stn-scroll-thumb-hover: var(--stn-gray-200);
+  --stn-scroll-thumb-hover: var(--stn-gray-550);
   --stn-scroll-track: var(--stn-opacity-white-5);
   --stn-scroll-thumb-primary: var(--stn-primary);
   --stn-scroll-thumb-primary-hover: var(--stn-blue-300);
@@ -712,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;
@@ -883,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);
@@ -961,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);
@@ -1180,7 +1184,7 @@
   --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-bg: 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);