@stn-uiux/pub-ui 0.1.85 → 0.1.87

package/styles/components/stn-list.css

@@ -0,0 +1,430 @@
+@charset "utf-8";
+/**
+ * StnList — STN 디자인 시스템 표준 목록(List) 컴포넌트 CSS (SSOT)
+ *
+ * 4대 표준 규격:
+ * 1. Size 규격: xs (28px) · sm (36px) · md (44px 표준 기본값) · lg (52px) · xl (60px)
+ * 2. Width 규격: w80 · w100 · w120 · w140 · w160 · w180 · w200 · full
+ * 3. Semantic Token 100% 강제 (var(--stn-*))
+ * 4. Compound Component 완벽 지원 (.stn-list, .stn-list-item, .stn-list-item-button 등)
+ */
+
+/* ==========================================================================
+   1. StnList 루트 컨테이너
+   ========================================================================== */
+.stn-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--stn-space-4) 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: transparent;
+  color: var(--stn-text-primary);
+
+  /* 기본 md 규격 */
+  --stn-list-item-min-height: var(--stn-list-item-height-md);
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+  --stn-list-item-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-line-height: var(--stn-text-body-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-18);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+/* 4대 표준 Size 규격 (스케일별 높이/패딩/폰트) */
+.stn-list--xs,
+.stn-list-item--xs,
+.stn-list-item-button--xs {
+  --stn-list-item-min-height: var(--stn-list-item-height-xs);
+  --stn-list-item-padding-y: var(--stn-space-4);
+  --stn-list-item-padding-x: var(--stn-space-8);
+  --stn-list-item-font-size: var(--stn-text-caption-small-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-label-xsmall-size);
+  --stn-list-item-line-height: var(--stn-text-caption-small-line-height);
+  --stn-list-item-icon-size: var(--stn-size-14);
+  --stn-list-item-gap: var(--stn-space-6);
+}
+
+.stn-list--sm,
+.stn-list-item--sm,
+.stn-list-item-button--sm {
+  --stn-list-item-min-height: var(--stn-list-item-height-sm);
+  --stn-list-item-padding-y: var(--stn-space-6);
+  --stn-list-item-padding-x: var(--stn-space-10);
+  --stn-list-item-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-small-size);
+  --stn-list-item-line-height: var(--stn-text-caption-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-16);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+.stn-list--md,
+.stn-list-item--md,
+.stn-list-item-button--md {
+  --stn-list-item-min-height: var(--stn-list-item-height-md);
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+  --stn-list-item-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-caption-medium-size);
+  --stn-list-item-line-height: var(--stn-text-body-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-18);
+  --stn-list-item-gap: var(--stn-space-8);
+}
+
+.stn-list--lg,
+.stn-list-item--lg,
+.stn-list-item-button--lg {
+  --stn-list-item-min-height: var(--stn-list-item-height-lg);
+  --stn-list-item-padding-y: var(--stn-space-12);
+  --stn-list-item-padding-x: var(--stn-space-14);
+  --stn-list-item-font-size: var(--stn-text-body-large-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-body-small-size);
+  --stn-list-item-line-height: var(--stn-text-body-large-line-height);
+  --stn-list-item-icon-size: var(--stn-size-20);
+  --stn-list-item-gap: var(--stn-space-10);
+}
+
+.stn-list--xl,
+.stn-list-item--xl,
+.stn-list-item-button--xl {
+  --stn-list-item-min-height: var(--stn-list-item-height-xl);
+  --stn-list-item-padding-y: var(--stn-space-16);
+  --stn-list-item-padding-x: var(--stn-space-16);
+  --stn-list-item-font-size: var(--stn-text-title-medium-size);
+  --stn-list-item-secondary-font-size: var(--stn-text-body-medium-size);
+  --stn-list-item-line-height: var(--stn-text-title-medium-line-height);
+  --stn-list-item-icon-size: var(--stn-size-24);
+  --stn-list-item-gap: var(--stn-space-12);
+}
+
+/* 패딩 규격 프리셋 (Padding Presets — pure CSS Custom Property SSOT) */
+.stn-list--pad-none,
+.stn-list-item--pad-none {
+  --stn-list-item-padding-y: 0;
+  --stn-list-item-padding-x: 0;
+  --stn-list-item-min-height: auto;
+}
+
+.stn-list--pad-xs,
+.stn-list-item--pad-xs {
+  --stn-list-item-padding-y: var(--stn-space-4);
+  --stn-list-item-padding-x: var(--stn-space-8);
+}
+
+.stn-list--pad-sm,
+.stn-list-item--pad-sm {
+  --stn-list-item-padding-y: var(--stn-space-6);
+  --stn-list-item-padding-x: var(--stn-space-10);
+}
+
+.stn-list--pad-md,
+.stn-list-item--pad-md {
+  --stn-list-item-padding-y: var(--stn-space-8);
+  --stn-list-item-padding-x: var(--stn-space-12);
+}
+
+.stn-list--pad-lg,
+.stn-list-item--pad-lg {
+  --stn-list-item-padding-y: var(--stn-space-12);
+  --stn-list-item-padding-x: var(--stn-space-14);
+}
+
+.stn-list--pad-xl,
+.stn-list-item--pad-xl {
+  --stn-list-item-padding-y: var(--stn-space-16);
+  --stn-list-item-padding-x: var(--stn-space-16);
+}
+
+.stn-list--disable-padding {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* 외형 변형 (Variants) */
+.stn-list--card {
+  background: var(--stn-elevation-surface-0);
+  border: var(--stn-size-1) solid var(--stn-border-subtle);
+  border-radius: var(--stn-radius-md);
+  box-shadow: var(--stn-shadow-sm);
+  padding: var(--stn-space-6);
+}
+
+.stn-list--bordered {
+  border: var(--stn-size-1) solid var(--stn-border-subtle);
+  border-radius: var(--stn-radius-sm);
+}
+
+/* 스크롤 가능 (Scrollable) */
+.stn-list--scrollable {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 4대 표준 너비 규격 (Width Presets — STN 4대 표준 규격: .w80 ~ .w200, .full) */
+.stn-list.w80  { width: var(--stn-size-80); }
+.stn-list.w100 { width: var(--stn-size-100); }
+.stn-list.w120 { width: var(--stn-size-120); }
+.stn-list.w140 { width: var(--stn-size-140); }
+.stn-list.w160 { width: var(--stn-size-160); }
+.stn-list.w180 { width: var(--stn-size-180); }
+.stn-list.w200 { width: var(--stn-size-200); }
+.stn-list.full { width: 100%; }
+
+/* 들여쓰기 깊이 (Indent Depth for Nested Lists) */
+.stn-list--indent-1 { padding-left: var(--stn-space-24); }
+.stn-list--indent-2 { padding-left: var(--stn-space-36); }
+.stn-list--indent-3 { padding-left: var(--stn-space-48); }
+
+
+/* ==========================================================================
+   2. StnList.Subheader (섹션/카테고리 헤더)
+   ========================================================================== */
+.stn-list-subheader {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: var(--stn-space-6) var(--stn-space-12);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-caption-medium-size);
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-tertiary);
+  line-height: var(--stn-text-caption-medium-line-height, 1.4);
+  letter-spacing: 0.02em;
+  user-select: none;
+  list-style: none;
+}
+
+.stn-list-subheader--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--stn-elevation-surface-0);
+  backdrop-filter: blur(var(--stn-space-8));
+  -webkit-backdrop-filter: blur(var(--stn-space-8));
+}
+
+
+/* ==========================================================================
+   3. StnList.Item (<li> 행 래퍼)
+   ========================================================================== */
+.stn-list-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: var(--stn-list-item-min-height, var(--stn-size-40));
+  padding: var(--stn-list-item-padding-y, var(--stn-space-8)) var(--stn-list-item-padding-x, var(--stn-space-12));
+  gap: var(--stn-list-item-gap, var(--stn-space-8));
+  color: var(--stn-text-primary);
+  text-align: left;
+}
+
+.stn-list-item--disable-padding,
+.stn-list-item.stn-list-item--disable-padding,
+.stn-list-item:has(> .stn-list-item-button) {
+  padding: 0;
+}
+
+.stn-list-item--divider {
+  border-bottom: var(--stn-size-1) solid var(--stn-border-subtle);
+}
+
+.stn-list-item--divider:last-child {
+  border-bottom: none;
+}
+
+
+/* ==========================================================================
+   4. StnList.Button (인터랙션 버튼 / 링크)
+   ========================================================================== */
+.stn-list-item-button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--stn-list-item-min-height, var(--stn-size-40));
+  padding: var(--stn-list-item-padding-y, var(--stn-space-8)) var(--stn-list-item-padding-x, var(--stn-space-12));
+  gap: var(--stn-list-item-gap, var(--stn-space-8));
+  border: none;
+  background: transparent;
+  color: var(--stn-text-primary);
+  border-radius: var(--stn-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  position: relative;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  user-select: none;
+  -webkit-appearance: none;
+}
+
+/* 호버 상태 */
+.stn-list-item-button:hover:not(.is-disabled) {
+  background: color-mix(in srgb, var(--stn-primary) 10%, var(--stn-dropdown-menu-hover-bg));
+}
+
+/* 포커스 링 (접근성) */
+.stn-list-item-button:focus-visible {
+  background: color-mix(in srgb, var(--stn-primary) 10%, var(--stn-dropdown-menu-hover-bg));
+  outline: var(--stn-size-2) solid var(--stn-focus-ring);
+  outline-offset: calc(-1 * var(--stn-size-2));
+}
+
+/* 선택(Active/Selected) 상태 */
+.stn-list-item-button.is-selected {
+  background: color-mix(in srgb, var(--stn-primary) 14%, transparent);
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-semibold);
+}
+
+.stn-list-item-button.is-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 15%;
+  bottom: 15%;
+  width: var(--stn-size-3);
+  background: var(--stn-primary);
+  border-radius: var(--stn-radius-xs);
+}
+
+/* 비활성화 상태 */
+.stn-list-item-button.is-disabled,
+.stn-list-item-button[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+
+/* ==========================================================================
+   5. StnList.Icon & Avatar (좌측 시각 슬롯)
+   ========================================================================== */
+.stn-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  height: var(--stn-list-item-icon-size, var(--stn-size-18));
+  min-width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  color: var(--stn-text-secondary);
+  font-size: var(--stn-list-item-icon-size, var(--stn-size-18));
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.stn-list-item-icon .stn-icon,
+.stn-list-item-icon img,
+.stn-list-item-icon svg {
+  width: var(--stn-list-item-icon-size, var(--stn-size-18));
+  height: var(--stn-list-item-icon-size, var(--stn-size-18));
+}
+
+.stn-list-item-button.is-selected .stn-list-item-icon {
+  color: var(--stn-primary);
+}
+
+.stn-list-item-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: var(--stn-space-12);
+}
+
+
+/* ==========================================================================
+   6. StnList.Text (본문 텍스트 슬롯 — Primary + Secondary)
+   ========================================================================== */
+.stn-list-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+}
+
+.stn-list-item-text__primary {
+  display: block;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-list-item-font-size, var(--stn-text-body-medium-size));
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-list-item-line-height, var(--stn-line-height-default));
+  color: var(--stn-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-list-item-button.is-selected .stn-list-item-text__primary {
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-semibold);
+}
+
+.stn-list-item-text__secondary {
+  display: block;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-list-item-secondary-font-size, var(--stn-text-caption-medium-size));
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-caption-medium-line-height, var(--stn-line-height-reading-3));
+  color: var(--stn-text-tertiary);
+  margin-top: var(--stn-space-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 텍스트 색상 수식어 (Semantic Color Modifier) */
+.stn-list-item-text--color-primary .stn-list-item-text__primary {
+  color: var(--stn-text-primary);
+}
+.stn-list-item-text--color-secondary .stn-list-item-text__primary {
+  color: var(--stn-text-secondary);
+}
+.stn-list-item-text--color-tertiary .stn-list-item-text__primary {
+  color: var(--stn-text-tertiary);
+}
+
+/* 아이콘 없는 항목 정렬 정합성 (Inset Indentation) */
+.stn-list-item-text--inset {
+  padding-left: calc(var(--stn-list-item-icon-size, var(--stn-size-18)) + var(--stn-list-item-gap, var(--stn-space-8)));
+}
+
+
+/* ==========================================================================
+   7. StnList.Action (우측 도킹 다중 액션 슬롯)
+   ========================================================================== */
+.stn-list-item-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+
+/* ==========================================================================
+   8. StnList.Collapse (중첩 접힘/펼침 트랜지션)
+   ========================================================================== */
+.stn-list-collapse {
+  overflow: hidden;
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+  width: 100%;
+  list-style: none;
+}
+
+.stn-list-collapse.is-closed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.stn-list-collapse.is-open {
+  opacity: 1;
+}