@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,109 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A vertical timeline over `pf-timeline-item` children.
+ *
+ * The group owns the one thing an entry cannot see: whether it is the last,
+ * which decides both the connector running down to the next entry and the
+ * space below the content.
+ *
+ * @slot - the `pf-timeline-item` children.
+ */
+export class PfTimeline {
+    el;
+    /**
+     * The timeline's accessible name. A list of entries is worth naming, and a
+     * consumer can only do it from out here.
+     */
+    label;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleLabelChange() {
+        this.sync();
+    }
+    /** Re-reads the children, for a consumer who moved them imperatively. */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested timeline owns its own entries. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-timeline-item')).filter((item) => item.parentElement === this.el);
+    }
+    sync() {
+        const items = this.items;
+        for (const [index, item] of items.entries()) {
+            item.last = index === items.length - 1;
+        }
+    }
+    render() {
+        return (h(Host, { key: '53a5400e234a874e685694c80275a9f09089dd14', role: "list", "aria-label": this.label }, h("slot", { key: '020e56e751cf207b5b3a083952dbfe36549ad9a0', onSlotchange: () => this.refresh() })));
+    }
+    static get is() { return "pf-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The timeline's accessible name. A list of entries is worth naming, and a\nconsumer can only do it from out here."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the children, for a consumer who moved them imperatively.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }];
+    }
+}
+//# sourceMappingURL=pf-timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-timeline.js","sourceRoot":"","sources":["../../../src/components/pf-timeline/pf-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAe;IAE5B;;;OAGG;IACK,KAAK,CAAU;IAEvB,uEAAuE;IACvE,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,yEAAyE;IAEzE,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,oEAAoE;IACpE,IAAY,KAAK;QACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CACzC,CAAC;IACJ,CAAC;IAEO,IAAI;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;YAC3C,IAAwC,CAAC,IAAI,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9E,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,KAAK;YACtC,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAI,CACvC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A vertical timeline over `pf-timeline-item` children.\n *\n * The group owns the one thing an entry cannot see: whether it is the last,\n * which decides both the connector running down to the next entry and the\n * space below the content.\n *\n * @slot - the `pf-timeline-item` children.\n */\n@Component({\n  tag: 'pf-timeline',\n  styleUrl: 'pf-timeline.css',\n  shadow: true,\n})\nexport class PfTimeline {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The timeline's accessible name. A list of entries is worth naming, and a\n   * consumer can only do it from out here.\n   */\n  @Prop() label?: string;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('label')\n  handleLabelChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who moved them imperatively. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested timeline owns its own entries. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-timeline-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private sync() {\n    const items = this.items;\n    for (const [index, item] of items.entries()) {\n      (item as HTMLElement & { last: boolean }).last = index === items.length - 1;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-timeline-item/pf-timeline-item.css

@@ -0,0 +1,118 @@
+:host {
+  /* The title's line height, which the marker centres itself on. */
+  --pf-timeline-line: 1.375rem;
+  --pf-timeline-marker-size: 16px;
+  column-gap: var(--space-3);
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.rail {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.marker {
+  align-items: center;
+  border-radius: var(--radius-full);
+  border-style: solid;
+  border-width: 2px;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--pf-timeline-marker-size);
+  justify-content: center;
+  /* Centred on the title's first line. */
+  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);
+  width: var(--pf-timeline-marker-size);
+}
+
+/*
+ * A marker carrying an icon is larger to fit it. The class comes from JS,
+ * because `:has(*)` on a wrapper around a slot always matches -- the slot is
+ * itself a child.
+ */
+.marker.with-icon {
+  --pf-timeline-marker-size: 28px;
+}
+
+slot[name='icon']::slotted(*) {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.8rem;
+  justify-content: center;
+}
+
+:host([tone='default']) .marker {
+  background: var(--pf-timeline-default-bg);
+  border-color: var(--pf-timeline-default-border);
+  color: var(--pf-timeline-default-icon);
+}
+
+:host([tone='success']) .marker {
+  background: var(--pf-timeline-success-bg);
+  border-color: var(--pf-timeline-success-border);
+  color: var(--pf-timeline-success-icon);
+}
+
+:host([tone='warning']) .marker {
+  background: var(--pf-timeline-warning-bg);
+  border-color: var(--pf-timeline-warning-border);
+  color: var(--pf-timeline-warning-icon);
+}
+
+:host([tone='danger']) .marker {
+  background: var(--pf-timeline-danger-bg);
+  border-color: var(--pf-timeline-danger-border);
+  color: var(--pf-timeline-danger-icon);
+}
+
+.connector {
+  background: var(--pf-timeline-connector);
+  flex: 1;
+  margin: var(--space-1) 0;
+  min-height: var(--space-4);
+  width: 2px;
+}
+
+.content {
+  padding-bottom: var(--space-5);
+}
+
+:host([last]) .content {
+  padding-bottom: 0;
+}
+
+.header {
+  align-items: baseline;
+  column-gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.title {
+  color: var(--pf-timeline-title);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--pf-timeline-line);
+  margin: 0;
+}
+
+slot[name='timestamp']::slotted(*) {
+  color: var(--pf-timeline-timestamp);
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+slot[name='description']::slotted(*) {
+  color: var(--pf-timeline-description);
+  display: block;
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-1);
+}

