perf(ActionList): replace :has() selector with JS-computed attribute

Author: hectahertz

packages/react/src/ActionList/ActionList.module.css

@@ -87,7 +87,7 @@
   }
 
   /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */
-  &:has([data-has-description='true']):has([data-has-description='false']) {
+  &[data-mixed-descriptions='true'] {
     & .ItemLabel {
       font-weight: var(--base-text-weight-normal);
     }

packages/react/src/ActionList/List.tsx

@@ -66,6 +66,28 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
     [variant, selectionVariant, containerSelectionVariant, showDividers, listRole, headingId],
   )
 
+  // Replaces a CSS `:has([data-has-description])` selector that caused full-subtree
+  // style recalculation on every DOM mutation (~674ms on 100 items, 10-20s freezes on Safari).
+  //
+  // Ideally we'd derive this from children during render, but each Item's description is
+  // detected via `useSlots` at render time, so the List can't know which Items have
+  // descriptions without duplicating slot detection or deeply inspecting children trees
+  // (fragile with Groups, conditional rendering, wrapper components, etc.).
+  //
+  // A context-based approach (Items registering their description state with the List) would
+  // work but adds registration/unregistration callbacks, a new provider, and re-renders when
+  // the count changes. Not worth the complexity for a derived boolean.
+  //
+  // Two querySelector calls after render is trivially cheap compared to what the browser
+  // was doing on every DOM mutation with `:has()`.
+  React.useLayoutEffect(() => {
+    const list = listRef.current
+    if (!list) return
+    const hasWithDescription = list.querySelector('[data-has-description="true"]') !== null
+    const hasWithoutDescription = list.querySelector('[data-has-description="false"]') !== null
+    list.setAttribute('data-mixed-descriptions', String(hasWithDescription && hasWithoutDescription))
+  })
+
   return (
     <ListContext.Provider value={listContextValue}>
       {slots.heading}