@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-radar-chart.entry.js

@@ -0,0 +1,183 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+//#region src/radar.ts
+/** A radar needs at least three axes to enclose anything. */
+var RADAR_MINIMUM_AXES = 3;
+/** A point at `radius` from the centre, along `angle` in radians. */
+function polarPoint(center, radius, angle) {
+	return {
+		x: center + radius * Math.cos(angle),
+		y: center + radius * Math.sin(angle)
+	};
+}
+/**
+* The angle of each axis, in radians, evenly spaced.
+*
+* The first points **up**, not right: a radar whose first axis is at three
+* o'clock reads as rotated, and every radar anyone has seen starts at the
+* top. In SVG that is `-π/2`, because y grows downwards.
+*/
+function radarAxisAngles(count) {
+	if (!(count > 0)) return [];
+	const step = 2 * Math.PI / count;
+	return Array.from({ length: count }, (_, index) => -Math.PI / 2 + index * step);
+}
+/**
+* The axes worth drawing: the ones with a usable value.
+*
+* A value that is not a number is dropped, since `NaN >= 0` is false — which
+* is also what the React `RadarChart` relied on, by accident rather than by
+* saying so.
+*/
+function usableRadarAxes(data) {
+	return data.filter((item) => Number.isFinite(item.value) && item.value >= 0);
+}
+/**
+* The scale's top.
+*
+* The explicit `max` wins, even when a value exceeds it — a consumer who set
+* a scale means it, and the polygon is clamped to the outer ring instead.
+* Otherwise the largest value, never below 1, so a chart of all zeroes has a
+* grid rather than a division by zero.
+*/
+function radarMax(data, explicit) {
+	if (typeof explicit === "number" && explicit > 0) return explicit;
+	const largest = Math.max(...usableRadarAxes(data).map((item) => item.value), 1);
+	return largest > 0 ? largest : 1;
+}
+/** Points as an SVG `points` attribute, rounded to two places. */
+function pointsToAttribute(points) {
+	return points.map((point) => `${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(" ");
+}
+/**
+* The grid rings, outermost last, as `points` attributes.
+*
+* `levels` rings, the last of which is the outer edge — so a four-level radar
+* has rings at 25%, 50%, 75% and 100% and the outermost doubles as the
+* chart's boundary. Never fewer than two, or there is no grid to read a value
+* against.
+*/
+function radarGridPolygons(angles, center, radius, levels) {
+	const rings = Math.max(2, Math.floor(levels) || 2);
+	return Array.from({ length: rings }, (_, index) => {
+		const ratio = (index + 1) / rings;
+		return pointsToAttribute(angles.map((angle) => polarPoint(center, radius * ratio, angle)));
+	});
+}
+/**
+* Where each value lands, clamped into the grid.
+*
+* Clamped rather than allowed to overshoot, because a point outside the outer
+* ring is drawn outside the chart's own box and clipped by the viewBox: a
+* value above `max` would simply disappear.
+*/
+function radarValuePoints(values, max, angles, center, radius) {
+	const top = max > 0 ? max : 1;
+	return angles.map((angle, index) => {
+		const value = values[index];
+		return polarPoint(center, radius * (Number.isFinite(value) ? Math.max(0, Math.min(1, value / top)) : 0), angle);
+	});
+}
+
+const pfRadarChartCss = () => `:host{align-items:stretch;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)}}.svg{display:block;height:auto;overflow:visible;width:min(100%, 320px)}.grid{fill:none;stroke:var(--pf-radar-grid-stroke);stroke-width:1}.axis{stroke:var(--pf-radar-axis-stroke);stroke-width:1}.area{fill:var(--pf-radar-fill);stroke:var(--pf-radar-stroke);stroke-width:2}.point{fill:var(--pf-radar-stroke);stroke:var(--pf-radar-point-stroke);stroke-width:1.5}.axis-label{fill:var(--pf-radar-label);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium)}.value{animation:pf-radar-grow var(--duration-slow) var(--easing-decelerate)}@keyframes pf-radar-grow{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.value{animation:none}}.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:140px;width:auto}}.legend.legend--hidden{display:none}.legend slot{display:contents}.empty{align-items:center;border:1px dashed var(--pf-radar-empty-border);border-radius:var(--radius-md);color:var(--pf-radar-empty-text);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:180px;min-width:260px;padding:var(--space-4);text-align:center}`;
+
+const PfRadarChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Width of the drawing's viewBox, in pixels. Never below 180. */
+    size = 280;
+    /** The scale's top. Defaults to the largest value, never below 1. */
+    max;
+    /** Grid rings, the outermost of which is the chart's edge. */
+    levels = 4;
+    showAxes = true;
+    showLegend = true;
+    /** The chart's accessible name. */
+    label = 'Radar chart';
+    /** What the axes add up to, which only the chart can see. */
+    axes = [];
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * Re-reads the axes, 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 axes.
+     *
+     * **Not** called `children`. A component class's members land on the custom
+     * element itself, so a private getter named after a DOM property shadows
+     * it: `get children()` made `this.el.children` call itself, and the mock
+     * DOM's own `getElementsByTagName` — which walks `.children` — recursed
+     * until the stack ran out. Stencil warns about a `@Prop` that shadows a
+     * prototype member (`animate` is one) but says nothing about a getter.
+     */
+    get axisElements() {
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'pf-radar-axis');
+    }
+    sync() {
+        const children = this.axisElements;
+        const read = children.map((axis) => {
+            const node = axis;
+            return {
+                // The property if the child has upgraded, the attribute if it has not.
+                label: node.label ?? axis.getAttribute('label') ?? '',
+                value: Number(node.value ?? axis.getAttribute('value')),
+            };
+        });
+        const usable = usableRadarAxes(read);
+        const drawable = usable.length >= RADAR_MINIMUM_AXES;
+        this.axes = drawable ? usable : [];
+        /*
+         * `drawn` is set per child by identity of its reading, not by position:
+         * `usableRadarAxes` drops the ones it cannot plot, so its own positions
+         * no longer line up with the children.
+         */
+        const usableSet = new Set(usable);
+        for (const [index, axis] of children.entries()) {
+            axis.drawn = drawable && usableSet.has(read[index]);
+        }
+    }
+    render() {
+        const size = Math.max(Number(this.size) || 280, 180);
+        const center = size / 2;
+        // Room for the names drawn around the edge.
+        const radius = center - 36;
+        if (this.axes.length < RADAR_MINIMUM_AXES) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "A radar chart needs at least ", RADAR_MINIMUM_AXES, " axes.")), h("ul", { class: "legend legend--hidden", part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+        }
+        const max = radarMax(this.axes, this.max);
+        const angles = radarAxisAngles(this.axes.length);
+        const rings = radarGridPolygons(angles, center, radius, Number(this.levels));
+        const points = radarValuePoints(this.axes.map((axis) => axis.value), max, angles, center, radius);
+        return (h(Host, null, h("svg", { class: "svg", part: "svg", viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": this.label }, rings.map((ring) => (h("polygon", { class: "grid", part: "grid", points: ring }))), this.showAxes &&
+            angles.map((angle) => {
+                const end = polarPoint(center, radius, angle);
+                return (h("line", { class: "axis", part: "axis", x1: center, y1: center, x2: end.x, y2: end.y }));
+            }), h("g", { class: "value", style: { transformBox: 'view-box', transformOrigin: `${center}px ${center}px` } }, h("polygon", { class: "area", part: "area", points: pointsToAttribute(points) }), points.map((point) => (h("circle", { class: "point", part: "point", cx: point.x, cy: point.y, r: "3" })))), angles.map((angle, index) => {
+            const at = polarPoint(center, radius + 18, angle);
+            return (h("text", { class: "axis-label", part: "axis-label", x: at.x, y: at.y, "text-anchor": "middle", "dominant-baseline": "middle" }, this.axes[index].label));
+        })), h("ul", { class: { legend: true, 'legend--hidden': !this.showLegend }, part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "max": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfRadarChart.style = pfRadarChartCss();
+
+export { PfRadarChart as pf_radar_chart };
+//# sourceMappingURL=pf-radar-chart.entry.js.map
+
+//# sourceMappingURL=pf-radar-chart.entry.js.map

package/dist/esm/pf-radar-chart.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-radar-chart.entry.js","sources":["../core/dist/radar.js","src/components/pf-radar-chart/pf-radar-chart.css?tag=pf-radar-chart&encapsulation=shadow","src/components/pf-radar-chart/pf-radar-chart.tsx"],"sourcesContent":["//#region src/radar.ts\n/** A radar needs at least three axes to enclose anything. */\nvar RADAR_MINIMUM_AXES = 3;\n/** A point at `radius` from the centre, along `angle` in radians. */\nfunction polarPoint(center, radius, angle) {\n\treturn {\n\t\tx: center + radius * Math.cos(angle),\n\t\ty: center + radius * Math.sin(angle)\n\t};\n}\n/**\n* The angle of each axis, in radians, evenly spaced.\n*\n* The first points **up**, not right: a radar whose first axis is at three\n* o'clock reads as rotated, and every radar anyone has seen starts at the\n* top. In SVG that is `-π/2`, because y grows downwards.\n*/\nfunction radarAxisAngles(count) {\n\tif (!(count > 0)) return [];\n\tconst step = 2 * Math.PI / count;\n\treturn Array.from({ length: count }, (_, index) => -Math.PI / 2 + index * step);\n}\n/**\n* The axes worth drawing: the ones with a usable value.\n*\n* A value that is not a number is dropped, since `NaN >= 0` is false — which\n* is also what the React `RadarChart` relied on, by accident rather than by\n* saying so.\n*/\nfunction usableRadarAxes(data) {\n\treturn data.filter((item) => Number.isFinite(item.value) && item.value >= 0);\n}\n/**\n* The scale's top.\n*\n* The explicit `max` wins, even when a value exceeds it — a consumer who set\n* a scale means it, and the polygon is clamped to the outer ring instead.\n* Otherwise the largest value, never below 1, so a chart of all zeroes has a\n* grid rather than a division by zero.\n*/\nfunction radarMax(data, explicit) {\n\tif (typeof explicit === \"number\" && explicit > 0) return explicit;\n\tconst largest = Math.max(...usableRadarAxes(data).map((item) => item.value), 1);\n\treturn largest > 0 ? largest : 1;\n}\n/** Points as an SVG `points` attribute, rounded to two places. */\nfunction pointsToAttribute(points) {\n\treturn points.map((point) => `${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(\" \");\n}\n/**\n* The grid rings, outermost last, as `points` attributes.\n*\n* `levels` rings, the last of which is the outer edge — so a four-level radar\n* has rings at 25%, 50%, 75% and 100% and the outermost doubles as the\n* chart's boundary. Never fewer than two, or there is no grid to read a value\n* against.\n*/\nfunction radarGridPolygons(angles, center, radius, levels) {\n\tconst rings = Math.max(2, Math.floor(levels) || 2);\n\treturn Array.from({ length: rings }, (_, index) => {\n\t\tconst ratio = (index + 1) / rings;\n\t\treturn pointsToAttribute(angles.map((angle) => polarPoint(center, radius * ratio, angle)));\n\t});\n}\n/**\n* Where each value lands, clamped into the grid.\n*\n* Clamped rather than allowed to overshoot, because a point outside the outer\n* ring is drawn outside the chart's own box and clipped by the viewBox: a\n* value above `max` would simply disappear.\n*/\nfunction radarValuePoints(values, max, angles, center, radius) {\n\tconst top = max > 0 ? max : 1;\n\treturn angles.map((angle, index) => {\n\t\tconst value = values[index];\n\t\treturn polarPoint(center, radius * (Number.isFinite(value) ? Math.max(0, Math.min(1, value / top)) : 0), angle);\n\t});\n}\n//#endregion\nexport { RADAR_MINIMUM_AXES, pointsToAttribute, polarPoint, radarAxisAngles, radarGridPolygons, radarMax, radarValuePoints, usableRadarAxes };\n","/* Mobile first: the legend under the chart, beside it on a wider screen. */\n:host {\n  align-items: stretch;\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n    gap: var(--space-6);\n  }\n}\n\n.svg {\n  display: block;\n  height: auto;\n  /* The names are drawn outside the rings, so the box must not clip. */\n  overflow: visible;\n  width: min(100%, 320px);\n}\n\n.grid {\n  fill: none;\n  stroke: var(--pf-radar-grid-stroke);\n  stroke-width: 1;\n}\n\n.axis {\n  stroke: var(--pf-radar-axis-stroke);\n  stroke-width: 1;\n}\n\n.area {\n  fill: var(--pf-radar-fill);\n  stroke: var(--pf-radar-stroke);\n  stroke-width: 2;\n}\n\n.point {\n  fill: var(--pf-radar-stroke);\n  stroke: var(--pf-radar-point-stroke);\n  stroke-width: 1.5;\n}\n\n.axis-label {\n  fill: var(--pf-radar-label);\n  font-size: var(--font-size-2xs);\n  font-weight: var(--font-weight-medium);\n}\n\n.value {\n  animation: pf-radar-grow var(--duration-slow) var(--easing-decelerate);\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-radar-grow {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .value {\n    animation: none;\n  }\n}\n\n.legend {\n  display: grid;\n  gap: var(--space-2);\n  list-style: none;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  width: 100%;\n}\n\n@media (--sm) {\n  .legend {\n    min-width: 140px;\n    width: auto;\n  }\n}\n\n/*\n * Hidden rather than dropped, so the axes stay slotted and `slotchange` still\n * fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The axes are grid children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n\n.empty {\n  align-items: center;\n  border: 1px dashed var(--pf-radar-empty-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-radar-empty-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n  min-height: 180px;\n  min-width: 260px;\n  padding: var(--space-4);\n  text-align: center;\n}\n","import {\n  RADAR_MINIMUM_AXES,\n  pointsToAttribute,\n  polarPoint,\n  radarAxisAngles,\n  radarGridPolygons,\n  radarMax,\n  radarValuePoints,\n  usableRadarAxes,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A radar chart over `pf-radar-axis` children.\n *\n * The chart owns the drawing; each axis owns its own legend row, as a pie's\n * slices do. The axis names are attributes rather than slotted content,\n * because the chart has to draw them inside its own SVG and an SVG `<text>`\n * cannot hold arbitrary markup.\n *\n * All of the trigonometry is core's, so this and the React `RadarChart` put\n * the same numbers in the same places — the grid rings and the value polygon\n * only line up if both were built from the same centre, radius and angles.\n *\n * @slot - the `pf-radar-axis` children.\n * @slot empty - what to show when there are too few axes to enclose anything.\n * @part svg - the drawing.\n * @part grid - one grid ring.\n * @part axis - one spoke.\n * @part area - the value polygon.\n * @part point - one vertex of it.\n * @part axis-label - one name drawn around the edge.\n * @part legend - the list the axes are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-radar-chart',\n  styleUrl: 'pf-radar-chart.css',\n  shadow: true,\n})\nexport class PfRadarChart {\n  @Element() el!: HTMLElement;\n\n  /** Width of the drawing's viewBox, in pixels. Never below 180. */\n  @Prop() size = 280;\n\n  /** The scale's top. Defaults to the largest value, never below 1. */\n  @Prop() max?: number;\n\n  /** Grid rings, the outermost of which is the chart's edge. */\n  @Prop() levels = 4;\n\n  @Prop({ reflect: true }) showAxes = true;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** The chart's accessible name. */\n  @Prop() label = 'Radar chart';\n\n  /** What the axes add up to, which only the chart can see. */\n  @State() axes: { label: string; value: number }[] = [];\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 axes, 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  /**\n   * Direct children only: a nested chart owns its own axes.\n   *\n   * **Not** called `children`. A component class's members land on the custom\n   * element itself, so a private getter named after a DOM property shadows\n   * it: `get children()` made `this.el.children` call itself, and the mock\n   * DOM's own `getElementsByTagName` — which walks `.children` — recursed\n   * until the stack ran out. Stencil warns about a `@Prop` that shadows a\n   * prototype member (`animate` is one) but says nothing about a getter.\n   */\n  private get axisElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-radar-axis',\n    ) as HTMLElement[];\n  }\n\n  @Watch('max')\n  sync() {\n    const children = this.axisElements;\n    const read = children.map((axis) => {\n      const node = axis as HTMLElement & { label?: string; value?: number };\n      return {\n        // The property if the child has upgraded, the attribute if it has not.\n        label: node.label ?? axis.getAttribute('label') ?? '',\n        value: Number(node.value ?? axis.getAttribute('value')),\n      };\n    });\n\n    const usable = usableRadarAxes(read);\n    const drawable = usable.length >= RADAR_MINIMUM_AXES;\n    this.axes = drawable ? usable : [];\n\n    /*\n     * `drawn` is set per child by identity of its reading, not by position:\n     * `usableRadarAxes` drops the ones it cannot plot, so its own positions\n     * no longer line up with the children.\n     */\n    const usableSet = new Set(usable);\n    for (const [index, axis] of children.entries()) {\n      (axis as HTMLElement & { drawn: boolean }).drawn = drawable && usableSet.has(read[index]);\n    }\n  }\n\n  render() {\n    const size = Math.max(Number(this.size) || 280, 180);\n    const center = size / 2;\n    // Room for the names drawn around the edge.\n    const radius = center - 36;\n\n    if (this.axes.length < RADAR_MINIMUM_AXES) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">A radar chart needs at least {RADAR_MINIMUM_AXES} axes.</slot>\n          </div>\n          {/*\n            The list stays in the tree even with too few axes: a slot that is\n            not rendered never fires `slotchange`, so an axis added later\n            would never be counted.\n          */}\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    const max = radarMax(this.axes, this.max);\n    const angles = radarAxisAngles(this.axes.length);\n    const rings = radarGridPolygons(angles, center, radius, Number(this.levels));\n    const points = radarValuePoints(\n      this.axes.map((axis) => axis.value),\n      max,\n      angles,\n      center,\n      radius,\n    );\n\n    return (\n      <Host>\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${size} ${size}`}\n          role=\"img\"\n          aria-label={this.label}\n        >\n          {rings.map((ring) => (\n            <polygon class=\"grid\" part=\"grid\" points={ring} />\n          ))}\n\n          {this.showAxes &&\n            angles.map((angle) => {\n              const end = polarPoint(center, radius, angle);\n              return (\n                <line class=\"axis\" part=\"axis\" x1={center} y1={center} x2={end.x} y2={end.y} />\n              );\n            })}\n\n          {/*\n            The grow-from-the-centre animation has to scale about the chart's\n            middle, not about the group's own bounding box — which moves with\n            the data, so the shape would grow from wherever it happens to be\n            heaviest. `transform-origin` is what says so.\n\n            `transform-box: view-box` alongside it is the initial value in\n            current browsers (an early draft defaulted SVG to `border-box`),\n            so it is belt-and-braces rather than load-bearing — measured, by\n            removing it and watching nothing change.\n          */}\n          <g\n            class=\"value\"\n            style={{ transformBox: 'view-box', transformOrigin: `${center}px ${center}px` }}\n          >\n            <polygon class=\"area\" part=\"area\" points={pointsToAttribute(points)} />\n            {points.map((point) => (\n              <circle class=\"point\" part=\"point\" cx={point.x} cy={point.y} r=\"3\" />\n            ))}\n          </g>\n\n          {angles.map((angle, index) => {\n            const at = polarPoint(center, radius + 18, angle);\n            return (\n              <text\n                class=\"axis-label\"\n                part=\"axis-label\"\n                x={at.x}\n                y={at.y}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n              >\n                {this.axes[index].label}\n              </text>\n            );\n          })}\n        </svg>\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"],"names":[],"mappings":"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"}

package/dist/esm/pf-radio-button.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfRadioButtonCss = () => `:host{align-items:flex-start;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.input{accent-color:var(--pf-radiogroup-accent);height:18px;margin-top:2px;width:18px}.input:focus-visible{box-shadow:var(--pf-radiogroup-focus-ring, var(--pf-focus-ring));outline:none}.text{color:var(--pf-radiogroup-text);cursor:pointer;display:grid;gap:2px}.label-text{font-size:var(--font-size-md);line-height:1.3}.description{color:var(--pf-radiogroup-text-muted);font-size:var(--font-size-sm);line-height:1.35}.description:not(:has(*)){display:none}:host([disabled]) .text{cursor:not-allowed;opacity:0.6}`;
+
+const PfRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfRadioSelect = createEvent(this, "pfRadioSelect");
+    }
+    get el() { return getElement(this); }
+    /** Submitted by the group when this choice is the selected one. */
+    /**
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-radio-button[value="..."]` in a React
+     * or Angular app finds nothing. The group reads the property, so this was
+     * never a live defect here -- it is the same trap that was one in
+     * `pf-command-item`.
+     */
+    value = '';
+    /**
+     * Whether this is the chosen one. The group sets this — a consumer who sets
+     * it directly will have it overwritten the next time the group syncs.
+     */
+    checked = false;
+    /** Disable this choice alone. Reflected so the stylesheet can select on it. */
+    disabled = false;
+    /** Asks the group to select this choice. The group decides. */
+    pfRadioSelect;
+    /**
+     * The native input checks itself the instant it is clicked, before the group
+     * has had any say. Writing the property back on every render is what undoes
+     * that when the group declines — a disabled group, or a value the consumer
+     * is holding. Guarded on inequality so an unrelated re-render does not
+     * disturb it.
+     */
+    componentDidRender() {
+        const input = this.el.shadowRoot?.querySelector('input');
+        if (input && input.checked !== this.checked) {
+            input.checked = this.checked;
+        }
+    }
+    onChange = () => {
+        /*
+         * Put the dot back before asking, every time. The native input has already
+         * moved it, and nothing here knows yet whether the group will agree — it
+         * may be disabled, this choice may be disabled, or a consumer may be
+         * holding `value`. Restoring first makes every one of those paths correct
+         * without the group having to undo anything; when it does agree, `checked`
+         * flips and the next render writes the dot back on.
+         */
+        const input = this.el.shadowRoot?.querySelector('input');
+        if (input)
+            input.checked = this.checked;
+        if (this.disabled)
+            return;
+        this.pfRadioSelect.emit({ value: this.value });
+    };
+    render() {
+        return (h(Host, { key: '020ab86762039d87706de73cfc8f310fe0a4f107' }, h("input", { key: 'e071c04150c76955a04b2a5b0b801b9c6015c8d0', id: "input", part: "input", class: "input", type: "radio",
+            // Never an independent tab stop: the group drives the tab order
+            // through the host, and the host delegates focus down to here.
+            tabindex: "-1", checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("label", { key: 'bd345592c343cc38f028a671aab8a3612ccf54aa', class: "text", part: "label", htmlFor: "input" }, h("span", { key: 'f58cc544dee2150e7df08bc6e21f26b3ccf6543b', class: "label-text" }, h("slot", { key: '24fb49ee5cb132e5840448680bb73732cfac8a01' })), h("span", { key: '9d09bfae1ef9c5905a972a3b7c12ab1469f99c94', class: "description", part: "description" }, h("slot", { key: 'e0803f90fb20d9d83d8f0645aae4baefd1f43bf5', name: "description" })))));
+    }
+    static get delegatesFocus() { return true; }
+};
+PfRadioButton.style = pfRadioButtonCss();
+
+export { PfRadioButton as pf_radio_button };
+//# sourceMappingURL=pf-radio-button.entry.js.map
+
+//# sourceMappingURL=pf-radio-button.entry.js.map

package/dist/esm/pf-radio-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-radio-button.entry.js","sources":["src/components/pf-radio-button/pf-radio-button.css?tag=pf-radio-button&encapsulation=shadow","src/components/pf-radio-button/pf-radio-button.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `accent-color` on a native radio, exactly as the React component does it, so\n * the dot is the browser's and the two layers look the same.\n */\n.input {\n  accent-color: var(--pf-radiogroup-accent);\n  height: 18px;\n  margin-top: 2px;\n  width: 18px;\n}\n\n/*\n * The ring lands here rather than on the host: the host delegates focus, so\n * `:focus-visible` matches the input — measured, not assumed.\n */\n.input:focus-visible {\n  box-shadow: var(--pf-radiogroup-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.text {\n  color: var(--pf-radiogroup-text);\n  cursor: pointer;\n  display: grid;\n  gap: 2px;\n}\n\n.label-text {\n  font-size: var(--font-size-md);\n  line-height: 1.3;\n}\n\n.description {\n  color: var(--pf-radiogroup-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.35;\n}\n\n/*\n * A slot is `display: contents`, so an empty description slot leaves this\n * wrapper with no content — collapse it so the grid gap does not open.\n */\n.description:not(:has(*)) {\n  display: none;\n}\n\n:host([disabled]) .text {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One choice inside a `pf-radio-group`.\n *\n * Not form-associated, and deliberately so: a form-associated custom element\n * gets no radio grouping from the browser. Measured — checking a second one\n * leaves the first checked and the form submits *both* values, where native\n * radios submit one. So `pf-radio-group` owns the single-selection invariant\n * and the form value, and this element only asks to be chosen.\n *\n * The control is a native `<input type=\"radio\">` so the dot is the browser's,\n * drawn from `accent-color` exactly as the React component's is. It carries\n * `tabindex=\"-1\"` and the host delegates focus, which means the group governs\n * the tab order through the host while `:focus-visible` still lands on the\n * input the user can see.\n *\n * @slot - the choice's label.\n * @slot description - secondary text below the label.\n * @part input - the native radio.\n * @part label - the label element.\n * @part description - the wrapper around the description slot.\n */\n@Component({\n  tag: 'pf-radio-button',\n  styleUrl: 'pf-radio-button.css',\n  shadow: { delegatesFocus: true },\n})\nexport class PfRadioButton {\n  @Element() el!: HTMLElement;\n\n  /** Submitted by the group when this choice is the selected one. */\n  /**\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-radio-button[value=\"...\"]` in a React\n   * or Angular app finds nothing. The group reads the property, so this was\n   * never a live defect here -- it is the same trap that was one in\n   * `pf-command-item`.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /**\n   * Whether this is the chosen one. The group sets this — a consumer who sets\n   * it directly will have it overwritten the next time the group syncs.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Disable this choice alone. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Asks the group to select this choice. The group decides. */\n  @Event() pfRadioSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * The native input checks itself the instant it is clicked, before the group\n   * has had any say. Writing the property back on every render is what undoes\n   * that when the group declines — a disabled group, or a value the consumer\n   * is holding. Guarded on inequality so an unrelated re-render does not\n   * disturb it.\n   */\n  componentDidRender() {\n    const input = this.el.shadowRoot?.querySelector('input');\n    if (input && input.checked !== this.checked) {\n      input.checked = this.checked;\n    }\n  }\n\n  private onChange = () => {\n    /*\n     * Put the dot back before asking, every time. The native input has already\n     * moved it, and nothing here knows yet whether the group will agree — it\n     * may be disabled, this choice may be disabled, or a consumer may be\n     * holding `value`. Restoring first makes every one of those paths correct\n     * without the group having to undo anything; when it does agree, `checked`\n     * flips and the next render writes the dot back on.\n     */\n    const input = this.el.shadowRoot?.querySelector('input');\n    if (input) input.checked = this.checked;\n\n    if (this.disabled) return;\n    this.pfRadioSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          id=\"input\"\n          part=\"input\"\n          class=\"input\"\n          type=\"radio\"\n          // Never an independent tab stop: the group drives the tab order\n          // through the host, and the host delegates focus down to here.\n          tabindex=\"-1\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.onChange}\n        />\n        <label class=\"text\" part=\"label\" htmlFor=\"input\">\n          <span class=\"label-text\">\n            <slot />\n          </span>\n          <span class=\"description\" part=\"description\">\n            <slot name=\"description\" />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8lBAA8lB,CAAC;;MC4BlnB,aAAa,GAAA,MAAA;;;;;;;AAIxB;;;;;;AAMG;IACsB,KAAK,GAAG,EAAE;AAEnC;;;AAGG;IACqC,OAAO,GAAG,KAAK;;IAG9B,QAAQ,GAAG,KAAK;;AAGhC,IAAA,aAAa;AAEtB;;;;;;AAMG;IACH,kBAAkB,GAAA;AAChB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC;QACxD,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE;AAC3C,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;;;IAIxB,QAAQ,GAAG,MAAK;AACtB;;;;;;;AAOG;AACH,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC;AACxD,QAAA,IAAI,KAAK;AAAE,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QAEvC,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAChD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO;;;YAGZ,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,CACtB,CACD,CACH;;;;;;;;"}

package/dist/esm/pf-radio-group.entry.js

@@ -0,0 +1,172 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { s as syncRovingTabIndex, r as resolveRovingKey } from './roving-BzRAGyFO.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import './keys-g4FlTDZx.js';
+
+const pfRadioGroupCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.legend{color:var(--pf-radiogroup-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.choices{display:grid;gap:var(--space-3)}:host([orientation='horizontal']) .choices{column-gap:var(--space-6);grid-auto-flow:column;justify-content:flex-start}.error{color:var(--pf-radiogroup-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}`;
+
+const PfRadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    /**
+     * Submitted under this name. Reflected, because a form-associated element
+     * takes its submission name from the attribute, not this property.
+     */
+    name;
+    /** The selected choice's value. Empty means nothing is selected. */
+    value = '';
+    /** The group's heading. */
+    legend;
+    /** Error message. Its presence is what marks the group invalid. */
+    error;
+    /** Layout and arrow-key axis. Reflected for the stylesheet. */
+    orientation = 'vertical';
+    required = false;
+    /** Disable every choice. Reflected for the stylesheet. */
+    disabled = false;
+    /** Fires when the selection changes. */
+    pfChange;
+    /** The value a form reset restores, which is the initial attribute. */
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value;
+        this.syncFormState();
+    }
+    componentDidLoad() {
+        this.syncChildren();
+    }
+    syncFormState() {
+        /*
+         * `null`, not an empty string, with nothing selected: a radio group where
+         * no choice is picked is absent from the submission, exactly as a set of
+         * native radios with none checked is.
+         */
+        this.internals.setFormValue(this.value || null);
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /** A form-associated custom element does not inherit this. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the group is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the choice the group started with. */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.syncChildren();
+    }
+    /** The choices, in source order. */
+    get radios() {
+        return Array.from(this.el.querySelectorAll('pf-radio-button'));
+    }
+    isDisabled(radio) {
+        return this.disabled || radio.hasAttribute('disabled');
+    }
+    /**
+     * Pushes the group's state onto its children: one checked, the rest not, and
+     * exactly one tab stop.
+     *
+     * The ARIA pattern puts the tab stop on the *selected* choice rather than on
+     * whichever was focused last, so that tabbing into the group lands on the
+     * current answer. With nothing selected it falls to the first enabled one,
+     * which is how a user reaches an unanswered group at all.
+     */
+    syncChildren() {
+        const radios = this.radios;
+        if (radios.length === 0)
+            return;
+        for (const radio of radios) {
+            const selected = radio.value === this.value;
+            radio.checked = selected;
+            radio.setAttribute('aria-checked', selected ? 'true' : 'false');
+        }
+        const enabled = radios.filter((radio) => !this.isDisabled(radio));
+        const checked = enabled.find((radio) => radio.value === this.value);
+        // Only the enabled choices are tab stops; a disabled one is never reachable.
+        syncRovingTabIndex(enabled, checked ?? enabled[0]);
+        for (const radio of radios) {
+            if (this.isDisabled(radio))
+                radio.tabIndex = -1;
+        }
+    }
+    handleSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const next = event.detail.value;
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.syncChildren();
+        this.pfChange.emit({ value: next });
+    }
+    /**
+     * In a radiogroup the arrows move *and* select — unlike a toolbar, where
+     * they only move. Disabled choices are skipped entirely, which is why the
+     * index maths runs over the enabled subset rather than over all children.
+     */
+    handleKeyDown(event) {
+        if (event.defaultPrevented || this.disabled)
+            return;
+        const action = resolveRovingKey(event.key, this.orientation);
+        if (!action)
+            return;
+        const enabled = this.radios.filter((radio) => !this.isDisabled(radio));
+        if (enabled.length === 0)
+            return;
+        const currentIndex = enabled.indexOf(document.activeElement);
+        const nextIndex = resolveListMove(action, enabled.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        const target = enabled[nextIndex];
+        this.value = target.value;
+        this.syncChildren();
+        target.focus();
+        this.pfChange.emit({ value: target.value });
+    }
+    render() {
+        return (h(Host, { key: 'a1fceefbb8b63d192de9d4c47b13655d86c699cb', role: "radiogroup", "aria-labelledby": this.legend ? 'legend' : null, "aria-describedby": this.error ? 'error' : null, "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null }, h("div", { key: '9ac01e771ab31419fcfc3f9c13f6d5e7610ea902', class: "field", part: "field" }, this.legend && (h("span", { key: 'ae208de4c221e0d83b1612fe2e24aa6b35453717', class: "legend", part: "legend", id: "legend" }, this.legend)), h("div", { key: 'e015065c2d269b5b29bba200df93ec4a0c2fc777', class: "choices", part: "choices" }, h("slot", { key: '32f707a32f56beaa9ee538ef00fe03b1c14aed80', onSlotchange: () => this.syncChildren() })), this.error && (h("p", { key: '9dc3e40a8b44ae72cdb1839c2109b703b28b7ad0', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }, {
+                "syncChildren": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "disabled": [{
+                "syncChildren": 0
+            }]
+    }; }
+};
+PfRadioGroup.style = pfRadioGroupCss();
+
+export { PfRadioGroup as pf_radio_group };
+//# sourceMappingURL=pf-radio-group.entry.js.map
+
+//# sourceMappingURL=pf-radio-group.entry.js.map

package/dist/esm/pf-radio-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-radio-group.entry.js","sources":["src/components/pf-radio-group/pf-radio-group.css?tag=pf-radio-group&encapsulation=shadow","src/components/pf-radio-group/pf-radio-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.legend {\n  color: var(--pf-radiogroup-text);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  margin-bottom: var(--space-1);\n}\n\n.choices {\n  display: grid;\n  gap: var(--space-3);\n}\n\n:host([orientation='horizontal']) .choices {\n  column-gap: var(--space-6);\n  grid-auto-flow: column;\n  justify-content: flex-start;\n}\n\n.error {\n  color: var(--pf-radiogroup-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n","import { resolveListMove, resolveRovingKey, syncRovingTabIndex } from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\nexport type PfRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * A form-associated group of `pf-radio-button` children.\n *\n * The group is the control, not the radios: it holds the one `name` and the\n * one `value`, because a form-associated custom element gets no radio grouping\n * from the browser. Measured — three independent form-associated elements with\n * the same name all stay checked and all submit. So single selection is this\n * element's job, and it is the only one of the pair that touches the form.\n *\n * Keyboard follows the ARIA radiogroup pattern rather than the toolbar one:\n * the group is a single tab stop, and the arrows both move and select.\n *\n * @slot - the `pf-radio-button` children.\n * @part field - the wrapper around legend, choices and error.\n * @part legend - the group's heading.\n * @part choices - the container the children are slotted into.\n * @part error - the error message below the group.\n */\n@Component({\n  tag: 'pf-radio-group',\n  styleUrl: 'pf-radio-group.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRadioGroup {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected choice's value. Empty means nothing is selected. */\n  @Prop({ mutable: true }) value = '';\n\n  /** The group's heading. */\n  @Prop() legend?: string;\n\n  /** Error message. Its presence is what marks the group invalid. */\n  @Prop() error?: string;\n\n  /** Layout and arrow-key axis. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfRadioGroupOrientation = 'vertical';\n\n  @Prop({ reflect: true }) required = false;\n\n  /** Disable every choice. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the selection changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.syncChildren();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, with nothing selected: a radio group where\n     * no choice is picked is absent from the submission, exactly as a set of\n     * native radios with none checked is.\n     */\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the group is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the choice the group started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.syncChildren();\n  }\n\n  /** The choices, in source order. */\n  private get radios(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll('pf-radio-button'));\n  }\n\n  private isDisabled(radio: HTMLElement) {\n    return this.disabled || radio.hasAttribute('disabled');\n  }\n\n  /**\n   * Pushes the group's state onto its children: one checked, the rest not, and\n   * exactly one tab stop.\n   *\n   * The ARIA pattern puts the tab stop on the *selected* choice rather than on\n   * whichever was focused last, so that tabbing into the group lands on the\n   * current answer. With nothing selected it falls to the first enabled one,\n   * which is how a user reaches an unanswered group at all.\n   */\n  @Watch('value')\n  @Watch('disabled')\n  syncChildren() {\n    const radios = this.radios;\n    if (radios.length === 0) return;\n\n    for (const radio of radios) {\n      const selected = (radio as HTMLElement & { value: string }).value === this.value;\n      (radio as HTMLElement & { checked: boolean }).checked = selected;\n      radio.setAttribute('aria-checked', selected ? 'true' : 'false');\n    }\n\n    const enabled = radios.filter((radio) => !this.isDisabled(radio));\n    const checked = enabled.find(\n      (radio) => (radio as HTMLElement & { value: string }).value === this.value,\n    );\n    // Only the enabled choices are tab stops; a disabled one is never reachable.\n    syncRovingTabIndex(enabled, checked ?? enabled[0]);\n    for (const radio of radios) {\n      if (this.isDisabled(radio)) radio.tabIndex = -1;\n    }\n  }\n\n  @Listen('pfRadioSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const next = event.detail.value;\n    if (next === this.value) return;\n\n    this.value = next;\n    this.syncChildren();\n    this.pfChange.emit({ value: next });\n  }\n\n  /**\n   * In a radiogroup the arrows move *and* select — unlike a toolbar, where\n   * they only move. Disabled choices are skipped entirely, which is why the\n   * index maths runs over the enabled subset rather than over all children.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented || this.disabled) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const enabled = this.radios.filter((radio) => !this.isDisabled(radio));\n    if (enabled.length === 0) return;\n\n    const currentIndex = enabled.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    const target = enabled[nextIndex] as HTMLElement & { value: string };\n    this.value = target.value;\n    this.syncChildren();\n    target.focus();\n    this.pfChange.emit({ value: target.value });\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-labelledby={this.legend ? 'legend' : null}\n        aria-describedby={this.error ? 'error' : null}\n        aria-invalid={this.error ? 'true' : null}\n        aria-required={this.required ? 'true' : null}\n      >\n        <div class=\"field\" part=\"field\">\n          {this.legend && (\n            <span class=\"legend\" part=\"legend\" id=\"legend\">\n              {this.legend}\n            </span>\n          )}\n          <div class=\"choices\" part=\"choices\">\n            <slot onSlotchange={() => this.syncChildren()} />\n          </div>\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-rating-badge.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+import { f as formatRating, c as clampRating } from './rating-DVK0sUX2.js';
+
+const pfRatingBadgeCss = () => `:host{align-items:center;background:var(--pf-rating-badge-bg);border:1px solid var(--pf-rating-badge-border);border-radius:var(--radius-full);color:var(--pf-rating-badge-text);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1}:host([hidden]){display:none}:host([size='sm']){min-height:24px;padding:0 var(--space-2)}:host([size='md']){min-height:28px;padding:0 var(--space-3)}.icon{display:block;fill:currentColor;height:14px;width:14px}.value{align-items:center;display:inline-flex;gap:var(--space-1)}.separator{opacity:0.65}.reviews{color:var(--pf-rating-badge-reviews);font-weight:var(--font-weight-medium)}`;
+
+const PfRatingBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The rating. Clamped into 0..max. */
+    value = 0;
+    /** The top of the scale. */
+    max = 5;
+    /**
+     * How many reviews the rating came from. Omit it to show no count at all —
+     * which is different from `0`, a product nobody has reviewed yet.
+     */
+    reviews;
+    /** Padding and height. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    render() {
+        const max = Number(this.max);
+        const value = clampRating(Number(this.value), max);
+        const reviews = this.reviews;
+        return (h(Host, { key: '6136e9ef02a72ad066bcd78116ce754d539fcfae' }, h("pf-icon", { key: '716cfacb32809c7baed7a0033175e243f4999ff6', class: "icon", part: "icon", name: "star", "aria-hidden": "true" }), h("span", { key: '33ac2a3b281d0fb975f94aee3f1f15a7c4ed095c', class: "value", part: "value" }, formatRating(value), h("span", { key: '876cd76f0cd653874a258d12f2288ce92ed38f02', class: "separator" }, "/"), formatRating(max)), reviews !== undefined && reviews !== null && (h("span", { key: '158525f1ceaf5f08ef158eef1e5e99a521c37620', class: "reviews", part: "reviews" }, "(", Number(reviews).toLocaleString(), ")"))));
+    }
+};
+PfRatingBadge.style = pfRatingBadgeCss();
+
+export { PfRatingBadge as pf_rating_badge };
+//# sourceMappingURL=pf-rating-badge.entry.js.map
+
+//# sourceMappingURL=pf-rating-badge.entry.js.map

package/dist/esm/pf-rating-badge.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-rating-badge.entry.js","sources":["src/components/pf-rating-badge/pf-rating-badge.css?tag=pf-rating-badge&encapsulation=shadow","src/components/pf-rating-badge/pf-rating-badge.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-rating-badge-bg);\n  border: 1px solid var(--pf-rating-badge-border);\n  border-radius: var(--radius-full);\n  color: var(--pf-rating-badge-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  gap: var(--space-2);\n  line-height: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  min-height: 24px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) {\n  min-height: 28px;\n  padding: 0 var(--space-3);\n}\n\n.icon {\n  display: block;\n  fill: currentColor;\n  height: 14px;\n  width: 14px;\n}\n\n.value {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-1);\n}\n\n.separator {\n  opacity: 0.65;\n}\n\n.reviews {\n  color: var(--pf-rating-badge-reviews);\n  font-weight: var(--font-weight-medium);\n}\n","import { clampRating, formatRating } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfRatingBadgeSize = 'sm' | 'md';\n\n/**\n * A rating as a compact pill: one star, the number out of the maximum, and\n * optionally how many reviews it came from.\n *\n * @part icon - the star.\n * @part value - the rating and the maximum.\n * @part reviews - the review count, when `reviews` is set.\n */\n@Component({\n  tag: 'pf-rating-badge',\n  styleUrl: 'pf-rating-badge.css',\n  shadow: true,\n})\nexport class PfRatingBadge {\n  /** The rating. Clamped into 0..max. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 5;\n\n  /**\n   * How many reviews the rating came from. Omit it to show no count at all —\n   * which is different from `0`, a product nobody has reviewed yet.\n   */\n  @Prop() reviews?: number;\n\n  /** Padding and height. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfRatingBadgeSize = 'md';\n\n  render() {\n    const max = Number(this.max);\n    const value = clampRating(Number(this.value), max);\n    const reviews = this.reviews;\n\n    return (\n      <Host>\n        <pf-icon class=\"icon\" part=\"icon\" name=\"star\" aria-hidden=\"true\"></pf-icon>\n        <span class=\"value\" part=\"value\">\n          {formatRating(value)}\n          <span class=\"separator\">/</span>\n          {formatRating(max)}\n        </span>\n        {reviews !== undefined && reviews !== null && (\n          <span class=\"reviews\" part=\"reviews\">\n            ({Number(reviews).toLocaleString()})\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,0qBAA0qB,CAAC;;MCkB9rB,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAAG,CAAC;;IAGT,GAAG,GAAG,CAAC;AAEf;;;AAGG;AACK,IAAA,OAAO;;IAGU,IAAI,GAAsB,IAAI;IAEvD,MAAM,GAAA;QACJ,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AAC5B,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAClD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;AAE5B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,CAAW,EAC3E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,YAAY,CAAC,KAAK,CAAC,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EAAA,GAAA,CAAS,EAC/B,YAAY,CAAC,GAAG,CAAC,CACb,EACN,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,KACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,OAChC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,MAC7B,CACR,CACI;;;;;;;"}

package/dist/esm/pf-rating-stars.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+import { f as formatRating, s as starFillPercent, c as clampRating } from './rating-DVK0sUX2.js';
+
+const pfRatingStarsCss = () => `:host{align-items:center;color:var(--pf-rating-text);display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.track{display:inline-flex;gap:2px}.star{display:inline-flex;height:var(--pf-rating-size, var(--font-size-lg));position:relative;width:var(--pf-rating-size, var(--font-size-lg))}.icon{font-size:var(--pf-rating-size, var(--font-size-lg));height:1em;width:1em}.base{color:var(--pf-rating-star-empty)}.fill{display:inline-flex;inset:0;overflow:hidden;position:absolute;width:var(--pf-rating-fill, 0%)}.filled{color:var(--pf-rating-star-fill)}.value{color:var(--pf-rating-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}`;
+
+const PfRatingStars = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The rating. Clamped into 0..max, so it cannot overfill the row. */
+    value = 0;
+    /** How many stars there are. */
+    max = 5;
+    /** Star size in pixels. */
+    size = 18;
+    /** Write the rating out beside the stars. */
+    showValue = false;
+    /** Overrides the generated name, for a rating that means something else. */
+    label;
+    /**
+     * Coerced, because the stars are built from it: `Number(max)` of an
+     * attribute string works by luck in a loop count and not at all in
+     * arithmetic, and a nonsense value would render an empty row rather than
+     * throwing.
+     */
+    get count() {
+        const asNumber = Math.round(Number(this.max));
+        return Number.isFinite(asNumber) ? Math.max(asNumber, 0) : 0;
+    }
+    render() {
+        const max = this.count;
+        const value = clampRating(Number(this.value), max);
+        return (h(Host, { key: '01f323b4b49ee170a9849e74c14f4d13709b8e52', role: "img", "aria-label": this.label ?? `Rating ${value} out of ${max}` }, h("div", { key: '717c1eddcb89120cd107f0f2f57ed1e2d132e763', class: "track", part: "track", "aria-hidden": "true" }, Array.from({ length: max }, (_, index) => (h("span", { class: "star", part: "star", style: {
+                '--pf-rating-fill': `${starFillPercent(value, index)}%`,
+                '--pf-rating-size': `${Number(this.size)}px`,
+            } }, h("pf-icon", { class: "icon base", name: "star" }), h("span", { class: "fill" }, h("pf-icon", { class: "icon filled", name: "star" })))))), this.showValue && (h("span", { key: '9f035bc5082e359f1c91a5a81af152f76d3371bf', class: "value", part: "value" }, formatRating(value)))));
+    }
+};
+PfRatingStars.style = pfRatingStarsCss();
+
+export { PfRatingStars as pf_rating_stars };
+//# sourceMappingURL=pf-rating-stars.entry.js.map
+
+//# sourceMappingURL=pf-rating-stars.entry.js.map

package/dist/esm/pf-rating-stars.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-rating-stars.entry.js","sources":["src/components/pf-rating-stars/pf-rating-stars.css?tag=pf-rating-stars&encapsulation=shadow","src/components/pf-rating-stars/pf-rating-stars.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-rating-text);\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.track {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.star {\n  display: inline-flex;\n  height: var(--pf-rating-size, var(--font-size-lg));\n  position: relative;\n  width: var(--pf-rating-size, var(--font-size-lg));\n}\n\n.icon {\n  font-size: var(--pf-rating-size, var(--font-size-lg));\n  height: 1em;\n  width: 1em;\n}\n\n.base {\n  color: var(--pf-rating-star-empty);\n}\n\n/*\n * The filled star is the same glyph clipped to the fraction, which is what\n * makes a half star look like half a star rather than a different icon.\n */\n.fill {\n  display: inline-flex;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: var(--pf-rating-fill, 0%);\n}\n\n.filled {\n  color: var(--pf-rating-star-fill);\n}\n\n.value {\n  color: var(--pf-rating-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n","import { clampRating, formatRating, starFillPercent } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A row of stars showing a rating, filled to the fraction.\n *\n * One `role=\"img\"` with a name rather than a star-by-star reading: the stars\n * are an image of the rating, and the number is the thing worth announcing.\n * Every star inside is therefore `aria-hidden`.\n *\n * @part track - the row of stars.\n * @part star - one star, filled to its own share of the rating.\n * @part value - the rating written out, when `showValue` is set.\n */\n@Component({\n  tag: 'pf-rating-stars',\n  styleUrl: 'pf-rating-stars.css',\n  shadow: true,\n})\nexport class PfRatingStars {\n  /** The rating. Clamped into 0..max, so it cannot overfill the row. */\n  @Prop() value = 0;\n\n  /** How many stars there are. */\n  @Prop() max = 5;\n\n  /** Star size in pixels. */\n  @Prop() size = 18;\n\n  /** Write the rating out beside the stars. */\n  @Prop() showValue = false;\n\n  /** Overrides the generated name, for a rating that means something else. */\n  @Prop() label?: string;\n\n  /**\n   * Coerced, because the stars are built from it: `Number(max)` of an\n   * attribute string works by luck in a loop count and not at all in\n   * arithmetic, and a nonsense value would render an empty row rather than\n   * throwing.\n   */\n  private get count(): number {\n    const asNumber = Math.round(Number(this.max));\n    return Number.isFinite(asNumber) ? Math.max(asNumber, 0) : 0;\n  }\n\n  render() {\n    const max = this.count;\n    const value = clampRating(Number(this.value), max);\n\n    return (\n      <Host role=\"img\" aria-label={this.label ?? `Rating ${value} out of ${max}`}>\n        <div class=\"track\" part=\"track\" aria-hidden=\"true\">\n          {Array.from({ length: max }, (_, index) => (\n            <span\n              class=\"star\"\n              part=\"star\"\n              style={{\n                '--pf-rating-fill': `${starFillPercent(value, index)}%`,\n                '--pf-rating-size': `${Number(this.size)}px`,\n              }}\n            >\n              <pf-icon class=\"icon base\" name=\"star\"></pf-icon>\n              <span class=\"fill\">\n                <pf-icon class=\"icon filled\" name=\"star\"></pf-icon>\n              </span>\n            </span>\n          ))}\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {formatRating(value)}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,6pBAA6pB,CAAC;;MCmBjrB,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAAG,CAAC;;IAGT,GAAG,GAAG,CAAC;;IAGP,IAAI,GAAG,EAAE;;IAGT,SAAS,GAAG,KAAK;;AAGjB,IAAA,KAAK;AAEb;;;;;AAKG;AACH,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;;IAG9D,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK;AACtB,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAElD,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,IAAI,CAAA,OAAA,EAAU,KAAK,CAAA,QAAA,EAAW,GAAG,CAAA,CAAE,EAAA,EACxE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAC/C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MACpC,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,kBAAkB,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA,CAAA,CAAG;gBACvD,kBAAkB,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI;AAC7C,aAAA,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,CAAW,EACjD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EAChB,CAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,CAAW,CAC9C,CACF,CACR,CAAC,CACE,EACL,IAAI,CAAC,SAAS,KACb,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,YAAY,CAAC,KAAK,CAAC,CACf,CACR,CACI;;;;;;;"}