From 2472e2ae60b1af2620863f0b93b882d8b2f45b0b Mon Sep 17 00:00:00 2001
From: zedix <lx.vignal@gmail.com>
Date: Sat, 9 Mar 2024 14:26:41 +0100
Subject: [PATCH] docs: add more docs for zx-dialog

---
 src/components/dialog/dialog.mdx        | 13 ++++++++++++-
 src/components/dialog/dialog.stories.ts |  4 ++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog.mdx b/src/components/dialog/dialog.mdx
index 4b1cb8d..69e4490 100644
--- a/src/components/dialog/dialog.mdx
+++ b/src/components/dialog/dialog.mdx
@@ -5,13 +5,24 @@ import * as Stories from './dialog.stories';
 
 # Dialog
 
-`zx-dialog` uses the [native HTML dialog element](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html).
+`zx-dialog` is based on the [native HTML dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), that has  has reached the tipping point of generally being the [better option](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html) for web developers who need to implement dialogs.
+
+It provides native support for:
+- **Modal/inert functionality**. Opening the dialog as _modal_ will make the rest of the document [inert](https://html.spec.whatwg.org/multipage/interaction.html#modal-dialogs-and-inert-subtrees).
+- **Promotion to the top layer**. Dialog will appear in the [top layer](https://drafts.csswg.org/css-position-4/#document-top-layer) of the page, so you don't have to play around with z-index.
+- **Light-dismiss functionality**. Clicking outside of the dialog area will close the dialog and return focus.
+- **Default focus management**. Opening the dialog will natively handle the [focusing steps](https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-focusing-steps).
+- **Accessible keyboard bindings**. Hitting the `esc` key or double toggling will close the dialog and return focus.
+- **CSS ::backdrop**. Native dialog comes with a [::backdrop pseudo-element](https://developer.chrome.com/blog/css-backdrop-inheritance), rendered immediately beneath the dialog.
 
 ## Example
 
 <Source
   dark
   code={`<zx-dialog align="center">
+  #shadow-root (open)
+    <!-- use the native html dialog -->
+    <dialog>…</dialog>
   <form>
     Dialog content…
   </form>
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 8d33983..310d1a8 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -25,6 +25,8 @@ const meta: Meta = {
   args: {
     open: false,
     persistent: false,
+    quick: false,
+    noCloseButton: false,
     align: 'center',
     size: 'medium',
   },
@@ -55,6 +57,8 @@ export const Showcase: Story = {
       size="${args.size}"
       .open="${args.open}"
       .persistent="${args.persistent}"
+      .quick="${args.quick}"
+      .noCloseButton="${args.noCloseButton}"
     >
       <form method="dialog">
         <div class="flex items-center justify-center" style="min-height: 220px;"></div>