From cf92ec9a25e3340d91f1523affa9da08b38239b0 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Wed, 4 Dec 2024 14:33:59 +0000
Subject: [PATCH 1/6] Updates to headers alignment

---
 .changeset/poor-scissors-chew.md              |  5 ++++
 packages/core/src/dialog/DialogHeader.css     |  1 +
 packages/lab/src/dialog/DialogHeader.css      |  4 ++-
 packages/lab/src/dialog/DialogHeader.tsx      |  3 +-
 packages/lab/src/overlay/OverlayHeader.css    |  1 -
 .../lab/stories/dialog/dialog.qa.stories.tsx  | 28 +++++++++++-------
 .../lab/stories/dialog/dialog.stories.tsx     |  6 ++++
 .../stories/overlay/overlay.qa.stories.tsx    | 12 +++++---
 .../lab/stories/overlay/overlay.stories.tsx   | 29 +++++++++++++++++--
 9 files changed, 69 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/poor-scissors-chew.md

diff --git a/.changeset/poor-scissors-chew.md b/.changeset/poor-scissors-chew.md
new file mode 100644
index 00000000000..eda562ba27b
--- /dev/null
+++ b/.changeset/poor-scissors-chew.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+fix alignment for titles spanning into multiple lines, wrap labs dialog header in H2 to avoid breaking change
diff --git a/packages/core/src/dialog/DialogHeader.css b/packages/core/src/dialog/DialogHeader.css
index 0fa72081a0e..fa35e6ba786 100644
--- a/packages/core/src/dialog/DialogHeader.css
+++ b/packages/core/src/dialog/DialogHeader.css
@@ -17,6 +17,7 @@
 /* Styles applied to the status indicator icon overriding its default size */
 .saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
 }
 
 /* Styles applied to DialogHeader when accent={true} */
diff --git a/packages/lab/src/dialog/DialogHeader.css b/packages/lab/src/dialog/DialogHeader.css
index 17aeb97d312..3d32cd686ad 100644
--- a/packages/lab/src/dialog/DialogHeader.css
+++ b/packages/lab/src/dialog/DialogHeader.css
@@ -3,12 +3,14 @@
   padding-bottom: var(--salt-spacing-300);
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
-  align-items: center;
   display: flex;
   flex-direction: row;
   gap: var(--salt-spacing-100);
   box-sizing: border-box;
 }
