@cosmicdrift/kumiko-renderer-web 0.146.4 → 0.147.1

package/src/widgets/__tests__/form-kit.test.tsx

@@ -33,6 +33,19 @@ describe("useDraft", () => {
     act(() => result.current.reset());
     expect(result.current.draft.a).toBe(1);
   });
+
+  test("idPrefix verhindert doppelte DOM-ids bei mehreren useDraft-Formularen mit gleichem Feldnamen", () => {
+    const a = renderHook(() =>
+      useDraft<{ sum: number | undefined }>({ sum: 1 }, { idPrefix: "a" }),
+    );
+    const b = renderHook(() =>
+      useDraft<{ sum: number | undefined }>({ sum: 2 }, { idPrefix: "b" }),
+    );
+    expect(a.result.current.field("sum").id).toBe("a-sum");
+    expect(b.result.current.field("sum").id).toBe("b-sum");
+    // name bleibt der reine Key — nur die DOM-id wird prefixt.
+    expect(a.result.current.field("sum").name).toBe("sum");
+  });
 });
 
 describe("NumberField", () => {
@@ -217,6 +230,70 @@ describe("FileField", () => {
     );
     expect(screen.getByText("Bild")).toBeTruthy();
   });
+
+  test('variant="image" mit gesetzter FileRef zeigt Preview + Remove-Button', () => {
+    render(
+      <FileField
+        label="Bild"
+        id="f3"
+        name="f3"
+        value="file-abc"
+        onChange={() => {}}
+        variant="image"
+      />,
+    );
+    const img = document.querySelector("img") as HTMLImageElement;
+    expect(img.src).toContain("/api/files/file-abc");
+    expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+  });
+
+  test("Remove-Button ruft onChange(null)", () => {
+    const onChange = mock();
+    render(
+      <FileField
+        label="Bild"
+        id="f4"
+        name="f4"
+        value="file-abc"
+        onChange={onChange}
+        variant="image"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  test("entityType/fieldName reichen bis in den /api/files-Upload-Request durch", async () => {
+    const originalFetch = global.fetch;
+    const fetchSpy = mock(
+      async (_url: string, _init?: RequestInit) => new Response(JSON.stringify({ id: "file-1" })),
+    );
+    global.fetch = fetchSpy as unknown as typeof fetch;
+    try {
+      render(
+        <FileField
+          label="Anhang"
+          id="f2"
+          name="f2"
+          value={null}
+          onChange={() => {}}
+          entityType="property"
+          fieldName="brochure"
+        />,
+      );
+      const input = document.getElementById("f2") as HTMLInputElement;
+      const file = new File(["x"], "brochure.pdf", { type: "application/pdf" });
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+      expect(fetchSpy).toHaveBeenCalled();
+      const body = fetchSpy.mock.calls[0]?.[1]?.body as FormData;
+      expect(body.get("entityType")).toBe("property");
+      expect(body.get("fieldName")).toBe("brochure");
+    } finally {
+      global.fetch = originalFetch;
+    }
+  });
 });
 
 describe("Button size", () => {

package/src/widgets/__tests__/result-panel.test.tsx

@@ -0,0 +1,72 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "../../__tests__/test-utils";
+import { ComparisonTable, ResultTable } from "../result-panel";
+
+const COLUMNS = [
+  { header: "Jahr", cell: (row: { year: number; total: number }) => row.year },
+  {
+    header: "Summe",
+    align: "right" as const,
+    cell: (row: { year: number; total: number }) => row.total,
+  },
+];
+const ROWS = [
+  { year: 2026, total: 100 },
+  { year: 2027, total: 200 },
+];
+
+describe("ResultTable", () => {
+  test("card=true wrapt in den gerundeten Border-Container mit bg-muted-Header", () => {
+    const { container } = render(
+      <ResultTable columns={COLUMNS} rows={ROWS} rowKey={(r) => String(r.year)} card testId="rt" />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeTruthy();
+    expect(container.querySelector("thead.bg-muted")).toBeTruthy();
+    expect(screen.getByText("2026")).toBeTruthy();
+  });
+
+  test("ohne card kein Wrapper (bare default)", () => {
+    const { container } = render(
+      <ResultTable columns={COLUMNS} rows={ROWS} rowKey={(r) => String(r.year)} testId="rt" />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeNull();
+    expect(container.querySelector("thead.bg-muted")).toBeNull();
+  });
+});
+
+describe("ComparisonTable", () => {
+  const cols = ["A", "B"];
+  const metrics = [{ label: "Zins", value: (col: string) => `${col}-Zins` }];
+
+  test("card=true wrapt in den gerundeten Border-Container mit bg-muted-Header", () => {
+    const { container } = render(
+      <ComparisonTable
+        columns={cols}
+        columnHeader={(c) => c}
+        columnKey={(c) => c}
+        metrics={metrics}
+        metricLabel="Kennzahl"
+        card
+        testId="ct"
+      />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeTruthy();
+    expect(container.querySelector("thead.bg-muted")).toBeTruthy();
+    expect(screen.getByText("A-Zins")).toBeTruthy();
+  });
+
+  test("ohne card kein Wrapper (bare default)", () => {
+    const { container } = render(
+      <ComparisonTable
+        columns={cols}
+        columnHeader={(c) => c}
+        columnKey={(c) => c}
+        metrics={metrics}
+        metricLabel="Kennzahl"
+        testId="ct"
+      />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeNull();
+    expect(container.querySelector("thead.bg-muted")).toBeNull();
+  });
+});

package/src/widgets/__tests__/widgets.test.tsx

@@ -62,6 +62,20 @@ describe("ModeSwitch", () => {
     fireEvent.click(screen.getByRole("button", { name: "Modus B" }));
     expect(onChange).toHaveBeenCalledWith("b");
   });
+
+  test("#902: Buttons sind als zusammengehörige Gruppe gekennzeichnet", () => {
+    render(
+      <ModeSwitch
+        value="a"
+        options={[
+          { value: "a", label: "Modus A" },
+          { value: "b", label: "Modus B" },
+        ]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole("group")).toBeTruthy();
+  });
 });
 
 describe("CollapsibleSection", () => {

package/src/widgets/ai-text-field.tsx

@@ -0,0 +1,370 @@
+// AiTextField / AiTextArea — Drop-in replacement for TextField/TextareaField
+// with AI-augmented actions (ai-text-primitive plan doc, Phase 3).
+//
+// Built on raw <input>/<textarea> (not the generic Input primitive) because
+// ghost-text needs a keydown handler (Tab/Esc) and an overlay that the
+// discriminated-union Input contract doesn't expose. Same pattern as
+// MoneyInput — a hand-built control wrapped in Field.
+//
+// Graceful degradation: `useAiTextAction`/`useCompletion` surface
+// "unavailable" when the server feature isn't mounted (`feature_disabled`)
+// — the toolbar hides and the field behaves like a plain text field, no
+// error shown to the end-user.
+//
+// Ghost-text simplification: the overlay only ever appends after the
+// current value (no mid-text ghost) — matches the server prompt design
+// (ai-text's `complete` mode only ever continues forward from the given
+// text). Two-layer overlay trick: an aria-hidden div behind the real
+// input renders `value` (invisible, same font/box so it reserves space)
+// followed by the suggestion in muted color; the real input sits on top
+// with a transparent background so the suggestion shows through past the
+// typed text. Both elements MUST share identical typography/box classes
+// or the suggestion won't align with the caret.
+
+import type { AiTextRewriteStyle } from "@cosmicdrift/kumiko-renderer";
+import {
+  useAiTextAction,
+  useCompletion,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { Check, Languages, Wand2 } from "lucide-react";
+import { type KeyboardEvent, type ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+import { ModeSwitch } from "./mode-switch";
+
+type AiTextAction = "correct" | "translate" | "rewrite";
+
+interface AiTextFieldBaseProps {
+  readonly label: string;
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly required?: boolean;
+  readonly disabled?: boolean;
+  readonly placeholder?: string;
+  readonly testId?: string;
+  /** Ghost-text completion on/off. Default true. */
+  readonly completion?: boolean;
+  /** Debounce for ghost-text requests, ms. Default 500 — kept low in
+   *  tests, tuned for real typing in production. */
+  readonly completionDebounceMs?: number;
+  /** Toolbar actions to expose. Default all three. */
+  readonly actions?: readonly AiTextAction[];
+  /** Target languages the translate action offers. First is preselected.
+   *  Default `["en", "de", "fr", "es"]`. */
+  readonly translateLanguages?: readonly string[];
+}
+
+export interface AiTextFieldProps extends AiTextFieldBaseProps {}
+export interface AiTextAreaProps extends AiTextFieldBaseProps {
+  readonly rows?: number;
+}
+
+const DEFAULT_LANGUAGES: readonly string[] = ["en", "de", "fr", "es"];
+const DEFAULT_ACTIONS: readonly AiTextAction[] = ["correct", "translate", "rewrite"];
+const REWRITE_STYLES: readonly AiTextRewriteStyle[] = ["formal", "casual", "concise", "expand"];
+
+const sharedTextClass =
+  "w-full rounded-md border border-input px-3 py-2 text-sm shadow-sm leading-6 " +
+  "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 " +
+  "focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+
+// Overlay and real control must share identical wrap/overflow behavior or the
+// ghost suggestion drifts from the caret: <input> never wraps and scrolls
+// horizontally, <textarea> soft-wraps and scrolls vertically.
+const singleLineWrapClass = "whitespace-pre overflow-hidden";
+const multilineWrapClass = "whitespace-pre-wrap break-words overflow-hidden";
+
+function AiTextCore({
+  multiline,
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  required,
+  disabled,
+  placeholder,
+  testId,
+  rows,
+  completion = true,
+  completionDebounceMs = 500,
+  actions = DEFAULT_ACTIONS,
+  translateLanguages = DEFAULT_LANGUAGES,
+}: AiTextFieldBaseProps & { readonly multiline: boolean; readonly rows?: number }): ReactNode {
+  const { Field, Button, Dialog, Text } = usePrimitives();
+  const t = useTranslation();
+
+  const {
+    suggestion,
+    state: completionState,
+    requestCompletion,
+    clear: clearCompletion,
+  } = useCompletion(completionDebounceMs);
+  const {
+    run: runAction,
+    state: actionState,
+    result: actionResult,
+    reset: resetAction,
+  } = useAiTextAction();
+
+  const [dialogMode, setDialogMode] = useState<AiTextAction | null>(null);
+  const [targetLanguage, setTargetLanguage] = useState(translateLanguages[0] ?? "en");
+  const [rewriteStyle, setRewriteStyle] = useState<AiTextRewriteStyle>("concise");
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+
+  const unavailable = completionState === "unavailable" || actionState === "unavailable";
+  const capExceeded = completionState === "cap-exceeded" || actionState === "cap-exceeded";
+  const showToolbar = !unavailable && actions.length > 0;
+  const showGhost = completion && !unavailable && suggestion !== null && suggestion.length > 0;
+
+  // ponytail: a manually `resize-y`-shrunk textarea can end up a few px
+  // shorter than the overlay div (which has no resize handle), so the
+  // synced scrollTop clamps slightly early — sub-line drift, invisible at
+  // normal line-height. Upgrade if it ever becomes visually noticeable.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value/suggestion are trigger-only, effect reads refs not props
+  useLayoutEffect(() => {
+    if (overlayRef.current === null || controlRef.current === null) return;
+    overlayRef.current.scrollLeft = controlRef.current.scrollLeft;
+    overlayRef.current.scrollTop = controlRef.current.scrollTop;
+  }, [value, suggestion]);
+
+  function handleChange(next: string): void {
+    onChange(next);
+    if (completion && !unavailable) {
+      requestCompletion(next);
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>): void {
+    if (suggestion === null) return;
+    if (e.key === "Tab" && e.currentTarget.selectionStart === value.length) {
+      e.preventDefault();
+      onChange(value + suggestion);
+      clearCompletion();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      clearCompletion();
+    }
+  }
+
+  function openDialog(mode: AiTextAction): void {
+    resetAction();
+    setDialogMode(mode);
+    if (mode === "correct") {
+      void runAction({ mode: "correct", text: value });
+    }
+  }
+
+  function closeDialog(): void {
+    setDialogMode(null);
+    resetAction();
+  }
+
+  function runConfiguredAction(): void {
+    if (dialogMode === "translate") {
+      void runAction({ mode: "translate", text: value, targetLanguage });
+    } else if (dialogMode === "rewrite") {
+      void runAction({ mode: "rewrite", text: value, style: rewriteStyle });
+    }
+  }
+
+  function applyResult(): void {
+    if (actionResult?.type === "text") onChange(actionResult.text);
+  }
+
+  const needsConfig =
+    (dialogMode === "translate" || dialogMode === "rewrite") &&
+    actionState !== "loading" &&
+    actionState !== "success";
+
+  return (
+    <>
+      <Field id={id} label={label} required={required} testId={testId}>
+        <div className="relative w-full">
+          {showGhost && (
+            <div
+              ref={overlayRef}
+              aria-hidden="true"
+              className={cn(
+                sharedTextClass,
+                multiline ? multilineWrapClass : singleLineWrapClass,
+                "pointer-events-none absolute inset-0 select-none border-transparent shadow-none",
+              )}
+            >
+              <span className="invisible">{value}</span>
+              <span className="text-muted-foreground">{suggestion}</span>
+            </div>
+          )}
+          {multiline ? (
+            <textarea
+              ref={(el) => {
+                controlRef.current = el;
+              }}
+              id={id}
+              name={name}
+              value={value}
+              required={required}
+              disabled={disabled === true || unavailable}
+              placeholder={placeholder}
+              rows={rows ?? 4}
+              onChange={(e) => handleChange(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onBlur={clearCompletion}
+              onScroll={(e) => {
+                if (overlayRef.current) overlayRef.current.scrollTop = e.currentTarget.scrollTop;
+              }}
+              className={cn(
+                sharedTextClass,
+                multilineWrapClass,
+                "relative resize-y bg-transparent",
+              )}
+              data-testid={testId !== undefined ? `${testId}-input` : undefined}
+            />
+          ) : (
+            <input
+              ref={(el) => {
+                controlRef.current = el;
+              }}
+              id={id}
+              name={name}
+              type="text"
+              value={value}
+              required={required}
+              disabled={disabled === true || unavailable}
+              placeholder={placeholder}
+              onChange={(e) => handleChange(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onBlur={clearCompletion}
+              onScroll={(e) => {
+                if (overlayRef.current) overlayRef.current.scrollLeft = e.currentTarget.scrollLeft;
+              }}
+              className={cn(sharedTextClass, singleLineWrapClass, "relative bg-transparent")}
+              data-testid={testId !== undefined ? `${testId}-input` : undefined}
+            />
+          )}
+        </div>
+
+        {showGhost && <Text variant="muted">{t("kumiko.aiText.acceptHint")}</Text>}
+        {capExceeded && <Text variant="muted">{t("kumiko.aiText.capExceeded")}</Text>}
+
+        {showToolbar && (
+          <div className="mt-1 flex gap-1">
+            {actions.includes("correct") && (
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={value.length === 0}
+                ariaLabel={t("kumiko.aiText.correct")}
+                onClick={() => openDialog("correct")}
+              >
+                <Check className="size-3.5" aria-hidden="true" />
+              </Button>
+            )}
+            {actions.includes("translate") && (
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={value.length === 0}
+                ariaLabel={t("kumiko.aiText.translate")}
+                onClick={() => openDialog("translate")}
+              >
+                <Languages className="size-3.5" aria-hidden="true" />
+              </Button>
+            )}
+            {actions.includes("rewrite") && (
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={value.length === 0}
+                ariaLabel={t("kumiko.aiText.rewrite")}
+                onClick={() => openDialog("rewrite")}
+              >
+                <Wand2 className="size-3.5" aria-hidden="true" />
+              </Button>
+            )}
+          </div>
+        )}
+      </Field>
+
+      {/* ponytail: Dialog's built-in Confirm button is always live, even
+          while needsConfig is still showing the language/style picker —
+          applyResult() no-ops until actionResult exists, so an early click
+          just closes the dialog with nothing applied. Gating it needs a
+          confirmDisabled prop on the shared Dialog primitive (other
+          callers too); not worth widening that contract for one caller.
+          Upgrade if this trips users up in practice. */}
+      <Dialog
+        open={dialogMode !== null}
+        onOpenChange={(open) => {
+          if (!open) closeDialog();
+        }}
+        title={dialogMode !== null ? t(`kumiko.aiText.${dialogMode}`) : ""}
+        onConfirm={applyResult}
+        testId={testId !== undefined ? `${testId}-dialog` : undefined}
+      >
+        {dialogMode === "translate" && needsConfig && (
+          <div className="mb-3 flex flex-col gap-2">
+            <ModeSwitch
+              value={targetLanguage}
+              options={translateLanguages.map((l) => ({ value: l, label: l.toUpperCase() }))}
+              onChange={setTargetLanguage}
+            />
+            <Button variant="primary" size="sm" onClick={runConfiguredAction}>
+              {t(`kumiko.aiText.${dialogMode}`)}
+            </Button>
+          </div>
+        )}
+        {dialogMode === "rewrite" && needsConfig && (
+          <div className="mb-3 flex flex-col gap-2">
+            <ModeSwitch
+              value={rewriteStyle}
+              options={REWRITE_STYLES.map((s) => ({
+                value: s,
+                label: t(`kumiko.aiText.style.${s}`),
+              }))}
+              onChange={setRewriteStyle}
+            />
+            <Button variant="primary" size="sm" onClick={runConfiguredAction}>
+              {t(`kumiko.aiText.${dialogMode}`)}
+            </Button>
+          </div>
+        )}
+        {actionState === "loading" && (
+          <Text variant="muted">{t("kumiko.aiText.diff.generating")}</Text>
+        )}
+        {actionState === "success" && actionResult?.type === "text" && (
+          <div className="flex flex-col gap-3">
+            <div>
+              <Text variant="small">{t("kumiko.aiText.diff.before")}</Text>
+              <p className="whitespace-pre-wrap rounded-md border border-input bg-muted/40 p-2 text-sm">
+                {value}
+              </p>
+            </div>
+            <div>
+              <Text variant="small">{t("kumiko.aiText.diff.after")}</Text>
+              <p className="whitespace-pre-wrap rounded-md border border-input p-2 text-sm">
+                {actionResult.text}
+              </p>
+            </div>
+          </div>
+        )}
+      </Dialog>
+    </>
+  );
+}
+
+/** Single-line AI text field — ghost-text completion + correct/translate/
+ *  rewrite toolbar. Degrades to a plain text field when `ai-text` isn't
+ *  mounted server-side. */
+export function AiTextField(props: AiTextFieldProps): ReactNode {
+  return <AiTextCore {...props} multiline={false} />;
+}
+
+/** Multi-line variant of {@link AiTextField}. */
+export function AiTextArea(props: AiTextAreaProps): ReactNode {
+  return <AiTextCore {...props} multiline={true} />;
+}

package/src/widgets/detail-list.tsx

@@ -9,6 +9,9 @@ export function DetailList({
   testId,
 }: {
   readonly rows: readonly {
+    /** Optional stable key -- falls back to the label when omitted (fine as
+     *  long as labels are unique; set id when they can repeat). */
+    readonly id?: string;
     readonly label: string;
     readonly value: ReactNode;
     readonly emphasize?: boolean;
@@ -19,7 +22,7 @@ export function DetailList({
     <dl data-testid={testId} className="flex flex-col divide-y">
       {rows.map((row) => (
         <div
-          key={row.label}
+          key={row.id ?? row.label}
           className="grid grid-cols-1 gap-0.5 py-2.5 sm:grid-cols-[200px_1fr] sm:gap-4"
         >
           <dt

package/src/widgets/form-fields.tsx

@@ -42,16 +42,11 @@ export function NumberField({
   );
 }
 
-// MoneyField/PercentField markieren die Feld-Absicht am Call-Site (lesbarer als
-// NumberField überall) und sind der Ort, an dem später geld-/prozent-spezifische
-// Formatierung andocken kann. Aktuell rendern sie identisch zu NumberField.
-export function MoneyField(props: NumberFieldProps): ReactNode {
-  return <NumberField {...props} />;
-}
-
-export function PercentField(props: NumberFieldProps): ReactNode {
-  return <NumberField {...props} />;
-}
+// Aliase markieren die Feld-Absicht am Call-Site (lesbarer als NumberField
+// überall) ohne eigene Wrapper-Funktion vorzutäuschen — beide sind identisch
+// zu NumberField, kein Ort für künftige geld-/prozent-spezifische Formatierung.
+export const MoneyField = NumberField;
+export const PercentField = NumberField;
 
 interface FieldBase {
   readonly label: string;
@@ -139,7 +134,7 @@ export function SelectField({
 
 export interface DateFieldProps extends FieldBase {
   readonly value: string;
-  readonly onChange: (v: string | undefined) => void;
+  readonly onChange: (v: string) => void;
   readonly min?: string;
   readonly max?: string;
 }
@@ -165,7 +160,7 @@ export function DateField({
         id={id}
         name={name}
         value={value}
-        onChange={onChange}
+        onChange={(v) => onChange(v ?? "")}
         required={required}
         disabled={disabled}
         {...(min !== undefined && { min })}
@@ -290,6 +285,10 @@ export interface FileFieldProps extends FieldBase {
   readonly accept?: readonly string[];
   /** "image" zeigt eine Vorschau, "file" nur den Dateinamen. Default "file". */
   readonly variant?: "file" | "image";
+  /** Bindet den Upload an ein konkretes Entity-Feld — der `/api/files`-Endpoint
+   *  prüft `accept`/`maxSize` dann serverseitig gegen dessen Feld-Definition. */
+  readonly entityType?: string;
+  readonly fieldName?: string;
 }
 
 /** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
@@ -301,6 +300,8 @@ export function FileField({
   onChange,
   accept,
   variant = "file",
+  entityType,
+  fieldName,
   required,
   disabled,
   testId,
@@ -317,6 +318,8 @@ export function FileField({
         required={required}
         disabled={disabled}
         {...(accept !== undefined && { accept })}
+        {...(entityType !== undefined && { entityType })}
+        {...(fieldName !== undefined && { fieldName })}
       />
     </Field>
   );

package/src/widgets/index.ts

@@ -3,6 +3,12 @@
 // Katalog: docs.kumiko.rocks → Guides → Widgets; visueller Überblick im
 // styleguide-Sample.
 
+export {
+  AiTextArea,
+  type AiTextAreaProps,
+  AiTextField,
+  type AiTextFieldProps,
+} from "./ai-text-field";
 export {
   StatusBarChart,
   type StatusBarEntry,

package/src/widgets/mode-switch.tsx

@@ -15,7 +15,8 @@ export function ModeSwitch<T extends string>({
   readonly testId?: string;
 }): ReactNode {
   return (
-    <div data-testid={testId} className="flex flex-wrap gap-1">
+    // biome-ignore lint/a11y/useSemanticElements: fieldset bringt Browser-Default-Chrome (Border/legend) mit, das für ein Button-Segmented-Control falsch ist
+    <div data-testid={testId} role="group" className="flex flex-wrap gap-1">
       {options.map((o) => {
         const active = o.value === value;
         return (