From fd7a2da0f1aad7e8e819cf538a8fc50fd1aa41eb Mon Sep 17 00:00:00 2001
From: Hidetaro7 <hidetaro7@gmail.com>
Date: Thu, 22 May 2025 19:53:44 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E8=A9=A6=E9=A8=93=E7=9A=84=20moda?=
 =?UTF-8?q?l=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/.vitepress/config.mts      |  1 +
 packages/docs/components/modal-dialog.md | 42 ++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 packages/docs/components/modal-dialog.md

diff --git a/packages/docs/.vitepress/config.mts b/packages/docs/.vitepress/config.mts
index 702e5c82..db2ab7de 100644
--- a/packages/docs/.vitepress/config.mts
+++ b/packages/docs/.vitepress/config.mts
@@ -85,6 +85,7 @@ export default defineConfig({
           { text: "Card", link: "/card" },
           { text: "IconButton", link: "/icon-button" },
           { text: "Input", link: "/input" },
+          {text: "ModalDialog", link: "/modal-dialog" },
           { text: "Select", link: "/select" },
           { text: "Spinner", link: "/spinner" },
           {
diff --git a/packages/docs/components/modal-dialog.md b/packages/docs/components/modal-dialog.md
new file mode 100644
index 00000000..ff35559e
--- /dev/null
+++ b/packages/docs/components/modal-dialog.md
@@ -0,0 +1,42 @@
+# Modal-Dialog
+
+## Default
+
+:::raw
+
+<dialog id="dialog-1" class="jumpu-modal-dialog jumpu-card fixed top-1/2 left-1/2 -translate-1/2 " onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}">
+  <button onclick="document.querySelector('#dialog-1').close()" class="jumpu-icon-button absolute top-2 right-2">✗</button>
+  <div class="pt-10 min-h-64 px-8 py-4 dialog-content">
+    <h2 class="mb-4 font-bold text-lg">モーダル・ダイアログ</h2>
+    <p class="my-4">3年ほど前（2022年）になりますが、<a class="underline" href="https://github.com/tuqulore/jumpu-ui/issues/182">Modal Dialogコンポーネントの実装</a>で議論した結果、jumpu UI のコンポーネントとしては実装しないことになりました。ただ、Headless UI 等のフレームワークに依存するまでもなく、ツクロアのボイラープレートでもJSXが利用可能になることなど、当時と状況が変わってきているため、このコンポーネントは試験的に Jumpu UI として実装を試みています。</p>
+    <p>このモーダルダイアログの背景はクールです。（<a class="underline" href="https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/dialog">MDNのサイト参照</a>）</p>
+  </div>
+</dialog>
+
+<button onclick="document.querySelector('#dialog-1').showModal()" class="jumpu-button m-40">ダイアログを表示</button>
+
+:::
+
+```html
+<dialog
+  class="jumpu-modal-dialog jumpu-card -translate-1/2 fixed left-1/2 top-1/2"
+  onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}"
+>
+  <button
+    onclick="document.querySelector('#dialog-1').close()"
+    class="jumpu-icon-button absolute right-2 top-2"
+  >
+    ✗
+  </button>
+  <div class="dialog-content min-h-64 px-8 py-4 pt-10">
+    <p>このモーダルダイアログの背景はクールです</p>
+  </div>
+</dialog>
+
+<button
+  onclick="document.querySelector('#dialog-1').showModal()"
+  class="jumpu-button m-40"
+>
+  ダイアログを表示
+</button>
+```

From 50555b3388465507bd5323dcf18bede7ef6c24d5 Mon Sep 17 00:00:00 2001
From: Hidetaro7 <hidetaro7@gmail.com>
Date: Thu, 22 May 2025 19:55:45 +0900
Subject: [PATCH 2/3] chore: css modal-dialog: add modal dialog component

---
 .../src/components/modal-dialog.css           | 38 +++++++++++++++++++
 packages/tailwindcss/src/style.css            |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 packages/tailwindcss/src/components/modal-dialog.css

diff --git a/packages/tailwindcss/src/components/modal-dialog.css b/packages/tailwindcss/src/components/modal-dialog.css
new file mode 100644
index 00000000..1cbd90b2
--- /dev/null
+++ b/packages/tailwindcss/src/components/modal-dialog.css
@@ -0,0 +1,38 @@
+.jumpu-modal-dialog {
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity 0.4s ease-out,
+    transform 0.4s ease-out,
+    overlay 0.4s ease-out allow-discrete,
+    display 0.4s ease-out allow-discrete;
+}
+
+@starting-style {
+  .jumpu-modal-dialog[open] {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+.jumpu-modal-dialog[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.jumpu-modal-dialog::backdrop {
+  transition:
+    display 0.4s allow-discrete,
+    overlay 0.4s allow-discrete,
+    background-color 0.4s;
+}
+
+.jumpu-modal-dialog[open]::backdrop {
+  background-color: --alpha(var(--color-gray-950) / 25%);
+}
+
+@starting-style {
+  .jumpu-modal-dialog[open]::backdrop {
+    background-color: --alpha(var(--color-gray-950) / 0%);
+  }
+}
diff --git a/packages/tailwindcss/src/style.css b/packages/tailwindcss/src/style.css
index b43b2e4a..afb9bbab 100644
--- a/packages/tailwindcss/src/style.css
+++ b/packages/tailwindcss/src/style.css
@@ -11,6 +11,7 @@
 @import "./components/filled-tag.css" layer(components);
 @import "./components/icon-button.css" layer(components);
 @import "./components/input.css" layer(components);
+@import "./components/modal-dialog.css" layer(components);
 @import "./components/outlined-button.css" layer(components);
 @import "./components/select.css" layer(components);
 @import "./components/spinner.css" layer(components);

From 32f0779a7068adad6ed48cc9bdbb5565241501c8 Mon Sep 17 00:00:00 2001
From: Hidetaro7 <hidetaro7@gmail.com>
Date: Thu, 22 May 2025 19:59:26 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20id=E3=81=AE=E4=BB=98=E4=B8=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/components/modal-dialog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/components/modal-dialog.md b/packages/docs/components/modal-dialog.md
index ff35559e..aa9c7253 100644
--- a/packages/docs/components/modal-dialog.md
+++ b/packages/docs/components/modal-dialog.md
@@ -19,6 +19,7 @@
 
 ```html
 <dialog
+  id="dialog-1"
   class="jumpu-modal-dialog jumpu-card -translate-1/2 fixed left-1/2 top-1/2"
   onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}"
 >