@cosmicdrift/kumiko-renderer-web 0.139.0 → 0.141.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.139.0",
+  "version": "0.141.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.139.0",
-    "@cosmicdrift/kumiko-headless": "0.139.0",
-    "@cosmicdrift/kumiko-renderer": "0.139.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.141.0",
+    "@cosmicdrift/kumiko-headless": "0.141.0",
+    "@cosmicdrift/kumiko-renderer": "0.141.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/primitives/index.tsx

@@ -124,9 +124,17 @@ function DefaultButton({
   loading,
   variant = "primary",
   size = "md",
+  ariaLabel,
+  width = "auto",
   children,
   testId,
 }: ButtonProps): ReactNode {
+  // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
+  // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
+  const className =
+    [variant === "link" ? "h-auto px-0 py-0" : "", width === "full" ? "w-full" : ""]
+      .filter(Boolean)
+      .join(" ") || undefined;
   return (
     <UiButton
       type={type}
@@ -136,9 +144,8 @@ function DefaultButton({
       data-loading={loading === true ? "true" : undefined}
       variant={BUTTON_VARIANT[variant]}
       size={BUTTON_SIZE[size]}
-      // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner),
-      // nicht als gepolsterte Buttonfläche.
-      className={variant === "link" ? "h-auto px-0 py-0" : undefined}
+      {...(ariaLabel !== undefined && { "aria-label": ariaLabel })}
+      className={className}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>

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

@@ -232,6 +232,32 @@ describe("Button size", () => {
     render(<SizedButton size="sm" />);
     expect(screen.getByRole("button", { name: "X" }).className).toContain("h-8");
   });
+
+  test("ariaLabel gibt icon-only-Buttons einen zugänglichen Namen", () => {
+    function IconBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button size="icon" ariaLabel="Entfernen" onClick={() => {}}>
+          ✕
+        </Button>
+      );
+    }
+    render(<IconBtn />);
+    expect(screen.getByRole("button", { name: "Entfernen" })).toBeTruthy();
+  });
+
+  test('width="full" streckt den Button (w-full)', () => {
+    function WideBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button width="full" onClick={() => {}}>
+          Upgrade
+        </Button>
+      );
+    }
+    render(<WideBtn />);
+    expect(screen.getByRole("button", { name: "Upgrade" }).className).toContain("w-full");
+  });
 });
 
 describe("ComparisonTable", () => {