aural-ui 2.0.4 → 2.0.7

package/dist/components/dialog/Dialog.stories.tsx

@@ -41,11 +41,12 @@ const meta: Meta<typeof DialogContent> = {
         component: `
 # Dialog Component
 
-A modal dialog component built on Radix UI primitives with customizable overlays, animations, and variant styling. Includes React 18 compatibility fixes for pointer-events issues.
+A modal dialog component built on Radix UI primitives with customizable overlays, animations, variant styling, and configurable border sides. Includes React 18 compatibility fixes for pointer-events issues.
 
 ## Features
 
 - **Multiple Variants**: Neutral, positive, negative, warning, and info styles
+- **Configurable Borders**: Support for all sides, specific sides, or no borders
 - **Custom Overlays**: Configurable opacity, glass effect, and noise texture
 - **Smooth Animations**: Zoom in/out animations with duration control
 - **Accessible**: Full keyboard navigation and screen reader support
@@ -55,78 +56,37 @@ A modal dialog component built on Radix UI primitives with customizable overlays
 - **Focus Management**: Automatic focus trapping and restoration
 - **React 18 Fix**: Includes \`useDialogCleanup\` hook for pointer-events issues
 
-## Component Structure
+## Border Configuration
 
-- **Dialog**: Root component that manages dialog state
-- **DialogTrigger**: Button or element that opens the dialog
-- **DialogContent**: Main dialog container with overlay and content
-- **DialogHeader**: Header section for title and description
-- **DialogFooter**: Footer section for action buttons
-- **DialogTitle**: Accessible title element
-- **DialogDescription**: Optional description text
-- **DialogClose**: Close button component
-- **useDialogCleanup**: Hook to fix React 18 pointer-events issues
+The \`borderConfig\` prop allows you to control which sides of the dialog have gradient borders:
+
+- \`"none"\` - No borders
+- \`"all"\` - All four sides
+- \`"top"\` - Top border only (default)
+- \`["top", "bottom"]\` - Top and bottom borders
+- \`["left", "right"]\` - Left and right borders
+- \`["top", "left", "right"]\` - Top, left, and right borders
 
 ## Usage Examples
 
-### Basic Dialog
+### Basic Dialog with Border Configuration
 \`\`\`tsx
-import { Dialog, DialogContent, DialogTrigger, useDialogCleanup } from '@/components/dialog'
-
-function MyComponent() {
-  const { handleDialogClose } = useDialogCleanup({ threshold: 100 })
-  
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent onEscapeKeyDown={handleDialogClose}>
-        <DialogHeader>
-          <DialogTitle>Dialog Title</DialogTitle>
-          <DialogDescription>Dialog description text.</DialogDescription>
-        </DialogHeader>
-        <div>Dialog content goes here.</div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline" onClick={handleDialogClose}>Cancel</Button>
-          </DialogClose>
-          <Button>Confirm</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-\`\`\`
+import { Dialog, DialogContent, DialogTrigger } from '@/components/dialog'
 
-### Variant Styling
-\`\`\`tsx
-<DialogContent variant="negative">
-  {/* Negative variant with red shadow */}
+// All borders
+<DialogContent borderConfig="all" variant="positive">
+  Content with borders on all sides
 </DialogContent>
-\`\`\`
 
-### Custom Overlay
-\`\`\`tsx
-<DialogContent opacity="high" glass="high" noise="low">
-  {/* High opacity overlay with glass effect and subtle noise */}
+// Specific sides
+<DialogContent borderConfig={["top", "bottom"]} variant="warning">
+  Content with top and bottom borders
 </DialogContent>
-\`\`\`
 
-### React 18 Compatibility
-\`\`\`tsx
-function DialogWithCleanup() {
-  const { handleDialogClose } = useDialogCleanup({ threshold: 150 })
-  
-  return (
-    <DialogContent 
-      onInteractOutside={handleDialogClose}
-      onPointerDownOutside={handleDialogClose}
-    >
-      {/* Dialog content */}
-    </DialogContent>
-  )
-}
+// No borders
+<DialogContent borderConfig="none" variant="neutral">
+  Content without any borders
+</DialogContent>
 \`\`\`
         `,
       },
