@uniai-fe/uds-primitives 0.3.13 → 0.3.15

package/dist/styles.css

@@ -363,7 +363,8 @@
   --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
   --input-placeholder-disabled-color: var(--color-label-disabled);
-  --input-placeholder-readonly-color: var(--input-placeholder-disabled-color);
+  /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
+  --input-placeholder-readonly-color: transparent;
   --input-font-size: var(--font-body-medium-size);
   --input-line-height: var(--font-body-medium-line-height);
   --input-font-weight: 400;
@@ -472,6 +473,12 @@
   --select-table-color-text: var(--input-text-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
+  --select-table-color-placeholder-disabled: var(
+  --select-primary-color-placeholder-disabled
+  );
+  --select-table-color-placeholder-readonly: var(
+  --select-primary-color-placeholder-readonly
+  );
   --select-table-icon-color-default: var(--select-icon-color-default);
   --select-table-icon-color-focused: var(--select-icon-color-focused);
   --select-table-icon-color-disabled: var(--select-icon-color-disabled);
@@ -506,6 +513,11 @@
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
   --select-primary-color-placeholder: var(--input-placeholder-color);
+  /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */
+  --select-primary-color-placeholder-disabled: var(--color-label-disabled);
+  --select-primary-color-placeholder-readonly: var(
+  --select-primary-color-placeholder-disabled
+  );
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
@@ -2550,6 +2562,10 @@ figure.chip {
   border-width: var(--input-border-width-default);
   background-color: var(--input-surface-disabled-color);
 }
+.input-field:not([data-priority=secondary])[data-state=error][data-readonly=true] {
+  border-color: var(--input-border-error-color);
+  border-width: var(--input-border-width-emphasis);
+}
 
 .input-element {
   flex: 1 1 auto;
@@ -3806,12 +3822,24 @@ figure.chip {
 .select-button[data-priority=table] .select-label-placeholder {
   color: var(--select-table-color-placeholder);
 }
-.select-button[data-state=disabled] .select-label-placeholder, .select-button[data-readonly=true] .select-label-placeholder {
-  color: var(--select-primary-color-text-disabled);
+.select-button[data-state=disabled] .select-label-placeholder {
+  color: var(--select-primary-color-placeholder-disabled);
+}
+.select-button[data-readonly=true] .select-label-placeholder {
+  color: var(--select-primary-color-placeholder-readonly);
 }
-.select-button[data-priority=secondary][data-state=disabled] .select-label-placeholder, .select-button[data-priority=secondary][data-readonly=true] .select-label-placeholder {
+.select-button[data-priority=secondary][data-state=disabled] .select-label-placeholder {
   color: var(--select-secondary-color-placeholder-disabled);
 }
+.select-button[data-priority=secondary][data-readonly=true] .select-label-placeholder {
+  color: var(--select-secondary-color-placeholder-readonly);
+}
+.select-button[data-priority=table][data-state=disabled] .select-label-placeholder {
+  color: var(--select-table-color-placeholder-disabled);
+}
+.select-button[data-priority=table][data-readonly=true] .select-label-placeholder {
+  color: var(--select-table-color-placeholder-readonly);
+}
 
 .select-button[data-size=small] .select-label {
   font-size: var(--select-text-small-size);
@@ -4193,17 +4221,21 @@ figure.chip {
   font-weight: 600;
 }
 
+.table.table-container[data-layout=line] .table-native-cell[rowspan] {
+  border-right: 1px solid var(--table-border-color);
+}
+
 .table.table-container[data-layout=grid] .table-native-cell.table-th,
 .table.table-container[data-layout=grid] .table-native-cell.table-td {
   --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
-  border: 1px solid var(--table-border-color);
   height: var(--table-grid-cell-height);
 }
 
 .table.table-container[data-layout=grid] {
   border-radius: var(--table-grid-border-radius);
-  overflow: hidden;
+  overflow: visible;
+  isolation: isolate;
 }
 
 .table.table-container[data-layout=grid] .table-head .table-native-cell.table-th {
@@ -4214,11 +4246,117 @@ figure.chip {
   background-color: var(--table-grid-row-header-background-color);
 }
 
+.table.table-container[data-layout=grid] .table-foot .table-native-cell.table-th {
+  background-color: var(--table-grid-row-header-background-color);
+}
+
 .table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-th,
 .table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-td {
   background-color: var(--table-grid-row-highlight-background-color);
 }
 
+.table.table-container .table-row > .table-native-cell.table-th:first-child {
+  position: sticky;
+  left: 0;
+}
+
+.table.table-container .table-head .table-row > .table-native-cell.table-th:first-child {
+  z-index: 150;
+}
+
+.table.table-container .table-body .table-row > .table-native-cell.table-th:first-child {
+  z-index: 100;
+}
+
+.table.table-container .table-foot .table-row > .table-native-cell.table-th:first-child {
+  z-index: 50;
+}
+
+.table.table-container .table-head .table-row:first-child > .table-native-cell.table-th:first-child {
+  z-index: 200;
+}
+
+.table.table-container .table-native-cell.table-td {
+  position: relative;
+  z-index: 0;
+}
+
+.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:first-child {
+  border-top-left-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:last-child {
+  border-top-right-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child,
+.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child {
+  border-bottom-left-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child,
+.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child {
+  border-bottom-right-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout=grid] .table-cell-content {
+  border-right: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell > .table-cell-content {
+  border-top: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=grid] .table-row > .table-native-cell:first-child > .table-cell-content {
+  border-left: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] > .table-cell-content {
+  border-right: 0;
+}
+
+.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] + .table-native-cell > .table-cell-content {
+  border-left: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:first-child .table-cell-content {
+  border-top-left-radius: inherit;
+}
+
+.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:last-child .table-cell-content {
+  border-top-right-radius: inherit;
+}
+
+.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child .table-cell-content,
+.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child .table-cell-content {
+  border-bottom-left-radius: inherit;
+}
+
+.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child .table-cell-content,
+.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child .table-cell-content {
+  border-bottom-right-radius: inherit;
+}
+
+.table-scroll-wrapper {
+  width: 100%;
+  border-radius: var(--table-grid-border-radius);
+}
+
+.table-scroll-wrapper[data-scroll-axis=x] {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.table-scroll-wrapper[data-scroll-axis=y] {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+.table-scroll-wrapper[data-scroll-axis=both] {
+  overflow: auto;
+}
+
 .table-native-cell.table-th .table-native-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
@@ -4442,6 +4580,14 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
+.table.table-container .table-foot .table-cell-content,
+.table.table-container .table-foot .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
 .table-cell.table-body-cell .radio-label-text,
 .table-cell.table-foot-cell .radio-label-text {
   color: var(--table-td-text-color);

package/package.json

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

package/src/components/input/markup/date/Template.tsx

@@ -40,6 +40,7 @@ const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
  * @param {UseFormRegisterReturn} [props.register] RHF register
  * @param {string} [props.placeholder="YYYY-MM-DD"] placeholder
  * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] trigger input priority
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
  * @param {ReactNode} [props.header] 패널 header 콘텐츠
  * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
  * @param {unknown} [props.timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
@@ -66,6 +67,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       register,
       placeholder = "YYYY-MM-DD",
       priority = "primary",
+      state = "default",
       className,
       header,
       footer,
@@ -156,8 +158,10 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       placeholder,
       displayValue: triggerValue,
       disabled,
+      readOnly,
       onClick: handleTriggerClick,
       priority,
+      state,
     };
 
     const triggerNode = trigger ?? renderTrigger?.(triggerRenderProps) ?? (
@@ -168,6 +172,8 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         placeholder={placeholder}
         displayValue={triggerValue}
         disabled={disabled}
+        state={state}
+        readOnly={readOnly}
         onClick={handleTriggerClick}
         priority={priority}
       />

package/src/components/input/markup/date/Trigger.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import clsx from "clsx";
-import type { MouseEvent } from "react";
+import type {
+  ClipboardEvent,
+  DragEvent,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+} from "react";
 import { forwardRef } from "react";
 import { Calendar } from "../../../calendar";
 import { InputFoundation } from "../foundation";
@@ -18,7 +24,9 @@ import type { InputCalendarTriggerViewProps } from "../../types";
  * @param {string} [props.displayValue] 표시 문자열
  * @param {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
  * @param {boolean} [props.disabled] disabled 여부
+ * @param {boolean} [props.readOnly] readOnly 여부
  * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority] trigger input priority
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state] trigger input state
  * @param {string} [props.id] input id
  * @param {string} [props.name] form name
  * @param {UseFormRegisterReturn} [props.register] RHF register
@@ -34,7 +42,9 @@ const InputDateTrigger = forwardRef<
       displayValue,
       onClick,
       disabled,
+      readOnly,
       priority,
+      state,
       id,
       name,
       register,
@@ -53,6 +63,55 @@ const InputDateTrigger = forwardRef<
       }
       onClick?.(event as never);
     };
+    // 변경: Date trigger는 기본적으로 직접 타이핑을 막고, 달력 선택을 단일 입력 경로로 유지한다.
+    const shouldBlockTyping = !disabled && !readOnly;
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!shouldBlockTyping) {
+        return;
+      }
+
+      const navigableKeys = new Set([
+        "Tab",
+        "Shift",
+        "Control",
+        "Alt",
+        "Meta",
+        "Escape",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+      ]);
+
+      if (navigableKeys.has(event.key)) {
+        return;
+      }
+
+      event.preventDefault();
+    };
+
+    const handleBeforeInput = (event: FormEvent<HTMLInputElement>) => {
+      if (shouldBlockTyping) {
+        event.preventDefault();
+      }
+    };
+
+    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+      if (shouldBlockTyping) {
+        event.preventDefault();
+      }
+    };
+
+    const handleDrop = (event: DragEvent<HTMLInputElement>) => {
+      if (shouldBlockTyping) {
+        event.preventDefault();
+      }
+    };
 
     return (
       <InputFoundation.Base
@@ -60,17 +119,23 @@ const InputDateTrigger = forwardRef<
         ref={ref}
         value={displayValue}
         // PopOver.Trigger(asChild)가 주입한 `type="button"`으로 placeholder가 사라지는 문제를 막기 위해
-        // Date trigger는 항상 readOnly text input으로 고정한다.
+        // Date trigger는 항상 text type을 유지한다.
         type="text"
-        readOnly
+        readOnly={readOnly}
         disabled={disabled}
+        inputMode={shouldBlockTyping ? "none" : undefined}
         id={id}
         name={name ?? register?.name}
         register={register}
         priority={priority}
+        state={state}
         placeholder={placeholder}
         className={clsx("input-date-trigger-input", className)}
         onClick={handleInputClick}
+        onKeyDown={handleKeyDown}
+        onBeforeInput={handleBeforeInput}
+        onPaste={handlePaste}
+        onDrop={handleDrop}
         // table priority는 icon을 왼쪽 슬롯에 배치한다.
         left={
           priority === "table" ? (

package/src/components/input/markup/foundation/Input.tsx

@@ -30,9 +30,10 @@ import InputBaseUtil from "./Utility";
  * @component
  * @param {InputProps} props Input 컴포넌트 공통 props
  * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] 디자인 토큰 우선순위
- * @param {"small" | "medium" | "large"} [props.size="medium"] 높이/타이포 세트
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] 시각 상태
+ * @param {"small" | "medium" | "large"} [props.size="medium"] 높이/타이포 세트(tertiary는 small 고정)
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] 시각 상태(tertiary는 disabled 외 feedback color 미적용)
  * @param {boolean} [props.block=false] true면 width 100% (`priority="table"`은 width 미지정 시 full 기본)
+ * @param {React.ReactNode} [props.inlineLabel] tertiary border 내부 상단 라벨
  * @param {FormFieldWidth} [props.width] width preset
  * @param {React.ReactNode} [props.left] 입력 왼쪽 슬롯(아이콘/텍스트)
  * @param {React.ReactNode} [props.right] 입력 오른쪽 슬롯
@@ -63,6 +64,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
       state: stateProp = "default",
       block = false,
       width,
+      inlineLabel,
       left,
       right,
       clear,
@@ -91,6 +93,8 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     const isTablePriority = priority === "table";
     const resolvedBlock = block || (isTablePriority && width === undefined);
 
+    // 변경: tertiary는 디자인 계약상 small 단일 사이즈만 사용한다.
+    const resolvedSize = priority === "tertiary" ? "small" : size;
     const generatedId = useId();
     const registerRef = register?.ref;
     const registerOnChange = register?.onChange;
@@ -117,7 +121,15 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     const currentState = disabled ? "disabled" : stateProp;
     const isDisabled =
       currentState === "disabled" || currentState === "loading";
-    const visualState = !isDisabled && isFocused ? "active" : currentState;
+    // 변경: tertiary는 status feedback(success/error/active/focused) 컬러를 적용하지 않는다.
+    const visualState =
+      priority === "tertiary"
+        ? isDisabled
+          ? "disabled"
+          : "default"
+        : !isDisabled && isFocused
+          ? "active"
+          : currentState;
 
     const setInputRef = useCallback(
       (node: HTMLInputElement | null) => {
@@ -201,13 +213,13 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
         className={clsx(
           "input",
           `input-priority-${priority}`,
-          `input-size-${size}`,
+          `input-size-${resolvedSize}`,
           `input-state-${visualState}`,
           resolvedBlock && "input-block",
           className,
         )}
         data-priority={priority}
-        data-size={size}
+        data-size={resolvedSize}
         data-state={visualState}
         data-readonly={isReadOnly ? "true" : undefined}
         data-block={resolvedBlock ? "true" : undefined}
@@ -219,7 +231,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
           className={clsx(
             "input-box",
             `input-box-priority-${priority}`,
-            `input-box-size-${size}`,
+            `input-box-size-${resolvedSize}`,
             `input-box-state-${visualState}`,
             resolvedBlock && "input-box-block",
             boxClassNameProp,
@@ -230,7 +242,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             className="input-field"
             data-state={visualState}
             data-priority={priority}
-            data-size={size}
+            data-size={resolvedSize}
             data-readonly={isReadOnly ? "true" : undefined}
             data-block={resolvedBlock ? "true" : undefined}
           >
@@ -239,6 +251,10 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
               {left && (
                 <InputBaseSideSlot type="left">{left}</InputBaseSideSlot>
               )}
+              {priority === "tertiary" && inlineLabel ? (
+                // 변경: tertiary 라벨은 FormField header가 아니라 input border 내부에 노출한다.
+                <span className="input-inline-label">{inlineLabel}</span>
+              ) : null}
               <input
                 {...restProps}
                 id={id ?? generatedId}

package/src/components/input/markup/foundation/Utility.tsx

@@ -44,8 +44,9 @@ export default function InputBaseUtil({
       : state === "error"
         ? (error ?? baseStatusIcon)
         : null;
-  // table priority는 상태를 border로만 표현하므로 status icon을 렌더하지 않는다.
-  const resolvedStatusIcon = priority === "table" ? null : statusIcon;
+  // 변경: table/tertiary priority는 상태 아이콘을 렌더하지 않는다.
+  const resolvedStatusIcon =
+    priority === "table" || priority === "tertiary" ? null : statusIcon;
   const clearIconNode = clear ?? InputStatusIcon.reset;
   const showClearIcon = Boolean(
     clearIconNode &&

package/src/components/input/styles/foundation.scss

@@ -201,6 +201,12 @@
       border-width: var(--input-border-width-default);
       background-color: var(--input-surface-disabled-color);
     }
+
+    &[data-state="error"][data-readonly="true"] {
+      // 변경: calendar trigger처럼 readOnly input에서도 error state를 우선 노출한다.
+      border-color: var(--input-border-error-color);
+      border-width: var(--input-border-width-emphasis);
+    }
   }
 }
 

package/src/components/input/styles/variables.scss

@@ -51,7 +51,8 @@
   --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
   --input-placeholder-disabled-color: var(--color-label-disabled);
-  --input-placeholder-readonly-color: var(--input-placeholder-disabled-color);
+  /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
+  --input-placeholder-readonly-color: transparent;
   --input-font-size: var(--font-body-medium-size);
   --input-line-height: var(--font-body-medium-line-height);
   --input-font-weight: 400;

package/src/components/input/types/date.ts

@@ -7,7 +7,7 @@ import type {
   CalendarOnChange,
   CalendarValue,
 } from "../../calendar";
-import type { InputPriority } from "./foundation";
+import type { InputPriority, InputState } from "./foundation";
 
 /**
  * Calendar trigger(Input) 영역에서 필요한 속성 묶음.
@@ -17,8 +17,10 @@ import type { InputPriority } from "./foundation";
  * @property {UseFormRegisterReturn} [register] react-hook-form register 결과
  * @property {(event: MouseEvent<Element>) => void} [onClick] trigger 클릭 핸들러
  * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
  * @property {string} [placeholder] trigger 내부 placeholder
  * @property {InputPriority} [priority] trigger input priority
+ * @property {InputState} [state] trigger input state
  */
 export interface InputCalendarTriggerProps {
   /**
@@ -41,6 +43,10 @@ export interface InputCalendarTriggerProps {
    * disabled 여부
    */
   disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
   /**
    * trigger 내부 placeholder
    */
@@ -50,6 +56,10 @@ export interface InputCalendarTriggerProps {
    * - table일 때 Trigger는 left icon 배치를 사용한다.
    */
   priority?: InputPriority;
+  /**
+   * trigger input state
+   */
+  state?: InputState;
 }
 
 /**
@@ -75,8 +85,10 @@ export interface InputCalendarTriggerViewProps extends InputCalendarTriggerProps
  * @property {string} [displayValue] 트리거 표시 문자열
  * @property {string} [placeholder] 트리거 placeholder
  * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
  * @property {(event: MouseEvent<Element>) => void} [onClick] 트리거 클릭 핸들러
  * @property {InputPriority} [priority] trigger input priority
+ * @property {InputState} [state] trigger input state
  */
 export interface InputCalendarTriggerRenderProps {
   /**
@@ -99,6 +111,10 @@ export interface InputCalendarTriggerRenderProps {
    * disabled 여부
    */
   disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
   /**
    * 트리거 클릭 핸들러
    */
@@ -108,6 +124,10 @@ export interface InputCalendarTriggerRenderProps {
    * - table일 때 Trigger는 left icon 배치를 사용한다.
    */
   priority?: InputPriority;
+  /**
+   * trigger input state
+   */
+  state?: InputState;
 }
 
 /**
@@ -122,6 +142,7 @@ export interface InputCalendarTriggerRenderProps {
  * @property {boolean} [disabled] disabled 여부
  * @property {CalendarDatePickerProps} [datePickerProps] Mantine DatePicker 직접 옵션
  * @property {InputPriority} [priority] trigger input priority
+ * @property {InputState} [state] trigger input state
  * @property {ReactNode} [header] 커스텀 header 콘텐츠
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
  * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)

package/src/components/input/types/foundation.ts

@@ -93,6 +93,7 @@ export interface InputIcon {
  * @property {InputSize} [size] 스타일 사이즈 타입
  * @property {InputState} [state] input 상태
  * @property {boolean} [block] width: 100% 여부
+ * @property {ReactNode} [inlineLabel] tertiary 내부 라벨
  * @property {string} [inputClassName]
  * @property {string} [boxClassName]
  * @property {UseFormRegisterReturn} [register]
@@ -121,6 +122,10 @@ export interface InputProps extends Omit<NativeInputProps, "size">, InputIcon {
    * true면 width:100%
    */
   block?: boolean;
+  /**
+   * tertiary priority에서 border 내부 상단에 배치할 라벨 텍스트/노드
+   */
+  inlineLabel?: ReactNode;
   /**
    * 실제 `<input>` className
    */

package/src/components/select/styles/select.scss

@@ -272,15 +272,30 @@
     color: var(--select-table-color-placeholder);
   }
 
-  .select-button[data-state="disabled"] &,
+  // 변경: disabled/readonly placeholder 색상을 상태 토큰으로 분리한다.
+  .select-button[data-state="disabled"] & {
+    color: var(--select-primary-color-placeholder-disabled);
+  }
+
   .select-button[data-readonly="true"] & {
-    color: var(--select-primary-color-text-disabled);
+    color: var(--select-primary-color-placeholder-readonly);
   }
 
-  .select-button[data-priority="secondary"][data-state="disabled"] &,
-  .select-button[data-priority="secondary"][data-readonly="true"] & {
+  .select-button[data-priority="secondary"][data-state="disabled"] & {
     color: var(--select-secondary-color-placeholder-disabled);
   }
+
+  .select-button[data-priority="secondary"][data-readonly="true"] & {
+    color: var(--select-secondary-color-placeholder-readonly);
+  }
+
+  .select-button[data-priority="table"][data-state="disabled"] & {
+    color: var(--select-table-color-placeholder-disabled);
+  }
+
+  .select-button[data-priority="table"][data-readonly="true"] & {
+    color: var(--select-table-color-placeholder-readonly);
+  }
 }
 
 .select-button[data-size="small"] .select-label {

package/src/components/select/styles/variables.scss

@@ -42,6 +42,12 @@
   --select-table-color-text: var(--input-text-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
+  --select-table-color-placeholder-disabled: var(
+    --select-primary-color-placeholder-disabled
+  );
+  --select-table-color-placeholder-readonly: var(
+    --select-primary-color-placeholder-readonly
+  );
   --select-table-icon-color-default: var(--select-icon-color-default);
   --select-table-icon-color-focused: var(--select-icon-color-focused);
   --select-table-icon-color-disabled: var(--select-icon-color-disabled);
@@ -78,6 +84,11 @@
   --select-icon-size-large: 2rem;
 
   --select-primary-color-placeholder: var(--input-placeholder-color);
+  /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */
+  --select-primary-color-placeholder-disabled: var(--color-label-disabled);
+  --select-primary-color-placeholder-readonly: var(
+    --select-primary-color-placeholder-disabled
+  );
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);

package/src/components/table/markup/Container.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { forwardRef } from "react";
 import type { TableContainerProps } from "../types";
 import TableBody from "./foundation/Body";
@@ -11,8 +12,14 @@ import TableRow from "./foundation/Row";
  * Table Preset; 기본 Container 조합 컴포넌트
  * @component
  * @param {TableContainerProps} props
+ * @desc
+ * - columns 기반 colgroup/head 렌더링을 preset으로 제공한다.
+ * - `scrollable`이 true면 optional scroll wrapper를 추가해 소비처에서 스크롤 책임을 분리할 수 있다.
  * @param {TableColumnData[]} [props.columns] colgroup/head 자동 렌더링 column 목록
  * @param {boolean} [props.isCustomBody=false] true면 body wrapper 없이 children 직접 렌더링
+ * @param {boolean} [props.scrollable=false] true면 외부 스크롤 래퍼를 추가한다.
+ * @param {"x" | "y" | "both"} [props.scrollAxis="x"] scrollable일 때 스크롤 축
+ * @param {string} [props.scrollClassName] 스크롤 래퍼 className
  * @param {React.ReactNode} [props.footer] footer 노드. `<Table.Foot />`를 직접 전달하는 방식을 권장
  * @param {React.ReactNode} [props.children] table body 콘텐츠
  * @example
@@ -32,14 +39,32 @@ import TableRow from "./foundation/Row";
  * </Table.Container>
  */
 const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
-  ({ columns, isCustomBody = false, footer, children, ...tableProps }, ref) => {
+  (
+    {
+      columns,
+      isCustomBody = false,
+      scrollable = false,
+      scrollAxis = "x",
+      scrollClassName,
+      footer,
+      children,
+      ...tableProps
+    },
+    ref,
+  ) => {
     // 변경: optional columns를 안전하게 순회하기 위한 기본 배열을 고정한다.
     const resolvedColumns = columns ?? [];
     // 변경: columns 존재 여부만 단일 플래그로 관리해 렌더 분기 가독성을 유지한다.
     const hasColumns = resolvedColumns.length > 0;
+    // 변경: footer prop 주입 여부를 table data-attr로 노출해 grid radius 규칙 분기에 사용한다.
+    const hasFooter = typeof footer !== "undefined";
 
-    return (
-      <TableRoot {...tableProps} ref={ref}>
+    const tableNode = (
+      <TableRoot
+        {...tableProps}
+        ref={ref}
+        data-has-footer={hasFooter ? "true" : undefined}
+      >
         {hasColumns && (
           <colgroup>
             {resolvedColumns.map(({ key, width, dataKey, className }) => (
@@ -84,6 +109,19 @@ const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
         {footer}
       </TableRoot>
     );
+
+    if (!scrollable) {
+      return tableNode;
+    }
+
+    return (
+      <div
+        className={clsx("table-scroll-wrapper", scrollClassName)}
+        data-scroll-axis={scrollAxis}
+      >
+        {tableNode}
+      </div>
+    );
   },
 );
 

package/src/components/table/markup/foundation/Th.tsx

@@ -6,8 +6,15 @@ import type { TableThProps } from "../../types";
  * Table Foundation; Th 마크업 컴포넌트
  * @component
  * @param {TableThProps} props
+ * @desc
+ * - sticky/레이어 우선순위는 `styles/foundation.scss`에서 section/column 기준으로 제어한다.
  * @param {string} [props.className] th className
+ * @param {React.CSSProperties} [props.style] th inline style
  * @param {React.ReactNode} [props.children] 셀 콘텐츠
+ * @example
+ * <Table.Th scope="row">
+ *   <Table.Cell section="body">항목</Table.Cell>
+ * </Table.Th>
  */
 const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
   ({ className, children, scope, style, ...cellProps }, ref) => {
@@ -18,8 +25,8 @@ const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
         className={clsx("table-native-cell", "table-th", className)}
         // th 기본 scope는 col로 유지한다.
         scope={scope ?? "col"}
-        // 변경: th/td 레벨 text-align은 기본 left 고정으로 유지한다.
-        style={{ ...style, textAlign: "left" }}
+        // 변경: sticky/left/z-index는 CSS 규칙으로 위임해 인라인 우선순위 충돌을 방지한다.
+        style={style}
       >
         {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
         {typeof children === "string" || typeof children === "number" ? (

package/src/components/table/styles/foundation.scss

@@ -49,19 +49,26 @@
   font-weight: 600;
 }
 
+// 변경: line(list) 타입에서 rowspan 셀은 기본적으로 우측 경계선을 표시한다.
+.table.table-container[data-layout="line"] .table-native-cell[rowspan] {
+  border-right: 1px solid var(--table-border-color);
+}
+
 // 변경: grid 타입은 모든 셀 border와 헤더 배경을 기본 제공한다.
 .table.table-container[data-layout="grid"] .table-native-cell.table-th,
 .table.table-container[data-layout="grid"] .table-native-cell.table-td {
   // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
   --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
-  border: 1px solid var(--table-border-color);
   height: var(--table-grid-cell-height);
 }
 
 .table.table-container[data-layout="grid"] {
   border-radius: var(--table-grid-border-radius);
-  overflow: hidden;
+  // 변경: Tooltip/Popover/Dropdown clipping을 막기 위해 grid container overflow를 제거한다.
+  overflow: visible;
+  // 변경: sticky cell layering 기준점을 분리해 z-index 충돌을 줄인다.
+  isolation: isolate;
 }
 
 .table.table-container[data-layout="grid"]
@@ -77,6 +84,13 @@
   background-color: var(--table-grid-row-header-background-color);
 }
 
+// 변경: grid foot의 th도 body row-header와 동일한 배경으로 유지해 sticky 겹침 시 시각 이탈을 방지한다.
+.table.table-container[data-layout="grid"]
+  .table-foot
+  .table-native-cell.table-th {
+  background-color: var(--table-grid-row-header-background-color);
+}
+
 // 변경: grid 타입 highlighted row는 row-header(th)보다 우선해 th/td 모두 blue tint를 적용한다.
 .table.table-container[data-layout="grid"]
   .table-row[data-highlighted="true"]
@@ -87,6 +101,185 @@
   background-color: var(--table-grid-row-highlight-background-color);
 }
 
+// 변경: 인라인 스타일 대신 각 row의 첫 번째 th만 sticky로 고정한다.
+.table.table-container .table-row > .table-native-cell.table-th:first-child {
+  position: sticky;
+  left: 0;
+}
+
+// 변경: sticky된 첫 번째 th가 td 위에서 안정적으로 보이도록 섹션별 z-index를 50단위로 분리한다.
+.table.table-container
+  .table-head
+  .table-row
+  > .table-native-cell.table-th:first-child {
+  z-index: 150;
+}
+
+.table.table-container
+  .table-body
+  .table-row
+  > .table-native-cell.table-th:first-child {
+  z-index: 100;
+}
+
+.table.table-container
+  .table-foot
+  .table-row
+  > .table-native-cell.table-th:first-child {
+  z-index: 50;
+}
+
+// 변경: scroll 시 index 0 컬럼의 첫 header th가 항상 최상단에 보이도록 z-index를 상향한다.
+.table.table-container
+  .table-head
+  .table-row:first-child
+  > .table-native-cell.table-th:first-child {
+  z-index: 200;
+}
+
+// 변경: sticky th와 겹치는 td 텍스트가 앞서 보이지 않도록 td를 기본 레이어로 고정한다.
+.table.table-container .table-native-cell.table-td {
+  position: relative;
+  z-index: 0;
+}
+
+// 변경: grid 코너 라운드는 cell(th/td) 자체에 직접 적용해 sticky/scroll 상황에서도 모서리 형상을 유지한다.
+.table.table-container[data-layout="grid"]
+  .table-head
+  .table-row:first-child
+  > .table-native-cell:first-child {
+  border-top-left-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout="grid"]
+  .table-head
+  .table-row:first-child
+  > .table-native-cell:last-child {
+  border-top-right-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout="grid"]
+  .table-foot
+  .table-row:last-child
+  > .table-native-cell:first-child,
+.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
+  .table-body:last-of-type
+  .table-row:last-child
+  > .table-native-cell:first-child {
+  border-bottom-left-radius: var(--table-grid-border-radius);
+}
+
+.table.table-container[data-layout="grid"]
+  .table-foot
+  .table-row:last-child
+  > .table-native-cell:last-child,
+.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
+  .table-body:last-of-type
+  .table-row:last-child
+  > .table-native-cell:last-child {
+  border-bottom-right-radius: var(--table-grid-border-radius);
+}
+
+// 변경: grid border를 native cell이 아닌 cell-content에 그려 sticky 겹침/코너 clipping을 안정화한다.
+.table.table-container[data-layout="grid"] .table-cell-content {
+  border-right: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+// 변경: border-top은 thead 내부 첫 row의 cell에만 적용한다.
+.table.table-container[data-layout="grid"]
+  .table-head
+  .table-row:first-child
+  > .table-native-cell
+  > .table-cell-content {
+  border-top: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout="grid"]
+  .table-row
+  > .table-native-cell:first-child
+  > .table-cell-content {
+  border-left: 1px solid var(--table-border-color);
+}
+
+// 변경: grid 병합(rowspan) 셀은 우측 border를 제거하고, 인접 다음 셀의 좌측 border로 경계를 표현한다.
+.table.table-container[data-layout="grid"]
+  .table-row
+  > .table-native-cell[rowspan]
+  > .table-cell-content {
+  border-right: 0;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-row
+  > .table-native-cell[rowspan]
+  + .table-native-cell
+  > .table-cell-content {
+  border-left: 1px solid var(--table-border-color);
+}
+
+// 변경: 요청사항(and)에 맞춰 코너 셀의 th/td와 내부 cell-content 모두 동일 반경을 공유한다.
+
+.table.table-container[data-layout="grid"]
+  .table-row:first-child
+  > .table-native-cell:first-child
+  .table-cell-content {
+  border-top-left-radius: inherit;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-row:first-child
+  > .table-native-cell:last-child
+  .table-cell-content {
+  border-top-right-radius: inherit;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-foot
+  .table-row:last-child
+  > .table-native-cell:first-child
+  .table-cell-content,
+.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
+  .table-body:last-of-type
+  .table-row:last-child
+  > .table-native-cell:first-child
+  .table-cell-content {
+  border-bottom-left-radius: inherit;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-foot
+  .table-row:last-child
+  > .table-native-cell:last-child
+  .table-cell-content,
+.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
+  .table-body:last-of-type
+  .table-row:last-child
+  > .table-native-cell:last-child
+  .table-cell-content {
+  border-bottom-right-radius: inherit;
+}
+
+// 변경: optional scroll 래퍼를 통해 필요한 화면에서만 스크롤 레이어를 분리한다.
+.table-scroll-wrapper {
+  width: 100%;
+  border-radius: var(--table-grid-border-radius);
+}
+
+.table-scroll-wrapper[data-scroll-axis="x"] {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.table-scroll-wrapper[data-scroll-axis="y"] {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+.table-scroll-wrapper[data-scroll-axis="both"] {
+  overflow: auto;
+}
+
 // 변경: tag selector 대신 className selector로 텍스트 스타일 적용 범위를 고정한다.
 .table-native-cell.table-th .table-native-cell-text {
   color: var(--table-th-text-color);
@@ -333,6 +526,15 @@
   line-height: var(--table-td-text-line-height);
 }
 
+// 변경: footer(table-foot) 내부 셀 콘텐츠 타이포를 body와 동일한 td 스케일로 고정한다.
+.table.table-container .table-foot .table-cell-content,
+.table.table-container .table-foot .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
 // 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
 .table-cell.table-body-cell .radio-label-text,
 .table-cell.table-foot-cell .radio-label-text {

package/src/components/table/types/foundation.ts

@@ -31,7 +31,13 @@ export const TABLE_CELL_ALIGN_ITEMS_OPTIONS = [
 export const TABLE_CELL_PADDING_OPTIONS = ["default", "none"] as const;
 export const TABLE_SECTIONS = ["head", "body", "foot"] as const;
 export const TABLE_LAYOUT_OPTIONS = ["line", "grid"] as const;
+export const TABLE_SCROLL_AXES = ["x", "y", "both"] as const;
 
+/**
+ * Table Types; 스크롤 축 타입
+ * @typedef {"x" | "y" | "both"} TableScrollAxis
+ */
+export type TableScrollAxis = (typeof TABLE_SCROLL_AXES)[number];
 /**
  * Table Types; Cell 가로 정렬 값 타입
  * @typedef {"left" | "center" | "right" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"} TableCellAlignX
@@ -126,6 +132,9 @@ export interface TableColumnData {
  * Table Types; Container props
  * @property {TableColumnData[]} [columns] colgroup/head 자동 렌더링용 column 데이터
  * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
+ * @property {boolean} [scrollable=false] true면 외부 스크롤 래퍼를 추가한다.
+ * @property {"x" | "y" | "both"} [scrollAxis="x"] scrollable일 때 스크롤 축
+ * @property {string} [scrollClassName] 스크롤 래퍼 className
  * @property {React.ReactNode} [footer] footer 노드
  * @property {React.ReactNode} [children] body 콘텐츠
  */
@@ -138,6 +147,18 @@ export interface TableContainerProps extends TableRootProps {
    * true면 body wrapper 없이 children을 직접 렌더링
    */
   isCustomBody?: boolean;
+  /**
+   * true면 외부 스크롤 래퍼를 추가한다.
+   */
+  scrollable?: boolean;
+  /**
+   * scrollable일 때 스크롤 축
+   */
+  scrollAxis?: TableScrollAxis;
+  /**
+   * 스크롤 래퍼 className
+   */
+  scrollClassName?: string;
   /**
    * footer 노드
    */
@@ -187,6 +208,7 @@ export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
 /**
  * Table Types; Th props
  * @property {string} [className] th className
+ * @property {React.CSSProperties} [style] sticky 기본값(position/left/z-index/textAlign) override style
  * @property {React.ReactNode} [children] header cell 콘텐츠
  */
 export interface TableThProps extends ComponentPropsWithoutRef<"th"> {}