@stn-uiux/pub-ui 0.1.73 → 0.1.75

package/styles/components/stn-drawer.css

@@ -0,0 +1,182 @@
+/**
+ * STN Drawer Component (L2 Side Sheet)
+ * 
+ * - L1.8 Side Sheet 계층 (z-index: var(--stn-elevation-z-drawer))
+ * - non-dimming (dim={false}) 및 dimming (dim={true}) 두 가지 모드 완벽 지원
+ * - 표준 크기 스케일 (sm, md, lg, xl, full)
+ * - 방향 (right, left, bottom) 지원
+ */
+
+/* ── 1. Drawer Stack Root ── */
+.stn-drawer-stack {
+  position: fixed;
+  inset: 0;
+  z-index: var(--stn-elevation-z-drawer); /* L1.8 Side Sheet 계층 (z-180, Dropdown 150 초과 / Modal 200 미만) */
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility var(--stn-motion-duration-fast, 0.25s) ease;
+}
+
+.stn-drawer-stack.is-open {
+  visibility: visible;
+}
+
+/* Dim (Backdrop) 모드 */
+.stn-drawer-stack--dim.is-open {
+  pointer-events: auto;
+}
+
+/* ── 2. Dim Scrim ── */
+.stn-drawer-stack__dim {
+  position: absolute;
+  inset: 0;
+  background: var(--stn-dim-bg);
+  backdrop-filter: blur(var(--stn-dim-blur));
+  opacity: 0;
+  pointer-events: auto;
+  transition: opacity var(--stn-motion-duration-fast, 0.25s) ease;
+}
+
+.stn-drawer-stack.is-open .stn-drawer-stack__dim {
+  opacity: 1;
+}
+
+/* ── 3. Drawer Panel ── */
+.stn-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--stn-drawer-bg);
+  border-color: var(--stn-border-subtle);
+  border-style: solid;
+  border-width: 0;
+  box-shadow: var(--stn-shadow-xl);
+  pointer-events: auto;
+  transition: transform var(--stn-motion-duration-fast, 0.25s) var(--stn-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+  will-change: transform;
+}
+
+/* Drawer Panel Padding Scale (.padding-none, .padding-xs ~ .padding-xl) */
+.stn-drawer.padding-none { padding: var(--stn-drawer-padding-none); }
+.stn-drawer.padding-xs   { padding: var(--stn-drawer-padding-xs); }
+.stn-drawer.padding-sm   { padding: var(--stn-drawer-padding-sm); }
+.stn-drawer.padding-md   { padding: var(--stn-drawer-padding-md); }
+.stn-drawer.padding-lg   { padding: var(--stn-drawer-padding-lg); }
+.stn-drawer.padding-xl   { padding: var(--stn-drawer-padding-xl); }
+
+/* Drawer Panel Gap Scale (Header, Body, Footer 간격 조절) */
+.stn-drawer.gap-none { gap: var(--stn-drawer-gap-none); }
+.stn-drawer.gap-xs   { gap: var(--stn-drawer-gap-xs); }
+.stn-drawer.gap-sm   { gap: var(--stn-drawer-gap-sm); }
+.stn-drawer.gap-md   { gap: var(--stn-drawer-gap-md); }
+.stn-drawer.gap-lg   { gap: var(--stn-drawer-gap-lg); }
+.stn-drawer.gap-xl   { gap: var(--stn-drawer-gap-xl); }
+
+/* ── 4. Placement (방향) ── */
+/* Right (기본) */
+.stn-drawer--right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: min(var(--stn-drawer-active-width, 480px), 100vw);
+  border-left-width: 1px;
+  transform: translateX(100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--right {
+  transform: translateX(0);
+}
+
+/* Left */
+.stn-drawer--left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: min(var(--stn-drawer-active-width, 480px), 100vw);
+  border-right-width: 1px;
+  transform: translateX(-100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--left {
+  transform: translateX(0);
+}
+
+/* Bottom */
+.stn-drawer--bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: min(var(--stn-drawer-active-height, 480px), 100vh);
+  border-top-width: 1px;
+  transform: translateY(100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--bottom {
+  transform: translateY(0);
+}
+
+/* ── 5. Size Variants (표준 스케일) ── */
+.stn-drawer--sm { --stn-drawer-active-width: var(--stn-drawer-width-sm, 360px); --stn-drawer-active-height: var(--stn-drawer-height-sm, 360px); }
+.stn-drawer--md { --stn-drawer-active-width: var(--stn-drawer-width-md, 480px); --stn-drawer-active-height: var(--stn-drawer-height-md, 480px); }
+.stn-drawer--lg { --stn-drawer-active-width: var(--stn-drawer-width-lg, 640px); --stn-drawer-active-height: var(--stn-drawer-height-lg, 640px); }
+.stn-drawer--xl { --stn-drawer-active-width: var(--stn-drawer-width-xl, 800px); --stn-drawer-active-height: var(--stn-drawer-height-xl, 800px); }
+
+/* ── 6. Header, Body, Footer Subcomponents ── */
+.stn-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--stn-space-4) var(--stn-space-5);
+  background: var(--stn-drawer-bg);
+}
+
+.stn-drawer__head-title {
+  margin: 0;
+  font-size: var(--stn-text-h4-size);
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-primary);
+  line-height: var(--stn-text-h4-line-height);
+}
+
+.stn-drawer__subtitle {
+  margin: var(--stn-space-1) 0 0;
+  font-size: var(--stn-text-body-small-size);
+  color: var(--stn-text-secondary);
+}
+
+.stn-drawer__close {
+  flex-shrink: 0;
+}
+
+.stn-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--stn-space-5);
+  color: var(--stn-text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.stn-drawer__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-2);
+  padding: var(--stn-space-3) var(--stn-space-5);
+  background: var(--stn-elevation-surface-1);
+}
+
+.stn-drawer__footer--right {
+  justify-content: flex-end;
+}
+
+.stn-drawer__footer--center {
+  justify-content: center;
+}
+
+.stn-drawer__footer--between {
+  justify-content: space-between;
+}

