Updates on Sites page

packages/craftcms-cp/.storybook/preview.ts

@@ -10,6 +10,7 @@ import {withThemeByDataAttribute} from '@storybook/addon-themes';
 import {setCustomElementsManifest} from '@storybook/web-components';
 import manifest from '../dist/custom-elements.json' with {type: 'json'};
 import {setStorybookHelpersConfig} from '@wc-toolkit/storybook-helpers';
+import {within as withinShadow} from 'shadow-dom-testing-library';
 
 setStorybookHelpersConfig({
   /** hides the `arg ref` label on each control */
@@ -29,6 +30,9 @@ icons.addIconResolver('craft', (iconSet: string, name: string) => {
 });
 
 const preview: Preview = {
+  beforeEach({canvasElement, canvas}) {
+    Object.assign(canvas, {...withinShadow(canvasElement)});
+  },
   parameters: {
     controls: {
       expanded: true,

packages/craftcms-cp/package.json

@@ -88,6 +88,7 @@
     "plop": "^4.0.1",
     "recursive-copy": "^2.0.14",
     "rimraf": "^6.0.1",
+    "shadow-dom-testing-library": "^1.13.1",
     "storybook": "^9.1.5",
     "tsdown": "^0.16.6",
     "typescript": "^5.8.3",

packages/craftcms-cp/scripts/generate-vue-wrappers.js

@@ -403,9 +403,9 @@ const ALL_COMPONENTS = [
     importPath: '../components/copy-button/copy-button',
   },
   {
-    tagName: 'craft-dialog',
-    className: 'CraftDialog',
-    importPath: '../components/dialog/dialog',
+    tagName: 'craft-modal',
+    className: 'CraftModal',
+    importPath: '../components/modal/modal',
   },
   {
     tagName: 'craft-disclosure',

packages/craftcms-cp/src/components/action-menu/action-menu.ts

@@ -1,7 +1,5 @@
 import {css, html, LitElement} from 'lit';
 import {OverlayMixin, withDropdownConfig} from '@lion/ui/overlays.js';
-import {queryAssignedElements} from 'lit/decorators.js';
-import type CraftActionItem from '@src/components/action-item/action-item';
 import {uuid} from '@lion/ui/core.js';
 
 /**
@@ -31,15 +29,6 @@ export default class CraftActionMenu extends OverlayMixin(LitElement) {
     }
   `;
 
-  @queryAssignedElements({selector: 'craft-action-item'})
-  actionItems!: CraftActionItem[];
-
-  @queryAssignedElements({slot: 'invoker'})
-  invokerNodes!: HTMLElement[];
-
-  @queryAssignedElements({slot: 'content'})
-  contentNodes!: HTMLElement[];
-
   private uid: string;
 
   // @ts-ignore
@@ -49,41 +38,30 @@ export default class CraftActionMenu extends OverlayMixin(LitElement) {
     };
   }
 
-  private _addEventListeners() {
-    // Close the menu when an item is clicked.
-    // @TODO is this good or bad?
-    this.actionItems.forEach((item) => {
-      item.addEventListener('click', (e) => {
-        e.target?.dispatchEvent(new Event('close-overlay', {bubbles: true}));
-      });
-    });
-  }
-
-  private _setupInvoker() {
-    const firstInvoker = this.invokerNodes[0];
-    if (firstInvoker) {
-      firstInvoker.setAttribute('id', `invoker-${this.uid}`);
-      firstInvoker.setAttribute('aria-controls', `content-${this.uid}`);
+  private __setupInvoker() {
+    const invoker = this._overlayInvokerNode;
+    if (invoker) {
+      invoker.setAttribute('id', `invoker-${this.uid}`);
+      invoker.setAttribute('aria-controls', `content-${this.uid}`);
     }
   }
 
-  private _setupContent() {
-    const firstContent = this.contentNodes[0];
-    if (firstContent) {
-      firstContent.setAttribute('id', `content-${this.uid}`);
-      firstContent.setAttribute('role', 'none');
+  private __setupContent() {
+    const content = this._overlayContentNode;
+    if (content) {
+      content.setAttribute('id', `content-${this.uid}`);
+      content.setAttribute('role', 'none');
     }
   }
 
   override _setupOverlayCtrl() {
     super._setupOverlayCtrl();
-    this._setupInvoker();
-    this._setupContent();
+    this.__setupInvoker();
+    this.__setupContent();
   }
 
   override firstUpdated() {
     this.uid = uuid();
-    this._addEventListeners();
   }
 
   protected override render(): unknown {

packages/craftcms-cp/src/components/modal/modal.stories.ts

@@ -0,0 +1,52 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {expect} from 'storybook/test';
+
+import {html} from 'lit';
+
+import './modal.js';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Components/Modal',
+  component: 'craft-modal',
+  args: {},
+  parameters: {
+    layout: 'centered',
+  },
+  render: function (args) {
+    return html`
+      <craft-modal>
+        <craft-button slot="invoker">Open Modal</craft-button>
+        <div slot="content">
+          This is the body content
+          <craft-button
+            @click="${(event: Event) =>
+              event.target?.dispatchEvent(
+                new Event('close-overlay', {bubbles: true})
+              )}"
+            >Close</craft-button
+          >
+        </div>
+      </craft-modal>
+    `;
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+  play: async ({canvas, userEvent}) => {
+    const openBtn = canvas.getByShadowText(/Open Modal/i);
+    const closeBtn = canvas.getByText(/Close/i);
+    await userEvent.click(openBtn);
+
+    const modal = canvas.getByShadowRole('dialog');
+    await expect(modal).toHaveClass('overlays__overlay');
+    await userEvent.click(closeBtn);
+    await expect(modal).not.toHaveClass('overlays__overlay');
+    await expect(openBtn).toHaveFocus();
+  },
+};

packages/craftcms-cp/src/components/modal/modal.styles.ts

@@ -0,0 +1,12 @@
+import {css} from 'lit';
+
+export default css`
+  ::slotted([slot='content']) {
+    display: block;
+    background-color: white;
+    border-radius: var(--c-modal-radius);
+    border-width: var(--c-modal-border-width);
+    border-style: var(--c-modal-border-style);
+    border-color: var(--c-modal-border-color);
+  }
+`;

packages/craftcms-cp/src/components/modal/modal.ts

@@ -0,0 +1,71 @@
+import type {CSSResultGroup, PropertyValues} from 'lit';
+import {html, LitElement} from 'lit';
+import {property} from 'lit/decorators.js';
+import {OverlayMixin, withModalDialogConfig} from '@lion/ui/overlays.js';
+import styles from './modal.styles';
+
+/**
+ * @summary Modal that extends the LionDialog web component
+ */
+export default class CraftModal extends OverlayMixin(LitElement) {
+  @property({type: String})
+  name: string;
+
+  // @ts-ignore
+  _defineOverlayConfig() {
+    return {
+      ...withModalDialogConfig(),
+    };
+  }
+
+  static override get styles(): CSSResultGroup {
+    return [super.styles ?? [], styles];
+  }
+
+  /**
+   * Applies an aria-label to the content node with the name property.
+   */
+  __setAccessibleName() {
+    const contentNode = this._overlayContentNode;
+
+    if (contentNode) {
+      if (!this.name) return;
+      contentNode.setAttribute('aria-label', this.name);
+    }
+  }
+
+  override firstUpdated(c: PropertyValues<this>) {
+    super.firstUpdated(c);
+
+    if (c.has('name')) {
+      this.__setAccessibleName();
+    }
+  }
+
+  override updated(c: PropertyValues<this>) {
+    super.updated(c);
+
+    if (c.has('name')) {
+      this.__setAccessibleName();
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="invoker"></slot>
+      <div id="overlay-content-node-wrapper">
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('craft-modal')) {
+  customElements.define('craft-modal', CraftModal);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-modal': CraftModal;
+  }
+}

packages/craftcms-cp/src/index.ts

@@ -32,7 +32,7 @@ export {default as CraftPopover} from './components/popover/popover.js';
 export {default as CraftNavList} from './components/nav-list/nav-list.js';
 export {default as CraftNavItem} from './components/nav-item/nav-item.js';
 export {default as CraftDrawer} from './components/drawer/drawer.js';
-export {default as CraftDialog} from './components/dialog/dialog.js';
+export {default as CraftModal} from '@src/components/modal/modal.js';
 export {default as CraftCheckboxGroup} from './components/checkbox-group/checkbox-group.js';
 export {default as CraftCheckbox} from './components/checkbox/checkbox.js';
 export {default as CraftCheckboxIndeterminate} from './components/checkbox-indeterminate/checkbox-indeterminate.js';