@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,396 @@
+import { getFocusableElements, lockPageScroll } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A modal dialog.
+ *
+ * A native `<dialog>` opened with `showModal()`, which from inside a shadow
+ * root gives the focus trap, Escape and the backdrop for nothing — all
+ * measured: focus cannot be taken by a light-DOM button, and a real Escape
+ * fires `cancel` then `close`. So `trapFocus` from core is not needed here,
+ * unlike in the React component.
+ *
+ * The one part of `showModal()` that cannot be relied on is where it puts
+ * focus, and the gap is exactly the case every framework consumer is in. See
+ * `showDialog` below.
+ *
+ * What `showModal()` does *not* do is lock page scroll — measured: a real
+ * wheel still scrolled the page behind an open modal — so this element locks
+ * it, exactly as the React component does.
+ *
+ * @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and
+ * `pf-modal-footer`.
+ * @part dialog - the native dialog, which is also the overlay.
+ * @part panel - the bordered box the content sits in.
+ * @part close - the close button.
+ */
+export class PfModal {
+    el;
+    /** Whether the modal is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Panel width. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /**
+     * Accessible name. Falls back to the text of whatever is slotted, which is
+     * usually the header — `aria-labelledby` cannot be used, because an IDREF
+     * does not cross a shadow boundary and the header is in the light DOM.
+     */
+    label;
+    /** Close on Escape or a click on the overlay. Defaults to true. */
+    dismissable = true;
+    /** Render the corner close button. Defaults to true. */
+    showCloseButton = true;
+    /** Fires whenever the modal opens or closes, whoever caused it. */
+    pfOpenChange;
+    /**
+     * Releases the page-scroll lock, or null when this modal does not hold it.
+     * The lock is core's and reference-counted, so a slideout opening over a
+     * modal cannot leave the page unscrollable.
+     */
+    releaseScroll = null;
+    componentDidLoad() {
+        if (this.open)
+            this.showDialog();
+    }
+    disconnectedCallback() {
+        // A modal removed while open would otherwise leave the page unscrollable.
+        this.unlockScroll();
+    }
+    /** Opens the modal. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the modal. */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * The one place a state change is announced, whatever caused it: `show()`,
+     * the close button, Escape, an overlay click, or a consumer writing the prop.
+     *
+     * The first version emitted from the `close` handler alone, which fired for
+     * every close and for no open — caught by its own test. A consumer mirroring
+     * this value back sets `open` to what it already is, which Stencil does not
+     * treat as a change, so there is no loop.
+     */
+    syncOpen(next, previous) {
+        if (next)
+            this.showDialog();
+        else
+            this.closeDialog();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    get dialog() {
+        return this.el.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    lockScroll() {
+        if (this.releaseScroll)
+            return;
+        this.releaseScroll = lockPageScroll();
+    }
+    unlockScroll() {
+        this.releaseScroll?.();
+        this.releaseScroll = null;
+    }
+    /**
+     * Opens the dialog, and makes sure focus actually went into it.
+     *
+     * `showModal()` focuses the dialog or its first focusable descendant — but
+     * **not** when light-DOM children were appended in the same task as the
+     * open. Measured in Chromium with no framework involved: append the three
+     * `pf-modal-*` sections to a long-mounted `pf-modal` and set `open` in the
+     * same task, and the dialog opens with `document.activeElement` still on
+     * `<body>` and `:focus-within` false. Leave one frame between the two and
+     * focus lands inside; mount the element with its children and `open`
+     * already set and focus lands inside. So it is the append racing the open,
+     * and the flattened tree `showModal()`'s focusing steps read.
+     *
+     * That race is not an edge case: React, Angular and Vue all commit a
+     * modal's content and its `open` in one go, so every framework consumer got
+     * an open modal with focus outside it and nothing to say so — the page is
+     * still inert, so the only symptom is that a reader is not taken to the
+     * dialog and the first Tab is needed. Porting `apps/demo` is what found it.
+     *
+     * What the trace shows, with element identity and a `MutationObserver` on
+     * the shadow root: `showModal()` **does** focus, onto `div[part=panel]`,
+     * and one frame later a `focusout` with `relatedTarget: null` drops it,
+     * with nothing removed from the shadow root. That is Chromium's focus
+     * fixup running once the appended children are assigned to the slot and
+     * finding the panel is no longer a valid target -- so it is not a render
+     * that loses focus, and re-asserting after a render does not catch it
+     * (measured: `componentDidRender` alone changes nothing here).
+     *
+     * So the dialog watches for exactly that: a `focusout` that goes nowhere
+     * while the modal is open puts focus back. `requestAnimationFrame` after
+     * `showModal()` covers the case where focus never arrived at all, and
+     * `componentDidRender` covers a render that discards the focused node. All
+     * three are the same guarded call, and the `:focus-within` guard makes it a
+     * no-op whenever focus is already inside -- so none of them moves focus
+     * that the platform or a consumer placed.
+     */
+    showDialog() {
+        const dialog = this.dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this.lockScroll();
+        requestAnimationFrame(() => this.ensureFocusInside());
+    }
+    componentDidRender() {
+        this.ensureFocusInside();
+    }
+    /**
+     * Focus left the dialog for nothing while it is open, which the platform
+     * does when its focus fixup runs after the slotted content changes.
+     *
+     * `relatedTarget` is the test: a Tab or a click inside names where focus
+     * went, and a modal dialog means it cannot have gone outside. The window
+     * losing focus also reports null, hence the `document.hasFocus()` guard --
+     * without it, switching tabs would pull focus back on return.
+     */
+    onFocusOut = (event) => {
+        if (!this.open || event.relatedTarget)
+            return;
+        requestAnimationFrame(() => {
+            if (document.hasFocus())
+                this.ensureFocusInside();
+        });
+    };
+    /** Focus inside the open dialog, unless it is already there. */
+    ensureFocusInside() {
+        const dialog = this.dialog;
+        if (!this.open || !dialog?.isConnected || !dialog.open)
+            return;
+        if (dialog.matches(':focus-within'))
+            return;
+        const [first] = getFocusableElements(dialog);
+        (first ?? dialog).focus();
+    }
+    closeDialog() {
+        const dialog = this.dialog;
+        this.unlockScroll();
+        if (dialog?.open)
+            dialog.close();
+    }
+    /** Fires on Escape. Blocking it is how a non-dismissable modal stays put. */
+    onCancel = (event) => {
+        if (!this.dismissable) {
+            event.preventDefault();
+            return;
+        }
+        // Let it close; `close` does the state mirroring.
+    };
+    /**
+     * Mirrors a close the browser made — Escape, or the dialog being closed by
+     * anything other than this element — back into `open`, which then announces
+     * it through the watch above.
+     */
+    onClose = () => {
+        this.unlockScroll();
+        if (this.open)
+            this.open = false;
+    };
+    /**
+     * A click on the dialog element itself is a click on the overlay: the panel
+     * is an inner box, so anything landing on the dialog missed the content.
+     */
+    onDialogClick = (event) => {
+        if (!this.dismissable || event.target !== this.dialog)
+            return;
+        this.open = false;
+    };
+    accessibleName() {
+        if (this.label)
+            return this.label;
+        const text = this.el.textContent?.trim();
+        return text ? text.slice(0, 120) : undefined;
+    }
+    render() {
+        return (h(Host, { key: 'bf6b14acf276e7e327dad4e2adb0759c5371caa0' }, h("dialog", { key: 'fa8836858cd2ac18fe270c860671e77f5f9f6b93', part: "dialog", class: "dialog", "aria-label": this.accessibleName(), onCancel: this.onCancel, onFocusout: this.onFocusOut, onClose: this.onClose, onClick: this.onDialogClick }, h("div", { key: '6bfce72c9c19619388b93e3385b2fa8fe8fecc8e', class: "panel", part: "panel" }, this.showCloseButton && (h("button", { key: 'f11faa39f8854d5dd6854bb3c6e8e8e2f1abc6e3', class: "close", part: "close", type: "button", "aria-label": "Close", onClick: () => this.hide() }, h("svg", { key: '7530bfc0821a2d09e6045589cbbf2d390e8c6897', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, h("path", { key: '74c4d8385baa9776cfdf23570f46fd1621bd3fa2', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))), h("slot", { key: 'd11d9ae0716dc7f846ea05dc24689f0c6465057d' })))));
+    }
+    static get is() { return "pf-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is showing. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfModalSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "PfModalSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-modal/pf-modal.tsx",
+                            "id": "src/components/pf-modal/pf-modal.tsx::PfModalSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel width. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name. Falls back to the text of whatever is slotted, which is\nusually the header \u2014 `aria-labelledby` cannot be used, because an IDREF\ndoes not cross a shadow boundary and the header is in the light DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on Escape or a click on the overlay. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the corner close button. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the modal opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the modal.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the modal.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+}
+//# sourceMappingURL=pf-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["../../../src/components/pf-modal/pf-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableElements, lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfModalSize = 'sm' | 'md' | 'lg';\n\n/**\n * A modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, which from inside a shadow\n * root gives the focus trap, Escape and the backdrop for nothing — all\n * measured: focus cannot be taken by a light-DOM button, and a real Escape\n * fires `cancel` then `close`. So `trapFocus` from core is not needed here,\n * unlike in the React component.\n *\n * The one part of `showModal()` that cannot be relied on is where it puts\n * focus, and the gap is exactly the case every framework consumer is in. See\n * `showDialog` below.\n *\n * What `showModal()` does *not* do is lock page scroll — measured: a real\n * wheel still scrolled the page behind an open modal — so this element locks\n * it, exactly as the React component does.\n *\n * @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and\n * `pf-modal-footer`.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the bordered box the content sits in.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-modal',\n  styleUrl: 'pf-modal.css',\n  shadow: true,\n})\nexport class PfModal {\n  @Element() el!: HTMLElement;\n\n  /** Whether the modal is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfModalSize = 'md';\n\n  /**\n   * Accessible name. Falls back to the text of whatever is slotted, which is\n   * usually the header — `aria-labelledby` cannot be used, because an IDREF\n   * does not cross a shadow boundary and the header is in the light DOM.\n   */\n  @Prop() label?: string;\n\n  /** Close on Escape or a click on the overlay. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Render the corner close button. Defaults to true. */\n  @Prop() showCloseButton = true;\n\n  /** Fires whenever the modal opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Releases the page-scroll lock, or null when this modal does not hold it.\n   * The lock is core's and reference-counted, so a slideout opening over a\n   * modal cannot leave the page unscrollable.\n   */\n  private releaseScroll: (() => void) | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // A modal removed while open would otherwise leave the page unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the modal. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it: `show()`,\n   * the close button, Escape, an overlay click, or a consumer writing the prop.\n   *\n   * The first version emitted from the `close` handler alone, which fired for\n   * every close and for no open — caught by its own test. A consumer mirroring\n   * this value back sets `open` to what it already is, which Stencil does not\n   * treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  /**\n   * Opens the dialog, and makes sure focus actually went into it.\n   *\n   * `showModal()` focuses the dialog or its first focusable descendant — but\n   * **not** when light-DOM children were appended in the same task as the\n   * open. Measured in Chromium with no framework involved: append the three\n   * `pf-modal-*` sections to a long-mounted `pf-modal` and set `open` in the\n   * same task, and the dialog opens with `document.activeElement` still on\n   * `<body>` and `:focus-within` false. Leave one frame between the two and\n   * focus lands inside; mount the element with its children and `open`\n   * already set and focus lands inside. So it is the append racing the open,\n   * and the flattened tree `showModal()`'s focusing steps read.\n   *\n   * That race is not an edge case: React, Angular and Vue all commit a\n   * modal's content and its `open` in one go, so every framework consumer got\n   * an open modal with focus outside it and nothing to say so — the page is\n   * still inert, so the only symptom is that a reader is not taken to the\n   * dialog and the first Tab is needed. Porting `apps/demo` is what found it.\n   *\n   * What the trace shows, with element identity and a `MutationObserver` on\n   * the shadow root: `showModal()` **does** focus, onto `div[part=panel]`,\n   * and one frame later a `focusout` with `relatedTarget: null` drops it,\n   * with nothing removed from the shadow root. That is Chromium's focus\n   * fixup running once the appended children are assigned to the slot and\n   * finding the panel is no longer a valid target -- so it is not a render\n   * that loses focus, and re-asserting after a render does not catch it\n   * (measured: `componentDidRender` alone changes nothing here).\n   *\n   * So the dialog watches for exactly that: a `focusout` that goes nowhere\n   * while the modal is open puts focus back. `requestAnimationFrame` after\n   * `showModal()` covers the case where focus never arrived at all, and\n   * `componentDidRender` covers a render that discards the focused node. All\n   * three are the same guarded call, and the `:focus-within` guard makes it a\n   * no-op whenever focus is already inside -- so none of them moves focus\n   * that the platform or a consumer placed.\n   */\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n    requestAnimationFrame(() => this.ensureFocusInside());\n  }\n\n  componentDidRender() {\n    this.ensureFocusInside();\n  }\n\n  /**\n   * Focus left the dialog for nothing while it is open, which the platform\n   * does when its focus fixup runs after the slotted content changes.\n   *\n   * `relatedTarget` is the test: a Tab or a click inside names where focus\n   * went, and a modal dialog means it cannot have gone outside. The window\n   * losing focus also reports null, hence the `document.hasFocus()` guard --\n   * without it, switching tabs would pull focus back on return.\n   */\n  private onFocusOut = (event: FocusEvent) => {\n    if (!this.open || event.relatedTarget) return;\n    requestAnimationFrame(() => {\n      if (document.hasFocus()) this.ensureFocusInside();\n    });\n  };\n\n  /** Focus inside the open dialog, unless it is already there. */\n  private ensureFocusInside() {\n    const dialog = this.dialog;\n    if (!this.open || !dialog?.isConnected || !dialog.open) return;\n    if (dialog.matches(':focus-within')) return;\n    const [first] = getFocusableElements(dialog);\n    (first ?? dialog).focus();\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  /** Fires on Escape. Blocking it is how a non-dismissable modal stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) {\n      event.preventDefault();\n      return;\n    }\n    // Let it close; `close` does the state mirroring.\n  };\n\n  /**\n   * Mirrors a close the browser made — Escape, or the dialog being closed by\n   * anything other than this element — back into `open`, which then announces\n   * it through the watch above.\n   */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog element itself is a click on the overlay: the panel\n   * is an inner box, so anything landing on the dialog missed the content.\n   */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private accessibleName() {\n    if (this.label) return this.label;\n    const text = this.el.textContent?.trim();\n    return text ? text.slice(0, 120) : undefined;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.accessibleName()}\n          onCancel={this.onCancel}\n          onFocusout={this.onFocusOut}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {this.showCloseButton && (\n              <button\n                class=\"close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={() => this.hide()}\n              >\n                <svg\n                  viewBox=\"0 0 16 16\"\n                  width=\"16\"\n                  height=\"16\"\n                  aria-hidden=\"true\"\n                  focusable=\"false\"\n                >\n                  <path\n                    d=\"M4 4l8 8M12 4l-8 8\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.6\"\n                    stroke-linecap=\"round\"\n                    fill=\"none\"\n                  />\n                </svg>\n              </button>\n            )}\n            <slot />\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-modal-body/pf-modal-body.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+  overflow: auto;
+  padding: var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-modal-body/pf-modal-body.js

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The body section of a `pf-modal`.
+ *
+ * A separate element rather than a named slot, for the reason `pf-card` gives:
+ * a named slot would need emptiness detection or leave a padded, bordered
+ * strip when nothing was slotted into it.
+ *
+ * @slot - the section's content.
+ */
+export class PfModalBody {
+    render() {
+        return (h(Host, { key: 'da6957ef1b1462d731e4f7c6272a99ea4f9e8869' }, h("slot", { key: 'a06152e56c3408e56fe86a71f0672ddf8fb0c9ce' })));
+    }
+    static get is() { return "pf-modal-body"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-modal-body.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-modal-body.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-modal-body.js.map

package/dist/collection/components/pf-modal-body/pf-modal-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-modal-body.js","sourceRoot":"","sources":["../../../src/components/pf-modal-body/pf-modal-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The body section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-body',\n  styleUrl: 'pf-modal-body.css',\n  shadow: true,\n})\nexport class PfModalBody {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-modal-footer/pf-modal-footer.css

@@ -0,0 +1,11 @@
+:host {
+  border-top: 1px solid var(--pf-modal-border);
+  display: flex;
+  gap: var(--space-2);
+  justify-content: flex-end;
+  padding: var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-modal-footer/pf-modal-footer.js

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The footer section of a `pf-modal`.
+ *
+ * A separate element rather than a named slot, for the reason `pf-card` gives:
+ * a named slot would need emptiness detection or leave a padded, bordered
+ * strip when nothing was slotted into it.
+ *
+ * @slot - the section's content.
+ */
+export class PfModalFooter {
+    render() {
+        return (h(Host, { key: '435da74561bd7d3c7ffa98169048cda6832fe092' }, h("slot", { key: '67fc15dd9d746e0bafab9126baf0438b20c249f6' })));
+    }
+    static get is() { return "pf-modal-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-modal-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-modal-footer.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-modal-footer.js.map

package/dist/collection/components/pf-modal-footer/pf-modal-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-modal-footer.js","sourceRoot":"","sources":["../../../src/components/pf-modal-footer/pf-modal-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The footer section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-footer',\n  styleUrl: 'pf-modal-footer.css',\n  shadow: true,\n})\nexport class PfModalFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-modal-header/pf-modal-header.css

@@ -0,0 +1,10 @@
+:host {
+  border-bottom: 1px solid var(--pf-modal-border);
+  display: block;
+  /* Room for the close button, which is positioned over this corner. */
+  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-modal-header/pf-modal-header.js

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The header section of a `pf-modal`.
+ *
+ * A separate element rather than a named slot, for the reason `pf-card` gives:
+ * a named slot would need emptiness detection or leave a padded, bordered
+ * strip when nothing was slotted into it.
+ *
+ * @slot - the section's content.
+ */
+export class PfModalHeader {
+    render() {
+        return (h(Host, { key: 'd1ad25bd827a394611dec0358cba02bd73bbb104' }, h("slot", { key: '4fe7116e3e9413e3b997cfaa92c97c245fc7a0b9' })));
+    }
+    static get is() { return "pf-modal-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-modal-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-modal-header.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-modal-header.js.map

package/dist/collection/components/pf-modal-header/pf-modal-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-modal-header.js","sourceRoot":"","sources":["../../../src/components/pf-modal-header/pf-modal-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The header section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-header',\n  styleUrl: 'pf-modal-header.css',\n  shadow: true,\n})\nexport class PfModalHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}