@conscience-technology/ctds 0.3.4 → 0.4.0

package/assets/components/Stepper/Stepper.module.css

@@ -1,42 +1,78 @@
 /* Stepper — 다단계 진행 표시 컴포넌트
-   구성: root(container) > item(button) > marker(dot|number) + body(title + hint)
-   축 반응:
-   ─ Density → --space-scale, --font-scale (여백·라벨 크기)
-   ─ Shape   → focus ring radius (marker는 항상 full)
-   ─ Motion  → 상태 전환 duration/easing (transition-colors)
+   구성: root(container) > item(button) > marker + body(title + hint)
+
+   축 (data-* attr):
+   ─ data-orientation      : vertical | horizontal
+   ─ data-marker           : dot | number
+   ─ data-variant          : md | sm
+   ─ data-tone             : primary | neutral
+   ─ data-density          : comfortable | spacious
+   ─ data-hint-placement   : below | inline
+   ─ data-line-style       : dashed | dotted | solid
 
    로컬 색 변수 (root에서 오버라이드 가능):
-   ─ --stepper-fg         : 활성/진행중 스텝 텍스트
+   ─ --stepper-fg         : 활성 스텝 텍스트
    ─ --stepper-fg-muted   : 완료 스텝 텍스트
    ─ --stepper-fg-subtle  : 미도달 스텝 텍스트 · hint
-   ─ --stepper-line       : 스텝 사이 dashed 트리 라인
-   ─ --stepper-dot-idle   : 미도달 dot border
-   ─ --stepper-marker-fg  : done marker 안쪽 텍스트/아이콘 색 (배경 위)
+   ─ --stepper-line       : 스텝 사이 연결선 색
+   ─ --stepper-dot-idle   : 미도달 marker border
+   ─ --stepper-marker     : active/done 공통 강조색 (기본 Primary)
+   ─ --stepper-marker-fg  : done marker 안쪽 글자/아이콘 색
+   ─ --stepper-marker-soft: upcoming·neutral·active 등 soft fill 색
 */
 
 .root {
   --stepper-fg: var(--fg);
   --stepper-fg-muted: var(--fg-muted);
   --stepper-fg-subtle: var(--fg-subtle);
-  --stepper-line: var(--border);
-  --stepper-dot-idle: var(--border);
+  --stepper-line: var(--border-strong);
+  --stepper-dot-idle: var(--border-strong);
+  --stepper-marker: var(--primary);
   --stepper-marker-fg: var(--bg);
+  --stepper-marker-soft: color-mix(in oklab, var(--fg) 8%, transparent);
 
   --stepper-marker-size: var(--space-5);
   --stepper-marker-gap: var(--space-4);
   --stepper-item-gap: var(--space-6);
+  --stepper-title-lh: var(--lh-sm);  /* marker 수직 보정 기준 */
+  --stepper-line-gap: var(--space-1); /* marker ↔ 선 간격 */
 
   display: flex;
   min-width: 0;
   min-height: 0;
 }
 
-/* Orientation ─────────────────────────────────────────── */
+/* ─ Orientation ────────────────────────────────────── */
 
 .vertical { flex-direction: column; }
-.horizontal { flex-direction: row; align-items: flex-start; }
+.horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  --stepper-line-gap: var(--space-2);
+}
+
+/* ─ Variant: md (기본, 큰 marker 24px) vs sm (작은 dot 10px) ─ */
+
+.root[data-variant="md"] {
+  --stepper-marker-size: var(--space-6);  /* 24px — 01 Stripe */
+  --stepper-marker-gap: var(--space-4);
+  --stepper-item-gap: var(--space-6);
+  --stepper-title-lh: var(--lh-base);
+}
+.root[data-variant="sm"] {
+  --stepper-marker-size: var(--space-2_5); /* 10px — 02 헤이딜러 */
+  --stepper-marker-gap: var(--space-3);
+  --stepper-item-gap: var(--space-10);     /* 작은 marker는 호흡 넓게 */
+  --stepper-title-lh: var(--lh-sm);
+}
+
+/* ─ Tone: neutral이면 done·marker 색이 모노톤 ──────── */
+
+.root[data-tone="neutral"] {
+  --stepper-marker: var(--fg);
+}
 
