@uniai-fe/uds-primitives 0.3.18 → 0.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/badge/markup/Badge.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import type { BadgeProps } from "../types";
 import { composeBadgeClassName } from "../utils";
+import { Slot } from "../../slot";
 
 /**
  * Badge 컴포넌트; size/style/intent 축을 data attribute로 노출한다.
@@ -50,11 +51,8 @@ const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
         data-has-label={hasLabel ? "true" : undefined}
       >
         {renderDot}
-        {["string", "number"].includes(typeof children) ? (
-          <span className="badge-label">{children}</span>
-        ) : (
-          children
-        )}
+        {/* 변경: badge 라벨 텍스트 래핑 규칙을 Slot.Text로 통일한다. */}
+        <Slot.Text className="badge-label">{children}</Slot.Text>
       </figure>
     );
   },

package/src/components/badge/styles/index.scss

@@ -6,7 +6,8 @@
   --theme-badge-radius: var(--theme-radius-medium-1, 6px);
   --theme-badge-font-family: var(--font-caption-medium-family, inherit);
   --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  --theme-badge-font-weight: var(--font-caption-medium-weight, 400);
+  // 변경: Badge label font-weight는 디자인 규칙에 맞춰 400으로 고정한다.
+  --theme-badge-font-weight: 400;
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);

package/src/components/button/index.tsx

@@ -3,12 +3,18 @@
  */
 import "./index.scss";
 
-import { ButtonDefault, ButtonText, ButtonRounded } from "./markup";
+import {
+  ButtonDefault,
+  ButtonText,
+  ButtonRounded,
+  ButtonLabel,
+} from "./markup";
 
 export const Button = {
   Default: ButtonDefault,
   Text: ButtonText,
   Rounded: ButtonRounded,
+  Label: ButtonLabel,
 };
 
 export * from "./hooks";

package/src/components/button/markup/Base.tsx

@@ -3,7 +3,8 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonProps } from "../types";
-import { SlotComponent } from "../../slot";
+import { Slot } from "../../slot";
+import ButtonLabel from "./Label";
 import {
   getFormFieldWidthAttr,
   getFormFieldWidthValue,
@@ -85,7 +86,7 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
         : style;
 
     return (
-      <SlotComponent
+      <Slot.Base
         className={clsx(
           "button",
           `button-fill-${fill}`,
@@ -112,19 +113,13 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
             {left}
           </span>
         )}
-        {typeof children === "string" || typeof children === "number" ? (
-          <span className="button-label" data-slot="label">
-            {children}
-          </span>
-        ) : (
-          children
-        )}
+        <ButtonLabel data-slot="label">{children}</ButtonLabel>
         {right && (
           <span className="button-right" data-slot="right">
             {right}
           </span>
         )}
-      </SlotComponent>
+      </Slot.Base>
     );
   },
 );

package/src/components/button/markup/Label.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import { Slot } from "../../slot";
+import type { ButtonLabelProps } from "../types/label";
+
+/**
+ * ButtonLabel; Button namespace에서 재사용 가능한 label 래퍼.
+ * @component
+ * @param {ButtonLabelProps} props
+ * @param {React.ElementType} [props.as="span"] 렌더링할 요소.
+ * @param {React.ReactNode} [props.children] 문자열/숫자는 button-label span으로 렌더하고, 그 외 ReactNode는 그대로 반환한다.
+ * @param {string} [props.className] button-label과 병합할 className.
+ * @example
+ * <Button.Label>확인</Button.Label>
+ */
+export default function ButtonLabel({
+  className,
+  ...restProps
+}: ButtonLabelProps) {
+  // Button 전용 라벨 클래스는 namespace 컴포넌트에서 고정 주입한다.
+  return (
+    <Slot.Text className={clsx("button-label", className)} {...restProps} />
+  );
+}

package/src/components/button/markup/index.ts

@@ -1,3 +1,4 @@
 export { ButtonDefault } from "./Base";
 export { ButtonText } from "./Text";
 export { ButtonRounded } from "./Rounded";
+export { default as ButtonLabel } from "./Label";

package/src/components/button/types/index.ts

@@ -2,4 +2,5 @@
  * Button Types; barrel export 전용 파일
  */
 export type * from "./props";
+export type * from "./label";
 export * from "./options";

