@cosmicdrift/kumiko-renderer-web 0.193.0 → 0.194.0

package/src/primitives/__tests__/date-parse.test.ts

@@ -5,6 +5,7 @@
 // rejection.
 
 import { describe, expect, test } from "bun:test";
+import { kumikoDefaultTranslations } from "@cosmicdrift/kumiko-renderer";
 import { Temporal } from "temporal-polyfill";
 import {
   formatDateForInput,
@@ -14,8 +15,19 @@ import {
   toIso,
 } from "../date-parse";
 
-const dePlaceholderLetters = { year: "J", month: "M", day: "T" };
-const enPlaceholderLetters = { year: "Y", month: "M", day: "D" };
+// Derived from kumikoDefaultTranslations instead of hardcoded so a drift in
+// the i18n defaults (e.g. renaming "T" → "D") fails this test too.
+function placeholderLetters(locale: "de" | "en"): { year: string; month: string; day: string } {
+  const bundle = kumikoDefaultTranslations[locale];
+  return {
+    year: bundle?.["kumiko.field.dateField.placeholderYear"] ?? "",
+    month: bundle?.["kumiko.field.dateField.placeholderMonth"] ?? "",
+    day: bundle?.["kumiko.field.dateField.placeholderDay"] ?? "",
+  };
+}
+
+const dePlaceholderLetters = placeholderLetters("de");
+const enPlaceholderLetters = placeholderLetters("en");
 
 describe("parseIso", () => {
   test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -14,6 +14,12 @@ import { fireEvent, render, screen, within } from "@testing-library/react";
 import { type ReactElement, useState } from "react";
 import { EmbeddedListInput } from "../embedded-list-input";
 
+function setViewportWidth(width: number): void {
+  (
+    window as unknown as { happyDOM: { setInnerWidth: (n: number) => void } }
+  ).happyDOM.setInnerWidth(width);
+}
+
 function renderWithLocale(ui: ReactElement) {
   return render(
     <LocaleProvider
@@ -119,14 +125,14 @@ describe("EmbeddedListInput — desktop/mobile are mutually exclusive mounts (#1
 
   test("mobile viewport mounts only the card layout, not the table", () => {
     const originalWidth = window.innerWidth;
-    window.innerWidth = 500;
+    setViewportWidth(500);
     try {
       renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
       expect(screen.getByTestId("lines-mobile")).toBeTruthy();
       expect(screen.queryByTestId("lines-desktop")).toBeNull();
       expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
     } finally {
-      window.innerWidth = originalWidth;
+      setViewportWidth(originalWidth);
     }
   });
 });
@@ -626,6 +632,34 @@ describe("EmbeddedListInput — currency (#1839)", () => {
   });
 });
 
+describe("EmbeddedListInput — totals follow the app locale, not the browser locale", () => {
+  test("a de-DE app locale formats both the money total and a plain number total with '.' thousands / ',' decimal", () => {
+    const rows = [{ description: "A", quantity: 1234.5, amount: 150099 }];
+    render(
+      <LocaleProvider
+        resolver={createStaticLocaleResolver({ locale: "de-DE" })}
+        fallbackBundles={[kumikoDefaultTranslations]}
+      >
+        <EmbeddedListInput
+          {...baseProps({
+            rows,
+            currency: "EUR",
+            totals: [
+              { field: "amount", label: "Sum", value: 150099 },
+              { field: "quantity", label: "Qty total", value: 1234.5 },
+            ],
+          })}
+        />
+      </LocaleProvider>,
+    );
+    const totals = within(screen.getByTestId("lines-desktop")).getByTestId("lines-totals");
+    // de-DE: money "1.500,99 €", plain number "1.234,5" — both use "." as
+    // the thousands separator and "," as the decimal separator.
+    expect(totals.textContent).toContain("1.500,99");
+    expect(totals.textContent).toContain("1.234,5");
+  });
+});
+
 describe("EmbeddedListInput — desktop table width (solon#107)", () => {
   test("the table keeps min-w-max so columns don't shrink below their width classes", () => {
     const rows = [{ description: "A", quantity: 1, amount: 100 }];

package/src/primitives/__tests__/file-upload.test.tsx

@@ -23,3 +23,27 @@ describe("FileUploadInput — image variant preview src (#1950)", () => {
     expect(container.querySelector("img")?.getAttribute("src")).toBe("/api/files/abc");
   });
 });
+
+describe("FileUploadInput — camera capture (#1953)", () => {
+  test("with capture set, the <input type=file> carries the capture attribute", () => {
+    const { container } = render(
+      <FileUploadInput
+        kind="image"
+        id="avatar"
+        value={null}
+        onChange={noop}
+        capture="environment"
+      />,
+    );
+    expect(container.querySelector('input[type="file"]')?.getAttribute("capture")).toBe(
+      "environment",
+    );
+  });
+
+  test("without capture, the <input type=file> has no capture attribute", () => {
+    const { container } = render(
+      <FileUploadInput kind="image" id="avatar" value={null} onChange={noop} />,
+    );
+    expect(container.querySelector('input[type="file"]')?.hasAttribute("capture")).toBe(false);
+  });
+});

package/src/primitives/date-field.tsx

@@ -105,6 +105,14 @@ export function DateField({
         disabled={disabled}
         required={required}
         aria-invalid={hasError === true ? true : undefined}
+        // Deliberate: slot order/separator follow resolvedLocale (the
+        // `locale` prop, or the browser locale), but the letters follow
+        // the app's UI locale via t() — a caller rendering a date in a
+        // locale that differs from the UI locale gets a mixed-locale
+        // placeholder (e.g. German UI + locale="en-US" → "MM/TT/JJJJ").
+        // Accepted for now (fw#1879): a static per-locale letter lookup
+        // would need its own locale-root resolution and tests for a
+        // placeholder-only, Low-severity mismatch.
         placeholder={formatDatePlaceholder(resolvedLocale, {
           year: t("kumiko.field.dateField.placeholderYear"),
           month: t("kumiko.field.dateField.placeholderMonth"),

package/src/primitives/date-parse.ts

@@ -80,7 +80,12 @@ function localeDateParts(locale: string): Intl.DateTimeFormatPart[] {
   const refEpochMillis = activeTemporal()
     .PlainDate.from({ year: 2026, month: 1, day: 2 })
     .toZonedDateTime("UTC").epochMilliseconds;
-  return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(refEpochMillis);
+  return new Intl.DateTimeFormat(locale, {
+    timeZone: "UTC",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).formatToParts(refEpochMillis);
 }
 
 // Field order of the numeric locale format. de → [d,m,y], en-US →

package/src/primitives/dropdown-menu.tsx

@@ -83,6 +83,29 @@ export function DropdownMenuCheckboxItem({
   );
 }
 
+export const DropdownMenuRadioGroup = Primitive.RadioGroup;
+
+// RadioItem with a dot indicator on the left — for exclusive single-choice
+// selection (e.g. WorkspaceSwitcher). Unlike CheckboxItem, Radix renders
+// role="menuitemradio" + aria-checked here instead of role="menuitemcheckbox",
+// which announces "one of several" to screen readers instead of "on/off".
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): ReactNode {
+  return (
+    <Primitive.RadioItem className={cn(itemClass, "pl-8 pr-2", className)} {...props}>
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Primitive.ItemIndicator>
+          <Check className="h-3.5 w-3.5" />
+        </Primitive.ItemIndicator>
+      </span>
+      {children}
+    </Primitive.RadioItem>
+  );
+}
+
 export function DropdownMenuLabel({
   className,
   ...props

package/src/primitives/embedded-list-input.tsx

@@ -11,6 +11,12 @@
 // viewport, so the `hidden md:block` / `md:hidden` classes stay on the
 // wrapper divs too: on a phone that first (wrong) render is desktop but
 // CSS-hidden, not a visible flash of the wrong layout.
+//
+// ponytail: crossing the mobile/desktop breakpoint unmounts the active
+// layout and mounts the other, so an in-progress cell draft (uncommitted
+// MoneyInput text, IME composition) and focus are lost — accepted trade-off
+// for the single-mount-per-side fix above. Upgrade: lift per-cell draft
+// state into a `draftsByCellId` map here that survives the layout swap.
 
 import type { FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -19,7 +25,7 @@ import type {
   EmbeddedListInputProps,
   EmbeddedListTotal,
 } from "@cosmicdrift/kumiko-renderer";
-import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
 import {
   type ClipboardEvent,
@@ -94,10 +100,11 @@ function formatTotalValue(
   total: EmbeddedListTotal,
   columns: readonly EmbeddedListColumn[],
   currency: string,
+  locale: string,
 ): string {
   const column = columns.find((c) => c.field === total.field);
-  if (column?.type === "money") return formatMoney(total.value, currency);
-  return total.value.toLocaleString();
+  if (column?.type === "money") return formatMoney(total.value, currency, locale);
+  return total.value.toLocaleString(locale);
 }
 
 // Tab/newline-delimited clipboard text → 2D string grid. Not a regex
@@ -375,6 +382,7 @@ export function EmbeddedListInput({
   // callers/tests that predate #1839) keep getting the same "EUR" this
   // component always hardcoded.
   const effectiveCurrency = currency ?? "EUR";
+  const resolvedLocale = useLocale().locale();
   const isMobile = useIsMobile();
   const containerRef = useRef<HTMLDivElement>(null);
   const [pendingFocusCellId, setPendingFocusCellId] = useState<string | undefined>(undefined);
@@ -419,6 +427,7 @@ export function EmbeddedListInput({
   const handlePaste = (rowIndex: number, columnIndex: number) => {
     return (event: ClipboardEvent<HTMLElement>): void => {
       if (onPasteCells === undefined) return;
+      if (disabled === true) return;
       const text = event.clipboardData?.getData("text") ?? "";
       const grid = parsePasteGrid(text);
       const isMultiCell = grid.length > 1 || (grid[0]?.length ?? 0) > 1;
@@ -596,7 +605,7 @@ export function EmbeddedListInput({
                   <div key={total.field} className="flex items-baseline gap-2">
                     <span className="text-muted-foreground">{total.label}</span>
                     <span className="font-medium tabular-nums">
-                      {formatTotalValue(total, columns, effectiveCurrency)}
+                      {formatTotalValue(total, columns, effectiveCurrency, resolvedLocale)}
                     </span>
                   </div>
                 ))}
@@ -699,7 +708,7 @@ export function EmbeddedListInput({
                 <div key={total.field} className="flex items-center justify-between">
                   <span className="text-muted-foreground">{total.label}</span>
                   <span className="font-medium tabular-nums">
-                    {formatTotalValue(total, columns, effectiveCurrency)}
+                    {formatTotalValue(total, columns, effectiveCurrency, resolvedLocale)}
                   </span>
                 </div>
               ))}

package/src/primitives/file-upload.tsx

@@ -6,6 +6,7 @@
 import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import { ImageIcon, Loader2, Upload } from "lucide-react";
 import { type ChangeEvent, type ReactNode, useRef, useState } from "react";
+import { resizeImageBeforeUpload } from "../lib/resize-image";
 import { Button as UiButton } from "../ui/button";
 
 export type FileUploadInputProps = {
@@ -18,6 +19,7 @@ export type FileUploadInputProps = {
   readonly entityType?: string;
   readonly fieldName?: string;
   readonly imageVariant?: string;
+  readonly capture?: "environment" | "user";
 };
 
 // "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
@@ -36,6 +38,7 @@ export function FileUploadInput({
   entityType,
   fieldName,
   imageVariant,
+  capture,
 }: FileUploadInputProps): ReactNode {
   const inputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
@@ -47,8 +50,9 @@ export function FileUploadInput({
     setUploading(true);
     setError(null);
     try {
+      const uploadFile = await resizeImageBeforeUpload(file);
       const fd = new FormData();
-      fd.append("file", file);
+      fd.append("file", uploadFile);
       if (entityType !== undefined) fd.append("entityType", entityType);
       if (fieldName !== undefined) fd.append("fieldName", fieldName);
       // Double-Submit-CSRF wie der Dispatcher: kumiko_csrf-Cookie → Header.
@@ -103,6 +107,7 @@ export function FileUploadInput({
         type="file"
         className="hidden"
         {...(acceptAttr !== undefined && { accept: acceptAttr })}
+        {...(capture !== undefined && { capture })}
         onChange={(e) => void onPick(e)}
         disabled={disabled}
       />

package/src/primitives/index.tsx

@@ -37,6 +37,7 @@ import {
   type TextProps,
   useColumnRenderer,
   useTranslation,
+  type WizardStepGroupProps,
   WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
 import { cva } from "class-variance-authority";
@@ -188,11 +189,16 @@ function DefaultBanner({
   id,
 }: BannerProps): ReactNode {
   const isError = variant === "error";
+  // `id` is set when a <Field> wraps this Banner as its control (see
+  // BannerProps.id). A <div> isn't labelable, so a <label htmlFor> pointing
+  // at it is inert for screen readers — role="group" + aria-labelledby is
+  // the actual mechanism, pointed at the label id Field emits (fieldLabelId).
+  const bannerRole = id !== undefined ? "group" : isError ? "alert" : undefined;
   const banner = (
     <div
-      id={id}
+      role={bannerRole}
+      {...(id !== undefined && { "aria-labelledby": fieldLabelId(id) })}
       data-testid={testId}
-      role={isError ? "alert" : undefined}
       data-variant={variant}
       className={cn(
         "relative w-full rounded-lg border px-4 py-3 text-sm flex items-center gap-3",
@@ -213,6 +219,13 @@ function DefaultBanner({
 
 // ---- Field (Label + Error) ----
 
+// Matches DefaultBanner's aria-labelledby target: a non-labelable control
+// (e.g. Banner's <div>) can't take a real htmlFor, so Field always also
+// gives its label a stable id that such controls can point to.
+function fieldLabelId(id: string): string {
+  return `${id}-label`;
+}
+
 function DefaultField({
   id,
   label,
@@ -229,6 +242,7 @@ function DefaultField({
   const hasError = issues !== undefined && issues.length > 0;
   const labelEl = (
     <UiLabel
+      id={fieldLabelId(id)}
       htmlFor={id}
       className={cn(
         hasError ? "text-destructive" : "text-foreground",
@@ -236,7 +250,11 @@ function DefaultField({
       )}
     >
       {label}
-      {required === true && <span className="ml-0.5 text-destructive">*</span>}
+      {required === true && (
+        <span data-required className="ml-0.5 text-destructive">
+          *
+        </span>
+      )}
     </UiLabel>
   );
   const errorsEl = hasError ? (
@@ -435,6 +453,7 @@ function DefaultInput(props: InputProps): ReactNode {
           {...(props.entityType !== undefined && { entityType: props.entityType })}
           {...(props.fieldName !== undefined && { fieldName: props.fieldName })}
           {...(props.imageVariant !== undefined && { imageVariant: props.imageVariant })}
+          {...(props.capture !== undefined && { capture: props.capture })}
         />
       );
     case "date":
@@ -554,6 +573,7 @@ function DefaultInput(props: InputProps): ReactNode {
       return (
         <Textarea
           {...common}
+          readOnly={props.readOnly}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLTextAreaElement>) => props.onChange(e.target.value)}
           rows={props.rows ?? 4}
@@ -650,6 +670,7 @@ function DefaultDataTable({
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
   // Sticky würde mit der Topbar konkurrieren.
+  const hasTableActions = rowActions !== undefined && rowActions.length > 0;
   const tableContent =
     rows.length === 0 ? (
       <div
@@ -665,18 +686,86 @@ function DefaultDataTable({
       // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
       <div className="overflow-hidden rounded-lg border bg-card">
         <Table data-testid={testId}>
-          {tableInner(
-            columns,
-            rows,
-            onRowClick,
-            sort,
-            onSortChange,
-            rowActions,
-            rowActionMode,
-            onCellChange,
-            getRowTestId,
-            getCellTestId,
-          )}
+          <TableHeader className="bg-muted">
+            <TableRow className="hover:bg-transparent">
+              {columns.map((col) => (
+                <SortableHeader
+                  key={col.field}
+                  field={col.field}
+                  label={col.label}
+                  sortable={col.sortable === true}
+                  highlighted={col.highlighted === true}
+                  {...(sort !== undefined && sort !== null && { sort })}
+                  {...(onSortChange !== undefined && { onSortChange })}
+                />
+              ))}
+              {hasTableActions && (
+                <TableHead
+                  data-testid="column-actions"
+                  // sticky right-0 + bg-muted (= header tone) so the action
+                  // column stays at the right edge during horizontal scroll.
+                  // No border-l: a permanent divider looks heavy; the sticky
+                  // bg already sets the column apart during scroll anyway.
+                  className="sticky right-0 z-10 w-px bg-muted text-right text-muted-foreground"
+                  aria-label="Actions"
+                />
+              )}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
+                onClick={onRowClick !== undefined ? () => onRowClick(row) : undefined}
+                className={cn(onRowClick !== undefined && "cursor-pointer")}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.field}
+                    data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
+                    data-highlighted={col.highlighted === true ? "true" : undefined}
+                    // Cells truncate long values with ellipsis instead of
+                    // wrapping — lists stay single-line + scannable (Linear
+                    // pattern). max-w-xs gives a sensible default upper
+                    // bound; the table container scrolls horizontally
+                    // if the sum of the columns gets too wide.
+                    className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
+                    title={cellTitle(row.values[col.field])}
+                  >
+                    <DataTableCell
+                      value={row.values[col.field]}
+                      row={row.values}
+                      field={col.field}
+                      type={col.type}
+                      renderer={col.renderer}
+                      {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
+                      {...(onCellChange !== undefined && {
+                        onChange: (value: unknown) => onCellChange(row.id, col.field, value),
+                      })}
+                    />
+                  </TableCell>
+                ))}
+                {hasTableActions && (
+                  <TableCell
+                    data-testid={getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`}
+                    // Sticky-right so the actions stay visible on the right
+                    // edge during horizontal scroll. bg-background sets the
+                    // column apart during scroll — no border-l (divider too heavy).
+                    className="sticky right-0 z-10 bg-background text-right"
+                    // Action-cell events must not trigger the row click/activation
+                    // (typically "Open Detail" — the user wanted the action,
+                    // not navigation). We stopPropagation for mouse and
+                    // keyboard so a11y stays consistent.
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
+                    <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+          </TableBody>
         </Table>
       </div>
     );
@@ -767,105 +856,6 @@ function DefaultDataTable({
   );
 }
 
-function tableInner(
-  columns: DataTableProps["columns"],
-  rows: DataTableProps["rows"],
-  onRowClick?: DataTableProps["onRowClick"],
-  sort?: DataTableProps["sort"],
-  onSortChange?: DataTableProps["onSortChange"],
-  rowActions?: DataTableProps["rowActions"],
-  rowActionMode?: DataTableProps["rowActionMode"],
-  onCellChange?: DataTableProps["onCellChange"],
-  getRowTestId?: DataTableProps["getRowTestId"],
-  getCellTestId?: DataTableProps["getCellTestId"],
-): ReactNode {
-  const hasActions = rowActions !== undefined && rowActions.length > 0;
-  return (
-    <>
-      <TableHeader className="bg-muted">
-        <TableRow className="hover:bg-transparent">
-          {columns.map((col) => (
-            <SortableHeader
-              key={col.field}
-              field={col.field}
-              label={col.label}
-              sortable={col.sortable === true}
-              highlighted={col.highlighted === true}
-              {...(sort !== undefined && sort !== null && { sort })}
-              {...(onSortChange !== undefined && { onSortChange })}
-            />
-          ))}
-          {hasActions && (
-            <TableHead
-              data-testid="column-actions"
-              // sticky right-0 + bg-muted (= Header-Ton) damit die Action-
-              // Spalte beim horizontalen Scroll am rechten Rand bleibt. Kein
-              // border-l: der ständige Trenner wirkt schwer; die sticky-bg
-              // grenzt die Spalte beim Scroll ohnehin ab.
-              className="sticky right-0 z-10 w-px bg-muted text-right text-muted-foreground"
-              aria-label="Actions"
-            />
-          )}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {rows.map((row) => (
-          <TableRow
-            key={row.id}
-            data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
-            onClick={onRowClick !== undefined ? () => onRowClick(row) : undefined}
-            className={cn(onRowClick !== undefined && "cursor-pointer")}
-          >
-            {columns.map((col) => (
-              <TableCell
-                key={col.field}
-                data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
-                data-highlighted={col.highlighted === true ? "true" : undefined}
-                // Cells truncaten lange Werte mit ellipsis statt umzu-
-                // brechen — Lists bleiben einzeilig + scannbar (Linear-
-                // Pattern). max-w-xs gibt eine vernünftige Default-
-                // Obergrenze; der Table-Container scrollt horizontal
-                // falls die Summe der Spalten zu breit wird.
-                className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
-                title={cellTitle(row.values[col.field])}
-              >
-                <DataTableCell
-                  value={row.values[col.field]}
-                  row={row.values}
-                  field={col.field}
-                  type={col.type}
-                  renderer={col.renderer}
-                  {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
-                  {...(onCellChange !== undefined && {
-                    onChange: (value: unknown) => onCellChange(row.id, col.field, value),
-                  })}
-                />
-              </TableCell>
-            ))}
-            {hasActions && (
-              <TableCell
-                data-testid={`cell-${row.id}-actions`}
-                // Sticky-right damit beim horizontalen Scroll die Actions
-                // am rechten Rand sichtbar bleiben. bg-background grenzt die
-                // Spalte beim Scroll ab — kein border-l (Trenner zu schwer).
-                className="sticky right-0 z-10 bg-background text-right"
-                // Action-Cell-Events dürfen nicht den Row-Click/Activation
-                // triggern (typisch "Open Detail" — der User wollte ja die
-                // Action, nicht navigieren). Wir stopPropagation für Mouse
-                // UND Keyboard, damit a11y konsistent ist.
-                onClick={(e) => e.stopPropagation()}
-                onKeyDown={(e) => e.stopPropagation()}
-              >
-                <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
-              </TableCell>
-            )}
-          </TableRow>
-        ))}
-      </TableBody>
-    </>
-  );
-}
-
 // RowActionsCell — rendert die Row-Actions je nach mode:
 //   - "adaptive" (Default): ≤2 sichtbare Actions inline (rechtsbündig),
 //     >2 als Kebab-Dropdown.
@@ -1666,7 +1656,7 @@ function DefaultForm({
                 // `overflow-hidden` (only transform/filter/contain ancestors trap
                 // it, confirmed against AppLayout/SidebarInset — neither sets those).
                 stickyActions === true &&
-                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]",
+                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
               )}
             >
               {actions}
@@ -1722,7 +1712,6 @@ function DefaultSection({
   actions,
   variant = "default",
   testId,
-  hidden,
 }: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);
 
@@ -1758,11 +1747,9 @@ function DefaultSection({
     return (
       <section
         data-testid={testId}
-        hidden={hidden}
         className={cn(
           "flex flex-col gap-4 px-6 py-6",
           variant === "destructive" && "border-l-2 border-destructive/40",
-          hidden && "hidden",
         )}
       >
         {header}
@@ -1789,12 +1776,10 @@ function DefaultSection({
   return (
     <div
       data-testid={testId}
-      hidden={hidden}
       className={cn(
         cardSurface(),
         "overflow-hidden",
         variant === "destructive" && "border-destructive/40",
-        hidden && "hidden",
       )}
     >
       <div className="flex flex-col gap-4 px-6 py-6">
@@ -1929,6 +1914,14 @@ function DefaultStepBar({
   );
 }
 
+function DefaultWizardStepGroup({ hidden, children }: WizardStepGroupProps): ReactNode {
+  return (
+    <fieldset disabled={hidden} hidden={hidden} className={hidden ? undefined : "contents"}>
+      {children}
+    </fieldset>
+  );
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -2024,4 +2017,5 @@ export const defaultPrimitives: CorePrimitives = {
   Link: DefaultLink,
   Progress: DefaultProgress,
   StepBar: DefaultStepBar,
+  WizardStepGroup: DefaultWizardStepGroup,
 };