@stn-uiux/pub-ui 0.1.86 → 0.1.88

package/styles/components/stn-menu.css

@@ -0,0 +1,467 @@
+/**
+ * ==========================================================================
+ * STN Design System — StnMenu CSS
+ * 
+ * 4대 표준 규격(Size, Width, Semantic Tokens) 엄격 준수
+ * ==========================================================================
+ */
+
+/* ==========================================================================
+   1. CSS Custom Properties (Menu Semantic Tokens)
+   ========================================================================== */
+:root {
+  --stn-menu-bg: var(--stn-dropdown-menu-bg, var(--stn-elevation-surface-0));
+  --stn-menu-border: var(--stn-dropdown-menu-border, var(--stn-border-subtle));
+  --stn-menu-shadow: var(--stn-dropdown-menu-shadow, var(--stn-shadow-md));
+  --stn-menu-radius: var(--stn-radius-8, 8px);
+
+  /* 호버 상태: 드롭다운 옵션 hover 스타일과 100% 동일하게 일원화 */
+  --stn-menu-item-hover: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-hover-fg: var(--stn-text-primary);
+
+  /* 클릭/누름(Active) 상태: 드롭다운 옵션 active 스타일과 일치 */
+  --stn-menu-item-active: var(--stn-dropdown-menu-hover-bg);
+
+  /* 선택(Selected) 상태: 드롭다운 옵션 selected 스타일과 일치 */
+  --stn-menu-item-selected: var(--stn-dropdown-menu-selected-bg);
+  --stn-menu-item-selected-hover: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-selected-active: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-selected-fg: var(--stn-primary);
+
+  /* 위험/파괴적(Destructive) 상태 */
+  --stn-menu-item-destructive-fg: var(--stn-grade-critical);
+  --stn-menu-item-destructive-hover: color-mix(in srgb, var(--stn-grade-critical) 12%, var(--stn-dropdown-menu-hover-bg));
+  --stn-menu-item-destructive-active: color-mix(in srgb, var(--stn-grade-critical) 20%, var(--stn-dropdown-menu-hover-bg));
+}
+
+/* ==========================================================================
+   2. StnMenu Root & Paper Box (드롭다운 .select_option과 100% 일치)
+   ========================================================================== */
+.stn-menu-paper {
+  box-sizing: border-box;
+  background: var(--stn-menu-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-menu-border);
+  border-radius: var(--stn-menu-radius, var(--stn-radius-8, 8px));
+  box-shadow: var(--stn-menu-shadow);
+  color: var(--stn-text-primary);
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: max-content;
+  min-width: var(--stn-menu-min-width, var(--stn-size-140, 140px));
+  max-width: calc(100vw - var(--stn-space-32, 32px));
+  z-index: var(--stn-menu-z, var(--stn-elevation-z-popover, 250));
+  padding: var(--stn-space-4, 4px); /* StnDropdown .select_option과 100% 동일한 상하좌우 4px 패딩 */
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
+}
+
+/* Elevation Shadow Levels */
+.stn-menu-paper--elev-0 { box-shadow: none; }
+.stn-menu-paper--elev-1 { box-shadow: var(--stn-shadow-sm); }
+.stn-menu-paper--elev-2 { box-shadow: var(--stn-shadow-md); }
+.stn-menu-paper--elev-3 { box-shadow: var(--stn-shadow-lg); }
+
+/* ==========================================================================
+   3. StnMenuList (메뉴 아이템 리스트 컨테이너)
+   ========================================================================== */
+.stn-menu-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-2, 2px);
+  width: 100%;
+}
+
+.stn-menu-list > li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ==========================================================================
+   4. 5대 표준 Size 규격 (xs · sm · md · lg · xl)
+   ========================================================================== */
+.stn-menu--xs,
+.stn-menu-list--xs,
+.stn-menu-item--xs {
+  --stn-menu-item-height: var(--stn-menu-item-height-xs, var(--stn-size-24, 24px));
+  --stn-menu-item-padding-y: var(--stn-space-2, 2px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+  --stn-menu-item-font-size: var(--stn-font-size-caption, 11px);
+  --stn-menu-item-icon-size: var(--stn-size-14, 14px);
+  --stn-menu-item-gap: var(--stn-space-4, 4px);
+}
+
+.stn-menu--sm,
+.stn-menu-list--sm,
+.stn-menu-item--sm,
+.stn-menu-list--dense,
+.stn-menu-item--dense {
+  --stn-menu-item-height: var(--stn-menu-item-height-sm, var(--stn-size-28, 28px));
+  --stn-menu-item-padding-y: var(--stn-space-4, 4px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+  --stn-menu-item-font-size: var(--stn-font-size-caption, 12px);
+  --stn-menu-item-icon-size: var(--stn-size-16, 16px);
+  --stn-menu-item-gap: var(--stn-space-4, 4px);
+}
+
+/* StnDropdown .select_option > li 와 100% 동일한 md 기본 규격 (SSOT) */
+.stn-menu--md,
+.stn-menu-list--md,
+.stn-menu-item--md {
+  --stn-menu-item-height: var(--stn-menu-item-height-md, var(--stn-size-32, 32px));
+  --stn-menu-item-padding-y: var(--stn-space-6, 6px);
+  --stn-menu-item-padding-x: var(--stn-space-8, 8px);
+  --stn-menu-item-font-size: var(--stn-text-body-small-size, 13px);
+  --stn-menu-item-icon-size: var(--stn-size-16, 16px);
+  --stn-menu-item-gap: var(--stn-space-6, 6px);
+}
+
+.stn-menu--lg,
+.stn-menu-list--lg,
+.stn-menu-item--lg {
+  --stn-menu-item-height: var(--stn-menu-item-height-lg, var(--stn-size-38, 38px));
+  --stn-menu-item-padding-y: var(--stn-space-8, 8px);
+  --stn-menu-item-padding-x: var(--stn-space-10, 10px);
+  --stn-menu-item-font-size: var(--stn-font-size-body-2, 14px);
+  --stn-menu-item-icon-size: var(--stn-size-18, 18px);
+  --stn-menu-item-gap: var(--stn-space-8, 8px);
+}
+
+.stn-menu--xl,
+.stn-menu-list--xl,
+.stn-menu-item--xl {
+  --stn-menu-item-height: var(--stn-menu-item-height-xl, var(--stn-size-44, 44px));
+  --stn-menu-item-padding-y: var(--stn-space-10, 10px);
+  --stn-menu-item-padding-x: var(--stn-space-12, 12px);
+  --stn-menu-item-font-size: var(--stn-font-size-body-1, 16px);
+  --stn-menu-item-icon-size: var(--stn-size-20, 20px);
+  --stn-menu-item-gap: var(--stn-space-10, 10px);
+}
+
+/* ==========================================================================
+   5. 패딩 규격 프리셋 (Padding Presets)
+   ========================================================================== */
+.stn-menu-list--pad-none,
+.stn-menu-item--pad-none,
+.stn-menu-list--pad-none .stn-menu-item {
+  --stn-menu-item-padding-y: 0;
+  --stn-menu-item-padding-x: 0;
+}
+
+.stn-menu-list--pad-xs,
+.stn-menu-item--pad-xs,
+.stn-menu-list--pad-xs .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-2, 2px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+}
+
+.stn-menu-list--pad-sm,
+.stn-menu-item--pad-sm,
+.stn-menu-list--pad-sm .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-4, 4px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+}
+
+.stn-menu-list--pad-md,
+.stn-menu-item--pad-md,
+.stn-menu-list--pad-md .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-6, 6px);
+  --stn-menu-item-padding-x: var(--stn-space-8, 8px);
+}
+
+.stn-menu-list--pad-lg,
+.stn-menu-item--pad-lg,
+.stn-menu-list--pad-lg .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-8, 8px);
+  --stn-menu-item-padding-x: var(--stn-space-10, 10px);
+}
+
+.stn-menu-list--pad-xl,
+.stn-menu-item--pad-xl,
+.stn-menu-list--pad-xl .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-10, 10px);
+  --stn-menu-item-padding-x: var(--stn-space-12, 12px);
+}
+
+/* ==========================================================================
+   6. 4대 표준 너비 규격 (Width Presets — STN 4대 표준 규격: .w80 ~ .w200, .full)
+   ========================================================================== */
+.stn-menu.w80  { width: var(--stn-size-80); min-width: var(--stn-size-80); }
+.stn-menu.w100 { width: var(--stn-size-100); min-width: var(--stn-size-100); }
+.stn-menu.w120 { width: var(--stn-size-120); min-width: var(--stn-size-120); }
+.stn-menu.w140 { width: var(--stn-size-140); min-width: var(--stn-size-140); }
+.stn-menu.w160 { width: var(--stn-size-160); min-width: var(--stn-size-160); }
+.stn-menu.w180 { width: var(--stn-size-180); min-width: var(--stn-size-180); }
+.stn-menu.w200 { width: var(--stn-size-200); min-width: var(--stn-size-200); }
+.stn-menu.full { width: 100%; max-width: 100%; }
+
+/* 페이퍼 내부 리스트는 페이퍼 안쪽 패딩 영역(100%)을 채우도록 하여 우측 짤림 방지 */
+.stn-menu-paper .stn-menu-list {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* ==========================================================================
+   7. StnMenuItem (개별 메뉴 버튼 행) — StnDropdown li와 100% 동일 규격
+   ========================================================================== */
+.stn-menu-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  border-radius: var(--stn-radius-4, 4px);
+  min-height: var(--stn-menu-item-height, 32px);
+  padding: var(--stn-menu-item-padding-y, var(--stn-space-6, 6px)) var(--stn-menu-item-padding-x, var(--stn-space-8, 8px));
+  gap: var(--stn-menu-item-gap, var(--stn-space-6, 6px));
+  background: transparent;
+  border: none;
+  color: var(--stn-text-primary);
+  font-size: var(--stn-menu-item-font-size, var(--stn-text-body-small-size, 13px));
+  line-height: var(--stn-line-height-tight, 1.4);
+  font-weight: var(--stn-font-weight-medium, 500);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color var(--stn-motion-duration-fast, 150ms) ease,
+    color var(--stn-motion-duration-fast, 150ms) ease;
+  -webkit-appearance: none;
+}
+
+/* 호버 상태 (Hover) — 드롭다운 li:hover와 100% 동일한 hover 스타일 */
+.stn-menu-item:hover:not(.is-disabled),
+.stn-menu-item.is-active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  color: var(--stn-text-primary);
+}
+
+.stn-menu-item:hover:not(.is-disabled) .stn-menu-item-icon:not(:has(.stn-menu-radio)):not(:has(.stn-menu-checkbox)) {
+  color: var(--stn-text-primary);
+}
+
+/* 클릭/누름 상태 (Active / Clicked) */
+.stn-menu-item:active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+}
+
+/* 포커스 링 (Focus Visible — 키보드 탐색) */
+.stn-menu-item:focus-visible {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: calc(var(--stn-focus-ring-width, 2px) * -1);
+}
+
+/* 선택(Selected) 상태 — 드롭다운 li.selected와 100% 동일한 스타일 */
+.stn-menu-item.is-selected {
+  background-color: var(--stn-dropdown-menu-selected-bg);
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-medium, 500);
+}
+
+.stn-menu-item.is-selected .stn-menu-item-icon {
+  color: var(--stn-primary);
+}
+
+/* 선택 항목 호버 */
+.stn-menu-item.is-selected:hover:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  color: var(--stn-primary);
+}
+
+/* 선택 항목 클릭 (Active) */
+.stn-menu-item.is-selected:active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+}
+
+/* 비활성화(Disabled) 상태 */
+.stn-menu-item.is-disabled,
+.stn-menu-item[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 위험/삭제 액션(Destructive) 상태 */
+.stn-menu-item.is-destructive {
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive .stn-menu-item-icon {
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive:hover:not(.is-disabled) {
+  background-color: var(--stn-menu-item-destructive-hover);
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive:active:not(.is-disabled) {
+  background-color: var(--stn-menu-item-destructive-active);
+  transform: scale(0.985);
+}
+
+/* 패딩 규격이 none 일 때는 여백 없이 edge-to-edge 채움 */
+.stn-menu-list--pad-none .stn-menu-item,
+.stn-menu-item--pad-none {
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+/* ==========================================================================
+   8. StnMenuItemIcon (좌측 시각 슬롯)
+   ========================================================================== */
+.stn-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  height: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  min-width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  color: var(--stn-text-secondary);
+  transition: color 0.15s ease;
+}
+
+.stn-menu-item-icon .stn-icon,
+.stn-menu-item-icon svg {
+  width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  height: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+}
+
+/* ==========================================================================
+   9. StnMenuItemText (본문 텍스트 슬롯)
+   ========================================================================== */
+.stn-menu-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-menu-item-text__primary {
+  display: block;
+  font-size: var(--stn-menu-item-font-size, var(--stn-font-size-body-2));
+  font-weight: inherit;
+  color: inherit;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-menu-item-text__secondary {
+  display: block;
+  font-size: calc(var(--stn-menu-item-font-size, var(--stn-font-size-body-2)) - 2px);
+  color: var(--stn-text-tertiary);
+  line-height: 1.35;
+  margin-top: var(--stn-space-2, 2px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 말줄임표 해제 (noWrap=false) */
+.stn-menu-item-text--wrap,
+.stn-menu-item-text--wrap .stn-menu-item-text__primary,
+.stn-menu-item-text--wrap .stn-menu-item-text__secondary {
+  white-space: normal;
+}
+
+/* 단독 HTML 클래스 지원 (.stn-menu-item-text--nowrap) */
+.stn-menu-item-text--nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 아이콘 없는 항목 정렬 정합성 (Inset Indentation) */
+.stn-menu-item-text--inset {
+  padding-left: calc(var(--stn-menu-item-icon-size, var(--stn-size-16, 16px)) + var(--stn-menu-item-gap, var(--stn-space-6, 6px)));
+}
+
+/* ==========================================================================
+   10. StnMenuShortcut (우측 단축키 힌트)
+   ========================================================================== */
+.stn-menu-item-shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: var(--stn-font-size-caption);
+  color: var(--stn-text-tertiary);
+  font-family: inherit;
+  letter-spacing: 0.04em;
+  padding-left: var(--stn-space-16);
+  user-select: none;
+}
+
+/* ==========================================================================
+   11. StnMenuDivider (공식 StnDivider as="li" SSOT — 메뉴 팝오버 풀블리드 배치)
+   ========================================================================== */
+.stn-menu-divider {
+  display: block;
+  height: 0;
+  width: calc(100% + (var(--stn-space-4, 4px) * 2));
+  margin: var(--stn-space-4, 4px) calc(-1 * var(--stn-space-4, 4px));
+  border-top: var(--stn-size-1, 1px) solid var(--stn-dropdown-menu-border, var(--stn-border-subtle));
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  list-style: none;
+}
+
+/* ==========================================================================
+   12. StnMenuSubheader (그룹 카테고리 헤더)
+   ========================================================================== */
+.stn-menu-subheader {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: var(--stn-space-6, 6px) var(--stn-space-8, 8px) var(--stn-space-2, 2px);
+  font-size: var(--stn-font-size-caption, 11px);
+  font-weight: var(--stn-font-weight-semibold, 600);
+  color: var(--stn-text-tertiary);
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  user-select: none;
+  list-style: none;
+}
+
+/* ==========================================================================
+   13. StnMenuRadio & StnMenuCheckbox (선택 인디케이터)
+   ========================================================================== */
+.stn-menu-radio,
+.stn-menu-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.stn-menu-checkbox.is-checked {
+  color: var(--stn-primary);
+}
+
+.stn-menu-radio svg circle:first-child {
+  transition: stroke 0.15s ease;
+}
+
+.stn-menu-radio svg circle:last-child {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}

package/styles/components/stn-popover.css

@@ -17,6 +17,15 @@
   pointer-events: auto;
 }
 
+/* 서브메뉴/중첩 팝오버용 no-backdrop 모드: 팝오버 전체는 pointer-events 통과, 페이퍼만 상호작용 */
+.stn-popover--no-backdrop.is-open {
+  pointer-events: none;
+}
+
+.stn-popover--no-backdrop .stn-popover__paper {
+  pointer-events: auto;
+}
+
 /* 1. 투명 백드롭 — 배경을 가리지 않고 외부 클릭을 감지 */
 .stn-popover__backdrop {
   position: fixed;

package/styles/components/stn-table.css

@@ -492,7 +492,6 @@ td.stn-table__col-check .stn-checkbox {
   gap: var(--stn-spacing-xs, 4px);
   padding: 0 var(--stn-spacing-md, 16px);
   background: var(--stn-table-row-hover);
-  box-shadow: -12px 0 16px -8px rgba(0, 0, 0, 0.3);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s, visibility 0.2s;