npm - @tillsc/progressive-web-components - Versions diffs - 0.1.0 → 0.1.1 - Mend

@tillsc/progressive-web-components 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/package.json +3 -4
package/src/core/pwc-children-observer-element.js +53 -0
package/src/core/pwc-element.js +76 -0
package/src/core/pwc-sentinel-init-element.js +56 -0
package/src/core/pwc-simple-init-element.js +25 -0
package/src/core/utils.js +9 -0
package/src/dialog-opener/INTERNALS.md +47 -0
package/src/dialog-opener/README.md +145 -0
package/src/dialog-opener/base.js +226 -0
package/src/dialog-opener/bs5/dialog-opener.js +73 -0
package/src/dialog-opener/bs5/index.js +10 -0
package/src/dialog-opener/dialog-opener.css +21 -0
package/src/dialog-opener/dialog-opener.js +41 -0
package/src/dialog-opener/index.js +12 -0
package/src/dialog-opener/test/basic.html +109 -0
package/src/dialog-opener/test/bs5-basic.html +100 -0
package/src/dialog-opener/test/bs5-iframe-target.html +41 -0
package/src/dialog-opener/test/iframe-target.html +28 -0
package/src/dialog-opener/test/index.html +19 -0
package/src/index-bs5.js +3 -0
package/src/index.js +3 -0
package/src/modal-dialog/INTERNALS.md +55 -0
package/src/modal-dialog/README.md +139 -0
package/src/modal-dialog/base.js +117 -0
package/src/modal-dialog/bs5/index.js +7 -0
package/src/modal-dialog/bs5/modal-dialog.js +109 -0
package/src/modal-dialog/index.js +9 -0
package/src/modal-dialog/modal-dialog.css +103 -0
package/src/modal-dialog/modal-dialog.js +97 -0
package/src/modal-dialog/test/basic.html +84 -0
package/src/modal-dialog/test/bs5-basic.html +123 -0
package/src/modal-dialog/test/index.html +19 -0
package/src/multiselect-dual-list/INTERNALS.md +101 -0
package/src/multiselect-dual-list/README.md +191 -0
package/src/multiselect-dual-list/base.js +215 -0
package/src/multiselect-dual-list/bs5/index.js +10 -0
package/src/multiselect-dual-list/bs5/multiselect-dual-list.js +103 -0
package/src/multiselect-dual-list/index.js +9 -0
package/src/multiselect-dual-list/multiselect-dual-list.css +123 -0
package/src/multiselect-dual-list/multiselect-dual-list.js +100 -0
package/src/multiselect-dual-list/test/basic.html +115 -0
package/src/multiselect-dual-list/test/bs5-basic.html +106 -0
package/src/multiselect-dual-list/test/dynamic-options.html +70 -0
package/src/multiselect-dual-list/test/filter-api.html +66 -0
package/src/multiselect-dual-list/test/index.html +21 -0

