@stn-uiux/pub-ui 0.1.63 → 0.1.65

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,8 @@
 /* ===== 2. Unified Scrollbar Base (.stn-scroll 단일화) ===== */
 /* Firefox 및 webkit-scrollbar 미지원 브라우저용 W3C 표준 Scrollbar 속성 */
 @supports not selector(::-webkit-scrollbar) {
-  .stn-scroll {
+  .stn-scroll,
+  .stn-dropdown > .select_option {
     scrollbar-width: thin;
     scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
   }
@@ -47,31 +48,39 @@
 }
 
 /* Chrome, Edge, Safari 등 WebKit / Chromium 기반 브라우저 세부 픽셀 스크롤바 */
-.stn-scroll::-webkit-scrollbar {
+.stn-scroll::-webkit-scrollbar,
+.stn-dropdown > .select_option::-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 {
   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 {
   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 {
   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 {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent !important;
 }
 
 /* ===== 3. StnScroll Container Base & Orientation ===== */

package/styles/components/stn-status.css

@@ -93,8 +93,8 @@
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-dot.lg .stn-status-dot__point {
-  width: var(--stn-size-9, 9px);
-  height: var(--stn-size-9, 9px);
+  width: var(--stn-size-10, 10px);
+  height: var(--stn-size-10, 10px);
 }
 .stn-status-dot.lg.bordered {
   height: var(--stn-size-28, 28px);
@@ -452,8 +452,11 @@
 }
 
 .stn-status-flow.no-border .stn-status-flow__step.is-current {
+  background-color: transparent;
+  border-color: transparent;
   box-shadow: none;
   font-weight: var(--stn-font-weight-bold, 700);
+  color: var(--stn-primary);
 }
 
 /* Size 스케일 — STN 표준 규격: xs · sm · md(기본) · lg · xl */
@@ -471,8 +474,8 @@
   border-radius: var(--stn-radius-2, 2px);
 }
 .stn-status-flow.xs .stn-status-flow__badge .stn-icon {
-  width: var(--stn-size-9, 9px);
-  height: var(--stn-size-9, 9px);
+  width: var(--stn-size-10, 10px);
+  height: var(--stn-size-10, 10px);
 }
 
 /* sm — 22px */
@@ -521,13 +524,13 @@
   border-radius: var(--stn-radius-4, 4px);
 }
 .stn-status-flow.lg .stn-status-flow__badge .stn-icon {
-  width: var(--stn-size-13, 13px);
-  height: var(--stn-size-13, 13px);
+  width: var(--stn-size-14, 14px);
+  height: var(--stn-size-14, 14px);
 }
 
-/* xl — 38px */
+/* xl — 36px */
 .stn-status-flow.xl .stn-status-flow__step {
-  height: var(--stn-size-38, 38px);
+  height: var(--stn-size-36, 36px);
   font-size: var(--stn-font-size-14, 14px);
   padding: 0 var(--stn-space-14, 14px) 0 var(--stn-space-6, 6px);
   gap: var(--stn-space-10, 10px);
@@ -539,8 +542,8 @@
   border-radius: var(--stn-radius-6, 6px);
 }
 .stn-status-flow.xl .stn-status-flow__badge .stn-icon {
-  width: var(--stn-size-15, 15px);
-  height: var(--stn-size-15, 15px);
+  width: var(--stn-size-16, 16px);
+  height: var(--stn-size-16, 16px);
 }
 
 /* Flow 단계별 배지 색상 */
@@ -566,7 +569,6 @@
 
 .stn-status-flow__step.is-current {
   border-color: var(--stn-primary);
-  box-shadow: var(--stn-status-flow-current-shadow);
 }
 
 .stn-status-flow__step.is-dimmed {

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) {