@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,13 @@
+:host {
+  display: grid;
+  gap: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The entries have to be grid items of the host, not of a box inside it. */
+slot {
+  display: contents;
+}

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": "/home/runner/work/pitchfork-ui/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);
+  }
+}