feat(dialog): use native HTML dialog element

.changeset/large-gifts-promise.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-dialog>`: Aligned CSS variable naming with privacy conventions by prefixing the undocumented `--offset`, `--offset-top`, and `--offset-right` variables with an underscore, marking them as private (`--_offset`, `--_offset-top`, `--_offset-right`).

.changeset/loud-coins-shake.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-dialog>`: Dialog now uses the native HTML `<dialog>` element internally.
+
+Note: the `overlay` CSS shadow part is now deprecated in favor of the `--rh-dialog-backdrop-background-color` CSS custom property.  It will still work, but you can expect the `overlay` part to be removed in a future version
+
+Before:
+
+```css
+rh-dialog::part(overlay) { ... }
+```
+
+After:
+
+```css
+rh-dialog {
+  --rh-dialog-backdrop-background-color: ghostwhite;
+}
+```

elements/rh-dialog/demo/color-context.html

@@ -16,9 +16,7 @@ <h2 slot="header">Color Context</h2>
     <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
       odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
       condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-    <rh-cta slot="footer">
-      <a href="#bar">Learn more</a>
-    </rh-cta>
+    <rh-cta slot="footer" href="#bar">Call to Action</rh-cta>
   </rh-dialog>
   <rh-button id="context-trigger">Open Dialog</rh-button>
 </rh-context-demo>

elements/rh-dialog/demo/events.html

@@ -6,9 +6,7 @@ <h2 slot="header">Modal dialog with a header</h2>
       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
       fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
       anim id est laborum.</p>
-    <rh-cta>
-      <a href="#bar">Learn more</a>
-    </rh-cta>
+    <rh-cta slot="footer" href="#bar">Call to Action</rh-cta>
   </rh-dialog>
   <rh-button id="trigger">Open</rh-button>
   <fieldset>

elements/rh-dialog/demo/lots-of-content.html

@@ -57,9 +57,7 @@ <h2 slot="header">Modal with a header with a truly excessive super duper long ti
   <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
     odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
     condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-  <rh-cta slot="footer">
-    <a href="#bar">Learn more</a>
-  </rh-cta>
+  <rh-cta slot="footer" href="#bar">Call to Action</rh-cta>
 </rh-dialog>
 
 <script type="module">

elements/rh-dialog/demo/no-header-content.html

@@ -1,15 +1,13 @@
 <rh-button id="no-header-content-trigger">Open</rh-button>
 <rh-dialog trigger="no-header-content-trigger">
-  <p>A modal with no slotted header content</p>
-  <h3>This has no header content</h3>
+  <h2>This dialog has no slotted header content</h2>
+  <p>All this content exists in the default slot.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
     laborum.</p>
-  <rh-cta id="test-dark-child">
-    <a href="#">Call-to-action</a>
-  </rh-cta>
+  <rh-cta slot="footer" href="#bar">Call to Action</rh-cta>
 </rh-dialog>
 
 <script type="module">

elements/rh-dialog/demo/no-headings.html

@@ -1,13 +1,12 @@
 <rh-button id="no-headings-trigger">Open</rh-button>
-<rh-dialog trigger="no-headings-trigger">
-  <p>This modal doesn't have any headings. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-    officia deserunt mollit anim id est laborum.</p>
-  <rh-cta>
-    <a href="#">Call-to-action</a>
-  </rh-cta>
+<rh-dialog accessible-label="This dialog's accessible name" trigger="no-headings-trigger">
+  <p>This dialog uses the <code>accessible-label</code> attribute to define its accessible name for assistive technology.
+     If the dialog includes a heading, the heading automatically becomes its accessible name—as long as the
+     <code>accessible-label</code> attribute does not exist. If neither a heading nor the <code>accessible-label</code>
+     attribute are provided, the dialog's accessible name defaults to the text content of its trigger element.
+     Learn more about these attributes in the <a href="https://ux.redhat.com/elements/dialog/code/">rh-dialog docs</a>.
+  </p>
+  <rh-cta slot="footer" href="#">Call to Action</rh-cta>
 </rh-dialog>
 
 <script type="module">

elements/rh-dialog/demo/rh-dialog.html

@@ -6,9 +6,7 @@ <h2 slot="header">Modal dialog with a header</h2>
     aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
     anim id est laborum.</p>
-  <rh-cta>
-    <a href="#bar">Learn more</a>
-  </rh-cta>
+  <rh-cta slot="footer" href="#bar">Call to Action</rh-cta>
 </rh-dialog>
 
 <script type="module">