package/dist/collection/components/pf-timeline-item/pf-timeline-item.js

@@ -0,0 +1,115 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One entry in a `pf-timeline`.
+ *
+ * @slot title - the entry's title.
+ * @slot timestamp - short meta text beside the title.
+ * @slot description - secondary text below the title.
+ * @slot icon - an icon inside the marker, in place of the plain dot.
+ * @part rail - the column holding the marker and the connector.
+ * @part marker - the dot, or the circle around a slotted icon.
+ * @part connector - the line down to the next entry. Absent on the last.
+ * @part content - the box holding title, timestamp and description.
+ * @part header - the row holding the title and the timestamp.
+ * @part title - the title's box.
+ */
+export class PfTimelineItem {
+    el;
+    /** Marker colour. Reflected so the stylesheet can select on it. */
+    tone = 'default';
+    /** Set by the group: the last entry has no connector and no space below. */
+    last = false;
+    /**
+     * Whether anything is slotted into the marker, which decides how big it is.
+     *
+     * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as "is
+     * anything in here" and always matches, because the `<slot>` is itself a
+     * child — measured, and the defect it caused in `pf-menu-item`. The marker
+     * is an ancestor of the slotted icon, so `::slotted()` cannot size it
+     * either, which leaves this.
+     */
+    hasIcon = false;
+    /**
+     * The light DOM is readable here, so the marker is the right size at first
+     * paint — the mock DOM never fires `slotchange`, and a real one fires it
+     * after the first render.
+     */
+    componentWillLoad() {
+        this.readIcon();
+    }
+    readIcon = () => {
+        this.hasIcon = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'icon');
+    };
+    render() {
+        return (h(Host, { key: '91c65e90131294e08445c06cca82fe4dcc3ecb38', role: "listitem" }, h("div", { key: 'be5e941f568eddc14c8766fc74d4cd095acfa9fc', class: "rail", part: "rail", "aria-hidden": "true" }, h("span", { key: '40b410122f953312e3643fdf91882b219a6ea2e9', class: { marker: true, 'with-icon': this.hasIcon }, part: "marker" }, h("slot", { key: 'b1967cd74ed9468260edfd5375acfa5b8ea91bf6', name: "icon", onSlotchange: this.readIcon })), !this.last && h("span", { key: '887e7fe2b3b1c22a859e2d0bad2a0769e1bbb3b1', class: "connector", part: "connector" })), h("div", { key: 'd25ed21ad5337568a15190d86ccdda8704a09834', class: "content", part: "content" }, h("div", { key: '59fa3448d18b10c0efc2d22ee09c0e673dd9cc28', class: "header", part: "header" }, h("p", { key: '3458f24b4862ff112e917b9d0e8318ae3bee77f2', class: "title", part: "title" }, h("slot", { key: 'b220c2ee62e621e47387554a8776b7071e3802e3', name: "title" })), h("slot", { key: '55d4102ca0a1003056e4c5ca830b9161d1fa6ed8', name: "timestamp" })), h("slot", { key: '7ef43f007a4bab89ba3bfdb15ce37b0ebfc9bedd', name: "description" }))));
+    }
+    static get is() { return "pf-timeline-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-timeline-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-timeline-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfTimelineTone",
+                    "resolved": "\"danger\" | \"default\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfTimelineTone": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-timeline-item/pf-timeline-item.tsx",
+                            "id": "src/components/pf-timeline-item/pf-timeline-item.tsx::PfTimelineTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marker colour. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            },
+            "last": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group: the last entry has no connector and no space below."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "last",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-timeline-item.js.map

package/dist/collection/components/pf-timeline-item/pf-timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-timeline-item.js","sourceRoot":"","sources":["../../../src/components/pf-timeline-item/pf-timeline-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,cAAc;IACd,EAAE,CAAe;IAE5B,mEAAmE;IAC1C,IAAI,GAAmB,SAAS,CAAC;IAE1D,4EAA4E;IACpC,IAAI,GAAG,KAAK,CAAC;IAErD;;;;;;;;OAQG;IACM,OAAO,GAAG,KAAK,CAAC;IAEzB;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEO,QAAQ,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CACjD,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YAEnB,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM;gBAC9C,6DAAM,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,QAAQ;oBACrE,6DAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C;gBACN,CAAC,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,GAAG,CACtD;YAEN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAC/B,0DAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;wBAC3B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACnB;oBAOJ,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB;gBACN,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfTimelineTone = 'default' | 'success' | 'warning' | 'danger';\n\n/**\n * One entry in a `pf-timeline`.\n *\n * @slot title - the entry's title.\n * @slot timestamp - short meta text beside the title.\n * @slot description - secondary text below the title.\n * @slot icon - an icon inside the marker, in place of the plain dot.\n * @part rail - the column holding the marker and the connector.\n * @part marker - the dot, or the circle around a slotted icon.\n * @part connector - the line down to the next entry. Absent on the last.\n * @part content - the box holding title, timestamp and description.\n * @part header - the row holding the title and the timestamp.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-timeline-item',\n  styleUrl: 'pf-timeline-item.css',\n  shadow: true,\n})\nexport class PfTimelineItem {\n  @Element() el!: HTMLElement;\n\n  /** Marker colour. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfTimelineTone = 'default';\n\n  /** Set by the group: the last entry has no connector and no space below. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /**\n   * Whether anything is slotted into the marker, which decides how big it is.\n   *\n   * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as \"is\n   * anything in here\" and always matches, because the `<slot>` is itself a\n   * child — measured, and the defect it caused in `pf-menu-item`. The marker\n   * is an ancestor of the slotted icon, so `::slotted()` cannot size it\n   * either, which leaves this.\n   */\n  @State() hasIcon = false;\n\n  /**\n   * The light DOM is readable here, so the marker is the right size at first\n   * paint — the mock DOM never fires `slotchange`, and a real one fires it\n   * after the first render.\n   */\n  componentWillLoad() {\n    this.readIcon();\n  }\n\n  private readIcon = () => {\n    this.hasIcon = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'icon',\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {/* Decorative: the marker repeats what the content already says. */}\n        <div class=\"rail\" part=\"rail\" aria-hidden=\"true\">\n          <span class={{ marker: true, 'with-icon': this.hasIcon }} part=\"marker\">\n            <slot name=\"icon\" onSlotchange={this.readIcon} />\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <div class=\"header\" part=\"header\">\n            <p class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </p>\n            {/*\n              No wrapper around the timestamp or the description: a box around\n              a slot cannot be collapsed from CSS, so an empty one would leave\n              its margin behind on every entry without them. An unassigned slot\n              generates nothing, so the styling goes on `::slotted(*)`.\n            */}\n            <slot name=\"timestamp\" />\n          </div>\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,56 @@
+:host {
+  display: contents;
+}
+
+/*
+ * Full-width on a phone, where a 420px card in a corner would be cropped;
+ * a corner-anchored column from --md up. Mirrors .pf-notification-stack.
+ */
+.stack {
+  display: grid;
+  gap: var(--space-3);
+  left: var(--space-2);
+  position: fixed;
+  right: var(--space-2);
+  width: auto;
+  z-index: 1000;
+}
+
+:host([placement='top-right']) .stack,
+:host([placement='top-left']) .stack {
+  top: var(--space-2);
+}
+
+:host([placement='bottom-right']) .stack,
+:host([placement='bottom-left']) .stack {
+  bottom: var(--space-2);
+}
+
+@media (min-width: 768px) {
+  .stack {
+    left: auto;
+    right: auto;
+    width: min(420px, calc(100vw - (var(--space-4) * 2)));
+  }
+
+  :host([placement='top-right']) .stack,
+  :host([placement='top-left']) .stack {
+    top: var(--space-4);
+  }
+
+  :host([placement='bottom-right']) .stack,
+  :host([placement='bottom-left']) .stack {
+    bottom: var(--space-4);
+  }
+
+  :host([placement='top-right']) .stack,
+  :host([placement='bottom-right']) .stack {
+    justify-items: end;
+    right: var(--space-4);
+  }
+
+  :host([placement='top-left']) .stack,
+  :host([placement='bottom-left']) .stack {
+    left: var(--space-4);
+  }
+}

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": "/Users/lelandrangel/Development/lelandrangel.com/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": "/Users/lelandrangel/Development/lelandrangel.com/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