package/src/dialog-opener/bs5/dialog-opener.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { defineOnce } from "../../core/utils.js";
+import { BaseDialogOpener } from "../base.js";
+/**
+ * <pwc-dialog-opener-bs5>
+ *
+ * Uses <pwc-modal-dialog-bs5> as the Bootstrap modal socket.
+ *
+ * Requirements:
+ * - Bootstrap 5 CSS + JS present (globalThis.bootstrap.Modal)
+ * - pwc-modal-dialog-bs5 defined (either imported/bundled or already on page)
+ */
+export class PwcDialogOpenerBs5 extends BaseDialogOpener {
+  findOrCreateDialog(src) {
+    const tag = "pwc-modal-dialog-bs5";
+    // Prefer one modal socket per opener instance.
+    if (!this.dialog) {
+      // Use existing child socket if provided, otherwise create one.
+      this.dialog = this.querySelector(tag) || document.createElement(tag);
+      // If caller didn't place it into the DOM, keep it associated with this component.
+      // ModalDialogBase will auto-append itself to <body> on open() if not connected.
+      if (!this.dialog.isConnected) {
+        this.appendChild(this.dialog);
+      }
+    }
+    // Open modal and get access to the body/footer containers.
+    this.dialog.open({
+      title: this.getAttribute("title") || "",
+      size: this.getAttribute("size") || "lg",
+      closeText: this.getAttribute("close") || "Close",
+      showClose: false,
+      backdrop: true,
+      keyboard: true,
+      focus: true
+    });
+    const closeText = this.getAttribute("close") || "Close";
+    this.dialog.footerEl.innerHTML = `
+      <div class="pwc-dialog-opener-actions">
+        <button type="button" class="btn btn-secondary" data-pwc-action="close" aria-label="${closeText}">
+          ${closeText}
+        </button>
+      </div>
+    `;
+    const body = this.dialog.bodyEl;
+    body.replaceChildren(this.createIFrame(src));
+    // BaseDialogOpener expects this.modal.show()/hide()
+    // Map those to the modal-dialog component API.
+    this.modal = {
+      show: () => {
+        // already shown by open(); no-op for compatibility
+      },
+      hide: () => this.dialog.close()
+    };
+  }
+  _moveOutSelector() {
+    let selector = super._moveOutSelector();
+    if (selector === "primary") {
+      selector = ".btn-primary[type=submit]";
+    }
+    return selector
+  }
+}
+export function define() {
+  defineOnce("pwc-dialog-opener-bs5", PwcDialogOpenerBs5);
+}

package/src/dialog-opener/bs5/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { define } from "./dialog-opener.js";
+// Ensure the modal-dialog-bs5 is registered first.
+import "../../modal-dialog/bs5/index.js";
+export function register() {
+  define();
+}
+register();

package/src/dialog-opener/dialog-opener.css ADDED Viewed

