@olundot/ui 0.20.0-next.7 → 0.20.0-next.9

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @olundot/ui
 
+## 0.20.0-next.9
+
+### Minor Changes
+
+- 485f5fc: Deprecate BulkActionBar `placement="inline"`. Behavior is unchanged; it now logs a one-time development warning and is removed in the next minor. Use the default `floating` placement.
+
+  `compactSummary` is used only by `placement="inline"`, so it is deprecated too and removed with it.
+
+- 266aa4d: DataTable에 `defaultSort`를 추가했다. 기본 정렬 열을 누르면 정렬 해제 없이 기본 방향과 반대 방향을 오간다. 예전에는 기본 정렬이 내림차순인 열이 `desc → 해제(=기본 desc)`로 돌아 화면이 바뀌지 않고 오름차순에 닿지 못했다.
+
+  - 다른 열은 그대로 `asc → desc → 해제` 순이다.
+  - 1024px 미만 정렬 메뉴와 `aria-sort`도 같은 순환을 따른다.
+  - `sortBy`가 없으면 열 머리와 정렬 버튼이 `defaultSort`를 보인다.
+  - `defaultSort`를 주지 않는 표는 동작이 같다.
+
+- b7c220f: NotificationBadge: 역할 없는 `span`의 `aria-label`은 읽히지 않을 수 있어 이름을 화면에 보이지 않는 글자(`sr-only`)로 옮겼다. 보이는 숫자는 `aria-hidden`이다. `aria-label` prop은 그대로 그 글자를 바꾼다. 루트에 `aria-label` 속성이 더는 붙지 않는다.
+
+  Chip: `onClick`과 `pressed`가 없는 `variant="status-filter"`는 `span`으로 그린다. 읽기만 하는 라벨이 Tab 순서에 들어가지 않고 `aria-pressed="false"`도 없어진다. 모양은 그대로다. 호환성 영향: 그런 칩을 `button` 역할로 찾던 테스트는 칩을 찾지 못한다. `onClick`을 넘기지 않는 래퍼로 툴팁을 단 칩은 키보드 포커스를 잃는다. DS `TooltipTrigger asChild`는 `onClick`을 넘기므로 칩이 `button`으로 남는다. `onClick`이나 `pressed`를 준 칩은 `pressed={false}`여도 지금처럼 `button`이다.
+
+  Chip: 개수(`count`)를 보조 기술이 라벨과 함께 읽는다. 보이는 개수는 `aria-hidden`이고 같은 값을 `sr-only` 글자로 둔다. `removeLabel` 기본값을 `'Remove'`에서 `'제거'`로 바꿨다.
+
+  FilterToolbar: 루트에 `role="group"`을 붙여 `aria-label`이 이름으로 노출된다. `role="toolbar"`는 컨트롤 사이 화살표 키 이동을 약속하므로 쓰지 않는다. 사용하는 쪽이 준 `role`이 이긴다.
+
+  CheckboxGroup·RadioGroup: `orientation="horizontal"`이 실제로 가로 배치가 된다. `plain` 선택지가 줄 전체 폭(`w-full`) 대신 내용 폭이라 나란히 놓이고, 자리가 모자라면 줄을 바꾼다. `card`와 `vertical`은 그대로다.
+
+  DataTable: `density` prop을 사용 중단 예정으로 표시했다(JSDoc `@deprecated`). 값마다 정해진 디자인 값이 없어 지금도 효과가 없다. 동작은 그대로다. 호환성을 깨는 다음 릴리스에서 지운다.
+
+- c1771fa: `FilterToolbar`의 `actions`를 결과 요약 줄에서 컨트롤 줄(`filter-toolbar-row`)로 옮겼다. 공개 API는 같고 배치만 바뀐다. `actions`는 컨트롤이 놓인 마지막 줄의 오른쪽 끝에 붙는다. 640px 미만에서 `filters`가 있으면 필터 다음 줄 오른쪽에 놓인다. 필터를 모두 `collapsible`로 접으면 검색, 접힌 필터 버튼, `actions`가 한 줄에 놓인다. `resultSummary`와 `clearAction`은 예전처럼 아래 줄에 남는다. `search`, `filters`, `collapsible`이 모두 없으면 `actions`는 예전처럼 `resultSummary`, `clearAction` 뒤 같은 줄에 놓인다. DOM 순서는 `search`, `filters`, `actions`, `resultSummary`, `clearAction`이다.
+
+  640px 미만에서 검색은 같은 줄의 남은 폭을 쓴다. 검색의 최소 폭은 160px이되 툴바 폭을 넘지 않는다. 검색 옆에 들어가지 않는 `actions`는 다음 줄로 내려간다.
+
+- 933260c: FormField가 자식 DS 폼 컨트롤에 라벨과 안내 연결을 컨텍스트로 내려 준다. 공개 prop은 그대로다.
+
+  - 자식을 요소로 주면 Input, Textarea, Select, SearchField, Checkbox, Switch가 FormField 컨텍스트를 받는다. 자기 `id`가 없으면 FormField의 `id`를 쓰고, `aria-describedby`는 직접 준 값, 컨트롤 자체 안내, FormField 안내 순으로 합친다. 래퍼 요소 안에 있어도 컨텍스트를 받는다.
+  - RadioGroup, CheckboxGroup, ModeToggle은 FormField 라벨을 `aria-labelledby`로, 안내와 오류를 `aria-describedby`로 받는다. OTPField는 FormField 안내와 오류만 합친다.
+  - 그룹 항목과 오버레이 콘텐츠 안 컨트롤은 바깥 컨텍스트를 받지 않는다. 오버레이는 Dialog, Sheet, AlertDialog, ActionMenu 시트, DropdownMenu, Tooltip, Popover, Select 옵션 목록이다. 오버레이 안의 FormField는 자기 컨텍스트를 쓴다.
+  - FormField 안 컨트롤은 내부 설명과 오류 id를 따로 만든다. 컨트롤에 FormField와 같은 `id`를 줘도 설명 id가 겹치지 않는다.
+  - 하나뿐인 자식이 `input`, `select`, `textarea`, `button`이면 FormField가 `id`와 `aria-describedby`를 넣는다. 자식에 직접 준 값이 먼저다. 그 밖의 자식에는 아무것도 넣지 않는다.
+  - `id`가 없어도 라벨이 `label` 요소로 그려지고 FormField가 만든 id를 가리킨다. 함수 자식의 `controlProps.id`, `descriptionId`, `errorId`도 이 id를 따른다.
+  - Checkbox, Switch, OTPField에 직접 준 `aria-describedby`가 이제 내부 설명 연결을 덮지 않고 합쳐진다.
+  - FormField 하나에는 DS 폼 컨트롤을 하나만 둔다. 둘을 두면 같은 id가 두 번 생긴다. DS 폼 컨트롤에 FormField와 다른 `id`를 주면 라벨이 그 컨트롤을 가리키지 않는다.
+
+- 5e0483b: `InlineAlert`의 `surface`와 `emphasis` prop을 지운다. 호환성을 깨는 변경이다. 인라인 문구는 늘 면과 테두리 없이 그린다. 넘기던 곳은 prop을 지우고, 상자가 필요하면 `Alert`를 쓴다. `InlineAlertSurface` 타입, `data-surface`, `data-emphasis`도 없어진다.
+
+  `InlineAlert`에 `marker`를 둔다. 기본값 `icon`은 `Alert`와 같은 상태별 아이콘을 12px, 상태 색으로 글자 첫 줄 가운데에 그린다. 아이콘은 `aria-hidden`이다. 점을 유지하려면 `marker="dot"`을 준다. 표식과 글자 사이는 `--space-2`다.
+
+## 0.20.0-next.8
+
+### Minor Changes
+
+- e537c1a: Add Select `labelPlacement="inline"` to show the label before the value inside the trigger while keeping menu options unchanged. The accessible name includes both the label and current value, and long values truncate without shrinking the label.
+
+  Existing default behavior is unchanged: `labelPlacement="top"` and `clearable=true`. Only inline label placement defaults `clearable` to false; an explicit `clearable` value always takes precedence. Correct the `clearable` JSDoc to match these defaults.
+
+- 3ffb5c2: `TablePagination` 추가: 표 바닥 페이지 패널(행 수 선택 20·50·100, 범위 `1–100 / 총 N개`, ◀ ▶). `shouldHideTablePagination`, `TABLE_PAGE_SIZE_OPTIONS`도 함께 내보낸다. `DataTable`에 `footer` 슬롯을 더했다. 표 테두리 안 맨 아래에 위쪽 구분선과 함께 그리고, 1024px 미만 카드 목록에서도 같은 자리다. footer가 아무것도 그리지 않으면 구분선도 없다.
+- 64dd310: `DataLayout`의 `header`를 선택으로 바꿨다. 앱 셸이 페이지 머리를 맡는 화면은 `header`를 넘기지 않는다. 넘기지 않거나 넘긴 머리가 아무것도 그리지 않으면(빈 Fragment, `null`을 돌려주는 컴포넌트) 머리 블록이 보이지 않고 위쪽 간격도 없다. 내용이 있는 머리는 예전과 같다. `DataLayout` 문서와 목록 화면 예제를 더했다.
+
+  `bulkBar`에 넣은 floating `BulkActionBar`가 자기 폭보다 32px 좁아져 작업 버튼이 세로로 꺾이던 결함을 고쳤다. 바를 그대로 넣거나 `div`로 감싸 넣어도 바는 내용 폭 그대로 가운데에 놓이고, 바만 누름을 받는다. 바 옆 빈자리를 누르면 아래 표가 눌린다. `BulkActionBar`가 아닌 바는 예전처럼 내용 폭으로 가운데에 놓이고 누름을 받는다.
+
+- c583d87: `DataTableColumn.header`를 `string`으로 좁혔다. 호환성을 깨는 변경이다. 요소를 넘기던 머리는 타입 오류가 난다. 보이는 글자 없이 접근 이름만 둘 열은 새 `hideHeader: true`를 쓴다. 열 머리 글자에서 `uppercase`를 뺐다. 크기, 굵기, 색은 그대로다.
+
+  칸이 넘친 내용을 칸에서 자른다(`overflow: clip`). 소비자 CSS가 칸 안 말줄임을 풀어도 옆 칸 위로 그려지지 않는다. 새 열 옵션 `wrap`은 그 열 칸을 말줄임 없이 어절 단위로 여러 줄 보이고, 행 높이는 가장 긴 칸을 따른다. `virtual`과 함께 쓰면 개발 모드에서 한 번 경고한다.
+
+  DataTable 행과 행 링크, ListCard(카드 전체와 제목 덮개), TreeView 노드의 포커스 링을 `ring-inset`에서 `inset-ring`으로 바꿨다. 토큰 테마의 `--color-inset` 때문에 `ring-inset`이 링 색까지 `--bg-inset`으로 덮어 포커스 링이 거의 보이지 않던 결함이다. 이제 `--focus-ring` 색으로 보인다.
+
+  앱에서 옮길 때: JSX 숨김 머리(`<span className="sr-only">상세</span>`)는 `header: "상세"`, `hideHeader: true`로 바꾼다. 머리 줄 `normal-case` 덮어쓰기는 지운다. 대화상자의 칸 줄바꿈 덮어쓰기(`overflow-visible! text-clip! whitespace-normal!`)는 그 열의 `wrap: true`로 바꾼다.
+
+- 63ceb92: `DataTable`에 행 메뉴 `rowActions`와 `getRowActionsLabel`을 더했다. `rowActions`는 행마다 ActionMenu 항목 배열이나 그룹 배열을 돌려준다. 이 목록 하나가 1024px 이상의 마지막 ⋮ 열(44px, 버튼 32px), 1024px 미만 카드의 ⋮, 행 우클릭 메뉴(1024px 이상)를 모두 연다. 우클릭 메뉴가 열린 동안 그 행은 `active` 꼴이다. ⋮을 눌러도 행 이동, 펼침, 선택은 일어나지 않는다. 항목이 없는 행은 ⋮을 그리지 않고 열 자리만 둔다. 펼침 열과 함께 쓰면 ⋮ 열이 맨 끝, 펼침 열이 그 앞이다.
+
+  - `rowActions`를 주면 `getRowActionsLabel`이 필수다. `onRowContextMenu`와 함께 주면 타입 오류다.
+  - `rowActions`가 있으면 `getMobileCardContent().actions`는 무시되고 개발 모드에서 한 번 경고한다. 카드 ⋮은 그룹을 구분선 없이 이어 보인다.
+  - 새 타입 `DataTableRowActions`를 내보낸다.
+
+  `selectable`과 함께 쓰는 `isRowSelectable`을 더했다. `false`인 행은 체크박스가 비활성(1024px 미만 카드 포함)이고, `onSelectionChange`로 넘기는 집합에 들어가지 않으며, 바깥 `selectedIds`에 있어도 선택 꼴로 그리지 않는다. 머리 전체 선택과 숨긴 라이브 영역의 개수는 고를 수 있는 행만 센다. 고를 수 있는 행이 모두 선택이면 체크, 일부면 반쯤이고, 다시 누르면 고를 수 있는 행만 해제한다. 고를 수 있는 행이 없으면 머리 체크박스가 비활성이다. 불러오지 않은 행의 id는 그대로 둔다.
+
+  앱에서 옮길 때: `columns` 끝의 ⋮ 열과 그 칸 여백 상수(액션 칸 패딩 덮어쓰기)를 지우고, 그 열의 메뉴 항목을 `rowActions`로 옮긴다. ⋮ 버튼의 `aria-label`은 `getRowActionsLabel`로 준다. 카드의 `getMobileCardContent().actions`와 우클릭용 `onRowContextMenu` + `ContextMenu` + `activeRowId` 조립도 지운다. 선택을 막으려고 머리 체크박스 클릭을 가로채던 코드는 `isRowSelectable`로 바꾼다.
+
 ## 0.20.0-next.7
 
 ### Minor Changes

