@olundot/ui 0.20.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @olundot/ui
 
+## 0.20.1
+
+### Patch Changes
+
+- 0ab7288: 구조형 `Dialog`에 `hideTitle`과 목록 영역(`list`, `listHeight`, `listFit`, `listLabel`)을 더했다.
+
+  - `hideTitle`: 제목을 화면에서 숨기고(`sr-only`) 다이얼로그의 접근 이름으로 둔다. 머리에는 닫기 버튼만 남는다. 상자 윗선에서 본문 첫 줄까지 간격, 닫기 버튼 자리, 1024px 미만의 머리 끌어내리기, 첫 포커스 규칙은 그대로다. `description`과 함께 줄 수 없다(타입 오류).
+  - `list`: 본문 아래, 푸터 위의 목록 영역. 목록 영역만 스크롤하고 본문은 고정된다. 안개는 본문과 같은 방식으로 목록 영역 위·아래 끝에 그린다. 폼 모드에서도 `form` 안에 있다. 목록 안 입력도 첫 포커스 대상이다.
+  - `listHeight`: 항목 부분 높이 `"sm"` 216px, `"md"` 460px(기본), `"lg"` 628px. 화면이 낮으면 상자 최대 높이 안에서 줄어들되 항목 부분은 112px(목록 영역 124px)에서 멈추고, 더 낮으면 본문이 스크롤한다. 머리와 푸터는 늘 상자 안에 있다.
+  - `listFit`: `"max"`(기본)는 항목만큼 커지다가 `listHeight`에서 멈추고, `"fixed"`는 항목 수와 관계없이 `listHeight`다.
+  - `listLabel`: 목록 안에 포커스 받는 요소가 없을 때 영역이 `tabIndex={0}`인 `region`이 되며 붙는 이름. 기본값은 `title`.
+  - 타입 `DialogListHeight`, `DialogListFit`을 내보낸다. `DialogProps`는 `hideTitle`과 `description`을 나누려고 interface에서 type으로 바뀌었다. `interface X extends DialogProps`로 확장하던 코드는 `type X = DialogProps & …`로 바꾼다.
+  - 첫 포커스는 탭으로 닿는 입력만 고른다. 숨겨지거나(`hidden`, `inert`, `aria-hidden` 조상) 비활성이거나 `tabIndex`가 음수인 입력은 건너뛴다. 폼 안 `Checkbox`가 남기는 전달용 입력이 여기에 든다. Dialog, Sheet, AlertDialog에 함께 적용된다.
+  - `hideTitle`과 `list` 없이 쓰는 Dialog의 모양은 그대로다. 동작은 위 첫 포커스 규칙만 바뀐다.
+
+- e695c9d: `IconButton`에 `done`과 `tooltip`을 더했다. `done`은 이미 끝난 동작을 `success` 아이콘과 ✓ 배지로 보이고, 초점은 받지만 `onClick`을 부르지 않는다. `tooltip`은 아이콘만 있는 버튼에 말풍선을 붙인다. Provider가 없어도 되고 `title`을 대신한다. 배지 색에 `success`를 더했다.
+
 ## 0.20.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -66,7 +66,7 @@ type GhostDefaultActionStyle = {
 declare const buttonCva: (props?: ({
     appearance?: "filled" | "outline" | "ghost" | "link" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | null | undefined;
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -101,13 +101,13 @@ type CopyButtonProps = Omit<ButtonProps, 'appearance' | 'children' | 'loading' |
 declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -155,11 +155,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -700,6 +700,10 @@ declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & Reac
  * blur (`--scrim-blur`). Without a preset (no prop, no `<html data-scrim>`) the scrim is `--scrim`.
  */
 type OverlayScrim = "blur" | "dim";
+/** List area height preset (Dialog `listHeight`). */
+type OverlayListHeight = "sm" | "md" | "lg";
+/** `"max"`: as tall as the items, up to the preset. `"fixed"`: the preset whatever the item count. */
+type OverlayListFit = "max" | "fixed";
 
 /**
  * @deprecated The structured Dialog (`title`) is a bottom sheet below 1024px on its own.
@@ -713,25 +717,36 @@ type OverlayScrim = "blur" | "dim";
 type DialogMobilePresentation = "center" | "sheet";
 /** Structured Dialog width: 420 · 560 · 720 · 960. */
 type DialogSize = "sm" | "md" | "lg" | "xl";
-/**
- * Structured Dialog (spec §3.2): a center window for forms, pickers and long content. X + footer,
- * outside click does not close, Escape does (not while submitting), the body scrolls inside the max
- * height, a bottom sheet below 1024px (OVERLAY_POLICY.dialog).
- */
-interface DialogProps {
+/** List area height (`listHeight`): items up to 216 · 460 · 628px. */
+type DialogListHeight = OverlayListHeight;
+/** List area height mode (`listFit`). */
+type DialogListFit = OverlayListFit;
+interface DialogBaseProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Heading, also the dialog's accessible name. Its presence selects the structured mode. */
     title: string;
-    /** Line under the title, also the accessible description. */
-    description?: string;
     /**
      * Box width: 420 · 560 · 720 · 960. Default `"md"`. `"xl"` is for content 720 cannot hold, such as
      * two columns. Other widths are not supported.
      */
     size?: DialogSize;
-    /** Body. Scrolls inside the box's max height. */
+    /** Body. Scrolls inside the box's max height; with `list` it stays still above the list area. */
     children: React.ReactNode;
+    /**
+     * List area under the body and above the footer, for items to pick from. Only this area scrolls;
+     * the body above it (filters, search, select all) stays still. Empty and loading states go here too.
+     */
+    list?: React.ReactNode;
+    /** List area height preset: items up to 216 · 460 · 628px. Default `"md"`. A low screen shrinks it inside the box max height. */
+    listHeight?: DialogListHeight;
+    /**
+     * `"max"` (default): as tall as the items, up to `listHeight`. `"fixed"`: `listHeight` whatever the
+     * item count, for lists a search or filter resizes.
+     */
+    listFit?: DialogListFit;
+    /** Accessible name of the list area, used when nothing inside takes focus. Default: `title`. */
+    listLabel?: string;
     /** Footer content (buttons). Ignored in form mode, which renders `[cancel][submit]`. */
     footer?: React.ReactNode;
     /**
@@ -754,6 +769,24 @@ interface DialogProps {
     /** Layout of the body content only. It never reaches the box: width comes from `size`. */
     className?: string;
 }
+/**
+ * Structured Dialog (spec §3.2): a center window for forms, pickers and long content. X + footer,
+ * outside click does not close, Escape does (not while submitting), the body scrolls inside the max
+ * height, a bottom sheet below 1024px (OVERLAY_POLICY.dialog).
+ */
+type DialogProps = DialogBaseProps & ({
+    /** Shows the title in the header. Default. */
+    hideTitle?: false;
+    /** Line under the title, also the accessible description. */
+    description?: string;
+} | {
+    /**
+     * Hides the title on screen and keeps it as the accessible name; the header shows the X only.
+     * Use it only when the body's first line says what the dialog is about.
+     */
+    hideTitle: true;
+    description?: never;
+});
 /** Legacy root: the Radix Dialog Root for `DialogContent` composition (no `title`). */
 type DialogRootProps = React.ComponentProps<typeof Dialog$1.Root> & {
     title?: never;
@@ -1678,7 +1711,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1691,13 +1724,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1711,7 +1744,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1723,7 +1756,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1749,7 +1782,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1769,7 +1802,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1802,7 +1835,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1811,7 +1844,7 @@ type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonVariantsOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
 declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
-    tone?: "error" | "info" | null | undefined;
+    tone?: "error" | "success" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
@@ -1836,17 +1869,41 @@ type IconButtonTextEnd = {
     iconPosition?: "start";
     menuIndicator: true;
 };
+type IconButtonTooltipSide = "top" | "bottom";
+type IconButtonTooltipOn = {
+    /**
+     * Icon only. A tooltip on pointer hover and keyboard focus, in place of `title`: `true` shows the
+     * string `aria-label`, a string shows that string. No Provider needed.
+     */
+    tooltip: true | string;
+    /** Tooltip side. Default `top`. */
+    tooltipSide?: IconButtonTooltipSide;
+    title?: never;
+};
+type IconButtonTooltip = {
+    tooltip?: undefined;
+    tooltipSide?: never;
+} | (IconButtonTooltipOn & {
+    tooltip: string;
+}) | (IconButtonTooltipOn & {
+    tooltip: true;
+    "aria-label": string;
+});
+type IconButtonNoTooltip = {
+    tooltip?: never;
+    tooltipSide?: never;
+};
 type IconButtonContent = (IconButtonAccessibleName & {
     label?: never;
     children?: never;
     menuIndicator?: never;
-}) | (IconButtonOptionalName & {
+} & IconButtonTooltip) | (IconButtonOptionalName & {
     label: React.ReactNode;
     children?: never;
-} & IconButtonTextEnd) | (IconButtonOptionalName & {
+} & IconButtonTextEnd & IconButtonNoTooltip) | (IconButtonOptionalName & {
     children: React.ReactNode;
     label?: never;
-} & IconButtonTextEnd);
+} & IconButtonTextEnd & IconButtonNoTooltip);
 type IconButtonStyleProps = GhostDefaultActionStyle & {
     /** Button's scale: `xs` 28 · `sm` 30 · `md` 32 · `lg` 36 · `xl` 40. */
     size?: IconButtonSize | null;
@@ -1860,6 +1917,12 @@ type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria
     iconPosition?: "start" | "end";
     /** Like Button: the spinner takes the icon's place and the button is disabled. */
     loading?: boolean;
+    /**
+     * The action is already done: success icon, and a ✓ badge unless `badge` is given. Keeps
+     * focus but never calls `onClick`. The accessible name says it is done. `disabled` and
+     * `loading` win over it; it wins over `pressed`.
+     */
+    done?: boolean;
     /**
      * Trailing ▾ for a menu trigger, with text and a start icon only. The trigger (DropdownMenu
      * etc.) supplies `aria-haspopup`.
@@ -2018,7 +2081,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -2072,19 +2135,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -2111,10 +2174,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2138,7 +2201,7 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
     appearance?: "card" | "plain" | null | undefined;
@@ -2345,4 +2408,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 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 FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, 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 };
+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 DialogListFit, type DialogListHeight, 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 FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, 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 };

package/dist/index.js

@@ -4053,9 +4053,31 @@ import { Dialog as DialogPrimitive } from "radix-ui";
 // src/components/ui/icon-button.tsx
 import * as React25 from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { ChevronDown as ChevronDown4, Loader2 as Loader23 } from "lucide-react";
+import { Check as Check3, ChevronDown as ChevronDown4, Loader2 as Loader23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var pressedNeutralClassName = "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground";
+var doneClassName = "cursor-default text-[var(--success)]";
+var doneRestPaint = (classes) => classes.split(" ").filter(
+  (name) => !name.startsWith("hover:") && (!name.startsWith("aria-disabled:") || name.startsWith("aria-disabled:active:"))
+).join(" ");
+var tabbing = false;
+var tabListeners = 0;
+var markTab = (event) => {
+  if (event.key !== "Tab") return;
+  tabbing = true;
+  setTimeout(() => {
+    tabbing = false;
+  }, 0);
+};
+function useTabMark(enabled) {
+  React25.useEffect(() => {
+    if (!enabled) return;
+    if (tabListeners++ === 0) document.addEventListener("keydown", markTab, true);
+    return () => {
+      if (--tabListeners === 0) document.removeEventListener("keydown", markTab, true);
+    };
+  }, [enabled]);
+}
 var iconButtonCva = cva10(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center before:absolute before:content-['']",
@@ -4123,7 +4145,8 @@ var iconButtonBadgeVariants = cva10(
     variants: {
       tone: {
         info: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
-        error: "bg-[var(--error)] text-[var(--error-contrast)]"
+        error: "bg-[var(--error)] text-[var(--error-contrast)]",
+        success: "bg-[var(--success)] text-[var(--success-contrast)]"
       }
     },
     defaultVariants: {
@@ -4145,21 +4168,35 @@ var IconButton = React25.forwardRef(
     title,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     iconPosition = "start",
     loading,
+    done,
     menuIndicator,
     disabled,
     label,
     children,
+    tooltip,
+    tooltipSide = "top",
+    onClick,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const isToggle = pressed !== void 0;
-    const isPressed = pressed === true;
-    const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
+    const isDisabled = disabled || loading;
+    const isDone = done === true && !isDisabled;
+    const isToggle = pressed !== void 0 && !isDone;
+    const isPressed = pressed === true && !isDone;
+    const tooltipText = tooltip === true ? ariaLabel : tooltip;
+    const hoverTitle = tooltip !== void 0 ? void 0 : title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
     const text = label ?? children;
     const hasText = text !== void 0 && text !== null && text !== false;
-    const isDisabled = disabled || loading;
+    const resolvedBadge = badge === void 0 && isDone ? /* @__PURE__ */ jsx22(Check3, { strokeWidth: 3 }) : badge;
+    const resolvedBadgeTone = badge === void 0 && isDone ? "success" : badgeTone;
+    const [tooltipOpen, setTooltipOpen] = React25.useState(false);
+    useTabMark(tooltip !== void 0);
+    React25.useEffect(() => {
+      if (isDisabled) setTooltipOpen(false);
+    }, [isDisabled]);
     const style = resolveActionStyle(appearance, tone, "ghost");
     const icon = loading ? /* @__PURE__ */ jsx22(
       Loader23,
@@ -4179,7 +4216,14 @@ var IconButton = React25.forwardRef(
         strokeWidth: axisIcon[resolvedSize].strokeWidth
       }
     );
-    return /* @__PURE__ */ jsxs20(
+    const paint = hasText ? [
+      "olun-icon-button",
+      buttonVariants({ ...style, size: resolvedSize }),
+      isPressed && style.tone === "neutral" && pressedNeutralClassName,
+      // The badge sits on the corner; Button xs/sm are already relative.
+      resolvedBadge !== void 0 && "relative"
+    ] : iconButtonVariants({ appearance, tone, size: resolvedSize, pressed: isPressed });
+    const button = /* @__PURE__ */ jsxs20(
       "button",
       {
         ref,
@@ -4191,24 +4235,24 @@ var IconButton = React25.forwardRef(
         "data-icon-position": hasText ? iconPosition : void 0,
         "data-pressed": isToggle ? String(isPressed) : void 0,
         "data-loading": loading ? "true" : void 0,
+        "data-done": isDone ? "true" : void 0,
         "aria-busy": loading ? true : void 0,
-        "aria-disabled": isDisabled ? true : void 0,
+        "aria-disabled": isDisabled || isDone ? true : void 0,
         disabled: isDisabled,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
         "aria-pressed": isToggle ? isPressed : void 0,
         title: hoverTitle,
-        className: cn(
-          hasText ? [
-            "olun-icon-button",
-            buttonVariants({ ...style, size: resolvedSize }),
-            isPressed && style.tone === "neutral" && pressedNeutralClassName,
-            // The badge sits on the corner; Button xs/sm are already relative.
-            badge !== void 0 && "relative"
-          ] : iconButtonVariants({ appearance, tone, size: resolvedSize, pressed: isPressed }),
-          className
-        ),
+        className: cn(isDone ? [doneRestPaint(cn(paint)), doneClassName] : paint, className),
         type: type ?? "button",
+        onClick: (event) => {
+          if (isDone) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
         children: [
           hasText && iconPosition === "end" ? null : icon,
           hasText ? text : null,
@@ -4222,19 +4266,41 @@ var IconButton = React25.forwardRef(
               strokeWidth: axisIcon[resolvedSize].strokeWidth
             }
           ) : null,
-          badge !== void 0 ? /* @__PURE__ */ jsx22(
+          resolvedBadge !== void 0 ? /* @__PURE__ */ jsx22(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "icon-button-badge",
-              "data-badge-tone": badgeTone,
-              className: iconButtonBadgeVariants({ tone: badgeTone }),
-              children: badge
+              "data-badge-tone": resolvedBadgeTone,
+              className: iconButtonBadgeVariants({ tone: resolvedBadgeTone }),
+              children: resolvedBadge
             }
           ) : null
         ]
       }
     );
+    if (tooltip === void 0) return button;
+    return /* @__PURE__ */ jsx22(TooltipProvider, { children: /* @__PURE__ */ jsxs20(
+      Tooltip,
+      {
+        open: tooltipOpen && !isDisabled,
+        onOpenChange: (open) => setTooltipOpen(open && !isDisabled),
+        children: [
+          /* @__PURE__ */ jsx22(
+            TooltipTrigger,
+            {
+              asChild: true,
+              onFocus: (event) => {
+                const root = event.currentTarget.getRootNode();
+                if (!tabbing || root.activeElement !== event.currentTarget) event.preventDefault();
+              },
+              children: button
+            }
+          ),
+          /* @__PURE__ */ jsx22(TooltipContent, { side: tooltipSide, children: tooltipText })
+        ]
+      }
+    ) });
   }
 );
 IconButton.displayName = "IconButton";
@@ -4362,14 +4428,32 @@ var OverlayScrimLayer = React26.forwardRef(
   }
 );
 OverlayScrimLayer.displayName = "OverlayScrimLayer";
+var TABBABLE_CANDIDATE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable="false"])';
+var INPUT_CANDIDATE = "input, textarea, select";
+function isTabbable(element) {
+  if (element.matches(":disabled") || element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (element.hasAttribute("tabindex") && element.tabIndex < 0) return false;
+  if (element.closest('[hidden], [inert], [aria-hidden="true"]')) return false;
+  if (typeof element.checkVisibility === "function") return element.checkVisibility({ visibilityProperty: true });
+  const view = element.ownerDocument.defaultView;
+  if (!view) return true;
+  if (["hidden", "collapse"].includes(view.getComputedStyle(element).visibility)) return false;
+  for (let node = element; node; node = node.parentElement) {
+    if (view.getComputedStyle(node).display === "none") return false;
+  }
+  return true;
+}
+var firstTabbable = (root, selector) => [...root.querySelectorAll(selector)].find(isTabbable);
 function focusBodyInput(event) {
   const surface = event.target instanceof HTMLElement ? event.target : null;
-  const input = surface?.querySelector(
-    '[data-slot="overlay-body"] :is(input, textarea, select):not([disabled]):not([type="hidden"])'
-  );
-  if (input) {
-    event.preventDefault();
+  if (!surface) return;
+  for (const input of surface.querySelectorAll(`:is([data-slot="overlay-body"], [data-slot="overlay-list"]) :is(${INPUT_CANDIDATE})`)) {
+    if (!isTabbable(input)) continue;
     input.focus();
+    if (input.ownerDocument.activeElement === input) {
+      event.preventDefault();
+      return;
+    }
   }
 }
 var headingClassName = {
@@ -4387,6 +4471,7 @@ function OverlayHeader({
   caption,
   actions,
   closeLabel = "\uB2EB\uAE30",
+  titleHidden = false,
   dragHandleProps,
   id,
   className
@@ -4410,7 +4495,7 @@ function OverlayHeader({
       children: [
         /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--space-2)]", children: [
           caption != null ? /* @__PURE__ */ jsx24("div", { "data-slot": "overlay-caption", className: "flex flex-wrap items-center gap-[var(--space-2)]", children: caption }) : null,
-          /* @__PURE__ */ jsx24(Title, { "data-slot": "overlay-title", className: headingClassName[policy.heading], children: title }),
+          /* @__PURE__ */ jsx24(Title, { "data-slot": "overlay-title", className: cn(headingClassName[policy.heading], titleHidden && "sr-only"), children: title }),
           description != null ? /* @__PURE__ */ jsx24(Description, { "data-slot": "overlay-description", className: descriptionClassName[policy.heading], children: description }) : null
         ] }),
         actions != null || policy.closeButton === "visible" ? /* @__PURE__ */ jsxs21("div", { "data-slot": "overlay-header-actions", className: "flex shrink-0 items-center gap-[var(--space-1)]", children: [
@@ -4439,28 +4524,18 @@ var fogClassName = cn(
   "pointer-events-none sticky z-[1] block h-[var(--space-6)] shrink-0 opacity-0",
   "from-[var(--bg-raised)] to-transparent"
 );
-function OverlayBody({ kind, className, children, ...props }) {
-  const { scroll } = OVERLAY_POLICY[kind];
-  if (scroll !== "body") {
-    return /* @__PURE__ */ jsx24(
-      "div",
-      {
-        "data-slot": "overlay-body",
-        className: cn(
-          "min-w-0 px-[var(--space-6)] pt-[var(--space-4)] text-[14px] leading-relaxed text-text-secondary",
-          scroll === "list" && "min-h-0 flex-1 overflow-y-auto px-0",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
+function FogScroller({
+  scrollerRef,
+  className,
+  contentClassName,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs21(
     "div",
     {
-      "data-slot": "overlay-body",
-      className: "relative flex min-h-0 flex-1 flex-col overflow-y-auto [container-type:scroll-state]",
+      ref: scrollerRef,
+      className: cn("relative flex min-h-0 flex-col overflow-y-auto [container-type:scroll-state]", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx24(
@@ -4471,7 +4546,7 @@ function OverlayBody({ kind, className, children, ...props }) {
             className: cn(fogClassName, "top-0 -mb-[var(--space-6)] bg-linear-to-b", "[@container_scroll-state(scrollable:top)]:opacity-100")
           }
         ),
-        /* @__PURE__ */ jsx24("div", { className: cn("min-w-0 px-[var(--space-6)] py-[var(--space-4)]", className), children }),
+        /* @__PURE__ */ jsx24("div", { className: contentClassName, children }),
         /* @__PURE__ */ jsx24(
           "span",
           {
@@ -4484,6 +4559,90 @@ function OverlayBody({ kind, className, children, ...props }) {
     }
   );
 }
+function OverlayBody({ kind, fixed = false, className, children, ...props }) {
+  const { scroll } = OVERLAY_POLICY[kind];
+  if (fixed) {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        "data-slot": "overlay-body",
+        className: cn(
+          "relative z-[2] -mb-[var(--space-1)] min-h-0 min-w-0 shrink overflow-y-auto px-[var(--space-6)] pt-[var(--space-4)] pb-[var(--space-1)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (scroll !== "body") {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        "data-slot": "overlay-body",
+        className: cn(
+          "min-w-0 px-[var(--space-6)] pt-[var(--space-4)] text-[14px] leading-relaxed text-text-secondary",
+          scroll === "list" && "min-h-0 flex-1 overflow-y-auto px-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx24(FogScroller, { "data-slot": "overlay-body", className: "flex-1", contentClassName: cn("min-w-0 px-[var(--space-6)] py-[var(--space-4)]", className), ...props, children });
+}
+var listBoxClassName = {
+  max: {
+    sm: "basis-[content] max-h-[calc(216px+var(--space-3)+var(--space-4))]",
+    md: "basis-[content] max-h-[calc(460px+var(--space-3)+var(--space-4))]",
+    lg: "basis-[content] max-h-[calc(628px+var(--space-3)+var(--space-4))]"
+  },
+  fixed: {
+    sm: "basis-[calc(216px+var(--space-3)+var(--space-4))]",
+    md: "basis-[calc(460px+var(--space-3)+var(--space-4))]",
+    lg: "basis-[calc(628px+var(--space-3)+var(--space-4))]"
+  }
+};
+var listFloorClassName = "h-[calc(112px+var(--space-3))]";
+function OverlayList({ height = "md", fit = "max", label, children }) {
+  const ref = React26.useRef(null);
+  const [hasFocusable, setHasFocusable] = React26.useState(true);
+  React26.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const check = () => setHasFocusable(firstTabbable(node, TABBABLE_CANDIDATE) != null);
+    check();
+    let frame = 0;
+    const observer = new MutationObserver(() => {
+      frame ||= requestAnimationFrame(() => {
+        frame = 0;
+        check();
+      });
+    });
+    observer.observe(node, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "class", "contenteditable", "disabled", "hidden", "href", "inert", "style", "tabindex", "type"]
+    });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx24("div", { "data-slot": "overlay-list-box", className: cn("flex shrink-[10000] flex-col", listFloorClassName, listBoxClassName[fit][height]), children: /* @__PURE__ */ jsx24(
+    FogScroller,
+    {
+      scrollerRef: ref,
+      "data-slot": "overlay-list",
+      className: "flex-auto outline-none focus-visible:inset-ring-2 focus-visible:inset-ring-[var(--focus-ring)]",
+      contentClassName: "min-w-0 px-[var(--space-6)] pt-[var(--space-3)] pb-[var(--space-4)]",
+      ...!hasFocusable && { tabIndex: 0, role: "region", "aria-label": label },
+      children
+    }
+  ) });
+}
 function OverlayFooter({ kind, className, ...props }) {
   const { footerDivider } = OVERLAY_POLICY[kind];
   return /* @__PURE__ */ jsx24(
@@ -4840,8 +4999,13 @@ function StructuredDialog({
   onOpenChange,
   title,
   description,
+  hideTitle = false,
   size = "md",
   children,
+  list,
+  listHeight = "md",
+  listFit = "max",
+  listLabel = title,
   footer,
   onSubmit,
   onError,
@@ -4863,7 +5027,13 @@ function StructuredDialog({
   const returnFocus = useReturnFocus();
   const surfaceRef = React28.useRef(null);
   const swipe = useSwipeDismiss({ enabled: policy.swipe, onDismiss: () => guardOpenChange(false), surfaceRef });
-  const body = /* @__PURE__ */ jsx26(OverlayBody, { kind: "dialog", className, children });
+  const body = list != null ? (
+    // Scrolls only on a screen too low for the body's 16 and the list floor; the footer stays.
+    /* @__PURE__ */ jsxs23("div", { "data-slot": "overlay-list-frame", className: "flex min-h-0 flex-col overflow-y-auto", children: [
+      /* @__PURE__ */ jsx26(OverlayBody, { kind: "dialog", fixed: true, className, children }),
+      /* @__PURE__ */ jsx26(OverlayList, { height: listHeight, fit: listFit, label: listLabel, children: list })
+    ] })
+  ) : /* @__PURE__ */ jsx26(OverlayBody, { kind: "dialog", className, children });
   const footerRow = formMode ? /* @__PURE__ */ jsxs23(OverlayFooter, { kind: "dialog", children: [
     /* @__PURE__ */ jsx26(
       Button,
@@ -4902,6 +5072,7 @@ function StructuredDialog({
               kind: "dialog",
               title,
               description,
+              titleHidden: hideTitle,
               closeLabel,
               dragHandleProps: swipe.handleProps
             }
@@ -6473,7 +6644,7 @@ function ActionMenu({
 // src/components/ui/checkbox.tsx
 import * as React33 from "react";
 import { cva as cva12 } from "class-variance-authority";
-import { Check as Check3, Minus } from "lucide-react";
+import { Check as Check4, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
 var checkboxFieldVariants = cva12(
@@ -6667,7 +6838,7 @@ var Checkbox = React33.forwardRef(
                   {
                     "data-slot": "checkbox-indicator",
                     className: "flex items-center justify-center",
-                    children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx35(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx35(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
+                    children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx35(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx35(Check4, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
                   }
                 )
               }
@@ -6756,7 +6927,7 @@ var Checkbox = React33.forwardRef(
                       {
                         "data-slot": "checkbox-indicator",
                         className: "flex items-center justify-center",
-                        children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx35(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx35(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
+                        children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx35(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx35(Check4, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
                       }
                     )
                   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [