@cakejp/design-system 0.20.0 → 0.21.0

package/dist/components/foundations/sheet.js

@@ -1,27 +1,27 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { XIcon as h } from "lucide-react";
+import { XIcon as p } from "lucide-react";
 import { Dialog as a } from "radix-ui";
 import { cn as r } from "../../lib/utils.js";
-function y({ ...t }) {
+function N({ ...t }) {
   return /* @__PURE__ */ e(a.Root, { "data-slot": "sheet", ...t });
 }
-function N({
+function C({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Trigger, { "data-slot": "sheet-trigger", ...t });
 }
-function w({
+function D({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Close, { "data-slot": "sheet-close", ...t });
 }
-function m({
+function g({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Portal, { "data-slot": "sheet-portal", ...t });
 }
-function p({
+function x({
   className: t,
   ...o
 }) {
@@ -37,41 +37,49 @@ function p({
     }
   );
 }
-function D({
+const d = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-[576px]",
+  lg: "sm:max-w-[768px]"
+};
+function T({
   className: t,
   children: o,
-  side: n = "right",
-  showCloseButton: d = !0,
+  side: s = "right",
+  size: u = "sm",
+  showCloseButton: c = !0,
   autoFocus: l = !0,
-  onOpenAutoFocus: u,
-  onCloseAutoFocus: c,
-  ...f
+  onOpenAutoFocus: m,
+  onCloseAutoFocus: f,
+  ...h
 }) {
-  return /* @__PURE__ */ i(m, { children: [
-    /* @__PURE__ */ e(p, {}),
+  return /* @__PURE__ */ i(g, { children: [
+    /* @__PURE__ */ e(x, {}),
     /* @__PURE__ */ i(
       a.Content,
       {
         "data-slot": "sheet-content",
-        onOpenAutoFocus: (s) => {
-          l || s.preventDefault(), u?.(s);
+        onOpenAutoFocus: (n) => {
+          l || n.preventDefault(), m?.(n);
         },
-        onCloseAutoFocus: (s) => {
-          l || s.preventDefault(), c?.(s);
+        onCloseAutoFocus: (n) => {
+          l || n.preventDefault(), f?.(n);
         },
         className: r(
           "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
-          n === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          n === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          n === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          n === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          s === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+          s === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+          s === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          s === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          // 型に無い size（AlertDialog の "default" と取り違えた JSX など）でも幅の上限を消さず、既定の sm にする
+          (s === "right" || s === "left") && (d[u] ?? d.sm),
           t
         ),
-        ...f,
+        ...h,
         children: [
           o,
-          d && /* @__PURE__ */ i(a.Close, { className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ e(h, { className: "size-5" }),
+          c && /* @__PURE__ */ i(a.Close, { className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ e(p, { className: "size-5" }),
             /* @__PURE__ */ e("span", { className: "sr-only", children: "閉じる" })
           ] })
         ]
@@ -79,7 +87,7 @@ function D({
     )
   ] });
 }
-function T({ className: t, ...o }) {
+function z({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -89,7 +97,7 @@ function T({ className: t, ...o }) {
     }
   );
 }
-function C({ className: t, ...o }) {
+function E({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -99,7 +107,7 @@ function C({ className: t, ...o }) {
     }
   );
 }
-function E({
+function M({
   className: t,
   ...o
 }) {
@@ -112,7 +120,7 @@ function E({
     }
   );
 }
-function M({
+function O({
   className: t,
   ...o
 }) {
@@ -126,12 +134,12 @@ function M({
   );
 }
 export {
-  y as Sheet,
-  w as SheetClose,
-  D as SheetContent,
-  M as SheetDescription,
-  C as SheetFooter,
-  T as SheetHeader,
-  E as SheetTitle,
-  N as SheetTrigger
+  N as Sheet,
+  D as SheetClose,
+  T as SheetContent,
+  O as SheetDescription,
+  E as SheetFooter,
+  z as SheetHeader,
+  M as SheetTitle,
+  C as SheetTrigger
 };

package/dist/components/foundations/skeleton.js

@@ -1,12 +1,12 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as o } from "../../lib/utils.js";
-function m({ className: e, ...r }) {
-  return /* @__PURE__ */ t(
+import { jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../lib/utils.js";
+function m({ className: e, ...o }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "skeleton",
-      className: o("animate-pulse rounded-md bg-[var(--Surface-Tertiary)]", e),
-      ...r
+      className: t("animate-pulse motion-reduce:animate-none rounded-md bg-[var(--Surface-Tertiary)]", e),
+      ...o
     }
   );
 }

package/dist/components/foundations/skip-link.js

@@ -1,27 +1,29 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { cn as i } from "../../lib/utils.js";
-function a({ href: o = "#main-content", label: s = "コンテンツへ移動", className: c, ...r }) {
-  return /* @__PURE__ */ u(
+import { cn as u } from "../../lib/utils.js";
+import { FORCED_COLORS_FOCUS as f } from "../../lib/focus-ring.js";
+function e({ href: o = "#main-content", label: s = "コンテンツへ移動", className: r, ...c }) {
+  return /* @__PURE__ */ i(
     "a",
     {
       "data-slot": "skip-link",
       href: o,
-      className: i(
+      className: u(
         // 通常は視覚的に隠す（読み上げ・タブ順には残す）。フォーカス時のみ左上に可視化。
         "sr-only",
         "focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[var(--Z-SkipLink)] focus:px-4 focus:py-2",
         "focus:rounded-md focus:shadow-md focus:outline-none",
         "focus:bg-[var(--Surface-Primary)] focus:text-[var(--Text-High-Emphasis)]",
         "focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)]",
+        f,
         "typo-label-md",
-        c
+        r
       ),
-      ...r,
+      ...c,
       children: s
     }
   );
 }
 export {
-  a as SkipLink
+  e as SkipLink
 };

package/dist/components/foundations/slider.js

@@ -1,74 +1,99 @@
 "use client";
-import { jsxs as y, jsx as s } from "react/jsx-runtime";
-import * as p from "react";
-import { Slider as i } from "radix-ui";
-import { cn as o } from "../../lib/utils.js";
-import { FOCUS_RING as w } from "../../lib/focus-ring.js";
-import { useFieldLabelling as k } from "../../lib/field-labelling.js";
-function O({
-  className: b,
-  defaultValue: e,
-  value: t,
-  min: l = 0,
-  max: n = 100,
-  thumbLabels: d,
-  "aria-label": c,
-  "aria-labelledby": f,
-  ...u
+import { jsxs as E, jsx as b } from "react/jsx-runtime";
+import * as K from "react";
+import { Slider as c } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
+import { FOCUS_RING as _ } from "../../lib/focus-ring.js";
+import { useFieldLabelling as G } from "../../lib/field-labelling.js";
+function R(u) {
+  return (String(u).split(".")[1] || "").length;
+}
+function Q({
+  className: u,
+  defaultValue: o,
+  value: l,
+  min: n = 0,
+  max: f = 100,
+  step: h = 1,
+  minStepsBetweenThumbs: v = 0,
+  onValueChange: y,
+  onValueCommit: k,
+  disabled: p,
+  thumbLabels: w,
+  "aria-label": A,
+  "aria-labelledby": C,
+  ...z
 }) {
-  const h = k(), m = p.useMemo(
-    () => Array.isArray(t) ? t : Array.isArray(e) ? e : [l, n],
-    [t, e, l, n]
-  ), v = (r, a) => {
-    if (d?.[r]) return { "aria-label": d[r] };
-    if (c) {
-      const g = a === 1 ? "" : r === 0 ? "（下限）" : r === a - 1 ? "（上限）" : `（${r + 1}つ目）`;
-      return { "aria-label": `${c}${g}` };
+  const S = G(), i = Array.isArray(l), g = i ? l.length : Array.isArray(o) ? o.length : 1, s = g > 1, [D, T] = K.useState(
+    () => Array.isArray(o) ? o : [n]
+  ), t = i ? l : D, O = (r, a) => {
+    const e = v * h, H = a === "start" ? r === 0 ? n : (t[r - 1] ?? n) + e : r === t.length - 1 ? f : (t[r + 1] ?? f) - e, I = Math.max(R(h), R(e)), N = Number(H.toFixed(I));
+    if (N === t[r]) return;
+    const m = t.map((j, B) => B === r ? N : j);
+    i || T(m), y?.(m), k?.(m);
+  }, $ = (r) => (a) => {
+    !s || p || a.key !== "Home" && a.key !== "End" || (a.preventDefault(), O(r, a.key === "Home" ? "start" : "end"));
+  }, F = (r, a) => {
+    if (w?.[r]) return { "aria-label": w[r] };
+    if (A) {
+      const e = a === 1 ? "" : r === 0 ? "（下限）" : r === a - 1 ? "（上限）" : `（${r + 1}つ目）`;
+      return { "aria-label": `${A}${e}` };
     }
-    return f ? { "aria-labelledby": f } : h ? { "aria-labelledby": h.labelId } : {};
+    return C ? { "aria-labelledby": C } : S ? { "aria-labelledby": S.labelId } : {};
   };
-  return /* @__PURE__ */ y(
-    i.Root,
+  return /* @__PURE__ */ E(
+    c.Root,
     {
       "data-slot": "slider",
-      defaultValue: e,
-      value: t,
-      min: l,
-      max: n,
-      className: o(
+      step: h,
+      minStepsBetweenThumbs: v,
+      disabled: p,
+      defaultValue: s ? void 0 : o,
+      value: s ? t : l,
+      onValueChange: (r) => {
+        s && !i && T(r), y?.(r);
+      },
+      onValueCommit: k,
+      min: n,
+      max: f,
+      className: d(
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        b
+        u
       ),
-      ...u,
+      ...z,
       children: [
-        /* @__PURE__ */ s(
-          i.Track,
+        /* @__PURE__ */ b(
+          c.Track,
           {
             "data-slot": "slider-track",
-            className: o(
-              "relative grow overflow-hidden rounded-full bg-[var(--Surface-Tertiary)] data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            className: d(
+              "relative grow overflow-hidden rounded-full bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+              // forced-colors（Windows ハイコントラスト）ではレールも範囲も Canvas に置き換わり見えなかった。
+              // レールは輪郭線（レイアウトに影響しない outline）、範囲は OS の選択色で示す。通常表示は不変
+              "forced-colors:outline forced-colors:outline-1 forced-colors:outline-[CanvasText]"
             ),
-            children: /* @__PURE__ */ s(
-              i.Range,
+            children: /* @__PURE__ */ b(
+              c.Range,
               {
                 "data-slot": "slider-range",
-                className: o(
-                  "absolute bg-[var(--Brand-Cake-Orange)] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                className: d(
+                  "absolute bg-[var(--Brand-Cake-Orange)] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full forced-colors:bg-[Highlight]"
                 )
               }
             )
           }
         ),
-        Array.from({ length: m.length }, (r, a) => /* @__PURE__ */ s(
-          i.Thumb,
+        Array.from({ length: g }, (r, a) => /* @__PURE__ */ b(
+          c.Thumb,
           {
             "data-slot": "slider-thumb",
-            ...v(a, m.length),
-            className: o(
+            ...F(a, g),
+            onKeyDown: $(a),
+            className: d(
               "block size-5 shrink-0 rounded-full border-2 border-[var(--Brand-Cake-Orange)] bg-[var(--Surface-Primary)] shadow-sm ring-[var(--Brand-Cake-Orange)]/20 transition-[color,box-shadow,transform] hover:ring-4 hover:scale-125 focus-visible:outline-hidden active:scale-110 active:ring-6 active:shadow-md disabled:pointer-events-none disabled:opacity-50",
               // hover もリングを出すため、フォーカスは DS 共通の緑リング（FOCUS_RING）
               // で区別できるようにする（以前は hover と同じオレンジ ring-4 だった）。
-              w
+              _
             )
           },
           a
@@ -78,5 +103,5 @@ function O({
   );
 }
 export {
-  O as Slider
+  Q as Slider
 };

package/dist/components/foundations/sonner.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as n } from "lucide-react";
+import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as n, CircleCheckIcon as s } from "lucide-react";
 import { useTheme as v } from "next-themes";
 import { Toaster as c } from "sonner";
 const g = ({ ...a }) => {
@@ -11,11 +11,12 @@ const g = ({ ...a }) => {
       theme: e,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ r(n, { className: "size-4 text-[var(--Text-Success)]" }),
-        info: /* @__PURE__ */ r(s, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
+        success: /* @__PURE__ */ r(s, { className: "size-4 text-[var(--Text-Success)]" }),
+        info: /* @__PURE__ */ r(n, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
         warning: /* @__PURE__ */ r(o, { className: "size-4 text-[var(--Text-Warning)]" }),
         error: /* @__PURE__ */ r(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
-        loading: /* @__PURE__ */ r(t, { className: "size-4 animate-spin text-[var(--Text-Medium-Emphasis)]" })
+        // 動きを減らす設定では回転を止める（--Motion-* の一括制御は animate-spin に効かない）
+        loading: /* @__PURE__ */ r(t, { className: "size-4 animate-spin motion-reduce:animate-none text-[var(--Text-Medium-Emphasis)]" })
       },
       toastOptions: {
         classNames: {

package/dist/components/foundations/spinner.js

@@ -1,16 +1,18 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as i } from "../../lib/utils.js";
-function m({ className: e, size: s = "md", ...a }) {
+import { cn as n } from "../../lib/utils.js";
+function t({ className: e, size: s = "md", ...a }) {
   return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "spinner",
       role: "status",
       "aria-label": "読み込み中",
-      className: i(
+      className: n(
         // shrink-0 必須: 「読み込み中…」テキストと横並びにされるため、既定の flex-shrink:1 だと円が楕円に潰れる
-        "shrink-0 animate-spin rounded-full border-[var(--Border-Medium-Emphasis)] border-t-[var(--Brand-Cake-Orange)]",
+        // motion-reduce:animate-none: 動きを減らす設定では回転を止める（--Motion-* の一括制御は
+        // animate-spin に効かないため個別に指定）。止めても上辺だけ色付きの欠けた輪と role="status" で処理中と分かる
+        "shrink-0 animate-spin motion-reduce:animate-none rounded-full border-[var(--Border-Medium-Emphasis)] border-t-[var(--Brand-Cake-Orange)]",
         {
           sm: "size-4 border-2",
           md: "size-8 border-[3px]",
@@ -24,5 +26,5 @@ function m({ className: e, size: s = "md", ...a }) {
   );
 }
 export {
-  m as Spinner
+  t as Spinner
 };

package/dist/components/foundations/switch.js

@@ -1,34 +1,35 @@
 import { jsx as e } from "react/jsx-runtime";
 import "react";
-import { Switch as s } from "radix-ui";
+import { Switch as o } from "radix-ui";
 import { Check as n } from "lucide-react";
 import { cn as a } from "../../lib/utils.js";
-import { resolveFieldAria as d, useFieldLabelling as u } from "../../lib/field-labelling.js";
-function k({
-  className: o,
+import { FOCUS_RING_ONLY as d } from "../../lib/focus-ring.js";
+import { resolveFieldAria as u, useFieldLabelling as m } from "../../lib/field-labelling.js";
+function v({
+  className: s,
   size: r = "default",
   ...i
 }) {
-  const t = r === "default", c = d(i, u());
+  const t = r === "default", c = u(i, m());
   return /* @__PURE__ */ e(
-    s.Root,
+    o.Root,
     {
       "data-slot": "switch",
       "data-size": r,
       className: a(
         "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors duration-[var(--Motion-Duration-Base)] outline-none",
-        "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+        d,
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Object-Accent-Primary)]",
         "data-[state=unchecked]:border-[var(--Object-Low-Emphasis)] data-[state=unchecked]:bg-[var(--Object-Low-Emphasis)]",
         "dark:data-[state=unchecked]:border-[var(--Object-Medium-Emphasis)] dark:data-[state=unchecked]:bg-[var(--Object-Medium-Emphasis)]",
         t ? "h-8 w-[52px]" : "h-6 w-10",
-        o
+        s
       ),
       ...i,
       ...c,
       children: /* @__PURE__ */ e(
-        s.Thumb,
+        o.Thumb,
         {
           "data-slot": "switch-thumb",
           className: a(
@@ -50,5 +51,5 @@ function k({
   );
 }
 export {
-  k as Switch
+  v as Switch
 };

package/dist/components/foundations/tabs.js

@@ -1,28 +1,40 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cva as n } from "class-variance-authority";
-import { Tabs as e } from "radix-ui";
-import { cn as i } from "../../lib/utils.js";
-function v({
+import { cva as l } from "class-variance-authority";
+import { Tabs as i } from "radix-ui";
+import { cn as s } from "../../lib/utils.js";
+import { FOCUS_RING as d } from "../../lib/focus-ring.js";
+const b = "data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4", g = "data-[orientation=vertical]:w-auto data-[orientation=vertical]:max-w-[50%] data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", c = [
+  "data-[orientation=vertical]:justify-start data-[orientation=vertical]:whitespace-normal data-[orientation=vertical]:text-left",
+  // underbar: 均等割り（flex-1）と下線をやめ、パネル側（右）の線で選択中を示す。高さは折り返しに合わせて伸ばす
+  "group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:h-auto group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:min-h-12 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:flex-none group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:border-b-0 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:border-r-2 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:px-4",
+  // segment: 高さを折り返しに合わせて伸ばす（1 行なら従来の 37px）
+  "group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:h-auto group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:min-h-[37px] group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:py-2"
+].join(" "), u = "data-[orientation=vertical]:min-w-0", p = [
+  "forced-colors:group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[Highlight] forced-colors:group-data-[variant=segment]/tabs-list:data-[state=active]:text-[HighlightText]",
+  "forced-colors:group-data-[variant=underbar]/tabs-list:data-[state=inactive]:border-[Canvas] forced-colors:group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[Highlight]"
+].join(" "), v = "forced-colors:group-data-[scrollable]/tabs-list:group-data-[state=inactive]/trigger:border-[Canvas] forced-colors:group-data-[state=active]/trigger:border-[Highlight]";
+function E({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ s(
-    e.Root,
+  return /* @__PURE__ */ r(
+    i.Root,
     {
       "data-slot": "tabs",
-      className: i("flex flex-col", t),
+      className: s("flex flex-col", b, t),
       ...a
     }
   );
 }
-const b = n(
+const m = l(
   "group/tabs-list inline-flex items-center",
   {
     variants: {
       variant: {
         underbar: "w-full bg-transparent overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-        segment: "w-fit rounded-full bg-[var(--Surface-Tertiary)] p-2"
+        // 縦向きでは縦長の地に rounded-full だと上下が半円になり、先頭・末尾のタブの角がはみ出すため角丸を 2xl に抑える
+        segment: "w-fit rounded-full bg-[var(--Surface-Tertiary)] p-2 data-[orientation=vertical]:rounded-2xl"
       },
       scrollable: {
         true: "gap-4"
@@ -46,37 +58,37 @@ const b = n(
     }
   }
 );
-function m({
+function R({
   className: t,
   variant: a = "underbar",
-  scrollable: r = !1,
-  size: l = "md",
-  ...o
+  scrollable: e = !1,
+  size: o = "md",
+  ...n
 }) {
-  return /* @__PURE__ */ s(
-    e.List,
+  return /* @__PURE__ */ r(
+    i.List,
     {
       "data-slot": "tabs-list",
       "data-variant": a,
-      "data-scrollable": r || void 0,
-      "data-size": l,
-      className: i(b({ variant: a, scrollable: r, size: l }), t),
-      ...o
+      "data-scrollable": e || void 0,
+      "data-size": o,
+      className: s(m({ variant: a, scrollable: e, size: o }), g, t),
+      ...n
     }
   );
 }
-function x({
+function C({
   className: t,
   children: a,
-  ...r
+  ...e
 }) {
-  return /* @__PURE__ */ s(
-    e.Trigger,
+  return /* @__PURE__ */ r(
+    i.Trigger,
     {
       "data-slot": "tabs-trigger",
-      className: i(
-        // Base
-        "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: s(
+        // Base（フォーカスの輪郭線は内側に描く: TabsList の overflow-x-auto が外側の輪郭線を全辺切り取っていた）
+        "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         // Underbar variant (default: equal-width tabs with full-width underline)
         // px-2: 均等割りで幅が詰まったとき、隣のラベルと文字が接触しないための最小余白（issue #235）
         "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:px-2 group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
@@ -84,7 +96,8 @@ function x({
         "group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[var(--Text-High-Emphasis)] group-data-[variant=underbar]/tabs-list:data-[state=active]:text-[var(--Text-High-Emphasis)]",
         // Scrollable underbar: shrink to text width, bold text, remove trigger border (underline moves to inner span)
         // gap-4 で間隔を取っているので左右 padding は戻す（従来の間隔を保つ）
-        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:!px-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
+        // !border-r-0: 縦向き underbar の右端の線（VERTICAL_TRIGGER）も scrollable では内側 span の下線に任せる
+        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:!border-r-0 group-data-[scrollable]/tabs-list:!px-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
         // Segment variant
         "group-data-[variant=segment]/tabs-list:h-[37px] group-data-[variant=segment]/tabs-list:min-w-[100px] group-data-[variant=segment]/tabs-list:rounded-full group-data-[variant=segment]/tabs-list:px-3 group-data-[variant=segment]/tabs-list:typo-body-md group-data-[variant=segment]/tabs-list:text-[var(--Text-High-Emphasis)]",
         // size="sm": 狭い置き場所（サイドバー等）向け。1 項目あたりの最小幅を外し、
@@ -93,30 +106,32 @@ function x({
         "group-data-[size=sm]/tabs-list:!min-w-0 group-data-[size=sm]/tabs-list:!px-2",
         // Segment active
         "group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[var(--Surface-Primary)] group-data-[variant=segment]/tabs-list:data-[state=active]:shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
+        c,
+        p,
         t
       ),
-      ...r,
-      children: /* @__PURE__ */ s("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
+      ...e,
+      children: /* @__PURE__ */ r("span", { className: `group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)] ${v}`, children: a })
     }
   );
 }
-function f({
+function L({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ s(
-    e.Content,
+  return /* @__PURE__ */ r(
+    i.Content,
     {
       "data-slot": "tabs-content",
-      className: i("flex-1 outline-none", t),
+      className: s("flex-1 outline-none", d, u, t),
       ...a
     }
   );
 }
 export {
-  v as Tabs,
-  f as TabsContent,
-  m as TabsList,
-  x as TabsTrigger,
-  b as tabsListVariants
+  E as Tabs,
+  L as TabsContent,
+  R as TabsList,
+  C as TabsTrigger,
+  m as tabsListVariants
 };