@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-pie-chart.entry.js","sources":["src/components/pf-pie-chart/pf-pie-chart.css?tag=pf-pie-chart&encapsulation=shadow","src/components/pf-pie-chart/pf-pie-chart.tsx"],"sourcesContent":["/* Mobile first: the legend under the chart, beside it on a wider screen. */\n:host {\n  align-items: flex-start;\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.visual {\n  align-items: center;\n  border-radius: var(--radius-full);\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n}\n\n/*\n * A registered custom property, because an unregistered one cannot be\n * animated: `--pf-pie-sweep` has to interpolate as a percentage for the\n * sweep to happen at all, and without `@property` it would jump from 0% to\n * 100% at the halfway point. Declared here rather than relying on the React\n * library's copy — `@property` registers document-globally, but a consumer\n * who ships only the elements has no other source for it.\n */\n@property --pf-pie-sweep {\n  syntax: '<percentage>';\n  inherits: false;\n  initial-value: 0%;\n}\n\n.gradient {\n  --pf-pie-sweep: 100%;\n\n  animation: pf-pie-sweep var(--duration-slow) var(--easing-decelerate);\n  background-image: var(--pf-pie-gradient);\n  border-radius: inherit;\n  inset: 0;\n  mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);\n  position: absolute;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-pie-sweep {\n  from {\n    --pf-pie-sweep: 0%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .gradient {\n    animation: none;\n  }\n}\n\n.visual--empty {\n  outline: 1px solid var(--pf-piechart-border-muted);\n}\n\n.center {\n  align-items: center;\n  background: var(--pf-piechart-bg);\n  border-radius: var(--radius-full);\n  color: var(--pf-piechart-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  justify-content: center;\n  line-height: 1.2;\n  position: relative;\n  text-align: center;\n  z-index: 1;\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: 180px;\n    width: auto;\n  }\n}\n\n/*\n * Hidden rather than dropped, so the slices stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The slices are grid children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n","import {\n  clampPieCutout,\n  pieConicGradient,\n  preparePieSegments,\n  roundPercentages,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A pie or donut over `pf-pie-slice` children.\n *\n * The chart owns the two things a slice cannot know: its share of the total\n * and its colour. Both go to the slice, which draws its own legend row —\n * a slot renders its assigned content once and in one place, so a legend\n * built in the shadow root could never reach labels that live in the light\n * DOM.\n *\n * All of the arithmetic is core's, so this and the React `PieChart` show the\n * same breakdown, down to the legend's percentages summing to 100.\n *\n * @slot - the `pf-pie-slice` children.\n * @slot center - what goes in the hole.\n * @slot empty - what to show when nothing is drawable.\n * @part visual - the circle.\n * @part gradient - the layer the wedges are painted on.\n * @part center - the hole in the middle.\n * @part legend - the list the slices are slotted into.\n */\n@Component({\n  tag: 'pf-pie-chart',\n  styleUrl: 'pf-pie-chart.css',\n  shadow: true,\n})\nexport class PfPieChart {\n  @Element() el!: HTMLElement;\n\n  /** Diameter, in pixels. Never below 120, where the ring stops reading. */\n  @Prop() size = 192;\n\n  /** The hole in the middle, as a fraction of the diameter. */\n  @Prop() cutout = 0.58;\n\n  /** Show the legend the slices make up. Reflected. */\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** The chart's accessible name. */\n  @Prop() label = 'Pie chart';\n\n  /** The gradient painting the wedges, which only the chart can work out. */\n  @State() gradient = 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n  /** Whether anything is drawable, which decides between chart and empty state. */\n  @State() hasData = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the slices, for a consumer who changed a value through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested chart owns its own slices. */\n  private get slices(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-pie-slice')).filter(\n      (slice) => slice.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the slice has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private read(slice: HTMLElement) {\n    const node = slice as HTMLElement & { value?: number; color?: string };\n    const value = node.value ?? Number(slice.getAttribute('value'));\n    return {\n      value: Number(value),\n      color: node.color ?? slice.getAttribute('color') ?? undefined,\n    };\n  }\n\n  @Watch('cutout')\n  sync() {\n    const slices = this.slices;\n    const segments = preparePieSegments(slices.map((slice) => this.read(slice)));\n    const shares = roundPercentages(segments.map((segment) => segment.percentage));\n\n    this.hasData = segments.length > 0;\n    this.gradient = this.hasData\n      ? pieConicGradient(segments)\n      : 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n    /*\n     * `index` is the slice's place in the original children, which is what\n     * carries the answer back to the right slice: `preparePieSegments` drops\n     * the ones that are not drawable, so its own positions no longer line up\n     * with the children.\n     */\n    const bySlice = new Map(segments.map((segment, position) => [segment.index, position]));\n\n    for (const [index, slice] of slices.entries()) {\n      const position = bySlice.get(index);\n      const node = slice as HTMLElement & { swatch: string; share: number; drawn: boolean };\n\n      node.drawn = position !== undefined;\n      node.swatch = position === undefined ? '' : segments[position].color;\n      node.share = position === undefined ? 0 : shares[position];\n    }\n  }\n\n  render() {\n    const size = Math.max(Number(this.size) || 192, 120);\n    const centerSize = Math.round(size * clampPieCutout(Number(this.cutout)));\n\n    return (\n      <Host>\n        <div\n          class={{ visual: true, 'visual--empty': !this.hasData }}\n          part=\"visual\"\n          role=\"img\"\n          aria-label={this.label}\n          style={{ width: `${size}px`, height: `${size}px` }}\n        >\n          {/*\n            The gradient goes on a real child rather than a `::before`, so a\n            contrast checker can see the centre label against it.\n          */}\n          <div\n            class=\"gradient\"\n            part=\"gradient\"\n            aria-hidden=\"true\"\n            style={{ '--pf-pie-gradient': this.gradient }}\n          ></div>\n          <div\n            class=\"center\"\n            part=\"center\"\n            style={{ width: `${centerSize}px`, height: `${centerSize}px` }}\n          >\n            {this.hasData ? <slot name=\"center\" /> : <slot name=\"empty\">No data</slot>}\n          </div>\n        </div>\n\n        {/*\n          The list stays in the tree whether or not the legend is shown: a\n          slot that is not rendered never fires `slotchange`, so slices added\n          later would stay invisible for good — and the slices have to be\n          read even when the legend is hidden, because they are the data.\n        */}\n        <ul class={{ legend: true, 'legend--hidden': !this.showLegend }} part=\"legend\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-pie-slice.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfPieSliceCss = () => `:host{align-items:center;display:grid;gap:var(--space-2);grid-template-columns:10px 1fr auto}:host([hidden]){display:none}:host(:not([drawn])){display:none}.dot{border-radius:var(--radius-full);display:inline-block;height:10px;width:10px}.label{color:var(--pf-piechart-text);font-size:var(--font-size-sm);min-width:0}.value{color:var(--pf-piechart-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}`;
+
+const PfPieSlice = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** How big the slice is, in whatever unit the chart's slices share. */
+    value = 0;
+    /** Overrides the palette colour the chart would give it. */
+    color;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch = '';
+    /** Set by the chart: this slice's share, as a whole percentage. */
+    share = 0;
+    /**
+     * Set by the chart: whether this slice is in the drawing at all.
+     *
+     * A slice of zero is not a wedge, so it is not a legend row either —
+     * otherwise the legend lists colours that appear nowhere in the chart.
+     * Reflected, because that is what the stylesheet hides it with.
+     */
+    drawn = false;
+    render() {
+        return (h(Host, { key: '122c85fbc58816acce27ac06547eb4f2adf63788', role: "listitem" }, h("span", { key: 'd2d41879c922a4b929b801e4e3b2add7227cd79f', class: "dot", part: "dot", "aria-hidden": "true", style: { background: this.swatch } }), h("span", { key: '46ea91d2d36a9269558548f0c2bc446b7d556467', class: "label", part: "label" }, h("slot", { key: 'd8eb86e569151c9b26de626e6dd6c08feee8da75' })), h("span", { key: 'cbf292f34e267cf4ff37bded7da86649d7ea9ed6', class: "value", part: "value" }, this.share, "%")));
+    }
+};
+PfPieSlice.style = pfPieSliceCss();
+
+export { PfPieSlice as pf_pie_slice };
+//# sourceMappingURL=pf-pie-slice.entry.js.map
+
+//# sourceMappingURL=pf-pie-slice.entry.js.map

package/dist/esm/pf-pie-slice.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-pie-slice.entry.js","sources":["src/components/pf-pie-slice/pf-pie-slice.css?tag=pf-pie-slice&encapsulation=shadow","src/components/pf-pie-slice/pf-pie-slice.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: grid;\n  gap: var(--space-2);\n  grid-template-columns: 10px 1fr auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * A slice the chart did not draw is not a legend row either: a legend listing\n * a colour that appears nowhere in the chart is worse than a shorter legend.\n */\n:host(:not([drawn])) {\n  display: none;\n}\n\n.dot {\n  border-radius: var(--radius-full);\n  display: inline-block;\n  height: 10px;\n  width: 10px;\n}\n\n.label {\n  color: var(--pf-piechart-text);\n  font-size: var(--font-size-sm);\n  min-width: 0;\n}\n\n.value {\n  color: var(--pf-piechart-text-muted);\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One slice of a `pf-pie-chart`, and its own row in the legend.\n *\n * The React `PieChart` takes a `data` array of `{ label, value, color }`; a\n * slot renders its assigned content once and in one place, so there is no way\n * for the chart's shadow root to build a legend out of labels that live in the\n * light DOM. The slice renders its own row instead, which is the §2.1 idiom\n * and lets a consumer put anything in a label.\n *\n * `swatch`, `share` and `drawn` are the chart's to set: only it can see the\n * total.\n *\n * @slot - the slice's label.\n * @part dot - the colour swatch.\n * @part label - the label's box.\n * @part value - the share, as a whole percentage.\n */\n@Component({\n  tag: 'pf-pie-slice',\n  styleUrl: 'pf-pie-slice.css',\n  shadow: true,\n})\nexport class PfPieSlice {\n  /** How big the slice is, in whatever unit the chart's slices share. */\n  @Prop({ reflect: true }) value = 0;\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  /** Set by the chart: this slice's share, as a whole percentage. */\n  @Prop({ mutable: true }) share = 0;\n\n  /**\n   * Set by the chart: whether this slice is in the drawing at all.\n   *\n   * A slice of zero is not a wedge, so it is not a legend row either —\n   * otherwise the legend lists colours that appear nowhere in the chart.\n   * Reflected, because that is what the stylesheet hides it with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.share}%\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,waAAwa,CAAC;;MCwBzb,UAAU,GAAA,MAAA;;;;;IAEI,KAAK,GAAG,CAAC;;AAGT,IAAA,KAAK;;IAGL,MAAM,GAAG,EAAE;;IAGX,KAAK,GAAG,CAAC;AAElC;;;;;;AAMG;IACqC,KAAK,GAAG,KAAK;IAErD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,CAAS,EAC3F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,EACN,GAAA,CAAA,CACF;;;;;;;"}

package/dist/esm/pf-popover.entry.js

@@ -0,0 +1,155 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { o as observeAnchoredPosition, p as placePopover } from './place-popover-CC7AyfOt.js';
+import { K as Keys } from './keys-g4FlTDZx.js';
+
+const pfPopoverCss = () => `:host{display:inline-flex}:host([hidden]){display:none}.panel{inset:auto;margin:0;background:var(--pf-popover-bg);border:1px solid var(--pf-popover-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--pf-popover-text);max-width:min(320px, calc(100vw - 2 * var(--space-4)));padding:var(--space-3);width:max-content}.panel:focus-visible{outline:none}.panel:popover-open{animation:pf-popover-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-popover-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;
+
+const PfPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+    }
+    get el() { return getElement(this); }
+    /** Whether the panel is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Which edge of the trigger the panel lines up with. */
+    align = 'start';
+    /** Accessible name for the panel, which is a dialog. */
+    label;
+    /**
+     * Close on an outside click or Escape. Defaults to true.
+     *
+     * This is the `auto`/`manual` popover switch: turning it off hands the
+     * consumer responsibility for closing, which is what a popover holding an
+     * unfinished form wants.
+     */
+    dismissable = true;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    stopObserving;
+    componentDidLoad() {
+        this.syncTrigger();
+        if (this.open)
+            this.showPanel();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    /** Opens the panel. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the panel. */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * The one place a state change is announced, whatever caused it: a trigger
+     * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own
+     * light-dismiss mirrored in below.
+     *
+     * Emitting from the `toggle` handler instead looked right and fired for none
+     * of the user-driven paths — by the time `toggle` arrives the click handler
+     * has already moved `open`, so the guard there saw no change. A consumer
+     * mirroring this value back sets `open` to what it already is, which Stencil
+     * does not treat as a change, so there is no loop.
+     */
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        this.syncTrigger();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.firstElementChild;
+    }
+    /**
+     * The trigger's disclosure state.
+     *
+     * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does
+     * not cross a shadow boundary, so pointing it at the panel's id would leave
+     * a dangling reference — worse than none. `aria-expanded` and
+     * `aria-haspopup` carry what a screen reader announces here.
+     */
+    syncTrigger() {
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-haspopup', 'dialog');
+        trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (!panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: this.align,
+            // A popover sizes to its own content rather than to the trigger, and
+            // flips above when there is no room below.
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover(panel, left, top),
+        });
+        // The panel is a dialog, so focus belongs inside it once it is showing.
+        panel.focus();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    handleClick(event) {
+        const trigger = this.trigger;
+        // Only the trigger toggles. A click inside the panel is the content's.
+        if (!trigger || !event.composedPath().includes(trigger))
+            return;
+        this.open = !this.open;
+    }
+    /**
+     * Escape for the `manual` case only. An `auto` popover is dismissed by the
+     * browser, and handling it here as well would fight that.
+     */
+    handleKeyDown(event) {
+        if (event.key !== Keys.Escape || this.dismissable || !this.open)
+            return;
+        event.stopPropagation();
+        this.open = false;
+    }
+    /**
+     * Mirrors a change the browser made — light-dismiss, or being closed because
+     * another popover took the top layer — back into `open`, which then announces
+     * it through the watch above. Without this a consumer's `open` goes stale
+     * after a dismiss they did not initiate.
+     */
+    onToggle = (event) => {
+        const next = event.newState === 'open';
+        if (next !== this.open)
+            this.open = next;
+    };
+    render() {
+        return (h(Host, { key: 'df31f83d35301ca9e0cee9952b990ed09d9bb1a3' }, h("slot", { key: 'a302c69a56ff5e286b5d78b7fd17c0592bc5268d', onSlotchange: () => this.syncTrigger() }), h("div", { key: 'e1e7272e02705426eb375e4397cbc8941ccfb995', class: "panel", part: "panel", popover: this.dismissable ? 'auto' : 'manual', role: "dialog", "aria-label": this.label, tabindex: "-1", onToggle: this.onToggle }, h("slot", { key: '56c901b8c16a17dc5725e49c55262e0218262595', name: "content" }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfPopover.style = pfPopoverCss();
+
+export { PfPopover as pf_popover };
+//# sourceMappingURL=pf-popover.entry.js.map
+
+//# sourceMappingURL=pf-popover.entry.js.map

package/dist/esm/pf-popover.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-popover.entry.js","sources":["src/components/pf-popover/pf-popover.css?tag=pf-popover&encapsulation=shadow","src/components/pf-popover/pf-popover.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-popover-bg);\n  border: 1px solid var(--pf-popover-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-lg);\n  color: var(--pf-popover-text);\n  max-width: min(320px, calc(100vw - 2 * var(--space-4)));\n  padding: var(--space-3);\n  width: max-content;\n}\n\n.panel:focus-visible {\n  outline: none;\n}\n\n.panel:popover-open {\n  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-popover-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n","import { Keys, observeAnchoredPosition } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\nimport {\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\n/**\n * An interactive panel anchored to its trigger.\n *\n * `popover=\"auto\"` rather than `manual`, because the browser then does\n * light-dismiss and Escape itself — measured from inside a shadow root with\n * trusted input: a real outside click and a real Escape both close an `auto`\n * popover while a `manual` one stays open. That is less code than\n * `onOutsideInteraction` and it composes with the top-layer stack, so a\n * popover inside a popover closes in the right order.\n *\n * @slot - the trigger.\n * @slot content - the panel's content.\n * @part panel - the floating panel.\n */\n@Component({\n  tag: 'pf-popover',\n  styleUrl: 'pf-popover.css',\n  shadow: true,\n})\nexport class PfPopover {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the panel lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the panel, which is a dialog. */\n  @Prop() label?: string;\n\n  /**\n   * Close on an outside click or Escape. Defaults to true.\n   *\n   * This is the `auto`/`manual` popover switch: turning it off hands the\n   * consumer responsibility for closing, which is what a popover holding an\n   * unfinished form wants.\n   */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showPanel();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it: a trigger\n   * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own\n   * light-dismiss mirrored in below.\n   *\n   * Emitting from the `toggle` handler instead looked right and fired for none\n   * of the user-driven paths — by the time `toggle` arrives the click handler\n   * has already moved `open`, so the guard there saw no change. A consumer\n   * mirroring this value back sets `open` to what it already is, which Stencil\n   * does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    this.syncTrigger();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.firstElementChild as HTMLElement | null;\n  }\n\n  /**\n   * The trigger's disclosure state.\n   *\n   * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does\n   * not cross a shadow boundary, so pointing it at the panel's id would leave\n   * a dangling reference — worse than none. `aria-expanded` and\n   * `aria-haspopup` carry what a screen reader announces here.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'dialog');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (!panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: this.align,\n      // A popover sizes to its own content rather than to the trigger, and\n      // flips above when there is no room below.\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // The panel is a dialog, so focus belongs inside it once it is showing.\n    panel.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    // Only the trigger toggles. A click inside the panel is the content's.\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * Escape for the `manual` case only. An `auto` popover is dismissed by the\n   * browser, and handling it here as well would fight that.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || this.dismissable || !this.open) return;\n    event.stopPropagation();\n    this.open = false;\n  }\n\n  /**\n   * Mirrors a change the browser made — light-dismiss, or being closed because\n   * another popover took the top layer — back into `open`, which then announces\n   * it through the watch above. Without this a consumer's `open` goes stale\n   * after a dismiss they did not initiate.\n   */\n  private onToggle = (event: Event) => {\n    const next = (event as ToggleEvent).newState === 'open';\n    if (next !== this.open) this.open = next;\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.syncTrigger()} />\n        <div\n          class=\"panel\"\n          part=\"panel\"\n          popover={this.dismissable ? 'auto' : 'manual'}\n          role=\"dialog\"\n          aria-label={this.label}\n          tabindex=\"-1\"\n          onToggle={this.onToggle}\n        >\n          <slot name=\"content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-progress-bar.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+import { c as clampProgressPercent, p as progressValueNow } from './progress-BA6CMosJ.js';
+
+const pfProgressBarCss = () => `@keyframes pf-progress-bar-in{from{width:0}}:host{align-items:center;display:inline-flex;gap:var(--space-2);min-width:220px}:host([hidden]){display:none}.track{background:var(--pf-progress-track-bg);border-radius:var(--radius-full);flex:1;height:8px;overflow:hidden;pointer-events:none}.fill{animation:pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);background:var(--pf-progress-accent);border-radius:inherit;height:100%;transition:width var(--pf-transition-slow);width:var(--pf-progress-fill, 0%)}.value{color:var(--pf-progress-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}@media (prefers-reduced-motion: reduce){.fill{animation:none;transition:none}}`;
+
+const PfProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** How far along, on the 0..max scale. */
+    value = 0;
+    /** The top of the scale. */
+    max = 100;
+    /** Show the percentage beside the track. Reflected for the stylesheet. */
+    showValue = true;
+    /** Accessible name. */
+    label;
+    render() {
+        // Both layers go through core, so the same value and max always report the
+        // same aria-valuenow and draw the same fill.
+        const percent = clampProgressPercent(this.value, this.max);
+        return (h(Host, { key: '09d62e00646da11864dcc3bb4724da8864d223fe', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progressValueNow(percent, this.max)}` }, h("div", { key: '42db85945311bd44d03058c0cd957b6397624cff', class: "track", part: "track" }, h("div", { key: '8222865b45a18175308f87f4fd30a313bb5452d5', class: "fill", part: "fill", style: { '--pf-progress-fill': `${percent}%` } })), this.showValue && (h("span", { key: '9e7a195ef193fd4e730bdf3eefb2f0170be56ecc', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+};
+PfProgressBar.style = pfProgressBarCss();
+
+export { PfProgressBar as pf_progress_bar };
+//# sourceMappingURL=pf-progress-bar.entry.js.map
+
+//# sourceMappingURL=pf-progress-bar.entry.js.map

package/dist/esm/pf-progress-bar.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-bar.entry.js","sources":["src/components/pf-progress-bar/pf-progress-bar.css?tag=pf-progress-bar&encapsulation=shadow","src/components/pf-progress-bar/pf-progress-bar.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-progress-bar-in {\n  from {\n    width: 0;\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  min-width: 220px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.track {\n  background: var(--pf-progress-track-bg);\n  border-radius: var(--radius-full);\n  flex: 1;\n  height: 8px;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.fill {\n  animation: pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);\n  background: var(--pf-progress-accent);\n  border-radius: inherit;\n  height: 100%;\n  /* Animate in from 0 on mount, and smoothly between values on change. */\n  transition: width var(--pf-transition-slow);\n  width: var(--pf-progress-fill, 0%);\n}\n\n.value {\n  color: var(--pf-progress-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    animation: none;\n    transition: none;\n  }\n}\n","import { clampProgressPercent, progressValueNow } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A horizontal determinate progress track.\n *\n * @part track - the unfilled groove.\n * @part fill - the filled portion.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-bar',\n  styleUrl: 'pf-progress-bar.css',\n  shadow: true,\n})\nexport class PfProgressBar {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Show the percentage beside the track. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    // Both layers go through core, so the same value and max always report the\n    // same aria-valuenow and draw the same fill.\n    const percent = clampProgressPercent(this.value, this.max);\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n      >\n        <div class=\"track\" part=\"track\">\n          <div class=\"fill\" part=\"fill\" style={{ '--pf-progress-fill': `${percent}%` }} />\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,gsBAAgsB,CAAC;;MCeptB,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAAG,CAAC;;IAGT,GAAG,GAAG,GAAG;;IAGQ,SAAS,GAAG,IAAI;;AAGjC,IAAA,KAAK;IAEb,MAAM,GAAA;;;AAGJ,QAAA,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC;AAE1D,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,aAAa,EAAA,YAAA,EACN,IAAI,CAAC,KAAK,EAAA,eAAA,EACR,GAAG,EAAA,eAAA,EACF,CAAA,EAAG,IAAI,CAAC,GAAG,CAAA,CAAE,EAAA,eAAA,EACb,CAAA,EAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA,CAAE,EAAA,EAEvD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,CAAG,EAAE,GAAI,CAC5E,EACL,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MACf,CACR,CACI;;;;;;;"}

package/dist/esm/pf-progress-circle.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+import { c as clampProgressPercent, g as getProgressCircleGeometry, p as progressValueNow } from './progress-BA6CMosJ.js';
+
+const pfProgressCircleCss = () => `@keyframes pf-progress-circle-in{from{stroke-dashoffset:var(--pf-progress-circ)}}:host{align-items:center;display:inline-flex;height:var(--pf-progress-circle-size, 64px);justify-content:center;position:relative;width:var(--pf-progress-circle-size, 64px)}:host([hidden]){display:none}.svg{display:block;height:100%;transform:rotate(-90deg);width:100%}.circle-track,.circle-fill{fill:none}.circle-track{stroke:var(--pf-progress-track-bg)}.circle-fill{animation:pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);stroke:var(--pf-progress-accent);stroke-dashoffset:var(--pf-progress-dashoffset);stroke-linecap:round;transition:stroke-dashoffset var(--pf-transition-slow)}.value{color:var(--pf-progress-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}@media (prefers-reduced-motion: reduce){.circle-fill{animation:none;transition:none}}`;
+
+const PfProgressCircle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** How far along, on the 0..max scale. */
+    value = 0;
+    /** The top of the scale. */
+    max = 100;
+    /** Diameter in pixels. */
+    size = 64;
+    /** Ring thickness in pixels. */
+    strokeWidth = 6;
+    /** Show the percentage in the middle. Reflected for the stylesheet. */
+    showValue = true;
+    /** Accessible name. */
+    label;
+    render() {
+        const percent = clampProgressPercent(this.value, this.max);
+        // The arc only lands on the right angle if the dash offset and the dash
+        // array come from the same radius, which is why core returns them together.
+        const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(this.size, this.strokeWidth, percent);
+        return (h(Host, { key: 'b99d70605eb7b981da829d5cda0a194e6c266fc5', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progressValueNow(percent, this.max)}`, style: { '--pf-progress-circle-size': `${this.size}px` } }, h("svg", { key: '1bee11db8cfeebb35fe84bca03621a9e64a84c60', class: "svg", part: "svg", viewBox: `0 0 ${this.size} ${this.size}`, "aria-hidden": "true", focusable: "false" }, h("circle", { key: '8dc237646a40afa9d8f8ddff456367afa3b35718', class: "circle-track", part: "track", cx: `${center}`, cy: `${center}`, r: `${radius}`, "stroke-width": `${this.strokeWidth}` }), h("circle", { key: '34f8f094047de322717ff56dc956de39749de1eb', class: "circle-fill", part: "fill", cx: `${center}`, cy: `${center}`, r: `${radius}`, "stroke-width": `${this.strokeWidth}`, "stroke-dasharray": `${circumference}`, style: {
+                '--pf-progress-dashoffset': `${dashOffset}`,
+                '--pf-progress-circ': `${circumference}`,
+            } })), this.showValue && (h("span", { key: '18a89c9d9f967609f23db7e2a520df4f8400b1ad', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+};
+PfProgressCircle.style = pfProgressCircleCss();
+
+export { PfProgressCircle as pf_progress_circle };
+//# sourceMappingURL=pf-progress-circle.entry.js.map
+
+//# sourceMappingURL=pf-progress-circle.entry.js.map

package/dist/esm/pf-progress-circle.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-circle.entry.js","sources":["src/components/pf-progress-circle/pf-progress-circle.css?tag=pf-progress-circle&encapsulation=shadow","src/components/pf-progress-circle/pf-progress-circle.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-progress-circle-in {\n  from {\n    stroke-dashoffset: var(--pf-progress-circ);\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  height: var(--pf-progress-circle-size, 64px);\n  justify-content: center;\n  position: relative;\n  width: var(--pf-progress-circle-size, 64px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: 100%;\n  /* Start the arc at twelve o'clock rather than three. */\n  transform: rotate(-90deg);\n  width: 100%;\n}\n\n.circle-track,\n.circle-fill {\n  fill: none;\n}\n\n.circle-track {\n  stroke: var(--pf-progress-track-bg);\n}\n\n.circle-fill {\n  animation: pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);\n  stroke: var(--pf-progress-accent);\n  stroke-dashoffset: var(--pf-progress-dashoffset);\n  stroke-linecap: round;\n  /* Animate in from empty on mount, and smoothly between values on change. */\n  transition: stroke-dashoffset var(--pf-transition-slow);\n}\n\n.value {\n  color: var(--pf-progress-text);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .circle-fill {\n    animation: none;\n    transition: none;\n  }\n}\n","import {\n  clampProgressPercent,\n  getProgressCircleGeometry,\n  progressValueNow,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A circular determinate progress track.\n *\n * @part svg - the drawing surface.\n * @part track - the unfilled ring.\n * @part fill - the drawn arc.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-circle',\n  styleUrl: 'pf-progress-circle.css',\n  shadow: true,\n})\nexport class PfProgressCircle {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Diameter in pixels. */\n  @Prop() size = 64;\n\n  /** Ring thickness in pixels. */\n  @Prop() strokeWidth = 6;\n\n  /** Show the percentage in the middle. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const percent = clampProgressPercent(this.value, this.max);\n    // The arc only lands on the right angle if the dash offset and the dash\n    // array come from the same radius, which is why core returns them together.\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      this.size,\n      this.strokeWidth,\n      percent,\n    );\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n        style={{ '--pf-progress-circle-size': `${this.size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${this.size} ${this.size}`}\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <circle\n            class=\"circle-track\"\n            part=\"track\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n          />\n          <circle\n            class=\"circle-fill\"\n            part=\"fill\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n            stroke-dasharray={`${circumference}`}\n            style={{\n              '--pf-progress-dashoffset': `${dashOffset}`,\n              '--pf-progress-circ': `${circumference}`,\n            }}\n          />\n        </svg>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,+6BAA+6B,CAAC;;MCoBt8B,gBAAgB,GAAA,MAAA;;;;;IAEnB,KAAK,GAAG,CAAC;;IAGT,GAAG,GAAG,GAAG;;IAGT,IAAI,GAAG,EAAE;;IAGT,WAAW,GAAG,CAAC;;IAGE,SAAS,GAAG,IAAI;;AAGjC,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC;;;QAG1D,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,yBAAyB,CAC7E,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,WAAW,EAChB,OAAO,CACR;QAED,QACE,CAAA,CAAC,IAAI,qDACH,IAAI,EAAC,aAAa,EAAA,YAAA,EACN,IAAI,CAAC,KAAK,mBACR,GAAG,EAAA,eAAA,EACF,CAAA,EAAG,IAAI,CAAC,GAAG,CAAA,CAAE,EAAA,eAAA,EACb,GAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACvD,KAAK,EAAE,EAAE,2BAA2B,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI,EAAE,EAAA,EAExD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,EAAE,iBAC5B,MAAM,EAClB,SAAS,EAAC,OAAO,EAAA,EAEjB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,CAAA,EAAG,MAAM,CAAA,CAAE,EACf,EAAE,EAAE,CAAA,EAAG,MAAM,CAAA,CAAE,EACf,CAAC,EAAE,CAAA,EAAG,MAAM,CAAA,CAAE,EAAA,cAAA,EACA,CAAA,EAAG,IAAI,CAAC,WAAW,EAAE,EAAA,CACnC,EACF,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,CAAA,EAAG,MAAM,EAAE,EACf,EAAE,EAAE,CAAA,EAAG,MAAM,EAAE,EACf,CAAC,EAAE,CAAA,EAAG,MAAM,EAAE,kBACA,CAAA,EAAG,IAAI,CAAC,WAAW,CAAA,CAAE,EAAA,kBAAA,EACjB,GAAG,aAAa,CAAA,CAAE,EACpC,KAAK,EAAE;gBACL,0BAA0B,EAAE,CAAA,EAAG,UAAU,CAAA,CAAE;gBAC3C,oBAAoB,EAAE,CAAA,EAAG,aAAa,CAAA,CAAE;AACzC,aAAA,EAAA,CACD,CACE,EACL,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MACf,CACR,CACI;;;;;;;"}

package/dist/esm/pf-progress-step.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfProgressStepCss = () => `:host{display:flex;gap:var(--space-3)}:host([hidden]){display:none}:host([orientation='horizontal']){align-items:center;flex-direction:column;gap:var(--space-2)}:host([orientation='vertical']){align-items:flex-start;position:relative}.marker-wrap{align-items:center;display:flex;flex:0 0 auto}:host([orientation='horizontal']) .marker-wrap{justify-content:center}@media (min-width: 640px){:host([orientation='horizontal']) .marker-wrap{flex:1;position:relative;width:100%}}:host([orientation='vertical']) .marker-wrap{align-items:center;flex-direction:column}.marker{align-items:center;background:var(--pf-progress-steps-bg);border:1px solid var(--pf-progress-steps-border);border-radius:var(--radius-full);color:var(--pf-progress-steps-text-muted);display:inline-flex;flex:0 0 auto;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);height:28px;justify-content:center;position:relative;width:28px;z-index:1;transition:background-color var(--pf-transition-medium),     border-color var(--pf-transition-medium),     color var(--pf-transition-medium),     box-shadow var(--pf-transition-medium)}.connector{background:var(--pf-progress-steps-border);display:block;flex:1;margin-inline-start:var(--space-2);transition:background-color var(--pf-transition-slow)}:host([orientation='horizontal']) .connector{display:none}@media (min-width: 640px){:host([orientation='horizontal']) .connector{display:block;height:1px;left:50%;margin-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);width:calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));z-index:0}}:host([orientation='vertical']) .connector{bottom:calc(var(--space-3) * -1);inset-inline-start:14px;margin:0;position:absolute;top:28px;width:1px}.content{min-width:0}:host([orientation='horizontal']) .content{text-align:center}.title{color:var(--pf-progress-steps-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:var(--space-1) 0 0;transition:color var(--pf-transition-medium)}slot[name='description']::slotted(*){color:var(--pf-progress-steps-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.4;margin:var(--space-1) 0 0}:host([state='complete']) .marker{background:var(--pf-progress-steps-complete-bg);border-color:var(--pf-progress-steps-complete-border);color:var(--pf-progress-steps-complete-text)}:host([state='current']) .marker{background:var(--pf-progress-steps-current-bg);border-color:var(--pf-progress-steps-current-border);box-shadow:var(--pf-focus-ring);color:var(--pf-progress-steps-current-text)}:host([state='complete']) .connector{background:var(--pf-progress-steps-complete-border)}:host([state='current']) .title{color:var(--pf-progress-steps-current-title)}@media (prefers-reduced-motion: reduce){.marker,.connector,.title{transition:none}}`;
+
+const PfProgressStep = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Set it to say where the trail has got to — usually `current` on one step,
+     * and the group infers the rest.
+     *
+     * This is the *asking* half, which the group never writes; `state` below is
+     * the answer. Keeping them apart is what lets the trail change: if the
+     * answer were written back here, the first step of a trail that said nothing
+     * would look explicitly `current`, and prepending a step would leave the
+     * mark behind on it.
+     */
+    status;
+    /**
+     * Set by the group: the resolved status, which is what the stylesheet reads
+     * and what carries `aria-current="step"` for the one current step.
+     */
+    state = 'upcoming';
+    /** Set by the group: the step's number, counting from 1. */
+    position = 1;
+    /** Set by the group: the last step draws no connector. */
+    last = false;
+    /** Set by the group from its own `orientation`. Reflected for the stylesheet. */
+    orientation = 'horizontal';
+    render() {
+        return (h(Host, { key: '178b256dfa9df01c41cacddbd9e49c72beb2567f', role: "listitem", "aria-current": this.state === 'current' ? 'step' : null }, h("div", { key: 'f8b100c14751727adaad8a604de7a900a7963086', class: "marker-wrap", part: "marker-wrap", "aria-hidden": "true" }, h("span", { key: 'bcf15a8d42e80f56cd53da2a41513d90454d7c76', class: "marker", part: "marker" }, this.position), !this.last && h("span", { key: 'eade849134d12e42e40cc8fb6dfe21c3c026ed5b', class: "connector", part: "connector" })), h("div", { key: '6b169c22f58a7c4eba922f19d969d7560fa71b9e', class: "content", part: "content" }, h("p", { key: 'b12aa29ae1dee718543f3ed7d586e2c901bb6562', class: "title", part: "title" }, h("slot", { key: 'a61cf4299dddc0e92a1b89cc6d21496b0519efef', name: "title" })), h("slot", { key: 'b026c37e8600250f9df2e01b7704a60f0b876fd9', name: "description" }))));
+    }
+};
+PfProgressStep.style = pfProgressStepCss();
+
+export { PfProgressStep as pf_progress_step };
+//# sourceMappingURL=pf-progress-step.entry.js.map
+
+//# sourceMappingURL=pf-progress-step.entry.js.map

package/dist/esm/pf-progress-step.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-step.entry.js","sources":["src/components/pf-progress-step/pf-progress-step.css?tag=pf-progress-step&encapsulation=shadow","src/components/pf-progress-step/pf-progress-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  gap: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  align-items: center;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n\n:host([orientation='vertical']) {\n  align-items: flex-start;\n  position: relative;\n}\n\n.marker-wrap {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n:host([orientation='horizontal']) .marker-wrap {\n  justify-content: center;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) .marker-wrap {\n    flex: 1;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host([orientation='vertical']) .marker-wrap {\n  align-items: center;\n  flex-direction: column;\n}\n\n.marker {\n  align-items: center;\n  background: var(--pf-progress-steps-bg);\n  border: 1px solid var(--pf-progress-steps-border);\n  border-radius: var(--radius-full);\n  color: var(--pf-progress-steps-text-muted);\n  display: inline-flex;\n  flex: 0 0 auto;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  height: 28px;\n  justify-content: center;\n  position: relative;\n  width: 28px;\n  z-index: 1;\n  /* The marker changes as the current step advances. */\n  transition:\n    background-color var(--pf-transition-medium),\n    border-color var(--pf-transition-medium),\n    color var(--pf-transition-medium),\n    box-shadow var(--pf-transition-medium);\n}\n\n.connector {\n  background: var(--pf-progress-steps-border);\n  display: block;\n  flex: 1;\n  margin-inline-start: var(--space-2);\n  /* The connector fills in as the step completes. */\n  transition: background-color var(--pf-transition-slow);\n}\n\n:host([orientation='horizontal']) .connector {\n  display: none;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) .connector {\n    display: block;\n    height: 1px;\n    left: 50%;\n    margin-inline-start: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    /* Spans the group's own gap, which it reads through the bridge above. */\n    width: calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));\n    z-index: 0;\n  }\n}\n\n:host([orientation='vertical']) .connector {\n  bottom: calc(var(--space-3) * -1);\n  inset-inline-start: 14px;\n  margin: 0;\n  position: absolute;\n  top: 28px;\n  width: 1px;\n}\n\n.content {\n  min-width: 0;\n}\n\n:host([orientation='horizontal']) .content {\n  text-align: center;\n}\n\n.title {\n  color: var(--pf-progress-steps-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: var(--space-1) 0 0;\n  transition: color var(--pf-transition-medium);\n}\n\n/*\n * The description is styled through the slot rather than wrapped in a box of\n * its own, so that a step without one has no stray margin: a wrapper cannot be\n * collapsed from CSS, while an unassigned slot generates nothing at all.\n */\nslot[name='description']::slotted(*) {\n  color: var(--pf-progress-steps-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  margin: var(--space-1) 0 0;\n}\n\n:host([state='complete']) .marker {\n  background: var(--pf-progress-steps-complete-bg);\n  border-color: var(--pf-progress-steps-complete-border);\n  color: var(--pf-progress-steps-complete-text);\n}\n\n:host([state='current']) .marker {\n  background: var(--pf-progress-steps-current-bg);\n  border-color: var(--pf-progress-steps-current-border);\n  /*\n   * `--pf-focus-ring`, not the `--focus-ring-shadow` the React component asked\n   * for: that one is defined nowhere, and an undefined custom property makes\n   * the declaration invalid at computed-value time -- measured in Chromium,\n   * `box-shadow: var(--focus-ring-shadow)` computes to `none`, so the ring had\n   * never been drawn. Fixed in both layers.\n   */\n  box-shadow: var(--pf-focus-ring);\n  color: var(--pf-progress-steps-current-text);\n}\n\n:host([state='complete']) .connector {\n  background: var(--pf-progress-steps-complete-border);\n}\n\n:host([state='current']) .title {\n  color: var(--pf-progress-steps-current-title);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marker,\n  .connector,\n  .title {\n    transition: none;\n  }\n}\n","import type { StepStatus } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { PfProgressStepsOrientation } from '../pf-progress-steps/pf-progress-steps';\n\n/**\n * One step inside a `pf-progress-steps`.\n *\n * @slot title - the step's title.\n * @slot description - secondary text below the title.\n * @part marker-wrap - the box holding the marker and the connector.\n * @part marker - the numbered circle.\n * @part connector - the line to the next step. Absent on the last.\n * @part content - the box holding the title and description.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-progress-step',\n  styleUrl: 'pf-progress-step.css',\n  shadow: true,\n})\nexport class PfProgressStep {\n  /**\n   * Set it to say where the trail has got to — usually `current` on one step,\n   * and the group infers the rest.\n   *\n   * This is the *asking* half, which the group never writes; `state` below is\n   * the answer. Keeping them apart is what lets the trail change: if the\n   * answer were written back here, the first step of a trail that said nothing\n   * would look explicitly `current`, and prepending a step would leave the\n   * mark behind on it.\n   */\n  @Prop({ reflect: true }) status?: StepStatus;\n\n  /**\n   * Set by the group: the resolved status, which is what the stylesheet reads\n   * and what carries `aria-current=\"step\"` for the one current step.\n   */\n  @Prop({ mutable: true, reflect: true }) state: StepStatus = 'upcoming';\n\n  /** Set by the group: the step's number, counting from 1. */\n  @Prop({ mutable: true }) position = 1;\n\n  /** Set by the group: the last step draws no connector. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Set by the group from its own `orientation`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) orientation: PfProgressStepsOrientation = 'horizontal';\n\n  render() {\n    return (\n      <Host role=\"listitem\" aria-current={this.state === 'current' ? 'step' : null}>\n        {/* Decorative: the number repeats the step's position in the list. */}\n        <div class=\"marker-wrap\" part=\"marker-wrap\" aria-hidden=\"true\">\n          <span class=\"marker\" part=\"marker\">\n            {this.position}\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <p class=\"title\" part=\"title\">\n            <slot name=\"title\" />\n          </p>\n          {/*\n            No wrapper around the description, deliberately: a box around a\n            slot cannot be collapsed from CSS — `:not(:has(*))` never matches,\n            because the slot is itself a child — so an empty one would leave\n            its margin under every step without a description. An *unassigned*\n            slot generates nothing, so the styling goes on `::slotted(*)` and\n            the box goes away with the content.\n          */}\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,+wFAA+wF,CAAC;;MCqBpyF,cAAc,GAAA,MAAA;;;;AACzB;;;;;;;;;AASG;AACsB,IAAA,MAAM;AAE/B;;;AAGG;IACqC,KAAK,GAAe,UAAU;;IAG7C,QAAQ,GAAG,CAAC;;IAGG,IAAI,GAAG,KAAK;;IAGZ,WAAW,GAA+B,YAAY;IAE9F,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EAE1E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,iBAAa,MAAM,EAAA,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/B,IAAI,CAAC,QAAQ,CACT,EACN,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,GAAG,CACtD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,EASJ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACD;;;;;;;"}

package/dist/esm/pf-progress-steps.entry.js

@@ -0,0 +1,97 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+//#region src/steps.ts
+/**
+* A status for every step, in order.
+*
+* An explicit status always wins, so a trail can mark several steps complete
+* out of order if it really wants to. Everything else follows from the first
+* step marked `current`: before it is complete, after it is upcoming. With
+* nothing marked at all the first step is the current one, because a progress
+* indicator showing no progress at all reads as broken.
+*
+* The whole array rather than one step's answer, so the scan for that first
+* `current` happens once instead of once per step.
+*/
+function resolveStepStatuses(steps) {
+	const firstCurrent = steps.findIndex((step) => step.status === "current");
+	return steps.map((step, index) => {
+		if (step.status) return step.status;
+		if (firstCurrent === -1) return index === 0 ? "current" : "upcoming";
+		return index < firstCurrent ? "complete" : "upcoming";
+	});
+}
+
+const pfProgressStepsCss = () => `:host{display:grid}:host([hidden]){display:none}:host([orientation='horizontal']){--pf-progress-step-gap:var(--space-3);gap:var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap));grid-template-columns:1fr}@media (min-width: 640px){:host([orientation='horizontal']){--pf-progress-step-gap:var(--space-4);grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}}:host([orientation='vertical']){gap:var(--space-3)}slot{display:contents}`;
+
+const PfProgressSteps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Layout. Reflected, and pushed down onto every step. */
+    orientation = 'horizontal';
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleOrientationChange() {
+        this.sync();
+    }
+    /**
+     * Re-reads the children, for a consumer who set a step's status through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested indicator owns its own steps. */
+    get steps() {
+        return Array.from(this.el.querySelectorAll('pf-progress-step')).filter((step) => step.parentElement === this.el);
+    }
+    /**
+     * The property if the step has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    askedStatus(step) {
+        const asProp = step.status;
+        return asProp ?? step.getAttribute('status') ?? undefined;
+    }
+    /**
+     * Core's inference, so the React `ProgressSteps` reads the same trail the
+     * same way.
+     *
+     * The answer goes to `state`, never to the `status` a consumer asked with —
+     * the lesson `pf-breadcrumbs` learned the hard way. Writing it back would
+     * make the first step of an unmarked trail look explicitly `current`, and
+     * prepending a step would then leave the mark behind on it.
+     */
+    sync() {
+        const steps = this.steps;
+        const statuses = resolveStepStatuses(steps.map((step) => ({ status: this.askedStatus(step) })));
+        for (const [index, step] of steps.entries()) {
+            const node = step;
+            node.state = statuses[index];
+            node.position = index + 1;
+            node.last = index === steps.length - 1;
+            node.orientation = this.orientation;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'cf93162c6e257b13786028c3c4d602642786fd39', role: "list" }, h("slot", { key: '1d1d22b80605aff984af850933c4221a7ae740da', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "orientation": [{
+                "handleOrientationChange": 0
+            }]
+    }; }
+};
+PfProgressSteps.style = pfProgressStepsCss();
+
+export { PfProgressSteps as pf_progress_steps };
+//# sourceMappingURL=pf-progress-steps.entry.js.map
+
+//# sourceMappingURL=pf-progress-steps.entry.js.map

package/dist/esm/pf-progress-steps.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-steps.entry.js","sources":["../core/dist/steps.js","src/components/pf-progress-steps/pf-progress-steps.css?tag=pf-progress-steps&encapsulation=shadow","src/components/pf-progress-steps/pf-progress-steps.tsx"],"sourcesContent":["//#region src/steps.ts\n/**\n* A status for every step, in order.\n*\n* An explicit status always wins, so a trail can mark several steps complete\n* out of order if it really wants to. Everything else follows from the first\n* step marked `current`: before it is complete, after it is upcoming. With\n* nothing marked at all the first step is the current one, because a progress\n* indicator showing no progress at all reads as broken.\n*\n* The whole array rather than one step's answer, so the scan for that first\n* `current` happens once instead of once per step.\n*/\nfunction resolveStepStatuses(steps) {\n\tconst firstCurrent = steps.findIndex((step) => step.status === \"current\");\n\treturn steps.map((step, index) => {\n\t\tif (step.status) return step.status;\n\t\tif (firstCurrent === -1) return index === 0 ? \"current\" : \"upcoming\";\n\t\treturn index < firstCurrent ? \"complete\" : \"upcoming\";\n\t});\n}\n//#endregion\nexport { resolveStepStatuses };\n",":host {\n  display: grid;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The gap is declared here and read by each step's connector, which has to\n * span it: custom properties inherit through the shadow boundary, so the\n * child picks up whichever indicator it is slotted into. The same bridge\n * pf-option uses for its colours.\n */\n:host([orientation='horizontal']) {\n  --pf-progress-step-gap: var(--space-3);\n  gap: var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap));\n  grid-template-columns: 1fr;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) {\n    --pf-progress-step-gap: var(--space-4);\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  }\n}\n\n:host([orientation='vertical']) {\n  gap: var(--space-3);\n}\n\n/* The steps have to be grid items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { resolveStepStatuses, type StepStatus } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\nexport type PfProgressStepsOrientation = 'horizontal' | 'vertical';\n\n/**\n * A step indicator over `pf-progress-step` children.\n *\n * The group owns everything a step cannot see on its own: its number, whether\n * it is last — so only the others draw a connector — the orientation, and the\n * status inference, which depends on where the current step is.\n *\n * @slot - the `pf-progress-step` children.\n */\n@Component({\n  tag: 'pf-progress-steps',\n  styleUrl: 'pf-progress-steps.css',\n  shadow: true,\n})\nexport class PfProgressSteps {\n  @Element() el!: HTMLElement;\n\n  /** Layout. Reflected, and pushed down onto every step. */\n  @Prop({ reflect: true }) orientation: PfProgressStepsOrientation = 'horizontal';\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('orientation')\n  handleOrientationChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who set a step's status through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested indicator owns its own steps. */\n  private get steps(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-progress-step')).filter(\n      (step) => step.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the step has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private askedStatus(step: HTMLElement): StepStatus | undefined {\n    const asProp = (step as HTMLElement & { status?: StepStatus }).status;\n    return asProp ?? (step.getAttribute('status') as StepStatus | null) ?? undefined;\n  }\n\n  /**\n   * Core's inference, so the React `ProgressSteps` reads the same trail the\n   * same way.\n   *\n   * The answer goes to `state`, never to the `status` a consumer asked with —\n   * the lesson `pf-breadcrumbs` learned the hard way. Writing it back would\n   * make the first step of an unmarked trail look explicitly `current`, and\n   * prepending a step would then leave the mark behind on it.\n   */\n  private sync() {\n    const steps = this.steps;\n    const statuses = resolveStepStatuses(steps.map((step) => ({ status: this.askedStatus(step) })));\n\n    for (const [index, step] of steps.entries()) {\n      const node = step as HTMLElement & {\n        state: StepStatus;\n        position: number;\n        last: boolean;\n        orientation: PfProgressStepsOrientation;\n      };\n      node.state = statuses[index];\n      node.position = index + 1;\n      node.last = index === steps.length - 1;\n      node.orientation = this.orientation;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\">\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,mBAAmB,CAAC,KAAK,EAAE;AACpC,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;AAC1E,CAAC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK;AACnC,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM;AACrC,EAAE,IAAI,YAAY,KAAK,EAAE,EAAE,OAAO,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,UAAU;AACtE,EAAE,OAAO,KAAK,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU;AACvD,EAAE,CAAC;AACH;;ACpBA,MAAM,kBAAkB,GAAG,MAAM,CAAC,ocAAoc,CAAC;;MCmB1d,eAAe,GAAA,MAAA;;;;;;IAID,WAAW,GAA+B,YAAY;;IAG/E,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGb,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;IAIb,uBAAuB,GAAA;QACrB,IAAI,CAAC,IAAI,EAAE;;AAGb;;;AAGG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,IAAI,KAAK,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CACzC;;AAGH;;;AAGG;AACK,IAAA,WAAW,CAAC,IAAiB,EAAA;AACnC,QAAA,MAAM,MAAM,GAAI,IAA8C,CAAC,MAAM;QACrE,OAAO,MAAM,IAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAuB,IAAI,SAAS;;AAGlF;;;;;;;;AAQG;IACK,IAAI,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACxB,MAAM,QAAQ,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/F,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE;YAC3C,MAAM,IAAI,GAAG,IAKZ;AACD,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC5B,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACtC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;;;IAIvC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACvC;;;;;;;;;;;;"}

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

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfRadarAxisCss = () => `:host{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}:host([hidden]){display:none}:host(:not([drawn])){display:none}.label{color:var(--pf-radar-legend-text);font-size:var(--font-size-sm)}.value{color:var(--pf-radar-legend-value);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}`;
+
+const PfRadarAxis = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The axis's name, drawn in the chart and in the legend. */
+    label = '';
+    /** How far along this axis the shape reaches. */
+    value = 0;
+    /**
+     * Set by the chart: whether this axis is in the drawing.
+     *
+     * An axis with an unusable value is not drawn, so it is not a legend row
+     * either — a legend naming an axis that appears nowhere is worse than a
+     * shorter legend. Reflected, because that is what the stylesheet hides it
+     * with.
+     */
+    drawn = false;
+    render() {
+        return (h(Host, { key: '41f13fdd1cdc8cf1bf0ae402af0007047cfa0545', role: "listitem" }, h("span", { key: '061bc65887e2bdac027a2bb4e15f0e03512e7add', class: "label", part: "label" }, this.label), h("span", { key: 'c9edf254f3998b842bd62eb0c071366ac6082a40', class: "value", part: "value" }, this.value)));
+    }
+};
+PfRadarAxis.style = pfRadarAxisCss();
+
+export { PfRadarAxis as pf_radar_axis };
+//# sourceMappingURL=pf-radar-axis.entry.js.map
+
+//# sourceMappingURL=pf-radar-axis.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-radar-axis.entry.js","sources":["src/components/pf-radar-axis/pf-radar-axis.css?tag=pf-radar-axis&encapsulation=shadow","src/components/pf-radar-axis/pf-radar-axis.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* An axis the chart did not draw is not a legend row either. */\n:host(:not([drawn])) {\n  display: none;\n}\n\n.label {\n  color: var(--pf-radar-legend-text);\n  font-size: var(--font-size-sm);\n}\n\n.value {\n  color: var(--pf-radar-legend-value);\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One axis of a `pf-radar-chart`, and its own row in the legend.\n *\n * The name is a `label` **attribute** rather than slotted content, which is\n * the one place this differs from the React `RadarChart`'s `ReactNode`: the\n * chart draws each name inside its own SVG as a `<text>`, and an SVG `<text>`\n * cannot hold arbitrary markup in either layer. The legend row the axis draws\n * for itself uses the same string, so the two always agree.\n *\n * @part label - the legend row's name.\n * @part value - the legend row's number.\n */\n@Component({\n  tag: 'pf-radar-axis',\n  styleUrl: 'pf-radar-axis.css',\n  shadow: true,\n})\nexport class PfRadarAxis {\n  /** The axis's name, drawn in the chart and in the legend. */\n  @Prop({ reflect: true }) label = '';\n\n  /** How far along this axis the shape reaches. */\n  @Prop({ reflect: true }) value = 0;\n\n  /**\n   * Set by the chart: whether this axis is in the drawing.\n   *\n   * An axis with an unusable value is not drawn, so it is not a legend row\n   * either — a legend naming an axis that appears nowhere is worse than a\n   * shorter legend. Reflected, because that is what the stylesheet hides it\n   * with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.value}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,uUAAuU,CAAC;;MCmBzV,WAAW,GAAA,MAAA;;;;;IAEG,KAAK,GAAG,EAAE;;IAGV,KAAK,GAAG,CAAC;AAElC;;;;;;;AAOG;IACqC,KAAK,GAAG,KAAK;IAErD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CACN,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CACN,CACF;;;;;;;"}