@stn-uiux/pub-ui 0.1.82 → 0.1.84

package/styles/components/stn-card.css

@@ -18,12 +18,12 @@
 /* Variants */
 .stn-card.flat {
   background-color: var(--stn-card-bg-flat);
-  border: 1px solid transparent;
+  border: var(--stn-size-1, 1px) solid transparent;
 }
 
 .stn-card.outlined {
   background-color: transparent;
-  border: 1px solid var(--stn-card-border-color);
+  border: var(--stn-size-1, 1px) solid var(--stn-card-border-color);
 }
 
 .stn-card.elevated {
@@ -33,23 +33,23 @@
 
 /* Severity Tint Surfaces (critical · major · minor · warning) */
 .stn-card.severity-critical {
-  background-color: var(--stn-severity-critical-bg);
-  border: 1px solid var(--stn-severity-critical-border);
+  background-color: var(--stn-card-severity-critical-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-severity-critical-border);
 }
 
 .stn-card.severity-major {
-  background-color: var(--stn-severity-major-bg);
-  border: 1px solid var(--stn-severity-major-border);
+  background-color: var(--stn-card-severity-major-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-severity-major-border);
 }
 
 .stn-card.severity-minor {
-  background-color: var(--stn-severity-minor-bg);
-  border: 1px solid var(--stn-severity-minor-border);
+  background-color: var(--stn-card-severity-minor-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-severity-minor-border);
 }
 
 .stn-card.severity-warning {
-  background-color: var(--stn-severity-warning-bg);
-  border: 1px solid var(--stn-severity-warning-border);
+  background-color: var(--stn-card-severity-warning-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-severity-warning-border);
 }
 
 /* Radius */
@@ -85,6 +85,31 @@
   flex-direction: column;
 }
 
+/*
+ * Flush recipe — edge-to-edge body (Split View / store locator)
+ * Card padding="none" + Body flush
+ * Header/Footer keep horizontal inset; body margin gap removed so Side|Stage touch the divider.
+ */
+.stn-card.pad-none > .stn-card__header {
+  padding-left: var(--stn-space-16, 16px);
+  padding-right: var(--stn-space-16, 16px);
+  margin-bottom: 0;
+}
+
+.stn-card.pad-none > .stn-card__footer {
+  padding-left: var(--stn-space-16, 16px);
+  padding-right: var(--stn-space-16, 16px);
+  padding-bottom: var(--stn-space-16, 16px);
+  margin-top: 0;
+}
+
+.stn-card__body.is-flush {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 /* Interactive (Hover / Click) */
 .stn-card.interactive,
 .stn-card[role='button'] {
@@ -102,9 +127,20 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--stn-space-12, 12px);
-  padding-bottom: var(--stn-space-12, 12px);
-  border-bottom: 1px solid var(--stn-card-border-color);
+  box-sizing: border-box;
+  /*
+   * 토큰: --stn-card-header-min-height
+   * height 고정으로 멀티 패널 디바이더 정렬.
+   * 세로 여백은 height 안 padding이 아니라 margin-bottom(본문 간격)으로만 —
+   * height + padding-bottom만 있으면(예전) content가 위로 붙고 아래만 비어 보임.
+   */
+  height: var(--stn-card-header-min-height, var(--stn-size-40, 40px));
+  min-height: var(--stn-card-header-min-height, var(--stn-size-40, 40px));
+  padding-top: 0;
+  padding-bottom: 0;
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-card-border-color);
   margin-bottom: var(--stn-space-12, 12px);
+  overflow: hidden;
 }
 
 .stn-card__header-title {
@@ -140,6 +176,6 @@
   justify-content: flex-end;
   gap: var(--stn-space-8, 8px);
   padding-top: var(--stn-space-12, 12px);
-  border-top: 1px solid var(--stn-card-border-color);
+  border-top: var(--stn-size-1, 1px) solid var(--stn-card-border-color);
   margin-top: var(--stn-space-12, 12px);
 }

package/styles/components/stn-checkbox.css

