@conscience-technology/ctds 0.4.3 → 0.4.5

package/README.md

@@ -7,6 +7,21 @@ CTDS — 하이브리드 디자인 시스템 설치/온보딩 CLI.
 - Node.js 18+
 - Next.js App Router 프로젝트 (`app/` 또는 `src/app/` 디렉토리)
 
+### 검증된 조합
+
+| 패키지 | 검증 범위 | 비고 |
+|---|---|---|
+| Next.js | `>=14.0 <17.0` | Next 16은 자동 패치로 복구 (아래 참고) |
+| React | `>=18.2 <20.0` | React 19 strict 타입 호환 |
+
+**Next.js 16 자동 호환 처리**: `create-next-app@latest`가 뽑는 `turbopack.rules["*.css"] + @tailwindcss/turbopack` 조합이 Turbopack built-in Lightning CSS CSS Modules 경로를 bypass해서 `.module.css`의 class가 undefined로 처리되는 함정이 있어요. `ctds init`은 이걸 감지해서 **자동으로**:
+
+1. `next.config.ts`의 `turbopack.rules["*.css"]` 블록을 삭제
+2. `postcss.config.mjs`를 신규 생성해 `@tailwindcss/postcss` plugin 등록
+3. 콘솔 fallback으로 `@tailwindcss/turbopack` 제거 명령 안내
+
+Next 15 LTS 플젝에서는 위 변경이 적용되지 않고 그대로 작동.
+
 ## 설치 (end user)
 
 ```bash

package/assets/components/ChatInput/ChatInput.module.css

@@ -24,6 +24,19 @@
 .root:focus-within {
   box-shadow: var(--ring), var(--shadow-md);
 }
+
+/* variant=flush — shell(사이드바 바닥·바텀바 등)에 edge-to-edge로 들러붙는 형태.
+   외곽 radius·shadow·border 제거, overflow만 유지해 scroll clip은 보장. focus ring도 없음
+   (바깥 shell이 focus signal을 책임지는 자리이거나 입력이 늘 활성인 맥락). */
+.variant-flush {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.variant-flush:focus-within {
+  box-shadow: none;
+}
+
 .disabled {
   opacity: 0.5;
   pointer-events: none;
@@ -112,7 +125,7 @@
   box-sizing: border-box;
 }
 .multiField::placeholder {
-  color: var(--fg-muted);
+  color: var(--fg-subtle);
 }
 /* attachments/quotation 아래에선 상단 padding 압축 (이미 attachments/quotation이 상단 책임). */
 .attachments + .body .multiField,
@@ -187,7 +200,7 @@
   box-sizing: border-box;
 }
 .singleField::placeholder {
-  color: var(--fg-muted);
+  color: var(--fg-subtle);
 }
 
 /* Attach 버튼 */
@@ -274,14 +287,15 @@
   padding: var(--space-1_5);
 }
 
-/* Send — Shape 축 반응. Button sm과 동일한 radius. */
+/* Send — Shape 축 반응. Button sm과 동일한 radius.
+   variant는 solid(기본)/ghost/soft 세 톤. 비활성→활성 전이는 색만 바뀜. */
 .sendBtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
-  background: var(--bg-subtle);
+  background: transparent;
   color: var(--fg-muted);
   border-radius: var(--radius-sm);
   cursor: pointer;
@@ -290,13 +304,6 @@
   flex: 0 0 auto;
   transition: var(--transition-colors);
 }
-.sendBtn[data-active] {
-  background: var(--primary);
-  color: var(--bg);
-}
-.sendBtn:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .sendBtn:focus-visible {
   outline: none;
   box-shadow: var(--ring);
@@ -304,15 +311,61 @@
 .sendBtn:disabled {
   cursor: not-allowed;
 }
-/* 비활성(= 입력 비어있어 보낼 수 없음) 상태 아이콘을 연하게.
-   data-active일 땐 primary 배경이라 색 유지. */
-.sendBtn:not([data-active]) {
+
+/* solid — 현재 기본. 비활성=bg-subtle, 활성=primary + 흰 아이콘. */
+.sendBtn[data-variant="solid"] {
+  background: var(--bg-subtle);
+}
+.sendBtn[data-variant="solid"]:not([data-active]) {
+  color: var(--fg-disabled);
+}
+.sendBtn[data-variant="solid"][data-active] {
+  background: var(--primary);
+  color: var(--bg);
+}
+.sendBtn[data-variant="solid"]:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* ghost — 투명. 아이콘만 보임. 비활성=fg-disabled, 활성=fg-strong.
+   hover에서만 bg-subtle이 살짝 들어와 클릭 가능성 신호. */
+.sendBtn[data-variant="ghost"] {
+  background: transparent;
+}
+.sendBtn[data-variant="ghost"]:not([data-active]) {
   color: var(--fg-disabled);
 }
+.sendBtn[data-variant="ghost"][data-active] {
+  color: var(--fg-strong);
+}
+.sendBtn[data-variant="ghost"]:hover:not(:disabled) {
+  background: var(--bg-subtle);
+}
+
+/* soft — 늘 은은한 bg-subtle. 활성이어도 색 강조 없이 fg만 진해짐.
+   조용한 자리(사이드바 바닥 flush 등)에서 send 존재감을 낮추고 싶을 때. */
+.sendBtn[data-variant="soft"] {
+  background: var(--bg-subtle);
+}
+.sendBtn[data-variant="soft"]:not([data-active]) {
+  color: var(--fg-disabled);
+}
+.sendBtn[data-variant="soft"][data-active] {
+  color: var(--fg-strong);
+}
+.sendBtn[data-variant="soft"]:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
 .sendIcon {
   width: 44%;
   height: 44%;
 }
+/* return(↵) 아이콘은 화살표가 작게 그려져 있어 조금 키워야 눈에 들어옴. */
+.sendBtn[data-icon="return"] .sendIcon {
+  width: 60%;
+  height: 60%;
+}
 
 /* 파일 input 숨김 */
 .hiddenFile {

package/assets/components/ChatInput/ChatInput.tsx

@@ -17,10 +17,13 @@ import { AttachmentThumb } from "@/components/ctds/AttachmentThumb";
 import { DropdownMenu } from "@/components/ctds/DropdownMenu";
 import { QuotationBar } from "@/components/ctds/QuotationBar";
 import { ModelSelector } from "./ModelSelector";
-import { SendButton } from "./SendButton";
+import { SendButton, type SendButtonIcon, type SendButtonVariant } from "./SendButton";
 import styles from "./ChatInput.module.css";
 
 export type ChatInputShape = "multi" | "single";
+export type ChatInputVariant = "framed" | "flush";
+export type ChatInputSendVariant = SendButtonVariant;
+export type ChatInputSendIcon = SendButtonIcon;
 
 /** 첨부 공용 타입 — ChatInput·Message 양쪽에서 재사용. */
 export interface ChatAttachmentImage {
@@ -48,6 +51,8 @@ export interface ChatInputModel {
 
 export interface ChatInputProps {
   shape?: ChatInputShape;
+  /** 외곽 처리. framed(기본)=radius·border·shadow 떠있음, flush=shell 바닥에 edge-to-edge. */
+  variant?: ChatInputVariant;
 
   value: string;
   onChange: (v: string) => void;
@@ -69,6 +74,11 @@ export interface ChatInputProps {
   selectedModel?: string;
   onSelectModel?: (id: string) => void;
 
+  /** Send 버튼 톤. solid(기본)=primary bg + 흰 아이콘, ghost=투명·아이콘만, soft=bg-subtle 은은. */
+  sendVariant?: ChatInputSendVariant;
+  /** Send 아이콘 모양. 스트리밍 중엔 자동으로 square. */
+  sendIcon?: ChatInputSendIcon;
+
   placeholder?: string;
   disabled?: boolean;
   /** multiLine일 때 textarea max rows. 넘으면 세로 스크롤. */
@@ -85,6 +95,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
   function ChatInput(props, ref) {
     const {
       shape = "multi",
+      variant = "framed",
       value,
       onChange,
       onSend,
@@ -97,6 +108,8 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
       models,
       selectedModel,
       onSelectModel,
+      sendVariant = "solid",
+      sendIcon = "arrow-up",
       placeholder = "Ask me anything…",
       disabled = false,
       maxRows = 8,
@@ -167,6 +180,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const rootCls = [
       styles.root,
       styles[`shape-${shape}`],
+      styles[`variant-${variant}`],
       disabled ? styles.disabled : "",
       className,
     ]
@@ -228,6 +242,8 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           streaming={showStop}
           disabled={disabled && !showStop}
           onClick={handleSendClick}
+          variant={sendVariant}
+          icon={sendIcon}
         />
       </div>
     );

package/assets/components/ChatInput/SendButton.tsx

@@ -3,10 +3,15 @@
 import type { MouseEvent } from "react";
 import {
   ArrowUp as PhArrowUp,
+  ArrowElbowDownLeft as PhReturn,
+  PaperPlaneTilt as PhPaperPlane,
   Square as PhSquare,
 } from "@phosphor-icons/react";
 import styles from "./ChatInput.module.css";
 
+export type SendButtonVariant = "solid" | "ghost" | "soft";
+export type SendButtonIcon = "arrow-up" | "return" | "paper-plane";
+
 interface SendButtonProps {
   /** 입력에 텍스트/첨부가 있어 send 가능한지. */
   active: boolean;
@@ -14,6 +19,10 @@ interface SendButtonProps {
   streaming?: boolean;
   disabled?: boolean;
   onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 시각 톤. solid=primary bg(기본), ghost=투명 아이콘만, soft=bg-subtle 은은 */
+  variant?: SendButtonVariant;
+  /** 전송 아이콘 모양. 스트리밍 중엔 자동으로 square로 교체 */
+  icon?: SendButtonIcon;
 }
 
 export function SendButton({
@@ -21,11 +30,19 @@ export function SendButton({
   streaming = false,
   disabled,
   onClick,
+  variant = "solid",
+  icon = "arrow-up",
 }: SendButtonProps) {
+  const SendIconCmp =
+    icon === "return" ? PhReturn : icon === "paper-plane" ? PhPaperPlane : PhArrowUp;
+  const iconWeight = icon === "return" ? "regular" : "bold";
+
   return (
     <button
       type="button"
       className={styles.sendBtn}
+      data-variant={variant}
+      data-icon={icon}
       data-active={active || streaming || undefined}
       disabled={disabled}
       onClick={onClick}
@@ -34,7 +51,7 @@ export function SendButton({
       {streaming ? (
         <PhSquare className={styles.sendIcon} weight="fill" />
       ) : (
-        <PhArrowUp className={styles.sendIcon} weight="bold" />
+        <SendIconCmp className={styles.sendIcon} weight={iconWeight} />
       )}
     </button>
   );

package/assets/components/ChatInput/index.ts

@@ -2,6 +2,9 @@ export { ChatInput } from "./ChatInput";
 export type {
   ChatInputProps,
   ChatInputShape,
+  ChatInputVariant,
+  ChatInputSendVariant,
+  ChatInputSendIcon,
   ChatInputModel,
   ChatAttachment,
   ChatAttachmentImage,

package/assets/components/Onboarding/OnboardingPage.tsx

@@ -612,6 +612,7 @@ function Rail({
         className={styles.railSteps}
         activeIndex={stepIdx}
         onStepClick={onStepClick}
+        marker="number"
       >
         {STEPS.map((s, i) => (
           <Stepper.Item

package/assets/components/TabStrip/TabStrip.module.css

@@ -0,0 +1,358 @@
+/* TabStrip — 브라우저/문서 탭 (Chrome · Figma · VSCode 식).
+   각 탭 = 독립 문서. 섹션 전환 Tabs와 역할 분리.
+
+   활성 표시 = bg-muted 상시 배경 (pill 아님, hover 색이 그대로 lock).
+   비활성 탭 = 투명 배경, hover 시 bg-muted.
+
+   축 반응:
+   ─ Density → --control-h-* (탭 높이), --space-scale (gap/padding)
+   ─ Shape   → 탭 radius (--radius-sm · soft에서도 과하지 않게)
+   ─ Motion  → hover·active 전환 duration/easing
+*/
+
+/* Root ─────────────────────────────────────────────────────── */
+.root {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  gap: var(--space-0_5);
+}
+
+.track {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-0_5);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Sizes — Button·Tabs 계열과 동일한 --control-h-* 기반 */
+.size_sm .tab { height: var(--control-h-sm); }
+.size_md .tab { height: var(--control-h-md); }
+
+/* Tab ──────────────────────────────────────────────────────── */
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1_5);
+  padding-inline: var(--space-2_5);
+  border-radius: var(--radius-sm);
+  color: var(--fg-muted);
+  background: transparent;
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  letter-spacing: var(--label-tracking);
+  line-height: var(--lh-tight);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 20ch;
+  overflow: hidden;
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.size_sm .tab {
+  font-size: var(--label-sm-size);
+  padding-inline: var(--space-2);
+  gap: var(--space-1);
+  max-width: 20ch;
+}
+.size_md .tab { font-size: var(--label-md-size); }
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  position: relative;
+  z-index: var(--z-docked);
+}
+.tab[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.tab:hover:not([data-disabled="true"]) {
+  background: var(--bg-muted);
+  color: var(--fg);
+}
+.tab[data-state="active"] {
+  background: var(--bg-muted);
+  color: var(--fg-strong);
+}
+
+/* Leading slot — Icon·사진·svg 전부 ReactNode로 허용. 톤만 조절. */
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.75;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+.leading > svg,
+.leading > img {
+  display: block;
+}
+.tab:hover:not([data-disabled="true"]) .leading,
+.tab[data-state="active"] .leading {
+  opacity: 1;
+}
+
+/* Label — overflow 숨김 컨테이너. 안쪽 .labelInner가 marquee 대상.
+   오른쪽 edge fade는 closeFade(hover 시)와 labelFade(기본)가 담당. */
+.label {
+  display: block;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+/* 기본 상태 (hover 아님)에서 라벨 오른쪽 edge를 bg로 자연스럽게 녹임.
+   closable·non-closable 모두 적용. 활성/hover가 되면 closeFade가 덮으니 거의 안 보임. */
+.labelFade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--space-6);
+  pointer-events: none;
+  background: linear-gradient(to right, transparent 0%, var(--bg) 100%);
+  z-index: var(--z-base);
+}
+.tab[data-state="active"] .labelFade,
+.tab:hover:not([data-disabled="true"]) .labelFade {
+  background: linear-gradient(to right, transparent 0%, var(--bg-muted) 100%);
+}
+
+.labelInner {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  will-change: transform;
+}
+
+.labelPrimary {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* Marquee — 전광판 스타일 loop.
+   라벨이 overflow되는 탭은 .labelInner가 "라벨 + gap + 라벨" 복제본을 가진다
+   (React에서 data-overflow="true" 세팅 시 복제본이 visible). 첫 번째 라벨이
+   왼쪽으로 완전히 빠지는 시점에 두 번째 라벨이 translateX(0) 자리에 자연스레
+   이어 받아 끊김 없이 반복된다.
+
+   --marquee-shift (px 수치)와 --marquee-duration (CSS time)은 React에서
+   ResizeObserver로 측정해 inline style로 설정. 짧은 라벨은 overflow 안 되므로
+   data-overflow가 안 붙고, keyframe도 적용되지 않는다. */
+.tab[data-overflow="true"]:hover:not([data-disabled="true"]) .labelInner {
+  animation: marquee-loop var(--marquee-duration, var(--duration-slower)) var(--ease-linear) var(--marquee-delay, var(--duration-slower)) infinite;
+}
+.tab:not(:hover) .labelInner,
+.tab:not([data-overflow="true"]) .labelInner {
+  animation: none;
+  transform: translateX(0);
+}
+
+@keyframes marquee-loop {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(var(--marquee-shift, 0) * -1px));
+  }
+}
+
+/* 복제본 — overflow 시에만 보이고, 평상시엔 숨겨 레이아웃·측정에 영향 없음. */
+.labelDupe {
+  display: inline-block;
+  padding-inline-start: var(--space-6);
+  visibility: hidden;
+}
+.tab[data-overflow="true"] .labelDupe {
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab[data-overflow="true"]:hover:not([data-disabled="true"]) .labelInner {
+    animation: none;
+  }
+}
+
+/* Close button — absolute로 오른쪽에 띄워 라벨 위를 그라데이션으로 덮으며 등장.
+   활성·hover 아닐 땐 opacity 0, 그라데이션 fade도 opacity 0.
+
+   폭 구성: 왼쪽은 fade 구간, 오른쪽은 x 뒤를 가려주는 solid 구간.
+   solid 구간이 없으면 x 뒤로 흐르는 라벨이 비쳐 보임. */
+.closeFade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: calc(var(--control-h-xs) + var(--space-6));
+  pointer-events: none;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--bg-muted) 50%,
+    var(--bg-muted) 100%
+  );
+  opacity: 0;
+  transition: opacity var(--duration-slow) var(--ease-in-out);
+  z-index: var(--z-raise);
+}
+
+.closeButton {
+  position: absolute;
+  top: 50%;
+  right: var(--space-1);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--control-h-xs);
+  height: var(--control-h-xs);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    opacity var(--duration-slow) var(--ease-in-out);
+  z-index: var(--z-docked);
+}
+.tab:hover:not([data-disabled="true"]) .closeButton,
+.tab:focus-within .closeButton {
+  opacity: 1;
+}
+.tab:hover:not([data-disabled="true"]) .closeFade,
+.tab:focus-within .closeFade {
+  opacity: 1;
+}
+.closeButton:hover {
+  background: var(--hover);
+  color: var(--fg-strong);
+}
+.closeButton:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--ring-shadow);
+}
+
+/* Trailing slot — track 바깥 오른쪽. 소비처가 ReactNode로 자유 조립 (+·...·없음).
+   TabStrip 전체 hover·focus-within에서만 fade-in. 공간은 늘 차지해 흔들림 없음. */
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity var(--duration-slow) var(--ease-in-out);
+}
+.root:hover .trailing,
+.root:focus-within .trailing {
+  opacity: 1;
+}
+
+/* ───────────────────────────────────────────────────────────
+   Variants — ghost(default) · soft · segmented
+   기본 .tab 규칙은 ghost 기준. 여기선 variant별 override만.
+*/
+
+/* Soft ──────────────────────────────────────────────────────
+   모든 탭에 연한 bg 상시. 버튼처럼 "모양이 미리 잡힌" 느낌.
+   비활성=bg-subtle · hover=hover mix(subtle→muted 사이) · 활성=bg-muted. */
+.variant_soft .track {
+  gap: var(--space-1);
+}
+.variant_soft .tab {
+  background: var(--bg-subtle);
+}
+.variant_soft .tab:hover:not([data-disabled="true"]) {
+  background: color-mix(in oklab, var(--bg-subtle) 50%, var(--bg-muted) 50%);
+  color: var(--fg);
+}
+.variant_soft .tab[data-state="active"] {
+  background: var(--bg-muted);
+  color: var(--fg-strong);
+}
+/* labelFade: 비활성 상태는 bg-subtle로 녹여야 자연스러움. */
+.variant_soft .labelFade {
+  background: linear-gradient(to right, transparent 0%, var(--bg-subtle) 100%);
+}
+.variant_soft .tab:hover:not([data-disabled="true"]) .labelFade {
+  background: linear-gradient(to right, transparent 0%, color-mix(in oklab, var(--bg-subtle) 50%, var(--bg-muted) 50%) 100%);
+}
+
+/* Segmented ──────────────────────────────────────────────────
+   Chrome·Figma 식 — 탭은 네모칸, 사이에 세로 hairline. 활성·hover 탭의
+   왼쪽 hairline, 그리고 활성·hover 탭 오른쪽 이웃 탭의 왼쪽 hairline을
+   숨겨 "구분선이 활성 탭에 닿지 않게" 처리.
+   gap은 아주 작게(--space-0_5) 둬 hairline이 숨을 때 탭이 완전히 붙어보이지 않게. */
+.variant_segmented .track {
+  gap: var(--space-0_5);
+}
+.variant_segmented .tab {
+  border-radius: var(--radius-xs);
+  position: relative;
+}
+.variant_segmented .tab::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--hairline);
+  height: calc(100% - var(--space-3));
+  background: var(--border);
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+/* 첫 탭은 왼쪽 hairline 없음. */
+.variant_segmented .tab:first-child::before {
+  opacity: 0;
+}
+/* 활성·hover 탭 자신의 왼쪽 hairline 숨김. */
+.variant_segmented .tab:hover:not([data-disabled="true"])::before,
+.variant_segmented .tab[data-state="active"]::before {
+  opacity: 0;
+}
+/* 활성·hover 탭 바로 오른쪽 이웃의 왼쪽 hairline도 숨김 (경계가 활성 영역에 안 닿게). */
+.variant_segmented .tab:hover:not([data-disabled="true"]) + .tab::before,
+.variant_segmented .tab[data-state="active"] + .tab::before {
+  opacity: 0;
+}
+
+/* ───────────────────────────────────────────────────────────
+   Trailing slot variant별 처리
+   소비처가 넣는 자식 요소(IconButton, Button, 등) 자체 시각은 건드리지 않고,
+   wrapper 쪽에서 간격·디바이더만 담당.
+*/
+.variant_segmented {
+  gap: var(--space-2);
+}
+.variant_segmented .trailing {
+  position: relative;
+  padding-inline-start: var(--space-2);
+}
+.variant_segmented .trailing::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--hairline);
+  height: calc(100% - var(--space-3));
+  background: var(--border);
+}