@@ -138,6 +98,22 @@ function DialogWithCleanup() {
       options: ["neutral", "positive", "negative", "warning", "info"],
       description: "Dialog variant for different use cases",
     },
+    borderConfig: {
+      control: { type: "select" },
+      options: [
+        "none",
+        "all",
+        "top",
+        "bottom",
+        "left",
+        "right",
+        ["top", "bottom"],
+        ["left", "right"],
+        ["top", "left", "right"],
+        ["bottom", "left", "right"],
+      ],
+      description: "Border configuration - which sides to show borders on",
+    },
     opacity: {
       control: { type: "select" },
       options: ["high", "medium", "low", "none"],
@@ -164,7 +140,211 @@ function DialogWithCleanup() {
 export default meta
 type Story = StoryObj<typeof Dialog>
 
-// 1. Dialog Cleanup Example - React 18 Compatibility
+// 1. Border Configuration Examples
+export const BorderConfigurations: Story = {
+  render: () => {
+    const BorderConfigDialog = ({
+      borderConfig,
+      variant,
+      title,
+      description,
+    }: any) => {
+      const { handleDialogClose } = useDialogCleanup({ threshold: 100 })
+
+      return (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              {title}
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            variant={variant}
+            borderConfig={borderConfig}
+            //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
+            onEscapeKeyDown={handleDialogClose}
+            onPointerDownOutside={handleDialogClose}
+          >
+            <DialogHeader>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription>{description}</DialogDescription>
+            </DialogHeader>
+            <div className="py-4">
+              <div className="rounded-lg border border-white/10 bg-white/5 p-3">
+                <div className="space-y-1 text-xs text-white/60">
+                  <div>
+                    Variant: <span className="text-white">{variant}</span>
+                  </div>
+                  <div>
+                    Border Config:{" "}
+                    <span className="text-white">
+                      {Array.isArray(borderConfig)
+                        ? `[${borderConfig.join(", ")}]`
+                        : borderConfig}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button onClick={handleDialogClose}>Close</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    return (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h3 className="mb-2 font-medium text-white">Border Configurations</h3>
+          <p className="text-sm text-white/60">
+            Explore different border configurations for dialog variants
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* All Borders */}
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-white/80">All Borders</h4>
+            <div className="flex flex-wrap gap-2">
+              <BorderConfigDialog
+                borderConfig="all"
+                variant="neutral"
+                title="All - Neutral"
+                description="Dialog with borders on all four sides"
+              />
+              <BorderConfigDialog
+                borderConfig="all"
+                variant="positive"
+                title="All - Success"
+                description="Success dialog with complete border frame"
+              />
+              <BorderConfigDialog
+                borderConfig="all"
+                variant="negative"
+                title="All - Error"
+                description="Error dialog with full border emphasis"
+              />
+            </div>
+          </div>
+
+          {/* Single Sides */}
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-white/80">
+              Single Side Borders
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              <BorderConfigDialog
+                borderConfig="top"
+                variant="info"
+                title="Top Only"
+                description="Dialog with top border accent"
+              />
+              <BorderConfigDialog
+                borderConfig="bottom"
+                variant="warning"
+                title="Bottom Only"
+                description="Dialog with bottom border accent"
+              />
+              <BorderConfigDialog
+                borderConfig="left"
+                variant="positive"
+                title="Left Only"
+                description="Dialog with left border accent"
+              />
+              <BorderConfigDialog
+                borderConfig="right"
+                variant="negative"
+                title="Right Only"
+                description="Dialog with right border accent"
+              />
+            </div>
+          </div>
+
+          {/* Two Sides */}
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-white/80">
+              Two Side Borders
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              <BorderConfigDialog
+                borderConfig={["top", "bottom"]}
+                variant="neutral"
+                title="Top + Bottom"
+                description="Horizontal border emphasis"
+              />
+              <BorderConfigDialog
+                borderConfig={["left", "right"]}
+                variant="info"
+                title="Left + Right"
+                description="Vertical border emphasis"
+              />
+              <BorderConfigDialog
+                borderConfig={["top", "left"]}
+                variant="warning"
+                title="Top + Left"
+                description="Corner border accent"
+              />
+              <BorderConfigDialog
+                borderConfig={["bottom", "right"]}
+                variant="positive"
+                title="Bottom + Right"
+                description="Opposite corner accent"
+              />
+            </div>
+          </div>
+
+          {/* Three Sides */}
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-white/80">
+              Three Side Borders
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              <BorderConfigDialog
+                borderConfig={["top", "left", "right"]}
+                variant="negative"
+                title="Top + Left + Right"
+                description="Open bottom design"
+              />
+              <BorderConfigDialog
+                borderConfig={["bottom", "left", "right"]}
+                variant="warning"
+                title="Bottom + Left + Right"
+                description="Open top design"
+              />
+            </div>
+          </div>
+
+          {/* No Border */}
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-white/80">No Borders</h4>
+            <div className="flex flex-wrap gap-2">
+              <BorderConfigDialog
+                borderConfig="none"
+                variant="neutral"
+                title="No Borders"
+                description="Clean minimal design without border accents"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all border configuration options across different variants.",
+      },
+    },
+  },
+}
+
+// 2. Dialog Cleanup Example - React 18 Compatibility
 export const DialogCleanupExample: Story = {
   render: () => {
     const DialogWithCleanup = () => {
@@ -182,6 +362,8 @@ export const DialogCleanupExample: Story = {
             <Button>Open Dialog with Cleanup</Button>
           </DialogTrigger>
           <DialogContent
+            borderConfig="all"
+            variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleClose}
             onPointerDownOutside={handleClose}
@@ -226,18 +408,6 @@ export const DialogCleanupExample: Story = {
         <div className="flex justify-center">
           <DialogWithCleanup />
         </div>
-        <div className="text-center">
-          <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
-              React 18 Compatibility
-            </h4>
-            <p className="text-xs leading-relaxed text-white/60">
-              The useDialogCleanup hook prevents the pointer-events: none style
-              from persisting on the body element after dialog close, which
-              could make the page uninteractive in React 18.
-            </p>
-          </div>
-        </div>
       </div>
     )
   },
@@ -251,11 +421,12 @@ export const DialogCleanupExample: Story = {
   },
 }
 
-// 2. Basic Dialog Variants with Cleanup
+// 3. Basic Dialog Variants with Border Styles
 export const BasicVariants: Story = {
   render: () => {
     const DialogWithCleanupVariant = ({
       variant,
+      borderConfig,
       title,
       description,
       children,
@@ -269,6 +440,7 @@ export const BasicVariants: Story = {
           </DialogTrigger>
           <DialogContent
             variant={variant}
+            borderConfig={borderConfig}
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleDialogClose}
             onPointerDownOutside={handleDialogClose}
@@ -295,27 +467,29 @@ export const BasicVariants: Story = {
       <div className="space-y-8">
         <div className="text-center">
           <h3 className="mb-2 font-medium text-white">
-            Dialog Variants with Cleanup
+            Dialog Variants with Border Styles
           </h3>
           <p className="text-sm text-white/60">
-            Different dialog variants with React 18 compatibility fixes
+            Different dialog variants with customized border configurations
           </p>
         </div>
 
         <div className="flex flex-wrap justify-center gap-4">
           <DialogWithCleanupVariant
             variant="neutral"
+            borderConfig="top"
             title="Neutral Dialog"
-            description="This is a neutral dialog with standard styling."
+            description="This is a neutral dialog with top border."
           >
             <p className="text-sm text-white/80">
-              Neutral dialogs are perfect for general information, settings, or
-              any content that doesn't require specific emotional context.
+              Neutral dialogs with minimal top border accent are perfect for
+              general information and settings.
             </p>
           </DialogWithCleanupVariant>
 
           <DialogWithCleanupVariant
             variant="positive"
+            borderConfig="all"
             title="Success Dialog"
             description="Operation completed successfully!"
           >
@@ -324,13 +498,14 @@ export const BasicVariants: Story = {
               <span className="font-medium text-green-400">Success!</span>
             </div>
             <p className="text-sm text-white/80">
-              Your changes have been saved and are now live. Users will see the
-              updates immediately.
+              Success dialogs with full border frame provide strong positive
+              feedback.
             </p>
           </DialogWithCleanupVariant>
 
           <DialogWithCleanupVariant
             variant="warning"
+            borderConfig={["top", "bottom"]}
             title="Warning Dialog"
             description="Please review the following before proceeding."
           >
@@ -340,14 +515,15 @@ export const BasicVariants: Story = {
                 <span className="font-medium text-yellow-400">Warning</span>
               </div>
               <p className="text-sm text-yellow-200">
-                This action will modify existing data. Make sure you have a
-                backup before continuing.
+                Warning dialogs with horizontal borders create focused
+                attention.
               </p>
             </div>
           </DialogWithCleanupVariant>
 
           <DialogWithCleanupVariant
             variant="negative"
+            borderConfig={["left", "right"]}
             title="Error Dialog"
             description="An error occurred that requires your attention."
           >
@@ -357,14 +533,14 @@ export const BasicVariants: Story = {
                 <span className="font-medium text-red-400">Error</span>
               </div>
               <p className="text-sm text-red-200">
-                Failed to save changes. Please check your connection and try
-                again.
+                Error dialogs with vertical borders provide urgent visual cues.
               </p>
             </div>
           </DialogWithCleanupVariant>
 
           <DialogWithCleanupVariant
             variant="info"
+            borderConfig="none"
             title="Information Dialog"
             description="Here's some important information for you."
           >
@@ -374,8 +550,8 @@ export const BasicVariants: Story = {
                 <span className="font-medium text-blue-400">Information</span>
               </div>
               <p className="text-sm text-blue-200">
-                The new features will be available starting next week. Check
-                your email for detailed release notes.
+                Clean info dialogs without borders for minimal, focused content
+                presentation.
               </p>
             </div>
           </DialogWithCleanupVariant>
@@ -387,13 +563,13 @@ export const BasicVariants: Story = {
     docs: {
       description: {
         story:
-          "Different dialog variants with useDialogCleanup hook for React 18 compatibility.",
+          "Different dialog variants showcasing various border configurations for enhanced visual hierarchy.",
       },
     },
   },
 }
 
-// 3. Nested Modal with Cleanup
+// 4. Nested Modal with Cleanup
 export const NestedModalWithCleanup: Story = {
   render: () => {
     const NestedDialogComponent = () => {
@@ -428,6 +604,8 @@ export const NestedModalWithCleanup: Story = {
             </DialogTrigger>
             <DialogContent
               className="max-w-md"
+              borderConfig={["top", "left", "right"]}
+              variant="neutral"
               //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
               onEscapeKeyDown={handleEditClose}
               onPointerDownOutside={handleEditClose}
@@ -473,6 +651,7 @@ export const NestedModalWithCleanup: Story = {
           <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
             <DialogContent
               variant="negative"
+              borderConfig="all"
               classes={{
                 root: "max-w-sm",
                 overlay: "z-60",
@@ -520,27 +699,15 @@ export const NestedModalWithCleanup: Story = {
       <div className="space-y-8">
         <div className="text-center">
           <h3 className="mb-2 font-medium text-white">
-            Nested Modal with Cleanup
+            Nested Modal with Custom Borders
           </h3>
           <p className="text-sm text-white/60">
-            Modal-on-modal with proper cleanup handling
+            Modal-on-modal with different border configurations
           </p>
         </div>
         <div className="flex justify-center">
           <NestedDialogComponent />
         </div>
-        <div className="text-center">
-          <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
-              Modal Stacking
-            </h4>
-            <p className="text-xs leading-relaxed text-white/60">
-              This example demonstrates proper modal stacking where a delete
-              confirmation dialog opens on top of an edit form dialog with
-              proper cleanup handling for React 18.
-            </p>
-          </div>
-        </div>
       </div>
     )
   },
@@ -548,13 +715,13 @@ export const NestedModalWithCleanup: Story = {
     docs: {
       description: {
         story:
-          "Nested modal example with useDialogCleanup hook to handle multiple modal layers properly.",
+          "Nested modal example showcasing different border configurations for modal hierarchy.",
       },
     },
   },
 }
 
-// 4. Form Dialog with Cleanup
+// 5. Form Dialog with Cleanup
 export const FormDialog: Story = {
   render: () => {
     const FormDialogComponent = () => {
@@ -587,6 +754,8 @@ export const FormDialog: Story = {
           </DialogTrigger>
           <DialogContent
             className="max-w-md"
+            borderConfig={["top", "bottom"]}
+            variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleClose}
             onPointerDownOutside={handleClose}
@@ -688,7 +857,7 @@ export const FormDialog: Story = {
         <div className="text-center">
           <h3 className="mb-2 font-medium text-white">Form Dialog</h3>
           <p className="text-sm text-white/60">
-            Dialog containing form elements with cleanup handling
+            Dialog containing form elements with horizontal border accent
           </p>
         </div>
         <div className="flex justify-center">
@@ -701,19 +870,20 @@ export const FormDialog: Story = {
     docs: {
       description: {
         story:
-          "Form dialog with validation and cleanup handling for React 18 compatibility.",
+          "Form dialog with validation and horizontal border configuration for focused data entry.",
       },
     },
   },
 }
 
-// 5. Overlay Variations
+// 6. Overlay Variations
 export const OverlayVariations: Story = {
   render: () => {
     const OverlayDialog = ({
       opacity,
       glass,
       noise,
+      borderConfig,
       title,
       description,
     }: any) => {
@@ -722,9 +892,17 @@ export const OverlayVariations: Story = {
       return (
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="outline">{title}</Button>
+            <Button variant="outline" size="sm">
+              {title}
+            </Button>
           </DialogTrigger>
-          <DialogContent opacity={opacity} glass={glass} noise={noise}>
+          <DialogContent
+            opacity={opacity}
+            glass={glass}
+            noise={noise}
+            borderConfig={borderConfig}
+            variant="neutral"
+          >
             <DialogHeader>
               <DialogTitle>{title}</DialogTitle>
               <DialogDescription>{description}</DialogDescription>
@@ -742,6 +920,14 @@ export const OverlayVariations: Story = {
                 <div>
                   Noise: <span className="text-white">{noise || "none"}</span>
                 </div>
+                <div>
+                  Border:{" "}
+                  <span className="text-white">
+                    {Array.isArray(borderConfig)
+                      ? `[${borderConfig.join(", ")}]`
+                      : borderConfig || "top"}
+                  </span>
+                </div>
               </div>
             </div>
             <DialogFooter>
@@ -757,76 +943,63 @@ export const OverlayVariations: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Overlay Variations</h3>
+          <h3 className="mb-2 font-medium text-white">
+            Overlay Variations with Borders
+          </h3>
           <p className="text-sm text-white/60">
-            Different overlay effects with cleanup handling
+            Different overlay effects combined with border configurations
           </p>
         </div>
 
         <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
           <OverlayDialog
             opacity="low"
+            borderConfig="top"
             title="Low Opacity"
             description="Subtle background dimming (40%)"
           />
           <OverlayDialog
             opacity="medium"
+            borderConfig={["top", "bottom"]}
             title="Medium Opacity"
             description="Balanced background dimming (60%)"
           />
           <OverlayDialog
             opacity="high"
+            borderConfig="all"
             title="High Opacity"
             description="Strong background dimming (80%)"
           />
           <OverlayDialog
             opacity="none"
+            borderConfig="none"
             title="Full Opacity"
             description="Complete background coverage (100%)"
           />
           <OverlayDialog
             glass="low"
+            borderConfig={["left", "right"]}
             title="Low Glass"
             description="Subtle backdrop blur effect"
           />
           <OverlayDialog
             glass="medium"
+            borderConfig="all"
             title="Medium Glass"
             description="Balanced backdrop blur effect"
           />
           <OverlayDialog
             glass="high"
+            borderConfig="top"
             title="High Glass"
             description="Strong backdrop blur effect"
           />
           <OverlayDialog
             noise="low"
+            borderConfig={["top", "left", "right"]}
             title="Low Noise"
             description="Subtle texture pattern"
           />
-          <OverlayDialog
-            noise="medium"
-            title="Medium Noise"
-            description="Balanced texture pattern"
-          />
-          <OverlayDialog
-            noise="high"
-            title="High Noise"
-            description="Strong texture pattern"
-          />
-          <OverlayDialog
-            opacity="high"
-            glass="high"
-            title="High + Glass"
-            description="Maximum focus with glass effect"
-          />
-          <OverlayDialog
-            opacity="medium"
-            glass="medium"
-            noise="low"
-            title="Balanced Mix"
-            description="Balanced combination of effects"
-          />
         </div>
       </div>
     )
@@ -835,13 +1008,13 @@ export const OverlayVariations: Story = {
     docs: {
       description: {
         story:
-          "Showcase of different overlay configurations including opacity, glass, and noise effects.",
+          "Showcase of different overlay configurations combined with various border styles.",
       },
     },
   },
 }
 
-// 6. Accessibility Example
+// 7. Accessibility Example
 export const AccessibilityExample: Story = {
   render: () => {
     const AccessibleDialog = () => {
@@ -853,6 +1026,8 @@ export const AccessibilityExample: Story = {
             <Button>Accessible Dialog Demo</Button>
           </DialogTrigger>
           <DialogContent
+            borderConfig="all"
+            variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleDialogClose}
             onPointerDownOutside={handleDialogClose}
@@ -860,11 +1035,24 @@ export const AccessibilityExample: Story = {
             <DialogHeader>
               <DialogTitle>Accessibility Features</DialogTitle>
               <DialogDescription>
-                This dialog demonstrates proper accessibility implementation.
+                This dialog demonstrates proper accessibility implementation
+                with border configuration.
               </DialogDescription>
             </DialogHeader>
 
             <div className="space-y-4">
+              <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+                <h4 className="mb-2 font-medium text-white">
+                  Border Configuration
+                </h4>
+                <ul className="space-y-1 text-sm text-white/80">
+                  <li>• Complete border frame for maximum visual emphasis</li>
+                  <li>• Customizable per dialog context and importance</li>
+                  <li>• Maintains accessibility contrast ratios</li>
+                  <li>• Works with all variant color schemes</li>
+                </ul>
+              </div>
+
               <div className="rounded-lg border border-white/10 bg-white/5 p-4">
                 <h4 className="mb-2 font-medium text-white">
                   Keyboard Navigation
@@ -889,18 +1077,6 @@ export const AccessibilityExample: Story = {
                 </ul>
               </div>
 
-              <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-                <h4 className="mb-2 font-medium text-white">
-                  Screen Reader Support
-                </h4>
-                <ul className="space-y-1 text-sm text-white/80">
-                  <li>• Proper ARIA labels and roles</li>
-                  <li>• Focus management and trapping</li>
-                  <li>• Descriptive close button</li>
-                  <li>• Semantic heading structure</li>
-                </ul>
-              </div>
-
               <div className="rounded-lg border border-white/10 bg-white/5 p-4">
                 <h4 className="mb-2 font-medium text-white">
                   React 18 Compatibility
@@ -931,24 +1107,12 @@ export const AccessibilityExample: Story = {
             Accessibility Features
           </h3>
           <p className="text-sm text-white/60">
-            Dialog with comprehensive accessibility and React 18 compatibility
+            Dialog with comprehensive accessibility and border configuration
           </p>
         </div>
         <div className="flex justify-center">
           <AccessibleDialog />
         </div>
-        <div className="text-center">
-          <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
-              Accessibility Best Practices
-            </h4>
-            <p className="text-xs leading-relaxed text-white/60">
-              The Dialog component follows WCAG guidelines with proper focus
-              management, keyboard navigation, screen reader support, semantic
-              HTML structure, and React 18 compatibility fixes.
-            </p>
-          </div>
-        </div>
       </div>
     )
   },
@@ -956,7 +1120,7 @@ export const AccessibilityExample: Story = {
     docs: {
       description: {
         story:
-          "Comprehensive accessibility example with React 18 compatibility features.",
+          "Comprehensive accessibility example with border configuration and React 18 compatibility features.",
       },
     },
   },