-/* Item ─────────────────────────────────────────────────── */
+/* ─ Item ───────────────────────────────────────────── */
 
 .item {
   appearance: none;
@@ -61,7 +97,7 @@
   box-shadow: var(--ring-shadow);
 }
 
-/* Vertical item: 2-column grid, 아래로 dashed line */
+/* Vertical item: 2-column grid */
 .vertical .item {
   display: grid;
   grid-template-columns: var(--stepper-marker-size) 1fr;
@@ -70,23 +106,8 @@
   padding-bottom: var(--stepper-item-gap);
 }
 .vertical .item:last-child { padding-bottom: 0; }
-.vertical .item:not(:last-child)::before {
-  content: "";
-  position: absolute;
-  left: calc(var(--stepper-marker-size) / 2 - var(--hairline) / 2);
-  top: var(--stepper-marker-size);
-  bottom: 0;
-  width: var(--hairline);
-  background-image: linear-gradient(
-    to bottom,
-    var(--stepper-line) 50%,
-    transparent 50%
-  );
-  background-size: var(--hairline) var(--space-1_5);
-  background-repeat: repeat-y;
-}
 
-/* Horizontal item: marker 위, body 아래로 쌓임, 옆으로 dashed line */
+/* Horizontal item: marker 위, body 아래 */
 .horizontal .item {
   display: grid;
   grid-template-rows: var(--stepper-marker-size) 1fr;
@@ -100,24 +121,61 @@
   flex: 0 0 auto;
   padding-right: 0;
 }
+
+/* ─ Connecting line (vertical: 기본 dashed) ─ */
+
+.vertical .item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--stepper-marker-size) / 2 - var(--hairline) / 2);
+  /* marker가 margin-top만큼 아래로 밀렸고, 선은 marker 바닥에서
+     --stepper-line-gap 만큼 떨어진 지점부터 시작, 아래쪽도 같은 간격 띄움 */
+  top: calc(
+    (var(--stepper-title-lh) - var(--stepper-marker-size)) / 2 +
+      var(--stepper-marker-size) + var(--stepper-line-gap)
+  );
+  bottom: var(--stepper-line-gap);
+  width: var(--hairline);
+  background-image: linear-gradient(
+    to bottom,
+    var(--stepper-line) 65%,
+    transparent 35%
+  );
+  background-size: var(--hairline) var(--space-1_5);
+  background-repeat: repeat-y;
+}
+
 .horizontal .item:not(:last-child)::before {
   content: "";
   position: absolute;
   top: calc(var(--stepper-marker-size) / 2 - var(--hairline) / 2);
-  left: var(--stepper-marker-size);
-  right: 0;
+  left: calc(var(--stepper-marker-size) + var(--stepper-line-gap));
+  right: var(--stepper-line-gap);
   height: var(--hairline);
   background-image: linear-gradient(
     to right,
-    var(--stepper-line) 50%,
-    transparent 50%
+    var(--stepper-line) 65%,
+    transparent 35%
   );
   background-size: var(--space-1_5) var(--hairline);
   background-repeat: repeat-x;
-  margin-inline: var(--space-2);
 }
 