package/styles/components/stn-event-banner.css

@@ -80,14 +80,14 @@
   padding: var(--stn-space-12, 12px) var(--stn-space-16, 16px);
   border-radius: var(--stn-radius-8, 8px);
   background: var(--stn-event-banner-bg);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(var(--stn-dim-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-dim-blur, 8px));
   isolation: isolate;
   transform: translateZ(0);
   overflow: hidden;
-  z-index: 1000;
-  font-family: var(--stn-font-family-pretendard, var(--Typography-font-family-pretendard, sans-serif));
-  gap: var(--stn-space-12, 12px);
+  z-index: var(--stn-elevation-z-banner);
+  font-family: var(--stn-font-body);
+  gap: var(--stn-space-12);
   border: 1px solid var(--stn-event-banner-cr-border);
   border-left: 2px solid var(--stn-event-banner-cr-accent);
   box-shadow: var(--stn-event-banner-cr-shadow);
@@ -286,8 +286,8 @@
 
 /* Alert Icon */
 .stn-event-banner__icon-wrap {
-  width: 24px;
-  height: 24px;
+  width: var(--stn-event-banner-icon-size, var(--stn-size-24, 24px));
+  height: var(--stn-event-banner-icon-size, var(--stn-size-24, 24px));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -298,7 +298,7 @@
 .stn-event-banner__text {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: var(--stn-event-banner-text-gap, var(--stn-space-4, 4px));
   align-items: stretch;
   min-width: 0;
   flex: 1 1 auto;
@@ -317,24 +317,24 @@
 }
 
 .stn-event-banner__title {
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   font-weight: var(--stn-font-weight-semibold, 600);
   color: var(--stn-event-banner-title);
-  line-height: 1.2;
+  line-height: var(--stn-line-height-tight, 1.2);
 }
 
 .stn-event-banner__time {
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-regular, 400);
   color: var(--stn-event-banner-time);
-  line-height: 1.2;
+  line-height: var(--stn-line-height-tight, 1.2);
 }
 
 /* Action Group */
 .stn-event-banner__actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--stn-event-banner-actions-gap, var(--stn-space-8, 8px));
   flex-shrink: 0;
 }
 
@@ -344,11 +344,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 30px;
-  padding: 4px 14px;
-  border-radius: var(--stn-radius-circle, 9999px);
-  font-family: var(--stn-font-family-pretendard, var(--Typography-font-family-pretendard, sans-serif));
-  font-size: 13px;
+  height: var(--stn-event-banner-btn-height, var(--stn-size-28, 28px));
+  padding: var(--stn-event-banner-btn-padding-block, var(--stn-space-4, 4px)) var(--stn-event-banner-btn-padding-inline, var(--stn-space-14, 14px));
+  border-radius: var(--stn-radius-chip-pill, var(--stn-radius-circle, 9999px));
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-semibold, 600);
   line-height: 1;
   white-space: nowrap;

