@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-pie-slice/pf-pie-slice.js

@@ -0,0 +1,155 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One slice of a `pf-pie-chart`, and its own row in the legend.
+ *
+ * The React `PieChart` takes a `data` array of `{ label, value, color }`; a
+ * slot renders its assigned content once and in one place, so there is no way
+ * for the chart's shadow root to build a legend out of labels that live in the
+ * light DOM. The slice renders its own row instead, which is the §2.1 idiom
+ * and lets a consumer put anything in a label.
+ *
+ * `swatch`, `share` and `drawn` are the chart's to set: only it can see the
+ * total.
+ *
+ * @slot - the slice's label.
+ * @part dot - the colour swatch.
+ * @part label - the label's box.
+ * @part value - the share, as a whole percentage.
+ */
+export class PfPieSlice {
+    /** How big the slice is, in whatever unit the chart's slices share. */
+    value = 0;
+    /** Overrides the palette colour the chart would give it. */
+    color;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch = '';
+    /** Set by the chart: this slice's share, as a whole percentage. */
+    share = 0;
+    /**
+     * Set by the chart: whether this slice is in the drawing at all.
+     *
+     * A slice of zero is not a wedge, so it is not a legend row either —
+     * otherwise the legend lists colours that appear nowhere in the chart.
+     * Reflected, because that is what the stylesheet hides it with.
+     */
+    drawn = false;
+    render() {
+        return (h(Host, { key: '122c85fbc58816acce27ac06547eb4f2adf63788', role: "listitem" }, h("span", { key: 'd2d41879c922a4b929b801e4e3b2add7227cd79f', class: "dot", part: "dot", "aria-hidden": "true", style: { background: this.swatch } }), h("span", { key: '46ea91d2d36a9269558548f0c2bc446b7d556467', class: "label", part: "label" }, h("slot", { key: 'd8eb86e569151c9b26de626e6dd6c08feee8da75' })), h("span", { key: 'cbf292f34e267cf4ff37bded7da86649d7ea9ed6', class: "value", part: "value" }, this.share, "%")));
+    }
+    static get is() { return "pf-pie-slice"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-pie-slice.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-pie-slice.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How big the slice is, in whatever unit the chart's slices share."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the palette colour the chart would give it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color"
+            },
+            "swatch": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the chart: the colour actually used, palette or override."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swatch",
+                "defaultValue": "''"
+            },
+            "share": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the chart: this slice's share, as a whole percentage."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "share",
+                "defaultValue": "0"
+            },
+            "drawn": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the chart: whether this slice is in the drawing at all.\n\nA slice of zero is not a wedge, so it is not a legend row either \u2014\notherwise the legend lists colours that appear nowhere in the chart.\nReflected, because that is what the stylesheet hides it with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "drawn",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-pie-slice.js.map

