@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/TableRowEdit/TableRowEdit.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+import { Checkbox } from "../Checkbox";
+import { pinnedStyle, type TableHeaderAlign } from "../TableHeader";
+import type { TableRowColumn } from "../TableRow";
+import rowStyles from "../TableRow/TableRow.module.css";
+import styles from "./TableRowEdit.module.css";
+
+/* ────────────────────────────────────────────────────────────
+   TableRowEdit
+   edit 모드 — Notion/Excel 스타일. 행 전체가 아닌 "셀"이 상호작용 단위.
+   세로 구분선이 강제된다. 셀 콘텐츠는 호출 측에서 columns[].render로 꽂음
+   (TableCell* 또는 Input/Select 등 편집 요소).
+
+   variant 없음(line 외곽 고정). size는 sm(36)/md(40) 두 가지만 —
+   edit은 스프레드시트 톤이라 lg 같은 큰 밀도는 어울리지 않음.
+   ──────────────────────────────────────────────────────────── */
+
+export type TableRowEditSize = "sm" | "md";
+
+export type TableRowEditProps<T = unknown> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "role"
+> & {
+  size?: TableRowEditSize;
+  columns: TableRowColumn<T>[];
+  order?: string[];
+  widths?: Record<string, number>;
+  data: T;
+
+  /** 맨 앞 체크박스 셀 — 헤더 selectable과 짝. Notion처럼 '행 선택' 보조. */
+  selectable?: boolean;
+  selected?: boolean;
+  onSelectedChange?: (next: boolean) => void;
+
+  /** 현재 포커스/편집 중인 셀의 column key. */
+  activeCellKey?: string;
+  /** 셀 클릭/키보드 활성화 시 호출. */
+  onCellActivate?: (key: string) => void;
+
+  disabled?: boolean;
+};
+
+/* ────────────────────────────────────────────────────────────
+   Utilities (TableRow와 동일)
+   ──────────────────────────────────────────────────────────── */
+
+function toCssSize(v: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === "number" ? `${v}px` : v;
+}
+
+function alignToJustify(
+  align: TableHeaderAlign | undefined,
+): CSSProperties["justifyContent"] {
+  return align === "end" ? "flex-end" : align === "center" ? "center" : "flex-start";
+}
+
+function resolveOrder<T>(columns: TableRowColumn<T>[], order?: string[]): string[] {
+  if (!order) return columns.map((c) => c.key);
+  const known = new Set(columns.map((c) => c.key));
+  const filtered = order.filter((k) => known.has(k));
+  const missing = columns.map((c) => c.key).filter((k) => !filtered.includes(k));
+  return [...filtered, ...missing];
+}
+
+/* ────────────────────────────────────────────────────────────
+   Component
+   ──────────────────────────────────────────────────────────── */
+
+function TableRowEditInner<T>(
+  props: TableRowEditProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    className,
+    size = "md",
+    columns,
+    order,
+    widths,
+    data,
+    selectable = false,
+    selected = false,
+    onSelectedChange,
+    activeCellKey,
+    onCellActivate,
+    disabled = false,
+    ...rest
+  } = props;
+
+  const orderedKeys = resolveOrder(columns, order);
+  const columnMap = new Map(columns.map((c) => [c.key, c]));
+
+  /* 외곽/높이는 edit 전용으로 .edit에서 그린다 — TableRow의 .line/sizeMd를
+     쓰면 셀 padding이 0으로 cascade되고 행 높이도 48px(터치 톤)이 되어
+     스프레드시트 톤과 어긋남. */
+  const rootClass = [
+    rowStyles.root,
+    styles.edit,
+    size === "sm" ? styles.sizeSm : styles.sizeMd,
+    selected ? styles.selected : "",
+    disabled ? rowStyles.disabled : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  /* 체크박스 셀 자체 클릭이 다른 핸들러로 전파되지 않도록 stop. */
+  const stop = (e: MouseEvent) => e.stopPropagation();
+
+  const activateCell = (key: string) => {
+    if (disabled) return;
+    onCellActivate?.(key);
+  };
+
+  const handleCellKeyDown = (
+    e: KeyboardEvent<HTMLDivElement>,
+    key: string,
+  ) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      activateCell(key);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      role="row"
+      aria-selected={selected || undefined}
+      aria-disabled={disabled || undefined}
+      className={rootClass}
+      {...rest}
+    >
+      {selectable && (
+        <div
+          className={rowStyles.selectCell}
+          onClick={stop}
+          data-edit-cell="select"
+        >
+          <Checkbox
+            checked={selected}
+            disabled={disabled}
+            onChange={(e) => onSelectedChange?.(e.currentTarget.checked)}
+            aria-label="행 선택"
+          />
+        </div>
+      )}
+
+      {orderedKeys.map((key, idx) => {
+        const col = columnMap.get(key);
+        if (!col) return null;
+        const cssWidth =
+          widths?.[col.key] !== undefined
+            ? `${widths[col.key]}px`
+            : toCssSize(col.width);
+        const slotStyle: CSSProperties = {
+          width: cssWidth,
+          minWidth: toCssSize(col.minWidth) ?? cssWidth,
+          flex: col.flex ? "1 1 0" : undefined,
+          justifyContent: alignToJustify(col.align),
+          ...pinnedStyle(col, orderedKeys, columnMap, widths ?? {}),
+        };
+        const content: ReactNode = col.render
+          ? col.render(data)
+          : (data as Record<string, ReactNode>)?.[col.key];
+        const editable = col.editable !== false;
+        const isActive = editable && !disabled && activeCellKey === col.key;
+        /* 세로 구분선은 editable 여부와 무관하게 모든 셀 사이에 균일하게.
+           엑셀 톤 "셀 그리드" 신호는 일관성이 핵심 — read-only 셀만 선이 빠지면
+           리듬이 깨져 보임. 첫 데이터 셀은 왼쪽에 선 없음(테이블 외곽).
+           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선. */
+        const showLeftDivider = idx > 0 || selectable;
+        return (
+          <div
+            key={col.key}
+            data-pinned={col.pinned || undefined}
+            className={rowStyles.cellSlot}
+            style={slotStyle}
+          >
+            <div
+              role="cell"
+              className={[
+                rowStyles.cell,
+                editable ? styles.editCell : styles.readonlyCell,
+                isActive ? styles.cellActive : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+              data-align={col.align ?? "start"}
+              data-active={isActive || undefined}
+              data-divider={showLeftDivider || undefined}
+              tabIndex={editable && !disabled && !isActive ? 0 : undefined}
+              onMouseDown={(e) => {
+                if (!editable || isActive) return;
+                /* preventDefault 중요 — 셀의 role/tabIndex 때문에 네이티브 focus가
+                   셀로 이동하면서 바로 뒤에 마운트될 input의 focus를 뺏음 →
+                   React useEffect에서 input.focus() 후 네이티브 focus 반환 →
+                   input blur → onBlur commit → clearActive 로 활성이 즉시 꺼지는
+                   레이스. mouseDown에서 default를 끊으면 포커스 이동이 발생
+                   안 해 input focus가 안정적으로 유지된다. */
+                e.preventDefault();
+                activateCell(col.key);
+              }}
+              onFocus={editable && !isActive ? () => activateCell(col.key) : undefined}
+              onKeyDown={
+                editable && !isActive ? (e) => handleCellKeyDown(e, col.key) : undefined
+              }
+            >
+              {isActive ? (
+                /* 활성: editor(input/select 등)를 셀 안에 바로 꽂음. editorHost는
+                   nowrap/mask 없는 flex container라 editor가 셀 폭을 꽉 채움.
+                   cellInner와 editorHost 둘 중 하나만 렌더해 같은 render(data)가
+                   두 번 마운트되는 것을 방지. */
+                <div
+                  className={styles.editorHost}
+                  onMouseDown={(e) => e.stopPropagation()}
+                >
+                  {content}
+                </div>
+              ) : (
+                /* 비활성 콘텐츠 — TableRow의 cellInner(nowrap + mask fade). */
+                <span className={rowStyles.cellInner}>{content}</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const TableRowEdit = forwardRef(TableRowEditInner) as <T>(
+  props: TableRowEditProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
+) => ReturnType<typeof TableRowEditInner>;
+
+export { TableRowEdit };

package/assets/components/TableRowEdit/index.ts

@@ -0,0 +1,2 @@
+export { TableRowEdit } from "./TableRowEdit";
+export type { TableRowEditProps, TableRowEditSize } from "./TableRowEdit";

package/assets/components/TableRowSelect/TableRowSelect.module.css

@@ -0,0 +1,23 @@
+/* TableRowSelect
+   ───────────────────────────────────────────────────────────────
+   select 모드 전용 CSS. 레이아웃·사이즈·variant·fade mask는 TableRow.module.css
+   를 그대로 상속해서 공유한다. 여기선 "선택됨" 상태의 시각만 정의.
+
+   원칙
+   - selected 행은 hover보다 뚜렷하게 — primary 톤의 아주 옅은 배경.
+     hover 토큰(--hover, 중성 알파)과 구분돼야 "현재 체크된 상태"가 명확.
+   - selected 위 hover 시엔 톤을 덮지 않는다 — hover가 selected를 지워버리면
+     "지금 선택된 것"이 사라지는 혼동 발생. [[feedback/hover-over-active]] 원칙.
+*/
+
+/* 선택된 행 — hover 톤과 동일한 중성 알파 배경.
+   TableRow(navigate)의 active 상태와 같은 톤 체계 — "지금 포커스된/선택된 행" 신호가
+   컴포넌트 간 일관되게 유지된다. */
+.selected {
+  background: var(--hover);
+}
+
+/* hover가 selected를 덮지 않도록 톤 유지. */
+.selected:hover {
+  background: var(--hover) !important;
+}

package/assets/components/TableRowSelect/TableRowSelect.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+import type {
+  TableHeaderAlign,
+  TableHeaderVariant,
+} from "../TableHeader";
+import type { TableRowColumn, TableRowSize } from "../TableRow";
+import rowStyles from "../TableRow/TableRow.module.css";
+import styles from "./TableRowSelect.module.css";
+
+/* ────────────────────────────────────────────────────────────
+   TableRowSelect
+   ──────────────────────────────────────────────────────────── */
+
+export type TableRowSelectProps<T = unknown> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "role"
+> & {
+  variant?: TableHeaderVariant;
+  size?: TableRowSize;
+  columns: TableRowColumn<T>[];
+  order?: string[];
+  widths?: Record<string, number>;
+  data: T;
+
+  /** 현재 행 선택 상태. */
+  selected?: boolean;
+  /** 행 클릭 또는 Space 키로 토글될 때 호출. */
+  onSelectedChange?: (next: boolean) => void;
+
+  disabled?: boolean;
+};
+
+/* ────────────────────────────────────────────────────────────
+   Utilities (TableRow와 동일)
+   ──────────────────────────────────────────────────────────── */
+
+function toCssSize(v: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === "number" ? `${v}px` : v;
+}
+
+function alignToJustify(
+  align: TableHeaderAlign | undefined,
+): CSSProperties["justifyContent"] {
+  return align === "end" ? "flex-end" : align === "center" ? "center" : "flex-start";
+}
+
+function resolveOrder<T>(columns: TableRowColumn<T>[], order?: string[]): string[] {
+  if (!order) return columns.map((c) => c.key);
+  const known = new Set(columns.map((c) => c.key));
+  const filtered = order.filter((k) => known.has(k));
+  const missing = columns.map((c) => c.key).filter((k) => !filtered.includes(k));
+  return [...filtered, ...missing];
+}
+
+/* ────────────────────────────────────────────────────────────
+   Component
+   ──────────────────────────────────────────────────────────── */
+
+function TableRowSelectInner<T>(
+  props: TableRowSelectProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    className,
+    variant = "line",
+    size = "md",
+    columns,
+    order,
+    widths,
+    data,
+    selected = false,
+    onSelectedChange,
+    disabled = false,
+    onKeyDown,
+    tabIndex,
+    ...rest
+  } = props;
+
+  const orderedKeys = resolveOrder(columns, order);
+  const columnMap = new Map(columns.map((c) => [c.key, c]));
+
+  const rootClass = [
+    rowStyles.root,
+    variant === "plate" ? rowStyles.plate : rowStyles.line,
+    size === "sm"
+      ? rowStyles.sizeSm
+      : size === "lg"
+        ? rowStyles.sizeLg
+        : rowStyles.sizeMd,
+    selected ? styles.selected : "",
+    disabled ? rowStyles.disabled : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const toggle = () => {
+    if (disabled) return;
+    onSelectedChange?.(!selected);
+  };
+
+  const handleRowClick = (e: MouseEvent<HTMLDivElement>) => {
+    rest.onClick?.(e);
+    toggle();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(e);
+    if (disabled) return;
+    if (e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      role="row"
+      aria-selected={selected || undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? undefined : (tabIndex ?? 0)}
+      className={rootClass}
+      onClick={disabled ? undefined : handleRowClick}
+      onKeyDown={disabled ? undefined : handleKeyDown}
+      {...rest}
+    >
+      {orderedKeys.map((key) => {
+        const col = columnMap.get(key);
+        if (!col) return null;
+        const cssWidth =
+          widths?.[col.key] !== undefined
+            ? `${widths[col.key]}px`
+            : toCssSize(col.width);
+        const slotStyle: CSSProperties = {
+          width: cssWidth,
+          minWidth: toCssSize(col.minWidth) ?? cssWidth,
+          flex: col.flex ? "1 1 0" : undefined,
+          justifyContent: alignToJustify(col.align),
+        };
+        const content: ReactNode = col.render
+          ? col.render(data)
+          : (data as Record<string, ReactNode>)?.[col.key];
+        return (
+          <div key={col.key} className={rowStyles.cellSlot} style={slotStyle}>
+            <div
+              role="cell"
+              className={rowStyles.cell}
+              data-align={col.align ?? "start"}
+            >
+              <span className={rowStyles.cellInner}>{content}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const TableRowSelect = forwardRef(TableRowSelectInner) as <T>(
+  props: TableRowSelectProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
+) => ReturnType<typeof TableRowSelectInner>;
+
+export { TableRowSelect };

package/assets/components/TableRowSelect/index.ts

@@ -0,0 +1,2 @@
+export { TableRowSelect } from "./TableRowSelect";
+export type { TableRowSelectProps } from "./TableRowSelect";

package/assets/components/Tabs/Tabs.module.css

@@ -0,0 +1,234 @@
+/* Tabs — 두 variant
+   ─ underline: 하단에 인디케이터 바. 콘텐츠 전환의 지배적 표준.
+   ─ segmented: 연한 배경 컨테이너 안에 pill. 3~4개 옵션 중 하나 선택.
+
+   축 반응:
+   ─ Density → --control-h-* (트리거 높이), --font-scale (라벨), --space-scale (gap)
+   ─ Shape   → segmented의 컨테이너/트리거 radius
+   ─ Motion  → 상태 전환 duration/easing
+*/
+
+/* Root ─────────────────────────────────────────────────────── */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+/* List ─────────────────────────────────────────────────────── */
+.list {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+/* underline: 아래 경계선. 트리거의 하단 바가 이 위에 겹쳐 인디케이터 역할. */
+.listUnderline {
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--border);
+}
+
+/* text: 컨테이너·라인·인디케이터 전부 없음. 순수 텍스트 위계만.
+   페이지 헤더 sub-nav나 카드 안 미니 스위처처럼 "공간을 절대 안 먹는" 탭. */
+.listText {
+  gap: var(--space-4);
+}
+
+/* segmented: 연한 회색 컨테이너. 안에서 pill이 슬라이드.
+   기본 full-width + 트리거 균일 분배가 가장 흔한 유즈케이스.
+   폭을 내용만큼으로 조이고 싶으면 부모에서 width/max-width를 조이거나
+   list에 width:auto를 덮으면 된다. */
+.listSegmented {
+  gap: var(--space-0_5);
+  padding: var(--space-1);
+  background: var(--bg-muted);
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+/* Trigger 공통 ────────────────────────────────────────────── */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1_5);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--fg-muted);
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  position: relative;
+  z-index: var(--z-docked);
+}
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.trigger:hover:not(:disabled) {
+  color: var(--fg);
+}
+.trigger[data-state="active"] {
+  color: var(--fg-strong);
+}
+.trigger:hover:not(:disabled) .icon {
+  opacity: 1;
+}
+.trigger[data-state="active"] .icon {
+  opacity: 1;
+}
+
+/* Sizes — Button 계열과 동일한 --control-h-* 기반 */
+.size_sm .trigger { height: var(--control-h-sm); font-size: var(--label-sm-size); letter-spacing: var(--label-tracking); }
+.size_md .trigger { height: var(--control-h-md); font-size: var(--label-md-size); letter-spacing: var(--label-tracking); }
+.size_lg .trigger { height: var(--control-h-lg); font-size: var(--label-md-size); letter-spacing: var(--label-tracking); }
+
+/* Underline variant ─────────────────────────────────────────
+   개별 트리거의 ::after가 아니라 list에 붙은 단일 .underlineBar가
+   활성 트리거 위치(--tab-indicator-x/w)로 슬라이드. 라인은 텍스트 폭에
+   맞추기 위해 left/right 여백을 트리거 padding과 동일하게 뺀다. */
+.triggerUnderline {
+  padding-inline: var(--space-2);
+  position: relative;
+}
+.size_sm .triggerUnderline { padding-inline: var(--space-1_5); }
+.size_lg .triggerUnderline { padding-inline: var(--space-3); }
+
+.listUnderline { position: relative; }
+
+.underlineBar {
+  position: absolute;
+  left: 0;
+  bottom: calc(var(--hairline) * -1);
+  height: var(--hairline);
+  width: calc(var(--tab-indicator-w) - var(--space-2) * 2);
+  transform: translateX(calc(var(--tab-indicator-x) + var(--space-2)));
+  background: var(--fg-strong);
+  pointer-events: none;
+}
+.size_sm .underlineBar {
+  width: calc(var(--tab-indicator-w) - var(--space-1_5) * 2);
+  transform: translateX(calc(var(--tab-indicator-x) + var(--space-1_5)));
+}
+.size_lg .underlineBar {
+  width: calc(var(--tab-indicator-w) - var(--space-3) * 2);
+  transform: translateX(calc(var(--tab-indicator-x) + var(--space-3)));
+}
+/* ready=true 이후에만 transition — 초기 배치는 순간이동. */
+.listUnderline[data-ready="true"] .underlineBar {
+  transition:
+    transform var(--duration-slow) var(--ease-in-out),
+    width var(--duration-slow) var(--ease-in-out);
+}
+
+/* Text variant ─────────────────────────────────────────────
+   장식 없음. 색만으로 위계 표현 — muted(기본) → fg(hover) → fg-strong(active).
+   좌우 패딩도 최소로 잡아 시각적 존재감을 낮춤. */
+.triggerText {
+  padding-inline: var(--space-1);
+}
+.size_sm .triggerText { padding-inline: var(--space-0_5); }
+.size_lg .triggerText { padding-inline: var(--space-1_5); }
+
+.triggerText {
+  transition:
+    color var(--duration-slower) var(--ease-in-out),
+    background var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.triggerText[data-state="active"] {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Segmented variant ────────────────────────────────────────
+   활성 표면(bg + shadow-xs)은 list에 얹힌 .pill이 담당하고, 트리거는
+   색만 바뀐다. pill이 활성 트리거 위치(--tab-indicator-x/w)로 슬라이드. */
+.listSegmented { position: relative; }
+
+.triggerSegmented {
+  padding-inline: var(--space-3);
+  border-radius: var(--radius-sm);
+  flex: 1 1 0;
+  min-width: 0;
+  position: relative;
+  z-index: var(--z-raise);
+}
+.size_sm .triggerSegmented { padding-inline: var(--space-2); border-radius: var(--radius-xs); }
+.size_lg .triggerSegmented { padding-inline: var(--space-4); border-radius: var(--radius-sm); }
+
+.size_sm .listSegmented .trigger { height: calc(var(--control-h-sm) - var(--space-1)); }
+.size_md .listSegmented .trigger { height: calc(var(--control-h-md) - var(--space-1)); }
+.size_lg .listSegmented .trigger { height: calc(var(--control-h-lg) - var(--space-1)); }
+
+.triggerSegmented:hover:not(:disabled):not([data-state="active"]) {
+  background: var(--hover);
+}
+.triggerSegmented[data-state="active"] {
+  color: var(--fg-strong);
+}
+
+.pill {
+  position: absolute;
+  top: var(--space-1);
+  bottom: var(--space-1);
+  left: 0;
+  width: var(--tab-indicator-w);
+  transform: translateX(var(--tab-indicator-x));
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-xs);
+  pointer-events: none;
+  z-index: var(--z-base);
+}
+.size_sm .pill { border-radius: var(--radius-xs); }
+.size_lg .pill { border-radius: var(--radius-sm); }
+.listSegmented[data-ready="true"] .pill {
+  transition:
+    transform var(--duration-slow) var(--ease-in-out),
+    width var(--duration-slow) var(--ease-in-out);
+}
+
+/* Icon / label slots — Button과 동일 규칙 */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.75;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+.icon > svg {
+  display: block;
+}
+.label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Panel ───────────────────────────────────────────────────── */
+.panel {
+  min-width: 0;
+}
+.panel:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  border-radius: var(--radius-xs);
+}