package/dist/index.d.ts

@@ -180,7 +180,6 @@ declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProp
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 type AlertEmphasis = 'subtle' | 'strong';
 type AlertMarker = 'icon' | 'dot';
-type InlineAlertSurface = 'filled' | 'plain';
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
     variant?: AlertVariant;
     emphasis?: AlertEmphasis;
@@ -193,8 +192,8 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'chi
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     variant?: AlertVariant;
-    emphasis?: AlertEmphasis;
-    surface?: InlineAlertSurface;
+    /** Status mark before the text. `icon` (default) is the status icon, `dot` a small status dot. */
+    marker?: AlertMarker;
     children: ReactNode;
 }
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
@@ -282,6 +281,8 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
     className?: string;
     id?: string;
     label?: React.ReactNode;
+    /** Label position: above the field by default, or inside the trigger before its value. */
+    labelPlacement?: "top" | "inline";
     /**
      * Pre-input hint text (always visible in default state). Hidden when
      * `state` is "error" or "success" — `message` takes over.
@@ -334,7 +335,8 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
     selectVariant?: SelectVariant;
     /**
      * When `true`, prepends a reset option to the dropdown. Selecting it fires
-     * `onValueChange("")` and restores the trigger placeholder. Default `false`.
+     * `onValueChange("")` and restores the trigger placeholder. Default `true`,
+     * or `false` when `labelPlacement="inline"`. An explicit value takes precedence.
      *
      * Eliminates the need for callers to manage a sentinel value themselves —
      * use `value=""` + `onValueChange` with `clearable` for the standard pattern.
@@ -558,8 +560,9 @@ declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & Reac
 
 interface DataLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Top block — typically a PageHeader. Owns the page's single heading and
-     *  page-level actions. */
-    header: React.ReactNode;
+     *  page-level actions. Omit when the app shell already renders the page
+     *  header; no header block or gap is rendered then. */
+    header?: React.ReactNode;
     /** Filter row — typically a FilterToolbar (search · filters · result summary). */
     toolbar?: React.ReactNode;
     /** The list body — typically a DataTable or any list/grid. */
