@jmruthers/pace-core 0.6.4 → 0.6.5

package/src/components/Dialog/Dialog.tsx

@@ -4,7 +4,7 @@
  * @module Components/Dialog
  * @since 0.1.0
  *
- * A comprehensive dialog component system built on top of Radix UI primitives.
+ * A comprehensive dialog component system using native HTML `<dialog>` element.
  * Provides accessible modal dialogs with focus management and keyboard navigation.
  * Uses semantic HTML elements including native <dialog> element for maximum accessibility.
  *
@@ -24,8 +24,9 @@
  * - Sticky headers/footers with scrollable body
  * - Overlay backdrop with customization
  * - Close button with accessibility (optional)
- * - Header, footer, title, and description components
+ * - Header and footer components
  * - Configurable close behaviors
+ * - Native dialog title and aria-description attributes for accessibility
  *
  * @example
  * ```tsx
@@ -34,12 +35,9 @@
  *   <DialogTrigger asChild>
  *     <Button>Open Dialog</Button>
  *   </DialogTrigger>
- *   <DialogContent size="lg">
+ *   <DialogContent size="lg" title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
  *     <DialogHeader>
- *       <DialogTitle>Edit Profile</DialogTitle>
- *       <DialogDescription>
- *         Make changes to your profile here. Click save when you're done.
- *       </DialogDescription>
+ *       <h2>Edit Profile</h2>
  *     </DialogHeader>
  *     <DialogBody>
  *       <section className="space-y-4">
@@ -54,81 +52,12 @@
  *     </DialogFooter>
  *   </DialogContent>
  * </Dialog>
- * 
- * // Dialog with semantic scrolling content
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Scrollable Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent 
- *     size="lg" 
- *     enableScrolling={true}
- *     maxHeightPercent={80}
- *   >
- *     <DialogHeader>
- *       <DialogTitle>Large Content Dialog</DialogTitle>
- *       <DialogDescription>
- *         This dialog has lots of content and will scroll if needed.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section className="space-y-4">
- *         {Array.from({ length: 50 }, (_, i) => (
- *           <article key={i}>
- *             <h4>Content Item {i + 1}</h4>
- *             <p>This is semantic content within the dialog body.</p>
- *           </article>
- *         ))}
- *       </section>
- *     </DialogBody>
- *     <DialogFooter>
- *       <Button>Save</Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * 
- * // Auto-sizing dialog that fits content
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Auto Size Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent size="auto">
- *     <DialogHeader>
- *       <DialogTitle>Auto-Sized Dialog</DialogTitle>
- *       <DialogDescription>
- *         This dialog automatically adjusts its width to fit the content.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section>
- *         <p>Content that determines the dialog width...</p>
- *       </section>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * 
- * // Full-screen dialog with semantic structure
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Full Screen</Button>
- *   </DialogTrigger>
- *   <DialogContent size="full">
- *     <DialogHeader>
- *       <DialogTitle>Full Screen Dialog</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section>
- *         <p>Full screen content with semantic structure...</p>
- *       </section>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
  * ```
  *
  * @accessibility
  * - WCAG 2.1 AA compliant
  * - Uses semantic HTML structure (dialog, header, main, footer)
- * - Native dialog element with enhanced ARIA attributes via Radix UI
+ * - Native dialog element with proper ARIA attributes
  * - Focus trapping within dialog content
  * - Keyboard navigation support
  * - Screen reader announcements
@@ -147,18 +76,24 @@
  * - Optimized scroll handling
  *
  * @dependencies
- * - @radix-ui/react-dialog - Core dialog functionality
  * - lucide-react - Icons
- * - React 19+ - Hooks and refs
+ * - React 19+ - Hooks, refs, and createPortal
  * - Tailwind CSS - Styling and animations
+ * 
+ * @note
+ * This component uses native HTML dialog element with manual focus management.
+ * Title and description are provided via props on DialogContent, which set the native
+ * title and aria-description attributes on the dialog element for accessibility.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription for details.
  */
 
 import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { cn } from '../../utils/core/cn';
 import { renderSafeHtml } from '../../utils/validation/htmlSanitization';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useId } from 'react';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 
 /**
  * Simple debounce function that matches lodash debounce API
@@ -195,30 +130,62 @@ function debounce<T extends (...args: any[]) => void>(
  */
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
 
