@stn-uiux/pub-ui 0.1.57 → 0.1.59

package/styles/components/stn-dropdown.css

@@ -34,19 +34,19 @@
 .stn-dropdown>.selected {
   position: relative;
   z-index: 2;
-  display: block !important;
+  display: block;
   width: 100%;
   box-sizing: border-box;
   padding-right: 36px;
-  border: 1px solid var(--stn-input-border);
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
   background-color: var(--stn-input-bg);
   color: var(--stn-input-fg, var(--stn-text-primary));
   font-weight: var(--stn-font-weight-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  -webkit-line-clamp: unset !important;
-  -webkit-box-orient: unset !important;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: unset;
   transition: border-color var(--stn-motion-duration-fast, 150ms) ease,
     background-color var(--stn-motion-duration-fast, 150ms) ease;
 }
@@ -57,13 +57,15 @@
 
 /* ==========================================================================
    2. Prop: size (sm · md · lg · xl)
+   표준 통일 스케일: sm(24px) · md(32px, 기본값) · lg(40px) · xl(56px)
+   8px 그리드 — TextField / Button / ToggleButton과 완벽 정렬
    ========================================================================== */
 
 /* 2-1. Size sm (24px) */
 .stn-dropdown.sm>.selected {
-  height: var(--stn-dropdown-height-sm) !important;
+  height: var(--stn-dropdown-height-sm);
   line-height: var(--stn-line-height-px-22);
-  padding: 0 28px 0 10px;
+  padding: 0 24px 0 10px;
   border-radius: var(--stn-radius-dropdown-sm);
   font-size: var(--stn-text-body-small-size);
 }
@@ -84,9 +86,9 @@
 
 /* 2-2. Size md (32px — 기본값) */
 .stn-dropdown.md>.selected {
-  height: var(--stn-dropdown-height-md) !important;
+  height: var(--stn-dropdown-height-md);
   line-height: var(--stn-line-height-px-30);
-  padding: 0 36px 0 12px;
+  padding: 0 28px 0 12px;
   border-radius: var(--stn-radius-dropdown-md);
   font-size: var(--stn-text-body-small-size);
 }
@@ -107,7 +109,7 @@
 
 /* 2-3. Size lg (40px) */
 .stn-dropdown.lg>.selected {
-  height: var(--stn-dropdown-height-lg) !important;
+  height: var(--stn-dropdown-height-lg);
   line-height: var(--stn-line-height-px-38);
   padding: 0 36px 0 12px;
   border-radius: var(--stn-radius-dropdown-lg);
@@ -128,30 +130,30 @@
   font-size: var(--stn-text-body-medium-size);
 }
 
-/* 2-4. Size xl (52px — Prominent) */
+/* 2-4. Size xl (56px) */
 .stn-dropdown.xl:not(.w80):not(.w100):not(.w120):not(.w140):not(.w160):not(.w180):not(.w200):not(.full) {
   width: 200px;
 }
 
 .stn-dropdown.xl>.selected {
-  height: var(--stn-dropdown-height-prominent, 52px) !important;
-  line-height: var(--stn-line-height-px-50, 50px);
+  height: var(--stn-dropdown-height-xl);
+  line-height: var(--stn-line-height-px-54);
   padding: 0 36px 0 14px;
-  border-radius: var(--stn-radius-dropdown-prominent, 8px);
+  border-radius: var(--stn-radius-dropdown-lg);
   font-size: var(--stn-text-body-large-size, 15px);
 }
 
 .stn-dropdown.xl.on>.selected {
-  border-radius: var(--stn-radius-dropdown-prominent) var(--stn-radius-dropdown-prominent) 0 0;
+  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-prominent) var(--stn-radius-dropdown-prominent);
+  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-prominent);
-  line-height: var(--stn-line-height-px-50);
+  height: var(--stn-dropdown-height-xl);
+  line-height: var(--stn-line-height-px-54);
   font-size: var(--stn-text-body-large-size);
 }
 
