@stn-uiux/pub-ui 0.1.57 → 0.1.59

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

@@ -0,0 +1,356 @@
+/**
+ * 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 {
+  position: relative;
+  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;
+}
+
+/* 팝업/드롭다운이 열렸을 때 overflow를 해제하여 메뉴 목록이 잘리지 않도록 보장 */
+.stn-label-prefix:has(.stn-dropdown.on),
+.stn-label-prefix:has(.stn-date-picker-popup),
+.stn-label-prefix:focus-within:has(.select_option) {
+  overflow: visible !important;
+}
+
+/* StnLabelPrefix 내부 드롭다운: 컨트롤 영역 기준으로 팝업 정렬 (방안 1) */
+.stn-label-prefix > .stn-label-prefix__control > .stn-dropdown {
+  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
+   ========================================================================== */
+.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__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-inline-end: calc(-1 * var(--stn-space-8));
+}
+
+.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;
+}
+
+.stn-label-prefix.is-control-disabled .stn-label-prefix__control {
+  opacity: var(--stn-input-disabled-opacity, 0.45);
+  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);
+}

package/styles/components/stn-pagination.css

@@ -43,7 +43,9 @@
 
 .stn-pagination__page,
 .stn-pagination__prev,
-.stn-pagination__next {
+.stn-pagination__next,
+.stn-pagination__first,
+.stn-pagination__last {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
@@ -55,7 +57,7 @@
   width: var(--stn-pagination-size);
   height: var(--stn-pagination-size);
   border: none;
-  border-radius: var(--stn-pagination-radius-idle);
+  border-radius: var(--stn-pagination-radius-active, var(--stn-radius-circle));
   background: transparent;
   color: var(--stn-pagination-color);
   font-family: var(--stn-font-body);
@@ -68,11 +70,14 @@
   -webkit-appearance: none;
   box-shadow: none !important;
   vertical-align: middle;
+  transition: all 0.15s ease;
 }
 
 .stn-pagination__page:hover:not(:disabled):not(.is-active),
 .stn-pagination__prev:hover:not(:disabled),
-.stn-pagination__next:hover:not(:disabled) {
+.stn-pagination__next:hover:not(:disabled),
+.stn-pagination__first:hover:not(:disabled),
+.stn-pagination__last:hover:not(:disabled) {
   background: color-mix(in srgb, var(--stn-pagination-active-bg) 70%, transparent);
   color: var(--stn-pagination-color);
 }
@@ -93,7 +98,9 @@
 }
 
 .stn-pagination__prev:disabled,
-.stn-pagination__next:disabled {
+.stn-pagination__next:disabled,
+.stn-pagination__first:disabled,
+.stn-pagination__last:disabled {
   opacity: var(--stn-pagination-disabled-opacity);
   cursor: default;
   color: var(--stn-pagination-color);
@@ -101,11 +108,88 @@
 }
 
 .stn-pagination__prev:disabled:hover,
-.stn-pagination__next:disabled:hover {
+.stn-pagination__next:disabled:hover,
+.stn-pagination__first:disabled:hover,
+.stn-pagination__last:disabled:hover {
   background: transparent;
   opacity: var(--stn-pagination-disabled-opacity);
 }
 
+/* Size variations (STN 규격: sm · md · lg) */
+.stn-pagination--sm {
+  --stn-pagination-size: var(--stn-size-28, 28px);
+  --stn-pagination-font-size: var(--stn-font-size-12, 12px);
+  --stn-pagination-gap: var(--stn-space-4, 4px);
+  --stn-pagination-arrow-gap: var(--stn-space-8, 8px);
+}
+
+.stn-pagination--md {
+  --stn-pagination-size: var(--stn-size-32, 32px);
+  --stn-pagination-font-size: var(--stn-font-size-13, 13px);
+  --stn-pagination-gap: var(--stn-space-8, 8px);
+  --stn-pagination-arrow-gap: var(--stn-space-12, 12px);
+}
+
+.stn-pagination--lg {
+  --stn-pagination-size: var(--stn-size-36, 36px);
+  --stn-pagination-font-size: var(--stn-font-size-14, 14px);
+  --stn-pagination-gap: var(--stn-space-8, 8px);
+  --stn-pagination-arrow-gap: var(--stn-space-16, 16px);
+}
+
+/* Variant: outlined (선택된 페이지만 outline 테두리 적용, 다른 번호 및 이동 버튼은 박스 없음) */
+.stn-pagination--outlined .stn-pagination__page,
+.stn-pagination--outlined .stn-pagination__prev,
+.stn-pagination--outlined .stn-pagination__next,
+.stn-pagination--outlined .stn-pagination__first,
+.stn-pagination--outlined .stn-pagination__last {
+  border: none;
+  background: transparent;
+}
+
+.stn-pagination--outlined .stn-pagination__page.is-active,
+.stn-pagination--outlined .stn-pagination__page[aria-current='page'] {
+  border: 1px solid var(--stn-pagination-active-bg, var(--stn-primary));
+  background: transparent;
+  color: var(--stn-pagination-active-bg, var(--stn-primary));
+}
+
+.stn-pagination--outlined .stn-pagination__page.is-active:hover,
+.stn-pagination--outlined .stn-pagination__page[aria-current='page']:hover {
+  background: color-mix(in srgb, var(--stn-pagination-active-bg, var(--stn-primary)) 10%, transparent);
+}
+
+/* outlined 기본(컬러 미지정) 활성 페이지 */
+.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
+.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page[aria-current='page'] {
+  border: 1px solid var(--stn-gray-400, #94a3b8);
+  background: transparent;
+  color: var(--stn-text-primary, #ffffff);
+}
+
+[data-theme='light'] .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
+.light .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active {
+  border-color: var(--stn-gray-500, #64748b);
+  color: var(--stn-gray-800, #1e293b);
+}
+
+/* Color variations */
+.stn-pagination--primary {
+  --stn-pagination-active-bg: var(--stn-primary, var(--stn-blue-500));
+  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+}
+
+.stn-pagination--secondary {
+  --stn-pagination-active-bg: var(--stn-secondary, var(--stn-purple-500));
+  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+}
+
+/* Disabled state */
+.stn-pagination.is-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 .stn-pagination__icon {
   display: block;
   width: var(--stn-pagination-chevron-w);
@@ -140,3 +224,27 @@
   width: auto;
   flex: 0 0 auto;
 }
+
+/* 모바일 좁은 화면 컴팩트 최적화
+ * 브레이크포인트: --stn-pagination-compact-breakpoint (480px)
+ * CSS @media에서 var() 사용 불가이므로 리터럴 유지; 치수는 시멘틱 토큰 참조.
+ */
+@media (max-width: 480px) {
+  .stn-pagination {
+    gap: var(--stn-pagination-compact-gap);
+  }
+
+  .stn-pagination__list {
+    gap: var(--stn-pagination-compact-gap);
+  }
+
+  .stn-pagination__page,
+  .stn-pagination__prev,
+  .stn-pagination__next {
+    min-width: var(--stn-pagination-compact-size);
+    width: var(--stn-pagination-compact-size);
+    height: var(--stn-pagination-compact-size);
+    padding: var(--stn-pagination-compact-padding);
+    font-size: var(--stn-pagination-compact-font-size);
+  }
+}