+/**
+ * Dialog context value
+ */
+interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dialogRef: React.RefObject<HTMLDialogElement | null>;
+  titleId: string;
+  descriptionId: string;
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+/**
+ * Hook to access Dialog context
+ */
+function useDialogContext(): DialogContextValue {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
+
 /**
  * Props for the Dialog root component
  * @public
  */
-export interface DialogProps extends DialogPrimitive.DialogProps {}
+export interface DialogProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
 
 /**
  * Props for the DialogTrigger component
  * @public
  */
-export interface DialogTriggerProps extends DialogPrimitive.DialogTriggerProps {}
+export interface DialogTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}
 
 /**
  * Enhanced props for the DialogContent component with size variants and customization
- * Uses semantic HTML dialog element with Radix UI accessibility features
+ * Uses semantic HTML dialog element
  * @public
  */
-export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDialogElement> {
   /** Dialog size variant */
   size?: DialogSize;
   /** Whether to show the close button */
   showCloseButton?: boolean;
-  /** Custom className for the overlay */
-  overlayClassName?: string;
   /** Whether to prevent closing on escape key */
   preventCloseOnEscape?: boolean;
   /** Whether to prevent closing on outside click */
@@ -237,13 +204,31 @@ export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeo
   minHeight?: string;
   /** Minimum width in CSS units */
   minWidth?: string;
+  /** Dialog title for accessibility (sets native title attribute) */
+  title?: string;
+  /** Dialog description for accessibility (sets aria-description attribute) */
+  description?: string;
 }
 
 /**
  * Props for the DialogOverlay component
  * @public
  */
-export interface DialogOverlayProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}
+export interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Props for the DialogPortal component
+ * @public
+ */
+export interface DialogPortalProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Props for the DialogClose component
+ * @public
+ */
+export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 /**
  * Props for the DialogHeader component (semantic header element)
@@ -284,7 +269,7 @@ export interface DialogBodyProps extends React.HTMLAttributes<HTMLElement> {
  * Props for the DialogTitle component
  * @public
  */
-export interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+export interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /** HTML content to render as title (will be sanitized for security) */
   htmlContent?: string;
   /** Whether to allow HTML content rendering (default: true) */
@@ -295,7 +280,7 @@ export interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof
  * Props for the DialogDescription component
  * @public
  */
-export interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+export interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   /** HTML content to render as description (will be sanitized for security) */
   htmlContent?: string;
   /** Whether to allow HTML content rendering (default: true) */
@@ -312,27 +297,117 @@ const sizeClasses = {
   auto: 'max-w-none w-auto min-w-0'
 };
 