@@ -136,7 +136,7 @@
 .stn-checkbox.lg {
   --stn-checkbox-size: var(--stn-checkbox-size-lg, 22px);
   --stn-checkbox-radius: var(--stn-radius-4, 4px);
-  font-size: var(--stn-text-body-size, 15px);
+  font-size: var(--stn-text-body-medium-large-size);
 }
 
 /* Colors / Semantic Tones (단일 클래스 - 체크마크/대시 색상) */

package/styles/components/stn-date-picker.css

@@ -15,6 +15,23 @@
   --calendar-range-dash: var(--stn-date-picker-accent);
   --calendar-disabled-font: var(--stn-date-picker-disabled-fg);
 
+  /* md — 기본 달력 스케일 */
+  --stn-date-picker-cell-w: var(--stn-size-32);
+  --stn-date-picker-cell-h: var(--stn-size-28);
+  --stn-date-picker-col-w: var(--stn-size-36);
+  --stn-date-picker-row-h: var(--stn-size-28);
+  --stn-date-picker-nav-size: var(--stn-size-24);
+  --stn-date-picker-panel-pad-y: var(--stn-space-8);
+  --stn-date-picker-panel-pad-x: var(--stn-space-12);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-4);
+  --stn-date-picker-cell-pad-y: var(--stn-space-2);
+  --stn-date-picker-section-pad-y: var(--stn-space-8);
+  --stn-date-picker-section-pad-x: var(--stn-space-12);
+  --stn-date-picker-footer-pad-y: var(--stn-space-12);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-small-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+
   position: fixed;
   z-index: var(--stn-elevation-z-dropdown);
   box-sizing: border-box;
@@ -25,9 +42,141 @@
   color: var(--stn-text-primary);
 }
 