+.saltDialogHeader-header {
+  margin: 0;
+}
 
 .saltDialogHeader-container {
   flex-grow: 1;
diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx
index 6ea6463beff..22395b47826 100644
--- a/packages/lab/src/dialog/DialogHeader.tsx
+++ b/packages/lab/src/dialog/DialogHeader.tsx
@@ -1,4 +1,5 @@
 import {
+  H2,
   StatusIndicator,
   Text,
   type ValidationStatus,
@@ -86,7 +87,7 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
             {preheader && (
               <Text className={withBaseName("preheader")}>{preheader}</Text>
             )}
-            {header}
+            <H2 className={withBaseName("header")}>{header}</H2>
           </div>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>
diff --git a/packages/lab/src/overlay/OverlayHeader.css b/packages/lab/src/overlay/OverlayHeader.css
index 2a74f8fd5b0..da5e7af7276 100644
--- a/packages/lab/src/overlay/OverlayHeader.css
+++ b/packages/lab/src/overlay/OverlayHeader.css
@@ -1,7 +1,6 @@
 .saltOverlayHeader {
   padding: var(--salt-spacing-100);
   width: 100%;
-  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: stretch;
diff --git a/packages/lab/stories/dialog/dialog.qa.stories.tsx b/packages/lab/stories/dialog/dialog.qa.stories.tsx
index a3a355afe7e..e9b7cc3ecdc 100644
--- a/packages/lab/stories/dialog/dialog.qa.stories.tsx
+++ b/packages/lab/stories/dialog/dialog.qa.stories.tsx
@@ -1,4 +1,5 @@
-import { Dialog, H2 } from "@salt-ds/core";
+import { Button, Dialog } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
 import { DialogHeader } from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
@@ -11,7 +12,7 @@ export default {
 export const DialogHeaders: StoryFn<QAContainerProps> = () => (
   <QAContainer height={600} cols={1} itemPadding={5} width={1200}>
     <DialogHeader
-      header={<H2>Terms and conditions</H2>}
+      header="Terms and conditions"
       style={{
         width: 600,
       }}
@@ -20,40 +21,47 @@ export const DialogHeaders: StoryFn<QAContainerProps> = () => (
       style={{
         width: 600,
       }}
-      header={<H2>Terms and conditions</H2>}
+      header="Terms and conditions"
       preheader="Ensure you read and agree to these Terms"
     />
     <DialogHeader
       style={{
         width: 600,
       }}
-      header={<H2>Terms and conditions</H2>}
+      header="Terms and conditions"
       preheader="Ensure you read and agree to these Terms"
       description="Effective date: August 29, 2024"
     />
     <DialogHeader
       status="info"
-      header={<H2>Terms and conditions</H2>}
+      header="Terms and conditions"
       style={{
         width: 600,
       }}
     />
     <DialogHeader
+      actions={
+        <Button aria-label="Close dialog" appearance="transparent">
+          <CloseIcon aria-hidden />
+        </Button>
+      }
       status="info"
       style={{
         width: 600,
       }}
-      header={<H2>Terms and conditions</H2>}
-      preheader="Ensure you read and agree to these Terms"
+      header="Terms and conditions"
     />
     <DialogHeader
+      actions={
+        <Button aria-label="Close dialog" appearance="transparent">
+          <CloseIcon aria-hidden />
+        </Button>
+      }
       status="info"
       style={{
         width: 600,
       }}
-      header={<H2>Terms and conditions</H2>}
-      preheader="Ensure you read and agree to these Terms"
-      description="Effective date: August 29, 2024"
+      header="Complete terms and conditions for using the services provided by our company"
     />
   </QAContainer>
 );
diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx
index f1aaa1e77be..ea20eeac614 100644
--- a/packages/lab/stories/dialog/dialog.stories.tsx
+++ b/packages/lab/stories/dialog/dialog.stories.tsx
@@ -145,6 +145,12 @@ export const Default = DialogTemplate.bind({});
 Default.args = {
   id: "Default",
 };
+export const LongTitle = DialogTemplate.bind({});
+Default.args = {
+  id: "LongTitle",
+  header:
+    "Complete terms and conditions for using the services provided by our company",
+};
 
 const AlertDialogTemplate: StoryFn<
   DialogProps & { header: ReactNode; content: ReactNode }
diff --git a/packages/lab/stories/overlay/overlay.qa.stories.tsx b/packages/lab/stories/overlay/overlay.qa.stories.tsx
index 1c7b5a5a0c4..3288dd2fcc9 100644
--- a/packages/lab/stories/overlay/overlay.qa.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.qa.stories.tsx
@@ -29,8 +29,8 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
   return (
     <QAContainer
       height={800}
-      cols={5}
-      itemPadding={50}
+      cols={1}
+      itemPadding={80}
       itemWidthAuto
       width={1200}
       {...props}
@@ -39,11 +39,15 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
         <OverlayTrigger>
           <Button>Show Overlay</Button>
         </OverlayTrigger>
-        <OverlayPanel>
+        <OverlayPanel
+          style={{
+            width: "30ch",
+          }}
+        >
           <OverlayHeader
             preheader="Preheader"
             description="Description"
-            header={<H4>Header block</H4>}
+            header={<H4>Guidelines for optimal use of our application</H4>}
             actions={<CloseButton />}
           />
           <OverlayPanelContent>
diff --git a/packages/lab/stories/overlay/overlay.stories.tsx b/packages/lab/stories/overlay/overlay.stories.tsx
index cf640781114..4a9d6cb56ea 100644
--- a/packages/lab/stories/overlay/overlay.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.stories.tsx
@@ -13,14 +13,14 @@ import {
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
 
 export default {
   title: "Lab/Overlay Header",
 } as Meta<typeof Overlay>;
 
-export const Header = ({ onOpenChange }: OverlayProps) => {
+const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
   const [open, setOpen] = useState(false);
   const id = useId();
 
@@ -40,7 +40,7 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
           width: 500,
         }}
       >
-        <OverlayHeader header={<H4 id={id}>Header block</H4>} />
+        <OverlayHeader header={<H4 id={id}>Header block</H4>} {...props} />
         <OverlayPanelContent>
           <StackLayout gap={1}>
             <Text>
@@ -62,6 +62,29 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
   );
 };
 
+export const Header = HeaderTemplate.bind({});
+Header.args = {};
+
+export const LongHeader = HeaderTemplate.bind({});
+LongHeader.args = {
+  header: (
+    <H4>
+      Comprehensive guidelines and detailed instructions for the optimal use and
+      application of our services to ensure maximum efficiency and user
+      satisfaction
+    </H4>
+  ),
+  actions: (
+    <Button
+      aria-label="Close overlay"
+      appearance="transparent"
+      sentiment="neutral"
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  ),
+};
+
 export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
   const [open, setOpen] = useState(false);
   const id = useId();

From 29642c7e9551a3066dd854936fcd4e52226e2424 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Tue, 17 Dec 2024 10:13:27 +0000
Subject: [PATCH 2/6] Updates to stories

---
 .../lab/stories/dialog/dialog.stories.tsx     |  2 +-
 .../stories/overlay/overlay.qa.stories.tsx    |  8 +++++--
 .../lab/stories/overlay/overlay.stories.tsx   | 21 ++++++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx
index ea20eeac614..2f6f50ec25f 100644
--- a/packages/lab/stories/dialog/dialog.stories.tsx
+++ b/packages/lab/stories/dialog/dialog.stories.tsx
@@ -146,7 +146,7 @@ Default.args = {
   id: "Default",
 };
 export const LongTitle = DialogTemplate.bind({});
-Default.args = {
+LongTitle.args = {
   id: "LongTitle",
   header:
     "Complete terms and conditions for using the services provided by our company",
diff --git a/packages/lab/stories/overlay/overlay.qa.stories.tsx b/packages/lab/stories/overlay/overlay.qa.stories.tsx
index 3288dd2fcc9..f4f00c1d5cc 100644
--- a/packages/lab/stories/overlay/overlay.qa.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.qa.stories.tsx
@@ -1,6 +1,6 @@
 import {
   Button,
-  H4,
+  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -47,7 +47,11 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
           <OverlayHeader
             preheader="Preheader"
             description="Description"
-            header={<H4>Guidelines for optimal use of our application</H4>}
+            header={
+              <H2 styleAs="h4">
+                Guidelines for optimal use of our application
+              </H2>
+            }
             actions={<CloseButton />}
           />
           <OverlayPanelContent>
diff --git a/packages/lab/stories/overlay/overlay.stories.tsx b/packages/lab/stories/overlay/overlay.stories.tsx
index 4a9d6cb56ea..965bda0ec6b 100644
--- a/packages/lab/stories/overlay/overlay.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.stories.tsx
@@ -1,6 +1,6 @@
 import {
   Button,
-  H4,
+  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -40,7 +40,14 @@ const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
           width: 500,
         }}
       >
-        <OverlayHeader header={<H4 id={id}>Header block</H4>} {...props} />
+        <OverlayHeader
+          header={
+            <H2 styleAs="h4" id={id}>
+              Header block
+            </H2>
+          }
+          {...props}
+        />
         <OverlayPanelContent>
           <StackLayout gap={1}>
             <Text>
@@ -68,11 +75,11 @@ Header.args = {};
 export const LongHeader = HeaderTemplate.bind({});
 LongHeader.args = {
   header: (
-    <H4>
+    <H2 styleAs="h4">
       Comprehensive guidelines and detailed instructions for the optimal use and
       application of our services to ensure maximum efficiency and user
       satisfaction
-    </H4>
+    </H2>
   ),
   actions: (
     <Button
@@ -121,7 +128,11 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <OverlayHeader
           preheader="Preheader"
           description="Description"
-          header={<H4 id={id}>Header block</H4>}
+          header={
+            <H2 styleAs="h4" id={id}>
+              Header block
+            </H2>
+          }
           actions={<CloseButton />}
         />
         <OverlayPanelContent>

From 2bd28b3fd9b2da033322bddf665db2dbf9b2e3f8 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Tue, 17 Dec 2024 10:16:12 +0000
Subject: [PATCH 3/6] Updates to stories

---
 site/src/examples/overlay/WithHeader.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/src/examples/overlay/WithHeader.tsx b/site/src/examples/overlay/WithHeader.tsx
index 4a3b4099956..ab50d3ba1c8 100644
--- a/site/src/examples/overlay/WithHeader.tsx
+++ b/site/src/examples/overlay/WithHeader.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -34,7 +35,11 @@ export const WithHeader = (): ReactElement => {
       </OverlayTrigger>
       <OverlayPanel aria-labelledby={id}>
         <OverlayHeader
-          header={<h4 id={id}>Title</h4>}
+          header={
+            <H2 styleAs="h4" id={id}>
+              Title
+            </H2>
+          }
           actions={headerActions}
         />
         <OverlayPanelContent>

From 3328713cd9393b33afd7f4f617dcd9d457870fb3 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Wed, 18 Dec 2024 11:42:01 +0000
Subject: [PATCH 4/6] updates

---
 .changeset/poor-scissors-chew.md           |  2 +-
 packages/lab/src/dialog/DialogHeader.tsx   | 10 ++++------
 packages/lab/src/overlay/OverlayHeader.tsx | 10 ++++------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/.changeset/poor-scissors-chew.md b/.changeset/poor-scissors-chew.md
index eda562ba27b..c8fd1216d98 100644
--- a/.changeset/poor-scissors-chew.md
+++ b/.changeset/poor-scissors-chew.md
@@ -2,4 +2,4 @@
 "@salt-ds/lab": patch
 ---
 
-fix alignment for titles spanning into multiple lines, wrap labs dialog header in H2 to avoid breaking change
+Overlay and Dialog headers fix alignment for titles spanning into multiple lines, wrap preheader and headers in H2.
diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx
index 22395b47826..6b2eb226b7b 100644
--- a/packages/lab/src/dialog/DialogHeader.tsx
+++ b/packages/lab/src/dialog/DialogHeader.tsx
@@ -83,12 +83,10 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
       >
         {status && <StatusIndicator status={status} />}
         <div className={withBaseName("container")}>
-          <div className={withBaseName("header")}>
-            {preheader && (
-              <Text className={withBaseName("preheader")}>{preheader}</Text>
-            )}
-            <H2 className={withBaseName("header")}>{header}</H2>
-          </div>
+          <H2 className={withBaseName("header")}>
+            {preheader && <Text color="primary">{preheader}</Text>}
+            {header}
+          </H2>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>
               {description}
diff --git a/packages/lab/src/overlay/OverlayHeader.tsx b/packages/lab/src/overlay/OverlayHeader.tsx
index 0375929a124..76bb694390f 100644
--- a/packages/lab/src/overlay/OverlayHeader.tsx
+++ b/packages/lab/src/overlay/OverlayHeader.tsx
@@ -1,4 +1,4 @@
-import { Text, makePrefixer } from "@salt-ds/core";
+import { H2, Text, makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
@@ -45,12 +45,10 @@ export const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(
     return (
       <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>
         <div className={withBaseName("container")}>
-          <div className={withBaseName("header")}>
-            {preheader && (
-              <Text className={withBaseName("preheader")}>{preheader}</Text>
-            )}
+          <H2 styleAs="h4" className={withBaseName("header")}>
+            {preheader && <Text color="primary">{preheader}</Text>}
             {header}
-          </div>
+          </H2>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>
               {description}

From 120c6376a7dad14b92148ef2705fa7a2fb9dea99 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Wed, 18 Dec 2024 16:49:45 +0000
Subject: [PATCH 5/6] updates to examples

---
 .../lab/stories/dialog/dialog.stories.tsx     | 11 ++++---
 .../stories/overlay/overlay.qa.stories.tsx    |  7 +----
 .../lab/stories/overlay/overlay.stories.tsx   | 30 +++----------------
 site/src/examples/dialog/WithHeader.tsx       |  3 +-
 site/src/examples/overlay/WithHeader.tsx      | 14 ++-------
 5 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx
index 2f6f50ec25f..0ecb88f20aa 100644
--- a/packages/lab/stories/dialog/dialog.stories.tsx
+++ b/packages/lab/stories/dialog/dialog.stories.tsx
@@ -5,7 +5,6 @@ import {
   DialogContent,
   type DialogContentProps,
   type DialogProps,
-  H2,
   SplitLayout,
   StackLayout,
 } from "@salt-ds/core";
@@ -24,7 +23,7 @@ export default {
   component: Dialog,
   args: {
     preheader: "Settlements",
-    header: <H2>Terms and conditions</H2>,
+    header: "Terms and conditions",
     description: "Effective date: August 29, 2024",
     content:
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
@@ -207,23 +206,23 @@ const AlertDialogTemplate: StoryFn<
 export const InfoStatus = AlertDialogTemplate.bind({});
 InfoStatus.args = {
   status: "info",
-  header: <H2>Info</H2>,
+  header: "Info",
 };
 
 export const SuccessStatus = AlertDialogTemplate.bind({});
 SuccessStatus.args = {
   status: "success",
-  header: <H2>Success</H2>,
+  header: "Success",
 };
 
 export const WarningStatus = AlertDialogTemplate.bind({});
 WarningStatus.args = {
   status: "warning",
-  header: <H2>Warning</H2>,
+  header: "Warning",
 };
 
 export const ErrorStatus = AlertDialogTemplate.bind({});
 ErrorStatus.args = {
   status: "error",
-  header: <H2>Error</H2>,
+  header: "Error",
 };
diff --git a/packages/lab/stories/overlay/overlay.qa.stories.tsx b/packages/lab/stories/overlay/overlay.qa.stories.tsx
index f4f00c1d5cc..a0035e0a75b 100644
--- a/packages/lab/stories/overlay/overlay.qa.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.qa.stories.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -47,11 +46,7 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
           <OverlayHeader
             preheader="Preheader"
             description="Description"
-            header={
-              <H2 styleAs="h4">
-                Guidelines for optimal use of our application
-              </H2>
-            }
+            header="Guidelines for optimal use of our application"
             actions={<CloseButton />}
           />
           <OverlayPanelContent>
diff --git a/packages/lab/stories/overlay/overlay.stories.tsx b/packages/lab/stories/overlay/overlay.stories.tsx
index 965bda0ec6b..228a1f2712c 100644
--- a/packages/lab/stories/overlay/overlay.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.stories.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -9,7 +8,6 @@ import {
   StackLayout,
   Text,
   Tooltip,
-  useId,
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
@@ -22,7 +20,6 @@ export default {
 
 const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onChange = (newOpen: boolean) => {
     setOpen(newOpen);
@@ -35,19 +32,11 @@ const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
         <Button>Show Overlay</Button>
       </OverlayTrigger>
       <OverlayPanel
-        aria-labelledby={id}
         style={{
           width: 500,
         }}
       >
-        <OverlayHeader
-          header={
-            <H2 styleAs="h4" id={id}>
-              Header block
-            </H2>
-          }
-          {...props}
-        />
+        <OverlayHeader header="Header block" {...props} />
         <OverlayPanelContent>
           <StackLayout gap={1}>
             <Text>
@@ -74,13 +63,8 @@ Header.args = {};
 
 export const LongHeader = HeaderTemplate.bind({});
 LongHeader.args = {
-  header: (
-    <H2 styleAs="h4">
-      Comprehensive guidelines and detailed instructions for the optimal use and
-      application of our services to ensure maximum efficiency and user
-      satisfaction
-    </H2>
-  ),
+  header:
+    "Comprehensive guidelines and detailed instructions for the optimal use and application of our services to ensure maximum efficiency and user satisfaction",
   actions: (
     <Button
       aria-label="Close overlay"
@@ -94,7 +78,6 @@ LongHeader.args = {
 
 export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onChange = (newOpen: boolean) => {
     setOpen(newOpen);
@@ -120,7 +103,6 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <Button>Show Overlay</Button>
       </OverlayTrigger>
       <OverlayPanel
-        aria-labelledby={id}
         style={{
           width: 500,
         }}
@@ -128,11 +110,7 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <OverlayHeader
           preheader="Preheader"
           description="Description"
-          header={
-            <H2 styleAs="h4" id={id}>
-              Header block
-            </H2>
-          }
+          header="Header block"
           actions={<CloseButton />}
         />
         <OverlayPanelContent>
diff --git a/site/src/examples/dialog/WithHeader.tsx b/site/src/examples/dialog/WithHeader.tsx
index 14e2902a464..413511f99d9 100644
--- a/site/src/examples/dialog/WithHeader.tsx
+++ b/site/src/examples/dialog/WithHeader.tsx
@@ -3,7 +3,6 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  H2,
   H3,
   StackLayout,
   useId,
@@ -44,7 +43,7 @@ export const WithHeader = (): ReactElement => {
       <Dialog open={open} onOpenChange={onOpenChange} id={id}>
         <DialogHeader
           preheader="Settlements"
-          header={<H2>Terms and conditions</H2>}
+          header="Terms and conditions"
           description="Effective date: August 29, 2024"
           actions={closeButton}
         />
diff --git a/site/src/examples/overlay/WithHeader.tsx b/site/src/examples/overlay/WithHeader.tsx
index ab50d3ba1c8..7d0afa0bcb4 100644
--- a/site/src/examples/overlay/WithHeader.tsx
+++ b/site/src/examples/overlay/WithHeader.tsx
@@ -1,11 +1,9 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
   OverlayTrigger,
-  useId,
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
@@ -13,7 +11,6 @@ import { type ReactElement, useState } from "react";
 
 export const WithHeader = (): ReactElement => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onOpenChange = (newOpen: boolean) => setOpen(newOpen);
 
@@ -33,15 +30,8 @@ export const WithHeader = (): ReactElement => {
       <OverlayTrigger>
         <Button>Show Overlay</Button>
       </OverlayTrigger>
-      <OverlayPanel aria-labelledby={id}>
-        <OverlayHeader
-          header={
-            <H2 styleAs="h4" id={id}>
-              Title
-            </H2>
-          }
-          actions={headerActions}
-        />
+      <OverlayPanel>
+        <OverlayHeader header="Title" actions={headerActions} />
         <OverlayPanelContent>
           <div>Content of Overlay</div>
         </OverlayPanelContent>

From f87436d3d34257726555dc09f3e80a1fcc4313b8 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Fri, 20 Dec 2024 13:51:32 +0000
Subject: [PATCH 6/6] move updated css to labs changes

---
 packages/core/src/dialog/DialogHeader.css | 1 -
 packages/lab/src/dialog/DialogHeader.css  | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/dialog/DialogHeader.css b/packages/core/src/dialog/DialogHeader.css
index fa35e6ba786..0fa72081a0e 100644
--- a/packages/core/src/dialog/DialogHeader.css
+++ b/packages/core/src/dialog/DialogHeader.css
@@ -17,7 +17,6 @@
 /* Styles applied to the status indicator icon overriding its default size */
 .saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
 }
 
 /* Styles applied to DialogHeader when accent={true} */
diff --git a/packages/lab/src/dialog/DialogHeader.css b/packages/lab/src/dialog/DialogHeader.css
index 3d32cd686ad..a9003cc1d52 100644
--- a/packages/lab/src/dialog/DialogHeader.css
+++ b/packages/lab/src/dialog/DialogHeader.css
@@ -31,6 +31,7 @@
 /* Styles applied to the status indicator icon overriding its default size */
 .saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
 }
 
 /* Styles applied to DialogHeader when accent={true} */