-// Root Dialog components from Radix
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-// DialogOverlay component
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  DialogOverlayProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+/**
+ * Dialog root component
+ * Provides context for dialog state management
+ */
+const Dialog = React.memo<DialogProps>(function Dialog({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+
+  const contextValue = React.useMemo<DialogContextValue>(() => ({
+    open,
+    onOpenChange: handleOpenChange,
+    dialogRef,
+    titleId,
+    descriptionId,
+  }), [open, handleOpenChange, titleId, descriptionId]);
+
+  return (
+    <DialogContext.Provider value={contextValue}>
+      {children}
+    </DialogContext.Provider>
+  );
+});
+Dialog.displayName = 'Dialog';
+
+/**
+ * DialogTrigger component
+ * Opens the dialog when clicked
+ */
+const DialogTrigger = React.forwardRef<HTMLElement, DialogTriggerProps>(
+  ({ children, asChild = false, className, onClick, ...props }, ref) => {
+    const { onOpenChange } = useDialogContext();
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+      onClick?.(e);
+      onOpenChange(true);
+    }, [onOpenChange, onClick]);
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        onClick: handleClick,
+        className: cn(className, (children as any).props?.className),
+        ...props,
+      });
+    }
+
+    return (
+      <button
+        ref={ref as React.RefObject<HTMLButtonElement>}
+        type="button"
+        onClick={handleClick}
+        className={className}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+DialogTrigger.displayName = 'DialogTrigger';
+
+/**
+ * DialogPortal component
+ * Portals dialog content to document.body
+ */
+const DialogPortal: React.FC<DialogPortalProps> = ({ children }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(children, document.body);
+};
+DialogPortal.displayName = 'DialogPortal';
+
+/**
+ * DialogOverlay component
+ * Backdrop overlay for the dialog (optional, native dialog provides ::backdrop)
+ * This component is kept for backward compatibility but may not be needed
+ * when using native dialog element which provides ::backdrop automatically
+ */
+const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(
+  ({ className, ...props }, ref) => {
+    // Note: Native dialog element provides ::backdrop automatically
+    // This component is kept for API compatibility but may not render
+    // The native dialog's ::backdrop is styled via CSS
+    return null;
+  }
+);
+DialogOverlay.displayName = 'DialogOverlay';
 
 /**
  * Custom hook for managing smart dialog dimensions
@@ -367,7 +442,7 @@ const useSmartDimensions = ({
 
       // Handle height constraints
       if (maxHeightPercent && typeof maxHeightPercent === 'number') {
-        const constrainedHeight = Math.min(maxHeightPercent, 95); // Cap at 95% to ensure some margin
+        const constrainedHeight = Math.min(maxHeightPercent, 95);
         result.maxHeight = `${constrainedHeight}vh`;
       } else if (maxHeight) {
         result.maxHeight = maxHeight;
@@ -375,7 +450,7 @@ const useSmartDimensions = ({
 
       // Handle width constraints  
       if (maxWidthPercent && typeof maxWidthPercent === 'number') {
-        const constrainedWidth = Math.min(maxWidthPercent, 95); // Cap at 95% to ensure some margin
+        const constrainedWidth = Math.min(maxWidthPercent, 95);
         result.maxWidth = `${constrainedWidth}vw`;
       } else if (maxWidth) {
         result.maxWidth = maxWidth;
@@ -407,7 +482,7 @@ const useSmartDimensions = ({
     };
   }, [maxHeightPercent, maxWidthPercent, maxHeight, maxWidth, minHeight, minWidth, enableScrolling]);
 
-  // Only return dimensions if we have something to constrain
+  // Return dimensions
   const result: React.CSSProperties = {};
 
   // Handle height constraints
@@ -440,146 +515,229 @@ const useSmartDimensions = ({
 /**
  * DialogContent component
  * The main content container using semantic HTML <dialog> element with enhanced features
- * Built on Radix UI primitives for accessibility while providing semantic structure
  * 
  * @param props - Content configuration and styling
  * @param ref - Forwarded ref to the dialog element
  * @returns JSX.Element - The semantic dialog content with overlay and optional close button
- * 
- * @example
- * ```tsx
- * <DialogContent size="lg" enableScrolling={true} maxHeightPercent={80}>
- *   <DialogHeader>
- *     <DialogTitle>Scrollable Dialog</DialogTitle>
- *     <DialogDescription>This dialog will scroll if content overflows.</DialogDescription>
- *   </DialogHeader>
- *   <DialogBody>
- *     <section>Large amount of semantic content here...</section>
- *   </DialogBody>
- *   <DialogFooter>
- *     <Button>Save</Button>
- *   </DialogFooter>
- * </DialogContent>
- * ```
  */
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ 
-  className, 
-  children, 
-  size = 'md',
-  showCloseButton = true,
-  overlayClassName,
-  preventCloseOnEscape = false,
-  preventCloseOnOutsideClick = false,
-  maxHeightPercent,
-  maxWidthPercent,
-  enableScrolling = false,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  style,
-  ...props 
-}, ref) => {
-  const smartDimensions = useSmartDimensions({ 
-    maxHeightPercent, 
+const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
+  ({ 
+    className, 
+    children, 
+    size = 'md',
+    showCloseButton = true,
+    preventCloseOnEscape = false,
+    preventCloseOnOutsideClick = false,
+    maxHeightPercent,
     maxWidthPercent,
-    maxHeight, 
+    enableScrolling = false,
+    maxHeight,
     maxWidth,
     minHeight,
     minWidth,
-    enableScrolling 
-  });
+    title,
+    description,
+    style,
+    ...props 
+  }, ref) => {
+    const { open, onOpenChange, dialogRef, titleId, descriptionId } = useDialogContext();
+    const internalRef = useRef<HTMLDialogElement>(null);
+    
+    // Use the dialogRef from context, or fall back to internal ref or forwarded ref
+    const actualDialogRef = dialogRef.current ? dialogRef : (ref ? (ref as React.RefObject<HTMLDialogElement>) : internalRef);
+
+    const smartDimensions = useSmartDimensions({ 
+      maxHeightPercent, 
+      maxWidthPercent,
+      maxHeight, 
+      maxWidth,
+      minHeight,
+      minWidth,
+      enableScrolling 
+    });
 
-  // React Compiler handles memoization automatically
-  const handleEscapeKeyDown = (event: KeyboardEvent) => {
-    if (preventCloseOnEscape) {
-      event.preventDefault();
-    }
-  };
+    // Focus trap
+    const { containerRef } = useFocusTrap({
+      isActive: open,
+      autoFocus: true,
+      restoreFocus: true,
+      onEscape: preventCloseOnEscape ? undefined : () => onOpenChange(false),
+    });
 
-  const handlePointerDownOutside = (event: Event) => {
-    if (preventCloseOnOutsideClick) {
-      event.preventDefault();
-    }
-  };
+    // Merge refs
+    const mergedRef = useCallback((node: HTMLDialogElement | null) => {
+      // Set context dialog ref
+      if (dialogRef && 'current' in dialogRef) {
+        (dialogRef as React.MutableRefObject<HTMLDialogElement | null>).current = node;
+      }
+      // Set internal ref
+      if (internalRef && 'current' in internalRef) {
+        internalRef.current = node;
+      }
+      // Set focus trap container ref
+      if (containerRef && 'current' in containerRef) {
+        (containerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+      }
+      // Handle forwarded ref
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref && 'current' in ref) {
+        (ref as React.MutableRefObject<HTMLDialogElement | null>).current = node;
+      }
+    }, [dialogRef, containerRef, ref]);
+
+    // Handle dialog open/close
+    useEffect(() => {
+      const dialog = dialogRef.current || internalRef.current;
+      if (!dialog) return;
+
+      if (open) {
+        // Use requestAnimationFrame to ensure DOM is ready
+        requestAnimationFrame(() => {
+          if (dialog && open) {
+            dialog.showModal();
+          }
+        });
+      } else {
+        // Close dialog before it's removed from DOM
+        if (dialog.open) {
+          dialog.close();
+        }
+      }
+    }, [open, dialogRef]);
+
+    // Handle close event - sync state when dialog is closed externally
+    useEffect(() => {
+      const dialog = dialogRef.current || internalRef.current;
+      if (!dialog) return;
+
+      const handleClose = () => {
+        // Only update state if dialog was closed externally (not via our state change)
+        // Check if dialog is actually closed and our state says it should be open
+        if (!dialog.open && open) {
+          onOpenChange(false);
+        }
+      };
+
+      dialog.addEventListener('close', handleClose);
+      return () => {
+        dialog.removeEventListener('close', handleClose);
+      };
+    }, [open, onOpenChange, dialogRef]);
+
+    // Handle cancel event (Escape or backdrop click)
+    useEffect(() => {
+      const dialog = dialogRef.current || internalRef.current;
+      if (!dialog) return;
+
+      const handleCancel = (e: Event) => {
+        if (preventCloseOnEscape || preventCloseOnOutsideClick) {
+          e.preventDefault();
+          return;
+        }
+        onOpenChange(false);
+      };
+
+      dialog.addEventListener('cancel', handleCancel);
+      return () => {
+        dialog.removeEventListener('cancel', handleCancel);
+      };
+    }, [preventCloseOnEscape, preventCloseOnOutsideClick, onOpenChange, dialogRef]);
+
+    // Merge smart dimensions with provided style
+    const mergedStyle = React.useMemo(() => {
+      if (Object.keys(smartDimensions).length === 0) {
+        return style;
+      }
 
-  // Merge smart dimensions with provided style
-  const mergedStyle = React.useMemo(() => {
-    // If no smart dimensions are active, just return the provided style
-    if (Object.keys(smartDimensions).length === 0) {
-      return style;
-    }
+      const finalStyle: React.CSSProperties = { ...smartDimensions, ...style };
+      
+      if (!maxWidth && !maxWidthPercent) {
+        const { maxWidth: _, ...styleWithoutMaxWidth } = finalStyle;
+        return styleWithoutMaxWidth;
+      }
+      
+      return finalStyle;
+    }, [smartDimensions, style, maxWidth, maxWidthPercent]);
+
+    return (
+      <DialogPortal>
+        {open && (
+          <dialog
+            ref={mergedRef}
+            className={cn(
+              'fixed left-[50%] top-[50%] z-[51] w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200',
+              'animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]',
+              'sm:rounded-lg',
+              // Reset native dialog styles
+              'm-0 p-0 max-w-none max-h-none w-auto h-auto border-0 bg-transparent outline-none',
+              // Apply our custom styling
+              'border bg-background shadow-lg',
+              // Style native backdrop pseudo-element (Tailwind v4 supports arbitrary variants)
+              '[&::backdrop]:bg-black/50 [&::backdrop]:animate-in [&::backdrop]:fade-in-0',
+              // Only apply size classes if not using smart width
+              !maxWidth && !maxWidthPercent && sizeClasses[size],
+              // Auto size gets special handling
+              size === 'auto' && 'w-fit max-w-[90vw] sm:max-w-[80vw]',
+              // Layout classes based on scrolling mode
+              enableScrolling ? 'flex flex-col px-6' : 'grid gap-4 p-6',
+              // Full screen handling
+              size === 'full' && 'sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] left-0 top-0 translate-x-0 translate-y-0 h-full rounded-none sm:h-auto sm:rounded-lg',
+              // Overflow handling for scrolling mode
+              enableScrolling && 'overflow-hidden',
+              className
+            )}
+            style={mergedStyle}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            title={title}
+            aria-description={description}
+            {...props}
+          >
+            {children}
+            {showCloseButton && (
+              <DialogClose />
+            )}
+          </dialog>
+        )}
+      </DialogPortal>
+    );
+  }
+);
+DialogContent.displayName = 'DialogContent';
 
-    // Start with smart dimensions
-    const finalStyle: React.CSSProperties = { ...smartDimensions, ...style };
-    
-    // If not using smart width and no maxWidth override, don't include maxWidth
-    if (!maxWidth && !maxWidthPercent) {
-      const { maxWidth: _, ...styleWithoutMaxWidth } = finalStyle;
-      return styleWithoutMaxWidth;
-    }
-    
-    return finalStyle;
-  }, [smartDimensions, style, maxWidth, maxWidthPercent]);
+/**
+ * DialogClose component
+ * Button to close the dialog
+ */
+const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
+  ({ className, ...props }, ref) => {
+    const { onOpenChange } = useDialogContext();
 
-  return (
-    <DialogPortal>
-      <DialogOverlay className={overlayClassName} />
-      <DialogPrimitive.Content
+    return (
+      <button
         ref={ref}
-        onEscapeKeyDown={preventCloseOnEscape ? handleEscapeKeyDown : undefined}
-        onPointerDownOutside={handlePointerDownOutside}
+        type="button"
+        onClick={() => onOpenChange(false)}
         className={cn(
-          'fixed left-[50%] top-[50%] z-[51] w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          // Reset native dialog styles that interfere with our custom styling
-          'm-0 p-0 max-w-none max-h-none w-auto h-auto border-0 bg-transparent outline-none',
-          // Apply our custom styling
-          'border bg-background shadow-lg',
-          // Only apply size classes if not using smart width
-          !maxWidth && !maxWidthPercent && sizeClasses[size],
-          // Auto size gets special handling for content fitting
-          size === 'auto' && 'w-fit max-w-[90vw] sm:max-w-[80vw]',
-          // Layout classes based on scrolling mode
-          enableScrolling ? 'flex flex-col' : 'grid gap-4 p-6',
-          // Full screen handling
-          size === 'full' && 'sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] left-0 top-0 translate-x-0 translate-y-0 h-full rounded-none sm:h-auto sm:rounded-lg',
-          // Overflow handling for scrolling mode
-          enableScrolling && 'overflow-hidden',
+          'absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
           className
         )}
-        style={mergedStyle}
         {...props}
       >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-            <X className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </button>
+    );
+  }
+);
+DialogClose.displayName = 'DialogClose';
 
 /**
  * DialogHeader component
  * Semantic header container for dialog title and description with optional sticky behavior
- * 
- * @param props - Header configuration and styling
- * @returns JSX.Element - The dialog header container using semantic <header> element
- * 
- * @example
- * ```tsx
- * <DialogHeader sticky={true}>
- *   <DialogTitle>Sticky Header</DialogTitle>
- *   <DialogDescription>This header stays visible while scrolling.</DialogDescription>
- * </DialogHeader>
- * ```
  */
 const DialogHeader = ({
   className,
@@ -589,7 +747,7 @@ const DialogHeader = ({
   <header
     className={cn(
       'flex flex-col space-y-1.5 text-center sm:text-left',
-      sticky ? 'sticky top-0 z-10 bg-background p-6 pb-4 border-b' : 'p-6 pb-4',
+      sticky ? 'sticky top-0 z-10 bg-background pt-6 pb-4 border-b' : 'py-2',
       className
     )}
     {...props}
@@ -600,27 +758,6 @@ DialogHeader.displayName = 'DialogHeader';
 /**
  * DialogBody component
  * Semantic main content area for dialog body content with scrollable functionality
- * Supports both React children and safe HTML content rendering
- * 
- * @param props - Body configuration and styling
- * @returns JSX.Element - The scrollable dialog body container using semantic <main> element
- * 
- * @example
- * ```tsx
- * // Using React children
- * <DialogBody>
- *   <section className="space-y-4">
- *     <h4>Content Title</h4>
- *     <p>Long content that will scroll...</p>
- *   </section>
- * </DialogBody>
- * 
- * // Using HTML content
- * <DialogBody 
- *   htmlContent="<h2>Import Instructions</h2><p>Upload a CSV file with the following format:</p><ul><li>Required columns: name, email</li><li>Optional columns: phone, address</li></ul>"
- *   allowHtml={true}
- * />
- * ```
  */
 const DialogBody = ({
   className,
@@ -640,7 +777,6 @@ const DialogBody = ({
     };
   }, [maxHeight, style]);
 
-  // Process HTML content if provided
   const processedHtmlContent = React.useMemo(() => {
     if (!htmlContent || !allowHtml) {
       return null;
@@ -654,13 +790,12 @@ const DialogBody = ({
     return result.html;
   }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
 
-  // Determine if htmlContent was provided (even if processing failed)
   const hasHtmlContent = Boolean(htmlContent && allowHtml);
 
   return (
     <main
       className={cn(
-        'overflow-y-auto px-6 py-2',
+        'overflow-y-auto py-2',
         className
       )}
       style={mergedStyle}
@@ -669,16 +804,16 @@ const DialogBody = ({
       {...props}
     >
       {processedHtmlContent ? (
-        <div 
+        <p 
           dangerouslySetInnerHTML={{ __html: processedHtmlContent }}
           className="prose prose-sm max-w-none"
         />
       ) : (
         <>
           {hasHtmlContent && !processedHtmlContent && (
-            <div className="text-acc-500 mb-2">
+            <p className="text-acc-500 mb-2">
               No HTML content processed. Showing children instead.
-            </div>
+            </p>
           )}
           {children}
         </>
@@ -691,17 +826,6 @@ DialogBody.displayName = 'DialogBody';
 /**
  * DialogFooter component
  * Semantic footer container for dialog action buttons with optional sticky behavior
- * 
- * @param props - Footer configuration and styling
- * @returns JSX.Element - The dialog footer container using semantic <footer> element
- * 
- * @example
- * ```tsx
- * <DialogFooter sticky={true}>
- *   <Button variant="outline">Cancel</Button>
- *   <Button>Save changes</Button>
- * </DialogFooter>
- * ```
  */
 const DialogFooter = ({
   className,
@@ -710,9 +834,8 @@ const DialogFooter = ({
 }: DialogFooterProps) => (
   <footer
     className={cn(
-      // Only apply default layout classes if no custom className is provided
       !className && 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      !className && (sticky ? 'sticky bottom-0 z-10 bg-background p-6 pt-4 border-t' : 'p-6 pt-4'),
+      !className && (sticky ? 'sticky bottom-0 z-10 bg-background pt-4 pb-6 border-t' : 'py-2'),
       className
     )}
     {...props}
@@ -720,62 +843,70 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  DialogTitleProps
->(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React.useMemo(() => {
-    if (!htmlContent || !allowHtml) {
-      return null;
-    }
+/**
+ * DialogTitle component
+ * Title element with ARIA support
+ */
+const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
+    const { titleId } = useDialogContext();
 
-    const result = renderSafeHtml(htmlContent, {
-      strict: true,
-      logWarnings: false
-    });
+    const processedHtmlContent = React.useMemo(() => {
+      if (!htmlContent || !allowHtml) {
+        return null;
+      }
 
-    return result.html;
-  }, [htmlContent, allowHtml]);
+      const result = renderSafeHtml(htmlContent, {
+        strict: true,
+        logWarnings: false
+      });
 
-  return (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cn(
-        className
-      )}
-      {...props}
-    >
-      {processedHtmlContent ? (
-        <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
-      ) : (
-        children
-      )}
-    </DialogPrimitive.Title>
-  );
-});
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+      return result.html;
+    }, [htmlContent, allowHtml]);
 
-const DialogDescription = React.forwardRef<
-  HTMLHeadingElement,
-  DialogDescriptionProps
->(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React.useMemo(() => {
-    if (!htmlContent || !allowHtml) {
-      return null;
-    }
+    return (
+      <h2
+        ref={ref}
+        id={titleId}
+        className={cn(className)}
+        {...props}
+      >
+        {processedHtmlContent ? (
+          <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
+        ) : (
+          children
+        )}
+      </h2>
+    );
+  }
+);
+DialogTitle.displayName = 'DialogTitle';
 
-    const result = renderSafeHtml(htmlContent, {
-      strict: true,
-      logWarnings: false
-    });
+/**
+ * DialogDescription component
+ * Description element with ARIA support
+ */
+const DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  ({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
+    const { descriptionId } = useDialogContext();
 
-    return result.html;
-  }, [htmlContent, allowHtml]);
+    const processedHtmlContent = React.useMemo(() => {
+      if (!htmlContent || !allowHtml) {
+        return null;
+      }
 
-  return (
-    <DialogPrimitive.Description asChild>
-      <h5
+      const result = renderSafeHtml(htmlContent, {
+        strict: true,
+        logWarnings: false
+      });
+
+      return result.html;
+    }, [htmlContent, allowHtml]);
+
+    return (
+      <p
         ref={ref}
+        id={descriptionId}
         className={cn(className)}
         {...props}
       >
@@ -784,16 +915,15 @@ const DialogDescription = React.forwardRef<
         ) : (
           children
         )}
-      </h5>
-    </DialogPrimitive.Description>
-  );
-});
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+      </p>
+    );
+  }
+);
+DialogDescription.displayName = 'DialogDescription';
 
 export {
   Dialog,
   DialogPortal,
-  DialogOverlay,
   DialogClose,
   DialogTrigger,
   DialogContent,