@olundot/ui 0.20.2 → 0.21.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @olundot/ui
 
+## 0.21.1
+
+### Patch Changes
+
+- dcadbb9: ModeToggle과 Tabs `contained`의 선택 칸에 테두리가 생기고, 어둠 테마에서 선택 칸이 홈보다 밝아집니다.
+
+## 0.21.0
+
+### Minor Changes
+
+- e5aadba: 호환성을 깨는 변경이다. `BulkActionBar`의 `placement="inline"`, `compactSummary`, `trailing`을 지웠다. 세 가지 모두 0.20에서 사용 중단으로 표시한 것이다.
+
+  - `placement`는 `"floating"`만 받는다. 넘기던 곳에서는 `placement`를 지운다.
+  - `compactSummary`와 `trailing`은 `inline`에서만 쓰였다. 넘기던 곳에서는 지운다.
+  - `DataTable`의 가상 목록 머리가 `inline` 바 아래로 내려가던 `top-[40px]` 보정을 지웠다.
+  - `idleContent`, `emptyHint`, `DataTable`의 `announceSelection`은 그대로다.
+
+### Patch Changes
+
+- 77acbcb: `AlertDialog`와 `ConfirmDialog`는 `description`과 본문이 모두 없으면 `aria-describedby`를 붙이지 않는다. 전에는 화면에 없는 요소의 id를 가리켰다. 제목을 설명으로 다시 쓰지 않으며, Radix의 개발 경고는 그대로 난다. 설명이나 본문이 있으면 지금처럼 그 요소를 가리킨다.
+- 77acbcb: `AlertDialog`(`ConfirmDialog` 포함)와 구조형 `Dialog` 폼 모드는 `open`이 `false`가 되면 `onConfirm`·`onSubmit`이 잡고 있던 실행 중 상태를 푼다. 소비자가 준 `loading`이 `true`면 그대로 잠긴다. 전에는 `onConfirm`·`onSubmit`이 끝날 때까지 남아, 그사이 다시 연 창의 확인 버튼이 로딩으로 돌고 취소·Escape가 막혔다가 앞 실행이 끝나면 창이 닫혔다.
+
+  - 닫히기 전에 시작한 실행은 취소하지 않고 끝까지 간다. 끝나도 다시 연 창을 닫지 않고, 실행 중 상태를 풀지 않으며, 실패를 `onError`로 넘기지 않는다. `onError`가 없으면 실패는 지금처럼 호출자에게 전파된다.
+  - 닫힌 동안에는 실행하지 않는다. 닫히는 애니메이션 중 남은 확인·제출 버튼을 눌러도 `onConfirm`·`onSubmit`을 부르지 않는다.
+  - 같은 열림 안에서 한 번만 실행, 실행 중 닫기 막기, 성공하면 한 번 닫기는 그대로다.
+  - 닫았다 다시 연 창에서 같은 요청을 다시 보내는 중복은 막지 않는다. 핸들러와 서버가 막는다.
+
 ## 0.20.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1134,9 +1134,9 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
     selectionUnit?: string;
     /**
      * `false` drops the built-in screen-reader selection message — when a
-     * `BulkActionBar placement="inline"` already announces the count (it is a status
-     * region), or when the real selection includes rows that are not loaded (the
-     * built-in message only counts loaded rows). Default `true`.
+     * `BulkActionBar` already announces the count (it is a status region), or when the
+     * real selection includes rows that are not loaded (the built-in message only
+     * counts loaded rows). Default `true`.
      */
     announceSelection?: boolean;
     activeRowId?: string;
@@ -1294,42 +1294,24 @@ interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Count unit — `12명 선택됨`. Defaults to `개`. */
     unit?: string;
     /**
-     * Under the count in the floating card, next to it inline — e.g. an "이 조건의 3,214명
-     * 모두 선택" link or a cap notice. The card wraps it at full width, never clips it.
+     * Under the count — e.g. an "이 조건의 3,214명 모두 선택" link or a cap notice. The card
+     * wraps it at full width, never clips it.
      */
     summary?: React.ReactNode;
