sparkle-design 1.0.7 → 2.0.0-beta.0

package/dist/components/ui/button/index.js

@@ -24,14 +24,16 @@ import { Spinner } from "../../../components/ui/spinner/index.js";
 const buttonVariants = cva([
     // `relative` is required because we absolutely-position the loading spinner at the center.
     "relative inline-flex items-center justify-center gap-0.5 whitespace-nowrap rounded-action transition-colors",
-    "cursor-pointer disabled:cursor-not-allowed",
+    "cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
     "shrink-0 outline-none",
-    "focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2",
+    "focus-visible:ring-2 focus-visible:ring-border-ring focus-visible:ring-offset-2",
 ].join(" "), {
     variants: {
         variant: {
-            solid: "border shadow-raise",
-            outline: "border shadow-raise",
+            // solid の 1px 枠線は Figma の刷新で削除された（shadow も base = 影なし）
+            // en: The 1px border on solid was removed in the Figma refresh (shadow is base = none).
+            solid: "shadow-base",
+            outline: "border shadow-base",
             ghost: "",
         },
         size: {
@@ -56,22 +58,20 @@ const buttonVariants = cva([
             theme: "primary",
             isLoading: false,
             className: [
-                "bg-primary-500",
-                "text-white",
-                "border-primary-600",
-                "hover:bg-primary-600",
-                "hover:border-primary-700",
-                "active:bg-primary-700",
-                "active:border-primary-800",
-                "disabled:bg-primary-200",
-                "disabled:border-none",
+                "bg-surface-primary-high-enabled",
+                "text-text-inverse",
+                "hover:bg-surface-primary-high-hover",
+                "active:bg-surface-primary-high-active",
+                "disabled:bg-surface-primary-high-disabled aria-disabled:bg-surface-primary-high-disabled",
             ].join(" "),
         },
         {
+            // ローディング中に見えるのはスピナー（currentColor 継承）なので object トークンで着色する
+            // en: Only the spinner (inherits currentColor) is visible while loading, so color it with the object token.
             variant: "solid",
             theme: "primary",
             isLoading: true,
-            className: "disabled:bg-primary-500 disabled:text-white disabled:border-primary-600",
+            className: "disabled:bg-surface-primary-high-enabled aria-disabled:bg-surface-primary-high-enabled disabled:text-object-inverse aria-disabled:text-object-inverse",
         },
         // solid neutral
         {
@@ -79,22 +79,18 @@ const buttonVariants = cva([
             theme: "neutral",
             isLoading: false,
             className: [
-                "bg-[var(--color-black-alpha-600)]",
-                "text-white",
-                "border-neutral-600",
-                "hover:bg-[var(--color-black-alpha-700)]",
-                "hover:border-neutral-700",
-                "active:bg-[var(--color-black-alpha-800)]",
-                "active:border-neutral-800",
-                "disabled:bg-[var(--color-black-alpha-200)]",
-                "disabled:border-none",
+                "bg-surface-neutral-high-enabled",
+                "text-text-inverse",
+                "hover:bg-surface-neutral-high-hover",
+                "active:bg-surface-neutral-high-active",
+                "disabled:bg-surface-neutral-high-disabled aria-disabled:bg-surface-neutral-high-disabled",
             ].join(" "),
         },
         {
             variant: "solid",
             theme: "neutral",
             isLoading: true,
-            className: "disabled:bg-[var(--color-black-alpha-600)] disabled:text-white disabled:border-neutral-600",
+            className: "disabled:bg-surface-neutral-high-enabled aria-disabled:bg-surface-neutral-high-enabled disabled:text-object-inverse aria-disabled:text-object-inverse",
         },
         // solid negative
         {
@@ -102,22 +98,18 @@ const buttonVariants = cva([
             theme: "negative",
             isLoading: false,
             className: [
-                "bg-negative-500",
-                "text-white",
-                "border-negative-600",
-                "hover:bg-negative-600",
-                "hover:border-negative-700",
-                "active:bg-negative-700",
-                "active:border-negative-800",
-                "disabled:bg-negative-200",
-                "disabled:border-none",
+                "bg-surface-negative-high-enabled",
+                "text-text-inverse",
+                "hover:bg-surface-negative-high-hover",
+                "active:bg-surface-negative-high-active",
+                "disabled:bg-surface-negative-high-disabled aria-disabled:bg-surface-negative-high-disabled",
             ].join(" "),
         },
         {
             variant: "solid",
             theme: "negative",
             isLoading: true,
-            className: "disabled:bg-negative-500 disabled:text-white disabled:border-negative-600",
+            className: "disabled:bg-surface-negative-high-enabled aria-disabled:bg-surface-negative-high-enabled disabled:text-object-inverse aria-disabled:text-object-inverse",
         },
         // outline primary
         {
@@ -125,23 +117,23 @@ const buttonVariants = cva([
             theme: "primary",
             isLoading: false,
             className: [
-                "bg-white",
-                "text-primary-500",
-                "border-primary-300",
-                "hover:bg-primary-50",
-                "active:bg-primary-100",
-                "active:border-primary-400",
-                "active:text-primary-600",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:border-primary-100",
-                "disabled:text-primary-200",
+                "bg-surface-base-0",
+                "text-text-primary-enabled",
+                "border-border-primary-high",
+                "hover:bg-surface-primary-low-hover",
+                "hover:text-text-primary-hover",
+                "active:bg-surface-primary-low-active",
+                "active:text-text-primary-active",
+                "disabled:bg-surface-primary-low-disabled aria-disabled:bg-surface-primary-low-disabled",
+                "disabled:border-border-primary-low aria-disabled:border-border-primary-low",
+                "disabled:text-text-primary-disabled aria-disabled:text-text-primary-disabled",
             ].join(" "),
         },
         {
             variant: "outline",
             theme: "primary",
             isLoading: true,
-            className: "disabled:white disabled:text-primary-500 disabled:border-primary-300",
+            className: "disabled:bg-surface-base-0 aria-disabled:bg-surface-base-0 disabled:text-object-primary-enabled aria-disabled:text-object-primary-enabled disabled:border-border-primary-high aria-disabled:border-border-primary-high",
         },
         // outline neutral
         {
@@ -149,22 +141,23 @@ const buttonVariants = cva([
             theme: "neutral",
             isLoading: false,
             className: [
-                "bg-white",
-                "text-neutral-700",
-                "border-neutral-300",
-                "hover:bg-[var(--color-black-alpha-50)]",
-                "active:bg-[var(--color-black-alpha-100)]",
-                "active:border-neutral-300",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:border-neutral-100",
-                "disabled:text-neutral-200",
+                "bg-surface-base-0",
+                "text-text-neutral-middle",
+                "border-border-neutral-high",
+                "hover:bg-surface-neutral-low-hover",
+                "hover:text-text-neutral-high",
+                "active:bg-surface-neutral-low-active",
+                "active:text-text-neutral-high",
+                "disabled:bg-surface-neutral-low-disabled aria-disabled:bg-surface-neutral-low-disabled",
+                "disabled:border-border-neutral-low aria-disabled:border-border-neutral-low",
+                "disabled:text-text-neutral-disabled aria-disabled:text-text-neutral-disabled",
             ].join(" "),
         },
         {
             variant: "outline",
             theme: "neutral",
             isLoading: true,
-            className: "disabled:bg-white disabled:text-neutral-700 disabled:border-neutral-300",
+            className: "disabled:bg-surface-base-0 aria-disabled:bg-surface-base-0 disabled:text-object-neutral-middle aria-disabled:text-object-neutral-middle disabled:border-border-neutral-high aria-disabled:border-border-neutral-high",
         },
         // outline negative
         {
@@ -172,23 +165,23 @@ const buttonVariants = cva([
             theme: "negative",
             isLoading: false,
             className: [
-                "bg-white",
-                "text-negative-500",
-                "border-negative-300",
-                "hover:bg-negative-50",
-                "active:bg-negative-100",
-                "active:border-negative-400",
-                "active:text-negative-600",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:border-negative-100",
-                "disabled:text-negative-200",
+                "bg-surface-base-0",
+                "text-text-negative-enabled",
+                "border-border-negative-high",
+                "hover:bg-surface-negative-low-hover",
+                "hover:text-text-negative-hover",
+                "active:bg-surface-negative-low-active",
+                "active:text-text-negative-active",
+                "disabled:bg-surface-negative-low-disabled aria-disabled:bg-surface-negative-low-disabled",
+                "disabled:border-border-negative-low aria-disabled:border-border-negative-low",
+                "disabled:text-text-negative-disabled aria-disabled:text-text-negative-disabled",
             ].join(" "),
         },
         {
             variant: "outline",
             theme: "negative",
             isLoading: true,
-            className: "disabled:bg-white disabled:text-negative-500 disabled:border-negative-300",
+            className: "disabled:bg-surface-base-0 aria-disabled:bg-surface-base-0 disabled:text-object-negative-enabled aria-disabled:text-object-negative-enabled disabled:border-border-negative-high aria-disabled:border-border-negative-high",
         },
         // ghost primary
         {
@@ -196,19 +189,20 @@ const buttonVariants = cva([
             theme: "primary",
             isLoading: false,
             className: [
-                "text-primary-500",
-                "hover:bg-primary-50",
-                "active:bg-primary-100",
-                "active:text-primary-600",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:text-primary-200",
+                "text-text-primary-enabled",
+                "hover:bg-surface-primary-low-hover",
+                "hover:text-text-primary-hover",
+                "active:bg-surface-primary-low-active",
+                "active:text-text-primary-active",
+                "disabled:bg-surface-primary-low-disabled aria-disabled:bg-surface-primary-low-disabled",
+                "disabled:text-text-primary-disabled aria-disabled:text-text-primary-disabled",
             ].join(" "),
         },
         {
             variant: "ghost",
             theme: "primary",
             isLoading: true,
-            className: "disabled:text-primary-500",
+            className: "disabled:text-object-primary-enabled aria-disabled:text-object-primary-enabled",
         },
         // ghost neutral
         {
@@ -216,18 +210,20 @@ const buttonVariants = cva([
             theme: "neutral",
             isLoading: false,
             className: [
-                "text-neutral-700",
-                "hover:bg-[var(--color-black-alpha-50)]",
-                "active:bg-[var(--color-black-alpha-100)]",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:text-neutral-200",
+                "text-text-neutral-middle",
+                "hover:bg-surface-neutral-low-hover",
+                "hover:text-text-neutral-high",
+                "active:bg-surface-neutral-low-active",
+                "active:text-text-neutral-high",
+                "disabled:bg-surface-neutral-low-disabled aria-disabled:bg-surface-neutral-low-disabled",
+                "disabled:text-text-neutral-disabled aria-disabled:text-text-neutral-disabled",
             ].join(" "),
         },
         {
             variant: "ghost",
             theme: "neutral",
             isLoading: true,
-            className: "disabled:text-neutral-700",
+            className: "disabled:text-object-neutral-middle aria-disabled:text-object-neutral-middle",
         },
         // ghost negative
         {
@@ -235,19 +231,20 @@ const buttonVariants = cva([
             theme: "negative",
             isLoading: false,
             className: [
-                "text-negative-500",
-                "hover:bg-negative-50",
-                "active:bg-negative-100",
-                "active:text-negative-600",
-                "disabled:bg-[var(--color-white-alpha-700)]",
-                "disabled:text-negative-200",
+                "text-text-negative-enabled",
+                "hover:bg-surface-negative-low-hover",
+                "hover:text-text-negative-hover",
+                "active:bg-surface-negative-low-active",
+                "active:text-text-negative-active",
+                "disabled:bg-surface-negative-low-disabled aria-disabled:bg-surface-negative-low-disabled",
+                "disabled:text-text-negative-disabled aria-disabled:text-text-negative-disabled",
             ].join(" "),
         },
         {
             variant: "ghost",
             theme: "negative",
             isLoading: true,
-            className: "disabled:text-negative-500",
+            className: "disabled:text-object-negative-enabled aria-disabled:text-object-negative-enabled",
         },
     ],
     defaultVariants: {
@@ -276,6 +273,10 @@ const buttonVariants = cva([
  *   en: Use `IconButton` for icon-only buttons.
  * - `asChild` 使用時は `prefixIcon` / `suffixIcon` / `isLoading` が反映されません。必要ならスロット先でアイコンやローディング表現を構成してください。
  *   en: In `asChild` mode, `prefixIcon`, `suffixIcon`, and `isLoading` are ignored. Render icons and loading states inside the slotted child when needed.
+ * - `asChild` で差し込んだ要素が指定した props（`type` や `disabled` など）は、Slot のマージで
+ *   コンポーネント側の値より優先されます。
+ *   en: Props set on the slotted element itself (such as `type` or `disabled`) win over the
+ *   component's own values through Slot's prop merging.
  *
  * ```tsx
  * // ✅ Correct
@@ -298,21 +299,69 @@ const buttonVariants = cva([
  *   <Link href="/items/new">新規作成</Link>
  * </Button>
  * ```
-
+ *
  * **アクセシビリティ / Accessibility**
  *
  * - ボタンにはアクセシブルネームが必要です（通常は `children` のテキスト）。
  *   アイコンのみの場合は `aria-label` / `aria-labelledby` を付与するか、可能なら `IconButton` を使用してください。
  * - `isLoading` の場合でもアクセシブルネームは維持されます。
- * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/disabled/キーボード操作）を満たすようにしてください。
+ * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/キーボード操作）を満たすようにしてください。
+ * - `asChild` で `<a>` など button 以外の要素を差し込んで無効化した場合、`aria-disabled` の付与、
+ *   click / auxclick / Enter・Space の抑止、`aria-disabled:` プレフィックスによる無効時の配色まで
+ *   このコンポーネントが行います（`data-disabled="true"` も利用側のスタイルフックとして出力）。
+ *   差し込み先が native の `<button>` の場合は `disabled` 属性がそのまま渡ります。
+ * - `type` / `form` / `value` など button 専用の props は、差し込み先が native の `<button>` の
+ *   ときだけ転送されます。それ以外の要素では不正な属性になるため落とし、dev ビルドで警告します。
+ *   差し込み先が内部で `<button>` を描画するコンポーネントの場合のみ、その要素側に直接指定してください
+ *   （Slot のマージで子の指定が優先されます）。`<a>` 等では属性自体が機能しないため指定不要です。
+ *   en: Button-only props such as `type`, `form`, and `value` are forwarded only when the slot is a
+ *   native `<button>`; on other elements they would be invalid attributes, so they are dropped with
+ *   a dev warning. Set them on the slotted element only when that component renders a `<button>`
+ *   internally (child props win in Slot's merge) — on `<a>` and friends the attributes do nothing.
+ * - `aria-disabled` を直接渡した場合も、無効時の配色が当たり操作が抑止されます（native の
+ *   `disabled` 属性は付けないため、フォーカスは残ります）。無効化には基本的に `isDisabled` を
+ *   使ってください。
+ *   en: Passing `aria-disabled` directly also applies the disabled colors and blocks activation
+ *   (the native `disabled` attribute is not set, so the element stays focusable). Prefer
+ *   `isDisabled` for disabling.
+ *   なお `aria-disabled` の要素は既定でフォーカス可能なままです。無効な項目の存在と理由を
+ *   支援技術の利用者に伝えられるため通常はそのままで構いません。タブ順から外す必要がある場合のみ
+ *   差し込む要素側で `tabIndex={-1}` を指定してください。
+ *   en: When disabled with `asChild` and a non-button element such as `<a>`, this component sets
+ *   `aria-disabled`, blocks click / auxclick / Enter / Space, and applies the disabled colors via
+ *   `aria-disabled:`-prefixed utilities (`data-disabled="true"` is also emitted as a styling hook).
+ *   A slotted native `<button>` receives the real `disabled` attribute instead.
+ * - native の `<button>` かどうかは差し込んだ要素そのもので判定するため、内部で `<button>` を
+ *   描画するカスタムコンポーネントを渡した場合は非 button として扱われます。
+ *   また無効時に抑止できるのは click / auxclick / Enter・Space までで、コンテキストメニューの
+ *   「新しいタブで開く」は止められません。確実に遷移させたくない場合は差し込む要素側で
+ *   `href` を外してください。
+ *   en: Whether the slot is a native `<button>` is decided from the slotted element itself, so a
+ *   custom component that renders a `<button>` internally is treated as a non-button. Also, only
+ *   click / auxclick / Enter / Space can be blocked while disabled — "open in new tab" from the
+ *   context menu cannot. Drop `href` on the slotted element when navigation must not happen.
+ *   An `aria-disabled` element stays focusable by design, which is usually what you want; set
+ *   `tabIndex={-1}` on the slotted element only when it must leave the tab order.
  *
  * @param {ButtonProps} props
  */
-const Button = React.forwardRef(function Button(_a, ref) {
-    var { className, variant, size, theme, isLoading = false, isDisabled = false, asChild = false, disabled, prefixIcon, suffixIcon, children } = _a, props = __rest(_a, ["className", "variant", "size", "theme", "isLoading", "isDisabled", "asChild", "disabled", "prefixIcon", "suffixIcon", "children"]);
+function Button(_a) {
+    var { className, variant, size, theme, isLoading = false, isDisabled = false, asChild = false, disabled, prefixIcon, suffixIcon, ref, children } = _a, props = __rest(_a, ["className", "variant", "size", "theme", "isLoading", "isDisabled", "asChild", "disabled", "prefixIcon", "suffixIcon", "ref", "children"]);
     const Comp = asChild ? SlotPrimitive.Slot : "button";
     // disabled状態の管理（isDisabled、disabled、またはisLoadingがtrueの場合）
     const isButtonDisabled = isLoading || isDisabled || disabled;
+    // 利用者が aria-disabled を直接指定した場合も、見た目に合わせて操作を抑止する。
+    // native の disabled 属性は付けないため、フォーカスは残る（soft disabled）
+    // en: A caller-provided aria-disabled also blocks activation so the behavior matches the look.
+    // The native `disabled` attribute is not set, so the element stays focusable (soft disabled).
+    const isSoftDisabled = props["aria-disabled"] === true || props["aria-disabled"] === "true";
+    const isActivationBlocked = Boolean(isButtonDisabled) || isSoftDisabled;
+    // asChild で差し込まれたのが native の <button> なら、button 専用の props を渡してよい。
+    // Slot は子の props を優先するため、差し込み側が明示した type はそのまま尊重される
+    // en: When the slotted element is a native <button>, button-only props can be forwarded.
+    // Slot gives the child's props precedence, so an explicit `type` on the child still wins.
+    const isSlottedNativeButton = asChild && React.isValidElement(children) && children.type === "button";
+    const canUseButtonProps = !asChild || isSlottedNativeButton;
     // アイコンのサイズをボタンサイズに合わせて設定
     const getIconSize = () => {
         switch (size) {
@@ -327,14 +376,52 @@ const Button = React.forwardRef(function Button(_a, ref) {
     const hasAccessibleNameProp = ("aria-label" in props && Boolean(props["aria-label"])) ||
         ("aria-labelledby" in props && Boolean(props["aria-labelledby"]));
     const hasChildren = React.Children.count(children) > 0;
+    // asChild では children が差し込む要素そのものなので、その要素のラベル / テキストを見る
+    // en: With asChild the children are the slotted element itself, so inspect its label / text.
+    const slottedChildProps = React.isValidElement(children)
+        ? children.props
+        : undefined;
+    const hasAccessibleName = asChild
+        ? hasAccessibleNameProp ||
+            Boolean((slottedChildProps === null || slottedChildProps === void 0 ? void 0 : slottedChildProps["aria-label"]) ||
+                (slottedChildProps === null || slottedChildProps === void 0 ? void 0 : slottedChildProps["aria-labelledby"])) ||
+            React.Children.count(slottedChildProps === null || slottedChildProps === void 0 ? void 0 : slottedChildProps.children) > 0
+        : hasChildren || hasAccessibleNameProp;
     if (process.env.NODE_ENV !== "production") {
-        if (!hasChildren && !hasAccessibleNameProp) {
+        if (!hasAccessibleName) {
             // Icon-only button should use IconButton, or provide aria-label/labelledby.
             // Keep it as a warning (not an exception) to avoid breaking existing usage.
             console.warn("[Button] Accessible name is missing. Provide children text, or set aria-label/aria-labelledby. For icon-only actions, consider using IconButton.");
         }
-        if (asChild && isButtonDisabled) {
-            console.warn("[Button] asChild + disabled/loading: the child element must handle disabled semantics (e.g., aria-disabled + preventing activation). Ensure the slotted element is button-like.");
+        // asChild で単一要素以外を渡すと、Slot が何も描画しない / React が例外を投げる
+        // en: With asChild, anything other than a single element makes Slot render nothing or throw.
+        if (asChild && !React.isValidElement(children)) {
+            console.warn("[Button] asChild には単一の React 要素を children として渡してください。" +
+                "要素以外では何も描画されず、複数要素では実行時エラーになります。" +
+                " / asChild requires a single React element child: anything else renders nothing or throws.");
+        }
+        // button 専用の props は button 以外の差し込み先には渡さない（無効な属性になるため）
+        // en: Button-only props are not forwarded to non-button slots: they would be invalid attributes.
+        if (asChild && !canUseButtonProps) {
+            const droppedProps = [
+                "type",
+                "form",
+                "formAction",
+                "formEncType",
+                "formMethod",
+                "formNoValidate",
+                "formTarget",
+                "value",
+                "popoverTarget",
+                "popoverTargetAction",
+            ].filter(name => props[name] !== undefined && props[name] !== false);
+            if (droppedProps.length > 0) {
+                console.warn(`[Button] asChild で button 以外の要素を差し込む場合、${droppedProps.join(" / ")} は無視されます。` +
+                    "これらは button / input 専用の属性です。差し込み先が内部で <button> を描画するコンポーネントなら、" +
+                    "その要素側に直接指定してください（<a> 等では属性自体が機能しません）。" +
+                    ` / In asChild mode with a non-button element, ${droppedProps.join(" / ")} are ignored: they only apply to button / input. ` +
+                    "If the slotted component renders a <button> internally, set them on that element instead (they do nothing on <a> and friends).");
+            }
         }
         if (asChild && (prefixIcon || suffixIcon || isLoading)) {
             console.warn("[Button] asChild mode does not support prefixIcon, suffixIcon, or isLoading. These props will be ignored.");
@@ -343,26 +430,93 @@ const Button = React.forwardRef(function Button(_a, ref) {
             console.warn("[Button] onMouseDown/onPointerDown/onTouchStart are deprecated for accessibility reasons (WCAG 2.5.2 Pointer Cancellation). Prefer onClick (activation on release).");
         }
     }
-    const { onClick, onKeyDown } = props, restProps = __rest(props, ["onClick", "onKeyDown"]);
-    const handleClick = event => {
-        if (isButtonDisabled) {
+    const { onClick, onKeyDown, onClickCapture, onKeyDownCapture, onAuxClickCapture, type, form, formAction, formEncType, formMethod, formNoValidate, formTarget, value, popoverTarget, popoverTargetAction, "aria-disabled": ariaDisabled } = props, restProps = __rest(props, ["onClick", "onKeyDown", "onClickCapture", "onKeyDownCapture", "onAuxClickCapture", "type", "form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "value", "popoverTarget", "popoverTargetAction", "aria-disabled"]);
+    // button 専用の props は、差し込み先が native の <button> のときだけ渡す。
+    // <a> 等に渡すと不正な属性になるため。
+    // `name` は <a> でも受け付けられる（HTML Living Standard 上は obsolete だが UA が互換のため
+    // サポートし続けている）ので、ここでは落とさず転送したままにしている。
+    // React の型（ButtonHTMLAttributes）に button 専用 props が増えた場合はこのリストも追随すること
+    // en: Button-only props are forwarded only when the slot is a native <button>; on elements like
+    // <a> they would be invalid attributes. `name` is deliberately kept: <a name> is obsolete in the
+    // HTML Living Standard but still accepted by UAs for compatibility. Keep this list in sync when
+    // React's ButtonHTMLAttributes gains new button-only props.
+    const buttonOnlyProps = canUseButtonProps
+        ? {
+            type: type || "button",
+            form,
+            formAction,
+            formEncType,
+            formMethod,
+            formNoValidate,
+            formTarget,
+            value,
+            popoverTarget,
+            popoverTargetAction,
+        }
+        : {};
+    // 無効時のガードは capture フェーズで行う。Radix Slot は「差し込んだ要素自身のハンドラ →
+    // Slot 側のハンドラ」の順で合成するため、bubble フェーズのガードでは子のハンドラを止められない
+    // en: Guard in the capture phase. Radix Slot composes handlers as "the slotted element's own
+    // handler first, then the slot's", so a bubble-phase guard cannot stop the child's handler.
+    const handleClickCapture = event => {
+        if (isActivationBlocked) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onClickCapture === null || onClickCapture === void 0 ? void 0 : onClickCapture(event);
     };
-    const handleKeyDown = event => {
-        if (isButtonDisabled) {
-            // Prevent activation keys when used with asChild (e.g., <a>).
+    const handleKeyDownCapture = event => {
+        if (isActivationBlocked) {
+            // asChild で <a> 等を差し込んだ場合に Enter / Space での実行を止める。
+            // それ以外のキーは伝播を止めないが、無効時は利用者の onKeyDown も呼ばない
+            // en: Other keys keep propagating, but the caller's onKeyDown is not invoked
+            // while disabled.
             if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
                 event.stopPropagation();
             }
             return;
         }
+        onKeyDownCapture === null || onKeyDownCapture === void 0 ? void 0 : onKeyDownCapture(event);
+    };
+    // 中クリックは click ではなく auxclick として飛ぶため、別途止める必要がある
+    // en: A middle click fires `auxclick`, not `click`, so it needs its own guard.
+    const handleAuxClickCapture = event => {
+        if (isActivationBlocked) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onAuxClickCapture === null || onAuxClickCapture === void 0 ? void 0 : onAuxClickCapture(event);
+    };
+    // capture 側で stopPropagation するため、無効時にこの bubble 側ハンドラへは到達しない。
+    // capture が本体・こちらは保険として残している
+    // en: The capture guard stops propagation, so this bubble handler is not reached while
+    // disabled. The capture phase is the real guard; this one is a safety net.
+    const handleClick = event => {
+        if (isActivationBlocked) {
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleKeyDown = event => {
+        if (isActivationBlocked) {
+            return;
+        }
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     };
+    // Slot は「差し込んだ要素自身のハンドラ → Slot のハンドラ」の順で合成するため、
+    // 無効時は子側の capture ハンドラを外してガードを確実に先に効かせる。
+    // 同様に子が明示した disabled も、無効時はコンポーネント側の状態を優先する
+    // en: Slot composes "the slotted element's own handler first, then the slot's", so while
+    // disabled we strip the child's capture handlers to keep the guard authoritative. The
+    // component's disabled state also overrides a `disabled` set on the child.
+    const slottedChildren = asChild && isActivationBlocked && React.isValidElement(children)
+        ? React.cloneElement(children, Object.assign({ onClickCapture: undefined, onAuxClickCapture: undefined, onKeyDownCapture: undefined }, (canUseButtonProps && isButtonDisabled
+            ? { disabled: true }
+            : {})))
+        : children;
     return (_jsx(Comp
     // asChild ケースで <a> 等を受け入れるため公開 API は HTMLElement で広く受けるが、
     // 内部の Comp は <button> 固定の union が含まれるためここで narrow する。
@@ -371,13 +525,13 @@ const Button = React.forwardRef(function Button(_a, ref) {
         // asChild ケースで <a> 等を受け入れるため公開 API は HTMLElement で広く受けるが、
         // 内部の Comp は <button> 固定の union が含まれるためここで narrow する。
         // en: Public ref is HTMLElement (covers asChild targets); inner Comp's button branch needs narrowing.
-        ref: ref, "data-slot": "button", "aria-busy": isLoading || undefined, "aria-disabled": asChild && isButtonDisabled ? true : undefined, "data-disabled": asChild && isButtonDisabled ? "true" : undefined, disabled: asChild ? undefined : isButtonDisabled, className: cn(buttonVariants({
+        ref: ref }, buttonOnlyProps, { "data-slot": "button", "aria-busy": isLoading || undefined, "aria-disabled": !canUseButtonProps && isButtonDisabled ? true : ariaDisabled, "data-disabled": asChild && isButtonDisabled ? "true" : undefined, disabled: canUseButtonProps ? isButtonDisabled : undefined, className: cn(buttonVariants({
             variant,
             size,
             theme,
             isLoading,
             className,
-        })), type: asChild ? undefined : props.type || "button", onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: asChild ? (children) : (_jsxs(_Fragment, { children: [prefixIcon && (_jsx(Icon, { icon: prefixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) })), isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex", children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) }), _jsx("span", { className: "opacity-0", children: children })] })) : (_jsx("span", { className: "px-1", children: children })), suffixIcon && (_jsx(Icon, { icon: suffixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) }))] })) })));
-});
+        })), onClickCapture: handleClickCapture, onAuxClickCapture: handleAuxClickCapture, onKeyDownCapture: handleKeyDownCapture, onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: asChild ? (slottedChildren) : (_jsxs(_Fragment, { children: [prefixIcon && (_jsx(Icon, { icon: prefixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) })), isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex", children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) }), _jsx("span", { className: "opacity-0", children: children })] })) : (_jsx("span", { className: "px-1", children: children })), suffixIcon && (_jsx(Icon, { icon: suffixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) }))] })) })));
+}
 Button.displayName = "Button";
 export { Button, buttonVariants };