@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,321 @@
+import { HEATMAP_WEEKDAYS, buildHeatmapWeeks, formatISODate, heatmapCellColor, heatmapLevel, heatmapMonthLabels, heatmapRange, summariseHeatmap, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A calendar heatmap: one cell per day, darker where the value is higher.
+ *
+ * All of the arithmetic is core's, and the date stepping goes through
+ * `date.ts`, which pins every date to midday — a day step from midnight
+ * across a daylight-saving boundary loses or repeats a day, which is
+ * invisible under UTC and is why both test projects now run in a timezone
+ * that has daylight saving.
+ *
+ * @slot empty - what to show when there is nothing to draw.
+ * @part empty - the empty state's box.
+ * @part weekdays - the column of weekday names.
+ * @part months - the row of month names.
+ * @part grid - the cells.
+ * @part cell - one day.
+ */
+export class PfHeatmap {
+    /**
+     * One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.
+     *
+     * An array for a framework consumer, or JSON for plain HTML, because
+     * Stencil coerces an attribute only for the primitive types it recognises
+     * and would otherwise hand this the string verbatim.
+     */
+    data = [];
+    /** First day to draw. Defaults to the earliest in the data. */
+    startDate;
+    /** Last day to draw. Defaults to the latest in the data. */
+    endDate;
+    /** Colour buckets, counting the empty one. */
+    levels = 5;
+    /** 0 = Sunday, 1 = Monday. Read through a getter, which coerces. */
+    weekStartsOn = 0;
+    cellSize = 12;
+    cellGap = 3;
+    showWeekdayLabels = true;
+    showMonthLabels = true;
+    /** The chart's accessible name. One is generated when it has none. */
+    label;
+    /** The entries, however they arrived. */
+    get entries() {
+        const raw = this.data;
+        if (Array.isArray(raw))
+            return raw;
+        try {
+            const parsed = JSON.parse(String(raw || '[]'));
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            // A malformed attribute is an empty heatmap, not a thrown render.
+            return [];
+        }
+    }
+    /**
+     * `0 | 1`, coerced.
+     *
+     * Written out as `0 | 1` rather than as an imported alias, which is the
+     * difference that decides whether Stencil coerces the attribute: measured
+     * side by side, this arrives as the **number** `1` while
+     * `pf-time-picker`'s imported `HourCycle` arrives as the string `"12"`.
+     * The getter stays anyway — it costs nothing and covers a consumer who
+     * sets the property to a string.
+     */
+    get weekStart() {
+        return Number(this.weekStartsOn) === 1 ? 1 : 0;
+    }
+    render() {
+        const entries = this.entries;
+        const range = heatmapRange(entries, this.startDate, this.endDate);
+        const cellSize = Number(this.cellSize) || 12;
+        const cellGap = Number(this.cellGap) || 3;
+        if (!range) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "No data"))));
+        }
+        const { start, end } = range;
+        /*
+         * Passed through rather than clamped here: `heatmapLevel` and
+         * `heatmapCellColor` both floor it at two buckets, and a second copy of
+         * that clamp is a second thing to keep in step.
+         */
+        const levelCount = Number(this.levels);
+        const byDate = new Map(entries.map((entry) => [entry.date, entry.value]));
+        const { max, total } = summariseHeatmap(entries);
+        const weeks = buildHeatmapWeeks(start, end, this.weekStart);
+        const months = heatmapMonthLabels(weeks);
+        return (h(Host, { role: "img", "aria-label": this.label ??
+                `Activity heatmap from ${formatISODate(start)} to ${formatISODate(end)}, ${total} total`, style: {
+                '--pf-heatmap-cell-size': `${cellSize}px`,
+                '--pf-heatmap-cell-gap': `${cellGap}px`,
+            } }, h("div", { class: "body" }, this.showWeekdayLabels && (h("div", { class: "weekdays", part: "weekdays" }, this.showMonthLabels && h("span", { class: "weekday-spacer", "aria-hidden": "true" }), h("div", { class: "weekday-grid" }, Array.from({ length: 7 }, (_, index) => (h("span", { class: "weekday" }, index % 2 === 1 ? HEATMAP_WEEKDAYS[(this.weekStart + index) % 7] : '')))))), h("div", { class: "main" }, this.showMonthLabels && (h("div", { class: "months", part: "months", "aria-hidden": "true", style: {
+                gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))`,
+            } }, months.map((month) => (h("span", { class: "month", style: { gridColumnStart: String(month.column) } }, month.label))))), h("div", { class: "grid", part: "grid" }, weeks.flatMap((week, column) => week.map((cell) => cell.inRange ? (h("span", { class: "cell", part: "cell", title: `${cell.iso}: ${byDate.get(cell.iso) ?? 0}`, "data-level": String(heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount)), style: {
+                background: heatmapCellColor(heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount), levelCount),
+                // Staggered by column, so the grid wipes in oldest first.
+                animationDelay: `${column * 8}ms`,
+            } })) : (h("span", { class: "cell cell--empty" })))))))));
+    }
+    static get is() { return "pf-heatmap"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-heatmap.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-heatmap.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeatmapDatumLike[] | string",
+                    "resolved": "HeatmapDatumLike[] | string",
+                    "references": {
+                        "HeatmapDatumLike": {
+                            "location": "import",
+                            "path": "@pitchfork-ui/core",
+                            "id": "../core/dist/index.d.ts::HeatmapDatumLike",
+                            "referenceLocation": "HeatmapDatumLike"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.\n\nAn array for a framework consumer, or JSON for plain HTML, because\nStencil coerces an attribute only for the primitive types it recognises\nand would otherwise hand this the string verbatim."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "First day to draw. Defaults to the earliest in the data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-date"
+            },
+            "endDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Last day to draw. Defaults to the latest in the data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-date"
+            },
+            "levels": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour buckets, counting the empty one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "levels",
+                "defaultValue": "5"
+            },
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1",
+                    "resolved": "0 | 1",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "0 = Sunday, 1 = Monday. Read through a getter, which coerces."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-starts-on",
+                "defaultValue": "0"
+            },
+            "cellSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cell-size",
+                "defaultValue": "12"
+            },
+            "cellGap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cell-gap",
+                "defaultValue": "3"
+            },
+            "showWeekdayLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-weekday-labels",
+                "defaultValue": "true"
+            },
+            "showMonthLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-month-labels",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The chart's accessible name. One is generated when it has none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-heatmap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-heatmap.js","sourceRoot":"","sources":["../../../src/components/pf-heatmap/pf-heatmap.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  HEATMAP_WEEKDAYS,\n  buildHeatmapWeeks,\n  formatISODate,\n  heatmapCellColor,\n  heatmapLevel,\n  heatmapMonthLabels,\n  heatmapRange,\n  summariseHeatmap,\n  type HeatmapDatumLike,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A calendar heatmap: one cell per day, darker where the value is higher.\n *\n * All of the arithmetic is core's, and the date stepping goes through\n * `date.ts`, which pins every date to midday — a day step from midnight\n * across a daylight-saving boundary loses or repeats a day, which is\n * invisible under UTC and is why both test projects now run in a timezone\n * that has daylight saving.\n *\n * @slot empty - what to show when there is nothing to draw.\n * @part empty - the empty state's box.\n * @part weekdays - the column of weekday names.\n * @part months - the row of month names.\n * @part grid - the cells.\n * @part cell - one day.\n */\n@Component({\n  tag: 'pf-heatmap',\n  styleUrl: 'pf-heatmap.css',\n  shadow: true,\n})\nexport class PfHeatmap {\n  /**\n   * One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.\n   *\n   * An array for a framework consumer, or JSON for plain HTML, because\n   * Stencil coerces an attribute only for the primitive types it recognises\n   * and would otherwise hand this the string verbatim.\n   */\n  @Prop() data: HeatmapDatumLike[] | string = [];\n\n  /** First day to draw. Defaults to the earliest in the data. */\n  @Prop() startDate?: string;\n\n  /** Last day to draw. Defaults to the latest in the data. */\n  @Prop() endDate?: string;\n\n  /** Colour buckets, counting the empty one. */\n  @Prop() levels = 5;\n\n  /** 0 = Sunday, 1 = Monday. Read through a getter, which coerces. */\n  @Prop() weekStartsOn: 0 | 1 = 0;\n\n  @Prop() cellSize = 12;\n\n  @Prop() cellGap = 3;\n\n  @Prop({ reflect: true }) showWeekdayLabels = true;\n\n  @Prop({ reflect: true }) showMonthLabels = true;\n\n  /** The chart's accessible name. One is generated when it has none. */\n  @Prop() label?: string;\n\n  /** The entries, however they arrived. */\n  private get entries(): HeatmapDatumLike[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      // A malformed attribute is an empty heatmap, not a thrown render.\n      return [];\n    }\n  }\n\n  /**\n   * `0 | 1`, coerced.\n   *\n   * Written out as `0 | 1` rather than as an imported alias, which is the\n   * difference that decides whether Stencil coerces the attribute: measured\n   * side by side, this arrives as the **number** `1` while\n   * `pf-time-picker`'s imported `HourCycle` arrives as the string `\"12\"`.\n   * The getter stays anyway — it costs nothing and covers a consumer who\n   * sets the property to a string.\n   */\n  private get weekStart(): 0 | 1 {\n    return Number(this.weekStartsOn) === 1 ? 1 : 0;\n  }\n\n  render() {\n    const entries = this.entries;\n    const range = heatmapRange(entries, this.startDate, this.endDate);\n    const cellSize = Number(this.cellSize) || 12;\n    const cellGap = Number(this.cellGap) || 3;\n\n    if (!range) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n        </Host>\n      );\n    }\n\n    const { start, end } = range;\n    /*\n     * Passed through rather than clamped here: `heatmapLevel` and\n     * `heatmapCellColor` both floor it at two buckets, and a second copy of\n     * that clamp is a second thing to keep in step.\n     */\n    const levelCount = Number(this.levels);\n    const byDate = new Map(entries.map((entry) => [entry.date, entry.value]));\n    const { max, total } = summariseHeatmap(entries);\n    const weeks = buildHeatmapWeeks(start, end, this.weekStart);\n    const months = heatmapMonthLabels(weeks);\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={\n          this.label ??\n          `Activity heatmap from ${formatISODate(start)} to ${formatISODate(end)}, ${total} total`\n        }\n        style={{\n          '--pf-heatmap-cell-size': `${cellSize}px`,\n          '--pf-heatmap-cell-gap': `${cellGap}px`,\n        }}\n      >\n        <div class=\"body\">\n          {this.showWeekdayLabels && (\n            <div class=\"weekdays\" part=\"weekdays\">\n              {this.showMonthLabels && <span class=\"weekday-spacer\" aria-hidden=\"true\"></span>}\n              <div class=\"weekday-grid\">\n                {Array.from({ length: 7 }, (_, index) => (\n                  <span class=\"weekday\">\n                    {/* Every other name, or seven three-letter labels in a\n                        12px column overlap each other. */}\n                    {index % 2 === 1 ? HEATMAP_WEEKDAYS[(this.weekStart + index) % 7] : ''}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <div class=\"main\">\n            {this.showMonthLabels && (\n              <div\n                class=\"months\"\n                part=\"months\"\n                aria-hidden=\"true\"\n                style={{\n                  gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))`,\n                }}\n              >\n                {months.map((month) => (\n                  <span class=\"month\" style={{ gridColumnStart: String(month.column) }}>\n                    {month.label}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            <div class=\"grid\" part=\"grid\">\n              {weeks.flatMap((week, column) =>\n                week.map((cell) =>\n                  cell.inRange ? (\n                    <span\n                      class=\"cell\"\n                      part=\"cell\"\n                      title={`${cell.iso}: ${byDate.get(cell.iso) ?? 0}`}\n                      data-level={String(heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount))}\n                      style={{\n                        background: heatmapCellColor(\n                          heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount),\n                          levelCount,\n                        ),\n                        // Staggered by column, so the grid wipes in oldest first.\n                        animationDelay: `${column * 8}ms`,\n                      }}\n                    ></span>\n                  ) : (\n                    <span class=\"cell cell--empty\"></span>\n                  ),\n                ),\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-icon/bundled-icons.js

@@ -0,0 +1,40 @@
+import { registerIconGlyphs } from "@pitchfork-ui/core";
+import { faBarChart, faBell, faCalendar, faCircleCheck, faCircleQuestion, faCircleXmark, faCopy, faCreditCard, faFile, faFolderOpen, faSquareCaretLeft, faSquareCaretRight, faSquareCheck, faStar, faUser, } from "@fortawesome/free-regular-svg-icons";
+/**
+ * The Font Awesome regular icons this package ships, registered into the
+ * shared registry on import.
+ *
+ * An explicit list, not the whole free-regular set, so a consumer's bundle
+ * carries only these — the same policy the React library follows. It has to
+ * be registered here as well as there, because a consumer using only the
+ * custom elements never loads the React package.
+ *
+ * Anything outside the list is not "an icon the library lacks": register it
+ * with `registerIconGlyphs()` from the peer dependency you already install.
+ *
+ * The *names* are core's `BUNDLED_FA_ICON_NAMES`, which the spec asserts this
+ * map against. Adding an icon to one layer and forgetting the other would
+ * otherwise leave a name that draws in React and nothing in `<pf-icon>`, with
+ * every test in both layers passing.
+ */
+const bundled = {
+    bell: faBell,
+    calendar: faCalendar,
+    'chart-bar': faBarChart,
+    'circle-check': faCircleCheck,
+    'circle-question': faCircleQuestion,
+    'circle-xmark': faCircleXmark,
+    copy: faCopy,
+    'credit-card': faCreditCard,
+    file: faFile,
+    'folder-open': faFolderOpen,
+    'square-caret-left': faSquareCaretLeft,
+    'square-caret-right': faSquareCaretRight,
+    'square-check': faSquareCheck,
+    star: faStar,
+    user: faUser,
+};
+export const registerBundledIcons = () => registerIconGlyphs(bundled);
+/** The names this package bundles, for the spec that checks them against core. */
+export const getBundledIconNames = () => Object.keys(bundled).sort();
+//# sourceMappingURL=bundled-icons.js.map

package/dist/collection/components/pf-icon/bundled-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundled-icons.js","sourceRoot":"","sources":["../../../src/components/pf-icon/bundled-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,MAAM,EACN,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,MAAM,GACP,MAAM,qCAAqC,CAAC;AAE7C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,UAAU;IACvB,cAAc,EAAE,aAAa;IAC7B,iBAAiB,EAAE,gBAAgB;IACnC,cAAc,EAAE,aAAa;IAC7B,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,YAAY;IAC3B,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,YAAY;IAC3B,mBAAmB,EAAE,iBAAiB;IACtC,oBAAoB,EAAE,kBAAkB;IACxC,cAAc,EAAE,aAAa;IAC7B,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAEtE,kFAAkF;AAClF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC","sourcesContent":["import { registerIconGlyphs } from '@pitchfork-ui/core';\nimport {\n  faBarChart,\n  faBell,\n  faCalendar,\n  faCircleCheck,\n  faCircleQuestion,\n  faCircleXmark,\n  faCopy,\n  faCreditCard,\n  faFile,\n  faFolderOpen,\n  faSquareCaretLeft,\n  faSquareCaretRight,\n  faSquareCheck,\n  faStar,\n  faUser,\n} from '@fortawesome/free-regular-svg-icons';\n\n/**\n * The Font Awesome regular icons this package ships, registered into the\n * shared registry on import.\n *\n * An explicit list, not the whole free-regular set, so a consumer's bundle\n * carries only these — the same policy the React library follows. It has to\n * be registered here as well as there, because a consumer using only the\n * custom elements never loads the React package.\n *\n * Anything outside the list is not \"an icon the library lacks\": register it\n * with `registerIconGlyphs()` from the peer dependency you already install.\n *\n * The *names* are core's `BUNDLED_FA_ICON_NAMES`, which the spec asserts this\n * map against. Adding an icon to one layer and forgetting the other would\n * otherwise leave a name that draws in React and nothing in `<pf-icon>`, with\n * every test in both layers passing.\n */\nconst bundled = {\n  bell: faBell,\n  calendar: faCalendar,\n  'chart-bar': faBarChart,\n  'circle-check': faCircleCheck,\n  'circle-question': faCircleQuestion,\n  'circle-xmark': faCircleXmark,\n  copy: faCopy,\n  'credit-card': faCreditCard,\n  file: faFile,\n  'folder-open': faFolderOpen,\n  'square-caret-left': faSquareCaretLeft,\n  'square-caret-right': faSquareCaretRight,\n  'square-check': faSquareCheck,\n  star: faStar,\n  user: faUser,\n};\n\nexport const registerBundledIcons = () => registerIconGlyphs(bundled);\n\n/** The names this package bundles, for the spec that checks them against core. */\nexport const getBundledIconNames = () => Object.keys(bundled).sort();\n"]}

package/dist/collection/components/pf-icon/custom-icons.js

@@ -0,0 +1,37 @@
+import { customGlyphAttributes, resolveCustomGlyph } from "@pitchfork-ui/core";
+import { h } from "@stencil/core";
+/*
+ * The glyphs the Font Awesome regular set does not carry, rendered from the
+ * shared data in @pitchfork-ui/core.
+ *
+ * The geometry used to be written out here as Stencil JSX and a second time as
+ * React JSX in the React `Icon`. Two copies of a shape agree on the day they
+ * are written, and no test in either layer could have seen them stop agreeing,
+ * because each layer only ever rendered its own. So core holds the shapes and
+ * this maps them to Stencil's hyphenated presentation attributes -- which is
+ * the whole reason core holds *data*: it has no vdom of its own, and the
+ * attribute names differ between the two layers.
+ *
+ * A separate module because Stencil allows a component file only one export.
+ */
+/** The glyph for a name, as a VNode, or undefined if it is not a custom one. */
+export const renderCustomIcon = (name) => {
+    const glyph = resolveCustomGlyph(name);
+    return glyph ? renderGlyph(glyph) : undefined;
+};
+const renderGlyph = (glyph) => {
+    const { viewBox, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin } = customGlyphAttributes(glyph);
+    return (h("svg", {
+        // The Font Awesome branch has always exposed this part; the custom
+        // glyphs did not, so `pf-icon::part(svg)` reached two thirds of the
+        // icons and silently missed every chevron.
+        part: "svg", width: "1em", height: "1em", viewBox: viewBox, fill: fill, stroke: stroke, "stroke-width": strokeWidth, "stroke-linecap": strokeLinecap, "stroke-linejoin": strokeLinejoin, focusable: "false", "aria-hidden": "true"
+    }, glyph.shapes.map((shape) => {
+        if (shape.kind === 'polyline')
+            return h("polyline", { points: shape.points });
+        if (shape.kind === 'circle')
+            return h("circle", { cx: shape.cx, cy: shape.cy, r: shape.r });
+        return h("path", { d: shape.d });
+    })));
+};
+//# sourceMappingURL=custom-icons.js.map

package/dist/collection/components/pf-icon/custom-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-icons.js","sourceRoot":"","sources":["../../../src/components/pf-icon/custom-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EAAE,CAAC,EAAc,MAAM,eAAe,CAAC;AAE9C;;;;;;;;;;;;;GAaG;AAEH,gFAAgF;AAChF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAqB,EAAE;IAClE,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAkB,EAAS,EAAE;IAChD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,GACzE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAE/B,OAAO,CACL;QACE,mEAAmE;QACnE,oEAAoE;QACpE,2CAA2C;QAC3C,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,kBACA,WAAW,oBACT,aAAa,qBACZ,cAAc,EAC/B,SAAS,EAAC,OAAO,iBACL,MAAM,IAEjB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC1B,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU;YAAE,OAAO,gBAAU,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CAAC;QACzE,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO,cAAQ,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAI,CAAC;QACvF,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,CAAC,GAAI,CAAC;IAC9B,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { type CustomGlyph, customGlyphAttributes, resolveCustomGlyph } from '@pitchfork-ui/core';\nimport { h, type VNode } from '@stencil/core';\n\n/*\n * The glyphs the Font Awesome regular set does not carry, rendered from the\n * shared data in @pitchfork-ui/core.\n *\n * The geometry used to be written out here as Stencil JSX and a second time as\n * React JSX in the React `Icon`. Two copies of a shape agree on the day they\n * are written, and no test in either layer could have seen them stop agreeing,\n * because each layer only ever rendered its own. So core holds the shapes and\n * this maps them to Stencil's hyphenated presentation attributes -- which is\n * the whole reason core holds *data*: it has no vdom of its own, and the\n * attribute names differ between the two layers.\n *\n * A separate module because Stencil allows a component file only one export.\n */\n\n/** The glyph for a name, as a VNode, or undefined if it is not a custom one. */\nexport const renderCustomIcon = (name: string): VNode | undefined => {\n  const glyph = resolveCustomGlyph(name);\n  return glyph ? renderGlyph(glyph) : undefined;\n};\n\nconst renderGlyph = (glyph: CustomGlyph): VNode => {\n  const { viewBox, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin } =\n    customGlyphAttributes(glyph);\n\n  return (\n    <svg\n      // The Font Awesome branch has always exposed this part; the custom\n      // glyphs did not, so `pf-icon::part(svg)` reached two thirds of the\n      // icons and silently missed every chevron.\n      part=\"svg\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox={viewBox}\n      fill={fill}\n      stroke={stroke}\n      stroke-width={strokeWidth}\n      stroke-linecap={strokeLinecap}\n      stroke-linejoin={strokeLinejoin}\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      {glyph.shapes.map((shape) => {\n        if (shape.kind === 'polyline') return <polyline points={shape.points} />;\n        if (shape.kind === 'circle') return <circle cx={shape.cx} cy={shape.cy} r={shape.r} />;\n        return <path d={shape.d} />;\n      })}\n    </svg>\n  );\n};\n"]}

package/dist/collection/components/pf-icon/icon-names.js

@@ -0,0 +1,9 @@
+import { getCustomGlyphNames, getRegisteredIconNames } from "@pitchfork-ui/core";
+import { getBundledIconNames } from "./bundled-icons";
+/** Every name `<pf-icon>` can draw without anything being registered first. */
+export const getAvailableIconNames = () => [...new Set([...getRegisteredIconNames(), ...getCustomGlyphNames()])].sort();
+/** Just the custom glyphs, the ones with no Font Awesome equivalent. */
+export const getCustomIconNames = () => getCustomGlyphNames();
+/** The Font Awesome names this package bundles, for the spec that checks them. */
+export const bundledIconNames = () => getBundledIconNames();
+//# sourceMappingURL=icon-names.js.map

package/dist/collection/components/pf-icon/icon-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-names.js","sourceRoot":"","sources":["../../../src/components/pf-icon/icon-names.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,+EAA+E;AAC/E,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CACxC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,sBAAsB,EAAE,EAAE,GAAG,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAE/E,wEAAwE;AACxE,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC;AAE9D,kFAAkF;AAClF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC","sourcesContent":["import { getCustomGlyphNames, getRegisteredIconNames } from '@pitchfork-ui/core';\nimport { getBundledIconNames } from './bundled-icons';\n\n/** Every name `<pf-icon>` can draw without anything being registered first. */\nexport const getAvailableIconNames = () =>\n  [...new Set([...getRegisteredIconNames(), ...getCustomGlyphNames()])].sort();\n\n/** Just the custom glyphs, the ones with no Font Awesome equivalent. */\nexport const getCustomIconNames = () => getCustomGlyphNames();\n\n/** The Font Awesome names this package bundles, for the spec that checks them. */\nexport const bundledIconNames = () => getBundledIconNames();\n"]}

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

@@ -0,0 +1,17 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* The glyph scales with the surrounding text, as the React Icon does. */
+  line-height: 1;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+svg {
+  display: block;
+  height: 1em;
+  width: 1em;
+}

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

@@ -0,0 +1,105 @@
+import { getIconPaths, normalizeIconName, resolveIconGlyph } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+import { registerBundledIcons } from "./bundled-icons";
+import { renderCustomIcon } from "./custom-icons";
+// Called rather than imported for its side effect: a side-effect-only
+// import is something a bundler may drop, and did.
+registerBundledIcons();
+const warned = new Set();
+const warnUnknown = (name) => {
+    if (warned.has(name))
+        return;
+    warned.add(name);
+    // Deliberately not behind a build-time DEV guard: the React library lost
+    // this warning to exactly that, and unknown names failed in silence.
+    console.warn(`[pitchfork-ui] <pf-icon name="${name}"> is not registered, so nothing was drawn. ` +
+        `Register it with registerIconGlyphs({ '${name}': <the icon> }) from @pitchfork-ui/core.`);
+};
+/**
+ * One glyph from the icon registry.
+ *
+ * The registry is core's, not this element's, and that is deliberate: a
+ * consumer calling `registerIcons()` has to get the icon in the React
+ * components *and* here, and a registry per layer would silently give them
+ * one or the other. A name the registry does not hold renders nothing and
+ * warns once.
+ *
+ * @part svg - the rendered glyph.
+ */
+export class PfIcon {
+    /** A registered Font Awesome name, one of its aliases, or a custom glyph. */
+    name;
+    /**
+     * Accessible name. Without one the icon is decorative and hidden from
+     * assistive technology, which is the right default beside a text label.
+     */
+    label;
+    render() {
+        const custom = renderCustomIcon(this.name) ?? renderCustomIcon(normalizeIconName(this.name));
+        const glyph = custom ? undefined : resolveIconGlyph(this.name);
+        if (!custom && !glyph) {
+            warnUnknown(this.name);
+            return null;
+        }
+        return (h(Host, { role: this.label ? 'img' : null, "aria-label": this.label, "aria-hidden": this.label ? null : 'true' }, custom ?? this.renderGlyph(glyph)));
+    }
+    renderGlyph(glyph) {
+        const { viewBox, paths } = getIconPaths(glyph);
+        return (h("svg", { part: "svg", width: "1em", height: "1em", viewBox: viewBox, fill: "currentColor", focusable: "false", "aria-hidden": "true" }, paths.map((d) => (h("path", { d: d })))));
+    }
+    static get is() { return "pf-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A registered Font Awesome name, one of its aliases, or a custom glyph."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name. Without one the icon is decorative and hidden from\nassistive technology, which is the right default beside a text label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["../../../src/components/pf-icon/pf-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,sEAAsE;AACtE,mDAAmD;AACnD,oBAAoB,EAAE,CAAC;AAEvB,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;AAEjC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;IACnC,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,OAAO;IAC7B,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjB,yEAAyE;IACzE,qEAAqE;IACrE,OAAO,CAAC,IAAI,CACV,iCAAiC,IAAI,8CAA8C;QACjF,0CAA0C,IAAI,2CAA2C,CAC5F,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,MAAM;IACjB,6EAA6E;IACrE,IAAI,CAAU;IAEtB;;;OAGG;IACK,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7F,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE/D,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;YACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACvB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,gBACnB,IAAI,CAAC,KAAK,iBACT,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,IAEtC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,KAAM,CAAC,CAC9B,CACR,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAuD;QACzE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CACL,WACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,OAAO,iBACL,MAAM,IAEjB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChB,YAAM,CAAC,EAAE,CAAC,GAAI,CACf,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { getIconPaths, normalizeIconName, resolveIconGlyph } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { registerBundledIcons } from './bundled-icons';\nimport { renderCustomIcon } from './custom-icons';\n\n// Called rather than imported for its side effect: a side-effect-only\n// import is something a bundler may drop, and did.\nregisterBundledIcons();\n\nconst warned = new Set<string>();\n\nconst warnUnknown = (name: string) => {\n  if (warned.has(name)) return;\n  warned.add(name);\n  // Deliberately not behind a build-time DEV guard: the React library lost\n  // this warning to exactly that, and unknown names failed in silence.\n  console.warn(\n    `[pitchfork-ui] <pf-icon name=\"${name}\"> is not registered, so nothing was drawn. ` +\n      `Register it with registerIconGlyphs({ '${name}': <the icon> }) from @pitchfork-ui/core.`,\n  );\n};\n\n/**\n * One glyph from the icon registry.\n *\n * The registry is core's, not this element's, and that is deliberate: a\n * consumer calling `registerIcons()` has to get the icon in the React\n * components *and* here, and a registry per layer would silently give them\n * one or the other. A name the registry does not hold renders nothing and\n * warns once.\n *\n * @part svg - the rendered glyph.\n */\n@Component({\n  tag: 'pf-icon',\n  styleUrl: 'pf-icon.css',\n  shadow: true,\n})\nexport class PfIcon {\n  /** A registered Font Awesome name, one of its aliases, or a custom glyph. */\n  @Prop() name!: string;\n\n  /**\n   * Accessible name. Without one the icon is decorative and hidden from\n   * assistive technology, which is the right default beside a text label.\n   */\n  @Prop() label?: string;\n\n  render() {\n    const custom = renderCustomIcon(this.name) ?? renderCustomIcon(normalizeIconName(this.name));\n    const glyph = custom ? undefined : resolveIconGlyph(this.name);\n\n    if (!custom && !glyph) {\n      warnUnknown(this.name);\n      return null;\n    }\n\n    return (\n      <Host\n        role={this.label ? 'img' : null}\n        aria-label={this.label}\n        aria-hidden={this.label ? null : 'true'}\n      >\n        {custom ?? this.renderGlyph(glyph!)}\n      </Host>\n    );\n  }\n\n  private renderGlyph(glyph: NonNullable<ReturnType<typeof resolveIconGlyph>>) {\n    const { viewBox, paths } = getIconPaths(glyph);\n\n    return (\n      <svg\n        part=\"svg\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox={viewBox}\n        fill=\"currentColor\"\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        {paths.map((d) => (\n          <path d={d} />\n        ))}\n      </svg>\n    );\n  }\n}\n"]}