@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,255 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * The region toasts appear in, and the queue behind them.
+ *
+ * This is the one place the elements layer takes options rather than child
+ * elements, against the rule in `WEB-COMPONENTS-PLAN.md` §2.1 — because a
+ * toast is not data the consumer is rendering, it is an event that happened.
+ * React expresses that with a context provider and a module-level `toast()`;
+ * the equivalent for a custom element is a method on the region, since a
+ * consumer calling `toast()` three times from an event handler cannot
+ * reasonably be asked to maintain a list of children for it.
+ *
+ * Declarative use still works: anything slotted in is laid out in the stack
+ * alongside the queue, which is how a notification that is part of the page
+ * rather than a response to an action is placed here.
+ *
+ * The region itself is not a live region. Each `pf-notification` is one
+ * already, so marking the container as well would announce every toast twice.
+ *
+ * @slot - notifications placed in the stack declaratively.
+ * @part stack - the positioned container.
+ */
+export class PfToaster {
+    el;
+    /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */
+    placement = 'top-right';
+    /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */
+    duration = 4000;
+    /** Fires when a toast has left, with the id `toast()` returned. */
+    pfToastDismiss;
+    entries = [];
+    timers = new Map();
+    sequence = 0;
+    disconnectedCallback() {
+        for (const timer of this.timers.values())
+            clearTimeout(timer);
+        this.timers.clear();
+    }
+    /**
+     * Shows a toast and returns its id.
+     *
+     * Newest first, matching the React provider, so a stack in a top corner
+     * grows downwards away from the corner.
+     */
+    async toast(options = {}) {
+        const id = `pf-toast-${(this.sequence += 1)}`;
+        this.entries = [{ ...options, id }, ...this.entries];
+        const duration = options.duration ?? this.duration;
+        if (duration > 0) {
+            this.timers.set(id, setTimeout(() => {
+                this.timers.delete(id);
+                void this.dismiss(id);
+            }, duration));
+        }
+        return id;
+    }
+    /** Dismisses one toast by the id `toast()` returned. */
+    async dismiss(id) {
+        this.clearTimer(id);
+        /*
+         * Typed structurally rather than as `HTMLPfNotificationElement`: that
+         * interface is generated by the build, so naming it here makes the first
+         * build of a new element fail on the type it is about to produce.
+         */
+        const element = this.el.shadowRoot?.querySelector(`pf-notification[data-id="${id}"]`);
+        // Play the exit animation if it is still mounted; remove it either way.
+        if (element)
+            await element.dismiss();
+        this.remove(id);
+    }
+    /** Dismisses everything currently showing. */
+    async dismissAll() {
+        await Promise.all(this.entries.map((entry) => this.dismiss(entry.id)));
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.timers.delete(id);
+    }
+    remove(id) {
+        if (!this.entries.some((entry) => entry.id === id))
+            return;
+        this.entries = this.entries.filter((entry) => entry.id !== id);
+        this.pfToastDismiss.emit({ id });
+    }
+    render() {
+        return (h(Host, { key: '0ed859d92e6ceb13483bb2a469e9e9ef5ae595a2' }, h("div", { key: '526f85d58a2af54c1b5ca7fe172f0c8e6070d205', class: "stack", part: "stack" }, this.entries.map((entry) => (h("pf-notification", { key: entry.id, "data-id": entry.id, variant: entry.variant ?? 'info', heading: entry.heading, description: entry.description, dismissable: entry.dismissable ?? true,
+            /*
+             * The notification owns its own exit, and tells us when it is
+             * over. Removing it on the click instead would cut the animation
+             * off at the first frame.
+             */
+            onPfDismiss: () => this.remove(entry.id) }))), h("slot", { key: '169fad33c3f11cbc8d78ba7552677ff7296eb232' }))));
+    }
+    static get is() { return "pf-toaster"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-toaster.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-toaster.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfToasterPlacement",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "PfToasterPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
+                            "id": "src/components/pf-toaster/pf-toaster.tsx::PfToasterPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which corner the stack sits in. Reflected; the stylesheet positions on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'top-right'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-dismiss delay for toasts that do not set their own. `0` disables it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "4000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "entries": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfToastDismiss",
+                "name": "pfToastDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a toast has left, with the id `toast()` returned."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toast": {
+                "complexType": {
+                    "signature": "(options?: PfToastOptions) => Promise<string>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "PfToastOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PfToastOptions": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
+                            "id": "src/components/pf-toaster/pf-toaster.tsx::PfToastOptions"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Shows a toast and returns its id.\n\nNewest first, matching the React provider, so a stack in a top corner\ngrows downwards away from the corner.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismisses one toast by the id `toast()` returned.",
+                    "tags": []
+                }
+            },
+            "dismissAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismisses everything currently showing.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-toaster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toaster.js","sourceRoot":"","sources":["../../../src/components/pf-toaster/pf-toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { LiveRegionVariant } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfToasterPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\nexport interface PfToastOptions {\n  variant?: LiveRegionVariant;\n  heading?: string;\n  description?: string;\n  /** Milliseconds before it dismisses itself. `0` keeps it until dismissed. */\n  duration?: number;\n  /** Render the dismiss button. Defaults to true. */\n  dismissable?: boolean;\n}\n\ninterface Entry extends PfToastOptions {\n  id: string;\n}\n\n/**\n * The region toasts appear in, and the queue behind them.\n *\n * This is the one place the elements layer takes options rather than child\n * elements, against the rule in `WEB-COMPONENTS-PLAN.md` §2.1 — because a\n * toast is not data the consumer is rendering, it is an event that happened.\n * React expresses that with a context provider and a module-level `toast()`;\n * the equivalent for a custom element is a method on the region, since a\n * consumer calling `toast()` three times from an event handler cannot\n * reasonably be asked to maintain a list of children for it.\n *\n * Declarative use still works: anything slotted in is laid out in the stack\n * alongside the queue, which is how a notification that is part of the page\n * rather than a response to an action is placed here.\n *\n * The region itself is not a live region. Each `pf-notification` is one\n * already, so marking the container as well would announce every toast twice.\n *\n * @slot - notifications placed in the stack declaratively.\n * @part stack - the positioned container.\n */\n@Component({\n  tag: 'pf-toaster',\n  styleUrl: 'pf-toaster.css',\n  shadow: true,\n})\nexport class PfToaster {\n  @Element() el!: HTMLElement;\n\n  /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfToasterPlacement = 'top-right';\n\n  /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */\n  @Prop() duration = 4000;\n\n  /** Fires when a toast has left, with the id `toast()` returned. */\n  @Event() pfToastDismiss!: EventEmitter<{ id: string }>;\n\n  @State() entries: Entry[] = [];\n\n  private timers = new Map<string, ReturnType<typeof setTimeout>>();\n  private sequence = 0;\n\n  disconnectedCallback() {\n    for (const timer of this.timers.values()) clearTimeout(timer);\n    this.timers.clear();\n  }\n\n  /**\n   * Shows a toast and returns its id.\n   *\n   * Newest first, matching the React provider, so a stack in a top corner\n   * grows downwards away from the corner.\n   */\n  @Method()\n  async toast(options: PfToastOptions = {}): Promise<string> {\n    const id = `pf-toast-${(this.sequence += 1)}`;\n    this.entries = [{ ...options, id }, ...this.entries];\n\n    const duration = options.duration ?? this.duration;\n    if (duration > 0) {\n      this.timers.set(\n        id,\n        setTimeout(() => {\n          this.timers.delete(id);\n          void this.dismiss(id);\n        }, duration),\n      );\n    }\n\n    return id;\n  }\n\n  /** Dismisses one toast by the id `toast()` returned. */\n  @Method()\n  async dismiss(id: string): Promise<void> {\n    this.clearTimer(id);\n    /*\n     * Typed structurally rather than as `HTMLPfNotificationElement`: that\n     * interface is generated by the build, so naming it here makes the first\n     * build of a new element fail on the type it is about to produce.\n     */\n    const element = this.el.shadowRoot?.querySelector(`pf-notification[data-id=\"${id}\"]`) as\n      (HTMLElement & { dismiss(): Promise<void> }) | null;\n\n    // Play the exit animation if it is still mounted; remove it either way.\n    if (element) await element.dismiss();\n    this.remove(id);\n  }\n\n  /** Dismisses everything currently showing. */\n  @Method()\n  async dismissAll(): Promise<void> {\n    await Promise.all(this.entries.map((entry) => this.dismiss(entry.id)));\n  }\n\n  private clearTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (timer) clearTimeout(timer);\n    this.timers.delete(id);\n  }\n\n  private remove(id: string) {\n    if (!this.entries.some((entry) => entry.id === id)) return;\n    this.entries = this.entries.filter((entry) => entry.id !== id);\n    this.pfToastDismiss.emit({ id });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stack\" part=\"stack\">\n          {this.entries.map((entry) => (\n            <pf-notification\n              key={entry.id}\n              data-id={entry.id}\n              variant={entry.variant ?? 'info'}\n              heading={entry.heading}\n              description={entry.description}\n              dismissable={entry.dismissable ?? true}\n              /*\n               * The notification owns its own exit, and tells us when it is\n               * over. Removing it on the click instead would cut the animation\n               * off at the first frame.\n               */\n              onPfDismiss={() => this.remove(entry.id)}\n            ></pf-notification>\n          ))}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+:host {
+  align-items: center;
+  background: var(--pf-toolbar-bg);
+  border: 1px solid var(--pf-toolbar-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([orientation='horizontal']) {
+  flex-direction: row;
+}
+
+:host([orientation='vertical']) {
+  align-items: stretch;
+  flex-direction: column;
+  width: fit-content;
+}

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

@@ -0,0 +1,131 @@
+import { getRovingItems, resolveListMove, resolveRovingKey, syncRovingTabIndex, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A group of controls that is one tab stop from outside and navigated
+ * internally with the arrow keys.
+ *
+ * Items are matched in the light DOM, so a native `button`, `a[href]` or form
+ * control works with no ceremony. A custom element is not a native control and
+ * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.
+ * Focusing it still reaches the real button inside, because `pf-button`
+ * delegates focus.
+ *
+ * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.
+ */
+export class PfToolbar {
+    el;
+    /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */
+    orientation = 'horizontal';
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * A separator cannot see which way its toolbar runs: `:host-context()` is the
+     * only selector that would reach out of its shadow root, and it is not
+     * supported in Firefox or Safari. So the toolbar pushes its own orientation
+     * down instead, which also means a consumer never has to set it twice.
+     */
+    sync() {
+        syncRovingTabIndex(getRovingItems(this.el));
+        for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {
+            separator.setAttribute('orientation', this.orientation);
+        }
+    }
+    /**
+     * Keeps the tab stop on whatever the user actually focused, however they got
+     * there — a click, a Tab from outside, or a script.
+     *
+     * `focusin` rather than `focus` because it bubbles, and it crosses a shadow
+     * boundary with its target retargeted to the host, which is exactly the
+     * element in the item list.
+     */
+    handleFocusIn(event) {
+        syncRovingTabIndex(getRovingItems(this.el), event.target);
+    }
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const action = resolveRovingKey(event.key, this.orientation);
+        if (!action)
+            return;
+        const items = getRovingItems(this.el);
+        // activeElement reports the shallowest host, which is the item itself even
+        // when focus has been delegated into its shadow root.
+        const currentIndex = items.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = resolveListMove(action, items.map((_, index) => index), currentIndex);
+        if (nextIndex >= 0) {
+            event.preventDefault();
+            items[nextIndex].focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f0a26b6f3d74719af7dbefc0eb21a957502427f6', role: "toolbar", "aria-orientation": this.orientation }, h("slot", { key: '0e557bef8da2b0e344541975284be29d647dec34', onSlotchange: () => this.sync() })));
+    }
+    static get is() { return "pf-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfToolbarOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfToolbarOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toolbar/pf-toolbar.tsx",
+                            "id": "src/components/pf-toolbar/pf-toolbar.tsx::PfToolbarOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout and arrow-key axis. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "sync"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar.js","sourceRoot":"","sources":["../../../src/components/pf-toolbar/pf-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIjF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,SAAS;IACT,EAAE,CAAe;IAE5B,+EAA+E;IACtD,WAAW,GAAyB,YAAY,CAAC;IAE1E,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;;;OAKG;IAEH,IAAI;QACF,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5C,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC;YACrF,SAAS,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IAEH,aAAa,CAAC,KAAiB;QAC7B,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,MAAqB,CAAC,CAAC;IAC3E,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QAEnC,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACtC,2EAA2E;QAC3E,sDAAsD;QACtD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;QAC1E,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO;QAEhC,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,IAAI,CAAC,EAAE,CAAC;YACnB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,sBAAmB,IAAI,CAAC,WAAW;YACrD,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CACpC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\nexport type PfToolbarOrientation = 'horizontal' | 'vertical';\n\n/**\n * A group of controls that is one tab stop from outside and navigated\n * internally with the arrow keys.\n *\n * Items are matched in the light DOM, so a native `button`, `a[href]` or form\n * control works with no ceremony. A custom element is not a native control and\n * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.\n * Focusing it still reaches the real button inside, because `pf-button`\n * delegates focus.\n *\n * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.\n */\n@Component({\n  tag: 'pf-toolbar',\n  styleUrl: 'pf-toolbar.css',\n  shadow: true,\n})\nexport class PfToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfToolbarOrientation = 'horizontal';\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A separator cannot see which way its toolbar runs: `:host-context()` is the\n   * only selector that would reach out of its shadow root, and it is not\n   * supported in Firefox or Safari. So the toolbar pushes its own orientation\n   * down instead, which also means a consumer never has to set it twice.\n   */\n  @Watch('orientation')\n  sync() {\n    syncRovingTabIndex(getRovingItems(this.el));\n\n    for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {\n      separator.setAttribute('orientation', this.orientation);\n    }\n  }\n\n  /**\n   * Keeps the tab stop on whatever the user actually focused, however they got\n   * there — a click, a Tab from outside, or a script.\n   *\n   * `focusin` rather than `focus` because it bubbles, and it crosses a shadow\n   * boundary with its target retargeted to the host, which is exactly the\n   * element in the item list.\n   */\n  @Listen('focusin')\n  handleFocusIn(event: FocusEvent) {\n    syncRovingTabIndex(getRovingItems(this.el), event.target as HTMLElement);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const items = getRovingItems(this.el);\n    // activeElement reports the shallowest host, which is the item itself even\n    // when focus has been delegated into its shadow root.\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex >= 0) {\n      event.preventDefault();\n      items[nextIndex].focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"toolbar\" aria-orientation={this.orientation}>\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.css

@@ -0,0 +1,19 @@
+:host {
+  background: var(--pf-toolbar-separator);
+  flex-shrink: 0;
+  margin: var(--space-1);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* A horizontal toolbar is divided by a vertical hairline, and vice versa. */
+:host([orientation='horizontal']) {
+  align-self: stretch;
+  width: 1px;
+}
+
+:host([orientation='vertical']) {
+  height: 1px;
+}

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js

@@ -0,0 +1,59 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A rule between groups of toolbar controls.
+ *
+ * `orientation` describes the toolbar it sits in, not the rule's own shape: a
+ * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every
+ * separator it contains, so a consumer does not have to — and cannot leave one
+ * pointing the wrong way.
+ */
+export class PfToolbarSeparator {
+    /** The axis of the toolbar this sits in. Reflected for the stylesheet. */
+    orientation = 'horizontal';
+    render() {
+        return h(Host, { key: 'b6a69e325252e5807d813d6b7d95a4d0cd915148', role: "separator", "aria-orientation": this.orientation });
+    }
+    static get is() { return "pf-toolbar-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-toolbar-separator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-toolbar-separator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfToolbarSeparatorOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfToolbarSeparatorOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toolbar-separator/pf-toolbar-separator.tsx",
+                            "id": "src/components/pf-toolbar-separator/pf-toolbar-separator.tsx::PfToolbarSeparatorOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The axis of the toolbar this sits in. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-toolbar-separator.js.map

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-toolbar-separator.js","sourceRoot":"","sources":["../../../src/components/pf-toolbar-separator/pf-toolbar-separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;IAC7B,0EAA0E;IACjD,WAAW,GAAkC,YAAY,CAAC;IAEnF,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW,sBAAmB,IAAI,CAAC,WAAW,GAAI,CAAC;IACvE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfToolbarSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule between groups of toolbar controls.\n *\n * `orientation` describes the toolbar it sits in, not the rule's own shape: a\n * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every\n * separator it contains, so a consumer does not have to — and cannot leave one\n * pointing the wrong way.\n */\n@Component({\n  tag: 'pf-toolbar-separator',\n  styleUrl: 'pf-toolbar-separator.css',\n  shadow: true,\n})\nexport class PfToolbarSeparator {\n  /** The axis of the toolbar this sits in. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfToolbarSeparatorOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"]}

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

@@ -0,0 +1,51 @@
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * `popover` puts this in the top layer, so it escapes any ancestor's overflow
+ * and stacking context. left/top come from the observer.
+ */
+/*
+ * `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.
+ */
+.tooltip {
+  inset: auto;
+  margin: 0;
+  background: var(--pf-tooltip-bg);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  color: var(--pf-tooltip-text);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  max-width: 260px;
+  padding: var(--space-2) var(--space-3);
+  width: max-content;
+}
+
+.tooltip:popover-open {
+  /* Fade in from the side it sits on. */
+  animation: pf-tooltip-in var(--duration-fast) var(--easing-decelerate);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-tooltip-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip:popover-open {
+    animation: none;
+  }
+}