@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-badge-group/pf-badge-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge-group.js","sourceRoot":"","sources":["../../../src/components/pf-badge-group/pf-badge-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;;GAMG;AAMH,MAAM,OAAO,YAAY;IACvB,wBAAwB;IAChB,KAAK,GAAG,EAAE,CAAC;IAEnB,oCAAoC;IAC5B,OAAO,GAAG,EAAE,CAAC;IAErB,sEAAsE;IAC7C,KAAK,GAAsB,MAAM,CAAC;IAE3D,uEAAuE;IAC9C,UAAU,GAA2B,MAAM,CAAC;IAErE,kEAAkE;IACzC,aAAa,GAA8B,SAAS,CAAC;IAE9E,MAAM;QACJ,MAAM,KAAK,GAAG,CACZ,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QACF,MAAM,IAAI,GAAG,CACX,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAC3B,IAAI,CAAC,OAAO,CACR,CACR,CAAC;QAEF;;;WAGG;QACH,OAAO,EAAC,IAAI,uDAAE,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAQ,CAAC;IACzF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfBadgeGroupColor = 'gray' | 'brand' | 'error' | 'warning' | 'success';\nexport type PfBadgeGroupAppearance = 'pill' | 'modern';\nexport type PfBadgeGroupBadgePosition = 'leading' | 'trailing';\n\n/**\n * A badge joined to a line of text, sharing one rounded outline — the\n * \"2 new · See what's changed\" pattern.\n *\n * @part badge - the coloured badge.\n * @part text - the message beside it.\n */\n@Component({\n  tag: 'pf-badge-group',\n  styleUrl: 'pf-badge-group.css',\n  shadow: true,\n})\nexport class PfBadgeGroup {\n  /** The badge's text. */\n  @Prop() label = '';\n\n  /** The message beside the badge. */\n  @Prop() message = '';\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) color: PfBadgeGroupColor = 'gray';\n\n  /** Surface treatment for the message. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) appearance: PfBadgeGroupAppearance = 'pill';\n\n  /** Which side the badge sits on. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) badgePosition: PfBadgeGroupBadgePosition = 'leading';\n\n  render() {\n    const badge = (\n      <span class=\"badge\" part=\"badge\">\n        {this.label}\n      </span>\n    );\n    const text = (\n      <span class=\"text\" part=\"text\">\n        {this.message}\n      </span>\n    );\n\n    /*\n     * Ordered in the DOM rather than reversed with `flex-direction`, so a\n     * screen reader reads the badge and the message in the order they appear.\n     */\n    return <Host>{this.badgePosition === 'leading' ? [badge, text] : [text, badge]}</Host>;\n  }\n}\n"]}

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