+.stn-date-picker-dropdown.sm {
+  --stn-date-picker-cell-w: var(--stn-size-28);
+  --stn-date-picker-cell-h: var(--stn-size-24);
+  --stn-date-picker-col-w: var(--stn-size-32);
+  --stn-date-picker-row-h: var(--stn-size-24);
+  --stn-date-picker-nav-size: var(--stn-size-20);
+  --stn-date-picker-panel-pad-y: var(--stn-space-4);
+  --stn-date-picker-panel-pad-x: var(--stn-space-8);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-2);
+  --stn-date-picker-cell-pad-y: var(--stn-space-0);
+  --stn-date-picker-section-pad-y: var(--stn-space-4);
+  --stn-date-picker-section-pad-x: var(--stn-space-8);
+  --stn-date-picker-footer-pad-y: var(--stn-space-8);
+  --stn-date-picker-title-size: var(--stn-text-body-small-size);
+  --stn-date-picker-day-size: var(--stn-text-caption-medium-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+}
+
+.stn-date-picker-dropdown.md {
+  --stn-date-picker-cell-w: var(--stn-size-32);
+  --stn-date-picker-cell-h: var(--stn-size-28);
+  --stn-date-picker-col-w: var(--stn-size-36);
+  --stn-date-picker-row-h: var(--stn-size-28);
+  --stn-date-picker-nav-size: var(--stn-size-24);
+  --stn-date-picker-panel-pad-y: var(--stn-space-8);
+  --stn-date-picker-panel-pad-x: var(--stn-space-12);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-4);
+  --stn-date-picker-cell-pad-y: var(--stn-space-2);
+  --stn-date-picker-section-pad-y: var(--stn-space-8);
+  --stn-date-picker-section-pad-x: var(--stn-space-12);
+  --stn-date-picker-footer-pad-y: var(--stn-space-12);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-small-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+}
+
+.stn-date-picker-dropdown.lg {
+  --stn-date-picker-cell-w: var(--stn-size-36);
+  --stn-date-picker-cell-h: var(--stn-size-32);
+  --stn-date-picker-col-w: var(--stn-size-40);
+  --stn-date-picker-row-h: var(--stn-size-32);
+  --stn-date-picker-nav-size: var(--stn-size-28);
+  --stn-date-picker-panel-pad-y: var(--stn-space-12);
+  --stn-date-picker-panel-pad-x: var(--stn-space-16);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-8);
+  --stn-date-picker-cell-pad-y: var(--stn-space-4);
+  --stn-date-picker-section-pad-y: var(--stn-space-12);
+  --stn-date-picker-section-pad-x: var(--stn-space-16);
+  --stn-date-picker-footer-pad-y: var(--stn-space-16);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-weekday-size: var(--stn-text-body-small-size);
+}
+
 .stn-date-picker-dropdown__body {
   display: flex;
   flex-direction: column;
+  width: max-content;
+  max-width: 100%;
+}
+
+.stn-date-picker-dropdown__main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-dropdown__main {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  align-items: stretch;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time {
+  height: 0;
+  min-height: 100%;
+  overflow: hidden;
+  border-top: none;
+  border-left: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack {
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: calc(var(--stn-date-picker-col-w) * 3 + var(--stn-space-8) * 2);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--stn-date-picker-panel-pad-y) var(--stn-date-picker-panel-pad-x) var(--stn-date-picker-panel-pad-bottom);
+  border-right: none;
+  gap: var(--stn-space-8);
+}
+
+.stn-date-picker-time__head {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: center;
+  min-height: var(--stn-date-picker-row-h);
+  margin: var(--stn-space-0);
+}
+
+.stn-date-picker-time__head > span {
+  font-size: var(--stn-date-picker-weekday-size);
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-date-picker-row-h);
+  text-align: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__columns {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--stn-space-4);
+  flex: 1 1 auto;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__scroll {
+  width: auto;
+  height: 100%;
+  min-height: 0;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--stn-date-picker-cell-h);
+  padding: var(--stn-space-0);
+  border-radius: var(--stn-radius-4);
+  line-height: var(--stn-date-picker-cell-h);
 }
 
 .stn-date-picker-dropdown__panels {
@@ -37,7 +186,7 @@
 
 .stn-date-picker-panel {
   box-sizing: border-box;
-  padding: var(--stn-space-8) var(--stn-space-12) var(--stn-space-4);
+  padding: var(--stn-date-picker-panel-pad-y) var(--stn-date-picker-panel-pad-x) var(--stn-date-picker-panel-pad-bottom);
   border-right: var(--stn-size-1) solid var(--calendar-border);
 }
 
@@ -50,14 +199,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--stn-space-8);
-  margin-bottom: var(--stn-space-8);
-  min-height: var(--stn-size-28);
+  margin-bottom: var(--stn-date-picker-panel-pad-y);
+  min-height: var(--stn-date-picker-row-h);
 }
 
 .stn-date-picker-panel__title {
   flex: 1;
   margin: var(--stn-space-0);
-  font-size: var(--stn-text-body-medium-size);
+  font-size: var(--stn-date-picker-title-size);
   font-weight: var(--stn-font-weight-semibold);
   line-height: var(--stn-line-height-1, 1);
   text-align: center;
@@ -68,8 +217,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--stn-size-24);
-  height: var(--stn-size-24);
+  width: var(--stn-date-picker-nav-size);
+  height: var(--stn-date-picker-nav-size);
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
   border: none;
@@ -89,14 +238,14 @@
 }
 
 .stn-date-picker-content {
-  width: calc(var(--stn-size-36) * 7);
+  width: calc(var(--stn-date-picker-col-w) * 7);
   border-collapse: collapse;
   table-layout: fixed;
 }
 
 .stn-date-picker-content th {
-  height: var(--stn-size-28);
-  font-size: var(--stn-text-caption-medium-size);
+  height: var(--stn-date-picker-row-h);
+  font-size: var(--stn-date-picker-weekday-size);
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-text-secondary);
   text-align: center;
@@ -104,7 +253,7 @@
 
 .stn-date-picker-cell {
   position: relative;
-  padding: var(--stn-space-2) var(--stn-space-0);
+  padding: var(--stn-date-picker-cell-pad-y) var(--stn-space-0);
   text-align: center;
 }
 
