style state from aria/data attributes, not props (pagination current, checkbox label disabled)

Same redundancy as tone: a styling prop re-encoding a state already on the element for a11y/Base UI.
- PaginationPageButton drops the current prop — the selected fill keys off aria-current=page (which
  the ready-made already sets to name the current page for assistive tech).
- CheckboxLabel drops the disabled prop — the row dims off the wrapped checkbox's data-disabled via
  :has([data-disabled]) (Base UI sets it / Field propagates it).
Verified via play tests (selected fill / disabled cursor render off the attribute, no prop).

Author: lifeiscontent

packages/propel/src/components/checkbox/checkbox.stories.tsx

@@ -249,6 +249,11 @@ export const DisabledDoesNotToggle: Story = {
     const checkbox = canvas.getByRole("checkbox");
     await expect(checkbox).toHaveAttribute("aria-checked", "false");
     await expect(checkbox).toHaveAttribute("aria-disabled", "true");
+    // The label row dims itself off the disabled box (`label:has([data-disabled])`), no prop needed:
+    // the not-allowed cursor renders even though `CheckboxLabel` takes no `disabled` prop.
+    const labelRow = checkbox.closest("label");
+    await expect(labelRow).not.toBeNull();
+    if (labelRow) await expect(getComputedStyle(labelRow).cursor).toBe("not-allowed");
     // Clicking the disabled control must not flip its state.
     await userEvent.click(checkbox);
     await expect(checkbox).toHaveAttribute("aria-checked", "false");

packages/propel/src/components/checkbox/checkbox.tsx

@@ -50,7 +50,7 @@ export function Checkbox({ label, inlineStartNode, id, ...props }: CheckboxProps
   if (label == null) return box;
 
   return (
-    <CheckboxLabel disabled={props.disabled ?? false} htmlFor={checkboxId}>
+    <CheckboxLabel htmlFor={checkboxId}>
       {box}
       {inlineStartNode ? (
         <CheckboxInlineStartNode>{inlineStartNode}</CheckboxInlineStartNode>

packages/propel/src/components/pagination/pagination.tsx

@@ -236,7 +236,6 @@ export function Pagination({
               <PaginationPageButton
                 aria-label={l.page(token)}
                 aria-current={isCurrent ? "page" : undefined}
-                current={isCurrent}
                 disabled={isCurrent}
                 onClick={() => onPageChange(token)}
               >

packages/propel/src/ui/checkbox/checkbox-label.tsx

@@ -1,20 +1,19 @@
 import type * as React from "react";
 
-import { checkboxLabelVariants, type CheckboxLabelDisabled } from "./variants";
+import { checkboxLabelVariants } from "./variants";
 
 export type CheckboxLabelProps = Omit<
   React.ComponentPropsWithoutRef<"label">,
   "className" | "style"
-> & {
-  /** Whether the row reads as disabled (drops the pointer cursor and hover background). */
-  disabled: CheckboxLabelDisabled;
-};
+>;
 
 /**
  * The clickable row chip that wraps a `Checkbox` box with an optional `CheckboxInlineStartNode` and
  * the label text, matching the Figma "Checkbox with label" component. Associate it with the box via
- * `htmlFor` so clicking anywhere in the row toggles the box.
+ * `htmlFor` so clicking anywhere in the row toggles the box. The row reads its disabled look off
+ * the wrapped `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled`
+ * prop.
  */
-export function CheckboxLabel({ disabled, ...props }: CheckboxLabelProps) {
-  return <label className={checkboxLabelVariants({ disabled })} {...props} />;
+export function CheckboxLabel(props: CheckboxLabelProps) {
+  return <label className={checkboxLabelVariants()} {...props} />;
 }

packages/propel/src/ui/checkbox/checkbox.stories.tsx

@@ -126,7 +126,7 @@ export const States: Story = {
 export const Labeled: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <CheckboxLabel disabled={false} htmlFor="ui-checkbox-labeled">
+    <CheckboxLabel htmlFor="ui-checkbox-labeled">
       <Checkbox id="ui-checkbox-labeled">
         <CheckboxIndicator>
           <Check aria-hidden />

packages/propel/src/ui/checkbox/index.tsx

@@ -3,4 +3,3 @@ export * from "./checkbox-indicator";
 export * from "./checkbox-indeterminate-indicator";
 export * from "./checkbox-label";
 export * from "./checkbox-inline-start-node";
-export type { CheckboxLabelDisabled } from "./variants";

packages/propel/src/ui/checkbox/variants.ts

@@ -1,4 +1,4 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
+import { cva, cx } from "class-variance-authority";
 
 import { checkboxBoxVariants } from "../../internal/checkbox-box";
 import { nodeSlotClass } from "../../internal/node-slot";
@@ -24,27 +24,18 @@ export const checkboxIndeterminateIndicatorVariants = cva(
   ),
 );
 
-// The clickable label row that wraps the box + optional icon + label text.
-// `disabled` mirrors the `disabled` prop; the cursor and hover background change.
+// The clickable label row that wraps the box + optional icon + label text. The row reads its
+// disabled state off the wrapped `Checkbox` (Base UI — and `Field.Root` — set `data-disabled` on
+// it) via `:has()`, so it needs no `disabled` prop: it cancels the hover background and shows the
+// not-allowed cursor whenever a descendant is disabled.
 export const checkboxLabelVariants = cva(
   cx(
     "inline-flex items-center gap-2 rounded-sm px-2 py-1",
     "text-13 text-secondary transition-colors",
+    "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover has-[[data-disabled]]:cursor-not-allowed",
   ),
-  {
-    variants: {
-      disabled: {
-        true: "cursor-not-allowed",
-        false: "cursor-pointer hover:bg-layer-transparent-hover",
-      },
-    },
-  },
 );
 
-type CheckboxLabelVariantProps = VariantProps<typeof checkboxLabelVariants>;
-
-export type CheckboxLabelDisabled = NonNullable<CheckboxLabelVariantProps["disabled"]>;
-
 // The inline-start icon slot between the box and the label text.
 export const checkboxInlineStartNodeVariants = cva(
   cx(nodeSlotClass, "text-icon-secondary [--node-size:0.875rem]"),

packages/propel/src/ui/pagination/pagination-page-button.tsx

@@ -3,17 +3,15 @@ import type * as React from "react";
 import { paginationPageButtonVariants } from "./variants";
 
 export type PaginationPageButtonProps = Omit<
-  React.ComponentProps<"button">,
+  React.ComponentPropsWithoutRef<"button">,
   "className" | "style"
-> & {
-  /** Whether this button represents the current page (renders the pressed/selected fill). */
-  current: boolean;
-};
+>;
 
 /**
- * A styled page-number button. Applies `paginationPageButtonVariants({ current })`; pass the page
- * number (or a loading spinner) as `children` and wire `aria-current`/`onClick` through props.
+ * A styled page-number button. The current page is marked `aria-current="page"`, which the cva keys
+ * the pressed/selected fill off of; pass the page number (or a loading spinner) as `children` and
+ * wire `aria-current`/`onClick` through props.
  */
-export function PaginationPageButton({ current, ...props }: PaginationPageButtonProps) {
-  return <button type="button" className={paginationPageButtonVariants({ current })} {...props} />;
+export function PaginationPageButton(props: PaginationPageButtonProps) {
+  return <button type="button" className={paginationPageButtonVariants()} {...props} />;
 }

packages/propel/src/ui/pagination/pagination.stories.tsx

@@ -14,8 +14,9 @@ import {
 // UI-tier story: composes the ATOMIC pagination parts (each renders a single element).
 // The components-tier `Pagination` story owns the truncation logic, the per-page Menu and the
 // range label. Here you lay out the raw slots yourself: the `Pagination` nav wraps a
-// `PaginationList`, whose `PaginationItem`s hold prev/next arrows, page-number buttons (one
-// marked `current`), and the non-interactive ellipsis (an icon slot).
+// `PaginationList`, whose `PaginationItem`s hold prev/next arrows, page-number buttons (the
+// current one marked `aria-current="page"`, which drives the selected fill), and the
+// non-interactive ellipsis (an icon slot).
 const meta = {
   title: "UI/Pagination",
   component: PaginationPageButton,
@@ -26,7 +27,7 @@ const meta = {
     PaginationArrowButton,
     PaginationEllipsis,
   },
-  args: { current: false, children: "1" },
+  args: { children: "1" },
 } satisfies Meta<typeof PaginationPageButton>;
 
 export default meta;
@@ -48,7 +49,6 @@ export const Default: Story = {
         {PAGES.map((n) => (
           <PaginationItem key={n}>
             <PaginationPageButton
-              current={n === 1}
               aria-current={n === 1 ? "page" : undefined}
               aria-label={`Go to page ${n}`}
               disabled={n === 1}
@@ -70,6 +70,12 @@ export const Default: Story = {
     const page1 = canvas.getByRole("button", { name: "Go to page 1" });
     await expect(page1).toHaveAttribute("aria-current", "page");
     await expect(canvas.getByRole("button", { name: "Go to previous page" })).toBeDisabled();
+    // The selected fill keys off `aria-current="page"`, not a prop: the current page's
+    // background differs from a non-current page button.
+    const page2 = canvas.getByRole("button", { name: "Go to page 2" });
+    await expect(getComputedStyle(page1).backgroundColor).not.toBe(
+      getComputedStyle(page2).backgroundColor,
+    );
   },
 };
 
@@ -87,7 +93,6 @@ export const WithEllipsis: Story = {
         {[1, 2, 3].map((n) => (
           <PaginationItem key={n}>
             <PaginationPageButton
-              current={n === 2}
               aria-current={n === 2 ? "page" : undefined}
               aria-label={`Go to page ${n}`}
               disabled={n === 2}
@@ -102,9 +107,7 @@ export const WithEllipsis: Story = {
           </PaginationEllipsis>
         </PaginationItem>
         <PaginationItem>
-          <PaginationPageButton current={false} aria-label="Go to page 100">
-            100
-          </PaginationPageButton>
+          <PaginationPageButton aria-label="Go to page 100">100</PaginationPageButton>
         </PaginationItem>
         <PaginationItem>
           <PaginationArrowButton aria-label="Go to next page">
@@ -116,7 +119,11 @@ export const WithEllipsis: Story = {
   ),
 };
 
-/** The standalone page-number button, with its `current` (pressed) state toggleable via controls. */
+/**
+ * The standalone page-number button. Its pressed/selected fill keys off `aria-current="page"` — the
+ * current page is marked `aria-current` (and `disabled` to block re-navigation), so toggling that
+ * attribute toggles the selected fill.
+ */
 export const PageButton: Story = {
   render: (args) => <PaginationPageButton {...args} aria-label="Go to page 1" />,
 };

packages/propel/src/ui/pagination/variants.ts

@@ -4,10 +4,11 @@ import { nodeSlotClass } from "../../internal/node-slot";
 
 // Pagination is a structural navigation primitive: the Figma "variant" axis (all
 // pages visible / near start / middle / near end) is a function of where the current
-// page sits in the total, not a styling axis — so the parts carry only static chrome
-// and the `current` page state. Every part renders ONE element, with its className held
-// in the cva below so no `className` crosses the part boundary. The Figma 24px slot is
-// the only defined size, so it is baked in (no size/magnitude axis to expose).
+// page sits in the total, not a styling axis — so the parts carry only static chrome.
+// The current page reads as selected purely from its `aria-current="page"` a11y marker
+// (no styling prop). Every part renders ONE element, with its className held in the cva
+// below so no `className` crosses the part boundary. The Figma 24px slot is the only
+// defined size, so it is baked in (no size/magnitude axis to expose).
 
 // The `<nav>` landmark wrapping the whole control: the optional per-page region and
 // range label sit before the page-button list, laid out in a row.
@@ -37,19 +38,14 @@ export const paginationPageButtonVariants = cva(
     "hover:bg-layer-transparent-hover",
     "focus-visible:ring-2 focus-visible:ring-accent-strong",
     "disabled:pointer-events-none disabled:text-disabled",
+    // The current page reads as pressed: it sits on the `transparent-active` fill
+    // (Figma "Selected") and is not interactive. It's marked `disabled` to block
+    // re-navigation AND `aria-current="page"` for a11y, so the selected styling keys
+    // off `aria-current` — no separate prop. The Figma "Selected" state keeps
+    // `text/primary`, so the doubled `aria-[current=page]:disabled:` specificity wins
+    // over the plain `disabled:text-disabled` dim the base applies.
+    "aria-[current=page]:bg-layer-transparent-active aria-[current=page]:disabled:text-primary",
   ),
-  {
-    variants: {
-      // The current page reads as pressed: it sits on the `transparent-active` fill
-      // (Figma "Selected") and is not interactive. It's marked `disabled` to block
-      // re-navigation, but the Figma "Selected" state keeps `text/primary` — so it
-      // must override the `disabled:text-disabled` dim that the base applies.
-      current: {
-        true: "bg-layer-transparent-active disabled:text-primary",
-        false: "",
-      },
-    },
-  },
 );
 
 export const paginationArrowButtonVariants = cva(