@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-metric-card/pf-metric-card.js

@@ -0,0 +1,128 @@
+import { h, Host } from "@stencil/core";
+/** The symbol each trend is drawn with, which is decorative either way. */
+const TREND_SYMBOL = {
+    positive: '+',
+    negative: '-',
+    neutral: '=',
+};
+/**
+ * One figure worth looking at: a heading, the number, and optionally how it
+ * has moved.
+ *
+ * @slot heading - what the number is.
+ * @slot - the number.
+ * @slot trend - how it has moved, shown as a pill beside the number.
+ * @slot description - a line below the number.
+ * @slot icon - a small icon beside the heading.
+ * @slot action - a control in the card's top corner.
+ * @part header - the row holding the heading and the action.
+ * @part heading - the heading's box.
+ * @part icon - the icon's box.
+ * @part action - the box holding the action slot.
+ * @part body - the row holding the number and the trend.
+ * @part value - the number's box.
+ * @part trend - the trend pill.
+ */
+export class PfMetricCard {
+    el;
+    /** Which way the trend reads. Reflected so the stylesheet can colour it. */
+    trend = 'neutral';
+    /** An icon name from the same registry as `pf-icon`. */
+    icon;
+    /**
+     * Which of the optional slots have anything in them.
+     *
+     * Asked in JS because each of these three carries layout — a row, a pill —
+     * that its content cannot, and a wrapper around a slot cannot be collapsed
+     * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a
+     * child. The description needs no box, so it is styled through `::slotted()`
+     * and collapses on its own.
+     */
+    hasIcon = false;
+    hasAction = false;
+    hasTrend = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasIcon = slotted('icon');
+        this.hasAction = slotted('action');
+        this.hasTrend = slotted('trend');
+    };
+    render() {
+        const showIcon = this.hasIcon || Boolean(this.icon);
+        return (h(Host, { key: 'f0080f6c50f8b6f305f7ba95ee141d44bb3525eb' }, h("div", { key: 'cf60ec686ecb6a0332333c0be121ec25c74f2c33', class: "header", part: "header" }, h("div", { key: 'f7ec949ba8c658cda28be64f2621a367a0940c69', class: "heading-wrap" }, h("p", { key: '36fb4bac641a685fc4ccb14f0149c64b4ca39086', class: "heading", part: "heading" }, h("slot", { key: '07d7e7fe3e280d81b5355054dc68897e32d79208', name: "heading" })), h("span", { key: '47ab4af87d3579281de4b03d9342d8a103a6347b', class: { icon: true, empty: !showIcon }, part: "icon", "aria-hidden": "true" }, this.icon && !this.hasIcon && h("pf-icon", { key: '0405bc2d5771976075019cbd771f6c9d5e292756', name: this.icon }), h("slot", { key: 'f40c6534905851d680e35ec2787571cc23d955b7', name: "icon", onSlotchange: this.read }))), h("span", { key: 'd562acc9b5ed5797c07d1240fb3e68c25166e8df', class: { action: true, empty: !this.hasAction }, part: "action" }, h("slot", { key: '036b278bd1f5d4a6aa8592dbdf801f4cee1f2e69', name: "action", onSlotchange: this.read }))), h("div", { key: '54725ad239175914a1c2dc5da6c240a3591f3d05', class: "body", part: "body" }, h("p", { key: 'dad5ea0763235663ec0dab48739d4773a2442bd8', class: "value", part: "value" }, h("slot", { key: 'b5cf390faf708ec25772c6734cd3296328b56849' })), h("span", { key: 'f52b7bd58efbcb33324ec6df991cc4174263fbe3', class: { trend: true, empty: !this.hasTrend }, part: "trend" }, h("span", { key: '9db49c651c30c5ca89832a3a7577cb1f97f10a85', class: "trend-symbol", "aria-hidden": "true" }, TREND_SYMBOL[this.trend] ?? TREND_SYMBOL.neutral), h("slot", { key: '9f7efb7e27d855a6d5e8c721a808f0aa005c2170', name: "trend", onSlotchange: this.read }))), h("slot", { key: '77e4e3c62b902087d674fb32edd9bdad7004524d', name: "description" })));
+    }
+    static get is() { return "pf-metric-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-metric-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-metric-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfMetricTrend",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
+                    "references": {
+                        "PfMetricTrend": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-metric-card/pf-metric-card.tsx",
+                            "id": "src/components/pf-metric-card/pf-metric-card.tsx::PfMetricTrend"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which way the trend reads. Reflected so the stylesheet can colour it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trend",
+                "defaultValue": "'neutral'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An icon name from the same registry as `pf-icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasAction": {},
+            "hasTrend": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-metric-card.js.map

package/dist/collection/components/pf-metric-card/pf-metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-metric-card.js","sourceRoot":"","sources":["../../../src/components/pf-metric-card/pf-metric-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfMetricTrend = 'positive' | 'negative' | 'neutral';\n\n/** The symbol each trend is drawn with, which is decorative either way. */\nconst TREND_SYMBOL: Record<PfMetricTrend, string> = {\n  positive: '+',\n  negative: '-',\n  neutral: '=',\n};\n\n/**\n * One figure worth looking at: a heading, the number, and optionally how it\n * has moved.\n *\n * @slot heading - what the number is.\n * @slot - the number.\n * @slot trend - how it has moved, shown as a pill beside the number.\n * @slot description - a line below the number.\n * @slot icon - a small icon beside the heading.\n * @slot action - a control in the card's top corner.\n * @part header - the row holding the heading and the action.\n * @part heading - the heading's box.\n * @part icon - the icon's box.\n * @part action - the box holding the action slot.\n * @part body - the row holding the number and the trend.\n * @part value - the number's box.\n * @part trend - the trend pill.\n */\n@Component({\n  tag: 'pf-metric-card',\n  styleUrl: 'pf-metric-card.css',\n  shadow: true,\n})\nexport class PfMetricCard {\n  @Element() el!: HTMLElement;\n\n  /** Which way the trend reads. Reflected so the stylesheet can colour it. */\n  @Prop({ reflect: true }) trend: PfMetricTrend = 'neutral';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /**\n   * Which of the optional slots have anything in them.\n   *\n   * Asked in JS because each of these three carries layout — a row, a pill —\n   * that its content cannot, and a wrapper around a slot cannot be collapsed\n   * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a\n   * child. The description needs no box, so it is styled through `::slotted()`\n   * and collapses on its own.\n   */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n  @State() hasTrend = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n    this.hasTrend = slotted('trend');\n  };\n\n  render() {\n    const showIcon = this.hasIcon || Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"header\" part=\"header\">\n          <div class=\"heading-wrap\">\n            <p class=\"heading\" part=\"heading\">\n              <slot name=\"heading\" />\n            </p>\n            {/*\n              Every one of these boxes stays in the tree and is hidden when\n              empty, rather than being left out: a slot that is not rendered\n              never fires `slotchange`, so content added later would stay\n              invisible for good.\n            */}\n            <span class={{ icon: true, empty: !showIcon }} part=\"icon\" aria-hidden=\"true\">\n              {this.icon && !this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n              <slot name=\"icon\" onSlotchange={this.read} />\n            </span>\n          </div>\n          <span class={{ action: true, empty: !this.hasAction }} part=\"action\">\n            <slot name=\"action\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <div class=\"body\" part=\"body\">\n          <p class=\"value\" part=\"value\">\n            <slot />\n          </p>\n          <span class={{ trend: true, empty: !this.hasTrend }} part=\"trend\">\n            {/* Decorative: the trend's direction is in its label and its colour. */}\n            <span class=\"trend-symbol\" aria-hidden=\"true\">\n              {TREND_SYMBOL[this.trend] ?? TREND_SYMBOL.neutral}\n            </span>\n            <slot name=\"trend\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <slot name=\"description\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-metric-grid/pf-metric-grid.css

@@ -0,0 +1,14 @@
+:host {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The cards have to be grid items of the host, not of a box inside it. */
+slot {
+  display: contents;
+}

package/dist/collection/components/pf-metric-grid/pf-metric-grid.js

@@ -0,0 +1,29 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A responsive grid of `pf-metric-card` children.
+ *
+ * Nothing but layout — the cards are independent, so there is no state to
+ * push down and no group behaviour to own. It exists because the column
+ * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than
+ * something a consumer should have to repeat.
+ *
+ * @slot - the `pf-metric-card` children.
+ */
+export class PfMetricGrid {
+    render() {
+        return (h(Host, { key: 'cd17f60b2f8f7b5c3e6e0b3d692100b2bf9e0984' }, h("slot", { key: 'f8f804e6e990e4a969637dc8acea9d761c6d466b' })));
+    }
+    static get is() { return "pf-metric-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-metric-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-metric-grid.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-metric-grid.js.map

package/dist/collection/components/pf-metric-grid/pf-metric-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-metric-grid.js","sourceRoot":"","sources":["../../../src/components/pf-metric-grid/pf-metric-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAMH,MAAM,OAAO,YAAY;IACvB,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 * A responsive grid of `pf-metric-card` children.\n *\n * Nothing but layout — the cards are independent, so there is no state to\n * push down and no group behaviour to own. It exists because the column\n * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than\n * something a consumer should have to repeat.\n *\n * @slot - the `pf-metric-card` children.\n */\n@Component({\n  tag: 'pf-metric-grid',\n  styleUrl: 'pf-metric-grid.css',\n  shadow: true,\n})\nexport class PfMetricGrid {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,94 @@
+:host {
+  display: contents;
+}
+
+/*
+ * The dialog is the overlay: it fills the viewport and centres the panel, so a
+ * click that lands on it rather than on the panel is an overlay click.
+ */
+.dialog {
+  align-items: center;
+  background: none;
+  border: 0;
+  display: none;
+  height: 100%;
+  justify-content: center;
+  max-height: 100%;
+  max-width: 100%;
+  padding: var(--space-4);
+  width: 100%;
+}
+
+.dialog[open] {
+  display: flex;
+}
+
+.dialog::backdrop {
+  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));
+}
+
+.panel {
+  background: var(--pf-modal-bg);
+  border: 1px solid var(--pf-modal-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  color: var(--pf-modal-text);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+:host([size='sm']) .panel {
+  max-width: 400px;
+}
+
+:host([size='md']) .panel {
+  max-width: 560px;
+}
+
+:host([size='lg']) .panel {
+  max-width: 800px;
+}
+
+.close {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-modal-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  inset-block-start: var(--space-3);
+  inset-inline-end: var(--space-3);
+  padding: var(--space-1);
+  position: absolute;
+}
+
+.close:hover {
+  color: var(--pf-modal-text);
+}
+
+.close:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.dialog[open] .panel {
+  animation: pf-modal-in var(--pf-transition-enter);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog[open] .panel {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,325 @@
+import { 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 moves inside on open and 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.
+ *
+ * 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;
+    }
+    showDialog() {
+        const dialog = this.dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this.lockScroll();
+    }
+    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: '4445c1692e0cdf8ea4243f031984d25c3fa35148' }, h("dialog", { key: '6a87d0181761644d8f9bc2d02ead398c10030668', part: "dialog", class: "dialog", "aria-label": this.accessibleName(), onCancel: this.onCancel, onClose: this.onClose, onClick: this.onDialogClick }, h("div", { key: '0ce7125e86b87d9fd834aee12491d384c0a47f7c', class: "panel", part: "panel" }, this.showCloseButton && (h("button", { key: 'e395307252b805932cdbebe2bc8e31178b8c8fb6', class: "close", part: "close", type: "button", "aria-label": "Close", onClick: () => this.hide() }, h("svg", { key: 'f83625e2e03e6c0e5f29aa1dd76dabab6011d27f', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, h("path", { key: 'fccb0dadc0442661f9300fdec4b36234124fcd93', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))), h("slot", { key: '8a01602089364eeeb8dfb4b8c1f9d6b48bc3f4a5' })))));
+    }
+    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": "/Users/lelandrangel/Development/lelandrangel.com/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":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAIvB;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,OAAO;IACP,EAAE,CAAe;IAE5B,kFAAkF;IAC1C,IAAI,GAAG,KAAK,CAAC;IAErD,iEAAiE;IACxC,IAAI,GAAgB,IAAI,CAAC;IAElD;;;;OAIG;IACK,KAAK,CAAU;IAEvB,mEAAmE;IAC3D,WAAW,GAAG,IAAI,CAAC;IAE3B,wDAAwD;IAChD,eAAe,GAAG,IAAI,CAAC;IAE/B,mEAAmE;IAC1D,YAAY,CAAmC;IAExD;;;;OAIG;IACK,aAAa,GAAwB,IAAI,CAAC;IAElD,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED,oBAAoB;QAClB,0EAA0E;QAC1E,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,uBAAuB;IAEvB,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,wBAAwB;IAExB,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;;;;;;OAQG;IAEH,QAAQ,CAAC,IAAa,EAAE,QAAiB;QACvC,IAAI,IAAI;YAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;YACvB,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,IAAI,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC;IAC7D,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QAC/B,IAAI,CAAC,aAAa,GAAG,cAAc,EAAE,CAAC;IACxC,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI;YAAE,OAAO;QACnC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,WAAW;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,MAAM,EAAE,IAAI;YAAE,MAAM,CAAC,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,6EAA6E;IACrE,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,kDAAkD;IACpD,CAAC,CAAC;IAEF;;;;OAIG;IACK,OAAO,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACnC,CAAC,CAAC;IAEF;;;OAGG;IACK,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAC9D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEM,cAAc;QACpB,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;QACzC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,gBACF,IAAI,CAAC,cAAc,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa;gBAE3B,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;oBAC5B,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,gBACF,OAAO,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;wBAE1B,4DACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,iBACC,MAAM,EAClB,SAAS,EAAC,OAAO;4BAEjB,6DACE,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,EACtB,IAAI,EAAC,MAAM,GACX,CACE,CACC,CACV;oBACD,8DAAQ,CACJ,CACC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { 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 moves inside on open and cannot be taken by a light-DOM\n * button, and a real Escape fires `cancel` then `close`. So `trapFocus` from\n * core is not needed here, unlike in the React component.\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  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\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          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;
+}