feat(whatsnew): add what's new nav button and dialog

docs/dialog.md

@@ -65,51 +65,58 @@ dialog.busy = false;
 
 ### Properties / attributes
 
-| Property / attribute | Type      | Default | Description                                                             |
-| -------------------- | --------- | ------- | ----------------------------------------------------------------------- |
-| `title`              | `String`  | —       | Heading text rendered above the body. Omit for a headingless dialog.    |
-| `persistent`         | `Boolean` | `false` | Prevents closing on backdrop click or Escape.                           |
-| `busy`               | `Boolean` | `false` | Inerts the dialog body. Implicitly enables `persistent` behavior.       |
+| Property / attribute | Type      | Default | Description                                                          |
+| -------------------- | --------- | ------- | -------------------------------------------------------------------- |
+| `title`              | `String`  | —       | Heading text rendered above the body. Omit for a headingless dialog. |
+| `persistent`         | `Boolean` | `false` | Prevents closing on backdrop click or Escape.                        |
+| `busy`               | `Boolean` | `false` | Inerts the dialog body. Implicitly enables `persistent` behavior.    |
 
 ### Methods
 
-| Method  | Description                                          |
-| ------- | ---------------------------------------------------- |
-| `close` | Closes the dialog and fires a `close` event.         |
+| Method  | Description                                  |
+| ------- | -------------------------------------------- |
+| `close` | Closes the dialog and fires a `close` event. |
 
 ### Events
 
-| Event   | Description                                            |
-| ------- | ------------------------------------------------------ |
+| Event   | Description                                                                                    |
+| ------- | ---------------------------------------------------------------------------------------------- |
 | `close` | Fired when the user dismisses the dialog (backdrop click, Escape, or explicit `close()` call). |
 
 ## Slots
 
-| Slot        | Description                                                     |
-| ----------- | --------------------------------------------------------------- |
-| _(default)_ | Dialog body content                                             |
-| `actions`   | Action buttons rendered in the footer, right-aligned            |
+| Slot        | Description                                          |
+| ----------- | ---------------------------------------------------- |
+| _(default)_ | Dialog body content                                  |
+| `actions`   | Action buttons rendered in the footer, right-aligned |
 
 ## CSS custom properties
 
 The panel sizing and padding can be overridden from the consuming page. Each property has a sensible default — set it on the `nx-dialog` element (or any ancestor) only when you need to deviate. All values are still clamped to the viewport so a too-large value won't overflow.
 
-| Property                | Default                  | Description                                          |
-| ----------------------- | ------------------------ | ---------------------------------------------------- |
-| `--nx-dialog-min-width` | `400px`                  | Panel minimum width.                                 |
-| `--nx-dialog-max-width` | `480px`                  | Panel maximum width.                                 |
-| `--nx-dialog-max-height`| `90vh` (`90dvh` modern)  | Panel maximum height.                                |
-| `--nx-dialog-padding`   | `var(--s2-spacing-500)`  | Inner padding around heading, body, and actions.     |
+| Property                 | Default                 | Description                                      |
+| ------------------------ | ----------------------- | ------------------------------------------------ |
+| `--nx-dialog-min-width`  | `400px`                 | Panel minimum width.                             |
+| `--nx-dialog-max-width`  | `480px`                 | Panel maximum width.                             |
+| `--nx-dialog-max-height` | `90vh` (`90dvh` modern) | Panel maximum height.                            |
+| `--nx-dialog-padding`    | `var(--s2-spacing-500)` | Inner padding around heading, body, and actions. |
 
 ### Wide dialog
 
+To widen a default dialog without the large layout, raise the max width only.
+
 ```css
-nx-dialog.block-library {
-  --nx-dialog-max-width: 960px;
-  --nx-dialog-max-height: 640px;
+nx-dialog.wide {
+  --nx-dialog-max-width: 600px;
 }
 ```
 
+## CSS parts
+
+| Part    | Description                                |
+| ------- | ------------------------------------------ |
+| `panel` | Dialog panel containing all rendered slots. |
+
 ### Full-bleed body
 
 Combine a zero `--nx-dialog-padding` with your own padding on the slotted content to push body content to the panel edge (useful for split layouts).

nx2/blocks/fragment/fragment.js

@@ -40,13 +40,14 @@ export async function loadFragment(path) {
   const html = await resp.text();
   const doc = new DOMParser().parseFromString(html, 'text/html');
 
+  // Run before append() moves the section nodes out of doc.
+  replaceDotMedia(path, doc);
+
   const sections = doc.body.querySelectorAll('main > div');
   const fragment = document.createElement('div');
   fragment.classList.add('fragment-content');
   fragment.append(...sections);
 
-  replaceDotMedia(path, doc);
-
   const container = applyPageStyles(fragment);
 
   await loadArea({ area: fragment });

nx2/blocks/shared/dialog/dialog.css

@@ -68,6 +68,8 @@ dialog {
 .body {
   flex: 1 1 auto;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   font-size: var(--s2-component-m-medium-font-size, 14px);
   line-height: var(--s2-component-m-medium-line-height, 1.43);
@@ -80,5 +82,9 @@ dialog {
   flex-flow: row wrap;
   justify-content: flex-end;
   gap: var(--s2-spacing-100);
-  padding-top: var(--s2-spacing-200);
+  padding-top:  var(--s2-spacing-200);
+}
+
+.actions[hidden] {
+  display: none;
 }

nx2/blocks/shared/dialog/dialog.js

@@ -7,6 +7,7 @@ class NxDialog extends LitElement {
   static properties = {
     title: { type: String },
     busy: { type: Boolean },
+    _hasActions: { state: true },
   };
 
   get _dialog() { return this.shadowRoot.querySelector('dialog'); }
@@ -42,23 +43,30 @@ class NxDialog extends LitElement {
     if (!this.busy) this.close();
   }
 
+  _onActionsSlotChange(e) {
+    this._hasActions = e.target.assignedElements({ flatten: true }).length > 0;
+  }
+
   render() {
     const titleText = this.title?.trim();
+    const hasActions = this._hasActions ?? Boolean(this.querySelector('[slot="actions"]'));
     return html`
       <dialog
         aria-labelledby=${titleText ? 'nx-dialog-title' : nothing}
         aria-label=${titleText ? nothing : 'Dialog'}
         @cancel=${this._onCancel}
         @click=${this._onBackdropClick}
       >
-        <div class="panel" ?inert=${this.busy}>
+        <div class="panel" part="panel" ?inert=${this.busy}>
           ${titleText ? html`
             <div class="heading">
               <h2 class="title" id="nx-dialog-title">${titleText}</h2>
             </div>
           ` : nothing}
           <div class="body"><slot></slot></div>
-          <div class="actions"><slot name="actions"></slot></div>
+          <div class="actions" ?hidden=${!hasActions}>
+            <slot name="actions" @slotchange=${this._onActionsSlotChange}></slot>
+          </div>
         </div>
       </dialog>
     `;