-/* Marker ───────────────────────────────────────────────── */
+/* line-style: solid (01 — 매끈한 1px) — selector 주의:
+   .vertical/.horizontal과 data-line-style attr가 같은 root element에 붙어 있으므로
+   descendant가 아닌 compound selector로 작성. */
+.vertical[data-line-style="solid"] .item:not(:last-child)::before {
+  background: var(--stepper-line);
+  background-image: none;
+  background-size: auto;
+}
+.horizontal[data-line-style="solid"] .item:not(:last-child)::before {
+  background: var(--stepper-line);
+  background-image: none;
+  background-size: auto;
+}
+
+/* ─ Marker ────────────────────────────────────────── */
 
 .marker {
   width: var(--stepper-marker-size);
@@ -131,34 +189,98 @@
   flex-shrink: 0;
   transition: var(--transition-colors);
   font-size: var(--text-xs);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
-  color: inherit;
+  color: var(--stepper-fg-subtle);
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  /* vertical일 때 marker가 title 첫 줄 중앙선에 맞도록 아래로 밀기.
+     --stepper-title-lh는 variant별로 공급되는 title line-height. */
+  margin-top: calc(
+    (var(--stepper-title-lh) - var(--stepper-marker-size)) / 2
+  );
+}
+/* horizontal에서는 marker가 body 위에 위치하므로 보정 off */
+.horizontal .marker {
+  margin-top: 0;
+}
+
+/* ── variant=md (기본) marker scaling ──
+   24px marker 안의 숫자/check도 균형 잡힌 사이즈. */
+.root[data-variant="md"] .marker {
+  font-size: var(--text-xs);
+}
+
+/* ── variant=sm marker는 solid dot (border 없음, soft fill) ── */
+.root[data-variant="sm"] .marker {
+  border: none;
+  background: var(--stepper-dot-idle);
+}
+
+/* ── Upcoming (md variant): soft bg + muted 숫자 (01 Stripe) ── */
+.root[data-variant="md"] .item[data-state="upcoming"] .marker {
+  background: var(--stepper-marker-soft);
+  border-color: transparent;
+}
+
+/* ── Done marker ── */
+/* md + primary tone (기본): Primary fill */
+.item[data-state="done"] .marker {
+  border-color: transparent;
+  background: var(--stepper-marker);
+  color: var(--stepper-marker-fg);
+}
+/* md + neutral tone (01 Stripe): soft gray fill + muted check */
+.root[data-tone="neutral"] .item[data-state="done"] .marker {
+  background: var(--stepper-marker-soft);
+  color: var(--stepper-fg-muted);
+}
+/* sm variant done: 색만 marker 색, dot 크기 그대로 */
+.root[data-variant="sm"] .item[data-state="done"] .marker {
+  background: var(--stepper-dot-idle);
+  color: transparent;
+}
+.root[data-variant="sm"][data-tone="primary"]
+  .item[data-state="done"]
+  .marker {
+  background: var(--stepper-marker);
 }
 
-/* Active marker: 굵은 링 */
+/* ── Active marker ──
+   marker 자체가 큰 soft Primary 동그라미 + 중앙에 작은 Primary dot. */
 .item[data-state="active"] .marker {
-  border-color: var(--stepper-fg);
-  border-width: calc(var(--hairline) * 2);
-  color: var(--stepper-fg);
+  background: color-mix(in oklab, var(--stepper-marker) 18%, transparent);
+  border-color: transparent;
+  color: var(--stepper-marker);
+}
+/* sm variant active: marker 자체는 solid Primary dot + 바깥에 soft Primary halo.
+   작은 dot(10px)이라 안쪽 split 대신 외곽 halo로 "지금 여기" 신호를 줌. */
+.root[data-variant="sm"] .item[data-state="active"] .marker {
+  background: var(--stepper-marker);
+  color: var(--stepper-marker-fg);
+  box-shadow: 0 0 0 var(--space-1)
+    color-mix(in oklab, var(--stepper-marker) 22%, transparent);
 }
 
-/* dot marker의 active: 안쪽 작은 점 */
+/* ─ markerInnerDot: active marker 중앙 작은 Primary dot ─ */
 .markerInnerDot {
   width: var(--space-1_5);
   height: var(--space-1_5);
   border-radius: var(--radius-full);
-  background: var(--stepper-fg);
+  background: var(--stepper-marker);
+  flex-shrink: 0;
 }