@@ -0,0 +1,96 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.svg {
+  display: block;
+  height: auto;
+  /* The y-axis label is drawn outside the plot, so the box must not clip. */
+  overflow: visible;
+  width: 100%;
+}
+
+.empty {
+  align-items: center;
+  color: var(--pf-chart-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  height: 120px;
+  justify-content: center;
+}
+
+.grid {
+  stroke: var(--pf-chart-grid);
+  stroke-width: 1;
+}
+
+.tick {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+}
+
+.tick--y {
+  dominant-baseline: middle;
+  text-anchor: end;
+}
+
+.tick--x {
+  dominant-baseline: hanging;
+  text-anchor: middle;
+}
+
+.axis-label {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+  text-anchor: middle;
+}
+
+.bar {
+  transition: opacity 80ms ease;
+}
+
+.bar:hover {
+  opacity: 0.75;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  list-style: none;
+  margin: 0;
+  /*
+   * Lines the legend's start edge up with the plot area: the SVG is inset by
+   * the y-axis gutter, and the inset is set inline from the chart's geometry.
+   */
+  padding: 0;
+  padding-inline-start: var(--pf-chart-plot-inset-left, 0);
+}
+
+/*
+ * Hidden rather than dropped, so the series stay slotted and `slotchange`
+ * still fires. Two classes deep, because the tie breaks on source order.
+ */
+.legend.legend--hidden {
+  display: none;
+}
+
+/* The series are flex children of the list, not of a box inside it. */
+.legend slot {
+  display: contents;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,263 @@
+import { CHART_PADDING, CHART_PLOT, CHART_VIEW, axisLabelStep, barGeometry, chartSeriesColor, formatAxisTick, niceAxisTicks, plotY, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A grouped or stacked bar chart over `pf-chart-series` children.
+ *
+ * The same split as `pf-line-chart`: the rows are bulk numbers in a property,
+ * the series are named and coloured and live in the light DOM so the legend
+ * can reach their labels.
+ *
+ * @slot - the `pf-chart-series` children.
+ * @slot empty - what to show when there is nothing to draw.
+ * @part svg - the drawing.
+ * @part grid - one gridline.
+ * @part tick - one axis label.
+ * @part bar - one bar.
+ * @part legend - the list the series are slotted into.
+ * @part empty - the empty state's box.
+ */
+export class PfBarChart {
+    el;
+    /** The rows to plot. An array, or JSON for plain HTML. */
+    data = [];
+    /** Stack each group's series rather than standing them side by side. */
+    stacked = false;
+    showLegend = true;
+    yAxisLabel;
+    label;
+    series = [];
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only; named to avoid shadowing `Element.children`. */
+    get seriesElements() {
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'pf-chart-series');
+    }
+    get rows() {
+        const raw = this.data;
+        if (Array.isArray(raw))
+            return raw;
+        try {
+            const parsed = JSON.parse(String(raw || '[]'));
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    sync() {
+        this.series = this.seriesElements.map((element, index) => {
+            const node = element;
+            const color = chartSeriesColor(index, node.color ?? element.getAttribute('color') ?? undefined);
+            element.swatch = color;
+            return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };
+        });
+    }
+    render() {
+        const rows = this.rows;
+        const series = this.series;
+        if (rows.length === 0 || series.length === 0) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "No data")), h("ul", { class: "legend legend--hidden", part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+        }
+        /*
+         * Clamped here and nowhere else. A negative value must not pull a stack
+         * down, and it must not give a `<rect>` a negative `height` — which is
+         * an error the browser drops the element for. One clamp rather than two,
+         * so there is one thing to keep right.
+         */
+        const valueAt = (row, key) => Math.max(0, Number(row[key] ?? 0) || 0);
+        /*
+         * A stacked chart's scale is the tallest *stack*, not the tallest bar —
+         * otherwise the top of the stack is drawn above the plot.
+         */
+        const totals = this.stacked
+            ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))
+            : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));
+        const ticks = niceAxisTicks(Math.max(0, ...totals));
+        const maxTick = ticks[ticks.length - 1];
+        const geometry = barGeometry(rows.length, series.length, this.stacked);
+        const labelStep = axisLabelStep(rows.length);
+        const floor = CHART_PADDING.top + CHART_PLOT.height;
+        return (h(Host, { style: {
+                '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,
+            } }, h("svg", { class: "svg", part: "svg", viewBox: `0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`, role: "img", "aria-label": this.label ?? this.yAxisLabel ?? 'Bar chart' }, ticks.map((tick) => {
+            const y = plotY(tick, maxTick);
+            return (h("g", null, h("line", { class: "grid", part: "grid", x1: CHART_PADDING.left, y1: y, x2: CHART_PADDING.left + CHART_PLOT.width, y2: y }), h("text", { class: "tick tick--y", part: "tick", x: CHART_PADDING.left - 8, y: y }, formatAxisTick(tick))));
+        }), rows.map((row, index) => index % labelStep === 0 ? (h("text", { class: "tick tick--x", part: "tick", x: geometry.groupCenters[index], y: floor + 20 }, row.label)) : null), this.yAxisLabel && (h("text", { class: "axis-label", x: -(CHART_PADDING.top + CHART_PLOT.height / 2), y: 14, transform: "rotate(-90)" }, this.yAxisLabel)), rows.map((row, groupIndex) => {
+            let base = 0;
+            return (h("g", null, series.map((item, seriesIndex) => {
+                const value = valueAt(row, item.key);
+                const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;
+                const x = this.stacked
+                    ? geometry.groupLefts[groupIndex]
+                    : geometry.groupLefts[groupIndex] +
+                        seriesIndex * (geometry.barWidth + geometry.gap);
+                const y = this.stacked ? plotY(base + value, maxTick) : floor - height;
+                if (this.stacked)
+                    base += value;
+                return (h("rect", { class: "bar", part: "bar", x: x, y: y, width: geometry.barWidth, height: height, rx: "2", fill: item.color }, h("title", null, `${row.label} — ${item.key}: ${formatAxisTick(value)}`)));
+            })));
+        })), h("ul", { class: { legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }, part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+    }
+    static get is() { return "pf-bar-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-bar-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-bar-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfChartRow[] | string",
+                    "resolved": "PfChartRow[] | string",
+                    "references": {
+                        "PfChartRow": {
+                            "location": "import",
+                            "path": "../pf-line-chart/pf-line-chart",
+                            "id": "src/components/pf-line-chart/pf-line-chart.tsx::PfChartRow",
+                            "referenceLocation": "PfChartRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rows to plot. An array, or JSON for plain HTML."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stack each group's series rather than standing them side by side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-legend",
+                "defaultValue": "true"
+            },
+            "yAxisLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y-axis-label"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "series": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "sync"
+            }];
+    }
+}
+//# sourceMappingURL=pf-bar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-bar-chart.js","sourceRoot":"","sources":["../../../src/components/pf-bar-chart/pf-bar-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  axisLabelStep,\n  barGeometry,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotY,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { PfChartRow } from '../pf-line-chart/pf-line-chart';\n\n/**\n * A grouped or stacked bar chart over `pf-chart-series` children.\n *\n * The same split as `pf-line-chart`: the rows are bulk numbers in a property,\n * the series are named and coloured and live in the light DOM so the legend\n * can reach their labels.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part bar - one bar.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-bar-chart',\n  styleUrl: 'pf-bar-chart.css',\n  shadow: true,\n})\nexport class PfBarChart {\n  @Element() el!: HTMLElement;\n\n  /** The rows to plot. An array, or JSON for plain HTML. */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Stack each group's series rather than standing them side by side. */\n  @Prop({ reflect: true }) stacked = false;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  @Prop() yAxisLabel?: string;\n\n  @Prop() label?: string;\n\n  @State() series: { key: string; color: string }[] = [];\n\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only; named to avoid shadowing `Element.children`. */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    this.series = this.seriesElements.map((element, index) => {\n      const node = element as HTMLElement & { seriesKey?: string; color?: string };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    /*\n     * Clamped here and nowhere else. A negative value must not pull a stack\n     * down, and it must not give a `<rect>` a negative `height` — which is\n     * an error the browser drops the element for. One clamp rather than two,\n     * so there is one thing to keep right.\n     */\n    const valueAt = (row: PfChartRow, key: string) => Math.max(0, Number(row[key] ?? 0) || 0);\n    /*\n     * A stacked chart's scale is the tallest *stack*, not the tallest bar —\n     * otherwise the top of the stack is drawn above the plot.\n     */\n    const totals = this.stacked\n      ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))\n      : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));\n\n    const ticks = niceAxisTicks(Math.max(0, ...totals));\n    const maxTick = ticks[ticks.length - 1];\n    const geometry = barGeometry(rows.length, series.length, this.stacked);\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Bar chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text\n                class=\"tick tick--x\"\n                part=\"tick\"\n                x={geometry.groupCenters[index]}\n                y={floor + 20}\n              >\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {rows.map((row, groupIndex) => {\n            let base = 0;\n\n            return (\n              <g>\n                {series.map((item, seriesIndex) => {\n                  const value = valueAt(row, item.key);\n                  const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;\n                  const x = this.stacked\n                    ? geometry.groupLefts[groupIndex]\n                    : geometry.groupLefts[groupIndex] +\n                      seriesIndex * (geometry.barWidth + geometry.gap);\n                  const y = this.stacked ? plotY(base + value, maxTick) : floor - height;\n\n                  if (this.stacked) base += value;\n\n                  return (\n                    <rect\n                      class=\"bar\"\n                      part=\"bar\"\n                      x={x}\n                      y={y}\n                      width={geometry.barWidth}\n                      height={height}\n                      rx=\"2\"\n                      fill={item.color}\n                    >\n                      <title>{`${row.label} — ${item.key}: ${formatAxisTick(value)}`}</title>\n                    </rect>\n                  );\n                })}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,40 @@
+:host {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.link {
+  color: var(--pf-breadcrumbs-link-color);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  text-decoration: none;
+}
+
+a.link:hover {
+  color: var(--pf-breadcrumbs-link-hover-color);
+  text-decoration: underline;
+}
+
+/*
+ * `current-page` is the group's answer, not the consumer's `current` ask --
+ * a trail where nothing was marked has a current page all the same, and this
+ * is the attribute that says which.
+ */
+:host([current-page]) .link,
+.link[aria-current='page'] {
+  color: var(--pf-breadcrumbs-link-current-color);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+.separator {
+  color: var(--pf-breadcrumbs-separator-color);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}

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

@@ -0,0 +1,160 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One crumb in a `pf-breadcrumbs` trail.
+ *
+ * With an `href` it renders a link; without one it renders a plain span, which
+ * is both what a current page wants and the way to use a framework's own
+ * router — slot an `<a routerLink>` or a `<Link>` in and leave `href` unset.
+ *
+ * `currentPage`, `last` and `separator` are the group's to set: only it can
+ * see the trail. A consumer asks by setting `current`; the group resolves the
+ * trail with core's rule and writes the answer to `currentPage`.
+ *
+ * @slot - the crumb's label.
+ * @part link - the link, or the span standing in for one.
+ * @part separator - the separator after this crumb. Absent on the last.
+ */
+export class PfBreadcrumb {
+    /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */
+    href;
+    /**
+     * Set it to mark this crumb as the current page, rather than letting the
+     * last crumb be it.
+     *
+     * This is the *asking* half, and the group never writes it — `currentPage`
+     * below is the answer. Keeping the two apart is what lets the trail change:
+     * if the group wrote its answer back here, the crumb that happened to be
+     * last would look like a crumb the consumer had marked, and appending
+     * another would leave the mark behind on it.
+     */
+    current = false;
+    /**
+     * Set by the group: the resolved current page, which is the one thing that
+     * renders `aria-current="page"`. Exactly one crumb in a trail carries it.
+     */
+    currentPage = false;
+    /** Set by the group: no separator is drawn after the last crumb. */
+    last = false;
+    /** Set by the group from its own `separator`. */
+    separator = '/';
+    render() {
+        const label = h("slot", { key: '9867775efe95a88c9d79894089761a835aec4a2c' });
+        return (h(Host, { key: 'ed743e2c769ac704621241b6c63857e0919d7386', role: "listitem" }, this.href ? (h("a", { class: "link", part: "link", href: this.href, "aria-current": this.currentPage ? 'page' : null }, label)) : (h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null }, label)), !this.last && (h("span", { key: '0bf16efee1d46f196bbf61555d05042b0bb8040d', class: "separator", part: "separator", "aria-hidden": "true" }, this.separator))));
+    }
+    static get is() { return "pf-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the crumb goes. Reflected; a consumer's stylesheet reads it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set it to mark this crumb as the current page, rather than letting the\nlast crumb be it.\n\nThis is the *asking* half, and the group never writes it \u2014 `currentPage`\nbelow is the answer. Keeping the two apart is what lets the trail change:\nif the group wrote its answer back here, the crumb that happened to be\nlast would look like a crumb the consumer had marked, and appending\nanother would leave the mark behind on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "currentPage": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group: the resolved current page, which is the one thing that\nrenders `aria-current=\"page\"`. Exactly one crumb in a trail carries it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "false"
+            },
+            "last": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group: no separator is drawn after the last crumb."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "last",
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group from its own `separator`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'/'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/pf-breadcrumb/pf-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,YAAY;IACvB,yEAAyE;IAChD,IAAI,CAAU;IAEvC;;;;;;;;;OASG;IACsB,OAAO,GAAG,KAAK,CAAC;IAEzC;;;OAGG;IACqC,WAAW,GAAG,KAAK,CAAC;IAE5D,oEAAoE;IAC5B,IAAI,GAAG,KAAK,CAAC;IAErD,iDAAiD;IACxB,SAAS,GAAG,GAAG,CAAC;IAEzC,MAAM;QACJ,MAAM,KAAK,GAAG,8DAAQ,CAAC;QAEvB,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YAClB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE7C,KAAK,CACJ,CACL,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAe,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAC1E,KAAK,CACD,CACR;YACA,CAAC,IAAI,CAAC,IAAI,IAAI,CACb,6DAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,IACxD,IAAI,CAAC,SAAS,CACV,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One crumb in a `pf-breadcrumbs` trail.\n *\n * With an `href` it renders a link; without one it renders a plain span, which\n * is both what a current page wants and the way to use a framework's own\n * router — slot an `<a routerLink>` or a `<Link>` in and leave `href` unset.\n *\n * `currentPage`, `last` and `separator` are the group's to set: only it can\n * see the trail. A consumer asks by setting `current`; the group resolves the\n * trail with core's rule and writes the answer to `currentPage`.\n *\n * @slot - the crumb's label.\n * @part link - the link, or the span standing in for one.\n * @part separator - the separator after this crumb. Absent on the last.\n */\n@Component({\n  tag: 'pf-breadcrumb',\n  styleUrl: 'pf-breadcrumb.css',\n  shadow: true,\n})\nexport class PfBreadcrumb {\n  /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /**\n   * Set it to mark this crumb as the current page, rather than letting the\n   * last crumb be it.\n   *\n   * This is the *asking* half, and the group never writes it — `currentPage`\n   * below is the answer. Keeping the two apart is what lets the trail change:\n   * if the group wrote its answer back here, the crumb that happened to be\n   * last would look like a crumb the consumer had marked, and appending\n   * another would leave the mark behind on it.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. Exactly one crumb in a trail carries it.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /** Set by the group: no separator is drawn after the last crumb. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Set by the group from its own `separator`. */\n  @Prop({ mutable: true }) separator = '/';\n\n  render() {\n    const label = <slot />;\n\n    return (\n      <Host role=\"listitem\">\n        {this.href ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {label}\n          </a>\n        ) : (\n          <span class=\"link\" part=\"link\" aria-current={this.currentPage ? 'page' : null}>\n            {label}\n          </span>\n        )}\n        {!this.last && (\n          <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n            {this.separator}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * The crumbs have to be flex items of the list, not of a box inside it. The UA
+ * stylesheet already gives a slot `display: contents`, and this says so out
+ * loud -- the same thing pf-calendar needs for a semantic row in a grid.
+ */
+.list slot {
+  display: contents;
+}