@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,232 @@
+import { clampPage, getPaginationItems } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A pager: boundary pages pinned at each end, a window around the current
+ * page, and an ellipsis wherever that leaves a gap.
+ *
+ * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone
+ * lets the element advance itself, and setting it on every `pfPageChange`
+ * keeps the consumer in charge.
+ *
+ * @slot previous - the previous button's label. Defaults to "Previous".
+ * @slot next - the next button's label. Defaults to "Next".
+ * @part nav - either of the previous/next buttons.
+ * @part previous - the previous button.
+ * @part next - the next button.
+ * @part list - the ordered list of pages.
+ * @part page - each page button.
+ * @part current - the page button for the current page.
+ * @part ellipsis - each gap.
+ */
+export class PfPagination {
+    /** The current page, 1-based. Mutable so the element can advance itself. */
+    page = 1;
+    /** How many pages there are in total. */
+    totalPages = 1;
+    /** Pages to show either side of the current one. */
+    siblingCount = 1;
+    /** Pages to pin at each end. */
+    boundaryCount = 1;
+    /** Show the previous/next buttons. Reflected for the stylesheet. */
+    showPrevNext = true;
+    /** Disable every button. Reflected for the stylesheet. */
+    disabled = false;
+    /** Accessible name for the navigation landmark. */
+    label = 'Pagination';
+    /** Emitted with the page the user asked for, already clamped to the range. */
+    pfPageChange;
+    goTo(next) {
+        if (this.disabled)
+            return;
+        const clamped = clampPage(next, Math.max(this.totalPages, 1));
+        if (clamped === this.page)
+            return;
+        this.page = clamped;
+        this.pfPageChange.emit({ page: clamped });
+    }
+    render() {
+        const total = Math.max(this.totalPages, 1);
+        // Both layers go through core, so the same inputs offer the same pages.
+        const current = clampPage(this.page, total);
+        const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);
+        return (h(Host, { key: '7ddd3d35eb175a4ccedbebdbd75dba3046c94a01', role: "navigation", "aria-label": this.label }, this.showPrevNext && (h("button", { key: 'c6ca9616468f6880fe2122f6f528faa26e43393a', class: "nav", part: "nav previous", type: "button", disabled: this.disabled || current <= 1, onClick: () => this.goTo(current - 1) }, h("slot", { key: 'af06d4de8bc34089517c2aad15b8b08c8822743c', name: "previous" }, "Previous"))), h("ol", { key: 'f82b6a3700a50ea0dad8d4416940428955a06c8f', class: "list", part: "list" }, items.map((item, index) => typeof item === 'number' ? (h("li", { key: item }, h("button", { class: { page: true, 'page--active': item === current }, part: item === current ? 'page current' : 'page', type: "button", disabled: this.disabled, "aria-current": item === current ? 'page' : null, onClick: () => this.goTo(item) }, item))) : (
+        // The gap is decorative: a screen reader walking the list gets
+        // the page numbers, and "..." would only interrupt them.
+        h("li", { key: `${item}-${index}`, class: "ellipsis", part: "ellipsis", "aria-hidden": "true" }, "...")))), this.showPrevNext && (h("button", { key: '7d6f1907a2b8ffd6cf8bfab1bc77f044d784bb94', class: "nav", part: "nav next", type: "button", disabled: this.disabled || current >= total, onClick: () => this.goTo(current + 1) }, h("slot", { key: '5886d2d27c67b79f399e1bac4359a2cf3876c6c2', name: "next" }, "Next")))));
+    }
+    static get is() { return "pf-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current page, 1-based. Mutable so the element can advance itself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page",
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many pages there are in total."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "siblingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pages to show either side of the current one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sibling-count",
+                "defaultValue": "1"
+            },
+            "boundaryCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pages to pin at each end."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "boundary-count",
+                "defaultValue": "1"
+            },
+            "showPrevNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the previous/next buttons. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-prev-next",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable every button. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the navigation landmark."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Pagination'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfPageChange",
+                "name": "pfPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the page the user asked for, already clamped to the range."
+                },
+                "complexType": {
+                    "original": "{ page: number }",
+                    "resolved": "{ page: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pf-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-pagination.js","sourceRoot":"","sources":["../../../src/components/pf-pagination/pf-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { clampPage, getPaginationItems } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * A pager: boundary pages pinned at each end, a window around the current\n * page, and an ellipsis wherever that leaves a gap.\n *\n * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone\n * lets the element advance itself, and setting it on every `pfPageChange`\n * keeps the consumer in charge.\n *\n * @slot previous - the previous button's label. Defaults to \"Previous\".\n * @slot next - the next button's label. Defaults to \"Next\".\n * @part nav - either of the previous/next buttons.\n * @part previous - the previous button.\n * @part next - the next button.\n * @part list - the ordered list of pages.\n * @part page - each page button.\n * @part current - the page button for the current page.\n * @part ellipsis - each gap.\n */\n@Component({\n  tag: 'pf-pagination',\n  styleUrl: 'pf-pagination.css',\n  shadow: true,\n})\nexport class PfPagination {\n  /** The current page, 1-based. Mutable so the element can advance itself. */\n  @Prop({ mutable: true }) page = 1;\n\n  /** How many pages there are in total. */\n  @Prop() totalPages = 1;\n\n  /** Pages to show either side of the current one. */\n  @Prop() siblingCount = 1;\n\n  /** Pages to pin at each end. */\n  @Prop() boundaryCount = 1;\n\n  /** Show the previous/next buttons. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showPrevNext = true;\n\n  /** Disable every button. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the navigation landmark. */\n  @Prop() label = 'Pagination';\n\n  /** Emitted with the page the user asked for, already clamped to the range. */\n  @Event() pfPageChange!: EventEmitter<{ page: number }>;\n\n  private goTo(next: number) {\n    if (this.disabled) return;\n\n    const clamped = clampPage(next, Math.max(this.totalPages, 1));\n    if (clamped === this.page) return;\n\n    this.page = clamped;\n    this.pfPageChange.emit({ page: clamped });\n  }\n\n  render() {\n    const total = Math.max(this.totalPages, 1);\n    // Both layers go through core, so the same inputs offer the same pages.\n    const current = clampPage(this.page, total);\n    const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);\n\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav previous\"\n            type=\"button\"\n            disabled={this.disabled || current <= 1}\n            onClick={() => this.goTo(current - 1)}\n          >\n            {/*\n              Slot fallback is the web-component answer to React's\n              `prevLabel = 'Previous'` default: the consumer overrides it by\n              slotting something, and gets the text if they do not.\n            */}\n            <slot name=\"previous\">Previous</slot>\n          </button>\n        )}\n\n        <ol class=\"list\" part=\"list\">\n          {items.map((item, index) =>\n            typeof item === 'number' ? (\n              <li key={item}>\n                <button\n                  class={{ page: true, 'page--active': item === current }}\n                  part={item === current ? 'page current' : 'page'}\n                  type=\"button\"\n                  disabled={this.disabled}\n                  aria-current={item === current ? 'page' : null}\n                  onClick={() => this.goTo(item)}\n                >\n                  {item}\n                </button>\n              </li>\n            ) : (\n              // The gap is decorative: a screen reader walking the list gets\n              // the page numbers, and \"...\" would only interrupt them.\n              <li key={`${item}-${index}`} class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">\n                ...\n              </li>\n            ),\n          )}\n        </ol>\n\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav next\"\n            type=\"button\"\n            disabled={this.disabled || current >= total}\n            onClick={() => this.goTo(current + 1)}\n          >\n            <slot name=\"next\">Next</slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-pie-chart/pf-pie-chart.css

