@designa8/vibedesign-stripe-deepseek-85ea 0.2.0 → 0.2.2

package/dist/index.js

@@ -6858,6 +6858,19 @@ var Drawer = React35.forwardRef(
     }, [open, autoFocusNote]);
     const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
+    const body = children === void 0 ? null : children;
+    const hasCustomBody = children !== void 0;
+    const footerNode = footer === void 0 ? /* @__PURE__ */ jsx35(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        fullWidth: true,
+        disabled: actionDisabled,
+        onClick: onAction,
+        children: actionLabel
+      }
+    ) : footer;
     const panel = !mounted || typeof document === "undefined" ? null : ReactDOM5.createPortal(
       /* @__PURE__ */ jsxs32(
         "div",
@@ -6873,8 +6886,9 @@ var Drawer = React35.forwardRef(
           style: { zIndex: "var(--z-modal, 1200)" },
           className: cn28(
             "fixed inset-0 flex overflow-hidden",
+            "transition-[visibility] duration-200 ease-out",
             side === "right" ? "justify-end" : "justify-start",
-            open ? "" : "pointer-events-none"
+            open ? "visible" : "invisible pointer-events-none"
           ),
           ...rest,
           children: [
@@ -6886,7 +6900,7 @@ var Drawer = React35.forwardRef(
                 className: cn28(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+                  open ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -6897,8 +6911,11 @@ var Drawer = React35.forwardRef(
                 "data-state": open ? "open" : "closed",
                 className: cn28(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right" ? "data-[state=closed]:translate-x-full sm:rounded-l-lg" : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className
                 ),
@@ -6924,7 +6941,7 @@ var Drawer = React35.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx35("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: children ?? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-xl", children: [
+                  /* @__PURE__ */ jsx35("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: hasCustomBody ? body : /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-xl", children: [
                     /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-lg", children: [
                       status ? /* @__PURE__ */ jsx35(
                         Badge,
@@ -6961,17 +6978,7 @@ var Drawer = React35.forwardRef(
                       }
                     ) : null
                   ] }) }),
-                  /* @__PURE__ */ jsx35("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footer ?? /* @__PURE__ */ jsx35(
-                    Button,
-                    {
-                      variant: "primary",
-                      size: "lg",
-                      fullWidth: true,
-                      disabled: actionDisabled,
-                      onClick: onAction,
-                      children: actionLabel
-                    }
-                  ) })
+                  footerNode ? /* @__PURE__ */ jsx35("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footerNode }) : null
                 ]
               }
             )
@@ -9500,8 +9507,7 @@ var Modal = React50.forwardRef(
           contained ? "max-h-full" : placement === "top" ? "max-h-[calc(88dvh-1rem)]" : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 opacity-0",
           className
         ),
         ...rest,
@@ -9608,7 +9614,7 @@ var Modal = React50.forwardRef(
             contained ? "absolute inset-0" : "fixed inset-0",
             placement === "top" ? "items-start px-base pt-[12dvh]" : "items-center p-base",
             "transition duration-200 ease-out",
-            "data-[state=closed]:pointer-events-none data-[state=closed]:invisible"
+            isOpen ? "visible" : "invisible pointer-events-none"
           ),
           style: { zIndex: "var(--z-modal, 1200)" },
           children: [
@@ -9625,7 +9631,7 @@ var Modal = React50.forwardRef(
                 style: scrimStyle(contained),
                 className: cn41(
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
+                  isOpen ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -14526,12 +14532,59 @@ var glyph3 = (name, size = 16, strokeWidth = 1.75) => /* @__PURE__ */ jsx74(
     style: { color: "inherit" }
   }
 );
+var hasBadge = (badge) => {
+  if (badge === void 0 || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+var badgeText = (badge) => typeof badge === "number" ? badge > 99 ? "99+" : String(badge) : badge.trim();
+var rowAccessibleName = (label, badge) => {
+  if (!hasBadge(badge)) {
+    return label;
+  }
+  return typeof badge === "number" ? `${label}, ${badge} pending` : `${label}, ${badgeText(badge)}`;
+};
+var RailBadge = ({
+  badge,
+  active
+}) => /* @__PURE__ */ jsx74(
+  "span",
+  {
+    "aria-hidden": "true",
+    "data-active": active || void 0,
+    className: cn65(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
+    ),
+    children: badgeText(badge)
+  }
+);
+var railGlyph = (item, folded) => /* @__PURE__ */ jsxs71("span", { className: "relative inline-flex shrink-0 items-center", children: [
+  glyph3(item.icon, 16, 1.75),
+  folded && hasBadge(item.badge) ? /* @__PURE__ */ jsx74(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn65(
+        "pointer-events-none absolute -right-xxs -top-xxs size-2 rounded-full",
+        "bg-primary",
+        "group-data-[active=true]:bg-on-primary"
+      )
+    }
+  ) : null
+] });
 var RowLabel = ({
   folded,
   children
 }) => folded ? /* @__PURE__ */ jsx74("span", { className: "sr-only", children }) : /* @__PURE__ */ jsx74("span", { className: "truncate", children });
 var railRowClass = (active, folded) => cn65(
-  "flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
+  "group flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
   "text-body-md transition duration-150 ease-out",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
   "focus-visible:ring-inset",
@@ -14867,6 +14920,7 @@ var SidebarDesktop = React74.forwardRef(
                 className: "flex flex-col gap-xxs",
                 children: navItems.map((item) => {
                   const active = item.id === activeId;
+                  const badged = hasBadge(item.badge);
                   if (!item.children?.length) {
                     return /* @__PURE__ */ jsxs71(
                       "a",
@@ -14874,11 +14928,13 @@ var SidebarDesktop = React74.forwardRef(
                         href: item.href ?? `#${item.id}`,
                         onClick: navigate({ id: item.id, href: item.href }),
                         "aria-current": active ? "page" : void 0,
-                        "aria-label": isFolded ? item.label : void 0,
+                        "data-active": active,
+                        "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                         className: railRowClass(active, isFolded),
                         children: [
-                          glyph3(item.icon, 16, 1.75),
-                          /* @__PURE__ */ jsx74(RowLabel, { folded: isFolded, children: item.label })
+                          railGlyph(item, isFolded),
+                          /* @__PURE__ */ jsx74(RowLabel, { folded: isFolded, children: item.label }),
+                          !isFolded && badged ? /* @__PURE__ */ jsx74(RailBadge, { badge: item.badge, active }) : null
                         ]
                       },
                       item.id
@@ -14894,22 +14950,32 @@ var SidebarDesktop = React74.forwardRef(
                         size: "rail",
                         "aria-expanded": expanded,
                         "aria-controls": subId,
-                        "aria-label": isFolded ? item.label : void 0,
+                        "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                         "data-active": active,
                         "data-folded": isFolded,
                         onClick: () => toggleExpanded(item.id),
-                        leadingIcon: glyph3(item.icon, 16, 1.75),
-                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ jsx74(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: cn65(
-                              "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                              expanded ? "rotate-180" : "rotate-0"
-                            ),
-                            children: glyph3("chevron-down", 16, 2)
-                          }
-                        ),
+                        className: "group",
+                        leadingIcon: railGlyph(item, isFolded),
+                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ jsxs71("span", { className: "flex items-center gap-xs", children: [
+                          badged ? /* @__PURE__ */ jsx74(
+                            RailBadge,
+                            {
+                              badge: item.badge,
+                              active
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsx74(
+                            "span",
+                            {
+                              "aria-hidden": "true",
+                              className: cn65(
+                                "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                                expanded ? "rotate-180" : "rotate-0"
+                              ),
+                              children: glyph3("chevron-down", 16, 2)
+                            }
+                          )
+                        ] }),
                         children: /* @__PURE__ */ jsx74(RowLabel, { folded: isFolded, children: item.label })
                       }
                     ),
@@ -14962,17 +15028,20 @@ var SidebarDesktop = React74.forwardRef(
             ),
             /* @__PURE__ */ jsx74("nav", { "aria-label": "Secondary", className: "mt-lg flex flex-col gap-xxs", children: secondaryNav.map((item) => {
               const active = item.id === secondaryActiveId;
+              const badged = hasBadge(item.badge);
               return /* @__PURE__ */ jsxs71(
                 "a",
                 {
                   href: item.href ?? `#${item.id}`,
                   onClick: navigate({ id: item.id, href: item.href }),
                   "aria-current": active ? "page" : void 0,
-                  "aria-label": isFolded ? item.label : void 0,
+                  "data-active": active,
+                  "aria-label": isFolded || badged ? rowAccessibleName(item.label, item.badge) : void 0,
                   className: railRowClass(active, isFolded),
                   children: [
-                    glyph3(item.icon, 16, 1.75),
-                    /* @__PURE__ */ jsx74(RowLabel, { folded: isFolded, children: item.label })
+                    railGlyph(item, isFolded),
+                    /* @__PURE__ */ jsx74(RowLabel, { folded: isFolded, children: item.label }),
+                    !isFolded && badged ? /* @__PURE__ */ jsx74(RailBadge, { badge: item.badge, active }) : null
                   ]
                 },
                 item.id
@@ -15099,6 +15168,39 @@ var SAMPLE_SECONDARY2 = [
 ];
 var SAMPLE_PLAN2 = { name: "Pro", price: "$2,400.00 / month", href: "#plan" };
 var glyph4 = (name, size = 18, strokeWidth = 1.75) => /* @__PURE__ */ jsx75(Icon, { name, size, strokeWidth, style: { color: "inherit" } });
+var hasBadge2 = (badge) => {
+  if (badge === void 0 || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+var badgeText2 = (badge) => typeof badge === "number" ? badge > 99 ? "99+" : String(badge) : badge.trim();
+var rowAccessibleName2 = (label, badge) => {
+  if (!hasBadge2(badge)) {
+    return label;
+  }
+  return typeof badge === "number" ? `${label}, ${badge} pending` : `${label}, ${badgeText2(badge)}`;
+};
+var NavBadge = ({
+  badge,
+  active
+}) => /* @__PURE__ */ jsx75(
+  "span",
+  {
+    "aria-hidden": "true",
+    "data-active": active || void 0,
+    className: cn66(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
+    ),
+    children: badgeText2(badge)
+  }
+);
 var rowClass = (active) => cn66(
   "flex min-h-10 w-full cursor-pointer items-center gap-md rounded-lg px-md py-sm",
   "text-body-md transition duration-150 ease-out",
@@ -15411,6 +15513,7 @@ var SidebarMobile = React75.forwardRef(
                     ] }),
                     /* @__PURE__ */ jsx75("nav", { "aria-label": "Primary", className: "mt-md flex flex-col gap-xxs", children: navItems.map((item) => {
                       const active = item.id === activeId;
+                      const badged = hasBadge2(item.badge);
                       if (!item.children?.length) {
                         return /* @__PURE__ */ jsxs72(
                           "a",
@@ -15418,10 +15521,18 @@ var SidebarMobile = React75.forwardRef(
                             href: item.href ?? `#${item.id}`,
                             onClick: navigate({ id: item.id, href: item.href }),
                             "aria-current": active ? "page" : void 0,
+                            "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                             className: rowClass(active),
                             children: [
                               glyph4(item.icon, 18, 1.75),
-                              /* @__PURE__ */ jsx75("span", { className: "truncate", children: item.label })
+                              /* @__PURE__ */ jsx75("span", { className: "truncate", children: item.label }),
+                              badged ? /* @__PURE__ */ jsx75(
+                                NavBadge,
+                                {
+                                  badge: item.badge,
+                                  active
+                                }
+                              ) : null
                             ]
                           },
                           item.id
@@ -15437,20 +15548,31 @@ var SidebarMobile = React75.forwardRef(
                             size: "rail",
                             "aria-expanded": expanded,
                             "aria-controls": subId,
+                            "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                             "data-active": active,
                             onClick: () => toggleExpanded(item.id),
                             className: "px-md",
                             leadingIcon: glyph4(item.icon, 18, 1.75),
-                            trailingIcon: /* @__PURE__ */ jsx75(
-                              "span",
-                              {
-                                className: cn66(
-                                  "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                                  expanded ? "rotate-180" : "rotate-0"
-                                ),
-                                children: glyph4("chevron-down", 18, 2)
-                              }
-                            ),
+                            trailingIcon: /* @__PURE__ */ jsxs72("span", { className: "flex items-center gap-xs", children: [
+                              badged ? /* @__PURE__ */ jsx75(
+                                NavBadge,
+                                {
+                                  badge: item.badge,
+                                  active
+                                }
+                              ) : null,
+                              /* @__PURE__ */ jsx75(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: cn66(
+                                    "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                                    expanded ? "rotate-180" : "rotate-0"
+                                  ),
+                                  children: glyph4("chevron-down", 18, 2)
+                                }
+                              )
+                            ] }),
                             children: /* @__PURE__ */ jsx75("span", { className: "truncate text-left", children: item.label })
                           }
                         ),
@@ -15506,16 +15628,25 @@ var SidebarMobile = React75.forwardRef(
                     /* @__PURE__ */ jsx75(Divider, { className: "my-md" }),
                     /* @__PURE__ */ jsx75("nav", { "aria-label": "Secondary", className: "flex flex-col gap-xxs", children: secondaryNav.map((item) => {
                       const active = item.id === secondaryActiveId;
+                      const badged = hasBadge2(item.badge);
                       return /* @__PURE__ */ jsxs72(
                         "a",
                         {
                           href: item.href ?? `#${item.id}`,
                           onClick: navigate({ id: item.id, href: item.href }),
                           "aria-current": active ? "page" : void 0,
+                          "aria-label": badged ? rowAccessibleName2(item.label, item.badge) : void 0,
                           className: rowClass(active),
                           children: [
                             glyph4(item.icon, 18, 1.75),
-                            /* @__PURE__ */ jsx75("span", { className: "truncate", children: item.label })
+                            /* @__PURE__ */ jsx75("span", { className: "truncate", children: item.label }),
+                            badged ? /* @__PURE__ */ jsx75(
+                              NavBadge,
+                              {
+                                badge: item.badge,
+                                active
+                              }
+                            ) : null
                           ]
                         },
                         item.id

package/dist/styles.css

@@ -1114,6 +1114,10 @@
     --tw-translate-y: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-2 {
+    --tw-translate-y: calc(var(--spacing) * 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-px {
     --tw-translate-y: 1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/Drawer/Drawer.tsx

@@ -62,9 +62,15 @@ export interface DrawerProps
   actionDisabled?: boolean;
   /** Fires when the primary action is pressed. */
   onAction?: () => void;
-  /** Replaces the pinned action footer. */
+  /**
+   * Replaces the pinned action footer. Pass `null` to render no footer at all;
+   * the default action only appears when the prop is left `undefined`.
+   */
   footer?: React.ReactNode;
-  /** Replaces the default payment body. */
+  /**
+   * Replaces the default payment body. Pass `null` to render an empty body;
+   * the default fixture only appears when the prop is left `undefined`.
+   */
   children?: React.ReactNode;
   /** Accessible name of the close control. */
   closeLabel?: string;
@@ -77,6 +83,11 @@ export interface DrawerProps
  * `translate-x`, and only the body between the pinned heading and footer
  * scrolls.
  *
+ * The closed state is expressed with plain utilities (`invisible`,
+ * `pointer-events-none`, the travel offset) rather than `data-[state=closed]:*`
+ * variants, so the panel is never painted, never focusable, and never swallows
+ * pointer events even in a build that emits no data-state rules.
+ *
  * The `role="dialog"` element is the full-viewport stage, not the travelling
  * surface: the box the user reads stays put while the sheet inside it slides, so
  * a closed drawer never parks itself outside the viewport.
@@ -157,6 +168,24 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
       ariaLabel ?? (typeof title === "string" ? title : undefined);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
 
+    /* `undefined` means "not supplied" — `null` is an explicit "render nothing". */
+    const body = children === undefined ? null : children;
+    const hasCustomBody = children !== undefined;
+    const footerNode =
+      footer === undefined ? (
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          disabled={actionDisabled}
+          onClick={onAction}
+        >
+          {actionLabel}
+        </Button>
+      ) : (
+        footer
+      );
+
     const panel =
       !mounted || typeof document === "undefined"
         ? null
@@ -173,8 +202,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
               style={{ zIndex: "var(--z-modal, 1200)" }}
               className={cn(
                 "fixed inset-0 flex overflow-hidden",
+                "transition-[visibility] duration-200 ease-out",
                 side === "right" ? "justify-end" : "justify-start",
-                open ? "" : "pointer-events-none",
+                open ? "visible" : "invisible pointer-events-none",
               )}
               {...rest}
             >
@@ -186,7 +216,7 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 className={cn(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+                  open ? "opacity-100" : "opacity-0",
                 )}
               />
 
@@ -195,10 +225,11 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 data-state={open ? "open" : "closed"}
                 className={cn(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right"
-                    ? "data-[state=closed]:translate-x-full sm:rounded-l-lg"
-                    : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className,
                 )}
@@ -221,7 +252,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 </div>
 
                 <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl">
-                  {children ?? (
+                  {hasCustomBody ? (
+                    body
+                  ) : (
                     <div className="flex flex-col gap-xl">
                       <div className="flex flex-col gap-lg">
                         {status ? (
@@ -269,19 +302,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                   )}
                 </div>
 
-                <div className="shrink-0 px-xl pt-md pb-xl">
-                  {footer ?? (
-                    <Button
-                      variant="primary"
-                      size="lg"
-                      fullWidth
-                      disabled={actionDisabled}
-                      onClick={onAction}
-                    >
-                      {actionLabel}
-                    </Button>
-                  )}
-                </div>
+                {footerNode ? (
+                  <div className="shrink-0 px-xl pt-md pb-xl">{footerNode}</div>
+                ) : null}
               </div>
             </div>,
             document.body,

package/src/atoms/Modal/Modal.tsx

@@ -150,6 +150,12 @@ export interface ModalProps
  * the body portals its listbox to `document.body` at `--z-popover`, above this
  * dialog's `--z-modal`, so opening it can never grow the panel or paint
  * underneath it.
+ *
+ * The closed state is expressed with plain utilities (`invisible`,
+ * `pointer-events-none`, `opacity-0`, the resting offset) instead of
+ * `data-[state=closed]:*` variants, so the dialog is hidden, unfocusable, and
+ * click-through even in a build that emits no data-state rules. `data-state`
+ * is still published for consumers that style it.
  */
 export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
   (
@@ -387,8 +393,9 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
               : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen
+            ? "translate-y-0 scale-100 opacity-100"
+            : "translate-y-2 opacity-0",
           className,
         )}
         {...rest}
@@ -510,7 +517,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             ? "items-start px-base pt-[12dvh]"
             : "items-center p-base",
           "transition duration-200 ease-out",
-          "data-[state=closed]:pointer-events-none data-[state=closed]:invisible",
+          isOpen ? "visible" : "invisible pointer-events-none",
         )}
         style={{ zIndex: "var(--z-modal, 1200)" }}
       >
@@ -526,7 +533,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           style={scrimStyle(contained)}
           className={cn(
             "transition-opacity duration-200 ease-out",
-            "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+            isOpen ? "opacity-100" : "opacity-0",
           )}
         />