@@ -112,14 +261,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--stn-size-32);
-  height: var(--stn-size-28);
+  width: var(--stn-date-picker-cell-w);
+  height: var(--stn-date-picker-cell-h);
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
   border: none;
   border-radius: var(--stn-radius-4);
   background: transparent;
-  font-size: var(--stn-text-body-small-size);
+  font-size: var(--stn-date-picker-day-size);
   font-weight: var(--stn-font-weight-medium);
   line-height: var(--stn-line-height-1, 1);
   color: var(--stn-text-primary);
@@ -135,26 +284,39 @@
 .stn-date-picker-cell--in-range::before {
   content: '';
   position: absolute;
-  inset: var(--stn-space-2) var(--stn-space-0);
+  inset: var(--stn-date-picker-cell-pad-y) var(--stn-space-0);
   background: var(--calendar-range);
   z-index: 0;
+  border-radius: 0;
+}
+
+.stn-date-picker-cell--range-start::before {
+  left: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  background: var(--calendar-selected-row);
+  border-radius: var(--stn-radius-4) 0 0 var(--stn-radius-4);
 }
 
-.stn-date-picker-cell--range-start::before,
 .stn-date-picker-cell--range-end::before {
+  right: calc((100% - var(--stn-date-picker-cell-w)) / 2);
   background: var(--calendar-selected-row);
+  border-radius: 0 var(--stn-radius-4) var(--stn-radius-4) 0;
 }
 