package/src/components/button/types/label.ts

@@ -0,0 +1,9 @@
+import type { SlotTextProps } from "../../slot";
+
+/**
+ * ButtonLabelProps; Button 전용 label 래퍼 props.
+ * @property {React.ElementType} [as] 렌더링할 요소. 기본값은 span.
+ * @property {React.ReactNode} [children] 문자열/숫자는 래핑하고, 그 외 ReactNode는 그대로 반환한다.
+ * @property {string} [className] 기본 button-label 클래스와 병합할 className.
+ */
+export type ButtonLabelProps = SlotTextProps;

package/src/components/checkbox/markup/Checkbox.tsx

@@ -4,13 +4,14 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import type { CheckboxFieldProps, CheckboxProps, CheckboxSize } from "../types";
 import CheckLargeIcon from "../img/check-large.svg";
 import CheckMediumIcon from "../img/check-medium.svg";
+import { Slot } from "../../slot";
 
 const CHECKBOX_CLASSNAME = "checkbox";
 const CHECKBOX_SURFACE_CLASSNAME = "checkbox-surface";
 const CHECKBOX_INDICATOR_CLASSNAME = "checkbox-indicator";
 const CHECKBOX_FIELD_CLASSNAME = "checkbox-field";
 const CHECKBOX_LABEL_WRAPPER_CLASSNAME = "checkbox-label-wrapper";
-const CHECKBOX_LABEL_TEXT_CLASSNAME = "checkbox-label-text";
+const CHECKBOX_LABEL_CLASSNAME = "checkbox-label";
 const CHECKBOX_HELPER_CLASSNAME = "checkbox-helper";
 
 const getIndicatorIcon = (size: CheckboxSize) =>