@@ -161,14 +163,14 @@
 
 /* 3-1. Outline (기본값 — 전체 테두리 박스) */
 .stn-dropdown.outline>.selected {
-  border: 1px solid var(--stn-input-border);
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
   background-color: var(--stn-input-bg);
 }
 
 /* 3-2. Standard (하단 밑줄 라인만 하나) */
 .stn-dropdown.standard>.selected {
   border: none;
-  border-bottom: 1px solid var(--stn-input-border);
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-input-border);
   border-radius: 0;
   background-color: transparent;
   padding-left: 2px;
@@ -180,11 +182,29 @@
 
 /* 3-3. Filled (라인 없이 배경 채움 — 토큰 연동: 다크 gray-750 / 라이트 gray-50) */
 .stn-dropdown.filled>.selected {
-  border: 1px solid var(--stn-input-filled-border, transparent);
+  border: var(--stn-size-1, 1px) solid var(--stn-input-filled-border, transparent);
   background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
   color: var(--stn-input-fg, var(--stn-text-primary));
 }
 
+/* 3-4. Transparent (테두리·배경 없음 — StnLabelPrefix 등 래퍼 내부 조합용) */
+.stn-dropdown.transparent>.selected {
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+.stn-dropdown.transparent.on>.selected,
+.stn-dropdown.transparent:focus-within>.selected {
+  border: none;
+  background: transparent;
+}
+
+.stn-dropdown.transparent.is-error>.selected,
+.stn-dropdown.transparent[aria-invalid='true']>.selected {
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-feedback-error);
+}
+
 /* ==========================================================================
    4. Prop: state (Normal · Focus/Open · Disabled · Error · ReadOnly)
    ========================================================================== */
@@ -214,7 +234,7 @@
 
 .stn-dropdown.filled.on>.selected,
 .stn-dropdown.filled:focus-within>.selected {
-  border: 1px solid var(--stn-input-focus-fg);
+  border: var(--stn-size-1, 1px) solid var(--stn-input-focus-fg);
 }
 
 /* 4-2. Disabled State (.is-disabled, [aria-disabled='true']) */
@@ -244,7 +264,7 @@
 /* 4-4. ReadOnly State (.is-readonly, [aria-readonly='true']) */
 .stn-dropdown.is-readonly>.selected,
 .stn-dropdown[aria-readonly='true']>.selected {
-  cursor: default !important;
+  cursor: default;
   pointer-events: none;
   background-color: var(--stn-dropdown-readonly-bg);
   opacity: 0.85;
@@ -282,7 +302,7 @@
 }
 
 .stn-dropdown.full {
-  width: 100% !important;
+  width: 100%;
   display: block;
 }
 
@@ -297,12 +317,110 @@
   box-sizing: border-box;
 }
 
