@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-content-divider/pf-content-divider.js

@@ -0,0 +1,121 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A rule that separates content, optionally labelled.
+ *
+ * @slot - the divider's label. Leave it empty for a plain rule; the element
+ * notices either way and lays the rule out accordingly. Ignored when
+ * `orientation` is `vertical`, which has nowhere to put a label.
+ *
+ * @part line - each of the two rule segments either side of the label, or the
+ * single segment when there is no label.
+ * @part label - the wrapper around the slotted label.
+ */
+export class PfContentDivider {
+    el;
+    /** Reflected so the stylesheet can select on it. */
+    orientation = 'horizontal';
+    /** Pad the divider horizontally. Reflected so the stylesheet can select on it. */
+    inset = false;
+    /**
+     * Whether anything is slotted. Drives the layout: a labelled divider is
+     * rule-label-rule, an unlabelled one is a single rule. It cannot be a `@Prop`
+     * because the consumer never states it — the presence of slotted content is
+     * the statement, and that can change after first render.
+     */
+    hasLabel = false;
+    componentWillLoad() {
+        this.syncLabel();
+    }
+    /**
+     * Reads the light DOM rather than the slot's `assignedNodes()`. Both give the
+     * same answer for a single default slot, but the light DOM can be read before
+     * first render, so the divider lays out correctly on its first paint instead
+     * of flickering from unlabelled to labelled once `slotchange` lands. It is
+     * also the only one of the two that Stencil's mock DOM implements.
+     *
+     * A whitespace-only text node is what a formatter leaves behind in
+     * `<pf-content-divider>\n</pf-content-divider>`, and it is not a label.
+     */
+    syncLabel = () => {
+        this.hasLabel = Array.from(this.el.childNodes).some((node) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return Boolean(node.textContent?.trim());
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return false;
+            // Anything aimed at a named slot this element does not have is not a label.
+            return !node.getAttribute('slot');
+        });
+    };
+    render() {
+        return (h(Host, { key: 'dc7c5a43b2f356b553628a4de6a987ecc217fc5e', role: "separator", "aria-orientation": this.orientation }, h("span", { key: 'cdab9e57ebf9d2e00952b519f0767e45c3898db9', part: "line", class: "line", "aria-hidden": "true" }), h("span", { key: '23ff0f23cb3534d200d8f5a3da8651bd3fd0a7c1', part: "label", class: { label: true, 'label--empty': !this.hasLabel } }, h("slot", { key: '8d3cdb5015572a426c999b09478a5ba38fc1a6f9', onSlotchange: this.syncLabel })), h("span", { key: '3d1984591ba428163514b1f85a1ed3637cc9534a', part: "line", class: { line: true, 'line--hidden': !this.hasLabel }, "aria-hidden": "true" })));
+    }
+    static get is() { return "pf-content-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-content-divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-content-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfContentDividerOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfContentDividerOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-content-divider/pf-content-divider.tsx",
+                            "id": "src/components/pf-content-divider/pf-content-divider.tsx::PfContentDividerOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "inset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pad the divider horizontally. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inset",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLabel": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-content-divider.js.map

package/dist/collection/components/pf-content-divider/pf-content-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-content-divider.js","sourceRoot":"","sources":["../../../src/components/pf-content-divider/pf-content-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,gBAAgB;IAChB,EAAE,CAAe;IAE5B,oDAAoD;IAC3B,WAAW,GAAgC,YAAY,CAAC;IAEjF,kFAAkF;IACzD,KAAK,GAAG,KAAK,CAAC;IAEvC;;;;;OAKG;IACM,QAAQ,GAAG,KAAK,CAAC;IAE1B,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;;;;;;;;OASG;IACK,SAAS,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3D,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;gBAAE,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;YAC/E,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBAAE,OAAO,KAAK,CAAC;YACtD,4EAA4E;YAC5E,OAAO,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW,sBAAmB,IAAI,CAAC,WAAW;YACvD,6DAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,iBAAa,MAAM,GAAG;YACpD,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACvE,6DAAM,YAAY,EAAE,IAAI,CAAC,SAAS,GAAI,CACjC;YACP,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,iBACzC,MAAM,GAClB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfContentDividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule that separates content, optionally labelled.\n *\n * @slot - the divider's label. Leave it empty for a plain rule; the element\n * notices either way and lays the rule out accordingly. Ignored when\n * `orientation` is `vertical`, which has nowhere to put a label.\n *\n * @part line - each of the two rule segments either side of the label, or the\n * single segment when there is no label.\n * @part label - the wrapper around the slotted label.\n */\n@Component({\n  tag: 'pf-content-divider',\n  styleUrl: 'pf-content-divider.css',\n  shadow: true,\n})\nexport class PfContentDivider {\n  @Element() el!: HTMLElement;\n\n  /** Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfContentDividerOrientation = 'horizontal';\n\n  /** Pad the divider horizontally. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) inset = false;\n\n  /**\n   * Whether anything is slotted. Drives the layout: a labelled divider is\n   * rule-label-rule, an unlabelled one is a single rule. It cannot be a `@Prop`\n   * because the consumer never states it — the presence of slotted content is\n   * the statement, and that can change after first render.\n   */\n  @State() hasLabel = false;\n\n  componentWillLoad() {\n    this.syncLabel();\n  }\n\n  /**\n   * Reads the light DOM rather than the slot's `assignedNodes()`. Both give the\n   * same answer for a single default slot, but the light DOM can be read before\n   * first render, so the divider lays out correctly on its first paint instead\n   * of flickering from unlabelled to labelled once `slotchange` lands. It is\n   * also the only one of the two that Stencil's mock DOM implements.\n   *\n   * A whitespace-only text node is what a formatter leaves behind in\n   * `<pf-content-divider>\\n</pf-content-divider>`, and it is not a label.\n   */\n  private syncLabel = () => {\n    this.hasLabel = Array.from(this.el.childNodes).some((node) => {\n      if (node.nodeType === Node.TEXT_NODE) return Boolean(node.textContent?.trim());\n      if (node.nodeType !== Node.ELEMENT_NODE) return false;\n      // Anything aimed at a named slot this element does not have is not a label.\n      return !(node as Element).getAttribute('slot');\n    });\n  };\n\n  render() {\n    return (\n      <Host role=\"separator\" aria-orientation={this.orientation}>\n        <span part=\"line\" class=\"line\" aria-hidden=\"true\" />\n        <span part=\"label\" class={{ label: true, 'label--empty': !this.hasLabel }}>\n          <slot onSlotchange={this.syncLabel} />\n        </span>\n        <span\n          part=\"line\"\n          class={{ line: true, 'line--hidden': !this.hasLabel }}\n          aria-hidden=\"true\"\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-context-menu/pf-context-menu.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * The generic set pf-menu-item and pf-menu-separator read, mapped to this
+ * menu's own alias family — see pf-menu-item.css. The same item element is
+ * themed by whichever container it is slotted into.
+ */
+:host {
+  --pf-menu-text: var(--pf-contextmenu-text);
+  --pf-menu-text-muted: var(--pf-contextmenu-text-muted);
+  --pf-menu-text-danger: var(--pf-contextmenu-text-danger);
+  --pf-menu-item-active-bg: var(--pf-contextmenu-item-active-bg);
+  --pf-menu-separator: var(--pf-contextmenu-separator);
+}
+
+/*
+ * `inset: auto` and `margin: 0` are essential, not tidying -- see
+ * `src/place-popover.ts`, which sets the same two inline and explains the
+ * measurement. They are declared in both places deliberately: here so the
+ * cascade carries them for the whole life of the panel, and inline so a panel
+ * is still positioned where this stylesheet has not been applied.
+ */
+.menu {
+  inset: auto;
+  margin: 0;
+  background: var(--pf-contextmenu-bg);
+  border: 1px solid var(--pf-contextmenu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  max-height: min(60vh, 420px);
+  min-width: 180px;
+  overflow: auto;
+  padding: var(--space-1);
+}
+
+.menu:popover-open {
+  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu:popover-open {
+    animation: none;
+  }
+}

package/dist/collection/components/pf-context-menu/pf-context-menu.js

@@ -0,0 +1,331 @@
+import { clampToViewport, Keys, resolveListMove, resolveRovingKey, syncRovingTabIndex, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+import { placePopover } from "../../place-popover";
+/**
+ * A menu opened by right-clicking the region it wraps.
+ *
+ * Unlike `pf-dropdown` there is no anchor element — the menu opens at the
+ * pointer — so it is placed with core's `clampToViewport` rather than the
+ * anchoring observer. The same `pf-menu-item` children serve both.
+ *
+ * @slot - the region that responds to a right-click.
+ * @slot menu - `pf-menu-item` and `pf-menu-separator` children.
+ * @part menu - the floating menu panel.
+ */
+export class PfContextMenu {
+    el;
+    /** Whether the menu is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Accessible name for the menu. */
+    label = 'Context menu';
+    /**
+     * Let the browser's own context menu through instead. Reflected so the
+     * stylesheet can select on it.
+     */
+    disabled = false;
+    /** Fires whenever the menu opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** Fires with the chosen item's value. The menu closes itself afterwards. */
+    pfSelect;
+    /** Where the menu was asked to appear, in client coordinates. */
+    point = { x: 0, y: 0 };
+    /** See pf-popover: the watch is the one place every path passes through. */
+    syncOpen(next, previous) {
+        if (next)
+            this.showMenu();
+        else
+            this.hideMenu();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** Opens the menu at a point in client coordinates. */
+    async showAt(x, y) {
+        if (this.disabled)
+            return;
+        this.point = { x, y };
+        this.open = true;
+    }
+    /** Closes the menu. */
+    async hide() {
+        this.open = false;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="menu"]') ?? null;
+    }
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-menu-item'));
+    }
+    get enabledItems() {
+        return this.items.filter((item) => !item.hasAttribute('disabled'));
+    }
+    showMenu() {
+        const panel = this.panel;
+        if (!panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        /*
+         * Measured after showing, because a closed popover has no size and the
+         * clamp needs one. Pinned rather than flipped: the pointer is already
+         * where the user is looking.
+         */
+        const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+        placePopover(panel, x, y);
+        const first = this.enabledItems[0];
+        syncRovingTabIndex(this.enabledItems, first);
+        first?.focus();
+    }
+    hideMenu() {
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    handleContextMenu(event) {
+        if (this.disabled || event.defaultPrevented)
+            return;
+        // Only inside the region, not over the menu itself once it is showing.
+        const panel = this.panel;
+        if (panel && event.composedPath().includes(panel))
+            return;
+        event.preventDefault();
+        this.point = { x: event.clientX, y: event.clientY };
+        if (this.open) {
+            // Already showing: move it to the new point rather than ignoring.
+            this.showMenuAtNewPoint();
+            return;
+        }
+        this.open = true;
+    }
+    /** A second right-click moves the open menu, which `showMenu` would skip. */
+    showMenuAtNewPoint() {
+        const panel = this.panel;
+        if (!panel)
+            return;
+        const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+        placePopover(panel, x, y);
+    }
+    handleMenuSelect(event) {
+        event.stopPropagation();
+        this.pfSelect.emit({ value: event.detail.value });
+        this.open = false;
+    }
+    handleKeyDown(event) {
+        if (!this.open || event.defaultPrevented)
+            return;
+        if (event.key === Keys.Escape) {
+            event.stopPropagation();
+            this.open = false;
+            return;
+        }
+        const action = resolveRovingKey(event.key, 'vertical');
+        if (!action)
+            return;
+        const items = this.enabledItems;
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        const nextIndex = resolveListMove(action, items.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        syncRovingTabIndex(items, items[nextIndex]);
+        items[nextIndex].focus();
+    }
+    onToggle = (event) => {
+        const next = event.newState === 'open';
+        if (next !== this.open)
+            this.open = next;
+    };
+    render() {
+        return (h(Host, { key: 'b515df27fd68d157ed44b099c35a8e923054a270' }, h("slot", { key: 'c406f292f30ab4db1aa9708b11b0f6be8378519f' }), h("div", { key: 'dd1838ec80b5702137e15f5e3a65404d83f893e3', class: "menu", part: "menu", popover: "auto", role: "menu", "aria-label": this.label, onToggle: this.onToggle }, h("slot", { key: '92fd279e9a59db8042b5e7f9d18df213c3b022fa', name: "menu" }))));
+    }
+    static get is() { return "pf-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-context-menu.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 menu is showing. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Context menu'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Let the browser's own context menu through instead. Reflected so the\nstylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the menu opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfSelect",
+                "name": "pfSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the chosen item's value. The menu closes itself afterwards."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showAt": {
+                "complexType": {
+                    "signature": "(x: number, y: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "x",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "y",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the menu at a point in client coordinates.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the menu.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "contextmenu",
+                "method": "handleContextMenu",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pfMenuSelect",
+                "method": "handleMenuSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-context-menu.js.map

package/dist/collection/components/pf-context-menu/pf-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-context-menu.js","sourceRoot":"","sources":["../../../src/components/pf-context-menu/pf-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,IAAI,EACJ,eAAe,EACf,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,aAAa;IACb,EAAE,CAAe;IAE5B,iFAAiF;IACzC,IAAI,GAAG,KAAK,CAAC;IAErD,oCAAoC;IAC5B,KAAK,GAAG,cAAc,CAAC;IAE/B;;;OAGG;IACsB,QAAQ,GAAG,KAAK,CAAC;IAE1C,kEAAkE;IACzD,YAAY,CAAmC;IAExD,6EAA6E;IACpE,QAAQ,CAAmC;IAEpD,iEAAiE;IACzD,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAE/B,4EAA4E;IAE5E,QAAQ,CAAC,IAAa,EAAE,QAAiB;QACvC,IAAI,IAAI;YAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;YACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACrB,IAAI,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,uDAAuD;IAEvD,KAAK,CAAC,MAAM,CAAC,CAAS,EAAE,CAAS;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,uBAAuB;IAEvB,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAc,eAAe,CAAC,IAAI,IAAI,CAAC;IACjF,CAAC;IAED,IAAY,KAAK;QACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,cAAc,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;IACrE,CAAC;IAEO,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;YAAE,OAAO;QAErD,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB;;;;WAIG;QACH,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAAE;YAC1E,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1B,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACnC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC7C,KAAK,EAAE,KAAK,EAAE,CAAC;IACjB,CAAC;IAEO,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;YAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,CAAC;IAGD,iBAAiB,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QACpD,uEAAuE;QACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,KAAK,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YAAE,OAAO;QAE1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACpD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,kEAAkE;YAClE,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,6EAA6E;IACrE,kBAAkB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAAE;YAC1E,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5B,CAAC;IAGD,gBAAgB,CAAC,KAAqC;QACpD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QAEjD,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;QAC1E,MAAM,SAAS,GAAG,eAAe,CAC/B,MAAM,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAC9B,YAAY,CACb,CAAC;QACF,IAAI,SAAS,GAAG,CAAC;YAAE,OAAO;QAE1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;QAC5C,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAEO,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;QAClC,MAAM,IAAI,GAAI,KAAqB,CAAC,QAAQ,KAAK,MAAM,CAAC;QACxD,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ;YACR,4DACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  clampToViewport,\n  Keys,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { placePopover } from '../../place-popover';\n\n/**\n * A menu opened by right-clicking the region it wraps.\n *\n * Unlike `pf-dropdown` there is no anchor element — the menu opens at the\n * pointer — so it is placed with core's `clampToViewport` rather than the\n * anchoring observer. The same `pf-menu-item` children serve both.\n *\n * @slot - the region that responds to a right-click.\n * @slot menu - `pf-menu-item` and `pf-menu-separator` children.\n * @part menu - the floating menu panel.\n */\n@Component({\n  tag: 'pf-context-menu',\n  styleUrl: 'pf-context-menu.css',\n  shadow: true,\n})\nexport class PfContextMenu {\n  @Element() el!: HTMLElement;\n\n  /** Whether the menu is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Accessible name for the menu. */\n  @Prop() label = 'Context menu';\n\n  /**\n   * Let the browser's own context menu through instead. Reflected so the\n   * stylesheet can select on it.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires whenever the menu opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's value. The menu closes itself afterwards. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  /** Where the menu was asked to appear, in client coordinates. */\n  private point = { x: 0, y: 0 };\n\n  /** See pf-popover: the watch is the one place every path passes through. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showMenu();\n    else this.hideMenu();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the menu at a point in client coordinates. */\n  @Method()\n  async showAt(x: number, y: number): Promise<void> {\n    if (this.disabled) return;\n    this.point = { x, y };\n    this.open = true;\n  }\n\n  /** Closes the menu. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"menu\"]') ?? null;\n  }\n\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-menu-item'));\n  }\n\n  private get enabledItems(): HTMLElement[] {\n    return this.items.filter((item) => !item.hasAttribute('disabled'));\n  }\n\n  private showMenu() {\n    const panel = this.panel;\n    if (!panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    /*\n     * Measured after showing, because a closed popover has no size and the\n     * clamp needs one. Pinned rather than flipped: the pointer is already\n     * where the user is looking.\n     */\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n\n    const first = this.enabledItems[0];\n    syncRovingTabIndex(this.enabledItems, first);\n    first?.focus();\n  }\n\n  private hideMenu() {\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('contextmenu')\n  handleContextMenu(event: MouseEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n    // Only inside the region, not over the menu itself once it is showing.\n    const panel = this.panel;\n    if (panel && event.composedPath().includes(panel)) return;\n\n    event.preventDefault();\n    this.point = { x: event.clientX, y: event.clientY };\n    if (this.open) {\n      // Already showing: move it to the new point rather than ignoring.\n      this.showMenuAtNewPoint();\n      return;\n    }\n    this.open = true;\n  }\n\n  /** A second right-click moves the open menu, which `showMenu` would skip. */\n  private showMenuAtNewPoint() {\n    const panel = this.panel;\n    if (!panel) return;\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n  }\n\n  @Listen('pfMenuSelect')\n  handleMenuSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.defaultPrevented) return;\n\n    if (event.key === Keys.Escape) {\n      event.stopPropagation();\n      this.open = false;\n      return;\n    }\n\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const items = this.enabledItems;\n    if (items.length === 0) return;\n\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    syncRovingTabIndex(items, items[nextIndex]);\n    items[nextIndex].focus();\n  }\n\n  private onToggle = (event: Event) => {\n    const next = (event as ToggleEvent).newState === 'open';\n    if (next !== this.open) this.open = next;\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          class=\"menu\"\n          part=\"menu\"\n          popover=\"auto\"\n          role=\"menu\"\n          aria-label={this.label}\n          onToggle={this.onToggle}\n        >\n          <slot name=\"menu\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-credit-card/pf-credit-card.css

@@ -0,0 +1,118 @@
+/*
+ * The --pf-credit-card-* colours live in theme.css rather than here, so a
+ * scoped override (Storybook's CSS-variable controls, a consumer theming one
+ * card) still reaches them by inheritance through the shadow boundary.
+ */
+:host {
+  aspect-ratio: 1.586;
+  border: 1px solid var(--pf-credit-card-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  color: var(--pf-credit-card-text-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 100%;
+  min-height: 200px;
+  padding: var(--space-4);
+  position: relative;
+  width: 340px;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * The React library draws this with `.pf-credit-card::before`. Here it is a
+ * real element, so its position in the stacking order against the `z-index: 1`
+ * content below is explicit rather than resting on how a host pseudo-element
+ * participates in the shadow tree.
+ */
+.glare {
+  background: radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);
+  border-radius: inherit;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+:host([brand='generic']) {
+  background: var(--pf-credit-card-generic-gradient);
+}
+
+:host([brand='visa']) {
+  background: var(--pf-credit-card-visa-gradient);
+}
+
+:host([brand='mastercard']) {
+  background: var(--pf-credit-card-mastercard-gradient);
+}
+
+:host([brand='amex']) {
+  background: var(--pf-credit-card-amex-gradient);
+}
+
+.top-row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.chip {
+  background: var(--pf-credit-card-chip-gradient);
+  border-radius: 4px;
+  display: inline-flex;
+  height: 28px;
+  width: 38px;
+}
+
+.brand,
+.number,
+.label,
+.value {
+  color: inherit;
+}
+
+.brand {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+}
+
+.number {
+  font-size: clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  line-height: 1.25;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.meta {
+  display: flex;
+  gap: var(--space-4);
+  position: relative;
+  z-index: 1;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.label {
+  font-size: var(--font-size-2xs);
+  letter-spacing: 0.08em;
+  opacity: 0.85;
+  text-transform: uppercase;
+}
+
+.value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}