Create new Modal DrawerLauncher component (#2744)

## Summary:

Creates new `DrawerLauncher` and `DrawerDialog` components with three alignments: `inlineStart`, `inlineEnd`, and `blockEnd`. Ensures dialogs can be used with RTL writing mode.

Issue: WB-2048

## Test plan:
1. Ensure FlexibleDialog can be used standalone
2. Ensure DrawerLauncher with DrawerDialog can be positioned on left, right, and bottom
3. Ensure DrawerLauncher can be used with RTL writing mode
4. Ensure tests pass

Author: marcysutton

Reviewers: beaesguerra, marcysutton

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2744

Author: marcysutton

.changeset/empty-maps-watch.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-modal": patch
+---
+
+Fix RTL positioning of close button in ModalPanel

.changeset/hot-birds-scream.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-modal": minor
+---
+
+Add DrawerLauncher and DrawerDialog components for sliding in from the left, right, or bottom.

.storybook/preview.tsx

@@ -162,9 +162,23 @@ const withThemeSwitcher: Decorator = (
 };
 
 /**
- * Wraps a story with `<div dir="rtl">` so it is shown in rtl mode.
+ * Sets the dir attribute on document.documentElement and wraps story with dir div.
+ * This ensures portaled content (like modals) can detect the direction.
  */
 const withLanguageDirection: Decorator = (Story, context) => {
+    React.useEffect(() => {
+        if (context.globals.direction === "rtl") {
+            document.documentElement.setAttribute("dir", "rtl");
+        } else {
+            document.documentElement.setAttribute("dir", "ltr");
+        }
+
+        // Cleanup on unmount
+        return () => {
+            document.documentElement.removeAttribute("dir");
+        };
+    }, [context.globals.direction]);
+
     if (context.globals.direction === "rtl") {
         return (
             <div dir="rtl">

__docs__/wonder-blocks-modal/drawer-dialog.argtypes.ts

@@ -0,0 +1,89 @@
+import type {ArgTypes} from "@storybook/react";
+
+export default {
+    // Accessibility props (discriminated union)
+    title: {
+        control: {type: "text"},
+        table: {
+            category: "Accessibility (one required)",
+            type: {summary: "string | ReactElement"},
+        },
+    },
+    "aria-label": {
+        control: {type: "text"},
+        table: {
+            category: "Accessibility (one required)",
+            type: {summary: "string"},
+        },
+    },
+    "aria-labelledby": {
+        control: {type: "text"},
+        table: {
+            category: "Accessibility (one required)",
+            type: {summary: "string"},
+        },
+    },
+    titleId: {
+        control: {type: "text"},
+        table: {
+            type: {summary: "string"},
+        },
+    },
+
+    // Core props
+    content: {
+        control: {type: undefined},
+        table: {
+            type: {
+                summary:
+                    "ReactElement | (({title: ReactElement}) => ReactElement)",
+            },
+        },
+    },
+
+    // Interaction props
+    onClose: {
+        table: {
+            type: {summary: "() => unknown"},
+        },
+        description:
+            "Called when close button clicked. Prefer DrawerLauncher onClose instead.",
+    },
+    closeButtonVisible: {
+        control: {type: "boolean"},
+        table: {
+            type: {summary: "boolean"},
+        },
+    },
+
+    // Styling and customization
+    role: {
+        control: "radio",
+        options: ["dialog", "alertdialog"],
+        defaultValue: "dialog",
+        table: {
+            defaultValue: {summary: "dialog"},
+            type: {summary: "dialog | alertdialog"},
+        },
+    },
+    styles: {
+        control: {type: undefined},
+        table: {
+            type: {summary: "DrawerDialogStyles"},
+        },
+    },
+
+    // Testing
+    testId: {
+        control: {type: "text"},
+        table: {
+            type: {summary: "string"},
+        },
+    },
+    "aria-describedby": {
+        control: {type: "text"},
+        table: {
+            type: {summary: "string"},
+        },
+    },
+} satisfies ArgTypes;