package/styles/components/stn-pagination.css

@@ -68,7 +68,7 @@
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
-  box-shadow: none !important;
+  box-shadow: none;
   vertical-align: middle;
   transition: all 0.15s ease;
 }
@@ -118,21 +118,21 @@
 /* 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-font-size: var(--stn-text-caption-medium-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-font-size: var(--stn-text-body-small-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-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   --stn-pagination-gap: var(--stn-space-8, 8px);
   --stn-pagination-arrow-gap: var(--stn-space-16, 16px);
 }
@@ -215,12 +215,13 @@
   flex: 0 0 auto;
 }
 
-/* 모바일 좁은 화면 컴팩트 최적화
- * 브레이크포인트: --stn-pagination-compact-breakpoint (480px)
- * CSS @media에서 var() 사용 불가이므로 리터럴 유지; 치수는 시멘틱 토큰 참조.
- */
+/* 모바일 좁은 화면 컴팩트 최적화 (max-width: 480px) */
 @media (max-width: 480px) {
   .stn-pagination {
+    --stn-pagination-compact-size: var(--stn-size-28, 28px);
+    --stn-pagination-compact-padding: var(--stn-space-6, 6px);
+    --stn-pagination-compact-font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
+    --stn-pagination-compact-gap: var(--stn-space-4, 4px);
     gap: var(--stn-pagination-compact-gap);
   }
 

package/styles/components/stn-progress-bar.css

@@ -198,7 +198,7 @@
   flex-shrink: 0;
   white-space: nowrap;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-progress-title-color);
 }
@@ -207,7 +207,7 @@
   flex-shrink: 0;
   white-space: nowrap;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-progress-value-color);
 }
@@ -217,7 +217,7 @@
   justify-content: space-between;
   align-items: center;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   color: var(--stn-progress-label-color);
   font-weight: var(--stn-font-weight-medium);
 }
@@ -253,7 +253,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-10);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-progress-inside-color);
   line-height: 1;
@@ -415,7 +415,7 @@
 
 .stn-progress-circle-wrap__label {
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-progress-circle-label-color);
   line-height: 1.3;

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

@@ -142,6 +142,8 @@ width: auto;
   border-radius: var(--stn-radius-circle);
   background: var(--stn-side-nav-toggle-bg);
   border: var(--stn-side-nav-border-width, 1px) solid var(--stn-side-nav-toggle-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   box-shadow: var(--stn-side-nav-toggle-shadow);
   color: var(--stn-side-nav-toggle-fg);
 }
@@ -877,7 +879,7 @@ justify-content: center;
 
 /* 1. Mobile Floating / Header Hamburger Trigger */
 .stn-side-nav__mobile-trigger {
-box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -885,52 +887,70 @@ box-sizing: border-box;
   height: var(--stn-side-nav-mobile-trigger-size);
   padding: 0;
   margin: 0;
-  border-radius: var(--stn-side-nav-mobile-trigger-radius);
-  background: var(--stn-side-nav-mobile-trigger-bg);
+  border-radius: var(--stn-side-nav-mobile-trigger-radius, var(--stn-radius-circle));
+  background: transparent;
   border: var(--stn-side-nav-border-width, 1px) solid var(--stn-side-nav-mobile-trigger-border);
-  color: var(--stn-side-nav-mobile-trigger-color);
+  color: var(--stn-side-nav-mobile-trigger-fg, var(--stn-text-primary));
   box-shadow: var(--stn-side-nav-trigger-shadow);
+  backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
   cursor: pointer;
   outline: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
   z-index: 990;
 }
 
 .stn-side-nav__mobile-trigger:hover {
-  transform: translateY(calc(-1 * var(--stn-side-nav-border-width, 1px)));
+  transform: scale(1.08);
+  background: var(--stn-nav-menu-hover-bg);
+  border-color: var(--stn-side-nav-mobile-trigger-border);
   box-shadow: var(--stn-side-nav-trigger-shadow-hover);
-  border-color: var(--stn-nav-menu-active-border);
 }
 
 .stn-side-nav__mobile-trigger:active {
-  transform: translateY(0);
+  transform: scale(0.95);
+}
+
+.stn-side-nav__mobile-trigger:focus-visible {
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, 1px);
 }
 
 /* Floating mode: screens bottom-left */