package/dist/collection/components/pf-pie-slice/pf-pie-slice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-pie-slice.js","sourceRoot":"","sources":["../../../src/components/pf-pie-slice/pf-pie-slice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,UAAU;IACrB,uEAAuE;IAC9C,KAAK,GAAG,CAAC,CAAC;IAEnC,4DAA4D;IACnC,KAAK,CAAU;IAExC,uEAAuE;IAC9C,MAAM,GAAG,EAAE,CAAC;IAErC,mEAAmE;IAC1C,KAAK,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACqC,KAAK,GAAG,KAAK,CAAC;IAEtD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,GAAS;YAC3F,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC9B,8DAAQ,CACH;YACP,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,IAAI,CAAC,KAAK;oBACN,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One slice of a `pf-pie-chart`, and its own row in the legend.\n *\n * The React `PieChart` takes a `data` array of `{ label, value, color }`; a\n * slot renders its assigned content once and in one place, so there is no way\n * for the chart's shadow root to build a legend out of labels that live in the\n * light DOM. The slice renders its own row instead, which is the §2.1 idiom\n * and lets a consumer put anything in a label.\n *\n * `swatch`, `share` and `drawn` are the chart's to set: only it can see the\n * total.\n *\n * @slot - the slice's label.\n * @part dot - the colour swatch.\n * @part label - the label's box.\n * @part value - the share, as a whole percentage.\n */\n@Component({\n  tag: 'pf-pie-slice',\n  styleUrl: 'pf-pie-slice.css',\n  shadow: true,\n})\nexport class PfPieSlice {\n  /** How big the slice is, in whatever unit the chart's slices share. */\n  @Prop({ reflect: true }) value = 0;\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  /** Set by the chart: this slice's share, as a whole percentage. */\n  @Prop({ mutable: true }) share = 0;\n\n  /**\n   * Set by the chart: whether this slice is in the drawing at all.\n   *\n   * A slice of zero is not a wedge, so it is not a legend row either —\n   * otherwise the legend lists colours that appear nowhere in the chart.\n   * Reflected, because that is what the stylesheet hides it with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.share}%\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,49 @@
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * `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.
+ */
+.panel {
+  inset: auto;
+  margin: 0;
+  background: var(--pf-popover-bg);
+  border: 1px solid var(--pf-popover-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  color: var(--pf-popover-text);
+  max-width: min(320px, calc(100vw - 2 * var(--space-4)));
+  padding: var(--space-3);
+  width: max-content;
+}
+
+.panel:focus-visible {
+  outline: none;
+}
+
+.panel:popover-open {
+  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel:popover-open {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,325 @@
+import { Keys, observeAnchoredPosition } from "@pitchfork-ui/core";
+import { placePopover } from "../../place-popover";
+import { h, Host, } from "@stencil/core";
+/**
+ * An interactive panel anchored to its trigger.
+ *
+ * `popover="auto"` rather than `manual`, because the browser then does
+ * light-dismiss and Escape itself — measured from inside a shadow root with
+ * trusted input: a real outside click and a real Escape both close an `auto`
+ * popover while a `manual` one stays open. That is less code than
+ * `onOutsideInteraction` and it composes with the top-layer stack, so a
+ * popover inside a popover closes in the right order.
+ *
+ * @slot - the trigger.
+ * @slot content - the panel's content.
+ * @part panel - the floating panel.
+ */
+export class PfPopover {
+    el;
+    /** Whether the panel is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Which edge of the trigger the panel lines up with. */
+    align = 'start';
+    /** Accessible name for the panel, which is a dialog. */
+    label;
+    /**
+     * Close on an outside click or Escape. Defaults to true.
+     *
+     * This is the `auto`/`manual` popover switch: turning it off hands the
+     * consumer responsibility for closing, which is what a popover holding an
+     * unfinished form wants.
+     */
+    dismissable = true;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    stopObserving;
+    componentDidLoad() {
+        this.syncTrigger();
+        if (this.open)
+            this.showPanel();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    /** Opens the panel. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the panel. */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * The one place a state change is announced, whatever caused it: a trigger
+     * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own
+     * light-dismiss mirrored in below.
+     *
+     * Emitting from the `toggle` handler instead looked right and fired for none
+     * of the user-driven paths — by the time `toggle` arrives the click handler
+     * has already moved `open`, so the guard there saw no change. 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.showPanel();
+        else
+            this.hidePanel();
+        this.syncTrigger();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.firstElementChild;
+    }
+    /**
+     * The trigger's disclosure state.
+     *
+     * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does
+     * not cross a shadow boundary, so pointing it at the panel's id would leave
+     * a dangling reference — worse than none. `aria-expanded` and
+     * `aria-haspopup` carry what a screen reader announces here.
+     */
+    syncTrigger() {
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-haspopup', 'dialog');
+        trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (!panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: this.align,
+            // A popover sizes to its own content rather than to the trigger, and
+            // flips above when there is no room below.
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover(panel, left, top),
+        });
+        // The panel is a dialog, so focus belongs inside it once it is showing.
+        panel.focus();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    handleClick(event) {
+        const trigger = this.trigger;
+        // Only the trigger toggles. A click inside the panel is the content's.
+        if (!trigger || !event.composedPath().includes(trigger))
+            return;
+        this.open = !this.open;
+    }
+    /**
+     * Escape for the `manual` case only. An `auto` popover is dismissed by the
+     * browser, and handling it here as well would fight that.
+     */
+    handleKeyDown(event) {
+        if (event.key !== Keys.Escape || this.dismissable || !this.open)
+            return;
+        event.stopPropagation();
+        this.open = false;
+    }
+    /**
+     * Mirrors a change the browser made — light-dismiss, or being closed because
+     * another popover took the top layer — back into `open`, which then announces
+     * it through the watch above. Without this a consumer's `open` goes stale
+     * after a dismiss they did not initiate.
+     */
+    onToggle = (event) => {
+        const next = event.newState === 'open';
+        if (next !== this.open)
+            this.open = next;
+    };
+    render() {
+        return (h(Host, { key: 'df31f83d35301ca9e0cee9952b990ed09d9bb1a3' }, h("slot", { key: 'a302c69a56ff5e286b5d78b7fd17c0592bc5268d', onSlotchange: () => this.syncTrigger() }), h("div", { key: 'e1e7272e02705426eb375e4397cbc8941ccfb995', class: "panel", part: "panel", popover: this.dismissable ? 'auto' : 'manual', role: "dialog", "aria-label": this.label, tabindex: "-1", onToggle: this.onToggle }, h("slot", { key: '56c901b8c16a17dc5725e49c55262e0218262595', name: "content" }))));
+    }
+    static get is() { return "pf-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-popover.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 panel is showing. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which edge of the trigger the panel lines up with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'start'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the panel, which is a dialog."
+                },
+                "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 an outside click or Escape. Defaults to true.\n\nThis is the `auto`/`manual` popover switch: turning it off hands the\nconsumer responsibility for closing, which is what a popover holding an\nunfinished form wants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the panel 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 panel.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the panel.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["../../../src/components/pf-popover/pf-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,SAAS;IACT,EAAE,CAAe;IAE5B,kFAAkF;IAC1C,IAAI,GAAG,KAAK,CAAC;IAErD,yDAAyD;IACjD,KAAK,GAAoB,OAAO,CAAC;IAEzC,wDAAwD;IAChD,KAAK,CAAU;IAEvB;;;;;;OAMG;IACK,WAAW,GAAG,IAAI,CAAC;IAE3B,mEAAmE;IAC1D,YAAY,CAAmC;IAEhD,aAAa,CAAc;IAEnC,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACzB,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;;;;;;;;;;OAUG;IAEH,QAAQ,CAAC,IAAa,EAAE,QAAiB;QACvC,IAAI,IAAI;YAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;YACtB,IAAI,CAAC,SAAS,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAc,gBAAgB,CAAC,IAAI,IAAI,CAAC;IAClF,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,EAAE,CAAC,iBAAuC,CAAC;IACzD,CAAC;IAED;;;;;;;OAOG;IACK,WAAW;QACjB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;QAChD,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACtE,CAAC;IAEO,SAAS;QACf,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,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,uBAAuB,CAAC;YAC3C,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO;YAC7B,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,qEAAqE;YACrE,2CAA2C;YAC3C,gBAAgB,EAAE,KAAK;YACvB,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC;SAC5D,CAAC,CAAC;QAEH,wEAAwE;QACxE,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;YAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,CAAC;IAGD,WAAW,CAAC,KAAiB;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,uEAAuE;QACvE,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAAE,OAAO;QAChE,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED;;;OAGG;IAEH,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;;;OAKG;IACK,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,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;YAChD,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAC7C,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Keys, observeAnchoredPosition } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\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\n/**\n * An interactive panel anchored to its trigger.\n *\n * `popover=\"auto\"` rather than `manual`, because the browser then does\n * light-dismiss and Escape itself — measured from inside a shadow root with\n * trusted input: a real outside click and a real Escape both close an `auto`\n * popover while a `manual` one stays open. That is less code than\n * `onOutsideInteraction` and it composes with the top-layer stack, so a\n * popover inside a popover closes in the right order.\n *\n * @slot - the trigger.\n * @slot content - the panel's content.\n * @part panel - the floating panel.\n */\n@Component({\n  tag: 'pf-popover',\n  styleUrl: 'pf-popover.css',\n  shadow: true,\n})\nexport class PfPopover {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the panel lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the panel, which is a dialog. */\n  @Prop() label?: string;\n\n  /**\n   * Close on an outside click or Escape. Defaults to true.\n   *\n   * This is the `auto`/`manual` popover switch: turning it off hands the\n   * consumer responsibility for closing, which is what a popover holding an\n   * unfinished form wants.\n   */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showPanel();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\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: a trigger\n   * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own\n   * light-dismiss mirrored in below.\n   *\n   * Emitting from the `toggle` handler instead looked right and fired for none\n   * of the user-driven paths — by the time `toggle` arrives the click handler\n   * has already moved `open`, so the guard there saw no change. A consumer\n   * mirroring this value back sets `open` to what it already is, which Stencil\n   * does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    this.syncTrigger();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.firstElementChild as HTMLElement | null;\n  }\n\n  /**\n   * The trigger's disclosure state.\n   *\n   * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does\n   * not cross a shadow boundary, so pointing it at the panel's id would leave\n   * a dangling reference — worse than none. `aria-expanded` and\n   * `aria-haspopup` carry what a screen reader announces here.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'dialog');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (!panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: this.align,\n      // A popover sizes to its own content rather than to the trigger, and\n      // flips above when there is no room below.\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // The panel is a dialog, so focus belongs inside it once it is showing.\n    panel.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    // Only the trigger toggles. A click inside the panel is the content's.\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * Escape for the `manual` case only. An `auto` popover is dismissed by the\n   * browser, and handling it here as well would fight that.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || this.dismissable || !this.open) return;\n    event.stopPropagation();\n    this.open = false;\n  }\n\n  /**\n   * Mirrors a change the browser made — light-dismiss, or being closed because\n   * another popover took the top layer — back into `open`, which then announces\n   * it through the watch above. Without this a consumer's `open` goes stale\n   * after a dismiss they did not initiate.\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 onSlotchange={() => this.syncTrigger()} />\n        <div\n          class=\"panel\"\n          part=\"panel\"\n          popover={this.dismissable ? 'auto' : 'manual'}\n          role=\"dialog\"\n          aria-label={this.label}\n          tabindex=\"-1\"\n          onToggle={this.onToggle}\n        >\n          <slot name=\"content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-progress-bar/pf-progress-bar.css

@@ -0,0 +1,49 @@
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-progress-bar-in {
+  from {
+    width: 0;
+  }
+}
+
+:host {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 220px;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.track {
+  background: var(--pf-progress-track-bg);
+  border-radius: var(--radius-full);
+  flex: 1;
+  height: 8px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.fill {
+  animation: pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);
+  background: var(--pf-progress-accent);
+  border-radius: inherit;
+  height: 100%;
+  /* Animate in from 0 on mount, and smoothly between values on change. */
+  transition: width var(--pf-transition-slow);
+  width: var(--pf-progress-fill, 0%);
+}
+
+.value {
+  color: var(--pf-progress-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fill {
+    animation: none;
+    transition: none;
+  }
+}