feat(dialog): position Dialog.ContentTitle sticky

Author: GregOnNet

packages/kit-headless/src/components/dialog/dialog.content-title.tsx

@@ -1,5 +1,16 @@
-import { Slot, component$ } from '@builder.io/qwik';
+import { Slot, component$, useStyles$ } from '@builder.io/qwik';
 
 export const ContentTitle = component$(() => {
-  return <Slot />;
+  useStyles$(`
+    .dialog-content-title {
+      position: sticky;
+      top: 0;
+    }
+  `);
+
+  return (
+    <div class="dialog-content-title">
+      <Slot />
+    </div>
+  );
 });

packages/kit-headless/src/components/dialog/dialog.stories.tsx

@@ -54,6 +54,9 @@ export const ScrollingLongContent: Story = {
         <button>Open Dialog</button>
       </Dialog.Trigger>
       <Dialog.Content>
+        <Dialog.ContentTitle>
+          <h2>My Dialog Title</h2>
+        </Dialog.ContentTitle>
         {Array(500)
           .fill(null)
           .map(() => 'Hello World')