@db-vincent/components 0.0.0-stage → 0.1.1

package/src/astro/Modal.astro

@@ -0,0 +1,124 @@
+---
+import Icon from "./Icon.astro";
+import Button from "./Button.astro";
+import "../styles/modal.css";
+
+/**
+ * Modal dialog on native <dialog>. Native showModal() supplies the focus trap,
+ * Escape handling and inert background. The trigger is wired with ARIA; focus
+ * returns to the trigger on close automatically.
+ *
+ * `placement` anchors the dialog: "center" (default), or a drawer on the
+ * "bottom", "start" or "end" edge. Use the Drawer component for a drawer with
+ * its own defaults.
+ */
+interface Props {
+  id: string;
+  title: string;
+  description?: string;
+  triggerLabel?: string;
+  triggerVariant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  placement?: "center" | "start" | "end" | "bottom";
+  class?: string;
+}
+
+const {
+  id,
+  title,
+  description,
+  triggerLabel = "Open dialog",
+  triggerVariant = "secondary",
+  size = "md",
+  placement: placementProp,
+  class: className,
+} = Astro.props;
+
+const placement = placementProp ?? "center";
+const edge = placement !== "center";
+
+const titleId = `${id}-title`;
+const descriptionId = description ? `${id}-description` : undefined;
+---
+
+<Button
+  variant={triggerVariant}
+  type="button"
+  data-modal-open={id}
+  aria-haspopup="dialog"
+>
+  {triggerLabel}
+</Button>
+
+<dialog
+  class:list={[
+    "ds-modal",
+    size !== "md" && `ds-modal--${size}`,
+    edge && ["ds-modal--drawer", `ds-modal--${placement}`],
+    className,
+  ]}
+  id={id}
+  aria-labelledby={titleId}
+  aria-describedby={descriptionId}
+>
+  <div class="ds-modal__header">
+    <div>
+      <h2 class="ds-modal__title" id={titleId}>
+        {title}
+      </h2>
+      {description && (
+        <p class="ds-modal__description" id={descriptionId}>
+          {description}
+        </p>
+      )}
+    </div>
+    <form method="dialog">
+      <button class="ds-modal__close" type="submit" aria-label="Close dialog">
+        <Icon name="x" size={20} />
+      </button>
+    </form>
+  </div>
+  <div class="ds-modal__body">
+    <slot />
+  </div>
+  <slot name="footer" />
+</dialog>
+
+<script>
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-modal-open]")
+      .forEach((trigger) => {
+        if (trigger.dataset.bound) return;
+        trigger.dataset.bound = "true";
+        const id = trigger.dataset.modalOpen;
+        const dialog = id
+          ? (document.getElementById(id) as HTMLDialogElement | null)
+          : null;
+        if (!dialog) return;
+        trigger.addEventListener("click", () => {
+          dialog.showModal();
+          // Land on an explicit [autofocus], else the first footer action
+          // (Cancel in a destructive dialog), never on the close icon.
+          dialog
+            .querySelector<HTMLElement>(
+              "[autofocus], .ds-modal__footer button, .ds-modal__footer a",
+            )
+            ?.focus();
+        });
+        dialog.addEventListener("click", (event) => {
+          if (event.target !== dialog) return;
+          const rect = dialog.getBoundingClientRect();
+          const inside =
+            event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom;
+          if (!inside) dialog.close();
+        });
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>