-.stn-dropdown-field--full,
-.stn-dropdown-wrap--full {
-  display: flex;
+/* Width Presets (GEMINI.md 표준: w80~w200, full) */
+:is(.stn-dropdown, .stn-dropdown-wrap).w80 {
+  width: var(--stn-size-80, 80px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w100 {
+  width: var(--stn-size-100, 100px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w120 {
+  width: var(--stn-size-120, 120px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w140 {
+  width: var(--stn-size-140, 140px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w160 {
+  width: var(--stn-size-160, 160px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w180 {
+  width: var(--stn-size-180, 180px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap).w200 {
+  width: var(--stn-size-200, 200px);
+}
+:is(.stn-dropdown, .stn-dropdown-wrap):is(.full, .stn-dropdown-wrap--full, .stn-dropdown-field--full, .w100p) {
   width: 100%;
 }
 
+/* Label & Wrap Container Layout */
+.stn-dropdown-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-shrink: 0;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.stn-dropdown-wrap .stn-dropdown {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.stn-dropdown-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Row Layout (Left/Right Label) */
+.stn-dropdown-wrap--row {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--stn-space-8, 8px);
+}
+
+.stn-dropdown-wrap--row .stn-dropdown-wrap__body {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+/* Column Layout (Top Label) */
+.stn-dropdown-wrap--col {
+  flex-direction: column;
+  gap: var(--stn-space-6, 6px);
+}
+
+.stn-dropdown-wrap--col .stn-dropdown-wrap__body {
+  width: 100%;
+}
+
+/* Label Styles */
+.stn-dropdown__label {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4, 4px);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-body-small-size, 12px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  color: var(--stn-text-primary);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.stn-dropdown__label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-dropdown__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: 1;
+  margin-inline-start: var(--stn-space-2, 2px);
+}
+
+/* Legacy helper field backward compatibility */
 .stn-dropdown-field--pos-bottom,
 .stn-dropdown-wrap--bottom {
   flex-direction: column;
@@ -317,13 +435,6 @@
   gap: var(--stn-space-4, 4px);
 }
 
-.stn-dropdown-field--pos-bottom>.stn-dropdown,
-.stn-dropdown-wrap--bottom>.stn-dropdown,
-.stn-dropdown-field--pos-top>.stn-dropdown,
-.stn-dropdown-wrap--top>.stn-dropdown {
-  width: 100%;
-}
-
 .stn-dropdown-field--pos-left,
 .stn-dropdown-wrap--left {
   flex-direction: row-reverse;
@@ -345,13 +456,14 @@
   color: var(--stn-dropdown-helper);
   word-break: break-word;
   white-space: nowrap;
+  margin-top: var(--stn-space-4, 4px);
 }
 
 .stn-dropdown-field.is-error .stn-dropdown-field__helper,
 .stn-dropdown-field__helper--error,
 .stn-dropdown-wrap.is-error .stn-dropdown__helper,
 .stn-dropdown__helper--error {
-  color: var(--stn-feedback-error) !important;
+  color: var(--stn-feedback-error);
 }
 
 /* ==========================================================================
@@ -398,7 +510,7 @@
   list-style: none;
   box-sizing: border-box;
   background-color: var(--stn-dropdown-menu-bg, var(--stn-input-bg));
-  border: 1px solid var(--stn-input-border);
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
   z-index: var(--stn-dropdown-menu-z, 150);
   box-shadow: var(--stn-dropdown-menu-shadow);
   max-height: 220px;
@@ -453,7 +565,7 @@
 .stn-table .stn-table__footer .stn-dropdown>.select_option {
   top: auto;
   bottom: 100%;
-  border-top: 1px solid var(--stn-input-border);
+  border-top: var(--stn-size-1, 1px) solid var(--stn-input-border);
   border-bottom: none;
   box-shadow: var(--stn-dropdown-menu-shadow-flip);
 }
@@ -461,8 +573,8 @@
 .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 !important;
-  border-bottom: 1px solid var(--stn-input-border) !important;
+  border-top: none;
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-input-border);
 }
 
 .stn-dropdown.up.sm>.select_option,
@@ -504,16 +616,23 @@
 }
 
 /* 9-2. Z-Index & Elevation Safeguards */
-.search_area:has(.stn-dropdown.on) {
+.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) {
-  overflow: visible;
+.stn-search-requirement:has(.stn-dropdown.on),
+.stn-search-requirement__fields:has(.stn-dropdown.on),
+.stn-label-prefix:has(.stn-dropdown.on) {
+  overflow: visible !important;
+  position: relative;
+  z-index: var(--stn-dropdown-menu-z, 150) !important;
 }
 
-.stn-content-area>.stn-page-scaffold:has(> .search_area .stn-dropdown.on)>.content_box {
+.stn-content-area>.stn-page-scaffold:has(> .search_area .stn-dropdown.on)>.content_box,
+.stn-list-page-content-stack:has(.stn-dropdown.on) > .content_box,
+.stn-list-view__content-stack:has(.stn-dropdown.on) > .content_box {
   pointer-events: none;
 }