@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-modal/diwa-modal.js

@@ -0,0 +1,337 @@
+import { Host, h } from "@stencil/core";
+import { getFocusableElements, trapFocus } from "./diwa-modal-utils";
+import { getComponentCss } from "./diwa-modal-styles";
+/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */
+let _headingIdCounter = 0;
+/**
+ * @component diwa-modal
+ *
+ * A controlled overlay dialog box for focused interactions.
+ * Follows the PDS controlled-component pattern — the consumer owns open state
+ * and responds to the `dismiss` event to close the modal.
+ *
+ * Design token override API (set on :root or any ancestor):
+ *   --diwa-modal-width       Panel width            (default: 560px)
+ *   --diwa-modal-max-height  Maximum panel height   (default: 85vh)
+ *
+ * Usage:
+ *   <diwa-modal open heading="Confirm deletion" ondismiss={() => setOpen(false)}>
+ *     <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+ *     <div slot="footer">
+ *       <diwa-button variant="danger">Delete</diwa-button>
+ *       <diwa-button variant="secondary" onDiwaClick={handleClose}>Cancel</diwa-button>
+ *     </div>
+ *   </diwa-modal>
+ *
+ * @slot default — Scrollable body content.
+ * @slot header  — Optional sub-header below the title bar (e.g. description, metadata).
+ * @slot footer  — Sticky footer content (e.g. action buttons). Hidden when empty.
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
+export class DiwaModal {
+    constructor() {
+        this._headingId = `diwa-modal-heading-${++_headingIdCounter}`;
+        this._savedFocus = null;
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /**
+         * Per-component theme override.
+         * Reflects data-theme onto the host element so the light/dark token
+         * overrides in app.css cascade into the Shadow DOM via CSS inheritance.
+         */
+        this.theme = 'dark';
+        /**
+         * Whether the modal is open.
+         *
+         * Controlled prop — set `open={true}` to open and `open={false}` to close.
+         * The component emits `dismiss` when the user requests a close; the
+         * consumer must set `open={false}` in response.
+         */
+        this.open = false;
+        /**
+         * When false, the dismiss (×) button in the header is hidden.
+         * Pair with a close action in the footer or programmatic `open = false`.
+         */
+        this.dismissButton = true;
+        /**
+         * When true, clicking the backdrop does not emit `dismiss`.
+         * Use for required confirmations requiring an explicit user choice.
+         */
+        this.disableBackdropClick = false;
+        /**
+         * Controls the visual style of the backdrop overlay.
+         *
+         * `blur`    — frosted glass via backdrop-filter (default).
+         *             Use when the modal is opened by direct user interaction (e.g. a button click).
+         *
+         * `shading` — solid dark scrim via --diwa-bg-shading.
+         *             Use for system-triggered modals (e.g. session timeout, cookie consent).
+         */
+        this.backdrop = 'blur';
+        // ──────────────────────────────────────────────────────────────
+        // Internal state — updated in componentWillRender
+        // ──────────────────────────────────────────────────────────────
+        /** True when the footer slot contains at least one element. */
+        this._hasFooter = false;
+        /** True when the header slot contains at least one element. */
+        this._hasHeader = false;
+        // ──────────────────────────────────────────────────────────────
+        // Private helpers
+        // ──────────────────────────────────────────────────────────────
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+        this.handleBackdropClick = () => {
+            if (!this.disableBackdropClick) {
+                this.handleDismiss();
+            }
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ──────────────────────────────────────────────────────────────
+    componentWillRender() {
+        // Check light DOM children for slotted content.
+        // PDS pattern: host.querySelector('[slot="..."]') is the most reliable
+        // way to detect slot occupancy before the shadow DOM renders.
+        this._hasFooter = this.host.querySelector('[slot="footer"]') !== null;
+        this._hasHeader = this.host.querySelector('[slot="header"]') !== null;
+    }
+    disconnectedCallback() {
+        // Ensure scroll lock is always released if the element is removed from DOM.
+        document.body.style.overflow = '';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Watchers
+    // ──────────────────────────────────────────────────────────────
+    onOpenChange(isOpen) {
+        var _a;
+        if (isOpen) {
+            // Save the currently focused element so we can return focus on close.
+            this._savedFocus = document.activeElement;
+            // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).
+            document.body.style.overflow = 'hidden';
+            // Move focus into the modal after the current render frame.
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this._modalEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            document.body.style.overflow = '';
+            // Return focus to the element that triggered the modal open.
+            (_a = this._savedFocus) === null || _a === void 0 ? void 0 : _a.focus();
+            this._savedFocus = null;
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Keyboard handling
+    // ──────────────────────────────────────────────────────────────
+    onKeyDown(e) {
+        if (!this.open)
+            return;
+        if (e.key === 'Escape') {
+            // WCAG 2.1.2 — provide a way to close without a pointer device.
+            e.preventDefault();
+            this.handleDismiss();
+            return;
+        }
+        if (e.key === 'Tab') {
+            // Focus trap: cycle focus within the modal shadow root.
+            // WCAG 2.4.3 — prevents background content from being reachable.
+            const sr = this.host.shadowRoot;
+            if (!sr)
+                return;
+            const focusable = getFocusableElements(sr);
+            trapFocus(e, focusable, sr.activeElement);
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;
+        return (h(Host, { key: 'c1acc99174aa04a60711f8e96c6097d55b9efd14', "data-theme": this.theme }, h("style", { key: '21667f36c24c814ea163defa911f038684563d9c' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), h("div", { key: 'a393f68968ef8eca8007af0204831627114f0150', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), h("div", { key: '34e2f0b1ceffc8f1e8255198714ee1273cafb945', class: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": heading ? this._headingId : undefined, "aria-label": !heading ? 'Dialog' : undefined, "aria-hidden": open ? undefined : 'true', tabIndex: -1, ref: (el) => { this._modalEl = el; } }, h("div", { key: 'b7f3afe1849b84edd7689bf854bfb88724b80126', class: "header" }, h("div", { key: 'c149b170f6b9fc010c7095b72393a6c52786cc56', class: "header-top" }, heading && (h("h2", { key: '8766cbba30a6baec983d76c2ea2103a0ce72d8cd', class: "heading", id: this._headingId }, heading)), dismissButton && (h("button", { key: '33427160a356fa8d5d6fb80ac386f4aaa2086bb9', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, h("svg", { key: 'c0a8aa78dadf6146151f24193eb06bae00ba9291', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", width: "16", height: "16", "aria-hidden": "true" }, h("path", { key: '21b404d32024b640a2687a9589c4783357a22aa6', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (h("div", { key: 'cd981d16141149103a2309b20d49fc6a01b5570b', class: "header-sub" }, h("slot", { key: '108ead5c96a73eeb0afae549d8ee3bcf6b06d305', name: "header" })))), h("div", { key: '56aa2c8ce6090086af76f4f039637e4d3274c9ca', class: "body" }, h("slot", { key: '784eb1571c6d68bdc6f01e413f3d549bc70ad2ea' })), _hasFooter && (h("div", { key: '1aa5c7bbdb0cfc86a3319bd9faa778da78a18a98', class: "footer" }, h("slot", { key: 'ada3b858cf5e2f6c46c175518773398e519d5aff', name: "footer" }))))));
+    }
+    static get is() { return "diwa-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override.\r\nReflects data-theme onto the host element so the light/dark token\r\noverrides in app.css cascade into the Shadow DOM via CSS inheritance."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open.\r\n\r\nControlled prop \u2014 set `open={true}` to open and `open={false}` to close.\r\nThe component emits `dismiss` when the user requests a close; the\r\nconsumer must set `open={false}` in response."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text displayed in the modal title bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": false
+            },
+            "dismissButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When false, the dismiss (\u00D7) button in the header is hidden.\r\nPair with a close action in the footer or programmatic `open = false`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dismiss-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "disableBackdropClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, clicking the backdrop does not emit `dismiss`.\r\nUse for required confirmations requiring an explicit user choice."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-backdrop-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "backdrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ModalBackdrop",
+                    "resolved": "\"blur\" | \"shading\"",
+                    "references": {
+                        "ModalBackdrop": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-modal/types.ts::ModalBackdrop"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual style of the backdrop overlay.\r\n\r\n`blur`    \u2014 frosted glass via backdrop-filter (default).\r\n            Use when the modal is opened by direct user interaction (e.g. a button click).\r\n\r\n`shading` \u2014 solid dark scrim via --diwa-bg-shading.\r\n            Use for system-triggered modals (e.g. session timeout, cookie consent)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "backdrop",
+                "reflect": false,
+                "defaultValue": "'blur'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_hasFooter": {},
+            "_hasHeader": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user requests the modal to close:\r\n  - Clicking the backdrop (unless `disableBackdropClick` is true)\r\n  - Pressing the Escape key\r\n  - Clicking the dismiss (\u00D7) button\r\n\r\nThe consumer MUST set `open={false}` in response:\r\n```html\r\n<diwa-modal open ondismiss={() => (this.open = false)} />\r\n```"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-modal.js.map

package/dist/collection/components/diwa-modal/diwa-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-modal.js","sourceRoot":"","sources":["../../../src/components/diwa-modal/diwa-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport type { ModalBackdrop } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getFocusableElements, trapFocus } from './diwa-modal-utils';\r\nimport { getComponentCss } from './diwa-modal-styles';\r\n\r\n/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */\r\nlet _headingIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-modal\r\n *\r\n * A controlled overlay dialog box for focused interactions.\r\n * Follows the PDS controlled-component pattern — the consumer owns open state\r\n * and responds to the `dismiss` event to close the modal.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-modal-width       Panel width            (default: 560px)\r\n *   --diwa-modal-max-height  Maximum panel height   (default: 85vh)\r\n *\r\n * Usage:\r\n *   <diwa-modal open heading=\"Confirm deletion\" ondismiss={() => setOpen(false)}>\r\n *     <p>Are you sure you want to delete this item? This action cannot be undone.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button variant=\"danger\">Delete</diwa-button>\r\n *       <diwa-button variant=\"secondary\" onDiwaClick={handleClose}>Cancel</diwa-button>\r\n *     </div>\r\n *   </diwa-modal>\r\n *\r\n * @slot default — Scrollable body content.\r\n * @slot header  — Optional sub-header below the title bar (e.g. description, metadata).\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Hidden when empty.\r\n *\r\n * @controlled {\"props\": [\"open\"], \"event\": \"dismiss\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-modal',\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern so styles re-evaluate whenever\r\n   * open/backdrop/dismissButton/hasFooter change, enabling state-driven CSS.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaModal {\r\n  @Element() host!: HTMLElement;\r\n\r\n  private readonly _headingId = `diwa-modal-heading-${++_headingIdCounter}`;\r\n  private _modalEl?: HTMLDivElement;\r\n  private _savedFocus: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   * Reflects data-theme onto the host element so the light/dark token\r\n   * overrides in app.css cascade into the Shadow DOM via CSS inheritance.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the modal is open.\r\n   *\r\n   * Controlled prop — set `open={true}` to open and `open={false}` to close.\r\n   * The component emits `dismiss` when the user requests a close; the\r\n   * consumer must set `open={false}` in response.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /** Heading text displayed in the modal title bar. */\r\n  @Prop() heading?: string;\r\n\r\n  /**\r\n   * When false, the dismiss (×) button in the header is hidden.\r\n   * Pair with a close action in the footer or programmatic `open = false`.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * When true, clicking the backdrop does not emit `dismiss`.\r\n   * Use for required confirmations requiring an explicit user choice.\r\n   */\r\n  @Prop() disableBackdropClick: boolean = false;\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   *\r\n   * `blur`    — frosted glass via backdrop-filter (default).\r\n   *             Use when the modal is opened by direct user interaction (e.g. a button click).\r\n   *\r\n   * `shading` — solid dark scrim via --diwa-bg-shading.\r\n   *             Use for system-triggered modals (e.g. session timeout, cookie consent).\r\n   */\r\n  @Prop() backdrop: ModalBackdrop = 'blur';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state — updated in componentWillRender\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** True when the footer slot contains at least one element. */\r\n  @State() private _hasFooter = false;\r\n\r\n  /** True when the header slot contains at least one element. */\r\n  @State() private _hasHeader = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the modal to close:\r\n   *   - Clicking the backdrop (unless `disableBackdropClick` is true)\r\n   *   - Pressing the Escape key\r\n   *   - Clicking the dismiss (×) button\r\n   *\r\n   * The consumer MUST set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-modal open ondismiss={() => (this.open = false)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentWillRender(): void {\r\n    // Check light DOM children for slotted content.\r\n    // PDS pattern: host.querySelector('[slot=\"...\"]') is the most reliable\r\n    // way to detect slot occupancy before the shadow DOM renders.\r\n    this._hasFooter = this.host.querySelector('[slot=\"footer\"]') !== null;\r\n    this._hasHeader = this.host.querySelector('[slot=\"header\"]') !== null;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    // Ensure scroll lock is always released if the element is removed from DOM.\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean): void {\r\n    if (isOpen) {\r\n      // Save the currently focused element so we can return focus on close.\r\n      this._savedFocus = document.activeElement as HTMLElement;\r\n      // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).\r\n      document.body.style.overflow = 'hidden';\r\n      // Move focus into the modal after the current render frame.\r\n      requestAnimationFrame(() => {\r\n        this._modalEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      // Return focus to the element that triggered the modal open.\r\n      this._savedFocus?.focus();\r\n      this._savedFocus = null;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (!this.open) return;\r\n\r\n    if (e.key === 'Escape') {\r\n      // WCAG 2.1.2 — provide a way to close without a pointer device.\r\n      e.preventDefault();\r\n      this.handleDismiss();\r\n      return;\r\n    }\r\n\r\n    if (e.key === 'Tab') {\r\n      // Focus trap: cycle focus within the modal shadow root.\r\n      // WCAG 2.4.3 — prevents background content from being reachable.\r\n      const sr = this.host.shadowRoot;\r\n      if (!sr) return;\r\n      const focusable = getFocusableElements(sr);\r\n      trapFocus(e, focusable, sr.activeElement);\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleBackdropClick = (): void => {\r\n    if (!this.disableBackdropClick) {\r\n      this.handleDismiss();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(open, backdrop, dismissButton, _hasFooter)}</style>\r\n\r\n        {/* Backdrop — covers the viewport behind the panel */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleBackdropClick}\r\n        />\r\n\r\n        {/*\r\n         * Modal panel.\r\n         * role=\"dialog\" + aria-modal=\"true\" declares this as a modal dialog.\r\n         * aria-labelledby links to the heading text for screen readers.\r\n         * tabIndex={-1} allows the panel itself to receive focus programmatically\r\n         * (via @Watch open → _modalEl.focus()) — it is not in the natural tab order.\r\n         */}\r\n        <div\r\n          class=\"modal\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={heading ? this._headingId : undefined}\r\n          aria-label={!heading ? 'Dialog' : undefined}\r\n          aria-hidden={open ? undefined : 'true'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this._modalEl = el as HTMLDivElement; }}\r\n        >\r\n          {/* Title bar */}\r\n          <div class=\"header\">\r\n            <div class=\"header-top\">\r\n              {heading && (\r\n                <h2 class=\"heading\" id={this._headingId}>\r\n                  {heading}\r\n                </h2>\r\n              )}\r\n              {dismissButton && (\r\n                <button\r\n                  class=\"dismiss\"\r\n                  type=\"button\"\r\n                  aria-label=\"Close dialog\"\r\n                  onClick={this.handleDismiss}\r\n                >\r\n                  {/* Close × icon */}\r\n                  <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    aria-hidden=\"true\"\r\n                  >\r\n                    <path d=\"M18 6 6 18M6 6l12 12\" />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n            </div>\r\n\r\n            {/* Optional sub-header slot (description, metadata, etc.) */}\r\n            {_hasHeader && (\r\n              <div class=\"header-sub\">\r\n                <slot name=\"header\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Scrollable body */}\r\n          <div class=\"body\">\r\n            <slot />\r\n          </div>\r\n\r\n          {/* Sticky footer — rendered only when slot is occupied */}\r\n          {_hasFooter && (\r\n            <div class=\"footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-modal/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-modal/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\r\n * diwa-modal — Public TypeScript types\r\n * ======================================\r\n * Exported so framework wrapper packages and consumers can share these types.\r\n */\r\n\r\n/** Controls the visual style of the backdrop overlay behind the modal. */\r\nexport type ModalBackdrop = 'blur' | 'shading';\r\n\r\nexport type { Theme } from '../../utils/styles';\r\n"]}