feat(mosaic): rework Section into cards with titled headers

.changeset/section-contained-groups.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/panel/panel.styles.ts

@@ -4,7 +4,7 @@ import { colorVars, radiusVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   root: {
-    gap: space['4'],
+    gap: space['6'],
     display: 'flex',
     flexDirection: 'column',
   },
@@ -40,7 +40,7 @@ export const styles = stylex.create({
     verticalAlign: 'middle',
   },
   sections: {
-    gap: space['10'],
+    gap: space['8'],
     display: 'flex',
     flexDirection: 'column',
   },

packages/mosaic/src/components/panel/panel.test.tsx

@@ -13,7 +13,11 @@ function Account() {
       <Panel.Title>Account</Panel.Title>
       <Panel.Sections data-testid='sections'>
         <Section.Root>
-          <Section.Title>Email addresses</Section.Title>
+          <Section.Group>
+            <Section.Header>
+              <Section.Title>Email addresses</Section.Title>
+            </Section.Header>
+          </Section.Group>
         </Section.Root>
       </Panel.Sections>
     </Panel.Root>

packages/mosaic/src/components/profile/profile.test.tsx

@@ -37,7 +37,11 @@ function Surface(rootProps: Partial<ProfileRootProps>) {
             <Panel.Title>Account</Panel.Title>
             <Panel.Sections>
               <Section.Root>
-                <Section.Title>Email addresses</Section.Title>
+                <Section.Group>
+                  <Section.Header>
+                    <Section.Title>Email addresses</Section.Title>
+                  </Section.Header>
+                </Section.Group>
               </Section.Root>
             </Panel.Sections>
           </Panel.Root>

packages/mosaic/src/components/section/index.ts

@@ -2,9 +2,11 @@ export { Section } from './section';
 export { sectionCompactStyles } from './section.styles';
 export type {
   SectionActionsProps,
+  SectionBodyProps,
   SectionContentProps,
   SectionDescriptionProps,
   SectionGroupProps,
+  SectionHeaderProps,
   SectionItemProps,
   SectionItemsProps,
   SectionLabelProps,

packages/mosaic/src/components/section/section.markers.stylex.ts

@@ -1,3 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
 
-export const sectionItemsMarker = stylex.defineMarker();
+export const sectionHeaderMarker = stylex.defineMarker();
+export const sectionHeaderDescriptionMarker = stylex.defineMarker();
+export const sectionNestedItemMarker = stylex.defineMarker();

packages/mosaic/src/components/section/section.styles.ts

@@ -1,80 +1,92 @@
 import * as stylex from '@stylexjs/stylex';
 
 import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
-import { sectionItemsMarker } from './section.markers.stylex';
+import { sectionHeaderDescriptionMarker, sectionHeaderMarker, sectionNestedItemMarker } from './section.markers.stylex';
 
 const compact = '@container cl-section (width < 26rem)';
 
-/* eslint-disable @stylexjs/no-lookahead-selectors -- Mosaic's supported browsers include :has();
-   the marker keeps this selector scoped to Section.Items. */
 export const styles = stylex.create({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    rowGap: space['3'],
+    rowGap: space['8'],
     width: '100%',
   },
-  title: {
-    color: colorVars['--cl-color-foreground'],
-    fontWeight: fontWeightVars['--cl-font-medium'],
-  },
   group: {
     borderColor: colorVars['--cl-color-border'],
     borderRadius: radiusVars['--cl-radius-xl'],
     borderStyle: 'solid',
     borderWidth: '1px',
-    overflow: 'hidden',
     backgroundColor: colorVars['--cl-color-background'],
     containerName: 'cl-section',
     containerType: 'inline-size',
+    display: 'flex',
+    flexDirection: 'column',
     width: '100%',
   },
-  row: {
+  header: {
+    marginInline: space['4'],
+    paddingBlock: space['3'],
+    alignContent: 'center',
+    alignItems: 'center',
+    columnGap: space['3'],
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
+    minHeight: space['13'],
+    width: 'auto',
+  },
+  title: {
+    gridColumn: '1',
+    color: colorVars['--cl-color-foreground'],
+    fontWeight: fontWeightVars['--cl-font-medium'],
+  },
+  headerDescription: {
+    gridColumn: '1',
+    marginTop: space['0.5'],
+  },
+  headerActions: {
+    gridColumn: '2',
+    gridRowEnd: {
+      default: 'auto',
+      [stylex.when.siblingBefore(':where(*)', sectionHeaderDescriptionMarker)]: 'span 2',
+    },
+    gridRowStart: '1',
+  },
+  body: {
     marginInline: space['4'],
     borderBlockStartColor: colorVars['--cl-color-border'],
     borderBlockStartStyle: 'solid',
+    borderBlockStartWidth: {
+      default: '0px',
+      [stylex.when.siblingBefore(':where(*)', sectionHeaderMarker)]: '1px',
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'auto',
+  },
+  row: {
+    paddingBlock: space['4'],
+    borderBlockStartColor: colorVars['--cl-color-border'],
+    borderBlockStartStyle: 'solid',
     borderBlockStartWidth: {
       default: '1px',
       ':first-child': '0px',
     },
     display: 'flex',
     flexDirection: 'column',
-    paddingBlockEnd: {
-      default: space['4'],
-      [stylex.when.descendant(':where(*)', sectionItemsMarker)]: 0,
-    },
-    paddingBlockStart: {
-      default: space['4'],
-      [stylex.when.descendant(':where(*)', sectionItemsMarker)]: space['3'],
-    },
-    rowGap: {
-      default: space['2'],
-      [stylex.when.descendant(':where(*)', sectionItemsMarker)]: 0,
-    },
-    minHeight: {
-      default: `calc(${space['18.5']} + 1px)`,
-      [stylex.when.descendant(':where(*)', sectionItemsMarker)]: 0,
-    },
-    width: 'auto',
+    justifyContent: 'center',
+    rowGap: space['2'],
+    minHeight: `calc(${space['18.5']} + 1px)`,
+    width: '100%',
   },
   items: {
+    listStyle: 'none',
     display: 'flex',
     flexDirection: 'column',
-    marginBlockStart: space['3'],
     width: '100%',
   },
   item: {
-    paddingBlock: {
-      default: null,
-      [stylex.when.ancestor(':where(*)', sectionItemsMarker)]: space['4'],
-    },
     alignItems: 'center',
-    borderBlockStartColor: colorVars['--cl-color-border'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartWidth: {
-      default: '0px',
-      [stylex.when.ancestor(':where(*)', sectionItemsMarker)]: '1px',
-    },
     columnGap: space['3'],
     display: 'flex',
     flexWrap: 'nowrap',
@@ -85,6 +97,15 @@ export const styles = stylex.create({
     flexWrap: { [compact]: 'wrap', default: 'nowrap' },
     rowGap: { [compact]: space['3'], default: null },
   },
+  nestedItem: {
+    paddingBlock: space['4'],
+    borderBlockStartColor: colorVars['--cl-color-border'],
+    borderBlockStartStyle: 'solid',
+    borderBlockStartWidth: {
+      default: '0px',
+      [stylex.when.siblingBefore(':where(*)', sectionNestedItemMarker)]: '1px',
+    },
+  },
   mediaBase: {
     alignItems: 'center',
     alignSelf: 'center',
@@ -146,7 +167,6 @@ export const styles = stylex.create({
     width: '100%',
   },
 });
-/* eslint-enable @stylexjs/no-lookahead-selectors */
 
 export const sectionCompactStyles = stylex.create({
   hidden: {