@@ -0,0 +1,115 @@
+/* Mobile first: the legend under the chart, beside it on a wider screen. */
+:host {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  :host {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--space-6);
+  }
+}
+
+.visual {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  position: relative;
+}
+
+/*
+ * A registered custom property, because an unregistered one cannot be
+ * animated: `--pf-pie-sweep` has to interpolate as a percentage for the
+ * sweep to happen at all, and without `@property` it would jump from 0% to
+ * 100% at the halfway point. Declared here rather than relying on the React
+ * library's copy — `@property` registers document-globally, but a consumer
+ * who ships only the elements has no other source for it.
+ */
+@property --pf-pie-sweep {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.gradient {
+  --pf-pie-sweep: 100%;
+
+  animation: pf-pie-sweep var(--duration-slow) var(--easing-decelerate);
+  background-image: var(--pf-pie-gradient);
+  border-radius: inherit;
+  inset: 0;
+  mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);
+  position: absolute;
+}
+
+/* Its own copy: `@keyframes` do not cross a shadow boundary. */
+@keyframes pf-pie-sweep {
+  from {
+    --pf-pie-sweep: 0%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gradient {
+    animation: none;
+  }
+}
+
+.visual--empty {
+  outline: 1px solid var(--pf-piechart-border-muted);
+}
+
+.center {
+  align-items: center;
+  background: var(--pf-piechart-bg);
+  border-radius: var(--radius-full);
+  color: var(--pf-piechart-text);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  justify-content: center;
+  line-height: 1.2;
+  position: relative;
+  text-align: center;
+  z-index: 1;
+}
+
+.legend {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .legend {
+    min-width: 180px;
+    width: auto;
+  }
+}
+
+/*
+ * Hidden rather than dropped, so the slices stay slotted and `slotchange`
+ * still fires. Two classes deep, because the tie breaks on source order.
+ */
+.legend.legend--hidden {
+  display: none;
+}
+
+/* The slices are grid children of the list, not of a box inside it. */
+.legend slot {
+  display: contents;
+}

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

@@ -0,0 +1,226 @@
+import { clampPieCutout, pieConicGradient, preparePieSegments, roundPercentages, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A pie or donut over `pf-pie-slice` children.
+ *
+ * The chart owns the two things a slice cannot know: its share of the total
+ * and its colour. Both go to the slice, which draws its own legend row —
+ * a slot renders its assigned content once and in one place, so a legend
+ * built in the shadow root could never reach labels that live in the light
+ * DOM.
+ *
+ * All of the arithmetic is core's, so this and the React `PieChart` show the
+ * same breakdown, down to the legend's percentages summing to 100.
+ *
+ * @slot - the `pf-pie-slice` children.
+ * @slot center - what goes in the hole.
+ * @slot empty - what to show when nothing is drawable.
+ * @part visual - the circle.
+ * @part gradient - the layer the wedges are painted on.
+ * @part center - the hole in the middle.
+ * @part legend - the list the slices are slotted into.
+ */
+export class PfPieChart {
+    el;
+    /** Diameter, in pixels. Never below 120, where the ring stops reading. */
+    size = 192;
+    /** The hole in the middle, as a fraction of the diameter. */
+    cutout = 0.58;
+    /** Show the legend the slices make up. Reflected. */
+    showLegend = true;
+    /** The chart's accessible name. */
+    label = 'Pie chart';
+    /** The gradient painting the wedges, which only the chart can work out. */
+    gradient = 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';
+    /** Whether anything is drawable, which decides between chart and empty state. */
+    hasData = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * Re-reads the slices, for a consumer who changed a value through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested chart owns its own slices. */
+    get slices() {
+        return Array.from(this.el.querySelectorAll('pf-pie-slice')).filter((slice) => slice.parentElement === this.el);
+    }
+    /**
+     * The property if the slice has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    read(slice) {
+        const node = slice;
+        const value = node.value ?? Number(slice.getAttribute('value'));
+        return {
+            value: Number(value),
+            color: node.color ?? slice.getAttribute('color') ?? undefined,
+        };
+    }
+    sync() {
+        const slices = this.slices;
+        const segments = preparePieSegments(slices.map((slice) => this.read(slice)));
+        const shares = roundPercentages(segments.map((segment) => segment.percentage));
+        this.hasData = segments.length > 0;
+        this.gradient = this.hasData
+            ? pieConicGradient(segments)
+            : 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';
+        /*
+         * `index` is the slice's place in the original children, which is what
+         * carries the answer back to the right slice: `preparePieSegments` drops
+         * the ones that are not drawable, so its own positions no longer line up
+         * with the children.
+         */
+        const bySlice = new Map(segments.map((segment, position) => [segment.index, position]));
+        for (const [index, slice] of slices.entries()) {
+            const position = bySlice.get(index);
+            const node = slice;
+            node.drawn = position !== undefined;
+            node.swatch = position === undefined ? '' : segments[position].color;
+            node.share = position === undefined ? 0 : shares[position];
+        }
+    }
+    render() {
+        const size = Math.max(Number(this.size) || 192, 120);
+        const centerSize = Math.round(size * clampPieCutout(Number(this.cutout)));
+        return (h(Host, { key: '022a7813d1656d3dbbfe1da544ba8d141a02b027' }, h("div", { key: '7cdca0aa65218b02f82a52eb6b7b56e466a8e88d', class: { visual: true, 'visual--empty': !this.hasData }, part: "visual", role: "img", "aria-label": this.label, style: { width: `${size}px`, height: `${size}px` } }, h("div", { key: 'a9117ff8be6a7365368b2a137d9be1ac087f9a5e', class: "gradient", part: "gradient", "aria-hidden": "true", style: { '--pf-pie-gradient': this.gradient } }), h("div", { key: '0a952bb9a7bdaa508bd3b700f9ca39deaa25fede', class: "center", part: "center", style: { width: `${centerSize}px`, height: `${centerSize}px` } }, this.hasData ? h("slot", { name: "center" }) : h("slot", { name: "empty" }, "No data"))), h("ul", { key: '4700e4485029a450f28e8aa18dd1f53b6891b3fe', class: { legend: true, 'legend--hidden': !this.showLegend }, part: "legend" }, h("slot", { key: 'dd50658f3539b602ef305d24fd66d3b3c87eb552', onSlotchange: () => this.refresh() }))));
+    }
+    static get is() { return "pf-pie-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-pie-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-pie-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter, in pixels. Never below 120, where the ring stops reading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "192"
+            },
+            "cutout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The hole in the middle, as a fraction of the diameter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cutout",
+                "defaultValue": "0.58"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the legend the slices make up. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-legend",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The chart's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Pie chart'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "gradient": {},
+            "hasData": {}
+        };
+    }
+    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 slices, for a consumer who changed a value through its\n*property* \u2014 which leaves no attribute and fires no `slotchange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "cutout",
+                "methodName": "sync"
+            }];
+    }
+}
+//# sourceMappingURL=pf-pie-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-pie-chart.js","sourceRoot":"","sources":["../../../src/components/pf-pie-chart/pf-pie-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  clampPieCutout,\n  pieConicGradient,\n  preparePieSegments,\n  roundPercentages,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A pie or donut over `pf-pie-slice` children.\n *\n * The chart owns the two things a slice cannot know: its share of the total\n * and its colour. Both go to the slice, which draws its own legend row —\n * a slot renders its assigned content once and in one place, so a legend\n * built in the shadow root could never reach labels that live in the light\n * DOM.\n *\n * All of the arithmetic is core's, so this and the React `PieChart` show the\n * same breakdown, down to the legend's percentages summing to 100.\n *\n * @slot - the `pf-pie-slice` children.\n * @slot center - what goes in the hole.\n * @slot empty - what to show when nothing is drawable.\n * @part visual - the circle.\n * @part gradient - the layer the wedges are painted on.\n * @part center - the hole in the middle.\n * @part legend - the list the slices are slotted into.\n */\n@Component({\n  tag: 'pf-pie-chart',\n  styleUrl: 'pf-pie-chart.css',\n  shadow: true,\n})\nexport class PfPieChart {\n  @Element() el!: HTMLElement;\n\n  /** Diameter, in pixels. Never below 120, where the ring stops reading. */\n  @Prop() size = 192;\n\n  /** The hole in the middle, as a fraction of the diameter. */\n  @Prop() cutout = 0.58;\n\n  /** Show the legend the slices make up. Reflected. */\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** The chart's accessible name. */\n  @Prop() label = 'Pie chart';\n\n  /** The gradient painting the wedges, which only the chart can work out. */\n  @State() gradient = 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n  /** Whether anything is drawable, which decides between chart and empty state. */\n  @State() hasData = false;\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  /**\n   * Re-reads the slices, for a consumer who changed a value through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested chart owns its own slices. */\n  private get slices(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-pie-slice')).filter(\n      (slice) => slice.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the slice has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private read(slice: HTMLElement) {\n    const node = slice as HTMLElement & { value?: number; color?: string };\n    const value = node.value ?? Number(slice.getAttribute('value'));\n    return {\n      value: Number(value),\n      color: node.color ?? slice.getAttribute('color') ?? undefined,\n    };\n  }\n\n  @Watch('cutout')\n  sync() {\n    const slices = this.slices;\n    const segments = preparePieSegments(slices.map((slice) => this.read(slice)));\n    const shares = roundPercentages(segments.map((segment) => segment.percentage));\n\n    this.hasData = segments.length > 0;\n    this.gradient = this.hasData\n      ? pieConicGradient(segments)\n      : 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n    /*\n     * `index` is the slice's place in the original children, which is what\n     * carries the answer back to the right slice: `preparePieSegments` drops\n     * the ones that are not drawable, so its own positions no longer line up\n     * with the children.\n     */\n    const bySlice = new Map(segments.map((segment, position) => [segment.index, position]));\n\n    for (const [index, slice] of slices.entries()) {\n      const position = bySlice.get(index);\n      const node = slice as HTMLElement & { swatch: string; share: number; drawn: boolean };\n\n      node.drawn = position !== undefined;\n      node.swatch = position === undefined ? '' : segments[position].color;\n      node.share = position === undefined ? 0 : shares[position];\n    }\n  }\n\n  render() {\n    const size = Math.max(Number(this.size) || 192, 120);\n    const centerSize = Math.round(size * clampPieCutout(Number(this.cutout)));\n\n    return (\n      <Host>\n        <div\n          class={{ visual: true, 'visual--empty': !this.hasData }}\n          part=\"visual\"\n          role=\"img\"\n          aria-label={this.label}\n          style={{ width: `${size}px`, height: `${size}px` }}\n        >\n          {/*\n            The gradient goes on a real child rather than a `::before`, so a\n            contrast checker can see the centre label against it.\n          */}\n          <div\n            class=\"gradient\"\n            part=\"gradient\"\n            aria-hidden=\"true\"\n            style={{ '--pf-pie-gradient': this.gradient }}\n          ></div>\n          <div\n            class=\"center\"\n            part=\"center\"\n            style={{ width: `${centerSize}px`, height: `${centerSize}px` }}\n          >\n            {this.hasData ? <slot name=\"center\" /> : <slot name=\"empty\">No data</slot>}\n          </div>\n        </div>\n\n        {/*\n          The list stays in the tree whether or not the legend is shown: a\n          slot that is not rendered never fires `slotchange`, so slices added\n          later would stay invisible for good — and the slices have to be\n          read even when the legend is hidden, because they are the data.\n        */}\n        <ul class={{ legend: true, 'legend--hidden': !this.showLegend }} part=\"legend\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,37 @@
+:host {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 10px 1fr auto;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * A slice the chart did not draw is not a legend row either: a legend listing
+ * a colour that appears nowhere in the chart is worse than a shorter legend.
+ */
+:host(:not([drawn])) {
+  display: none;
+}
+
+.dot {
+  border-radius: var(--radius-full);
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+}
+
+.label {
+  color: var(--pf-piechart-text);
+  font-size: var(--font-size-sm);
+  min-width: 0;
+}
+
+.value {
+  color: var(--pf-piechart-text-muted);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}