@cosmicdrift/kumiko-renderer-web 0.233.0 → 0.235.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.233.0",
+  "version": "0.235.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.233.0",
-    "@cosmicdrift/kumiko-headless": "0.233.0",
-    "@cosmicdrift/kumiko-renderer": "0.233.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.235.0",
+    "@cosmicdrift/kumiko-headless": "0.235.0",
+    "@cosmicdrift/kumiko-renderer": "0.235.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.233.0"
+    "@cosmicdrift/kumiko-locale-de": "0.235.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/app-layout.test.tsx

@@ -1,6 +1,7 @@
-// AppLayout: pinnt den fill-Vertrag — Default ist der klassische
-// min-h-screen-Seitenflow, fill schaltet auf h-screen + innen-scrollendes
-// main (min-h-0). Plus die className/mainClassName-Erweiterungspunkte.
+// AppLayout: pinnt den fill-Vertrag — Default ist die viewport-hohe
+// Shell (h-screen, main scrollt innen via min-h-0), fill={false} ist der
+// Escape-Hatch auf den klassischen min-h-screen-Seitenflow.
+// Plus die className/mainClassName-Erweiterungspunkte.
 
 import { describe, expect, test } from "bun:test";
 import { AppLayout } from "../layout/app-layout";
@@ -13,23 +14,23 @@ function root(container: HTMLElement): HTMLElement {
 }
 
 describe("AppLayout fill", () => {
-  test("Default → min-h-screen (Seiten-Scroll), kein fill-Marker", () => {
+  test("Default → h-screen + main min-h-0 (Innen-Scroll), fill-Marker gesetzt", () => {
     const { container } = render(<AppLayout>x</AppLayout>);
     const el = root(container);
-    expect(el.className).toContain("min-h-screen");
-    expect(el.getAttribute("data-kumiko-fill")).toBeNull();
-    expect((container.querySelector("main") as HTMLElement).className).not.toContain("min-h-0");
-  });
-
-  test("fill → h-screen + main min-h-0 (Innen-Scroll), fill-Marker gesetzt", () => {
-    const { container } = render(<AppLayout fill>x</AppLayout>);
-    const el = root(container);
     expect(el.className).not.toContain("min-h-screen");
     expect(el.className).toContain("h-screen");
     expect(el.getAttribute("data-kumiko-fill")).toBe("true");
     expect((container.querySelector("main") as HTMLElement).className).toContain("min-h-0");
   });
 
+  test("fill={false} → min-h-screen (Seiten-Scroll), kein fill-Marker (Escape-Hatch)", () => {
+    const { container } = render(<AppLayout fill={false}>x</AppLayout>);
+    const el = root(container);
+    expect(el.className).toContain("min-h-screen");
+    expect(el.getAttribute("data-kumiko-fill")).toBeNull();
+    expect((container.querySelector("main") as HTMLElement).className).not.toContain("min-h-0");
+  });
+
   test("className/mainClassName werden an die Defaults angehängt", () => {
     const { container } = render(
       <AppLayout className="bg-gradient-test" mainClassName="main-test">

package/src/__tests__/default-app-shell.test.tsx

@@ -130,3 +130,36 @@ describe("DefaultAppShell wires user.roles into children for screen-level access
     expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
   });
 });
+
+describe("DefaultAppShell fill default", () => {
+  test("fill defaults to true: applies h-svh on root and min-h-0 on inset/main", () => {
+    render(
+      <DefaultAppShell brand={<span>Brand</span>} schema={makeSchema()}>
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    const root = document.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(root?.classList.contains("h-svh")).toBe(true);
+    const inset = document.querySelector('[data-slot="sidebar-inset"]');
+    expect(inset?.classList.contains("min-h-0")).toBe(true);
+    const mains = screen.getAllByRole("main");
+    const innerMain = mains.find((m) => m !== inset);
+    expect(innerMain?.classList.contains("min-h-0")).toBe(true);
+    expect(innerMain?.classList.contains("flex-1")).toBe(true);
+    expect(innerMain?.classList.contains("overflow-auto")).toBe(true);
+  });
+
+  // fill={false} is the escape hatch back to page-scroll: must not apply
+  // viewport-lock classes.
+  test("fill={false} does not apply h-svh or min-h-0", () => {
+    render(
+      <DefaultAppShell brand={<span>Brand</span>} schema={makeSchema()} fill={false}>
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    const root = document.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(root?.classList.contains("h-svh")).toBe(false);
+    const inset = document.querySelector('[data-slot="sidebar-inset"]');
+    expect(inset?.classList.contains("min-h-0")).toBe(false);
+  });
+});

package/src/__tests__/form-action-bar.test.tsx

@@ -29,7 +29,7 @@ describe("DefaultForm Action-Footer", () => {
     expect(footer.className).toContain("sm:justify-between");
     expect(footer.className).toContain("border-t");
     // Footer sits in the form shell (buttons align with the field edge).
-    expect(actions.closest(".max-w-full")).toBeTruthy();
+    expect(actions.closest(".max-w-4xl")).toBeTruthy();
     // Title is its own heading above — not inside the action bar.
     expect(actions.textContent).not.toContain("Titel");
     expect(screen.getByTestId("f-title").textContent).toBe("Titel");

package/src/__tests__/kumiko-screen.test.tsx

@@ -4,6 +4,7 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  ProjectionListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
@@ -438,9 +439,9 @@ describe("KumikoScreen", () => {
   // Issue #912 — Copy-Link-Action. KumikoScreen threads an already-bound
   // onCopyLink callback down to RenderEdit (the actual URL-build/clipboard
   // impl lives in renderer-web's RoutedScreen, outside this test — here we
-  // only verify the wiring: button renders in update-mode, fires the
-  // callback, and shows the "copied" label afterwards).
-  test("entityEdit update-mode: Copy-Link-Button feuert onCopyLink + zeigt 'copied'-Label", async () => {
+  // only verify the wiring: button renders icon-only in update-mode, fires
+  // the callback, and swaps its accessible name to "copied" afterwards.
+  test("entityEdit update-mode: Copy-Link-Button feuert onCopyLink + zeigt 'copied'-Accessible-Name", async () => {
     const user = userEvent.setup();
     const onCopyLink = mock(() => Promise.resolve());
     const dispatcher = makeDispatcher({
@@ -462,7 +463,9 @@ describe("KumikoScreen", () => {
     await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
 
     const button = screen.getByTestId("render-edit-copy-link");
+    // Icon + visible label; accessible name comes from the label text itself.
     expect(button.textContent).toBe("Copy link");
+    expect(button.querySelector("svg")).toBeTruthy();
     await user.click(button);
     expect(onCopyLink).toHaveBeenCalledTimes(1);
     await waitFor(() => expect(button.textContent).toBe("Copied!"));
@@ -2449,3 +2452,290 @@ describe("KumikoScreen: actionForm extension-section", () => {
     expect(screen.getByTestId("update-timeline").textContent).toBe("inc-7");
   });
 });
+
+// --- entityEdit header actions (fw entityEdit-actions) ---
+// EntityEditScreenDefinition.actions mirrors ProjectionDetailScreenDefinition.
+// actions — same RenderEdit `actions` prop, same icon-only collapse rule
+// (shouldRenderActionsIconOnly: >2 actions, every one resolves an icon).
+describe("KumikoScreen: entityEdit header actions", () => {
+  const threeActionsScreen: EntityEditScreenDefinition = {
+    id: "task-edit-actions-3",
+    type: "entityEdit",
+    entity: "task",
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+    // ids match ACTION_ICON_BY_ID entries (publish/archive/duplicate) so
+    // every action resolves an icon without an explicit `icon` field.
+    actions: [
+      { id: "publish", label: "Publish", handler: "tasks:write:task:publish" },
+      { id: "archive", label: "Archive", handler: "tasks:write:task:archive" },
+      { id: "duplicate", label: "Duplicate", handler: "tasks:write:task:duplicate" },
+    ],
+  };
+  const twoActionsScreen: EntityEditScreenDefinition = {
+    ...threeActionsScreen,
+    id: "task-edit-actions-2",
+    actions: threeActionsScreen.actions?.slice(0, 2),
+  };
+  const actionsSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [threeActionsScreen, twoActionsScreen],
+  };
+  const detailDispatcher = () =>
+    makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "task-1", version: 1, title: "loaded", count: 0, done: false },
+      })) as unknown as Dispatcher["query"],
+    });
+
+  test("update-mode mit drei Header-Actions kollabiert auf Icon-only mit ariaLabel", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-3"
+          entityId="task-1"
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const cases = [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const;
+    for (const [id, label] of cases) {
+      const button = screen.getByTestId(`render-edit-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("update-mode mit zwei Header-Actions zeigt weiterhin sichtbaren Text", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-2"
+          entityId="task-1"
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    expect(screen.getByTestId("render-edit-action-publish").textContent).toBe("Publish");
+    expect(screen.getByTestId("render-edit-action-archive").textContent).toBe("Archive");
+  });
+
+  test("update-mode mit drei Header-Actions kollabiert auch den Copy-Link-Button auf Icon-only mit ariaLabel", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-3"
+          entityId="task-1"
+          onCopyLink={() => Promise.resolve()}
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("render-edit-copy-link");
+    expect(button.textContent).toBe("");
+    expect(button.getAttribute("aria-label")).toBe("Copy link");
+  });
+
+  // Design decision (fw entityEdit-actions): actions target an EXISTING
+  // record (publish/archive/duplicate and friends) — create mode has none
+  // yet, so EntityEditCreateBody never builds a headerActions prop at all.
+  test("create-mode (kein entityId) rendert keine Header-Actions", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen schema={actionsSchema} qn="tasks:screen:task-edit-actions-3" />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-action-publish")).toBeNull();
+    expect(screen.queryByTestId("render-edit-action-archive")).toBeNull();
+    expect(screen.queryByTestId("render-edit-action-duplicate")).toBeNull();
+  });
+});
+
+// --- entityList status cells + row actions (fw#2579, fw#2580) ---
+// Both are leftovers from #2575: the tone heuristic and the icon-only
+// collapse existed, but neither reached a list cell. These render the real
+// entityList pipeline (KumikoScreen -> EntityListBody -> RenderList ->
+// DataTable) against the real web primitives.
+describe("KumikoScreen: entityList cell rendering", () => {
+  const orderEntity = {
+    fields: {
+      title: { type: "text", required: true },
+      status: { type: "select", options: ["active", "unmapped-value", "constructor"] },
+    },
+  } as unknown as EntityDefinition;
+
+  const statusListScreen: EntityListScreenDefinition = {
+    id: "order-list",
+    type: "entityList",
+    entity: "order",
+    columns: ["title", "status"],
+  };
+
+  // publish/archive/duplicate all resolve an icon from their id
+  // (ACTION_ICON_BY_ID), which is what arms the icon-only collapse.
+  const rowActionListScreen: EntityListScreenDefinition = {
+    id: "order-list-actions",
+    type: "entityList",
+    entity: "order",
+    columns: ["title"],
+    rowActions: [
+      { id: "publish", label: "Publish", handler: "orders:write:order:publish" },
+      { id: "archive", label: "Archive", handler: "orders:write:order:archive" },
+      { id: "duplicate", label: "Duplicate", handler: "orders:write:order:duplicate" },
+    ],
+  };
+
+  // "review" has no icon in ACTION_ICON_BY_ID, so this group must stay on
+  // the adaptive default (kebab) instead of collapsing.
+  const mixedActionListScreen: EntityListScreenDefinition = {
+    id: "order-list-mixed",
+    type: "entityList",
+    entity: "order",
+    columns: ["title"],
+    rowActions: [
+      { id: "publish", label: "Publish", handler: "orders:write:order:publish" },
+      { id: "archive", label: "Archive", handler: "orders:write:order:archive" },
+      { id: "review", label: "Review", handler: "orders:write:order:review" },
+    ],
+  };
+
+  // projectionList reaches the same RenderList/DataTable path, so the collapse
+  // has to hold there too.
+  const projectionActionListScreen: ProjectionListScreenDefinition = {
+    id: "order-projection-actions",
+    type: "projectionList",
+    query: "orders:query:order:list",
+    columns: [{ field: "title", label: "Title" }],
+    rowActions: [
+      {
+        kind: "writeHandler",
+        id: "publish",
+        label: "Publish",
+        handler: "orders:write:order:publish",
+      },
+      {
+        kind: "writeHandler",
+        id: "archive",
+        label: "Archive",
+        handler: "orders:write:order:archive",
+      },
+      {
+        kind: "writeHandler",
+        id: "duplicate",
+        label: "Duplicate",
+        handler: "orders:write:order:duplicate",
+      },
+    ],
+  };
+
+  const orderSchema: FeatureSchema = {
+    featureName: "orders",
+    entities: { order: orderEntity },
+    screens: [
+      statusListScreen,
+      rowActionListScreen,
+      mixedActionListScreen,
+      projectionActionListScreen,
+    ],
+  };
+
+  function orderDispatcher(rows: readonly Record<string, unknown>[]): Dispatcher {
+    return makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows, nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+  }
+
+  async function renderOrderList(
+    qn: string,
+    rows: readonly Record<string, unknown>[],
+  ): Promise<void> {
+    render(
+      <DispatcherProvider dispatcher={orderDispatcher(rows)}>
+        <KumikoScreen schema={orderSchema} qn={qn} />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+  }
+
+  test("a known status value renders a toned badge, not the muted default (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "active" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-status-ok");
+    expect(badge?.className).not.toContain("text-muted-foreground");
+    expect(badge?.textContent).toBe("Active");
+  });
+
+  test("an unmapped select value keeps the neutral pill (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "unmapped-value" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-muted-foreground");
+    expect(badge?.className).not.toContain("text-status-ok");
+  });
+
+  test("an Object.prototype key is not mistaken for a tone (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "constructor" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-muted-foreground");
+  });
+
+  test("three icon-bearing row actions collapse to icon-only buttons (#2580)", async () => {
+    await renderOrderList("orders:screen:order-list-actions", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
+    for (const [id, label] of [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const) {
+      const button = screen.getByTestId(`row-r1-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("projectionList row actions collapse the same way (#2580)", async () => {
+    await renderOrderList("orders:screen:order-projection-actions", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
+    for (const [id, label] of [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const) {
+      const button = screen.getByTestId(`row-r1-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("a row-action group with an icon-less member stays on the kebab (#2580)", async () => {
+    await renderOrderList("orders:screen:order-list-mixed", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
+    expect(screen.queryByTestId("row-r1-action-publish")).toBeNull();
+  });
+});

package/src/__tests__/primitives.test.tsx

@@ -15,7 +15,7 @@ import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen, waitFor } from "./test-utils";
 
-const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
+const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card, Section } =
   defaultPrimitives;
 
 describe("Button", () => {
@@ -178,10 +178,10 @@ describe("Input kind mapping", () => {
     expect(onChange).toHaveBeenLastCalledWith(undefined);
   });
 
-  test('kind="boolean": onChange receives checked', () => {
+  test('kind="boolean" outside layout="inline": renders a switch, onChange receives checked', () => {
     const onChange = mock();
     render(<Input id="i" name="i" kind="boolean" value={false} onChange={onChange} />);
-    fireEvent.click(screen.getByRole("checkbox"));
+    fireEvent.click(screen.getByRole("switch"));
     expect(onChange).toHaveBeenCalledWith(true);
   });
 
@@ -288,6 +288,91 @@ describe("Input kind mapping", () => {
   });
 });
 
+// Boolean fields render a switch inside a standard (stacked) Field — matching
+// every other field's label-above-control arrangement — while layout="inline"
+// Fields (MultiSelectCheckboxes, the BooleanField widget) keep the checkbox.
+describe("Input kind=boolean: switch vs checkbox", () => {
+  test("Field (default layout) + Input(boolean): renders role=switch, not checkbox", () => {
+    render(
+      <Field id="active" label="Active" testId="field-active">
+        <Input id="active" name="active" kind="boolean" value={false} onChange={mock()} />
+      </Field>,
+    );
+    const field = screen.getByTestId("field-active");
+    expect(field.querySelector('[role="switch"]')).toBeTruthy();
+    expect(field.querySelector('[role="checkbox"]')).toBeNull();
+  });
+
+  test("Field(layout=inline) + Input(boolean): keeps the checkbox", () => {
+    render(
+      <Field id="opt" label="Option A" layout="inline" testId="field-opt">
+        <Input id="opt" name="opt" kind="boolean" value={false} onChange={mock()} />
+      </Field>,
+    );
+    const field = screen.getByTestId("field-opt");
+    expect(field.querySelector('[role="checkbox"]')).toBeTruthy();
+    expect(field.querySelector('[role="switch"]')).toBeNull();
+  });
+
+  test("clicking the switch reports the inverted value to onChange", () => {
+    const onChange = mock();
+    render(<Input id="active" name="active" kind="boolean" value={true} onChange={onChange} />);
+    fireEvent.click(screen.getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  test("aria-checked reflects the value, and the switch toggles via keyboard", async () => {
+    const onChange = mock();
+    const { rerender } = render(
+      <Input id="active" name="active" kind="boolean" value={false} onChange={onChange} />,
+    );
+    expect(screen.getByRole("switch").getAttribute("aria-checked")).toBe("false");
+
+    rerender(<Input id="active" name="active" kind="boolean" value={true} onChange={onChange} />);
+    expect(screen.getByRole("switch").getAttribute("aria-checked")).toBe("true");
+
+    const user = userEvent.setup();
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("switch"));
+    await user.keyboard(" ");
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  test("disabled prevents toggling", () => {
+    const onChange = mock();
+    render(
+      <Input id="active" name="active" kind="boolean" value={false} onChange={onChange} disabled />,
+    );
+    const toggle = screen.getByRole("switch") as HTMLButtonElement;
+    expect(toggle.disabled).toBe(true);
+    fireEvent.click(toggle);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("boolean field's label sits above the control, same as a text field's", () => {
+    render(
+      <>
+        <Field id="active" label="Active" testId="field-active">
+          <Input id="active" name="active" kind="boolean" value={false} onChange={mock()} />
+        </Field>
+        <Field id="title" label="Title" testId="field-title">
+          <Input id="title" name="title" kind="text" value="" onChange={mock()} />
+        </Field>
+      </>,
+    );
+
+    const booleanField = screen.getByTestId("field-active");
+    const textField = screen.getByTestId("field-title");
+
+    // Same structural shape: label-row first, control second — the exact
+    // regression the old inline-layout checkbox introduced for booleans.
+    expect(booleanField.children[0]?.querySelector("label")).toBeTruthy();
+    expect(booleanField.children[1]?.getAttribute("role")).toBe("switch");
+    expect(textField.children[0]?.querySelector("label")).toBeTruthy();
+    expect(textField.children[1]?.tagName).toBe("INPUT");
+  });
+});
+
 describe("DataTable", () => {
   test("empty rows render empty-state slot with derived testId", () => {
     render(
@@ -1036,6 +1121,76 @@ describe("DataTable", () => {
       // beim Action-Click gleichzeitig zum Edit-Screen navigieren.
       expect(onRowClick).not.toHaveBeenCalled();
     });
+
+    // fw-ui-defaults: rowActionMode="inline" renders every action as an
+    // always-visible button (no Kebab, unlike adaptive) — a group with more
+    // than two icon-carrying actions collapses to icon-only so it doesn't
+    // become a wall of text buttons.
+    describe("icon-only collapse (mode='inline', >2 actions, all carry an icon)", () => {
+      test("renders icon-only buttons with an accessible name per action", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "archive", label: "Archive", icon: "archive", onTrigger: mock() },
+              { id: "delete", label: "Delete", icon: "trash", onTrigger: mock() },
+            ]}
+          />,
+        );
+        for (const [id, label] of [
+          ["edit", "Edit"],
+          ["archive", "Archive"],
+          ["delete", "Delete"],
+        ] as const) {
+          expect(screen.getByTestId(`row-r1-action-${id}`).getAttribute("aria-label")).toBe(label);
+        }
+        const editButton = screen.getByTestId("row-r1-action-edit");
+        // Icon-only: children (the label text) are gone, only the <svg> renders.
+        expect(editButton.textContent).toBe("");
+        expect(editButton.querySelector("svg")).not.toBeNull();
+        expect(editButton.getAttribute("title")).toBe("Edit");
+      });
+
+      test("a group of exactly two icon actions keeps the text label (rule needs >2)", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "delete", label: "Delete", icon: "trash", onTrigger: mock() },
+            ]}
+          />,
+        );
+        expect(screen.getByTestId("row-r1-action-edit").textContent).toContain("Edit");
+        expect(screen.getByTestId("row-r1-action-delete").textContent).toContain("Delete");
+      });
+
+      test("a mixed group (one action without an icon) keeps every label as text", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "archive", label: "Archive", icon: "archive", onTrigger: mock() },
+              { id: "custom", label: "Custom", onTrigger: mock() },
+            ]}
+          />,
+        );
+        expect(screen.getByTestId("row-r1-action-edit").textContent).toContain("Edit");
+        expect(screen.getByTestId("row-r1-action-archive").textContent).toContain("Archive");
+        expect(screen.getByTestId("row-r1-action-custom").textContent).toContain("Custom");
+      });
+    });
   });
 
   describe("highlighted column", () => {
@@ -1518,6 +1673,30 @@ describe("Card", () => {
   });
 });
 
+describe("Section", () => {
+  test("declared icon renders left of the title", () => {
+    render(
+      <Section title="Text" icon="tag" testId="s">
+        <span>body</span>
+      </Section>,
+    );
+    const titleEl = screen.getByTestId("s-title");
+    expect(titleEl.querySelector("svg")).not.toBeNull();
+    expect(titleEl.className).toContain("items-center");
+  });
+
+  test("no icon → header renders exactly as before (no svg, no layout change)", () => {
+    render(
+      <Section title="Text" testId="s">
+        <span>body</span>
+      </Section>,
+    );
+    const titleEl = screen.getByTestId("s-title");
+    expect(titleEl.querySelector("svg")).toBeNull();
+    expect(titleEl.textContent).toBe("Text");
+  });
+});
+
 describe("Stack", () => {
   test("gap-Variante bildet auf die Tailwind-gap-Klasse ab", () => {
     render(