-    /**
-     * Inline only: a shorter `summary` (e.g. "모두 선택") swapped in when the band is too
-     * narrow to show `summary` on one line. Without it, `summary` is clipped, never wrapped.
-     *
-     * @deprecated Only `placement="inline"` uses it; removed together with `inline` in the next minor.
-     */
-    compactSummary?: React.ReactNode;
+    /** Removed in 0.21 with `placement="inline"`. */
+    compactSummary?: never;
+    /** Removed in 0.21 with `placement="inline"`. */
+    trailing?: never;
     /**
      * Shown instead of the bar while nothing is selected (e.g. `100 / 3,214명`).
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
 }
-type BulkActionBarProps = BulkActionBarBaseProps & ({
+interface BulkActionBarProps extends BulkActionBarBaseProps {
     /** `floating` (default) — card stuck to the bottom of the list. */
     placement?: "floating";
-    /** Not taken by the floating card: edit-mode controls go at the right end of the toolbar. */
-    trailing?: never;
-} | {
-    /**
-     * `inline` — full-width band stuck to the top, placed where the status line sits
-     * under the toolbar. Render it BEFORE the list so it comes first in tab order.
-     * Deprecated: `inline` is removed in the next minor.
-     */
-    placement: "inline";
-    /**
-     * Inline only: after the clear (✕) button — e.g. an edit-mode "완료" button. On the
-     * idle line it sits at the right end, outside the `role="status"` region, so it is
-     * not re-read whenever `idleContent` changes.
-     */
-    trailing?: React.ReactNode;
-});
+}
 /**
  * OLUN BulkActionBar — multi-select table/list actions.
  *
@@ -1339,13 +1321,7 @@ type BulkActionBarProps = BulkActionBarBaseProps & ({
  * they do not fit. `variant: "destructive"` is outline danger. The card is
  * min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
  * carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
- * DOM order stays count → actions → ✕. It takes no `trailing`.
- *
- * placement="inline" (deprecated) is a top-sticky band that replaces the status
- * line under the toolbar, so it comes before the rows in tab order. The band and
- * the idle line are one 40px line: a long `summary` is clipped or swapped for
- * `compactSummary`, never wrapped. Its actions are borderless text/icon buttons
- * between hairline dividers; `trailing` follows the clear button.
+ * DOM order stays count → actions → ✕.
  *
  * `unit` sets the count unit, `idleContent` shows while nothing is selected.
  *
@@ -1356,7 +1332,7 @@ type BulkActionBarProps = BulkActionBarBaseProps & ({
  *     { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
  *   ]} />
  */