@@ -95,7 +96,10 @@ const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
   ) {
     const generatedId = useId();
     const checkboxId = id ?? generatedId;
-    const labelId = label ? `${checkboxId}-label` : undefined;
+    const labelId =
+      label && ["string", "number"].includes(typeof label)
+        ? `${checkboxId}-label`
+        : undefined;
     const helperId = helperText ? `${checkboxId}-helper` : undefined;
     // Label/helper는 Root 외부에서 htmlFor/aria 연결을 유지한다.
 
@@ -126,9 +130,10 @@ const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
             ref={ref}
           />
           {label ? (
-            <span id={labelId} className={CHECKBOX_LABEL_TEXT_CLASSNAME}>
+            // 변경: label 렌더는 Slot.Text 단일 경로로 통일하고, aria-labelledby는 텍스트일 때만 연결한다.
+            <Slot.Text id={labelId} className={CHECKBOX_LABEL_CLASSNAME}>
               {label}
-            </span>
+            </Slot.Text>
           ) : null}
         </label>
         {helperText ? (

package/src/components/checkbox/styles/index.scss

@@ -15,6 +15,8 @@
   --theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
   --theme-checkbox-label-color: var(--color-label-strong);
   --theme-checkbox-label-disabled: var(--color-label-disabled);
+  // 변경: Checkbox label font-weight는 디자인 규칙에 맞춰 400으로 고정한다.
+  --theme-checkbox-label-font-weight: 400;
   --theme-checkbox-helper-color: var(--color-label-neutral);
   --theme-checkbox-helper-disabled: var(--color-label-disabled);
   --theme-checkbox-icon-default: transparent;
@@ -148,17 +150,17 @@
   cursor: not-allowed;
 }
 
-.checkbox-label-text {
-  font-weight: var(--font-body-medium-weight);
+.checkbox-label {
+  font-weight: var(--theme-checkbox-label-font-weight);
   user-select: none;
 }
 
-.checkbox-field[data-size="medium"] .checkbox-label-text {
+.checkbox-field[data-size="medium"] .checkbox-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.checkbox-field[data-size="large"] .checkbox-label-text {
+.checkbox-field[data-size="large"] .checkbox-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }

package/src/components/chip/index.tsx

@@ -1,9 +1,8 @@
 /**
- * chips 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * chips 카테고리 배럴
  */
 import "./index.scss";
 
 export * from "./markup";
 export * from "./hooks";
 export type * from "./types";
-export * from "./utils";

package/src/components/chip/markup/Chip.tsx

@@ -1,48 +1,55 @@
 import { forwardRef, type Ref } from "react";
+import clsx from "clsx";
 import type { ChipInputProps, ChipProps } from "../types";
-import ChipDefaultStyle from "./DefaultStyle";
+import ChipClickableStyle from "./DefaultStyle";
 import ChipInputStyle from "./InputStyle";
 
-// kind === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
+// chipStyle === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
 const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
-  props.kind === "input";
+  props.chipStyle === "input";
 
 /**
- * Chip Markup; Kind별 렌더 분기 Orchestrator 컴포넌트
+ * Chip Markup; Style별 렌더 분기 Orchestrator 컴포넌트
  * @component
  * @param {ChipProps} props Chip 공통/종류별 props
- * @param {"filter" | "filter-rounded" | "assist" | "input"} [props.kind="filter"] Chip 종류
+ * @param {"filter" | "assist" | "input"} [props.chipStyle="filter"] Chip 스타일
+ * @param {"solid" | "outlined"} [props.fill="solid"] Chip 채움 스타일
+ * @param {boolean} [props.rounded=false] pill radius 적용 여부
  * @param {React.ReactNode} [props.children] Chip 라벨/콘텐츠
- * @param {boolean} [props.selected] 선택 상태; filter 계열에서 `aria-pressed`로 반영
- * @param {React.ReactNode} [props.leading] assist kind 좌측 slot
+ * @param {boolean} [props.selected] 선택 상태; filter 스타일에서 `aria-pressed`로 반영
+ * @param {React.ReactNode} [props.leading] assist 스타일 좌측 slot
  * @param {"default" | "table"} [props.size="default"] 사이즈 축
- * @param {string} [props.removeButtonLabel="선택 항목 삭제"] input kind remove 버튼 라벨
- * @param {boolean} [props.disabled] input kind 비활성화 여부
- * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input kind remove 핸들러
- * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onClick] interactive kind click 핸들러
- * @param {"button" | "submit" | "reset"} [props.type] interactive kind button type
+ * @param {string} [props.removeButtonLabel="선택 항목 삭제"] input 스타일 remove 버튼 라벨
+ * @param {boolean} [props.disabled] input 스타일 비활성화 여부
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input 스타일 remove 핸들러
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onClick] interactive 스타일 click 핸들러
+ * @param {"button" | "submit" | "reset"} [props.type] interactive 스타일 button type
  * @param {string} [props.className] root className
  * @param {string} [props.id] root id
  * @param {string} [props.title] root title
  * @description
- * - `kind="input"`이면 `<figure>`를 렌더하고, 나머지 kind는 `<button>`을 렌더한다.
- * - `kind="input"`일 때 remove 버튼 클릭 이벤트는 root click으로 버블링되지 않도록 내부에서 차단한다.
- * - native HTML attrs는 kind에 맞는 root 요소로 그대로 전달된다.
- * @returns {JSX.Element} kind에 맞는 Chip root 요소
+ * - `chipStyle="input"`이면 `<figure>`를 렌더하고, 나머지 스타일은 `<button>`을 렌더한다.
+ * - `chipStyle="input"`일 때 remove 버튼 클릭 이벤트는 root click으로 버블링되지 않도록 내부에서 차단한다.
+ * - native HTML attrs는 style에 맞는 root 요소로 그대로 전달된다.
+ * @returns {JSX.Element} style에 맞는 Chip root 요소
  * @example
- * <Chip kind="filter" selected>
+ * <ChipDefault chipStyle="filter" fill="solid" selected rounded>
  *   전체
- * </Chip>
+ * </ChipDefault>
  * @example
- * <Chip kind="input" onRemove={event => console.log(event.type)}>
+ * <ChipDefault chipStyle="input" onRemove={event => console.log(event.type)}>
  *   첨부파일.pdf
- * </Chip>
+ * </ChipDefault>
  */
-const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
+const ChipDefault = forwardRef<HTMLElement, ChipProps>((props, ref) => {
+  const mergedClassName = clsx("chip-default", props.className);
+
   if (isChipInputProps(props)) {
     return (
       <ChipInputStyle
         {...props}
+        // 변경: 역할 className을 루트 컴포넌트에서 누적 전달한다.
+        className={mergedClassName}
         // 변경: 하위 스타일 컴포넌트가 forwardRef를 사용하므로 ref를 직접 전달한다.
         ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
       />
@@ -50,11 +57,16 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
   }
 
   return (
+    // 변경: 역할 className을 루트 컴포넌트에서 누적 전달한다.
     // 변경: interactive 경로도 forwardRef 기반 ref 전달로 통일한다.
-    <ChipDefaultStyle {...props} ref={ref as Ref<HTMLButtonElement>} />
+    <ChipClickableStyle
+      {...props}
+      className={mergedClassName}
+      ref={ref as Ref<HTMLButtonElement>}
+    />
   );
 });
 
-Chip.displayName = "Chip";
+ChipDefault.displayName = "Chip.Default";
 
-export { Chip };
+export { ChipDefault };

package/src/components/chip/markup/DefaultStyle.tsx

@@ -1,27 +1,30 @@
 import { forwardRef } from "react";
 import clsx from "clsx";
-import type { ChipDefaultStyleComponentProps } from "../types";
+import type { ChipClickableStyleComponentProps } from "../types";
+import ChipLabel from "./Label";
 
 /**
  * Chip Markup; Default/Interactive 스타일 렌더 컴포넌트
  * @component
- * @param {ChipDefaultStyleComponentProps} props interactive 스타일 props
+ * @param {ChipClickableStyleComponentProps} props interactive 스타일 props
  * @param {Ref<HTMLButtonElement>} ref button ref
  * @param {React.ReactNode} [props.children] chip 라벨 콘텐츠
  * @param {boolean} [props.selected] 선택 상태
- * @param {React.ReactNode} [props.leading] assist kind 좌측 slot
+ * @param {React.ReactNode} [props.leading] assist 스타일 좌측 slot
  * @param {string} [props.className] root className
- * @param {"filter" | "filter-rounded" | "assist"} [props.kind] interactive kind
+ * @param {"filter" | "assist"} [props.chipStyle] interactive style
  * @param {"default" | "table"} [props.size] size 축
+ * @param {"solid" | "outlined"} [props.fill] 채움 스타일
+ * @param {boolean} [props.rounded] pill radius 적용 여부
  * @param {"button" | "submit" | "reset"} [props.type] button type
  * @example
- * <ChipDefaultStyle kind="assist" ref={buttonRef}>
+ * <ChipClickableStyle chipStyle="assist" ref={buttonRef}>
  *   Assist
- * </ChipDefaultStyle>
+ * </ChipClickableStyle>
  */
-const ChipDefaultStyle = forwardRef<
+const ChipClickableStyle = forwardRef<
   HTMLButtonElement,
-  ChipDefaultStyleComponentProps
+  ChipClickableStyleComponentProps
 >(
   (
     {
@@ -29,16 +32,18 @@ const ChipDefaultStyle = forwardRef<
       selected,
       leading,
       className,
-      kind,
+      chipStyle,
       size = "default",
+      fill = "solid",
+      rounded = false,
       type,
       ...restProps
     },
     ref,
   ) => {
     // 변경: props 구조분해는 함수 시그니처에서만 수행하고, 본문 내 `const { ... } = props` 패턴을 제거한다.
-    const resolvedKind = kind ?? "filter";
-    const isAssist = resolvedKind === "assist";
+    const resolvedChipStyle = chipStyle ?? "filter";
+    const isAssist = resolvedChipStyle === "assist";
     const hasLeading = isAssist && Boolean(leading);
 
     return (
@@ -47,29 +52,39 @@ const ChipDefaultStyle = forwardRef<
         // 변경: forwardedRef custom prop 대신 forwardRef의 ref를 직접 연결한다.
         ref={ref}
         type={type ?? "button"}
-        className={clsx("chip", className)}
-        data-kind={resolvedKind}
+        // 변경: 기반 class + 역할 class + 외부 className 순서로 누적한다.
+        className={clsx(
+          "chip",
+          "chip-clickable-style",
+          "chip-clickable-root",
+          className,
+        )}
+        data-style={resolvedChipStyle}
+        data-fill={fill}
+        data-rounded={rounded ? "true" : undefined}
         data-size={size}
         data-selected={selected ? "true" : undefined}
         data-has-leading={hasLeading ? "true" : undefined}
         aria-pressed={
-          typeof selected === "boolean" &&
-          (resolvedKind === "filter" || resolvedKind === "filter-rounded")
+          typeof selected === "boolean" && resolvedChipStyle === "filter"
             ? selected
             : undefined
         }
       >
         {isAssist && leading ? (
-          <span className="chip-leading" aria-hidden="true">
+          <span
+            className="chip-leading chip-clickable-leading"
+            aria-hidden="true"
+          >
             {leading}
           </span>
         ) : null}
-        <span className="chip-label">{children}</span>
+        <ChipLabel className="chip-clickable-label">{children}</ChipLabel>
       </button>
     );
   },
 );
 
-ChipDefaultStyle.displayName = "ChipDefaultStyle";
+ChipClickableStyle.displayName = "ChipClickableStyle";
 
-export default ChipDefaultStyle;
+export default ChipClickableStyle;

package/src/components/chip/markup/InputStyle.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import type { MouseEvent } from "react";
 import type { ChipInputStyleProps } from "../types";
 import ChipRemoveButton from "./RemoveButton";
+import ChipLabel from "./Label";
 
 /**
  * Chip Markup; Input 스타일 렌더 컴포넌트
@@ -15,8 +16,9 @@ import ChipRemoveButton from "./RemoveButton";
  * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] remove 클릭 핸들러
  * @param {boolean} [props.disabled] 비활성화 여부
  * @param {boolean} [props.selected] 선택 상태
- * @param {React.ReactNode} [props.leading] leading slot 존재 여부 판단용 값
  * @param {"default" | "table"} [props.size] size 축
+ * @param {"solid" | "outlined"} [props.fill] 채움 스타일
+ * @param {boolean} [props.rounded] pill radius 적용 여부
  * @example
  * <ChipInputStyle
  *   ref={figureRef}
@@ -37,15 +39,15 @@ const ChipInputStyle = forwardRef<
       onRemove,
       disabled = false,
       selected,
-      leading,
       size = "default",
+      fill = "solid",
+      rounded = false,
       ...restProps
     },
     ref,
   ) => {
     // 변경: props 구조분해는 함수 시그니처에서만 수행하고, 본문 내 `const { ... } = props` 패턴을 제거한다.
     const removable = !disabled && typeof onRemove === "function";
-    const hasLeading = Boolean(leading);
     /**
      * 변경: remove 버튼 클릭이 chip root click으로 버블링되지 않도록 차단한다.
      */
@@ -59,18 +61,26 @@ const ChipInputStyle = forwardRef<
         {...restProps}
         // 변경: forwardedRef custom prop 대신 forwardRef의 ref를 직접 연결한다.
         ref={ref}
-        className={clsx("chip", className)}
-        data-kind="input"
+        // 변경: 기반 class + 역할 class + 외부 className 순서로 누적한다.
+        className={clsx(
+          "chip",
+          "chip-input-style",
+          "chip-input-root",
+          className,
+        )}
+        data-style="input"
+        data-fill={fill}
+        data-rounded={rounded ? "true" : undefined}
         data-removable={removable ? "true" : "false"}
         data-size={size}
         data-selected={selected ? "true" : undefined}
-        data-has-leading={hasLeading ? "true" : undefined}
         data-disabled={disabled ? "true" : undefined}
         aria-disabled={disabled ? "true" : undefined}
       >
-        <span className="chip-label">{children}</span>
+        <ChipLabel className="chip-input-label">{children}</ChipLabel>
         {removable ? (
           <ChipRemoveButton
+            className="chip-input-remove-button"
             removeButtonLabel={removeButtonLabel}
             onRemove={handleRemoveClick}
           />

package/src/components/chip/markup/Label.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { Slot } from "../../slot";
+import type { ChipLabelProps } from "../types/props";
+
+/**
+ * Chip Label; Chip 라벨 텍스트 렌더 컴포넌트.
+ * @component
+ * @param {ChipLabelProps} props
+ * @param {React.ReactNode} [props.children] 라벨 콘텐츠
+ * @param {string} [props.className] chip-label과 병합할 className
+ */
+export default function ChipLabel({ className, ...restProps }: ChipLabelProps) {
+  // Chip 라벨 스타일 일관성을 위해 모듈 전용 label 컴포넌트를 사용한다.
+  return <Slot.Text className={clsx("chip-label", className)} {...restProps} />;
+}

package/src/components/chip/markup/ListRoot.tsx

@@ -0,0 +1,88 @@
+import { type CSSProperties } from "react";
+import clsx from "clsx";
+import type { ChipListRootProps } from "../types";
+import ChipClickableStyle from "./DefaultStyle";
+import ChipInputStyle from "./InputStyle";
+
+/**
+ * Chip Markup; List Root 템플릿 컴포넌트
+ * @component
+ * @param {ChipListRootProps<OptionData>} props list root props
+ * @param {ChipListItemData<OptionData>[]} props.items 렌더링할 chip 엔트리 목록
+ * @param {"filter" | "assist" | "input"} [props.chipStyle="filter"] item 공통 chip 스타일
+ * @param {"solid" | "outlined"} [props.fill="solid"] item 공통 chip 채움 스타일
+ * @param {boolean} [props.rounded=false] item 공통 pill radius 적용 여부
+ * @param {"default" | "table"} [props.size="default"] item 공통 chip 사이즈 축
+ * @param {CSSProperties["gap"]} [props.gap] list gap
+ * @example
+ * <Chip.List
+ *   chipStyle="filter"
+ *   rounded
+ *   items={[
+ *     { id: "all", value: "all", label: "전체", selected: true },
+ *     { id: "notice", value: "notice", label: "알림" },
+ *   ]}
+ * />
+ */
+function ChipListRoot<OptionData = unknown>({
+  items,
+  chipStyle = "filter",
+  fill = "solid",
+  rounded = false,
+  size = "default",
+  gap,
+  className,
+  style,
+  ...restProps
+}: ChipListRootProps<OptionData>) {
+  const mergedStyle = {
+    ...style,
+    ...(typeof gap === "undefined" ? {} : { gap }),
+  } as CSSProperties;
+
+  return (
+    <ul
+      {...restProps}
+      // 변경: list root 역할 class를 기본으로 누적한다.
+      className={clsx("chip-list", "chip-list-root", className)}
+      style={mergedStyle}
+    >
+      {items.map(item => (
+        <li key={item.id} className="chip-list-item chip-list-entry">
+          {chipStyle === "input" ? (
+            <ChipInputStyle
+              chipStyle="input"
+              fill={fill}
+              rounded={rounded}
+              size={size}
+              selected={item.selected}
+              disabled={item.disabled}
+              title={item.title}
+              className={clsx("chip-list-chip", item.className)}
+              onRemove={item.onRemove}
+              removeButtonLabel={item.removeButtonLabel}
+            >
+              {item.label}
+            </ChipInputStyle>
+          ) : (
+            <ChipClickableStyle
+              chipStyle={chipStyle}
+              fill={fill}
+              rounded={rounded}
+              size={size}
+              selected={item.selected}
+              disabled={item.disabled}
+              title={item.title}
+              className={clsx("chip-list-chip", item.className)}
+              onClick={item.onClick}
+            >
+              {item.label}
+            </ChipClickableStyle>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export { ChipListRoot };

package/src/components/chip/markup/RemoveButton.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import RemoveIcon from "../img/remove.svg";
 import type { ChipRemoveButtonProps } from "../types";
 
@@ -14,13 +15,15 @@ import type { ChipRemoveButtonProps } from "../types";
  * />
  */
 export default function ChipRemoveButton({
+  className,
   removeButtonLabel,
   onRemove,
 }: ChipRemoveButtonProps) {
   return (
     <button
       type="button"
-      className="chip-remove-button"
+      // 변경: remove 버튼도 역할 class를 누적할 수 있게 열어둔다.
+      className={clsx("chip-remove-button", className)}
       aria-label={removeButtonLabel}
       onClick={onRemove}
     >

package/src/components/chip/markup/index.tsx

@@ -1 +1,13 @@
-export { Chip } from "./Chip";
+import { ChipDefault } from "./Chip";
+import ChipClickableStyle from "./DefaultStyle";
+import ChipInputStyle from "./InputStyle";
+import ChipLabel from "./Label";
+import { ChipListRoot } from "./ListRoot";
+
+export const Chip = {
+  Default: ChipDefault,
+  ClickableStyle: ChipClickableStyle,
+  InputStyle: ChipInputStyle,
+  Label: ChipLabel,
+  List: ChipListRoot,
+};