@conscience-technology/ctds 0.3.1 → 0.3.3

package/assets/components/Breadcrumb/Breadcrumb.module.css

@@ -166,6 +166,70 @@
   color: var(--fg);
 }
 
+/* Menu trigger ─── segment 자체가 트리거. Link와 같은 xs · ghost 스펙 + ▾ caret.
+   active=true일 때는 Current와 같은 톤(--fg-strong) + hover는 그대로 유지. */
+.menuTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  height: var(--control-h-xs);
+  padding-inline: var(--space-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  font-size: var(--label-sm-size);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  cursor: pointer;
+  user-select: none;
+  min-width: 0;
+  transition: var(--transition-colors), var(--transition-ring), var(--transition-press);
+}
+.menuTrigger:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.menuTrigger:active {
+  transform: translateY(var(--space-0_5));
+}
+.menuTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.menuTrigger[data-state="open"] {
+  background: var(--hover);
+  color: var(--fg);
+}
+.menuTriggerActive {
+  color: var(--fg-strong);
+}
+.menuTrigger:hover .linkIcon,
+.menuTrigger[data-state="open"] .linkIcon {
+  opacity: 1;
+}
+
+/* ▾ caret ─── 트리거 끝에 붙는 작은 꼬리표. Separator처럼 반응 없음. */
+.menuCaret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--fg-muted);
+  opacity: 0.5;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+.menuCaret > svg {
+  display: block;
+}
+.menuTrigger:hover .menuCaret,
+.menuTrigger[data-state="open"] .menuCaret {
+  opacity: 0.9;
+}
+
 /* Popover surface ─── Select · ContextMenu와 동일한 팝오버 표면.
    ContextMenu.module.css의 .surface를 composes해 시각 규칙 원본을 재사용. */
 .popoverContent {

package/assets/components/Breadcrumb/Breadcrumb.tsx

@@ -139,72 +139,37 @@ const Current = forwardRef<HTMLSpanElement, BreadcrumbCurrentProps>(
 Current.displayName = "Breadcrumb.Current";
 
 // ────────────────────────────────────────────────────────────
-// Ellipsis — 항목이 많을 때 중간 축약. 클릭 시 Select와 동일한 팝오버 표면으로
-// 숨긴 항목 리스트를 연다. items는 필수 — 클릭 불가한 정적 마커는 지원하지 않는다.
+// Shared — Ellipsis·Menu가 공유하는 팝오버 아이템 모델/렌더.
 // ────────────────────────────────────────────────────────────
 
-export type BreadcrumbEllipsisItem = {
+export type BreadcrumbMenuItem = {
   label: ReactNode;
   href?: string;
   onSelect?: () => void;
   leftIcon?: ReactNode;
   disabled?: boolean;
+  /** 현재 선택된 항목. 체크 아이콘이 trailingActions에 자동 삽입. */
+  active?: boolean;
 };
 
-export interface BreadcrumbEllipsisProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
-  /** 숨긴 항목 리스트. 최소 1개. */
-  items: BreadcrumbEllipsisItem[];
-  /** 팝오버 side offset (px). 기본 6. */
-  sideOffset?: number;
-  /** aria-label. 기본 "Show hidden pages". */
-  "aria-label"?: string;
-}
-
-const Ellipsis = forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(
-  (
-    {
-      className,
-      items,
-      sideOffset = 6,
-      "aria-label": ariaLabel = "Show hidden pages",
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <RPopover.Root>
-        <RPopover.Trigger asChild>
-          <button
-            ref={ref}
-            type="button"
-            aria-label={ariaLabel}
-            className={[styles.ellipsisTrigger, className ?? ""].filter(Boolean).join(" ")}
-            {...rest}
-          >
-            &hellip;
-          </button>
-        </RPopover.Trigger>
-        <EllipsisContent items={items} sideOffset={sideOffset} />
-      </RPopover.Root>
-    );
-  },
-);
-Ellipsis.displayName = "Breadcrumb.Ellipsis";
+/** 하위 호환 — 기존 Ellipsis.items 타입명. */
+export type BreadcrumbEllipsisItem = BreadcrumbMenuItem;
 
 /** Portal 하위에서 IconAxis 재주입 — Radix Portal이 트리 컨텍스트를 끊는다. */
-function EllipsisContent({
+function PopoverMenuContent({
   items,
   sideOffset,
+  align = "start",
 }: {
-  items: BreadcrumbEllipsisItem[];
+  items: BreadcrumbMenuItem[];
   sideOffset: number;
+  align?: "start" | "center" | "end";
 }) {
   const iconAxis = useIconAxis();
   return (
     <RPopover.Portal>
       <RPopover.Content
-        align="start"
+        align={align}
         sideOffset={sideOffset}
         collisionPadding={8}
         className={[styles.popoverContent, "m-float"].join(" ")}
@@ -222,8 +187,14 @@ function EllipsisContent({
                       : item.leftIcon,
                   ]
                 : undefined;
+              const trailing = item.active ? [<Icon key="check" name="check" size={14} />] : undefined;
               const inner = (
-                <MenuItem size="sm" disabled={item.disabled} leadingActions={leading}>
+                <MenuItem
+                  size="sm"
+                  disabled={item.disabled}
+                  leadingActions={leading}
+                  trailingActions={trailing}
+                >
                   {item.label}
                 </MenuItem>
               );
@@ -234,6 +205,7 @@ function EllipsisContent({
                       <a
                         href={item.href}
                         role="menuitem"
+                        aria-current={item.active ? "page" : undefined}
                         className={styles.popoverItemLink}
                         aria-disabled={item.disabled || undefined}
                       >
@@ -245,6 +217,7 @@ function EllipsisContent({
                       <button
                         type="button"
                         role="menuitem"
+                        aria-current={item.active ? "page" : undefined}
                         disabled={item.disabled}
                         onClick={() => item.onSelect?.()}
                         className={styles.popoverItemButton}
@@ -263,17 +236,117 @@ function EllipsisContent({
   );
 }
 
+// ────────────────────────────────────────────────────────────
+// Ellipsis — 항목이 많을 때 중간 축약. 클릭 시 팝오버로 숨긴 항목 리스트를 연다.
+// ────────────────────────────────────────────────────────────
+
+export interface BreadcrumbEllipsisProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  /** 숨긴 항목 리스트. 최소 1개. */
+  items: BreadcrumbMenuItem[];
+  /** 팝오버 side offset (px). 기본 6. */
+  sideOffset?: number;
+  /** aria-label. 기본 "Show hidden pages". */
+  "aria-label"?: string;
+}
+
+const Ellipsis = forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(
+  (
+    {
+      className,
+      items,
+      sideOffset = 6,
+      "aria-label": ariaLabel = "Show hidden pages",
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <RPopover.Root>
+        <RPopover.Trigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            aria-label={ariaLabel}
+            className={[styles.ellipsisTrigger, className ?? ""].filter(Boolean).join(" ")}
+            {...rest}
+          >
+            &hellip;
+          </button>
+        </RPopover.Trigger>
+        <PopoverMenuContent items={items} sideOffset={sideOffset} />
+      </RPopover.Root>
+    );
+  },
+);
+Ellipsis.displayName = "Breadcrumb.Ellipsis";
+
+// ────────────────────────────────────────────────────────────
+// Menu — segment 자체가 트리거. ▾ caret으로 형제 전환 UI 노출.
+// active=true면 aria-current="page" 유지 (현재 페이지 자리로 쓸 때).
+// ────────────────────────────────────────────────────────────
+
+export interface BreadcrumbMenuProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  /** 트리거에 표시할 라벨. 아이콘 단독 모드 지원 안 함 — 메뉴 트리거는 라벨 필수. */
+  children: ReactNode;
+  /** 라벨 앞 아이콘. */
+  leftIcon?: ReactNode;
+  /** 메뉴에 넣을 형제/대체 페이지들. */
+  items: BreadcrumbMenuItem[];
+  /** 현재 페이지 자리에 쓸 때 true. aria-current="page" + fg-strong 톤. */
+  active?: boolean;
+  /** 팝오버 side offset (px). 기본 6. */
+  sideOffset?: number;
+}
+
+const Menu = forwardRef<HTMLButtonElement, BreadcrumbMenuProps>(
+  ({ className, children, leftIcon, items, active = false, sideOffset = 6, ...rest }, ref) => {
+    const cls = [styles.menuTrigger, active ? styles.menuTriggerActive : "", className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <RPopover.Root>
+        <RPopover.Trigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            aria-current={active ? "page" : undefined}
+            aria-haspopup="menu"
+            className={cls}
+            {...rest}
+          >
+            {leftIcon && (
+              <span className={styles.linkIcon} aria-hidden>
+                {sizedIcon(leftIcon)}
+              </span>
+            )}
+            <span className={styles.linkLabel}>{children}</span>
+            <span className={styles.menuCaret} aria-hidden>
+              <Icon name="caret-down" size={ICON_SIZE} />
+            </span>
+          </button>
+        </RPopover.Trigger>
+        <PopoverMenuContent items={items} sideOffset={sideOffset} />
+      </RPopover.Root>
+    );
+  },
+);
+Menu.displayName = "Breadcrumb.Menu";
+
 // ────────────────────────────────────────────────────────────
 
 type BreadcrumbCompound = typeof Root & {
   Link: typeof Link;
   Current: typeof Current;
   Ellipsis: typeof Ellipsis;
+  Menu: typeof Menu;
 };
 
 const Breadcrumb = Root as BreadcrumbCompound;
 Breadcrumb.Link = Link;
 Breadcrumb.Current = Current;
 Breadcrumb.Ellipsis = Ellipsis;
+Breadcrumb.Menu = Menu;
 
 export { Breadcrumb };