@camunda/design-system 0.46.2 → 0.48.0

package/dist/src/lib/inert-aria-hidden.d.ts

@@ -9,12 +9,26 @@
  * (WCAG 4.1.2 / 2.4.3) on every consuming app. Radix's pinned version uses
  * `hideOthers()`, not `inertOthers()`, so we add `inert` ourselves.
  *
- * Scope: only direct children of `document.body` are inerted — those are the
- * real page-background roots (app root, portal-less content). This matches
- * Radix's default body-level portals: `hideOthers()` marks the portal's
- * body-level siblings (the background) plus the overlay's in-portal sibling
- * (the backdrop). The backdrop lives *inside* the portal (not a body child), so
- * it is left untouched — inerting it would block click-outside-to-close.
+ * Scope: only direct children of `document.body` are candidates — those are the
+ * real page-background roots (app root, portal-less content) and Radix's
+ * body-level overlay portals. `hideOthers()` marks the background plus any
+ * *lower* overlay portal, always leaving the active (topmost) layer's own
+ * portal unmarked. The overlay's backdrop lives *inside* its portal (not a body
+ * child), so it is left untouched — inerting it would block click-outside.
+ *
+ * Exception (#497): a marked body child that HOSTS a still-open modal layer
+ * (`[role="dialog"]` / `[role="alertdialog"]`) is NOT inerted while the active
+ * (unmarked) top layer is a non-modal popper (Select, DropdownMenu, Popover).
+ * Such a popper is a *child* layer of the modal, not a replacement for it:
+ * inerting the modal makes its content non-hit-testable, so the modal's own
+ * dismissable layer reads the popper-close `pointerdown` as "outside" and tears
+ * the modal down on the same event — leaking `document.body`'s
+ * `pointer-events: none` and killing the whole app. When the active top layer is
+ * instead another modal (Dialog over Dialog), the lower modal genuinely IS
+ * background and stays inerted, preserving #259 for stacked modals. Deeper
+ * background under a stack is protected for free: `hideOthers()` only re-writes
+ * attributes on a node's *first* hide, so an already-inerted deep-background
+ * element never re-runs `sync()` and keeps its `inert`.
  *
  * Known limitation: an app that both mounts into a non-body container AND
  * configures Radix to portal inside that same container would have its

package/dist/src/lib/inert-aria-hidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inert-aria-hidden.d.ts","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAUH;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAqC7C"}
+{"version":3,"file":"inert-aria-hidden.d.ts","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AA2CH;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CA4C7C"}

package/dist/src/lib/inert-aria-hidden.js

@@ -9,12 +9,26 @@
  * (WCAG 4.1.2 / 2.4.3) on every consuming app. Radix's pinned version uses
  * `hideOthers()`, not `inertOthers()`, so we add `inert` ourselves.
  *
- * Scope: only direct children of `document.body` are inerted — those are the
- * real page-background roots (app root, portal-less content). This matches
- * Radix's default body-level portals: `hideOthers()` marks the portal's
- * body-level siblings (the background) plus the overlay's in-portal sibling
- * (the backdrop). The backdrop lives *inside* the portal (not a body child), so
- * it is left untouched — inerting it would block click-outside-to-close.
+ * Scope: only direct children of `document.body` are candidates — those are the
+ * real page-background roots (app root, portal-less content) and Radix's
+ * body-level overlay portals. `hideOthers()` marks the background plus any
+ * *lower* overlay portal, always leaving the active (topmost) layer's own
+ * portal unmarked. The overlay's backdrop lives *inside* its portal (not a body
+ * child), so it is left untouched — inerting it would block click-outside.
+ *
+ * Exception (#497): a marked body child that HOSTS a still-open modal layer
+ * (`[role="dialog"]` / `[role="alertdialog"]`) is NOT inerted while the active
+ * (unmarked) top layer is a non-modal popper (Select, DropdownMenu, Popover).
+ * Such a popper is a *child* layer of the modal, not a replacement for it:
+ * inerting the modal makes its content non-hit-testable, so the modal's own
+ * dismissable layer reads the popper-close `pointerdown` as "outside" and tears
+ * the modal down on the same event — leaking `document.body`'s
+ * `pointer-events: none` and killing the whole app. When the active top layer is
+ * instead another modal (Dialog over Dialog), the lower modal genuinely IS
+ * background and stays inerted, preserving #259 for stacked modals. Deeper
+ * background under a stack is protected for free: `hideOthers()` only re-writes
+ * attributes on a node's *first* hide, so an already-inerted deep-background
+ * element never re-runs `sync()` and keeps its `inert`.
  *
  * Known limitation: an app that both mounts into a non-body container AND
  * configures Radix to portal inside that same container would have its
@@ -26,10 +40,37 @@
  * a consumer's own `inert` is never clobbered.
  */
 const HIDDEN_SELECTOR = '[data-aria-hidden][aria-hidden="true"]';
+// Modal layers that must stay hit-testable while a child popper is open (#497).
+const MODAL_LAYER_SELECTOR = '[role="dialog"], [role="alertdialog"]';
+// Non-modal overlay layers that portal to body as a *child* of an open modal:
+// Radix popper-positioned content (Select, DropdownMenu, Popover) plus the
+// item-aligned Select fallback, which has no popper wrapper but is a listbox.
+const CHILD_POPPER_SELECTOR = '[data-radix-popper-content-wrapper], [role="listbox"], [role="menu"]';
 let installed = false;
 function isBackgroundRoot(el) {
     return el.parentElement === document.body && el instanceof HTMLElement;
 }
+// True when a body-level portal currently hosts an *active* (unmarked by
+// `hideOthers()`) non-modal popper — i.e. a Select/DropdownMenu/Popover is open
+// as the top layer above a modal (#497).
+function hasActivePopperLayer() {
+    for (const child of document.body.children) {
+        if (!child.matches(HIDDEN_SELECTOR) &&
+            child.querySelector(CHILD_POPPER_SELECTOR)) {
+            return true;
+        }
+    }
+    return false;
+}
+function shouldInert(el) {
+    if (!el.matches(HIDDEN_SELECTOR))
+        return false;
+    // #497 — leave a modal's portal hit-testable while its child popper is open.
+    if (el.querySelector(MODAL_LAYER_SELECTOR) && hasActivePopperLayer()) {
+        return false;
+    }
+    return true;
+}
 /**
  * Installs a single document-wide observer that keeps `inert` in sync with the
  * `data-aria-hidden` marker Radix applies. Idempotent — safe to call from every
@@ -43,12 +84,15 @@ export function installAriaHiddenInert() {
     const sync = (el) => {
         if (!isBackgroundRoot(el))
             return;
-        const shouldInert = el.matches(HIDDEN_SELECTOR);
-        if (shouldInert && !el.inert) {
+        // Decide first, clean up second — an element that stops qualifying (e.g. a
+        // modal whose child popper just opened) must have any `inert` we own cleared
+        // rather than early-returning past the cleanup branch.
+        const wantInert = shouldInert(el);
+        if (wantInert && !el.inert) {
             el.inert = true;
             owned.add(el);
         }
-        else if (!shouldInert && owned.has(el)) {
+        else if (!wantInert && owned.has(el)) {
             el.inert = false;
             owned.delete(el);
         }
@@ -67,6 +111,10 @@ export function installAriaHiddenInert() {
     // already marked at install time is handled by the scan above. Clearing the
     // marker on close removes `inert` here; the FocusRestoredOnClose regression
     // story guards that this lands before Radix restores focus to the trigger.
+    // The #497 skip needs no extra observer: a modal's portal is (un)marked on the
+    // same `aria-hidden` toggle when its child popper opens/closes, so `sync()`
+    // re-runs `shouldInert()` — which re-reads the live active-popper state — at
+    // exactly the moments the decision can change.
     observer.observe(document.body, {
         subtree: true,
         attributes: true,

package/dist/src/lib/inert-aria-hidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"inert-aria-hidden.js","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,eAAe,GAAG,wCAAwC,CAAC;AAEjE,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB,SAAS,gBAAgB,CAAC,EAAW;IACnC,OAAO,EAAE,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,IAAI,EAAE,YAAY,WAAW,CAAC;AACzE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB;IACpC,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,SAAS;QAAE,OAAO;IACzD,SAAS,GAAG,IAAI,CAAC;IAEjB,MAAM,KAAK,GAAG,IAAI,OAAO,EAAe,CAAC;IAEzC,MAAM,IAAI,GAAG,CAAC,EAAW,EAAE,EAAE;QAC3B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAAE,OAAO;QAClC,MAAM,WAAW,GAAG,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,WAAW,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;YAC7B,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC;YAChB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YACzC,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;YACjB,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,8EAA8E;IAC9E,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE;QAChD,KAAK,MAAM,MAAM,IAAI,OAAO;YAAE,IAAI,CAAC,MAAM,CAAC,MAAiB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IACH,2EAA2E;IAC3E,uEAAuE;IACvE,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,4EAA4E;IAC5E,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;KACrD,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"inert-aria-hidden.js","sourceRoot":"","sources":["../../../src/lib/inert-aria-hidden.ts"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -95,6 +95,7 @@
   --container-md: 28rem;
   --container-xl: 36rem;
   --container-2xl: 42rem;
+  --container-3xl: 48rem;
   --container-5xl: 64rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
@@ -161,6 +162,9 @@
   container-type: inline-size;
   container-name: card-header;
 }
+.pointer-events-auto {
+  pointer-events: auto;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -505,6 +509,18 @@
 .ml-auto {
   margin-left: auto;
 }
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block {
   display: block;
 }
@@ -708,6 +724,9 @@
 .h-auto {
   height: auto;
 }
+.h-auto\! {
+  height: auto !important;
+}
 .h-full {
   height: 100%;
 }
@@ -735,6 +754,9 @@
 .max-h-\[60vh\] {
   max-height: 60vh;
 }
+.max-h-\[356px\] {
+  max-height: 356px;
+}
 .max-h-\[calc\(100dvh-2rem\)\] {
   max-height: calc(100dvh - 2rem);
 }
@@ -921,9 +943,15 @@
 .w-full {
   width: 100%;
 }
+.max-w-3xl {
+  max-width: var(--container-3xl);
+}
 .max-w-5xl {
   max-width: var(--container-5xl);
 }
+.max-w-48 {
+  max-width: calc(var(--spacing) * 48);
+}
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -2004,6 +2032,9 @@
 .text-right {
   text-align: right;
 }
+.align-bottom {
+  vertical-align: bottom;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -3048,6 +3079,9 @@
 .aria-disabled\:cursor-default[aria-disabled="true"] {
   cursor: default;
 }
+.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
+  cursor: not-allowed;
+}
 .aria-disabled\:bg-danger-action-disabled[aria-disabled="true"] {
   background-color: var(--danger-action-disabled);
 }
@@ -3111,6 +3145,9 @@
 .data-\[focus-visible-restore\]\:ring-ring[data-focus-visible-restore] {
   --tw-ring-color: var(--ring);
 }
+.data-\[expanded\=false\]\:data-\[front\=false\]\:h-auto\![data-expanded="false"][data-front="false"] {
+  height: auto !important;
+}
 .data-\[inset\]\:pl-8[data-inset] {
   padding-left: calc(var(--spacing) * 8);
 }
@@ -3318,6 +3355,12 @@
   .md\:hidden {
     display: none;
   }
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+  .md\:list-item {
+    display: list-item;
+  }
   .md\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -3354,9 +3397,15 @@
   .lg\:col-span-8 {
     grid-column: span 8 / span 8;
   }
+  .lg\:contents {
+    display: contents;
+  }
   .lg\:flex {
     display: flex;
   }
+  .lg\:inline {
+    display: inline;
+  }
   .lg\:w-2\/3 {
     width: calc(2 / 3 * 100%);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/design-system",
-  "version": "0.46.2",
+  "version": "0.48.0",
   "description": "Camunda's AI-first design system. shadcn + Tailwind components, design tokens aligned to Camunda's identity, and AI tooling for component authoring + migration.",
   "license": "Apache-2.0",
   "repository": {
@@ -99,7 +99,7 @@
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "date-fns": "^4.4.0",
-    "lucide-react": "1.25.0",
+    "lucide-react": "^1.25.0",
     "radix-ui": "1.4.3",
     "react-day-picker": "^10.0.1",
     "recharts": "^3.8.1",
@@ -116,11 +116,11 @@
     "@eslint/js": "9.39.5",
     "@fontsource/geist-sans": "5.3.0",
     "@playwright/test": "1.61.1",
-    "@storybook/addon-a11y": "10.4.6",
-    "@storybook/addon-docs": "10.4.6",
-    "@storybook/addon-links": "10.4.6",
-    "@storybook/react": "10.4.6",
-    "@storybook/react-vite": "10.4.6",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/react": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/cli": "^4.3.2",
     "@tailwindcss/vite": "4.3.3",
@@ -142,7 +142,7 @@
     "remark-gfm": "^4.0.1",
     "rimraf": "6.1.3",
     "shadcn": "4.13.1",
-    "storybook": "10.4.6",
+    "storybook": "10.5.10",
     "tailwindcss": "4.3.3",
     "tailwindcss-scoped-preflight": "4.0.6",
     "tsc-alias": "1.9.1",