feat(ui): support top-positioned dialogs

Add a dialog position option and allow customizing the top offset via --dialog-top, plus pass-through style support.

packages/ui/src/components/dialog.css

@@ -16,6 +16,11 @@
   justify-content: center;
   pointer-events: none;
 
+  &[data-position="top"] {
+    align-items: flex-start;
+    padding-top: var(--dialog-top, 16px);
+  }
+
   [data-slot="dialog-container"] {
     position: relative;
     z-index: 50;

packages/ui/src/components/dialog.tsx

@@ -8,6 +8,8 @@ export interface DialogProps extends ParentProps {
   description?: JSXElement
   action?: JSXElement
   size?: "normal" | "large" | "x-large"
+  position?: "center" | "top"
+  style?: ComponentProps<"div">["style"]
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   fit?: boolean
@@ -21,7 +23,9 @@ export function Dialog(props: DialogProps) {
       data-component="dialog"
       data-fit={props.fit ? true : undefined}
       data-size={props.size || "normal"}
+      data-position={props.position && props.position !== "center" ? props.position : undefined}
       data-transition={props.transition ? true : undefined}
+      style={props.style}
     >
       <div data-slot="dialog-container">
         <Kobalte.Content