fix: move header slot; sync header slot cases; remove comment

Author: zakk-verrilli-ld

packages/components/src/Alert.tsx

@@ -100,10 +100,6 @@ const Alert = ({
 					values={[
 						[HeadingContext, { className: styles.heading }],
 						[ButtonGroupContext, { className: styles.buttonGroup }],
-						// Establish Alert's own Text context so an ancestor overlay (e.g. a Dialog,
-						// which sets a `subtitle` slot with its own id/elementType/CSS) cannot leak
-						// into Alert content. Provides a default slot so a bare <Text> works, plus a
-						// `subtitle` slot for backward compatibility with existing usage.
 						[
 							TextContext,
 							{

packages/components/src/styles/Modal.module.css

@@ -69,6 +69,10 @@
 		grid-column: 1 / span 2;
 	}
 
+	> [slot='header'] {
+		margin-bottom: var(--lp-size-20);
+	}
+
 	& [slot='header'] {
 		display: grid;
 		grid-template-columns: 1fr;

packages/components/stories/Modal.stories.tsx

@@ -47,20 +47,20 @@ const renderModal = (args: Story['args']) => (
 		<Button>Trigger</Button>
 		<ModalOverlay>
 			<Modal {...args}>
+				<div slot="header">
+					<Heading slot="title">Title</Heading>
+					<IconButton
+						aria-label="close"
+						icon="cancel"
+						size="small"
+						variant="minimal"
+						onPress={close}
+					/>
+					<Text slot="subtitle">Subtitle</Text>
+				</div>
 				<Dialog>
 					{({ close }) => (
 						<>
-							<div slot="header">
-								<Heading slot="title">Title</Heading>
-								<IconButton
-									aria-label="close"
-									icon="cancel"
-									size="small"
-									variant="minimal"
-									onPress={close}
-								/>
-								<Text slot="subtitle">Subtitle</Text>
-							</div>
 							<div slot="body">Body text</div>
 							<div slot="footer">
 								<Button slot="close">Cancel</Button>
@@ -112,26 +112,31 @@ export const Drawer: Story = {
 	},
 };
 
+/**
+ * A Modal with a slotted `header`. The `header` groups the `title`, an optional
+ * `subtitle`, and the close button into the overlay's header grid, separate from the
+ * `body` and `footer`.
+ */
 export const WithHeader: Story = {
 	render: (args) => (
 		<DialogTrigger>
 			<Button>Trigger</Button>
 			<ModalOverlay>
 				<Modal {...args}>
+					<div slot="header">
+						<Heading slot="title">Invite teammates</Heading>
+						<IconButton
+							aria-label="close"
+							icon="cancel"
+							size="small"
+							variant="minimal"
+							onPress={close}
+						/>
+						<Text slot="subtitle">They'll get an email with a link to join.</Text>
+					</div>
 					<Dialog>
 						{({ close }) => (
 							<>
-								<div slot="header">
-									<Heading slot="title">Invite teammates</Heading>
-									<IconButton
-										aria-label="close"
-										icon="cancel"
-										size="small"
-										variant="minimal"
-										onPress={close}
-									/>
-									<Text slot="subtitle">They'll get an email with a link to join.</Text>
-								</div>
 								<div slot="body">Body text</div>
 								<div slot="footer">
 									<Button slot="close">Cancel</Button>