@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/cjs/pf-pie-chart.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var pie = require('./pie-Bf7gKQU2.js');
+
+const pfPieChartCss = () => `:host{align-items:flex-start;display:inline-flex;flex-direction:column;gap:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row;gap:var(--space-6)}}.visual{align-items:center;border-radius:var(--radius-full);display:inline-flex;flex:0 0 auto;justify-content:center;position:relative}@property --pf-pie-sweep{syntax:'<percentage>';inherits:false;initial-value:0%}.gradient{--pf-pie-sweep:100%;animation:pf-pie-sweep var(--duration-slow) var(--easing-decelerate);background-image:var(--pf-pie-gradient);border-radius:inherit;inset:0;mask:conic-gradient(#000 var(--pf-pie-sweep), #0000 0);position:absolute}@keyframes pf-pie-sweep{from{--pf-pie-sweep:0%}}@media (prefers-reduced-motion: reduce){.gradient{animation:none}}.visual--empty{outline:1px solid var(--pf-piechart-border-muted)}.center{align-items:center;background:var(--pf-piechart-bg);border-radius:var(--radius-full);color:var(--pf-piechart-text);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);justify-content:center;line-height:1.2;position:relative;text-align:center;z-index:1}.legend{display:grid;gap:var(--space-2);list-style:none;margin:0;min-width:0;padding:0;width:100%}@media (min-width: 640px){.legend{min-width:180px;width:auto}}.legend.legend--hidden{display:none}.legend slot{display:contents}`;
+
+const PfPieChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Diameter, in pixels. Never below 120, where the ring stops reading. */
+    size = 192;
+    /** The hole in the middle, as a fraction of the diameter. */
+    cutout = 0.58;
+    /** Show the legend the slices make up. Reflected. */
+    showLegend = true;
+    /** The chart's accessible name. */
+    label = 'Pie chart';
+    /** The gradient painting the wedges, which only the chart can work out. */
+    gradient = 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';
+    /** Whether anything is drawable, which decides between chart and empty state. */
+    hasData = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * Re-reads the slices, for a consumer who changed a value through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested chart owns its own slices. */
+    get slices() {
+        return Array.from(this.el.querySelectorAll('pf-pie-slice')).filter((slice) => slice.parentElement === this.el);
+    }
+    /**
+     * The property if the slice has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    read(slice) {
+        const node = slice;
+        const value = node.value ?? Number(slice.getAttribute('value'));
+        return {
+            value: Number(value),
+            color: node.color ?? slice.getAttribute('color') ?? undefined,
+        };
+    }
+    sync() {
+        const slices = this.slices;
+        const segments = pie.preparePieSegments(slices.map((slice) => this.read(slice)));
+        const shares = pie.roundPercentages(segments.map((segment) => segment.percentage));
+        this.hasData = segments.length > 0;
+        this.gradient = this.hasData
+            ? pie.pieConicGradient(segments)
+            : 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';
+        /*
+         * `index` is the slice's place in the original children, which is what
+         * carries the answer back to the right slice: `preparePieSegments` drops
+         * the ones that are not drawable, so its own positions no longer line up
+         * with the children.
+         */
+        const bySlice = new Map(segments.map((segment, position) => [segment.index, position]));
+        for (const [index, slice] of slices.entries()) {
+            const position = bySlice.get(index);
+            const node = slice;
+            node.drawn = position !== undefined;
+            node.swatch = position === undefined ? '' : segments[position].color;
+            node.share = position === undefined ? 0 : shares[position];
+        }
+    }
+    render() {
+        const size = Math.max(Number(this.size) || 192, 120);
+        const centerSize = Math.round(size * pie.clampPieCutout(Number(this.cutout)));
+        return (index.h(index.Host, { key: '022a7813d1656d3dbbfe1da544ba8d141a02b027' }, index.h("div", { key: '7cdca0aa65218b02f82a52eb6b7b56e466a8e88d', class: { visual: true, 'visual--empty': !this.hasData }, part: "visual", role: "img", "aria-label": this.label, style: { width: `${size}px`, height: `${size}px` } }, index.h("div", { key: 'a9117ff8be6a7365368b2a137d9be1ac087f9a5e', class: "gradient", part: "gradient", "aria-hidden": "true", style: { '--pf-pie-gradient': this.gradient } }), index.h("div", { key: '0a952bb9a7bdaa508bd3b700f9ca39deaa25fede', class: "center", part: "center", style: { width: `${centerSize}px`, height: `${centerSize}px` } }, this.hasData ? index.h("slot", { name: "center" }) : index.h("slot", { name: "empty" }, "No data"))), index.h("ul", { key: '4700e4485029a450f28e8aa18dd1f53b6891b3fe', class: { legend: true, 'legend--hidden': !this.showLegend }, part: "legend" }, index.h("slot", { key: 'dd50658f3539b602ef305d24fd66d3b3c87eb552', onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "cutout": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfPieChart.style = pfPieChartCss();
+
+exports.pf_pie_chart = PfPieChart;
+//# sourceMappingURL=pf-pie-chart.entry.cjs.js.map
+
+//# sourceMappingURL=pf-pie-chart.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-pie-chart.cjs.entry.js","mappings":"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","names":["preparePieSegments","roundPercentages","pieConicGradient","clampPieCutout","h","Host"],"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"],"version":3}

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

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.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) {
+        index.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 (index.h(index.Host, { key: '122c85fbc58816acce27ac06547eb4f2adf63788', role: "listitem" }, index.h("span", { key: 'd2d41879c922a4b929b801e4e3b2add7227cd79f', class: "dot", part: "dot", "aria-hidden": "true", style: { background: this.swatch } }), index.h("span", { key: '46ea91d2d36a9269558548f0c2bc446b7d556467', class: "label", part: "label" }, index.h("slot", { key: 'd8eb86e569151c9b26de626e6dd6c08feee8da75' })), index.h("span", { key: 'cbf292f34e267cf4ff37bded7da86649d7ea9ed6', class: "value", part: "value" }, this.share, "%")));
+    }
+};
+PfPieSlice.style = pfPieSliceCss();
+
+exports.pf_pie_slice = PfPieSlice;
+//# sourceMappingURL=pf-pie-slice.entry.cjs.js.map
+
+//# sourceMappingURL=pf-pie-slice.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-pie-slice.cjs.entry.js","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,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,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,EAC3FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,EACN,GAAA,CAAA,CACF;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,157 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var keys = require('./keys-S3YTuCcn.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) {
+        index.registerInstance(this, hostRef);
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+    }
+    get el() { return index.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 = placePopover.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.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.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 (index.h(index.Host, { key: 'df31f83d35301ca9e0cee9952b990ed09d9bb1a3' }, index.h("slot", { key: 'a302c69a56ff5e286b5d78b7fd17c0592bc5268d', onSlotchange: () => this.syncTrigger() }), index.h("div", { key: 'e1e7272e02705426eb375e4397cbc8941ccfb995', class: "panel", part: "panel", popover: this.dismissable ? 'auto' : 'manual', role: "dialog", "aria-label": this.label, tabindex: "-1", onToggle: this.onToggle }, index.h("slot", { key: '56c901b8c16a17dc5725e49c55262e0218262595', name: "content" }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfPopover.style = pfPopoverCss();
+
+exports.pf_popover = PfPopover;
+//# sourceMappingURL=pf-popover.entry.cjs.js.map
+
+//# sourceMappingURL=pf-popover.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-popover.cjs.entry.js","mappings":"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","names":["observeAnchoredPosition","placePopover","Keys","h","Host"],"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"],"version":3}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var progress = require('./progress-DVUoQ3h5.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) {
+        index.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 = progress.clampProgressPercent(this.value, this.max);
+        return (index.h(index.Host, { key: '09d62e00646da11864dcc3bb4724da8864d223fe', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progress.progressValueNow(percent, this.max)}` }, index.h("div", { key: '42db85945311bd44d03058c0cd957b6397624cff', class: "track", part: "track" }, index.h("div", { key: '8222865b45a18175308f87f4fd30a313bb5452d5', class: "fill", part: "fill", style: { '--pf-progress-fill': `${percent}%` } })), this.showValue && (index.h("span", { key: '9e7a195ef193fd4e730bdf3eefb2f0170be56ecc', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+};
+PfProgressBar.style = pfProgressBarCss();
+
+exports.pf_progress_bar = PfProgressBar;
+//# sourceMappingURL=pf-progress-bar.entry.cjs.js.map
+
+//# sourceMappingURL=pf-progress-bar.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-progress-bar.cjs.entry.js","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,GAAGA,6BAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC;AAE1D,QAAA,QACEC,OAAA,CAACC,UAAI,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,EAAGC,yBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA,CAAE,EAAA,EAEvDF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7BA,OAAA,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,KACbA,OAAA,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;;;;;;;","names":["clampProgressPercent","h","Host","progressValueNow"],"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"],"version":3}

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var progress = require('./progress-DVUoQ3h5.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) {
+        index.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 = progress.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 } = progress.getProgressCircleGeometry(this.size, this.strokeWidth, percent);
+        return (index.h(index.Host, { key: 'b99d70605eb7b981da829d5cda0a194e6c266fc5', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progress.progressValueNow(percent, this.max)}`, style: { '--pf-progress-circle-size': `${this.size}px` } }, index.h("svg", { key: '1bee11db8cfeebb35fe84bca03621a9e64a84c60', class: "svg", part: "svg", viewBox: `0 0 ${this.size} ${this.size}`, "aria-hidden": "true", focusable: "false" }, index.h("circle", { key: '8dc237646a40afa9d8f8ddff456367afa3b35718', class: "circle-track", part: "track", cx: `${center}`, cy: `${center}`, r: `${radius}`, "stroke-width": `${this.strokeWidth}` }), index.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 && (index.h("span", { key: '18a89c9d9f967609f23db7e2a520df4f8400b1ad', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+};
+PfProgressCircle.style = pfProgressCircleCss();
+
+exports.pf_progress_circle = PfProgressCircle;
+//# sourceMappingURL=pf-progress-circle.entry.cjs.js.map
+
+//# sourceMappingURL=pf-progress-circle.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-progress-circle.cjs.entry.js","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,GAAGA,6BAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC;;;QAG1D,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAAGC,kCAAyB,CAC7E,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,WAAW,EAChB,OAAO,CACR;QAED,QACEC,OAAA,CAACC,UAAI,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,GAAGC,yBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACvD,KAAK,EAAE,EAAE,2BAA2B,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI,EAAE,EAAA,EAExDF,OAAA,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,EAEjBA,OAAA,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,EACFA,OAAA,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,KACbA,OAAA,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;;;;;;;","names":["clampProgressPercent","getProgressCircleGeometry","h","Host","progressValueNow"],"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"],"version":3}

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.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) {
+        index.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 (index.h(index.Host, { key: '178b256dfa9df01c41cacddbd9e49c72beb2567f', role: "listitem", "aria-current": this.state === 'current' ? 'step' : null }, index.h("div", { key: 'f8b100c14751727adaad8a604de7a900a7963086', class: "marker-wrap", part: "marker-wrap", "aria-hidden": "true" }, index.h("span", { key: 'bcf15a8d42e80f56cd53da2a41513d90454d7c76', class: "marker", part: "marker" }, this.position), !this.last && index.h("span", { key: 'eade849134d12e42e40cc8fb6dfe21c3c026ed5b', class: "connector", part: "connector" })), index.h("div", { key: '6b169c22f58a7c4eba922f19d969d7560fa71b9e', class: "content", part: "content" }, index.h("p", { key: 'b12aa29ae1dee718543f3ed7d586e2c901bb6562', class: "title", part: "title" }, index.h("slot", { key: 'a61cf4299dddc0e92a1b89cc6d21496b0519efef', name: "title" })), index.h("slot", { key: 'b026c37e8600250f9df2e01b7704a60f0b876fd9', name: "description" }))));
+    }
+};
+PfProgressStep.style = pfProgressStepCss();
+
+exports.pf_progress_step = PfProgressStep;
+//# sourceMappingURL=pf-progress-step.entry.cjs.js.map
+
+//# sourceMappingURL=pf-progress-step.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-progress-step.cjs.entry.js","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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EAE1ED,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,iBAAa,MAAM,EAAA,EAC5DA,OAAA,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,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,GAAG,CACtD,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,EASJA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,99 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: 'cf93162c6e257b13786028c3c4d602642786fd39', role: "list" }, index.h("slot", { key: '1d1d22b80605aff984af850933c4221a7ae740da', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "orientation": [{
+                "handleOrientationChange": 0
+            }]
+    }; }
+};
+PfProgressSteps.style = pfProgressStepsCss();
+
+exports.pf_progress_steps = PfProgressSteps;
+//# sourceMappingURL=pf-progress-steps.entry.cjs.js.map
+
+//# sourceMappingURL=pf-progress-steps.cjs.entry.js.map