elements/rh-dialog/docs/10-style.md

@@ -1,17 +1,17 @@
 ## Style
 
 A dialog is a floating container on top of a transparent backdrop. The container 
-requires a backdrop so it can separate itself from the page underneath, this 
+requires a backdrop so it can separate itself from the page underneath. This 
 helps users focus on the dialog content.
 
 ### Anatomy
 
 <figure>
   <uxdot-example width-adjustment="872px">
-    <img src="../dialog-anatomy.png"
+    <img src="../dialog-anatomy.svg"
         alt="Anatomy of a dialog with lots of annotations pointing to various parts"
         width="872"
-        height="322">
+        height="295">
   </uxdot-example>
   <figcaption>
     <ol>
@@ -31,22 +31,10 @@ helps users focus on the dialog content.
 A dialog is available in the light theme only.
 
 <uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-theme-light.png"
+  <img src="../dialog-theme-light.svg"
         alt="Light theme dialog"
         width="1000"
-        height="322">
-</uxdot-example>
-
-## Configuration
-
-The dialog container does not have a maximum height, but too much content in the 
-body text section will cause scrolling.
-
-<uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-configuration.png"
-        alt="How a dialog container is constructed showing border radius, region, and scrolling details"
-        width="1000"
-        height="640">
+        height="327">
 </uxdot-example>
 
 ## Space
@@ -56,16 +44,16 @@ The amount of space in a dialog reduces as breakpoints get smaller.
 ### Large breakpoints
 
 <uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-space-breakpoint-large.png"
+  <img src="../dialog-space-breakpoint-large.svg"
         alt="A dialog container on a large breakpoint with spacing between all elements"
         width="1000"
-        height="322">
+        height="327">
 </uxdot-example>
 
 ### Small breakpoints
 
 <uxdot-example width-adjustment="360px" variant="full" alignment="left" no-border>
-  <img src="../dialog-space-breakpoint-small.png"
+  <img src="../dialog-space-breakpoint-small.svg"
         alt="A dialog container on a small breakpoint with spacing between all elements"
         width="360"
         height="640">
@@ -83,93 +71,32 @@ interaction states.
 
 ### Hover
 
-Control and inactive page number buttons have the same hover state. Truncation 
-is not interactive so it has no hover state.
-
 <uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-interaction-state-hover.png"
+  <img src="../dialog-interaction-state-hover.svg"
         alt="Light theme dialog hover state example"
         width="1000"
-        height="322">
+        height="327">
 </uxdot-example>
 
-<rh-table>
-  <table>
-    <thead>
-      <tr>
-        <th scope="col" data-label="Property">Property</th>
-        <th scope="col" data-label="Light theme">Light theme</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-label="Property">Color - close button</td>
-        <td data-label="Light theme">#151515</td>
-      </tr>
-    </tbody>
-  </table>
-</rh-table>
-
 
 ### Focus
 
 <uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-interaction-state-focus.png"
+  <img src="../dialog-interaction-state-focus.svg"
         alt="Light theme dialog focus state example"
         width="1000"
-        height="322">
+        height="327">
 </uxdot-example>
 
-<rh-table>
-  <table>
-    <thead>
-      <tr>
-        <th scope="col" data-label="Property">Property</th>
-        <th scope="col" data-label="Light theme">Light theme</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-label="Property">Color - close button</td>
-        <td data-label="Light theme">#151515</td>
-      </tr>
-      <tr>
-        <td data-label="Property">Color - focus ring</td>
-        <td data-label="Light theme">#0066cc</td>
-      </tr>
-    </tbody>
-  </table>
-</rh-table>
 
 ### Active
 
 <uxdot-example width-adjustment="1000px" variant="full" alignment="left" no-border>
-  <img src="../dialog-interaction-state-active.png"
+  <img src="../dialog-interaction-state-active.svg"
         alt="Light theme dialog active state example"
         width="1000"
-        height="322">
+        height="327">
 </uxdot-example>
 
-<rh-table>
-  <table>
-    <thead>
-      <tr>
-        <th scope="col" data-label="Property">Property</th>
-        <th scope="col" data-label="Light theme">Light theme</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-label="Property">Color - close button</td>
-        <td data-label="Light theme">#151515</td>
-      </tr>
-      <tr>
-        <td data-label="Property">Color - focus ring</td>
-        <td data-label="Light theme">#0066cc</td>
-      </tr>
-    </tbody>
-  </table>
-</rh-table>
-