-declare function BulkActionBar({ count, actions, onClear, emptyHint, placement, unit, summary, compactSummary, idleContent, trailing, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
+declare function BulkActionBar({ count, actions, onClear, emptyHint, placement: _placement, compactSummary: _compactSummary, trailing: _trailing, unit, summary, idleContent, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 interface ConfirmDialogProps {
     open: boolean;

package/dist/index.js

@@ -3228,7 +3228,7 @@ var tabsTriggerVariants = cva9(
     variants: {
       variant: {
         line: "",
-        contained: "rounded-[var(--radius-sm)] border border-transparent px-[var(--space-3)] data-[state=active]:border-[var(--border-strong)] data-[state=active]:bg-[var(--action-selected)] data-[state=active]:after:hidden"
+        contained: "rounded-[var(--radius-sm)] border border-transparent px-[var(--space-3)] data-[state=active]:border-[var(--text-tertiary)] data-[state=active]:bg-[var(--fill-on-inset)] data-[state=active]:after:hidden"
       },
       orientation: {
         horizontal: "",
@@ -3800,6 +3800,7 @@ import { Dialog as DialogPrimitive3 } from "radix-ui";
 // src/lib/use-overlay-action.ts
 import * as React22 from "react";
 function useOverlayAction({
+  open,
   action,
   onOpenChange,
   loading = false,
@@ -3808,7 +3809,14 @@ function useOverlayAction({
 }) {
   const [pending, setPending] = React22.useState(false);
   const busyRef = React22.useRef(false);
+  const runIdRef = React22.useRef(0);
   const isBusy = loading || pending;
+  React22.useEffect(() => {
+    if (open) return;
+    runIdRef.current += 1;
+    busyRef.current = false;
+    setPending(false);
+  }, [open]);
   const guardOpenChange = React22.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
@@ -3819,22 +3827,25 @@ function useOverlayAction({
     [isBusy, onOpenChange]
   );
   const run = React22.useCallback(async () => {
-    if (busyRef.current || loading || disabled) {
+    if (!open || busyRef.current || loading || disabled) {
       return;
     }
+    const runId = ++runIdRef.current;
     busyRef.current = true;
     setPending(true);
     try {
       await action();
-      onOpenChange(false);
+      if (runId === runIdRef.current) onOpenChange(false);
     } catch (error) {
       if (!onError) throw error;
-      onError(error);
+      if (runId === runIdRef.current) onError(error);
     } finally {
-      busyRef.current = false;
-      setPending(false);
+      if (runId === runIdRef.current) {
+        busyRef.current = false;
+        setPending(false);
+      }
     }
-  }, [action, disabled, loading, onError, onOpenChange]);
+  }, [action, disabled, loading, onError, onOpenChange, open]);
   return { isBusy, run, guardOpenChange };
 }
 
@@ -5019,6 +5030,7 @@ function StructuredDialog({
   const policy = OVERLAY_POLICY.dialog;
   const formMode = onSubmit !== void 0;
   const { isBusy, run, guardOpenChange } = useOverlayAction({
+    open,
     action: onSubmit ?? noAction,
     onOpenChange,
     loading: formMode && loading,
@@ -5326,6 +5338,7 @@ function AlertDialogFrame({
         className: overlayBoxClassName("alert"),
         onOpenAutoFocus,
         onCloseAutoFocus: returnFocus.onCloseAutoFocus,
+        ...description == null && children == null && { "aria-describedby": void 0 },
         children: [
           /* @__PURE__ */ jsx28(OverlayHeader, { kind: "alert", title, description }),
           children != null ? description != null ? /* @__PURE__ */ jsx28(OverlayBody, { kind: "alert", children }) : /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Description, { asChild: true, children: /* @__PURE__ */ jsx28(OverlayBody, { kind: "alert", children }) }) : null,
@@ -5352,6 +5365,7 @@ function AlertDialog({
   acknowledgeLabel = "\uD655\uC778"
 }) {
   const { isBusy, run, guardOpenChange } = useOverlayAction({
+    open,
     action: onConfirm ?? noop,
     onOpenChange,
     loading,
@@ -8532,10 +8546,8 @@ function DataTableInner({
                   role: "row",
                   className: cn(
                     "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold leading-snug text-text-tertiary",
-                    // Virtual lists are long: the header sticks inside the scroll container,
-                    // below an inline BulkActionBar band (40px, --z-sticky) rendered before
-                    // the table — band on top, header under it, rows beneath both.
-                    isVirtual && "sticky top-0 z-[2] [[data-slot=bulk-action-bar][data-placement=inline]:not([data-state=idle])~[data-slot=data-table]_&]:top-[40px]"
+                    // Virtual lists are long: the header sticks inside the scroll container.
+                    isVirtual && "sticky top-0 z-[2]"
                   ),
                   style: { gridTemplateColumns },
                   children: [
@@ -8677,51 +8689,6 @@ DataTable.displayName = "DataTable";
 import * as React36 from "react";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
-function ActionButton({ action }) {
-  const danger = action.variant === "destructive";
-  const off = action.disabled;
-  const Icon = action.icon;
-  return /* @__PURE__ */ jsxs35(
-    "button",
-    {
-      type: "button",
-      "data-slot": "bulk-action-bar-action",
-      "data-variant": action.variant ?? "default",
-      disabled: off,
-      title: action.title,
-      onClick: action.onClick,
-      className: cn(
-        "border-0 bg-transparent outline-none transition-[background-color,box-shadow,color] motion-reduce:transition-none",
-        "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
-        off ? "cursor-not-allowed text-text-disabled" : danger ? "cursor-pointer text-[var(--error)] hover:bg-[var(--error-bg)]" : "cursor-pointer text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground"
-      ),
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        height: 30,
-        padding: "0 10px",
-        borderRadius: "var(--radius-md)",
-        fontFamily: "var(--font-sans)",
-        fontSize: 13,
-        fontWeight: 500,
-        whiteSpace: "nowrap"
-      },
-      children: [
-        Icon ? /* @__PURE__ */ jsx39(
-          Icon,
-          {
-            "aria-hidden": "true",
-            "data-slot": "bulk-action-bar-action-icon",
-            size: 16,
-            strokeWidth: 1.75
-          }
-        ) : null,
-        action.label
-      ]
-    }
-  );
-}
 function CardActionButton({ action }) {
   const Icon = action.icon;
   return /* @__PURE__ */ jsxs35(
@@ -8751,52 +8718,8 @@ function CardActionButton({ action }) {
     }
   );
 }
-function Divider() {
-  return /* @__PURE__ */ jsx39(
-    "span",
-    {
-      "aria-hidden": "true",
-      "data-slot": "bulk-action-bar-divider",
-      style: {
-        width: 1,
-        height: 18,
-        flexShrink: 0,
-        background: "var(--border-subtle)"
-      }
-    }
-  );
-}
-function ClearButton({ onClear }) {
-  return /* @__PURE__ */ jsx39(
-    "button",
-    {
-      type: "button",
-      "aria-label": "\uC120\uD0DD \uD574\uC81C",
-      "data-slot": "bulk-action-bar-clear",
-      onClick: onClear,
-      className: cn(
-        "cursor-pointer border-0 bg-transparent text-text-secondary outline-none",
-        "transition-[background-color,box-shadow,color] motion-reduce:transition-none",
-        "hover:bg-[var(--action-hover)] hover:text-foreground",
-        "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]"
-      ),
-      style: {
-        display: "inline-flex",
-        width: 32,
-        height: 32,
-        flexShrink: 0,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "var(--radius-md)"
-      },
-      children: /* @__PURE__ */ jsx39(X4, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
-    }
-  );
-}
 var CLEAR_CLEARANCE = 32;
-var INLINE_HEIGHT = 40;
-var HIT_AREA = 44;
-var HIT_INSET = 8;
+var IDLE_HEIGHT = 40;
 var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
 var floatingStyle = {
   position: "sticky",
@@ -8813,28 +8736,10 @@ var floatingStyle = {
   padding: "var(--space-2) var(--space-4) var(--space-3)",
   boxShadow: "var(--shadow-8)"
 };
-var inlineStyle = {
-  position: "sticky",
-  top: 0,
-  zIndex: "var(--z-sticky)",
-  display: "flex",
-  boxSizing: "border-box",
-  height: INLINE_HEIGHT,
-  alignItems: "center",
-  gap: "var(--space-2)",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--border)",
-  background: "var(--bg-surface)",
-  padding: "0 var(--space-1) 0 var(--space-3)",
-  boxShadow: "var(--shadow-2)",
-  fontFamily: "var(--font-sans)",
-  fontSize: 13,
-  fontVariantNumeric: "tabular-nums"
-};
 var idleLineStyle = {
   display: "flex",
   boxSizing: "border-box",
-  height: INLINE_HEIGHT,
+  height: IDLE_HEIGHT,
   overflow: "hidden",
   alignItems: "center",
   columnGap: "var(--space-3)",
@@ -8844,22 +8749,6 @@ var idleLineStyle = {
   fontVariantNumeric: "tabular-nums",
   color: "var(--text-secondary)"
 };
-var warnedInline = false;
-function warnInlineOnce() {
-  if (warnedInline || typeof process === "undefined" || process.env.NODE_ENV === "production") {
-    return;
-  }
-  warnedInline = true;
-  console.warn('BulkActionBar: placement="inline" is deprecated and removed in the next minor. Use "floating".');
-}
-var warnedTrailing = false;
-function warnTrailingOnce() {
-  if (warnedTrailing || typeof process === "undefined" || process.env.NODE_ENV === "production") {
-    return;
-  }
-  warnedTrailing = true;
-  console.warn("BulkActionBar: the floating card ignores `trailing`. Put edit-mode controls at the right end of the toolbar.");
-}
 var OFFSET_PROPERTY = "--olun-bulk-bar-offset";
 var LIFT_ZONE = 204;
 var cardOffsets = /* @__PURE__ */ new Map();
@@ -8963,104 +8852,31 @@ function useBottomOffset(card) {
     if (card && typeof ResizeObserver === "undefined") reportOffset(key, card);
   });
 }
-function useCompactSummary(slot, enabled) {
-  const [fullWidth, setFullWidth] = React36.useState(null);
-  const measure = React36.useCallback(() => {
-    if (!slot) return;
-    setFullWidth((prev) => {
-      if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
-      return slot.clientWidth >= prev ? null : prev;
-    });
-  }, [slot]);
-  useIsomorphicLayoutEffect2(() => {
-    if (enabled) measure();
-  });
-  React36.useEffect(() => {
-    if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(slot);
-    return () => observer.disconnect();
-  }, [enabled, slot, measure]);
-  return enabled && fullWidth !== null;
-}
 function BulkActionBar({
   count,
   actions,
   onClear,
   emptyHint,
-  placement = "floating",
+  // Removed props are dropped here so a spread or untyped caller never leaks them to the DOM.
+  placement: _placement,
+  compactSummary: _compactSummary,
+  trailing: _trailing,
   unit = "\uAC1C",
   summary,
-  compactSummary,
   idleContent,
-  trailing,
   className,
   style,
   ...props
 }) {
-  const inline = placement === "inline";
-  if (inline) warnInlineOnce();
-  const hasTrailing = trailing !== void 0 && trailing !== null;
-  if (!inline && hasTrailing) warnTrailingOnce();
-  const trailingSlot = inline && hasTrailing ? /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "bulk-action-bar-trailing",
-      style: {
-        display: "flex",
-        flexShrink: 0,
-        alignItems: "center",
-        gap: "var(--space-2)"
-      },
-      children: trailing
-    }
-  ) : null;
-  const [summaryElement, setSummaryElement] = React36.useState(null);
-  const compact = useCompactSummary(
-    summaryElement,
-    inline && compactSummary !== void 0 && compactSummary !== null
-  );
   const [card, setCard] = React36.useState(null);
   useBottomOffset(card);
-  if (count === 0 && idleContent !== void 0 && trailingSlot) {
-    return /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        "data-slot": "bulk-action-bar",
-        "data-placement": placement,
-        "data-state": "idle",
-        className,
-        style: { ...idleLineStyle, overflow: "visible", ...style },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx39(
-            "div",
-            {
-              role: "status",
-              "data-slot": "bulk-action-bar-idle",
-              style: {
-                display: "flex",
-                flex: "1 1 auto",
-                minWidth: 0,
-                alignItems: "center",
-                columnGap: "var(--space-3)",
-                overflow: "hidden"
-              },
-              children: idleContent
-            }
-          ),
-          trailingSlot
-        ]
-      }
-    );
-  }
   if (count === 0 && idleContent !== void 0) {
     return /* @__PURE__ */ jsx39(
       "div",
       {
         role: "status",
         "data-slot": "bulk-action-bar",
-        "data-placement": placement,
+        "data-placement": "floating",
         "data-state": "idle",
         className,
         style: { ...idleLineStyle, ...style },
@@ -9076,38 +8892,25 @@ function BulkActionBar({
     "span",
     {
       "data-slot": "bulk-action-bar-count",
-      style: inline ? {
-        paddingRight: "var(--space-1)",
+      style: {
+        display: "flex",
+        minHeight: 32,
+        alignItems: "center",
+        paddingRight: CLEAR_CLEARANCE,
         fontFamily: "var(--font-sans)",
         fontSize: 13,
-        fontWeight: 600,
+        fontWeight: 500,
         fontVariantNumeric: "tabular-nums",
         color: "var(--text-primary)",
-        whiteSpace: "nowrap"
-      } : (
-        // First row, 32px like the ✕ beside it; the right padding keeps text clear of it,
-        // and a long unbroken unit or hint breaks instead of running under it.
-        {
-          display: "flex",
-          minHeight: 32,
-          alignItems: "center",
-          paddingRight: CLEAR_CLEARANCE,
-          fontFamily: "var(--font-sans)",
-          fontSize: 13,
-          fontWeight: 500,
-          fontVariantNumeric: "tabular-nums",
-          color: "var(--text-primary)",
-          wordBreak: "keep-all",
-          overflowWrap: "anywhere"
-        }
-      ),
+        wordBreak: "keep-all",
+        overflowWrap: "anywhere"
+      },
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
   const summarySlot = summary !== void 0 && summary !== null ? /* @__PURE__ */ jsx39(
     "span",
     {
-      ref: setSummaryElement,
       "data-slot": "bulk-action-bar-summary",
       style: {
         display: "flex",
@@ -9117,98 +8920,15 @@ function BulkActionBar({
         fontFamily: "var(--font-sans)",
         fontSize: 13,
         color: "var(--text-secondary)",
-        ...inline ? (
-          // inline-size containment: the summary never widens the band's parent. The
-          // slot clips text, so it is as tall as an IconButton's hit area (overhanging
-          // the 40px band) and has that inset as its left gutter: a compact IconButton
-          // keeps its full 44px target. The right gutter stays 3px (focus ring) so
-          // clipped text keeps clear of the controls.
-          {
-            flex: "1 1 0",
-            alignSelf: "center",
-            height: HIT_AREA,
-            margin: `0 -3px 0 -${HIT_INSET}px`,
-            padding: `0 3px 0 ${HIT_INSET}px`,
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            contain: "inline-size"
-          }
-        ) : (
-          // Its own row at the card's full inner width; wraps, never clips.
-          { flexWrap: "wrap", lineHeight: 1.5, wordBreak: "keep-all", overflowWrap: "anywhere" }
-        )
+        // Its own row at the card's full inner width; wraps, never clips.
+        flexWrap: "wrap",
+        lineHeight: 1.5,
+        wordBreak: "keep-all",
+        overflowWrap: "anywhere"
       },
-      children: compact ? compactSummary : summary
+      children: summary
     }
   ) : null;
-  if (inline) {
-    const actionGroup = /* @__PURE__ */ jsx39(
-      "div",
-      {
-        "data-slot": "bulk-action-bar-actions",
-        style: {
-          display: "flex",
-          minWidth: 0,
-          flexWrap: "nowrap",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          gap: 2
-        },
-        children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
-      }
-    );
-    return /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        role: "toolbar",
-        "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
-        "data-slot": "bulk-action-bar",
-        "data-placement": "inline",
-        className,
-        style: { ...inlineStyle, ...style },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs35(
-            "div",
-            {
-              role: "status",
-              "data-slot": "bulk-action-bar-state",
-              style: {
-                display: "flex",
-                flex: "1 1 auto",
-                minWidth: 0,
-                alignItems: "center",
-                columnGap: "var(--space-3)"
-              },
-              children: [
-                countLabel,
-                summarySlot
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs35(
-            "div",
-            {
-              "data-slot": "bulk-action-bar-controls",
-              style: {
-                display: "flex",
-                marginLeft: "auto",
-                alignItems: "center",
-                gap: "var(--space-1)"
-              },
-              children: [
-                count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
-                actionGroup,
-                /* @__PURE__ */ jsx39(Divider, {}),
-                /* @__PURE__ */ jsx39(ClearButton, { onClear })
-              ]
-            }
-          ),
-          trailingSlot
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs35(
     "div",
     {
@@ -10607,14 +10327,15 @@ var modeToggleVariants = cva19(
 var modeToggleItemVariants = cva19(
   [
     "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-1)]",
-    "rounded-[calc(var(--radius-md)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
+    "rounded-[calc(var(--radius-md)_-_2px)] border border-transparent 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]",
+    "text-text-secondary transition-[background-color,border-color,color,box-shadow]",
     "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]:border-[var(--text-tertiary)] data-[state=active]:bg-[var(--fill-on-inset)]",
+    "data-[state=active]:font-semibold",
     "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(" ")

package/package.json

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