@@ -0,0 +1,21 @@
+/* Footer actions container (used by move-out) */
+.pwc-dialog-opener-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+/* Close button */
+.pwc-dialog-opener-close {
+  appearance: none;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  background: transparent;
+  font: inherit;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.pwc-dialog-opener-close:hover {
+  background: rgba(0, 0, 0, 0.06);
+}

package/src/dialog-opener/dialog-opener.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { defineOnce } from "../core/utils.js";
+import { BaseDialogOpener } from "./base.js";
+export class PwcDialogOpener extends BaseDialogOpener {
+  findOrCreateDialog(src) {
+    if (!this.modalDialog) {
+      this.modalDialog = document.createElement("pwc-modal-dialog");
+      document.body.appendChild(this.modalDialog);
+    }
+    const closeText = this.getAttribute("close") || "Close";
+    this.modalDialog.open({
+      closeText,
+      showClose: false
+    });
+this.modalDialog.footerEl.innerHTML = `
+  <div class="pwc-dialog-opener-actions pwc-dialog-opener-footer">
+    <button type="button" class="pwc-dialog-opener-close" data-pwc-action="close" aria-label="${closeText}">
+      ${closeText}
+    </button>
+  </div>
+`;
+    const iframe = this.createIFrame(src);
+    this.modalDialog.bodyEl.replaceChildren(iframe);
+    // Contract for BaseDialogOpener.enhanceIFrame():
+    // it queries this.dialog for "iframe".
+    this.dialog = this.modalDialog.ui.rootEl;
+    // Contract for BaseDialogOpener.open():
+    // it calls this.modal.show()/hide().
+    this.modal = {
+      show: () => {}, // modal-dialog is already shown by open()
+      hide: () => this.modalDialog.close()
+    };
+  }
+}
+export function define() {
+  defineOnce("pwc-dialog-opener", PwcDialogOpener);
+}

package/src/dialog-opener/index.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { PwcDialogOpener, define } from "./dialog-opener.js";
+import cssText from "./dialog-opener.css";
+// Ensure the modal-dialog is registered first.
+import "../modal-dialog/index.js";
+export function register() {
+  PwcDialogOpener.registerCss(cssText);
+  define();
+}
+register();

package/src/dialog-opener/test/basic.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!-- src/dialog-opener/test/click-opens-dialog.html -->
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>dialog-opener: click opens dialog</title>
+  <script type="module" src="../../../dist/dialog-opener.js"></script>
+</head>
+<body>
+  <pwc-dialog-opener id="dialog-opener-demo" move-out="submit" local-reload="with-scripts replace-url">
+    <a href="./iframe-target.html">Open</a><br>
+    Hello <span id="first_name"></span> <span id="last_name"></span>
+    <input type="hidden" name="default_for_iframe_target">
+    <script type="module">
+      const url = new URL(window.location.href);
+      const firstName = url.searchParams.get("first_name") || "";
+      const lastName = url.searchParams.get("last_name") || "";
+      document.getElementById("first_name").textContent = firstName
+      document.getElementById("last_name").textContent = lastName
+      document.querySelector("input[name=default_for_iframe_target]").value = JSON.stringify({firstName , lastName});
+    </script>
+  </pwc-dialog-opener>
+  <script type="module">
+    import { run } from "../../../test/static/harness.js";
+    const u = new URL(window.location.href);
+    if (u.searchParams.has("commit")) {
+      // IFrame subission mode
+      if (u.searchParams.has("commit") && !u.searchParams.has("dialog_finished_with")) {
+        // Ensure the iframe URL contains the marker param your component expects.
+        // This runs inside the iframe page.
+        // This would usually be done by the server handling the form submission,
+        // but we can simulate it here for testing.
+        u.searchParams.set("dialog_finished_with", "ok");
+        window.location.replace(u.toString());
+      }
+    }
+    else {
+      run(async ({ assert, equal, waitFor, nextTick, log }) => {
+        log("checking element definition");
+        assert(customElements.get("pwc-dialog-opener"), "pwc-dialog-opener not defined");
+        const el = document.querySelector("#dialog-opener-demo");
+        assert(el, "missing pwc-dialog-opener");
+        const link = el.querySelector("a");
+        assert(link, "missing link");
+        log("clicking link");
+        link.dispatchEvent(
+          new MouseEvent("click", { bubbles: true, cancelable: true, composed: true })
+        );
+        await nextTick();
+        log("waiting for dialog to exist");
+        await waitFor(() => Boolean(document.querySelector("dialog.pwc-modal-dialog")), {
+          message: "dialog not created"
+        });
+        const dlg = document.querySelector("dialog.pwc-modal-dialog");
+        assert(dlg, "dialog missing");
+        log("waiting for dialog to be open");
+        await waitFor(() => dlg.open === true, { message: "dialog did not open" });
+        log("checking iframe exists");
+        const iframe = dlg.querySelector("iframe");
+        assert(iframe, "iframe not created");
+        log("waiting for iframe load");
+        await waitFor(() => {
+          return iframe.contentDocument && iframe.contentDocument.readyState === "complete";
+        }, { timeoutMs: 10_000, message: "iframe did not load" });
+        log("checking iframe src has _layout=false");
+        {
+          const raw = iframe.getAttribute("src") || "";
+          const u = new URL(raw, window.location.href);
+          assert(u.pathname.endsWith("/src/dialog-opener/test/iframe-target.html"), `unexpected iframe pathname: ${u.pathname}`);
+          assert(u.searchParams.get("_layout") === "false", `missing or wrong _layout param: ${u.search}`);
+        }
+        log("waiting for moved-out OK button");
+        await waitFor(() => {
+          const btn = dlg.querySelector(".pwc-dialog-opener-actions button[type=submit]");
+          return Boolean(btn);
+        }, { timeoutMs: 10_000, message: "moved-out submit button not found" });
+        const okBtn = dlg.querySelector(".pwc-dialog-opener-actions button[type=submit]");
+        assert(okBtn, "moved-out submit button missing");
+        log("clicking moved-out OK button");
+        okBtn.dispatchEvent(
+          new MouseEvent("click", { bubbles: true, cancelable: true, composed: true })
+        );
+        log("waiting for dialog to close after redirect");
+        await waitFor(() => dlg.open === false, { timeoutMs: 10_000, message: "dialog did not close after OK" });
+        equal(document.querySelectorAll("pwc-modal-dialog").length, 1, "modal-dialog element should persist for reuse");
+      });
+    }
+  </script>
+</body>
+</html>

package/src/dialog-opener/test/bs5-basic.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>dialog-opener-bs5: basic</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+<body>
+  <pwc-dialog-opener-bs5 id="opener" local-reload="with-scripts replace-url">
+    <a href="./bs5-iframe-target.html">Open dialog</a>
+    Hello <span id="first_name"></span> <span id="last_name"></span>
+    <input type="hidden" name="default_for_iframe_target">
+    <script type="module">
+      const url = new URL(window.location.href);
+      const firstName = url.searchParams.get("first_name") || "";
+      const lastName = url.searchParams.get("last_name") || "";
+      document.getElementById("first_name").textContent = firstName
+      document.getElementById("last_name").textContent = lastName
+      document.querySelector("input[name=default_for_iframe_target]").value = JSON.stringify({ firstName, lastName });
+    </script>
+  </pwc-dialog-opener-bs5>
+  <!-- component bundle -->
+  <script type="module" src="../../../dist/dialog-opener-bs5.js"></script>
+  <!-- bootstrap js -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script type="module">
+    import { run } from "../../../test/static/harness.js";
+    const u = new URL(window.location.href);
+    if (u.searchParams.has("commit")) {
+      // IFrame subission mode
+      if (u.searchParams.has("commit") && !u.searchParams.has("dialog_finished_with")) {
+        // Ensure the iframe URL contains the marker param your component expects.
+        // This runs inside the iframe page.
+        // This would usually be done by the server handling the form submission,
+        // but we can simulate it here for testing.
+        u.searchParams.set("dialog_finished_with", "ok");
+        window.location.replace(u.toString());
+      }
+    }
+    else {
+      run(async ({ assert, waitFor, log }) => {
+        log("checking custom element definition");
+        assert(
+          customElements.get("pwc-dialog-opener-bs5"),
+          "pwc-dialog-opener-bs5 not defined"
+        );
+        const opener = document.getElementById("opener");
+        assert(opener, "missing dialog opener element");
+        const link = opener.querySelector("a");
+        assert(link, "missing link");
+        log("clicking opener link");
+        link.click();
+        log("waiting for bootstrap modal to appear");
+        await waitFor(() => document.querySelector(".modal.show"), {
+          message: "modal not shown"
+        });
+        const modal = document.querySelector(".modal.show");
+        assert(modal, "modal element missing");
+        log("checking iframe existence");
+        const iframe = modal.querySelector("iframe");
+        assert(iframe, "iframe not created");
+        log("waiting for iframe to load");
+        await waitFor(() => {
+          return iframe.contentDocument && iframe.contentDocument.readyState === "complete";
+        }, { message: "iframe did not load" });
+        log("finding modal close button");
+        const closeButton = modal.querySelector("[data-pwc-action='close']");
+        assert(closeButton, "close button not found on modal");
+        log("clicking close button");
+        closeButton.click();
+        log("waiting for modal to close");
+        await waitFor(() => !modal.classList.contains("show"), {
+          message: "modal did not close after clicking close button"
+        });
+        log("done");
+      });
+    }
+  </script>
+</body>
+</html>

package/src/dialog-opener/test/bs5-iframe-target.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>dialog-opener-bs5 iframe target</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+<body>
+  <h1>iframe target</h1>
+  <form method="get" action="./bs5-basic.html" class="container py-3">
+    <div class="mb-3">
+      <label for="first_name" class="form-label">First name</label>
+      <input id="first_name" name="first_name" value="John" class="form-control" />
+    </div>
+    <div class="mb-3">
+      <label for="last_name" class="form-label">Last name</label>
+      <input id="last_name" name="last_name" value="Doe" class="form-control" />
+    </div>
+    <button type="submit" name="commit" value="ok" class="btn btn-primary">OK</button>
+  </form>
+  <script type="module">
+    const url = new URL(window.location.href);
+    const defaultData = url.searchParams.get("default");
+    if (defaultData) {
+      try {
+        const data = JSON.parse(defaultData);
+        document.querySelector("input[name=first_name]").value = data.firstName;
+        document.querySelector("input[name=last_name]").value = data.lastName;
+      } catch (e) {
+        console.error("Failed to parse default data:", e);
+      }
+    }
+  </script>
+</body>
+</html>

package/src/dialog-opener/test/iframe-target.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>dialog-opener iframe target</title>
+  </head>
+  <body>
+    <h1>iframe target</h1>
+    <form method="get" action="./basic.html">
+      <label>First name: </label><input name="first_name" value="John" /></label><br />
+      <label>Last name: </label><input name="last_name" value="Doe" /></label><br />
+      <button type="submit" name="commit" value="ok">OK</button>
+    </form>
+    <script type="module">
+      const url = new URL(window.location.href);
+      const defaultData = url.searchParams.get("default");
+      if (defaultData) {
+        try {
+          const data = JSON.parse(defaultData);
+            document.querySelector("input[name=first_name]").value = data.firstName;
+            document.querySelector("input[name=last_name]").value = data.lastName;
+        } catch (e) {
+          console.error("Failed to parse default data:", e);
+        }
+      }
+    </script>
+  </body>
+</html>

package/src/dialog-opener/test/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>dialog-opener</title>
+    <link rel="stylesheet" href="../../../test/static/index.css">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
+  </head>
+  <body>
+    <zero-md src="../README.md"></zero-md>
+    <h2>Weitere Links</h2>
+    <ul>
+      <li><a href="./basic.html" data-test-page>Test: basic</a></li>
+      <li><a href="./bs5-basic.html" data-test-page>Test: bs5-basic</a></li>
+      <li><a href="../INTERNALS.md">INTERNALS.md</a></li>
+    </ul>
+  </body>
+</html>

package/src/index-bs5.js ADDED Viewed

@@ -0,0 +1,3 @@
+import './dialog-opener/bs5';
+import './modal-dialog/bs5';
+import './multiselect-dual-list/bs5';

package/src/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import './dialog-opener';
+import './modal-dialog';
+import './multiselect-dual-list';

package/src/modal-dialog/INTERNALS.md ADDED Viewed

@@ -0,0 +1,55 @@
+# Modal-Dialog — Internals
+## Architecture
+`ModalDialogBase` (`base.js`) provides orchestration for opening, closing, and stacking modals.
+It defines a **subclass contract** — a set of hooks that variants must implement:
+| Hook | Responsibility |
+|------|---------------|
+| `_render(ctx)` | Build DOM, return `{ rootEl, bodyEl, headerEl, footerEl, teardown? }` |
+| `_getOpenSibling()` | Find an already-open modal (for stacking) |
+| `_suspend(el)` / `_restore(el)` | Hide/show a sibling modal during stacking |
+| `_show(ui, options)` / `_hide(ui)` | Actually show/hide the modal |
+| `_armFinalClose(ui, onFinalClose)` | Wire up the "real close" callback |
+The vanilla variant uses native `<dialog>` + `showModal()`.
+The BS5 variant uses `bootstrap.Modal`.
+## Open lifecycle
+1. If the element is not in the DOM, it auto-appends to `<body>` (and auto-removes on close)
+2. Any previous UI is torn down
+3. `_render()` builds fresh DOM and returns the `ui` object
+4. `_getOpenSibling()` checks for a currently open modal
+5. If a sibling exists → `_suspend()` hides it (marked as `closeReason=suspend`)
+6. `_armFinalClose()` registers the close callback
+7. `_show()` makes the modal visible
+## Stacking
+When a second modal opens while the first is visible:
+- The first modal is suspended (hidden but not destroyed)
+- Its `dataset.closeReason` is set to `"suspend"` so close handlers know to ignore it
+- When the second modal closes, `_onFinalClose()` restores the first via `_restore()`
+- The restore happens in a `queueMicrotask` to avoid event ordering issues
+## Close detection
+The tricky part is distinguishing a **final close** (user dismissed the dialog) from a
+**suspend close** (another modal is temporarily hiding this one).
+- Vanilla: listens to the `<dialog>` `close` event, checks `dataset.closeReason`
+- BS5: listens to `hidden.bs.modal`, same check
+Only a final close triggers teardown and parent restoration.
+## Close triggers
+Handled in `ModalDialogBase.handleEvent()`:
+- Click on `[data-pwc-action="close"]` → `close()`
+- Click directly on `ui.rootEl` (backdrop) → `close()`
+`close()` sets `dataset.closeReason = "final"` and calls `_hide()`.

package/src/modal-dialog/README.md ADDED Viewed

@@ -0,0 +1,139 @@
+# `<pwc-modal-dialog>`
+Minimal modal dialog web component.
+`<pwc-modal-dialog>` provides a small, explicit API to open modal dialogs from JavaScript.
+It is designed as a low-level building block and does **not** manage navigation, iframes,
+or application flow on its own.
+The component does **not** use Shadow DOM and relies on regular DOM structure and CSS hooks.
+---
+## Basic usage
+```html
+<pwc-modal-dialog></pwc-modal-dialog>
+```
+```js
+const dialog = document.querySelector("pwc-modal-dialog");
+dialog.open({ title: "Example" });
+dialog.bodyEl.innerHTML = "<p>Hello world</p>";
+```
+Calling `open()` renders and shows the dialog. Content is populated **after** opening.
+---
+## JavaScript API
+### `open(options)`
+Opens the dialog.
+Supported options:
+- `title` – dialog title text
+- `size` – size token (implementation-specific)
+- `closeText` – accessible label for close actions
+```js
+dialog.open({
+  title: "Edit item",
+  size: "lg",
+  closeText: "Cancel"
+});
+```
+### `close()`
+Closes the dialog programmatically.
+```js
+dialog.close();
+```
+---
+## Content accessors
+After `open()` the following properties are available:
+- `bodyEl` – main content container
+- `headerEl` – header container
+- `footerEl` – footer container
+```js
+dialog.bodyEl.append(form);
+dialog.footerEl.append(button);
+```
+Accessing these before `open()` throws an error.
+---
+## Close behavior
+The dialog closes when:
+- `close()` is called
+- an element with `data-pwc-action="close"` is clicked
+- the backdrop is clicked (implementation dependent)
+Example close button:
+```html
+<button data-pwc-action="close">Close</button>
+```
+---
+## Stacking behavior
+If a dialog is opened while another dialog is already open:
+- the parent dialog is temporarily suspended
+- the child dialog is shown
+- when the child closes, the parent is restored
+This works for both vanilla and Bootstrap variants.
+---
+## Styling (vanilla)
+The vanilla implementation uses the native `<dialog>` element.
+Key CSS hooks:
+- `pwc-modal-dialog`
+- `.pwc-modal-dialog-surface`
+- `.pwc-modal-dialog-header`
+- `.pwc-modal-dialog-body`
+- `.pwc-modal-dialog-footer`
+Custom properties are defined on the host element:
+```css
+pwc-modal-dialog {
+  --pwc-modal-width: 640px;
+  --pwc-modal-padding: 1rem;
+}
+```
+---
+## Bootstrap 5 variant
+A Bootstrap 5 based implementation is available:
+```html
+<pwc-modal-dialog-bs5></pwc-modal-dialog-bs5>
+```
+Notes:
+- Same JavaScript API as the vanilla component
+- Uses Bootstrap modal markup and classes
+- No additional close button is injected
+- Requires Bootstrap 5 JavaScript and CSS to be present globally