-.stn-date-picker-cell--range-start .stn-date-picker-cell__btn,
-.stn-date-picker-cell--range-end .stn-date-picker-cell__btn {
+.stn-date-picker-cell--range-start.stn-date-picker-cell--range-end::before {
+  left: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  right: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  border-radius: var(--stn-radius-4);
+}
+
+.stn-date-picker-cell--range-start:not(.stn-date-picker-cell--in-range) .stn-date-picker-cell__btn,
+.stn-date-picker-cell--range-end:not(.stn-date-picker-cell--in-range) .stn-date-picker-cell__btn {
   background: var(--calendar-selected-row);
   color: var(--calendar-font);
 }
 
-.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
-.stn-date-picker-cell--range-start .stn-date-picker-cell__btn:hover,
-.stn-date-picker-cell--range-end .stn-date-picker-cell__btn:hover {
-  background: var(--calendar-selected-row);
+.stn-date-picker-cell--in-range.stn-date-picker-cell--range-start .stn-date-picker-cell__btn,
+.stn-date-picker-cell--in-range.stn-date-picker-cell--range-end .stn-date-picker-cell__btn {
+  background: transparent;
   color: var(--calendar-font);
 }
 
@@ -162,6 +324,19 @@
   border: var(--stn-size-1) dashed var(--calendar-range-dash);
 }
 
+.stn-date-picker-cell--range-start .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--range-end .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--preview .stn-date-picker-cell__btn:hover {
+  border: none;
+}
+
+.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--preview .stn-date-picker-cell__btn:hover {
+  background: transparent;
+  color: var(--calendar-font);
+}
+
 .stn-date-picker-cell--disabled .stn-date-picker-cell__btn {
   color: var(--calendar-disabled-font);
   cursor: not-allowed;
@@ -172,25 +347,57 @@
   border-top: var(--stn-size-1) solid var(--calendar-border);
 }
 
+.stn-date-picker-dropdown--single .stn-date-picker-time {
+  flex-direction: column;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack + .stn-date-picker-time__side--stack {
+  border-left: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack {
+  border-bottom: none;
+}
+
+.stn-date-picker-time__caption {
+  font-size: var(--stn-date-picker-weekday-size);
+  font-weight: var(--stn-font-weight-semibold);
+  line-height: var(--stn-date-picker-row-h);
+  text-align: center;
+  color: var(--stn-text-secondary);
+}
+
 .stn-date-picker-time__side {
   flex: 1;
   display: flex;
   gap: var(--stn-space-0);
   min-width: 0;
-  padding: var(--stn-space-8) var(--stn-space-12);
+  padding: var(--stn-date-picker-section-pad-y) var(--stn-date-picker-section-pad-x);
   border-right: var(--stn-size-1) solid var(--calendar-border);
 }
 
-.stn-date-picker-time__side:last-child {
+.stn-date-picker-dropdown--single .stn-date-picker-time__side {
   border-right: none;
+  border-bottom: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-time__side:last-child,
+.stn-date-picker-dropdown--single .stn-date-picker-time__side:last-child {
+  border-right: none;
+  border-bottom: none;
 }
 
 .stn-date-picker-time__label {
   flex-shrink: 0;
-  width: var(--stn-size-36);
-  font-size: var(--stn-text-caption-medium-size);
+  width: var(--stn-date-picker-col-w);
+  font-size: var(--stn-date-picker-weekday-size);
   font-weight: var(--stn-font-weight-semibold);
-  line-height: var(--stn-size-28);
+  line-height: var(--stn-date-picker-row-h);
   color: var(--stn-text-secondary);
 }
 
@@ -199,8 +406,8 @@
   flex: 1;
   min-width: 0;
   width: 100%;
-  height: calc(var(--stn-size-28) * 6);
-  max-height: calc(var(--stn-size-28) * 6);
+  height: calc(var(--stn-date-picker-cell-h) * 6);
+  max-height: calc(var(--stn-date-picker-cell-h) * 6);
   overflow: hidden;
 }
 
@@ -218,7 +425,7 @@
 
 .stn-date-picker-time__scroll {
   width: 100%;
-  height: calc(var(--stn-size-28) * 6);
+  height: calc(var(--stn-date-picker-cell-h) * 6);
 }
 
 .stn-date-picker-time__column {
@@ -233,10 +440,11 @@
   margin: var(--stn-space-0);
   padding: var(--stn-space-4) var(--stn-space-4); /* 좌우 패딩 추가 — 숫자 가독성 개선 */
   border: none;
+  border-radius: var(--stn-radius-4);
   background: transparent;
   font-size: var(--stn-text-body-small-size);
   font-weight: var(--stn-font-weight-medium);
-  line-height: 1.4;
+  line-height: var(--stn-text-body-small-line-height);
   text-align: center;
   color: var(--stn-text-primary);
   cursor: pointer;
@@ -251,12 +459,24 @@
   background: var(--calendar-range);
 }
 
+.stn-date-picker-presets {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--stn-space-8);
+  width: 0;
+  min-width: 100%;
+  box-sizing: border-box;
+  padding: var(--stn-date-picker-section-pad-y) var(--stn-date-picker-section-pad-x);
+  border-top: var(--stn-size-1) solid var(--calendar-border);
+}
+
 .stn-date-picker-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--stn-space-8);
-  padding: var(--stn-space-8) var(--stn-space-12);
+  padding: var(--stn-date-picker-footer-pad-y) var(--stn-date-picker-section-pad-x);
   border-top: var(--stn-size-1) solid var(--calendar-border);
 }
 
@@ -268,16 +488,3 @@
 .stn-date-picker-field .stn-date-range-field[aria-expanded='true'] {
   border: var(--stn-input-focus);
 }
-
-/* StnDateRangePicker dialog title — screen reader only */
-.stn-sf__visually-hidden {
-  position: absolute;
-  width: var(--stn-size-1);
-  height: var(--stn-size-1);
-  padding: var(--stn-space-0);
-  margin: calc(var(--stn-size-1) * -1);
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/styles/components/stn-drawer.css

@@ -136,10 +136,10 @@
 
 .stn-drawer__head-title {
   margin: 0;
-  font-size: var(--stn-text-h4-size);
+  font-size: var(--stn-text-title-medium-size);
   font-weight: var(--stn-font-weight-semibold);
   color: var(--stn-text-primary);
-  line-height: var(--stn-text-h4-line-height);
+  line-height: var(--stn-text-title-medium-line-height);
 }
 
 .stn-drawer__subtitle {