@primitiv-ui/react 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./src/index.ts",

package/src/Tabs/README.md

@@ -107,4 +107,5 @@ pattern (child handler runs first, then the trigger's):
 
 Both `data-state` (`"active"` | `"inactive"`) and
 `data-orientation` (`"horizontal"` | `"vertical"`) are available on
-every rendered element.
+every rendered element. `Tabs.Trigger` also sets `data-disabled=""`
+when disabled (omitted otherwise), matching the rest of the library.

package/src/Tabs/Tabs.tsx

@@ -238,6 +238,8 @@ TabsList.displayName = "TabsList";
  * **Styling hooks.**
  * - `data-state="active" | "inactive"` on the rendered element.
  * - `data-orientation="horizontal" | "vertical"`.
+ * - `data-disabled=""` when disabled (omitted otherwise), so CSS can target
+ *   `[data-disabled]` without the `:disabled` pseudo-class.
  *
  * @example Basic usage
  * ```tsx
@@ -297,7 +299,7 @@ export function TabsTrigger<T extends HTMLElement = HTMLButtonElement>({
     "aria-controls": panelId,
     "aria-selected": isActive,
     "aria-disabled": disabled,
-    "data-disabled": disabled,
+    "data-disabled": disabled ? "" : undefined,
     "data-orientation": orientation,
     "data-state": state,
     tabIndex,

package/src/Tabs/__tests__/Tabs.contract.test.tsx

@@ -0,0 +1,153 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+import { render, screen } from "@testing-library/react";
+
+import { Tabs } from "../Tabs";
+
+/**
+ * Auto-verification of the Tabs styling contract (RFC 0004 §3.4 / D15). The
+ * `data-*` half of `registry/components/tabs/contract.json` is *derived from and
+ * asserted against the rendered headless component* so it can never drift from
+ * what the component actually emits. Tabs is the first **structural** compound:
+ * its data-* surface is spread across the root container and the `list` /
+ * `trigger` / `content` subcomponents, so the guard walks each part by its ARIA
+ * role. The authored half (BEM classes, modifiers, custom properties) is a
+ * styling convention the headless layer does not emit and is checked by the
+ * generator drift-guards instead.
+ */
+const contractPath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../../../registry/components/tabs/contract.json",
+);
+const contract = JSON.parse(readFileSync(contractPath, "utf8"));
+
+type DataAttribute = { name: string; value: string; when: string; source: string };
+
+/** Every `data-*` attribute name present on an element, sorted and de-duped. */
+function dataAttributeNames(element: Element): string[] {
+  return [
+    ...new Set(
+      [...element.attributes]
+        .map((attribute) => attribute.name)
+        .filter((name) => name.startsWith("data-")),
+    ),
+  ].sort();
+}
+
+/** The distinct auto-verified data-* names a part's contract declares. */
+function contractedNames(dataAttributes: DataAttribute[]): string[] {
+  return [
+    ...new Set(
+      dataAttributes
+        .filter((attribute) => attribute.source === "auto")
+        .map((attribute) => attribute.name),
+    ),
+  ].sort();
+}
+
+const subcontract = (name: string): { dataAttributes: DataAttribute[] } =>
+  contract.subcomponents.find((sub: { name: string }) => sub.name === name);
+
+function renderTabs(orientation: "horizontal" | "vertical" = "horizontal") {
+  return render(
+    <Tabs.Root defaultValue="a" orientation={orientation}>
+      <Tabs.List label="Sections">
+        <Tabs.Trigger value="a">A</Tabs.Trigger>
+        <Tabs.Trigger value="b" disabled>
+          B
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="a">Panel A</Tabs.Content>
+      <Tabs.Content value="b">Panel B</Tabs.Content>
+    </Tabs.Root>,
+  );
+}
+
+describe("Tabs styling contract", () => {
+  it("declares every data-* attribute on every part as auto-verified", () => {
+    const all: DataAttribute[] = [
+      ...contract.dataAttributes,
+      ...contract.subcomponents.flatMap(
+        (sub: { dataAttributes: DataAttribute[] }) => sub.dataAttributes,
+      ),
+    ];
+    expect(all.every((attribute) => attribute.source === "auto")).toBe(true);
+  });
+
+  it("root emits exactly its contracted data-* names", () => {
+    const { container } = renderTabs();
+    const root = container.firstElementChild as HTMLElement;
+    expect(dataAttributeNames(root)).toEqual(contractedNames(contract.dataAttributes));
+  });
+
+  it("list emits exactly its contracted data-* names", () => {
+    renderTabs();
+    expect(dataAttributeNames(screen.getByRole("tablist"))).toEqual(
+      contractedNames(subcontract("list").dataAttributes),
+    );
+  });
+
+  it("trigger emits exactly its contracted data-* names across its states", () => {
+    renderTabs();
+    const emitted = new Set<string>();
+    for (const trigger of screen.getAllByRole("tab")) {
+      for (const name of dataAttributeNames(trigger)) emitted.add(name);
+    }
+    expect([...emitted].sort()).toEqual(
+      contractedNames(subcontract("trigger").dataAttributes),
+    );
+  });
+
+  it("content emits exactly its contracted data-* names across its states", () => {
+    renderTabs();
+    const emitted = new Set<string>();
+    for (const panel of screen.getAllByRole("tabpanel", { hidden: true })) {
+      for (const name of dataAttributeNames(panel)) emitted.add(name);
+    }
+    expect([...emitted].sort()).toEqual(
+      contractedNames(subcontract("content").dataAttributes),
+    );
+  });
+
+  it("emits data-state with the documented value on trigger and content", () => {
+    renderTabs();
+    const [activeTrigger, inactiveTrigger] = screen.getAllByRole("tab");
+    expect(activeTrigger).toHaveAttribute("data-state", "active");
+    expect(inactiveTrigger).toHaveAttribute("data-state", "inactive");
+
+    const panels = screen.getAllByRole("tabpanel", { hidden: true });
+    expect(panels[0]).toHaveAttribute("data-state", "active");
+    expect(panels[1]).toHaveAttribute("data-state", "inactive");
+  });
+
+  it("emits data-orientation with the documented value on every part", () => {
+    const { container, unmount } = renderTabs("vertical");
+    expect(container.firstElementChild).toHaveAttribute("data-orientation", "vertical");
+    expect(screen.getByRole("tablist")).toHaveAttribute("data-orientation", "vertical");
+    expect(screen.getAllByRole("tab")[0]).toHaveAttribute("data-orientation", "vertical");
+    expect(screen.getAllByRole("tabpanel", { hidden: true })[0]).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+    unmount();
+
+    renderTabs("horizontal");
+    expect(screen.getAllByRole("tab")[0]).toHaveAttribute(
+      "data-orientation",
+      "horizontal",
+    );
+  });
+
+  it("emits data-disabled on the trigger exactly as the contract documents it", () => {
+    const entry = subcontract("trigger").dataAttributes.find(
+      (attribute) => attribute.name === "data-disabled",
+    )!;
+    renderTabs();
+    const [enabledTrigger, disabledTrigger] = screen.getAllByRole("tab");
+    // Button/Switch convention: present as "" when disabled, omitted otherwise.
+    expect(disabledTrigger).toHaveAttribute("data-disabled", entry.value);
+    expect(enabledTrigger).not.toHaveAttribute("data-disabled");
+  });
+});

package/src/Tabs/__tests__/Tabs.disabled-tabs.test.tsx

@@ -61,7 +61,7 @@ describe("Tabs disabled tabs tests", () => {
     expect(firstTab).toHaveAttribute("aria-disabled", "true");
   });
 
-  it("should have the data-disabled attribute set to false by default", () => {
+  it("should not set the data-disabled attribute by default", () => {
     // Arrange
     render(
       <Tabs.Root defaultValue="tab1">
@@ -75,11 +75,11 @@ describe("Tabs disabled tabs tests", () => {
     );
     const firstTab = screen.getByRole("tab", { name: "Tab 1" });
 
-    // Assert
-    expect(firstTab).toHaveAttribute("data-disabled", "false");
+    // Assert — matches the Button/Switch convention: omitted when enabled.
+    expect(firstTab).not.toHaveAttribute("data-disabled");
   });
 
-  it("should have the data-disabled attribute set to true when disabled prop is provided", () => {
+  it("should set data-disabled to an empty string when disabled prop is provided", () => {
     // Arrange
     render(
       <Tabs.Root defaultValue="tab1">
@@ -95,8 +95,8 @@ describe("Tabs disabled tabs tests", () => {
     );
     const firstTab = screen.getByRole("tab", { name: "Tab 1" });
 
-    // Assert
-    expect(firstTab).toHaveAttribute("data-disabled", "true");
+    // Assert — matches the Button/Switch convention: "" when disabled.
+    expect(firstTab).toHaveAttribute("data-disabled", "");
   });
 
   it("should not change the currently active panel when clicking on a disabled tab", async () => {