-.stn-side-nav__mobile-trigger.floating,
 .stn-side-nav__mobile-trigger.floating {
   position: fixed;
   bottom: var(--stn-side-nav-mobile-trigger-floating-bottom);
   left: var(--stn-side-nav-mobile-trigger-floating-left);
+  background: var(--stn-side-nav-mobile-trigger-bg);
+  border-color: var(--stn-side-nav-mobile-trigger-border);
+  box-shadow: var(--stn-side-nav-trigger-shadow);
+  backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
   z-index: 995;
 }
 
 /* 데스크톱(> 1024px)에서는 햄버거 버튼 숨김 (사이드바 레일이 직접 표시됨) */
 @media (min-width: 1025px) {
-  .stn-side-nav__mobile-trigger.floating {
-    display: none;
+  .stn-side-nav__mobile-trigger:not(.doc-force-visible) {
+    display: none !important;
   }
 }
 
-/* 모바일 & 태블릿 화면(<= 1024px): stn-wrap 내부에서 헤더 좌상단 햄버거 트리거로 배치 */
-@media (max-width: 1024px) {
-  .stn-wrap .stn-side-nav__mobile-trigger.floating {
-    position: fixed;
-    top: var(--stn-side-nav-mobile-trigger-offset);
-    left: var(--stn-side-nav-mobile-trigger-offset);
-    bottom: auto;
-    z-index: 995;
-  }
+/* 문서 플레이그라운드 및 .doc-force-visible 지정 시 데스크톱에서도 햄버거 버튼 표시 */
+.stn-side-nav__mobile-trigger.doc-force-visible,
+.doc-example .stn-side-nav__mobile-trigger {
+  display: inline-flex !important;
+}
+
+/* StnHeader 내부 통합용 햄버거 버튼 (floating=false 일 때 StnHeader.Left 또는 Right에 자동 정렬) */
+.stn-header .stn-side-nav__mobile-trigger {
+  position: static;
+  flex-shrink: 0;
+  width: var(--stn-btn-height, 36px);
+  height: var(--stn-btn-height, 36px);
 }
 
 /* Hamburger 3-line Icon */
@@ -938,28 +958,32 @@ box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  width: var(--stn-side-nav-hamburger-width);
-  height: var(--stn-side-nav-hamburger-height);
+  width: var(--stn-side-nav-hamburger-width, 16px);
+  height: var(--stn-side-nav-hamburger-height, 12px);
 }
 
 .stn-side-nav__hamburger-bars span {
   display: block;
   width: 100%;
-  height: var(--stn-side-nav-hamburger-bar);
+  height: var(--stn-side-nav-hamburger-bar, 2px);
   background-color: currentColor;
-  border-radius: var(--stn-side-nav-hamburger-bar);
-  transition: transform 0.2s ease,
-    opacity 0.2s ease;
+  border-radius: var(--stn-radius-circle, 9999px);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.22s ease,
+    background-color 0.2s ease;
 }
 
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(1) {
-  transform: translateY(var(--stn-side-nav-hamburger-bar-spacing)) rotate(45deg);
+  transform: translateY(calc(var(--stn-side-nav-hamburger-bar-spacing, 6px) - 1px)) rotate(45deg);
 }
+
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(2) {
   opacity: 0;
+  transform: scaleX(0);
 }
+
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(3) {
-  transform: translateY(calc(var(--stn-side-nav-hamburger-bar-spacing) * -1)) rotate(-45deg);
+  transform: translateY(calc((var(--stn-side-nav-hamburger-bar-spacing, 6px) - 1px) * -1)) rotate(-45deg);
 }
 /* 2. Mobile Drawer Backdrop Overlay */
 .stn-side-nav__backdrop {
@@ -1037,8 +1061,8 @@ color 0.15s ease;
   color: var(--stn-text-primary);
 }
 
-/* 5. Responsive Mobile Query: <= 768px */
-@media (max-width: 768px) {
+/* 5. Responsive Mobile Query: <= 1024px */
+@media (max-width: 1024px) {
   /* 모바일: PC용 원형 접기 버튼 숨김 — open 시 닫기 버튼은 아래 규칙이 이김 */
   .stn-side-nav__collapse-btn,
   .stn-side-nav__toggle {
@@ -1088,7 +1112,7 @@ color 0.15s ease;
   }
 }
 
-@container stn-list-demo (max-width: 768px) {
+@container stn-list-demo (max-width: 1024px) {
   .stn-side-nav__collapse-btn,
   .stn-side-nav__toggle {
     display: none;