@stn-uiux/pub-ui 0.1.57 → 0.1.58

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,

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

@@ -0,0 +1,319 @@
+/**
+ * StnLabelPrefix — 아이콘+레이블이 내장된 입력 래퍼 컴포넌트
+ *
+ * 구조:
+ *   div.stn-label-prefix
+ *     ├── .stn-label-prefix__label  (아이콘 + 텍스트 + 구분선)
+ *     └── .stn-label-prefix__control (children slot — StnDropdown·StnTextField·StnDateRangeField 등)
+ *
+ * Props:
+ *   variant  : outline(기본) · filled · standard · transparent
+ *   size     : sm(24px) · md(32px, 기본) · lg(40px)
+ *   radius   : none · sm · md · lg · xl (기본은 size에 따름)
+ *   position : prefix(왼쪽, 기본) · suffix(오른쪽)
+ *
+ * ==========================================================================
+ * 1. Base Layout
+ * 2. Label Area (.stn-label-prefix__label)
+ * 3. Divider (.stn-label-prefix__divider)
+ * 4. Control Slot (.stn-label-prefix__control)
+ * 5. Size (sm · md · lg)
+ * 6. Variant (outline · filled · standard · transparent)
+ * 7. Focus-within State
+ * 8. Suffix Position
+ * 9. Radius Override
+ * 10. Width Presets
+ * 11. Disabled State
+ * ==========================================================================
+ */
+
+/* ==========================================================================
+   1. Base Layout
+   ========================================================================== */
+.stn-label-prefix {
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+  vertical-align: middle;
+  transition: border-color var(--stn-motion-duration-fast, 150ms) ease;
+}
+
+/* ==========================================================================
+   2. Label Area
+   ========================================================================== */
+.stn-label-prefix__label {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--stn-space-16);
+  padding-inline-start: var(--stn-space-16);
+  padding-inline-end: 0;
+  white-space: nowrap;
+  color: var(--stn-label-prefix-label-color, var(--stn-text-secondary));
+  background-color: transparent;
+  font-weight: var(--stn-font-weight-medium);
+  user-select: none;
+}
+
+.stn-label-prefix__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.stn-label-prefix__text {
+  display: inline-flex;
+  align-items: center;
+}
+
+.stn-label-prefix__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: var(--stn-line-height-tight);
+  margin-inline-start: var(--stn-space-2, 2px);
+}
+
+/* ==========================================================================
+   3. Divider
+   ========================================================================== */
+.stn-label-prefix__divider {
+  flex-shrink: 0;
+  width: var(--stn-size-1, 1px);
+  align-self: stretch;
+  background-color: var(--stn-label-prefix-divider, var(--stn-input-border));
+  margin: var(--stn-space-8) 0;
+}
+
+/* ==========================================================================
+   4. Control Slot
+   ========================================================================== */
+.stn-label-prefix__control {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* children(Dropdown 등)이 full height를 차지하도록 */
+.stn-label-prefix__control > * {
+  width: 100%;
+}
+
+/* ==========================================================================
+   5. Size (sm · md · lg)
+   ========================================================================== */
+
+/* sm — 32px */
+.stn-label-prefix.sm {
+  height: var(--stn-dropdown-height-sm, 32px);
+  border-radius: var(--stn-radius-input-sm, 4px);
+  font-size: var(--stn-text-body-small-size);
+}
+
+.stn-label-prefix.sm > .stn-label-prefix__control {
+  padding: 0 var(--stn-space-8);
+}
+
+/* md — 40px (기본값) */
+.stn-label-prefix.md {
+  height: var(--stn-dropdown-height-md, 40px);
+  border-radius: var(--stn-radius-input-md, 4px);
+  font-size: var(--stn-text-body-small-size);
+}
+
+.stn-label-prefix.md > .stn-label-prefix__control {
+  padding: 0 var(--stn-space-10);
+}
+
+/* lg — 56px */
+.stn-label-prefix.lg {
+  height: var(--stn-dropdown-height-lg, 56px);
+  border-radius: var(--stn-radius-input-lg, 8px);
+  font-size: var(--stn-text-body-medium-size);
+}
+
+.stn-label-prefix.lg > .stn-label-prefix__control {
+  padding: 0 var(--stn-space-12);
+}
+
+/* ==========================================================================
+   6. Variant (outline · filled · standard · transparent)
+   ========================================================================== */
+
+/* 6-1. Outline (기본값 — 전체 테두리 박스) */
+.stn-label-prefix.outline {
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
+  background-color: var(--stn-input-bg);
+}
+
+/* 6-2. Filled (배경 채움) */
+.stn-label-prefix.filled {
+  border: var(--stn-size-1, 1px) solid var(--stn-input-filled-border, transparent);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+}
+
+.stn-label-prefix.filled > .stn-label-prefix__label {
+  background-color: var(--stn-label-prefix-label-bg, transparent);
+}
+
+/* 6-3. Standard (하단 밑줄만) */
+.stn-label-prefix.standard {
+  border: none;
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-input-border);
+  border-radius: var(--stn-radius-0, 0px);
+  background-color: transparent;
+}
+
+/* 6-4. Transparent (테두리·배경 없음 — 외부 래퍼 조합용) */
+.stn-label-prefix.transparent {
+  border: none;
+  background-color: transparent;
+}
+
+/* ==========================================================================
+   7. Focus-within State
+   ========================================================================== */
+.stn-label-prefix.outline:focus-within,
+.stn-label-prefix.filled:focus-within {
+  border-color: var(--stn-input-focus-fg, var(--stn-primary));
+}
+
+.stn-label-prefix.standard:focus-within {
+  border-bottom: var(--stn-input-focus);
+}
+
+/* ==========================================================================
+   8. Suffix Position (label이 오른쪽에)
+   ========================================================================== */
+.stn-label-prefix--suffix {
+  flex-direction: row-reverse;
+}
+
+/* suffix일 때 레이블 패딩 방향 전환 (오른쪽이 바깥쪽이므로 우측 16, 좌측 0) */
+.stn-label-prefix--suffix > .stn-label-prefix__label {
+  padding-inline-start: 0;
+  padding-inline-end: var(--stn-space-16);
+}
+
+/* suffix일 때 divider를 label 내부의 가장 왼쪽(control과의 경계)에 배치 */
+.stn-label-prefix--suffix .stn-label-prefix__divider {
+  order: -1;
+}
+
+/* ==========================================================================
+   9. Radius Override
+   ========================================================================== */
+.stn-label-prefix.radius-none {
+  border-radius: var(--stn-radius-0, 0px);
+}
+
+.stn-label-prefix.radius-sm {
+  border-radius: var(--stn-radius-input-sm, 4px);
+}
+
+.stn-label-prefix.radius-md {
+  border-radius: var(--stn-radius-input-md, 4px);
+}
+
+.stn-label-prefix.radius-lg {
+  border-radius: var(--stn-radius-input-lg, 8px);
+}
+
+.stn-label-prefix.radius-xl {
+  border-radius: var(--stn-radius-input-xl, 16px);
+}
+
+/* ==========================================================================
+   10. Width Presets (.w80 ~ .w200 / .full)
+   기본 고정 너비로 작동하며, 레이블이나 내부 컨트롤의 내용이 지정 너비보다
+   길어질 경우 내용물에 맞춰 자연스럽게 늘어납니다(Hug content).
+   ========================================================================== */
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w80  { min-width: var(--stn-size-80,  80px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w100 { min-width: var(--stn-size-100, 100px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w120 { min-width: var(--stn-size-120, 120px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w140 { min-width: var(--stn-size-140, 140px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w160 { min-width: var(--stn-size-160, 160px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w180 { min-width: var(--stn-size-180, 180px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).w200 { min-width: var(--stn-size-200, 200px); width: max-content; }
+:is(.stn-label-prefix, .stn-label-prefix-wrap).full {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+/* ==========================================================================
+   11. Disabled State
+   ========================================================================== */
+.stn-label-prefix.is-disabled {
+  opacity: var(--stn-input-disabled-opacity, 0.55);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   12. Feedback / Status Colors & Error State
+   ========================================================================== */
+.stn-label-prefix.is-error,
+.stn-label-prefix.error,
+.stn-label-prefix[aria-invalid='true'] {
+  border-color: var(--stn-feedback-error);
+}
+
+.stn-label-prefix.standard.is-error,
+.stn-label-prefix.standard.error,
+.stn-label-prefix.standard[aria-invalid='true'] {
+  border-bottom-color: var(--stn-feedback-error);
+}
+
+.stn-label-prefix.outline.is-error:focus-within,
+.stn-label-prefix.filled.is-error:focus-within,
+.stn-label-prefix.outline.error:focus-within,
+.stn-label-prefix.filled.error:focus-within {
+  border-color: var(--stn-feedback-error);
+}
+
+.stn-label-prefix.standard.is-error:focus-within,
+.stn-label-prefix.standard.error:focus-within {
+  border-bottom-color: var(--stn-feedback-error);
+}
+
+.stn-label-prefix.success {
+  border-color: var(--stn-feedback-success);
+}
+
+.stn-label-prefix.warning {
+  border-color: var(--stn-feedback-warning);
+}
+
+.stn-label-prefix.info {
+  border-color: var(--stn-feedback-info);
+}
+
+/* ==========================================================================
+   13. Helper Text & Wrapper
+   ========================================================================== */
+.stn-label-prefix-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.stn-label-prefix-wrap > .stn-label-prefix {
+  width: 100%;
+}
+
+.stn-label-prefix__helper {
+  margin: var(--stn-space-4) 0 0 0;
+  font-size: var(--stn-text-caption-size, 12px);
+  line-height: var(--stn-line-height-tight, 1.3);
+  color: var(--stn-text-muted);
+}
+
+.stn-label-prefix-wrap.is-error .stn-label-prefix__helper,
+.stn-label-prefix__helper--error {
+  color: var(--stn-feedback-error);
+}