@@ -750,7 +753,7 @@ type DialogRootProps = React.ComponentProps<typeof Dialog$1.Root> & {
 };
 declare function Dialog(props: DialogProps | DialogRootProps): react_jsx_runtime.JSX.Element;
 declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: React.FC<Dialog$1.DialogPortalProps>;
+declare function DialogPortal(props: React.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
 declare const DialogClose: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
@@ -797,7 +800,7 @@ declare const DialogEyebrow: React.ForwardRefExoticComponent<React.HTMLAttribute
  * 자체 head/body/foot 슬롯을 가진 ModalShell 등 커스텀 구현용.
  * DialogPortal + DialogOverlay와 함께 수동으로 조합해서 사용.
  */
-declare const DialogRawContent: React.ForwardRefExoticComponent<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogRawContent: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 interface FormModalProps {
     open: boolean;
@@ -960,12 +963,20 @@ declare const dataTableRowVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DataTableColumn<T> {
     key: string;
-    header: React.ReactNode;
+    /** Column name as text. It is also the name of the column's cells for screen readers. */
+    header: string;
+    /** Hides the header text on screen and keeps it as the accessible name. */
+    hideHeader?: boolean;
     width?: string;
     align?: 'left' | 'right' | 'center';
     render?: (row: T) => React.ReactNode;
     tabular?: boolean;
     sortable?: boolean;
+    /**
+     * Cells of this column wrap onto several lines (at word boundaries) instead of being cut with
+     * an ellipsis; the row grows to its tallest cell. Not with `virtual`: virtual rows share one height.
+     */
+    wrap?: boolean;
 }
 interface DataTableLinkProps {
     href: string;
@@ -1027,10 +1038,18 @@ type DataTableMobileCardContent = DataTableMobileCardName & {
     /**
      * ⋮ menu at the card's top right (a menu sheet below 1024px). `label` names the ⋮ button —
      * pass the desktop ⋮ label. On a navigating card the chevron moves to the bottom right.
+     * With the table's `rowActions` the card takes that menu instead and this is ignored.
      */
     actions?: ListCardActions;
 };
-interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dataTableVariants> {
+/** A row's menu: items, or groups with a separator between them. An empty list draws no ⋮. */
+type DataTableRowActions = readonly ActionMenuItem[] | readonly ActionMenuGroup[];
+interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, Omit<VariantProps<typeof dataTableVariants>, 'density'> {
+    /**
+     * @deprecated No effect: rows and header look the same for every value. Remove it; it will be
+     * dropped in a breaking release.
+     */
+    density?: VariantProps<typeof dataTableVariants>['density'];
     columns: DataTableColumn<T>[];
     data: T[];
     keyField: keyof T;
@@ -1043,6 +1062,12 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
      */
     getMobileCardContent: (row: T) => DataTableMobileCardContent;
     selectable?: boolean;
+    /**
+     * With `selectable`, `false` blocks a row's selection: its checkbox is disabled, it is never
+     * drawn selected or passed to `onSelectionChange`, and select-all counts only the other rows.
+     * Navigating, expanding and the row menu still work.
+     */
+    isRowSelectable?: (row: T) => boolean;
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
     /** Unit in the screen-reader selection message — `12명 선택됨`. Defaults to `개`. */
@@ -1055,8 +1080,13 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
      */
     announceSelection?: boolean;
     activeRowId?: string;
-    onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
     sortBy?: DataTableSort;
+    /**
+     * The order the rows fall back to when the sort is cleared. Clicking its column
+     * flips between its direction and the opposite one, never to a clear that looks
+     * the same. Without `sortBy`, the header and the sort button show this sort.
+     */
+    defaultSort?: DataTableSort;
     onSortChange?: (key: string, dir: 'asc' | 'desc' | null) => void;
     loading?: boolean;
     emptyState?: React.ReactNode;
@@ -1066,6 +1096,11 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
      * and empty states keep their own state styling.
      */
     surface?: SurfaceLevel;
+    /**
+     * Bottom of the table frame, under the rows or cards in both layouts — a `TablePagination`.
+     * The line above it is drawn only when the footer renders something.
+     */
+    footer?: React.ReactNode;
 }
 /** Rows that navigate, or a long virtual list. No expanded rows. */
 interface DataTableNavigationProps<T> {
@@ -1090,7 +1125,7 @@ interface DataTableNavigationProps<T> {
      * average. Only the visible layout — table or cards — renders rows, and only
      * those near the viewport; rows are memoized. Works with any scroll container (window or an
      * app-shell `overflow-y-auto` main). Header "select all" still covers every
-     * loaded row. Browser find (Ctrl+F) cannot see rows outside the window.
+     * loaded row that can be selected. Browser find (Ctrl+F) cannot see rows outside the window.
      */
     virtual?: boolean | DataTableVirtualOptions;
     renderExpanded?: never;
@@ -1119,7 +1154,24 @@ interface DataTableExpandProps<T> {
     onRowClick?: never;
     virtual?: never;
 }
-type DataTableProps<T> = DataTableBaseProps<T> & (DataTableNavigationProps<T> | DataTableExpandProps<T>);
+/**
+ * The row menu, one list for the ⋮ column from 1024px, the card ⋮ below it, and a right click
+ * on the row. Not with `onRowContextMenu`: the table opens the right-click menu itself.
+ */
+interface DataTableRowActionsProps<T> {
+    /** Items or groups of the row's menu. An empty list draws no ⋮ and keeps the column. */
+    rowActions: (row: T) => DataTableRowActions;
+    /** Accessible name of the row's ⋮ button, e.g. `김지수 더보기`. */
+    getRowActionsLabel: (row: T) => string;
+    onRowContextMenu?: never;
+}
+/** No row menu from the table; a right click is the consumer's (`onRowContextMenu`). */
+interface DataTableOwnContextMenuProps {
+    rowActions?: never;
+    getRowActionsLabel?: never;
+    onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
+}
+type DataTableProps<T> = DataTableBaseProps<T> & (DataTableNavigationProps<T> | DataTableExpandProps<T>) & (DataTableRowActionsProps<T> | DataTableOwnContextMenuProps);
 type DataTableComponent = (<T>(props: DataTableProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
     displayName?: string;
 };
@@ -1180,9 +1232,10 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
     onClear: () => void;
     emptyHint?: React.ReactNode;
     /**
-     * `floating` (default) — pill stuck to the bottom of the list, as before.
+     * `floating` (default) — pill stuck to the bottom of the list.
      * `inline` — full-width band stuck to the top, placed where the status line sits
      * under the toolbar. Render it BEFORE the list so it comes first in tab order.
+     * Deprecated: `inline` is removed in the next minor.
      */
     placement?: "floating" | "inline";
     /** Count unit — `12명 선택됨`. Defaults to `개`. */
@@ -1192,6 +1245,8 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Inline only: a shorter `summary` (e.g. "모두 선택") swapped in when the band is too
      * narrow to show `summary` on one line. Without it, `summary` is clipped, never wrapped.
+     *
+     * @deprecated Only `placement="inline"` uses it; removed together with `inline` in the next minor.
      */
     compactSummary?: React.ReactNode;
     /**
@@ -1839,6 +1894,43 @@ interface PageSizeSelectProps {
  */
 declare function PageSizeSelect({ value, onChange, options, label, unit, size, disabled, id, 'aria-label': ariaLabel, className, }: PageSizeSelectProps): react_jsx_runtime.JSX.Element;
 
+declare const TABLE_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
+interface TablePaginationProps {
+    pageSize: number;
+    /** The caller sends the list back to the first page when the page size changes. */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Default `TABLE_PAGE_SIZE_OPTIONS` (20, 50, 100). */
+    pageSizeOptions?: readonly number[];
+    /** First row number on this page, from 1. 0 when there are no rows. */
+    rangeStart: number;
+    /** Last row number on this page. */
+    rangeEnd: number;
+    /** Total count. Leave it out when the API has none: only the range shows. */
+    total?: number;
+    /** Unit after the total — `명` for people. Default `개`. */
+    unit?: string;
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    /** While the next page loads, ◀ ▶ are disabled. */
+    loading?: boolean;
+    'aria-label'?: string;
+}
+type TablePaginationVisibility = Pick<TablePaginationProps, 'rangeEnd' | 'total' | 'hasPrev' | 'hasNext' | 'pageSizeOptions'>;
+/**
+ * Hide the panel when there are no rows, or when everything fits in the smallest choice
+ * (nothing to pick). Without `total`, the first page with no next page decides by its row count.
+ */
+declare function shouldHideTablePagination({ rangeEnd, total, hasPrev, hasNext, pageSizeOptions, }: TablePaginationVisibility): boolean;
+/**
+ * Page panel at the bottom of a table — page size on the left, the range (`1–100 / 총 N개`)
+ * and ◀ ▶ on the right. Put it in `DataTable`'s `footer`, which draws the line above it.
+ * Below 1024px the `페이지당` label hides (the select keeps its name), and below 400px of
+ * panel width the total hides. Both are CSS, so nothing flashes on hydration or paging.
+ */
+declare function TablePagination({ pageSize, onPageSizeChange, pageSizeOptions, rangeStart, rangeEnd, total, unit, hasPrev, hasNext, onPrev, onNext, loading, 'aria-label': ariaLabel, }: TablePaginationProps): react_jsx_runtime.JSX.Element | null;
+
 declare const modeToggleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const modeToggleItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 interface ModeToggleOption<T extends string> {
@@ -1853,7 +1945,7 @@ interface ModeToggleProps<T extends string> extends Omit<React.HTMLAttributes<HT
     onChange: (value: T) => void;
     itemClassName?: string;
 }
-declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, ...props }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
+declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const actionFooterVariants: (props?: ({
     position?: "fixed" | "static" | "sticky" | null | undefined;
@@ -2010,11 +2102,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -2023,6 +2115,7 @@ type CheckboxGroupDensity = NonNullable<VariantProps<typeof checkboxGroupItemVar
 type CheckboxGroupContextValue = {
     appearance: CheckboxGroupAppearance;
     density: CheckboxGroupDensity;
+    orientation?: "vertical" | "horizontal";
     disabled?: boolean;
     name?: string;
     selectedValues: Set<string>;
@@ -2039,7 +2132,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2060,16 +2153,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -2213,4 +2306,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };