@olundot/ui 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @olundot/ui
 
+## 0.13.0
+
+### Minor Changes
+
+- 0f4ad55: Card: promote `interactive` from a variant to an orthogonal boolean prop (breaking)
+
+  `interactive` is removed from the `variant` enum and becomes a standalone `interactive?: boolean` prop. A clickable card can now combine with any resting surface — `default`, `elevated`, or `notice` — whereas the old `variant="interactive"` was mutually exclusive with those.
+
+  - **Before:** `<Card variant="interactive">`
+  - **After:** `<Card interactive>` (and now also `<Card variant="notice" interactive>`, `<Card variant="elevated" interactive>`).
+
+  Interactive hover lifts the shadow one step above the variant's resting depth: default/notice rest at `--shadow-2` → hover `--shadow-4`; elevated rests at `--shadow-4` → hover `--shadow-8`. The pointer cursor, hover border (`--border-strong`) / background (`--action-hover`), and neutral focus-ring (`--focus-ring`) are unchanged. `selected` / `disabled` relationships are unchanged.
+
+  `notice`'s accent border is retained; it is now documented under accent rationing role ③ (read-only emphasis context only), not treated as an exception.
+
+- 8a0bfe3: Align Card with the v0.14 flattened surface model (breaking-visual)
+
+  After v0.14 flattening (card fill == page background), Card was the one component still leaning on removed lift affordances. Its rest/selected/focus handoff is now brought back in line. Public API (`variant`, `surface`, `selected`, `disabled`, slots) is unchanged — only rendered classes/visuals change.
+
+  - **Rest edge/radius:** base border `--border-subtle` → `--border` (0.10 alpha) and corner `--radius-md` (8px) → `--radius-lg` (12px, the "cards" radius). The `default` variant now carries a resting `--shadow-2` so a flat card still reads as a bounded surface.
+  - **Elevated:** `--shadow-2` → `--shadow-4`, keeping its meaning as the more-raised card now that `default` owns `--shadow-2`.
+  - **Selected:** fill `--bg-canvas` (a lift that vanished under flattening) → `--action-selected`, the same neutral surface-lift used by DataTable/TreeView selected rows; `--border-strong` retained.
+  - **Focus:** `interactive` focus drops the accent border + lime glow (`--border-accent` + `--glow-sm`) for the house neutral focus-ring convention (`--focus-ring` border + `0 0 0 1px --focus-ring` ring), matching Input. The dark `hover` accent glow is also removed (hover = `--border-strong` + `--shadow-2`), honoring accent rationing (accent is never used for action/focus surfaces).
+
+  `notice` (accent border) is unchanged.
+
+- dca4628: Remove DataTable's built-in selection bar; consolidate bulk actions on BulkActionBar (breaking)
+
+  DataTable now exposes a single bulk-action surface. The internal top selection strip is deleted and all bulk actions move to the floating bottom `BulkActionBar` — matching the "one batch-action surface, no persistent chrome" baseline.
+
+  **Breaking — DataTable:**
+
+  - Removed the `selectionBar` (`'top' | 'none'`) and `bulkActions` props, the `DataTableBulkAction` type/export, and the built-in `data-slot="data-table-selection-bar"` strip (which always reserved a 48px row and showed a "선택된 행 없음" placeholder).
+  - **Kept** the selection mechanism: `selectable`, `selectedIds`, `onSelectionChange`, header select-all (indeterminate) + per-row checkboxes. The selected-count announcement is preserved as a visually-hidden `aria-live` region (`data-slot="data-table-selection-status"`), so there is no accessibility regression.
+  - Migration: drop `bulkActions`/`selectionBar` and render a sibling `<BulkActionBar count={selectedIds.size} onClear={…} actions={…} />`. See `docs/MIGRATION-0.13.0-to-0.14.0.md` §5.
+
+  **BulkActionBar hardening:**
+
+  - Bottom offset now respects the iOS safe area: `bottom: calc(var(--space-4) + env(safe-area-inset-bottom))`.
+  - Subtle entrance motion when it appears (`olun-bulk-action-bar-in`: translateY 8px + fade, `var(--dur-fast) var(--ease-out)`), opted out under `prefers-reduced-motion` via `motion-reduce:animate-none` + the global reduced-motion guard.
+  - Do not use on the same screen as `ActionFooter` — both occupy the bottom and overlap at `z-index` 1100 (documented, not enforced in code).
+
+- 676476c: Align internal token references to v0.14 canonical names
+
+  `@olundot/ui` now references the canonical v0.14 token names directly instead of the pre-v0.14 aliases that survive in `@olundot/tokens`' compat layer. Public component APIs are unchanged; only the token names emitted in class strings/styles change.
+
+  - **Accent:** `--accent-fg` → `--accent`, `--accent-solid` → `--accent-pop`, `--accent-on-solid` → `--accent-on-fill` (button, chip, icon-button); two-tier-badge's legacy `text-accent-fg` utility class → `text-[var(--accent)]`.
+  - **Elevation:** `shadow-[var(--elevation-{1,2,4})]` → `shadow-[var(--shadow-{1,2,4})]` (card, confirm-dialog, form-modal, info-modal, mode-toggle, popover, sheet-drawer, toast, theme-fab); legacy `shadow-elevation-{2,8}` utility classes → `shadow-{2,8}` (dropdown-menu, dialog).
+  - **Motion:** `--duration-fast` → `--dur-fast` and `theme.ts`'s `var(--duration-${d})` template → an explicit `--dur-*`/literal mapping (mode-toggle, tabs, tree-view, `lib/theme.ts`). Sheet's public `easing` prop keeps its `standard/decel/accel/sharp/bounce` surface; its internal map now uses canonical `--ease-standard/--ease-in/--ease-out`, with `decel`/`sharp` still referencing the compat-frozen `--easing-decel`/`--easing-sharp` beziers (no canonical equivalent).
+  - **Semantic:** the `tokens.css` `@theme` block maps `--color-semantic-*` off `--semantic-*-fg` (was `--semantic-*`).
+
+  The canonical motion tokens carry the intended v0.14 re-tuning (fast/base/slow 150/200/300 → 120/180/260ms), so transition timings shift accordingly.
+
+- 52714f9: Rewrite TwoTierBadge to the handoff horizontal-pill model (breaking)
+
+  TwoTierBadge moves from a vertical two-box stack with dual independent intents to the design-canonical **horizontal two-segment pill**: a `primary` lead segment and an optional `secondary` qualifier split by a hairline vertical divider, clipped to a full-round pill. It now shares the Badge/StatusBadge/Chip grammar.
+
+  **Breaking API change:**
+
+  - **Removed:** `primaryIntent`, `secondaryIntent`, `align`, `primaryClassName`, `secondaryClassName`, the `brand`/`muted` intents, and the `twoTierBadgeVariants` / `twoTierBadgeLineVariants` / `TwoTierBadgeIntent` exports.
+  - **Added:** a single `tone` axis (`neutral` · `info` · `success` · `warning` · `error`) that colors the **lead segment only** — the qualifier always stays neutral, and the brand lime is never spent here (accent rationing). Plus `emphasis` (`subtle`/`strong`, mirrors StatusBadge), `size` (`xs`/`sm`/`md`), and `showDot`. New type exports: `TwoTierBadgeTone`, `TwoTierBadgeEmphasis`, `TwoTierBadgeSize`.
+  - The root element is now a `<span>` (was `<div>`); `data-slot` names are unchanged (`two-tier-badge` / `-primary` / `-secondary`).
+
+  ### Before
+
+  ```tsx
+  <TwoTierBadge
+    primary="예약"
+    secondary="검토 필요"
+    primaryIntent="brand"
+    secondaryIntent="warning"
+  />
+  ```
+
+  ### After
+
+  ```tsx
+  <TwoTierBadge primary="예약" tone="info" secondary="검토 필요" />
+  <TwoTierBadge primary="반려" tone="error" emphasis="strong" secondary="중복 문항" />
+  ```
+
+  Map old intents to tone: `brand`→(drop, use `info`/neutral — lime is never used), `muted`→`neutral`, `danger`→`error`, `success`/`warning`/`info` unchanged. The old `secondaryIntent` has no equivalent — the qualifier is always neutral by design.
+
+### Patch Changes
+
+- Updated dependencies [966c3f6]
+  - @olundot/tokens@0.14.0
+
 ## 0.12.0
 
 ### Minor Changes

package/README.md

@@ -36,4 +36,4 @@ This beta package is extracted from the OLUN CBT/LMS shared UI implementation. A
 
 ## Accent Contract
 
-Filled accent buttons must pair `--accent-solid` for the background/border with `--accent-on-solid` for text and icons. `--accent-on-fill` remains a backward-compatible alias only and is not allowed in new `Button` source.
+Primary and default buttons are monochrome: pair `--primary` for the background and border with `--primary-fg` for text and icons. Brand and opt-in accent fills use the canonical `--accent-pop` + `--accent-on-fill` pair. The pre-v0.14 names `--accent-solid` and `--accent-on-solid` remain deprecated compatibility aliases and must not be used in new component source.

package/dist/index.d.ts

@@ -416,14 +416,15 @@ declare function evaluatePermission(permission: string, state?: PermissionEvalua
 declare function PermissionGuard({ permission, children, fallback, scope, permissions, disabledReason, }: PermissionGuardProps): react_jsx_runtime.JSX.Element | null;
 
 declare const cardBaseVariants: (props?: ({
-    variant?: "default" | "elevated" | "notice" | "interactive" | null | undefined;
+    variant?: "default" | "elevated" | "notice" | null | undefined;
+    interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CardVariant = NonNullable<VariantProps<typeof cardBaseVariants>["variant"]>;
 interface CardVariantOptions extends VariantProps<typeof cardBaseVariants> {
     surface?: SurfaceLevel;
     className?: string;
 }
-declare function cardVariants({ variant, surface, className }?: CardVariantOptions): string;
+declare function cardVariants({ variant, surface, interactive, className }?: CardVariantOptions): string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardBaseVariants> {
     /**
      * Background level for the card surface. When omitted, `variant` chooses the
@@ -431,6 +432,12 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<t
      * Selected and disabled states take precedence.
      */
     surface?: SurfaceLevel;
+    /**
+     * Clickable affordance — orthogonal to `variant`. Adds hover lift (shadow +
+     * border-strong), a pointer cursor and the neutral focus-ring. Combine with
+     * any `variant` (default/elevated/notice).
+     */
+    interactive?: boolean;
     selected?: boolean;
     disabled?: boolean;
 }
@@ -691,11 +698,6 @@ interface DataTableSort {
     key: string;
     dir: 'asc' | 'desc';
 }
-interface DataTableBulkAction {
-    label: React.ReactNode;
-    onClick: (ids: Set<string>) => void;
-    variant?: 'default' | 'destructive';
-}
 interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dataTableVariants> {
     columns: DataTableColumn<T>[];
     data: T[];
@@ -703,19 +705,17 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     selectable?: boolean;
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
-    selectionBar?: 'top' | 'none';
     activeRowId?: string;
     onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
     sortBy?: DataTableSort;
     onSortChange?: (key: string, dir: 'asc' | 'desc' | null) => void;
     loading?: boolean;
     emptyState?: React.ReactNode;
-    bulkActions?: DataTableBulkAction[];
     rowHref?: (row: T) => string;
     skeletonRowCount?: number;
     /**
-     * Background level for the table container. Header, selected rows, active
-     * selection bars, loading, and empty states keep their own state styling.
+     * Background level for the table container. Header, selected rows, loading,
+     * and empty states keep their own state styling.
      */
     surface?: SurfaceLevel;
 }
@@ -794,7 +794,7 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
  *     { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
  *   ]} />
  */
-declare function BulkActionBar({ count, actions, onClear, emptyHint, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
+declare function BulkActionBar({ count, actions, onClear, emptyHint, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 declare const Dialog: React.FC<Dialog$1.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -953,23 +953,38 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
-declare const twoTierBadgeVariants: (props?: ({
-    align?: "end" | "start" | "center" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const twoTierBadgeLineVariants: (props?: ({
-    tier?: "primary" | "secondary" | null | undefined;
-    intent?: "brand" | "muted" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type TwoTierBadgeIntent = NonNullable<VariantProps<typeof twoTierBadgeLineVariants>["intent"]>;
-interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof twoTierBadgeVariants> {
+type TwoTierBadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+type TwoTierBadgeEmphasis = 'subtle' | 'strong';
+type TwoTierBadgeSize = 'xs' | 'sm' | 'md';
+interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Lead facet — the headline segment (type, state, label). */
     primary: React.ReactNode;
+    /** Trailing qualifier segment (source, reason, count). Omit for a single-segment badge. */
     secondary?: React.ReactNode;
-    primaryIntent?: TwoTierBadgeIntent;
-    secondaryIntent?: TwoTierBadgeIntent;
-    primaryClassName?: string;
-    secondaryClassName?: string;
+    /** Semantic role — colors the LEAD segment only; the qualifier stays neutral. Brand lime is never used. */
+    tone?: TwoTierBadgeTone;
+    /** Weight axis (mirrors StatusBadge): `subtle` outlined pill, `strong` tinted lead fill. */
+    emphasis?: TwoTierBadgeEmphasis;
+    /** xs · sm (default) · md — padding + text + dot scale. */
+    size?: TwoTierBadgeSize;
+    /** Leading status dot on the lead segment (default false). Hollow ring for neutral. */
+    showDot?: boolean;
 }
-declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * OLUN TwoTierBadge — carries TWO related facets in ONE horizontal pill: a
+ * `primary` lead segment and an optional `secondary` qualifier, split by a
+ * hairline vertical divider (유형│출처, 상태│사유, 완료│312명). Shares the
+ * Badge/StatusBadge/Chip grammar: full-pill shape, `--font-sans`, the same 5
+ * semantic roles (`tone`) and the `subtle`/`strong` emphasis axis. `tone` colors
+ * the lead segment only; the qualifier stays neutral and the brand lime is never
+ * spent here. With no `secondary` it degrades to a plain semantic pill — prefer
+ * StatusBadge for pure state. Forwards its ref.
+ *
+ * @example
+ * <TwoTierBadge primary="객관식" secondary="순환기내과" />
+ * <TwoTierBadge primary="반려" tone="error" emphasis="strong" secondary="중복 문항" />
+ */
+declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
 type StatusBadgeStatus = 'active' | 'archived' | 'success' | 'warning' | 'error' | 'info' | 'pending';
 type StatusBadgeEmphasis = 'subtle' | 'strong';
@@ -1523,8 +1538,8 @@ declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAria
 /**
  * OLUN 브랜드 로고.
  *
- * - symbol: O 원형 테두리 + 우하단 accent-solid 작은 circle
- * - wordmark: "OLUN" + 마지막 "." 은 accent-fg 색상
+ * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle
+ * - wordmark: "OLUN" + 마지막 "." 은 accent 색상
  *
  * 레퍼런스: apps/web/docs/wireframes/ref/shell-wireframe.html Topbar 브랜드 영역.
  */
@@ -1568,4 +1583,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, Alert, type AlertEmphasis, 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, type ButtonVariant, 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 DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, 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, 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, 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, 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 TwoTierBadgeIntent, type TwoTierBadgeProps, 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, twoTierBadgeLineVariants, twoTierBadgeVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertEmphasis, 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, type ButtonVariant, 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 DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, 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, 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, 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, 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 };

package/dist/index.js

@@ -28,6 +28,14 @@ var durationMsByToken = {
   slower: 400,
   slowest: 600
 };
+var transitionDurationVarByToken = {
+  instant: "0ms",
+  fast: "var(--dur-fast)",
+  base: "var(--dur-base)",
+  slow: "var(--dur-slow)",
+  slower: "400ms",
+  slowest: "600ms"
+};
 var transitionCleanupTimer;
 var defaultThemeState = {
   theme: "light",
@@ -105,7 +113,7 @@ function setOlunTheme(nextTheme, options = {}) {
     root.dataset[TRANSITION_ATTR] = "true";
     root.style.setProperty(
       TRANSITION_DURATION_PROPERTY,
-      `var(--duration-${duration})`
+      transitionDurationVarByToken[duration]
     );
     void root.offsetWidth;
   }
@@ -201,7 +209,7 @@ var buttonVariants = cva(
         default: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
         destructive: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
         secondary: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
-        link: "border-transparent bg-transparent px-0 text-[var(--accent-fg)] underline-offset-4 hover:underline"
+        link: "border-transparent bg-transparent px-0 text-[var(--accent)] underline-offset-4 hover:underline"
       },
       size: {
         // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
@@ -2168,43 +2176,54 @@ import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var cardBaseVariants = cva7(
   [
-    "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+    "rounded-[var(--radius-lg)] border border-[var(--border)]",
     "px-pad-roomy-x py-pad-roomy-y text-foreground"
   ].join(" "),
   {
     variants: {
       variant: {
-        default: "",
-        elevated: "shadow-[var(--elevation-2)]",
-        notice: "border-[var(--border-accent)]",
-        interactive: [
+        default: "shadow-[var(--shadow-2)]",
+        elevated: "shadow-[var(--shadow-4)]",
+        notice: "border-[var(--border-accent)] shadow-[var(--shadow-2)]"
+      },
+      interactive: {
+        true: [
           "cursor-pointer",
           "transition-[transform,border-color,box-shadow,background-color]",
           "motion-reduce:transition-none",
           "hover:-translate-y-[1px] motion-reduce:hover:translate-y-0",
           "hover:border-[var(--border-strong)]",
           "hover:bg-[var(--action-hover)]",
-          "hover:shadow-[var(--elevation-2)]",
-          "dark:hover:shadow-[var(--elevation-2),var(--glow-sm)]",
           "focus-visible:outline-none",
-          "focus-visible:border-[var(--border-accent)]",
-          "focus-visible:shadow-[var(--elevation-2),var(--glow-sm)]"
-        ].join(" ")
+          "focus-visible:border-[var(--focus-ring)]",
+          "focus-visible:shadow-[0_0_0_1px_var(--focus-ring)]"
+        ].join(" "),
+        false: ""
       }
     },
-    defaultVariants: { variant: "default" }
+    // Interactive hover lifts the shadow one step above the variant's resting depth.
+    compoundVariants: [
+      { variant: "default", interactive: true, class: "hover:shadow-[var(--shadow-4)]" },
+      { variant: "notice", interactive: true, class: "hover:shadow-[var(--shadow-4)]" },
+      { variant: "elevated", interactive: true, class: "hover:shadow-[var(--shadow-8)]" }
+    ],
+    defaultVariants: { variant: "default", interactive: false }
   }
 );
 function getCardDefaultSurface(variant) {
   return variant === "elevated" ? "raised" : "surface";
 }
-function cardVariants({ variant, surface, className } = {}) {
+function cardVariants({ variant, surface, interactive, className } = {}) {
   const resolvedVariant = variant ?? "default";
   const resolvedSurface = surface ?? getCardDefaultSurface(resolvedVariant);
-  return cn(cardBaseVariants({ variant: resolvedVariant }), surfaceClassNames[resolvedSurface], className);
+  return cn(
+    cardBaseVariants({ variant: resolvedVariant, interactive: interactive ?? false }),
+    surfaceClassNames[resolvedSurface],
+    className
+  );
 }
 var Card = React12.forwardRef(
-  ({ className, variant, surface, selected, disabled, "aria-disabled": ariaDisabled, ...props }, ref) => /* @__PURE__ */ jsx13(
+  ({ className, variant, surface, interactive, selected, disabled, "aria-disabled": ariaDisabled, ...props }, ref) => /* @__PURE__ */ jsx13(
     "div",
     {
       ref,
@@ -2214,8 +2233,8 @@ var Card = React12.forwardRef(
       "aria-disabled": disabled ? true : ariaDisabled,
       className: cn(
         "group/card",
-        cardVariants({ variant, surface }),
-        selected && "border-[var(--border-strong)] bg-[var(--bg-canvas)]",
+        cardVariants({ variant, surface, interactive }),
+        selected && "border-[var(--border-strong)] bg-[var(--action-selected)]",
         disabled && "pointer-events-none cursor-not-allowed border-[var(--border-subtle)] bg-[var(--action-disabled-bg)] text-text-disabled",
         className
       ),
@@ -2958,7 +2977,7 @@ var tabsTriggerVariants = cva8(
     "relative inline-flex shrink-0 cursor-pointer items-center gap-[var(--space-2)]",
     "px-0 py-pad-compact-y text-body-sm font-medium",
     "text-text-secondary transition-colors",
-    "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
+    "duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "hover:text-foreground",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:pointer-events-auto disabled:text-text-disabled disabled:hover:text-text-disabled",
@@ -3384,9 +3403,9 @@ var DialogContent = React20.forwardRef(({ className, children, showCloseButton =
         // modal은 dim overlay 위 — 가장 밝은 DS surface(--bg-base #F1F3F5·여전히 tinted·순백 아님)로 깨끗하게.
         // arbitrary var 사용: 소비 site/app이 dist를 content-scan 안 해 `bg-base` 유틸이 purge될 수 있어 안전하게 var로.
         "bg-[var(--bg-base)] text-foreground",
-        // 2026: generic 무거운 그림자 대신 floating elevation-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
+        // 2026: generic 무거운 그림자 대신 floating shadow-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
         // (border-subtle=8%는 너무 흐려 가장자리가 안 보였음 → border-border로 grey 또렷하게.)
-        "border border-border rounded-[var(--radius-lg)] shadow-elevation-8",
+        "border border-border rounded-[var(--radius-lg)] shadow-8",
         "duration-200",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -3497,7 +3516,7 @@ var formModalContentClassName = cn(
   "bg-[var(--bg-raised)]",
   "border-[var(--border-subtle)]",
   "rounded-[var(--radius-lg)]",
-  "shadow-[var(--elevation-4)]",
+  "shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var formModalWideContentClassName = "max-w-[720px]";
@@ -3610,7 +3629,7 @@ var infoModalContentClassName = cn(
   "bg-[var(--bg-raised)]",
   "border border-[var(--border-subtle)]",
   "rounded-[var(--radius-lg)]",
-  "shadow-[var(--elevation-4)]",
+  "shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var infoModalWideContentClassName = "max-w-[720px]";
@@ -4110,7 +4129,7 @@ var Checkbox = React23.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 var dataTableVariants = cva10(
   [
     "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -4346,14 +4365,12 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
-  selectionBar = "top",
   activeRowId,
   onRowContextMenu,
   sortBy,
   onSortChange,
   loading = false,
   emptyState,
-  bulkActions = [],
   rowHref,
   skeletonRowCount = 8,
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
@@ -4396,44 +4413,13 @@ function DataTableInner({
       className: cn(dataTableVariants({ density, surface, className })),
       ...props,
       children: [
-        selectable && selectionBar === "top" ? /* @__PURE__ */ jsx26(
+        selectable ? /* @__PURE__ */ jsx26(
           "div",
           {
-            "data-slot": "data-table-selection-bar",
-            "data-active": selectedCount > 0 ? "true" : "false",
+            "data-slot": "data-table-selection-status",
             "aria-live": "polite",
-            className: cn(
-              "flex min-h-[48px] flex-wrap items-center justify-between gap-[var(--space-3)] border-b border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-2)]",
-              "bg-[var(--bg-raised)]"
-            ),
-            children: selectedCount > 0 ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              /* @__PURE__ */ jsxs25("div", { className: "text-sm font-medium text-foreground", children: [
-                selectedCount.toLocaleString("ko-KR"),
-                "\uAC1C \uC120\uD0DD\uB428"
-              ] }),
-              /* @__PURE__ */ jsxs25("div", { className: "flex flex-wrap items-center justify-end gap-[var(--space-2)]", children: [
-                bulkActions.map((action, index) => /* @__PURE__ */ jsx26(
-                  Button,
-                  {
-                    size: "xs",
-                    variant: action.variant === "destructive" ? "destructive" : "secondary",
-                    onClick: () => action.onClick(new Set(resolvedSelectedIds)),
-                    children: action.label
-                  },
-                  index
-                )),
-                /* @__PURE__ */ jsx26(
-                  Button,
-                  {
-                    "aria-label": "\uC120\uD0DD \uCDE8\uC18C",
-                    size: "xs",
-                    variant: "ghost",
-                    onClick: () => emitSelection(/* @__PURE__ */ new Set()),
-                    children: "\uCDE8\uC18C"
-                  }
-                )
-              ] })
-            ] }) : /* @__PURE__ */ jsx26("div", { className: "text-sm text-text-tertiary", children: "\uC120\uD0DD\uB41C \uD589 \uC5C6\uC74C" })
+            className: "sr-only",
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
           }
         ) : null,
         loading && data.length > 0 ? /* @__PURE__ */ jsx26(
@@ -4737,7 +4723,7 @@ function DropdownMenuContent({
       className: cn(
         "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
         "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-elevation-2",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -4936,7 +4922,7 @@ function DropdownMenuSubContent({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
         "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-elevation-2",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -5075,6 +5061,7 @@ function BulkActionBar({
   actions,
   onClear,
   emptyHint,
+  className,
   style,
   ...props
 }) {
@@ -5087,9 +5074,15 @@ function BulkActionBar({
       role: "toolbar",
       "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
       "data-slot": "bulk-action-bar",
+      className: cn(
+        // Subtle entrance when the bar appears (count>0). CSS animation runs once
+        // on mount; reduced motion opts out via the global guard + this variant.
+        "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
+        className
+      ),
       style: {
         position: "sticky",
-        bottom: "var(--space-4)",
+        bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
         zIndex: 1100,
         margin: "0 auto",
         display: "flex",
@@ -5149,14 +5142,14 @@ function BulkActionBar({
 
 // src/components/ui/confirm-dialog.tsx
 import * as React25 from "react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 var confirmDialogContentClassName = cn(
   "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
   "-translate-x-1/2 -translate-y-1/2",
   "w-[calc(100vw-2rem)] max-w-[420px]",
   "flex flex-col gap-[var(--space-6)]",
   "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
-  "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--elevation-4)]",
+  "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var confirmDialogTitleClassName = cn(
@@ -5203,7 +5196,7 @@ function ConfirmDialog({
       setPending(false);
     }
   }, [loading, onConfirm, onOpenChange]);
-  const dialogBody = /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  const dialogBody = /* @__PURE__ */ jsxs29(Fragment7, { children: [
     /* @__PURE__ */ jsx30("div", { className: "flex items-start justify-between gap-[var(--space-4)]", children: /* @__PURE__ */ jsxs29("div", { className: "min-w-0 space-y-[var(--space-2)]", children: [
       /* @__PURE__ */ jsx30(
         DialogTitle,
@@ -5353,11 +5346,13 @@ var defaultSheetMotionConfig = {
   easing: "decel"
 };
 var sheetMotionEasingValue = {
-  standard: "var(--easing-standard)",
+  standard: "var(--ease-standard)",
+  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
+  // specifically to back this public `easing` prop (see tokens/compat.css).
   decel: "var(--easing-decel)",
-  accel: "var(--easing-accel)",
+  accel: "var(--ease-in)",
   sharp: "var(--easing-sharp)",
-  bounce: "var(--easing-bounce)"
+  bounce: "var(--ease-out)"
 };
 function resolveSheetMotionConfig(motion) {
   if (motion === false) return false;
@@ -5560,7 +5555,7 @@ import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 var sheetDrawerContentClassName = cn(
   "gap-0 p-0",
   "bg-[var(--bg-surface)] text-foreground",
-  "border-[var(--border)] shadow-[var(--elevation-4)]",
+  "border-[var(--border)] shadow-[var(--shadow-4)]",
   "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
   "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
   "max-[899px]:rounded-t-[var(--radius-lg)]"
@@ -5734,7 +5729,7 @@ var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffs
       "z-[var(--z-popover)] w-[260px] outline-none",
       "rounded-[var(--radius-md)] border border-[var(--border)]",
       "bg-[var(--bg-raised)] p-[var(--space-4)] text-foreground",
-      "shadow-[var(--elevation-4)]",
+      "shadow-[var(--shadow-4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -5816,100 +5811,93 @@ Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
 import * as React28 from "react";
-import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
-var twoTierBadgeVariants = cva11(
-  "inline-flex w-fit flex-col gap-[var(--space-1)]",
-  {
-    variants: {
-      align: {
-        start: "items-start text-left",
-        center: "items-center text-center",
-        end: "items-end text-right"
-      }
-    },
-    defaultVariants: {
-      align: "start"
-    }
-  }
-);
-var twoTierBadgeLineVariants = cva11(
-  [
-    "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
-    "rounded-[var(--radius-xs)] border leading-none",
-    "transition-colors motion-reduce:transition-none"
-  ].join(" "),
-  {
-    variants: {
-      tier: {
-        primary: "px-[var(--space-2)] py-[calc(var(--space-1)/2)] text-xs font-medium",
-        secondary: "px-[var(--space-2)] py-[calc(var(--space-1)/2)] text-xs font-normal"
-      },
-      intent: {
-        neutral: "border-transparent bg-[var(--bg-raised)] text-foreground",
-        muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary",
-        brand: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-accent-fg",
-        success: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
-        warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)]",
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)]"
-      }
-    },
-    defaultVariants: {
-      tier: "primary",
-      intent: "neutral"
-    }
-  }
-);
+var FG = {
+  neutral: "var(--text-secondary)",
+  info: "var(--semantic-info-fg)",
+  success: "var(--semantic-success-fg)",
+  warning: "var(--semantic-warning-fg)",
+  error: "var(--semantic-error-fg)"
+};
+var BG = {
+  neutral: "var(--bg-inset)",
+  info: "var(--semantic-info-bg)",
+  success: "var(--semantic-success-bg)",
+  warning: "var(--semantic-warning-bg)",
+  error: "var(--semantic-error-bg)"
+};
+var SEGMENT = {
+  xs: "gap-[5px] py-[2px] px-[var(--space-2)] text-[12px]",
+  sm: "gap-[6px] py-[var(--space-1)] px-[var(--space-2)] text-[12px]",
+  md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
+};
+var DOT2 = { xs: 5, sm: 6, md: 7 };
 var TwoTierBadge = React28.forwardRef(
-  ({
-    className,
-    align,
-    primary,
-    secondary,
-    primaryIntent = "neutral",
-    secondaryIntent = "muted",
-    primaryClassName,
-    secondaryClassName,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs34(
-    "div",
-    {
-      ref,
-      "data-slot": "two-tier-badge",
-      className: cn(twoTierBadgeVariants({ align, className })),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx37(
-          "span",
-          {
-            "data-slot": "two-tier-badge-primary",
-            className: cn(
-              twoTierBadgeLineVariants({
-                tier: "primary",
-                intent: primaryIntent
-              }),
-              primaryClassName
-            ),
-            children: primary
-          }
+  ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
+    const strong = emphasis === "strong";
+    const fg = FG[tone];
+    const ringDot = tone === "neutral";
+    const tinted = tone === "neutral" ? "var(--border)" : `color-mix(in srgb, ${fg} 26%, transparent)`;
+    const frame = strong ? tinted : "var(--border-subtle)";
+    const divider = strong ? tinted : "var(--border)";
+    const dotSize = DOT2[size];
+    return /* @__PURE__ */ jsxs34(
+      "span",
+      {
+        ref,
+        "data-slot": "two-tier-badge",
+        "data-tone": tone,
+        "data-emphasis": emphasis,
+        className: cn(
+          "inline-flex w-fit shrink-0 items-stretch overflow-hidden rounded-full border font-medium leading-none",
+          className
         ),
-        secondary ? /* @__PURE__ */ jsx37(
-          "span",
-          {
-            "data-slot": "two-tier-badge-secondary",
-            className: cn(
-              twoTierBadgeLineVariants({
-                tier: "secondary",
-                intent: secondaryIntent
-              }),
-              secondaryClassName
-            ),
-            children: secondary
-          }
-        ) : null
-      ]
-    }
-  )
+        style: { fontFamily: "var(--font-sans)", borderColor: frame, background: "transparent", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs34(
+            "span",
+            {
+              "data-slot": "two-tier-badge-primary",
+              className: cn("inline-flex items-center whitespace-nowrap font-semibold", SEGMENT[size]),
+              style: { color: fg, background: strong ? BG[tone] : "transparent" },
+              children: [
+                showDot ? /* @__PURE__ */ jsx37(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "two-tier-badge-dot",
+                    "data-ring-dot": ringDot ? "true" : "false",
+                    className: "box-border shrink-0 rounded-full",
+                    style: {
+                      width: dotSize,
+                      height: dotSize,
+                      background: ringDot ? "transparent" : "currentColor",
+                      border: ringDot ? "1.5px solid currentColor" : "none"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx37("span", { children: primary })
+              ]
+            }
+          ),
+          secondary != null ? /* @__PURE__ */ jsx37(
+            "span",
+            {
+              "data-slot": "two-tier-badge-secondary",
+              className: cn("inline-flex items-center whitespace-nowrap", SEGMENT[size]),
+              style: {
+                borderLeft: `1px solid ${divider}`,
+                color: "var(--text-tertiary)",
+                background: strong ? "var(--bg-inset)" : "transparent"
+              },
+              children: secondary
+            }
+          ) : null
+        ]
+      }
+    );
+  }
 );
 TwoTierBadge.displayName = "TwoTierBadge";
 
@@ -5925,14 +5913,14 @@ var ROLE = {
   success: "success",
   archived: "neutral"
 };
-var FG = {
+var FG2 = {
   error: "var(--semantic-error-fg)",
   warning: "var(--semantic-warning-fg)",
   info: "var(--semantic-info-fg)",
   success: "var(--semantic-success-fg)",
   neutral: "var(--semantic-neutral-fg)"
 };
-var BG = {
+var BG2 = {
   error: "var(--semantic-error-bg)",
   warning: "var(--semantic-warning-bg)",
   info: "var(--semantic-info-bg)",
@@ -5947,7 +5935,7 @@ var SIZE = {
 var StatusBadge = React29.forwardRef(
   ({ status = "active", emphasis = "subtle", size = "sm", showDot = true, pulse = true, className, children, style, ...props }, ref) => {
     const role = ROLE[status];
-    const fg = FG[role];
+    const fg = FG2[role];
     const strong = emphasis === "strong";
     const ringDot = role === "neutral";
     return /* @__PURE__ */ jsxs35(
@@ -5961,7 +5949,7 @@ var StatusBadge = React29.forwardRef(
         className: cn("inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-full border font-medium leading-none", SIZE[size].cls, className),
         style: {
           fontFamily: "var(--font-sans)",
-          background: strong ? BG[role] : "transparent",
+          background: strong ? BG2[role] : "transparent",
           borderColor: strong ? `color-mix(in srgb, ${fg} 26%, transparent)` : "var(--border-subtle)",
           color: fg,
           ...style
@@ -5996,9 +5984,9 @@ StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
 import * as React30 from "react";
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var notificationBadgeVariants = cva12(
+var notificationBadgeVariants = cva11(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
     "bg-[var(--semantic-error,var(--error))] text-[var(--error-contrast)]",
@@ -6062,11 +6050,11 @@ NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/chip.tsx
 import * as React31 from "react";
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import { X as X3 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
-var chipVariants = cva13(
+var chipVariants = cva12(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -6087,7 +6075,7 @@ var chipVariants = cva13(
       },
       tone: {
         neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
-        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent-fg)] hover:bg-[var(--action-accent-hover)]",
+        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--action-accent-hover)]",
         success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
         warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
         danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
@@ -6110,10 +6098,10 @@ var chipVariants = cva13(
         className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
       },
       {
-        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent-fg olive/lime text).
+        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent olive/lime text).
         pressed: true,
         tone: "accent",
-        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent-fg)]"
+        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent)]"
       },
       {
         pressed: true,
@@ -6129,7 +6117,7 @@ var chipVariants = cva13(
     }
   }
 );
-var chipCountVariants = cva13(
+var chipCountVariants = cva12(
   [
     "inline-flex min-w-[var(--space-4)] items-center justify-center",
     "rounded-[var(--radius-full)] px-[var(--space-1)]",
@@ -6139,7 +6127,7 @@ var chipCountVariants = cva13(
     variants: {
       tone: {
         neutral: "bg-[var(--bg-raised)] text-text-tertiary",
-        accent: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
+        accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         success: "bg-[var(--success)] text-[var(--success-contrast)]",
         warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
         danger: "bg-[var(--error)] text-[var(--error-contrast)]",
@@ -6254,9 +6242,9 @@ Chip.displayName = "Chip";
 
 // src/components/ui/empty-state.tsx
 import * as React32 from "react";
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
-var emptyStateBaseVariants = cva14(
+var emptyStateBaseVariants = cva13(
   [
     "flex flex-col items-center justify-center text-center",
     "text-foreground"
@@ -6304,7 +6292,7 @@ function emptyStateVariants({
     className
   );
 }
-var emptyStateIconVariants = cva14(
+var emptyStateIconVariants = cva13(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
     "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary"
@@ -6397,9 +6385,9 @@ EmptyState.displayName = "EmptyState";
 // src/components/ui/error-state.tsx
 import * as React33 from "react";
 import { AlertTriangle } from "lucide-react";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
-var errorStateVariants = cva15(
+var errorStateVariants = cva14(
   [
     "flex flex-col items-center justify-center text-center",
     "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -6484,9 +6472,9 @@ ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
 import * as React34 from "react";
-import { cva as cva16 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx43 } from "react/jsx-runtime";
-var skeletonVariants = cva16(
+var skeletonVariants = cva15(
   [
     "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
     "motion-reduce:animate-none motion-reduce:opacity-80"
@@ -6504,7 +6492,7 @@ var skeletonVariants = cva16(
     }
   }
 );
-var spinnerVariants = cva16(
+var spinnerVariants = cva15(
   [
     "inline-block shrink-0 animate-spin rounded-[var(--radius-full)] border-2",
     "border-[var(--border-subtle)] border-t-[var(--primary)]",
@@ -6635,9 +6623,9 @@ Spinner.displayName = "Spinner";
 
 // src/components/ui/icon-button.tsx
 import * as React35 from "react";
-import { cva as cva17 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
-var iconButtonVariants = cva17(
+var iconButtonVariants = cva16(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center",
     "rounded-[var(--radius-sm)] border font-medium",
@@ -6683,7 +6671,7 @@ var iconButtonVariants = cva17(
     }
   }
 );
-var iconButtonBadgeVariants = cva17(
+var iconButtonBadgeVariants = cva16(
   [
     "pointer-events-none absolute right-0 top-0 inline-flex",
     "olun-icon-button__badge",
@@ -6695,7 +6683,7 @@ var iconButtonBadgeVariants = cva17(
   {
     variants: {
       tone: {
-        info: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
+        info: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         error: "bg-[var(--error)] text-[var(--error-contrast)]"
       }
     },
@@ -6780,7 +6768,7 @@ IconButton.displayName = "IconButton";
 // src/components/ui/pagination.tsx
 import * as React36 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight2, ChevronsRight } from "lucide-react";
-import { cva as cva18 } from "class-variance-authority";
+import { cva as cva17 } from "class-variance-authority";
 
 // src/components/ui/page-size-select.tsx
 import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -6835,7 +6823,7 @@ function PageSizeSelect({
 
 // src/components/ui/pagination.tsx
 import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
-var paginationVariants = cva18(
+var paginationVariants = cva17(
   [
     "flex w-full flex-col gap-[var(--space-3)]",
     "text-sm text-text-secondary",
@@ -6853,7 +6841,7 @@ var paginationVariants = cva18(
     }
   }
 );
-var paginationControlVariants = cva18(
+var paginationControlVariants = cva17(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
     "border-transparent bg-transparent font-medium text-text-secondary",
@@ -7056,26 +7044,26 @@ var Pagination = React36.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/components/ui/mode-toggle.tsx
-import { cva as cva19 } from "class-variance-authority";
+import { cva as cva18 } from "class-variance-authority";
 import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
-var modeToggleVariants = cva19(
+var modeToggleVariants = cva18(
   [
     "inline-flex items-center rounded-[var(--radius-sm)] border border-[var(--border-subtle)]",
     "bg-[var(--bg-raised)] p-[2px]"
   ].join(" ")
 );
-var modeToggleItemVariants = cva19(
+var modeToggleItemVariants = cva18(
   [
     "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-1)]",
     "rounded-[calc(var(--radius-sm)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
     "font-[family-name:var(--font-display)] text-xs font-medium leading-none",
     "text-text-secondary transition-[background-color,color,box-shadow]",
-    "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
+    "duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "hover:text-foreground",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:text-text-disabled",
     "data-[state=active]:bg-[var(--bg-surface)] data-[state=active]:font-semibold",
-    "data-[state=active]:text-foreground data-[state=active]:shadow-[var(--elevation-1)]",
+    "data-[state=active]:text-foreground data-[state=active]:shadow-[var(--shadow-1)]",
     "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-[1.75]"
   ].join(" ")
 );
@@ -7126,9 +7114,9 @@ function ModeToggle({
 
 // src/components/ui/action-footer.tsx
 import * as React37 from "react";
-import { cva as cva20 } from "class-variance-authority";
+import { cva as cva19 } from "class-variance-authority";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
-var actionFooterVariants = cva20(
+var actionFooterVariants = cva19(
   [
     "flex flex-wrap items-center gap-[var(--space-4)] border-t border-[var(--border-subtle)]",
     "px-[var(--space-6)] py-[var(--space-4)]",
@@ -7150,7 +7138,7 @@ var actionFooterVariants = cva20(
     }
   }
 );
-var actionFooterStatusVariants = cva20(
+var actionFooterStatusVariants = cva19(
   [
     "flex min-w-0 flex-1 items-center gap-[var(--space-2)]",
     "text-sm leading-snug text-text-tertiary"
@@ -7283,21 +7271,21 @@ ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
 import * as React38 from "react";
-import { cva as cva21 } from "class-variance-authority";
+import { cva as cva20 } from "class-variance-authority";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
-var DOT2 = {
+var DOT3 = {
   default: "var(--neutral)",
   success: "var(--success)",
   warning: "var(--warning)",
   info: "var(--info)",
   error: "var(--error)"
 };
-var toastVariants = cva21(
+var toastVariants = cva20(
   [
     "flex min-w-[280px] max-w-[420px] items-center",
     "gap-[11px] rounded-[10px] border border-[var(--border)]",
     "px-[14px] py-[11px]",
-    "shadow-[var(--elevation-4)]",
+    "shadow-[var(--shadow-4)]",
     "pointer-events-auto",
     "motion-reduce:animate-none"
   ].join(" "),
@@ -7314,7 +7302,7 @@ var toastVariants = cva21(
     defaultVariants: { variant: "default" }
   }
 );
-var toastViewportVariants = cva21(
+var toastViewportVariants = cva20(
   [
     "fixed bottom-[var(--space-6)] right-[var(--space-6)] z-[var(--z-toast,50)]",
     "flex w-[min(420px,calc(100vw-var(--space-12)))] list-none flex-col gap-[var(--space-2)]",
@@ -7465,7 +7453,7 @@ var ToastRoot = React38.forwardRef(
               "aria-hidden": "true",
               "data-slot": "toast-dot",
               className: "size-[7px] shrink-0 rounded-full",
-              style: { background: DOT2[variant] ?? DOT2.default }
+              style: { background: DOT3[variant] ?? DOT3.default }
             }
           ),
           /* @__PURE__ */ jsxs44("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
@@ -7545,10 +7533,10 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 
 // src/components/ui/otp-field.tsx
 import * as React39 from "react";
-import { cva as cva22 } from "class-variance-authority";
+import { cva as cva21 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
-var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
       default: "",
@@ -7559,7 +7547,7 @@ var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]"
     size: "default"
   }
 });
-var otpFieldGroupVariants = cva22("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
+var otpFieldGroupVariants = cva21("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
   variants: {
     size: {
       default: "",
@@ -7575,7 +7563,7 @@ var otpFieldGroupVariants = cva22("flex items-start gap-[var(--space-2)] pt-[var
     fluid: false
   }
 });
-var otpCellVariants = cva22(
+var otpCellVariants = cva21(
   [
     "flex items-center justify-center rounded-[var(--radius-sm)] border",
     "border-[var(--border)] text-foreground",
@@ -7630,7 +7618,7 @@ var otpCellVariants = cva22(
     }
   }
 );
-var otpFieldMessageVariants = cva22("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
+var otpFieldMessageVariants = cva21("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
   variants: {
     state: {
       default: "text-text-tertiary",
@@ -7869,7 +7857,7 @@ var OTPField = React39.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs45(Fragment9, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs45(Fragment8, { children: [
                 /* @__PURE__ */ jsx50(
                   AlertCircle4,
                   {
@@ -7905,9 +7893,9 @@ OTPField.displayName = "OTPField";
 // src/components/ui/search-field.tsx
 import * as React40 from "react";
 import { Search, X as X4 } from "lucide-react";
-import { cva as cva23 } from "class-variance-authority";
+import { cva as cva22 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
-var searchFieldVariants = cva23("relative flex w-full items-center", {
+var searchFieldVariants = cva22("relative flex w-full items-center", {
   variants: {
     size: {
       // Field-control scale follows Select: sm/md/lg = 30/32/36px. Pair with Button sm/md/lg.
@@ -7920,7 +7908,7 @@ var searchFieldVariants = cva23("relative flex w-full items-center", {
     size: "md"
   }
 });
-var searchFieldInputVariants = cva23(
+var searchFieldInputVariants = cva22(
   [
     "h-full w-full rounded-[var(--radius-sm)] border",
     "border-[var(--border)]",
@@ -8063,9 +8051,9 @@ SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
 import * as React41 from "react";
-import { cva as cva24 } from "class-variance-authority";
+import { cva as cva23 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
-var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
+var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -8165,11 +8153,11 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
 import * as React42 from "react";
-import { cva as cva25 } from "class-variance-authority";
+import { cva as cva24 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
-var radioGroupVariants = cva25("gap-[var(--space-2)]", {
+var radioGroupVariants = cva24("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -8194,7 +8182,7 @@ var radioGroupVariants = cva25("gap-[var(--space-2)]", {
     columns: "one"
   }
 });
-var radioVariants = cva25(
+var radioVariants = cva24(
   [
     "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
@@ -8236,7 +8224,7 @@ var radioVariants = cva25(
     }
   }
 );
-var radioControlVariants = cva25(
+var radioControlVariants = cva24(
   [
     "flex size-[calc(var(--space-4)+var(--space-1))] shrink-0 items-center justify-center",
     "rounded-[var(--radius-full)] border border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
@@ -8471,16 +8459,16 @@ function Progress({
 // src/components/ui/tree-view.tsx
 import * as React43 from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
-import { cva as cva26 } from "class-variance-authority";
+import { cva as cva25 } from "class-variance-authority";
 import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
-var treeViewVariants = cva26(
+var treeViewVariants = cva25(
   "m-0 list-none p-[var(--space-1)] text-body-sm text-foreground"
 );
-var treeItemRowVariants = cva26(
+var treeItemRowVariants = cva25(
   [
     "flex min-h-[32px] w-full cursor-pointer select-none items-center gap-[var(--space-2)]",
     "rounded-[var(--radius-sm)] py-[var(--space-2)] pr-[var(--space-3)]",
-    "text-text-secondary transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+    "text-text-secondary transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
     "hover:bg-[var(--action-hover)] hover:text-foreground",
     // Roving focus lives on the treeitem <li> (named group/treeitem); the ring is
     // painted on the visual row so it never wraps the nested child group.
@@ -8692,7 +8680,7 @@ function TreeView({
                           "aria-hidden": "true",
                           "data-slot": "treeitem-chevron",
                           className: cn(
-                            "size-[16px] transition-transform duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+                            "size-[16px] transition-transform duration-[var(--dur-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
                             expanded && "rotate-90"
                           ),
                           strokeWidth: 2
@@ -8759,7 +8747,7 @@ function OlunSymbol({ size = 28, className }) {
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx57("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
+        /* @__PURE__ */ jsx57("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-pop)" })
       ]
     }
   );
@@ -8793,7 +8781,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx57("span", { style: { color: "var(--accent-fg)" }, children: "." })
+              /* @__PURE__ */ jsx57("span", { style: { color: "var(--accent)" }, children: "." })
             ]
           }
         )
@@ -8862,7 +8850,7 @@ function ThemeFab({ variant = "square" } = {}) {
     border: "1px solid var(--border-accent)",
     background: "var(--theme-fab-bg, var(--bg-surface))",
     color: "var(--theme-fab-icon, var(--text-primary))",
-    boxShadow: "var(--elevation-4)",
+    boxShadow: "var(--shadow-4)",
     backdropFilter: "blur(16px)",
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
@@ -9144,8 +9132,6 @@ export {
   toastViewportVariants,
   treeItemRowVariants,
   treeViewVariants,
-  twoTierBadgeLineVariants,
-  twoTierBadgeVariants,
   useOlunTheme,
   usePermission
 };

package/dist/tokens.css

@@ -37,10 +37,10 @@
   --color-action-active:   var(--action-active);
 
   /* Semantic aliases exposed for component package utilities. */
-  --color-semantic-error: var(--semantic-error);
-  --color-semantic-success: var(--semantic-success);
-  --color-semantic-warning: var(--semantic-warning);
-  --color-semantic-info: var(--semantic-info);
+  --color-semantic-error: var(--semantic-error-fg);
+  --color-semantic-success: var(--semantic-success-fg);
+  --color-semantic-warning: var(--semantic-warning-fg);
+  --color-semantic-info: var(--semantic-info-fg);
 
   /* bg-base / text-base 충돌 방지용 alias.
    * Tailwind에서 `text-base`는 font-size 예약어 → `text-bg-base`로 노출.
@@ -58,6 +58,11 @@
  * unconditionally — removing the duplicate avoids cascade conflicts.
  */
 
+@keyframes olun-bulk-action-bar-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 @keyframes olun-sheet-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.13.0"
+    "@olundot/tokens": "^0.14.0"
   },
   "peerDependencies": {
     "react": ">=18",