@stn-uiux/pub-ui 0.1.81 → 0.1.84

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

@@ -0,0 +1,394 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Bar Chart Component (.stn-chart-bar)
+ * Vertical and Horizontal bar charts with multi-series support.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+/* ==========================================================================
+   1. Vertical Bar Chart Layout & Elements
+   ========================================================================== */
+.stn-chart-bar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.stn-chart-bar__body {
+  position: relative;
+  flex: 1 0 0;
+  width: 100%;
+  min-height: var(--stn-chart-body-min-height);
+  box-sizing: border-box;
+}
+
+/* Y-Axis Grid Lines Container */
+.stn-chart-bar__grid {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) 0 var(--stn-chart-grid-inset-bottom) 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.stn-chart-bar__grid-row {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-chart-grid-row-gap);
+  height: 0;
+}
+
+.stn-chart-bar__axis-label {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  line-height: var(--stn-line-height-tight);
+  color: var(--stn-chart-axis-text);
+  width: var(--stn-chart-axis-y-width);
+  text-align: right;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.stn-chart-bar__grid-line {
+  flex: 1;
+  border-bottom: var(--stn-chart-border-width) dashed var(--stn-chart-grid-line);
+}
+
+.stn-chart-bar__grid-line--zero {
+  border-bottom: var(--stn-chart-border-width) solid var(--stn-chart-zero-line);
+}
+
+/* Columns Container */
+.stn-chart-bar__columns {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-col-padding-x) var(--stn-chart-grid-inset-bottom) var(--stn-chart-axis-y-offset);
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  z-index: 1;
+}
+
+/* Individual Column */
+.stn-chart-bar__col {
+  min-width: var(--stn-chart-col-min-width);
+  width: auto;
+  max-width: var(--stn-chart-col-max-width);
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  position: relative;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0 var(--stn-chart-col-padding-x);
+}
+
+/* Highlight Box (on hover or active) */
+.stn-chart-bar__highlight {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: calc(-1 * var(--stn-chart-col-padding-x));
+  right: calc(-1 * var(--stn-chart-col-padding-x));
+  height: 100%;
+  background: var(--stn-chart-highlight-bg);
+  border: var(--stn-chart-border-width) solid var(--stn-chart-highlight-border);
+  border-bottom: none;
+  border-radius: var(--stn-radius-8) var(--stn-radius-8) 0 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.stn-chart-bar__col:hover .stn-chart-bar__highlight,
+.stn-chart-bar__col.is-active .stn-chart-bar__highlight {
+  display: block;
+}
+
+/* Bars Wrap inside Column */
+.stn-chart-bar__bars-wrap {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--stn-chart-col-bars-gap);
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+/* Bar Item */
+.stn-chart-bar__item {
+  width: var(--stn-chart-bar-width, var(--stn-chart-bar-width-md));
+  min-width: var(--stn-chart-bar-min-width);
+  border-radius: var(--stn-radius-2) var(--stn-radius-2) 0 0;
+  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Bar Chart Size Modifiers (sm / md / lg) */
+.stn-chart-bar--sm {
+  --stn-chart-bar-width: var(--stn-chart-bar-width-sm);
+}
+
+.stn-chart-bar--md {
+  --stn-chart-bar-width: var(--stn-chart-bar-width-md);
+}
+
+.stn-chart-bar--lg {
+  --stn-chart-bar-width: var(--stn-chart-bar-width-lg);
+}
+
+.stn-chart-bar__col--compact .stn-chart-bar__item {
+  width: var(--stn-chart-bar-width-sm);
+}
+
+/* X-Axis Rotated Label (-36deg) */
+.stn-chart-bar__label {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  font-weight: var(--stn-font-weight-regular);
+  color: var(--stn-chart-bar-label);
+  transform: rotate(-36deg);
+  transform-origin: 100% 0;
+  white-space: nowrap;
+  position: absolute;
+  top: calc(100% + var(--stn-chart-label-offset-top));
+  right: 50%;
+  text-align: right;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.stn-chart-bar__col.is-active .stn-chart-bar__label,
+.stn-chart-bar__col:hover .stn-chart-bar__label {
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-primary);
+}
+
+/* ==========================================================================
+   2. Horizontal Bar Chart (.stn-chart-bar--horizontal)
+   ========================================================================== */
+.stn-chart-bar--horizontal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.stn-chart-bar--horizontal .stn-chart-bar__body {
+  position: relative;
+  flex: 1 1 0%;
+  width: 100%;
+  min-height: var(--stn-chart-body-min-height);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* Vertical Grid Lines for Horizontal Bar Scale */
+.stn-chart-bar__grid-v {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-line-axis-y-bottom) var(--stn-chart-grid-inset-bottom-horizontal) calc(var(--stn-chart-row-label-width) + var(--stn-chart-label-offset-top));
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.stn-chart-bar--no-y-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v,
+.hide-y-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v,
+.stn-chart-bar--horizontal.stn-chart-bar--no-y-axis .stn-chart-bar__grid-v {
+  left: var(--stn-chart-line-axis-y-bottom);
+}
+
+.stn-chart-bar--no-x-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v,
+.hide-x-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v,
+.stn-chart-bar--horizontal.stn-chart-bar--no-x-axis .stn-chart-bar__grid-v {
+  bottom: var(--stn-chart-grid-inset-bottom-compact);
+}
+
+.stn-chart-bar__grid-v-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 0;
+  position: relative;
+}
+
+.stn-chart-bar__grid-v-line {
+  flex: 1;
+  border-left: var(--stn-chart-border-width) dashed var(--stn-chart-grid-line);
+}
+
+.stn-chart-bar__grid-v-line--zero {
+  border-left: var(--stn-chart-border-width) solid var(--stn-chart-zero-line);
+}
+
+.stn-chart-bar__grid-v-label {
+  position: absolute;
+  top: calc(100% + var(--stn-chart-label-offset-top));
+  transform: translateX(-50%);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  line-height: var(--stn-line-height-tight);
+  white-space: nowrap;
+}
+
+.stn-chart-bar--no-x-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v-label,
+.hide-x-axis.stn-chart-bar--horizontal .stn-chart-bar__grid-v-label,
+.stn-chart-bar--horizontal.stn-chart-bar--no-x-axis .stn-chart-bar__grid-v-label {
+  display: none;
+}
+
+/* Bottom Numeric Scale for Horizontal Bar */
+.stn-chart-bar__axis-scale-x {
+  position: absolute;
+  left: calc(var(--stn-chart-row-label-width) + var(--stn-chart-label-offset-top));
+  right: var(--stn-chart-line-axis-y-bottom);
+  bottom: var(--stn-chart-label-offset-top);
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  line-height: var(--stn-line-height-tight);
+}
+
+.stn-chart-bar--no-y-axis.stn-chart-bar--horizontal .stn-chart-bar__axis-scale-x,
+.hide-y-axis.stn-chart-bar--horizontal .stn-chart-bar__axis-scale-x,
+.stn-chart-bar--horizontal.stn-chart-bar--no-y-axis .stn-chart-bar__axis-scale-x {
+  left: var(--stn-chart-line-axis-y-bottom);
+}
+
+.stn-chart-bar--no-x-axis.stn-chart-bar--horizontal .stn-chart-bar__axis-scale-x,
+.hide-x-axis.stn-chart-bar--horizontal .stn-chart-bar__axis-scale-x,
+.stn-chart-bar--horizontal.stn-chart-bar--no-x-axis .stn-chart-bar__axis-scale-x {
+  display: none;
+}
+
+/* Rows Container for Horizontal Bars */
+.stn-chart-bar__rows {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-grid-inset-top) var(--stn-chart-grid-inset-bottom-horizontal) 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: var(--stn-chart-col-bars-gap);
+  z-index: 1;
+}
+
+.stn-chart-bar--no-x-axis.stn-chart-bar--horizontal .stn-chart-bar__rows,
+.hide-x-axis.stn-chart-bar--horizontal .stn-chart-bar__rows,
+.stn-chart-bar--horizontal.stn-chart-bar--no-x-axis .stn-chart-bar__rows {
+  bottom: var(--stn-chart-grid-inset-bottom-compact);
+}
+
+/* Individual Row */
+.stn-chart-bar__row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--stn-chart-row-min-height);
+  background: transparent;
+  border: none;
+  padding: var(--stn-chart-row-padding-y) var(--stn-chart-row-padding-x);
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--stn-radius-4);
+  box-sizing: border-box;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.stn-chart-bar__row:hover,
+.stn-chart-bar__row.is-active {
+  background-color: var(--stn-chart-highlight-bg);
+}
+
+.stn-chart-bar__row--compact {
+  min-height: var(--stn-chart-row-min-height-compact);
+  padding: var(--stn-chart-row-padding-compact-y) var(--stn-chart-row-padding-x);
+}
+
+.stn-chart-bar__row-label {
+  width: var(--stn-chart-row-label-width);
+  flex-shrink: 0;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-11);
+  font-weight: var(--stn-font-weight-regular);
+  color: var(--stn-chart-bar-label);
+  text-align: right;
+  padding-right: var(--stn-chart-row-label-padding-right);
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stn-chart-bar--no-y-axis.stn-chart-bar--horizontal .stn-chart-bar__row-label,
+.hide-y-axis.stn-chart-bar--horizontal .stn-chart-bar__row-label,
+.stn-chart-bar--horizontal.stn-chart-bar--no-y-axis .stn-chart-bar__row-label {
+  display: none;
+}
+
+.stn-chart-bar__row:hover .stn-chart-bar__row-label,
+.stn-chart-bar__row.is-active .stn-chart-bar__row-label {
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-primary);
+}
+
+/* Row Track & Bars */
+.stn-chart-bar__row-track {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--stn-chart-row-track-gap);
+  height: 100%;
+  position: relative;
+  min-width: 0;
+}
+
+.stn-chart-bar__row-val {
+  margin-left: var(--stn-chart-row-val-margin-left);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  font-weight: var(--stn-font-weight-medium);
+  color: var(--stn-text-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.stn-chart-bar--horizontal .stn-chart-bar__item {
+  width: 0%;
+  height: var(--stn-chart-bar-width, var(--stn-chart-bar-width-md));
+  min-height: var(--stn-chart-bar-min-width);
+  border-radius: 0 var(--stn-radius-2) var(--stn-radius-2) 0;
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ==========================================================================
+   3. Axis Show/Hide Modifiers (Class Based)
+   ========================================================================== */
+.stn-chart-bar--no-x-axis .stn-chart-bar__label,
+.hide-x-axis .stn-chart-bar__label {
+  display: none;
+}
+
+.stn-chart-bar--no-y-axis .stn-chart-bar__grid,
+.hide-y-axis .stn-chart-bar__grid {
+  display: none;
+}
+
+.stn-chart-bar--no-y-axis .stn-chart-bar__columns,
+.hide-y-axis .stn-chart-bar__columns {
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-col-padding-x) var(--stn-chart-grid-inset-bottom) var(--stn-chart-grid-row-gap);
+}

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);
 }