-
-/* Done marker: 배경 채움, 안에 check (dot) 또는 숫자 유지 (number) */
-.item[data-state="done"] .marker {
-  border-color: transparent;
-  background: var(--stepper-fg);
-  color: var(--stepper-marker-fg);
+/* md (24px marker)에서는 inner dot도 조금 더 크게 */
+.root[data-variant="md"] .markerInnerDot {
+  width: var(--space-2);
+  height: var(--space-2);
+}
+/* sm variant는 marker 자체가 10px dot이라 inner dot 숨김 */
+.root[data-variant="sm"] .markerInnerDot {
+  display: none;
 }
 
-/* Body ─────────────────────────────────────────────────── */
+/* ─ Body ─────────────────────────────────────────── */
 
 .body {
   display: flex;
@@ -168,15 +290,37 @@
   padding-right: var(--space-2);
 }
 
+/* hintPlacement=inline (02): title | hint 가로 배치 */
+.root[data-hint-placement="inline"] .body {
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
 .title {
   font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-sm);
+}
+/* md variant는 title 조금 더 큼 (01 Stripe 톤) */
+.root[data-variant="md"] .title {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+.item[data-state="active"] .title {
   font-weight: var(--font-weight-semibold);
 }
+
 .hint {
   font-size: var(--text-xs);
   color: var(--stepper-fg-subtle);
   line-height: var(--lh-xs);
 }
+.root[data-variant="md"] .hint {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
 .item[data-state="active"] .hint {
   color: var(--stepper-fg-muted);
 }

package/assets/components/Stepper/Stepper.tsx

@@ -18,15 +18,23 @@ import styles from "./Stepper.module.css";
 
 type Orientation = "vertical" | "horizontal";
 type Marker = "dot" | "number";
+type Variant = "md" | "sm";
+type Tone = "primary" | "neutral";
+type HintPlacement = "below" | "inline";
+type LineStyle = "dashed" | "solid";
 type ItemState = "upcoming" | "active" | "done";
 
 type StepperContextValue = {
   orientation: Orientation;
   marker: Marker;
+  variant: Variant;
+  tone: Tone;
+  hintPlacement: HintPlacement;
   activeIndex: number;
   onStepClick?: (index: number) => void;
 };
 
+
 const StepperContext = createContext<StepperContextValue | null>(null);
 
 function useStepperContext(): StepperContextValue {
@@ -46,6 +54,22 @@ export type StepperProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
   orientation?: Orientation;
   /** marker 종류. dot(기본) | number. */
   marker?: Marker;
+  /**
+   * marker 사이즈.
+   * - `md` : 24px 동그라미 marker (기본, 01 Stripe 류)
+   * - `sm` : 10px 작은 solid dot (02 헤이딜러 류, title 중심)
+   */
+  variant?: Variant;
+  /**
+   * 색 톤.
+   * - `primary` : done/active 모두 Primary (기본)
+   * - `neutral` : done은 모노톤, active만 Primary 혹은 fg-strong
+   */
+  tone?: Tone;
+  /** hint 배치. below(기본) | inline(title 옆). */
+  hintPlacement?: HintPlacement;
+  /** 스텝 사이 연결선 스타일. dashed(기본) | solid. */
+  lineStyle?: LineStyle;
   /** 스텝 클릭 시. 자식 Item에 onClick이 있으면 그쪽이 우선. */
   onStepClick?: (index: number) => void;
   children: ReactNode;
@@ -57,6 +81,10 @@ const StepperRoot = forwardRef<HTMLDivElement, StepperProps>(
       activeIndex,
       orientation = "vertical",
       marker = "dot",
+      variant = "md",
+      tone = "primary",
+      hintPlacement = "below",
+      lineStyle = "dashed",
       onStepClick,
       className,
       children,
@@ -65,11 +93,26 @@ const StepperRoot = forwardRef<HTMLDivElement, StepperProps>(
     ref,
   ) => {
     const ctxValue = useMemo<StepperContextValue>(
-      () => ({ orientation, marker, activeIndex, onStepClick }),
-      [orientation, marker, activeIndex, onStepClick],
+      () => ({
+        orientation,
+        marker,
+        variant,
+        tone,
+        hintPlacement,
+        activeIndex,
+        onStepClick,
+      }),
+      [
+        orientation,
+        marker,
+        variant,
+        tone,
+        hintPlacement,
+        activeIndex,
+        onStepClick,
+      ],
     );
 
-    // 자식 Item에 index를 자동 주입
     const items = Children.toArray(children).filter(isValidElement);
     const injected = items.map((child, i) =>
       cloneElement(child as ReactElement<StepperItemProps>, {
@@ -91,6 +134,10 @@ const StepperRoot = forwardRef<HTMLDivElement, StepperProps>(
             .join(" ")}
           data-orientation={orientation}
           data-marker={marker}
+          data-variant={variant}
+          data-tone={tone}
+          data-hint-placement={hintPlacement}
+          data-line-style={lineStyle}
           {...rest}
         >
           {injected}
@@ -107,11 +154,9 @@ export type StepperItemProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   "title"
 > & {
-  /** Stepper가 자동 주입. 수동 override 가능. */
   index?: number;
   title: ReactNode;
   hint?: ReactNode;
-  /** 명시적 상태 지정. 미지정이면 activeIndex 기준으로 자동 결정. */
   state?: ItemState;
 };
 
@@ -130,7 +175,7 @@ const StepperItem = forwardRef<HTMLButtonElement, StepperItemProps>(
     },
     ref,
   ) => {
-    const { orientation, marker, activeIndex, onStepClick } =
+    const { orientation, marker, variant, activeIndex, onStepClick } =
       useStepperContext();
 
     const idx = index ?? 0;
@@ -138,6 +183,22 @@ const StepperItem = forwardRef<HTMLButtonElement, StepperItemProps>(
       stateProp ??
       (idx === activeIndex ? "active" : idx < activeIndex ? "done" : "upcoming");
 
+    // marker 내부 렌더링 규칙:
+    // ─ sm variant   : 내부 글자/dot 없음 (marker 자체가 작은 solid dot)
+    // ─ done         : check 아이콘
+    // ─ number marker: 숫자 (active여도 숫자 유지)
+    // ─ dot + active : 작은 Primary dot
+    const markerContent =
+      variant === "sm"
+        ? null
+        : state === "done"
+          ? <Icon name="check" size={10} />
+          : marker === "number"
+            ? idx + 1
+            : state === "active"
+              ? <span className={styles.markerInnerDot} />
+              : null;
+
     return (
       <button
         ref={ref}
@@ -155,13 +216,7 @@ const StepperItem = forwardRef<HTMLButtonElement, StepperItemProps>(
         {...rest}
       >
         <span className={styles.marker} aria-hidden>
-          {state === "done" ? (
-            <Icon name="check" size={12} />
-          ) : marker === "number" ? (
-            idx + 1
-          ) : state === "active" ? (
-            <span className={styles.markerInnerDot} />
-          ) : null}
+          {markerContent}
         </span>
         <span className={styles.body}>
           <span className={styles.title}>{title}</span>

package/assets/components/Switch/Switch.module.css

@@ -56,11 +56,9 @@
   width: var(--_track-w);
   height: var(--_track-h);
   background: var(--bg-muted);
-  border: var(--hairline) solid var(--border);
   border-radius: var(--radius-full);
   transition:
     background var(--duration-slow) var(--ease-out),
-    border-color var(--duration-slow) var(--ease-out),
     box-shadow var(--duration-fast) var(--ease-out);
 }
 
@@ -82,19 +80,14 @@
 /* Checked — 트랙은 primary로 채우고, 썸을 우측 끝 - pad로 이동. */
 .input:checked + .track {
   background: var(--primary);
-  border-color: var(--primary);
 }
 .input:checked + .track .thumb {
-  left: calc(var(--_track-w) - var(--_thumb) - var(--_pad) - var(--hairline) * 2);
+  left: calc(var(--_track-w) - var(--_thumb) - var(--_pad));
 }
 
 /* Hover */
-.root:hover .input:not(:disabled) + .track {
-  border-color: var(--border-strong);
-}
 .root:hover .input:not(:disabled):checked + .track {
   background: var(--primary-hover);
-  border-color: var(--primary-hover);
 }
 
 /* Focus — 트랙에 링 표시 */
@@ -108,7 +101,6 @@
 }
 .input:disabled + .track {
   background: var(--bg-muted);
-  border-color: transparent;
 }
 .input:disabled + .track .thumb {
   background: var(--fg-disabled);

package/assets/components/Topbar/Topbar.module.css

@@ -1,10 +1,12 @@
 /* Root ─────────────────────────────────────────────────
-   투명. 배경·보더·그림자 없음. children 자유 배치.
+   투명. 배경·보더·그림자 없음. 부모 폭을 반드시 꽉 채운다 — 이게 없으면
+   AppFrame.topbarSlot(flex) 안에서 콘텐츠 폭만큼만 차지해 좌측에 몰려버림.
    size는 높이만 결정 — padding/gap은 동일. */
 .root {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  width: 100%;
+  min-width: 0;
   height: var(--topbar-h);
   padding-inline: var(--space-5);
   background: transparent;
@@ -20,7 +22,33 @@
   height: var(--topbar-h-md);
 }
 
-/* Spacer ───────────────────────────────────────────── */
-.spacer {
-  flex: 1 1 auto;
+/* Zone ─────────────────────────────────────────────────
+   공통. 자식은 가로 flex + 작은 컴포넌트 간 gap(--space-1, 메모리 규칙). */
+.zone {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+/* leading — 왼쪽, 자연 폭. */
+.leading {
+  flex: 0 0 auto;
+}
+
+/* center — 가운데 1fr, 내용은 중앙 정렬. 있으면 L과 T 사이 공간을 1fr로 먹음. */
+.center {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+/* trailing — 오른쪽 자연 폭.
+   margin-inline-start: auto 가 핵심 — center가 없는 조합(L + T만)에서도
+   남는 공간을 전부 왼쪽 margin이 흡수해 자동으로 오른쪽 끝에 붙는다.
+   center가 있으면 center의 flex:1이 먼저 공간을 요구하기 때문에 margin은
+   0으로 수렴. 어떤 조합이든 안정적 배치. */
+.trailing {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  justify-content: flex-end;
 }

package/assets/components/Topbar/Topbar.tsx

@@ -8,6 +8,10 @@ import styles from "./Topbar.module.css";
 /* Root ─────────────────────────────────────────────────
    자유 슬롯 컨테이너. 자체 표현(bg/border/shadow) 없음.
    컨테이너 표현은 상위 AppFrame variant가 담당.
+
+   구조는 leading / center / trailing 3-zone 고정. 루트가 부모 폭을 꽉 채우고
+   세 zone이 flex로 자리를 나눠서 "왼쪽에 몰림" 현상을 구조적으로 차단.
+
    size는 세로 높이만 결정 (sm=얇게, md=기본). */
 export type TopbarSize = "sm" | "md";
 
@@ -31,17 +35,68 @@ const TopbarRoot = forwardRef<HTMLElement, TopbarProps>(function TopbarRoot(
   );
 });
 
-/* Spacer ───────────────────────────────────────────────
-   좌/우 정렬용 flex:1 빈 블록. */
-function TopbarSpacer() {
-  return <div className={styles.spacer} aria-hidden />;
-}
+/* Zones ────────────────────────────────────────────────
+   leading / center / trailing. zone 안 자식은 가로 flex + space-1 gap.
+   center는 flex:1 + 가운데 정렬 — 비워두면 leading과 trailing 사이가 자연히 벌어짐. */
+type ZoneProps = HTMLAttributes<HTMLDivElement>;
+
+const TopbarLeading = forwardRef<HTMLDivElement, ZoneProps>(function TopbarLeading(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.leading, className)}
+      data-topbar-zone="leading"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+const TopbarCenter = forwardRef<HTMLDivElement, ZoneProps>(function TopbarCenter(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.center, className)}
+      data-topbar-zone="center"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+const TopbarTrailing = forwardRef<HTMLDivElement, ZoneProps>(function TopbarTrailing(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.trailing, className)}
+      data-topbar-zone="trailing"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
 
 type TopbarComponent = typeof TopbarRoot & {
-  Spacer: typeof TopbarSpacer;
+  Leading: typeof TopbarLeading;
+  Center: typeof TopbarCenter;
+  Trailing: typeof TopbarTrailing;
 };
 
 const Topbar = TopbarRoot as TopbarComponent;
-Topbar.Spacer = TopbarSpacer;
+Topbar.Leading = TopbarLeading;
+Topbar.Center = TopbarCenter;
+Topbar.Trailing = TopbarTrailing;
 
 export { Topbar };