@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/pitchfork/p-be2c6150.entry.js.map

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

package/dist/pitchfork/p-bf044fb5.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,a as r,h as t,H as i}from"./p-Bm6UxEit.js";import{l as o}from"./p-DfpCerXM.js";import{s}from"./p-CCln56Fj.js";import{a as n}from"./p-Cta76kgc.js";const d=()=>`:host{display:block}:host([hidden]){display:none}.alert{align-items:flex-start;border:1px solid var(--pf-alert-border);border-radius:var(--radius-md);display:flex;gap:var(--space-3);padding:var(--space-3)}:host([variant='info']) .alert{background:var(--pf-alert-info-background);border-color:var(--pf-alert-info-border);color:var(--pf-alert-info-foreground)}:host([variant='success']) .alert{background:var(--pf-alert-success-background);border-color:var(--pf-alert-success-border);color:var(--pf-alert-success-foreground)}:host([variant='warning']) .alert{background:var(--pf-alert-warning-background);border-color:var(--pf-alert-warning-border);color:var(--pf-alert-warning-foreground)}:host([variant='danger']) .alert{background:var(--pf-alert-danger-background);border-color:var(--pf-alert-danger-border);color:var(--pf-alert-danger-foreground)}.icon{align-items:center;display:inline-flex;font-size:var(--font-size-lg);height:1em;justify-content:center;line-height:1;margin-top:1px;width:1em}.content{display:grid;gap:var(--space-1)}.title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.3;margin:0}.body{font-size:var(--font-size-sm);line-height:1.4}.body.empty{display:none}::slotted(p){margin:0}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:currentcolor;cursor:pointer;display:inline-flex;font-size:var(--font-size-md);justify-content:center;margin-inline-start:auto;padding:0}.dismiss:focus-visible{box-shadow:var(--pf-alert-focus-ring, var(--pf-focus-ring));outline:none}.alert--exiting{animation:pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-alert-out{from{max-height:480px;opacity:1}to{margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}}@media (prefers-reduced-motion: reduce){.alert--exiting{animation:none}}`;const c=class{constructor(r){e(this,r);this.pfDismiss=a(this,"pfDismiss")}get el(){return r(this)}variant="info";heading;description;dismissible=false;dismissLabel="Dismiss alert";pfDismiss;exiting=false;hasSlottedBody=false;componentWillLoad(){this.readBody()}async dismiss(){if(this.exiting)return;this.exiting=true;await n(this.el.shadowRoot?.querySelector(".alert"));this.pfDismiss.emit()}readBody(){this.hasSlottedBody=Array.from(this.el.childNodes).some((e=>e.nodeType===Node.ELEMENT_NODE?!e.getAttribute("slot"):Boolean(e.textContent?.trim())))}render(){const e=this.hasSlottedBody||Boolean(this.description);return t(i,{key:"f3522c8ef72b489525e45dc1fc3c70086af533ac"},t("div",{key:"b5b402130872fdfc94878b4d09329399c4adacb5",class:{alert:true,"alert--exiting":this.exiting},part:"alert",role:o(this.variant)},t("span",{key:"048f80625f800c1835fa6e356dfe15d0fdd7f35c",class:"icon",part:"icon","aria-hidden":"true"},t("slot",{key:"6a42e99211fd2906e0162bfb31586e06af30aaa5",name:"icon"},t("pf-icon",{key:"146ff1c59c4f860ec78a6f84162cab58f3e5e15d",name:s(this.variant)}))),t("div",{key:"a74939fe38d05d8cf8a3de2c75e048f103b9739c",class:"content"},this.heading&&t("p",{key:"a9758f5cfece50320d0eff15c0cbc47a1d7f8a46",class:"title",part:"title"},this.heading),t("div",{key:"e48f83b618e566b3c1884212372607c211557bee",class:{body:true,empty:!e},part:"body"},t("slot",{key:"472cbf494dfcaa7f0f539fc2e243a6eab68b05b9",onSlotchange:()=>this.readBody()},this.description))),this.dismissible&&t("button",{key:"f2cceb0cee8e905cac8d001304ca927245329b1e",type:"button",class:"dismiss",part:"dismiss","aria-label":this.dismissLabel,onClick:()=>this.dismiss()},t("pf-icon",{key:"0190d8ca15d01969f8992e7dfc14c814c4fa29bf",name:"circle-xmark","aria-hidden":"true"}))))}};c.style=d();export{c as pf_alert};
+//# sourceMappingURL=p-bf044fb5.entry.js.map

package/dist/pitchfork/p-bf044fb5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfAlertCss","PfAlert","variant","heading","description","dismissible","dismissLabel","pfDismiss","exiting","hasSlottedBody","componentWillLoad","this","readBody","dismiss","animationsFinished","el","shadowRoot","querySelector","emit","Array","from","childNodes","some","node","nodeType","Node","ELEMENT_NODE","getAttribute","Boolean","textContent","trim","render","hasBody","h","Host","key","class","alert","part","role","liveRegionRole","name","severityIconName","body","empty","onSlotchange","type","onClick"],"sources":["src/components/pf-alert/pf-alert.css?tag=pf-alert&encapsulation=shadow","src/components/pf-alert/pf-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  align-items: flex-start;\n  border: 1px solid var(--pf-alert-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/*\n * The colours come from the reflected attribute rather than a class: the\n * generated bindings set props as properties, so an unreflected prop would\n * leave no attribute to select on.\n */\n:host([variant='info']) .alert {\n  background: var(--pf-alert-info-background);\n  border-color: var(--pf-alert-info-border);\n  color: var(--pf-alert-info-foreground);\n}\n\n:host([variant='success']) .alert {\n  background: var(--pf-alert-success-background);\n  border-color: var(--pf-alert-success-border);\n  color: var(--pf-alert-success-foreground);\n}\n\n:host([variant='warning']) .alert {\n  background: var(--pf-alert-warning-background);\n  border-color: var(--pf-alert-warning-border);\n  color: var(--pf-alert-warning-foreground);\n}\n\n:host([variant='danger']) .alert {\n  background: var(--pf-alert-danger-background);\n  border-color: var(--pf-alert-danger-border);\n  color: var(--pf-alert-danger-foreground);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-lg);\n  height: 1em;\n  justify-content: center;\n  line-height: 1;\n  margin-top: 1px;\n  width: 1em;\n}\n\n.content {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.title {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  margin: 0;\n}\n\n.body {\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n}\n\n/*\n * Two classes deep, because the ties break on source order. The slot stays\n * rendered inside the hidden box, or content added later never fires\n * `slotchange`.\n */\n.body.empty {\n  display: none;\n}\n\n/* The browser's own paragraphs, if a consumer slots any. */\n::slotted(p) {\n  margin: 0;\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: currentcolor;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-md);\n  justify-content: center;\n  margin-inline-start: auto;\n  padding: 0;\n}\n\n.dismiss:focus-visible {\n  box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * Fade *and* collapse, so the content below reflows into the space rather\n * than jumping when the alert is removed. This is the difference from\n * `pf-notification`, which slides out of a stack instead.\n */\n.alert--exiting {\n  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-alert-out {\n  from {\n    max-height: 480px;\n    opacity: 1;\n  }\n\n  to {\n    margin-bottom: 0;\n    margin-top: 0;\n    max-height: 0;\n    opacity: 0;\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alert--exiting {\n    animation: none;\n  }\n}\n","import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfAlertVariant = LiveRegionVariant;\n\n/**\n * An inline alert: an icon, a heading, a body and an optional dismiss button.\n *\n * The sibling of `pf-notification`, and deliberately a separate element\n * rather than a variant of it: an alert belongs in the page's flow and\n * collapses its own height when dismissed so the content below reflows, while\n * a notification is one of a stack in a corner and slides out. The two look\n * alike and behave differently, which is exactly when one element serving\n * both goes wrong.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @part alert - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-alert',\n  styleUrl: 'pf-alert.css',\n  shadow: true,\n})\nexport class PfAlert {\n  @Element() el!: HTMLElement;\n\n  /** Reflected, because the stylesheet selects on it for the colours. */\n  @Prop({ reflect: true }) variant: PfAlertVariant = 'info';\n\n  @Prop() heading?: string;\n\n  /** The body. A slotted body is used instead when there is one. */\n  @Prop() description?: string;\n\n  /** Show the dismiss button. Reflected. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** The dismiss button's accessible name. */\n  @Prop() dismissLabel = 'Dismiss alert';\n\n  /** Fires once the alert has finished leaving. */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  /** Reflected, because that is what the exit animation selects on. */\n  @State() exiting = false;\n\n  /** Whether anything was slotted into the default slot. */\n  @State() hasSlottedBody = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Dismisses the alert, waiting for its exit animation first.\n   *\n   * The wait is core's `animationsFinished`, which asks the element what is\n   * actually running rather than sleeping for a duration someone wrote down:\n   * under `prefers-reduced-motion` the stylesheet sets `animation: none`, no\n   * test project applies `styleUrl` CSS at all, and a consumer may not have\n   * loaded the stylesheet — in all three an `animationend` listener would\n   * wait for ever and a timeout would be a fiction.\n   */\n  @Method()\n  async dismiss() {\n    if (this.exiting) return;\n    this.exiting = true;\n\n    await animationsFinished(this.el.shadowRoot?.querySelector('.alert'));\n    this.pfDismiss.emit();\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    const hasBody = this.hasSlottedBody || Boolean(this.description);\n\n    return (\n      <Host>\n        <div\n          class={{ alert: true, 'alert--exiting': this.exiting }}\n          part=\"alert\"\n          role={liveRegionRole(this.variant)}\n        >\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n            {/*\n              The slot stays in the tree whether or not it holds anything: a\n              slot that is not rendered never fires `slotchange`, so a body\n              added later would stay invisible for good.\n            */}\n            <div class={{ body: true, empty: !hasBody }} part=\"body\">\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n          </div>\n\n          {this.dismissible && (\n            <button\n              type=\"button\"\n              class=\"dismiss\"\n              part=\"dismiss\"\n              aria-label={this.dismissLabel}\n              onClick={() => this.dismiss()}\n            >\n              <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAa,IAAM,g4D,MC8CZC,EAAO,M,oFAIOC,QAA0B,OAE3CC,QAGAC,YAGiBC,YAAc,MAG/BC,aAAe,gBAGdC,UAGAC,QAAU,MAGVC,eAAiB,MAG1B,iBAAAC,GACEC,KAAKC,U,CAcP,aAAMC,GACJ,GAAIF,KAAKH,QAAS,OAClBG,KAAKH,QAAU,WAETM,EAAmBH,KAAKI,GAAGC,YAAYC,cAAc,WAC3DN,KAAKJ,UAAUW,M,CAGT,QAAAN,GACND,KAAKF,eAAiBU,MAAMC,KAAKT,KAAKI,GAAGM,YAAYC,MAAMC,GACzDA,EAAKC,WAAaC,KAAKC,cACjBH,EAAiBI,aAAa,QAChCC,QAAQL,EAAKM,aAAaC,S,CAIlC,MAAAC,GACE,MAAMC,EAAUrB,KAAKF,gBAAkBmB,QAAQjB,KAAKP,aAEpD,OACE6B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEC,MAAO,KAAM,iBAAkB1B,KAAKH,SAC7C8B,KAAK,QACLC,KAAMC,EAAe7B,KAAKT,UAE1B+B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOE,KAAK,OAAM,cAAa,QACzCL,EAAA,QAAAE,IAAA,2CAAMM,KAAK,QACTR,EAAA,WAAAE,IAAA,2CAASM,KAAMC,EAAiB/B,KAAKT,aAIzC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACRzB,KAAKR,SACJ8B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQE,KAAK,SACnB3B,KAAKR,SAQV8B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEO,KAAM,KAAMC,OAAQZ,GAAWM,KAAK,QAChDL,EAAA,QAAAE,IAAA,2CAAMU,aAAc,IAAMlC,KAAKC,YAAaD,KAAKP,eAIpDO,KAAKN,aACJ4B,EAAA,UAAAE,IAAA,2CACEW,KAAK,SACLV,MAAM,UACNE,KAAK,UAAS,aACF3B,KAAKL,aACjByC,QAAS,IAAMpC,KAAKE,WAEpBoB,EAAA,WAAAE,IAAA,2CAASM,KAAK,eAAc,cAAa,W","ignoreList":[]}

package/dist/pitchfork/p-c07c5847.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as i,H as r}from"./p-Bm6UxEit.js";const s=()=>`:host{display:block;min-width:0}:host([hidden]){display:none}.children{padding-inline-start:var(--space-4)}.children[hidden]{display:none}.row{align-items:center;border-radius:var(--radius-sm);color:var(--pf-treeview-text-muted);cursor:pointer;display:grid;gap:var(--space-2);grid-template-columns:24px auto 1fr auto;min-height:34px;min-width:0;padding-inline-end:var(--space-2)}:host(:not([icon])) .row{grid-template-columns:24px 1fr auto}.row:hover{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text)}:host([active]) .row{box-shadow:var(--pf-tree-active-ring, none)}:host([selected]) .row{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .row{cursor:not-allowed;opacity:0.5}.twisty{align-items:center;display:inline-flex;justify-content:center;width:24px}.toggle{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-treeview-text-muted);cursor:pointer;display:inline-flex;font-size:var(--font-size-xs);height:24px;justify-content:center;padding:0;width:24px}.toggle:hover{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text)}.icon{align-items:center;display:inline-flex;justify-content:center}.label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{align-items:center;display:inline-flex;justify-content:center}.badge.empty{display:none}`;const n=class{constructor(a){e(this,a);this.pfTreeSelect=t(this,"pfTreeSelect");this.pfTreeToggle=t(this,"pfTreeToggle");this.pfTreeStructure=t(this,"pfTreeStructure")}get el(){return a(this)}value="";disabled=false;icon;level=1;selected=false;expanded=false;hasChildren=false;active=false;pfTreeSelect;pfTreeToggle;pfTreeStructure;hasBadge=false;componentWillLoad(){this.read()}read=()=>{this.hasBadge=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="badge"))};onRowClick=()=>{if(this.disabled)return;this.pfTreeSelect.emit({value:this.value})};onToggleClick=e=>{e.stopPropagation();this.pfTreeToggle.emit({value:this.value})};render(){return i(r,{key:"88ecc1b46b8a27da4032a95a5dc61a5c26aaada0",role:"treeitem","aria-level":String(this.level),"aria-selected":this.selected?"true":"false","aria-expanded":this.hasChildren?this.expanded?"true":"false":null,"aria-disabled":this.disabled?"true":null},i("div",{key:"9b01234883116846b26e5cd5565fb40612b81370",class:"row",part:"row",onClick:this.onRowClick},i("span",{key:"25d5ca0c4ca422a00061eda5f2811328cfc54a5c",class:"twisty","aria-hidden":"true"},this.hasChildren&&i("button",{key:"3cb856498ec1506de4026c6a9115e4a86add6a23",type:"button",class:"toggle",part:"toggle",tabindex:"-1",onClick:this.onToggleClick},this.expanded?"▾":"▸")),this.icon&&i("pf-icon",{key:"d0730491a865b2b2f59e0fcb0adf7cac6db8d4cc",class:"icon",name:this.icon,"aria-hidden":"true"}),i("span",{key:"60a592334f70f944b7d5b8355e0ea6ade902492f",class:"label",part:"label"},i("slot",{key:"7b00850cd21475d567b0c80d4537f2a8bf0dc24c",name:"label"})),i("span",{key:"641b9658b88ee4760067db4bc0a63ef992c83b4a",class:{badge:true,empty:!this.hasBadge}},i("slot",{key:"fffbfbe5f68e1bf85d171b29e6473ef35f11a176",name:"badge",onSlotchange:this.read}))),i("div",{key:"7679e1668cb704b25a5f27f1d896a77b97fb4e90",class:"children",part:"children",role:"group",hidden:!this.expanded},i("slot",{key:"6b9182c724d033d3f3eb0e3977b2c54a8748f793",onSlotchange:()=>this.pfTreeStructure.emit()})))}};n.style=s();export{n as pf_tree_item};
+//# sourceMappingURL=p-c07c5847.entry.js.map

package/dist/pitchfork/p-c07c5847.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTreeItemCss","PfTreeItem","value","disabled","icon","level","selected","expanded","hasChildren","active","pfTreeSelect","pfTreeToggle","pfTreeStructure","hasBadge","componentWillLoad","this","read","Array","from","el","children","some","child","getAttribute","onRowClick","emit","onToggleClick","event","stopPropagation","render","h","Host","key","role","String","class","part","onClick","type","tabindex","name","badge","empty","onSlotchange","hidden"],"sources":["src/components/pf-tree-item/pf-tree-item.css?tag=pf-tree-item&encapsulation=shadow","src/components/pf-tree-item/pf-tree-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The indent comes from the nesting rather than from a level pushed into a\n * custom property: the items are nested in the DOM, so one rule here indents\n * every depth, and there is no number to keep in step with the markup.\n */\n.children {\n  padding-inline-start: var(--space-4);\n}\n\n.children[hidden] {\n  display: none;\n}\n\n.row {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-treeview-text-muted);\n  cursor: pointer;\n  display: grid;\n  gap: var(--space-2);\n  grid-template-columns: 24px auto 1fr auto;\n  min-height: 34px;\n  min-width: 0;\n  padding-inline-end: var(--space-2);\n}\n\n/* No icon slotted in, no column for one: the grid closes up. */\n:host(:not([icon])) .row {\n  grid-template-columns: 24px 1fr auto;\n}\n\n.row:hover {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n}\n\n/*\n * The ring marks the item the keyboard is on, and the tree decides whether to\n * draw one at all: it is the thing with the focus, and it turns the ring on\n * through `--pf-tree-active-ring` only while it is focused.\n */\n:host([active]) .row {\n  box-shadow: var(--pf-tree-active-ring, none);\n}\n\n:host([selected]) .row {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .row {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.twisty {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  width: 24px;\n}\n\n.toggle {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-treeview-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  height: 24px;\n  justify-content: center;\n  padding: 0;\n  width: 24px;\n}\n\n.toggle:hover {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n}\n\n.label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n}\n\n/* Two classes deep, because the box sets its own `display` above. */\n.badge.empty {\n  display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * One item in a `pf-tree-view`, with its own items nested inside it.\n *\n * The host is the `treeitem`, and it is never focused: the tree keeps the\n * focus and names the active item with `aria-activedescendant`, because a\n * nested host cannot take a roving tabindex at all — measured, and explained\n * on `pf-tree-view`. So the row inside is a plain box rather than a button,\n * and the twisty is the only focusable thing in here, kept out of the tab\n * order.\n *\n * `level`, `selected`, `expanded` and `hasChildren` are the group's to set:\n * only it can see the whole tree.\n *\n * @slot label - the item's label.\n * @slot badge - small trailing content, a count or a status.\n * @slot - the nested `pf-tree-item` children.\n * @part row - the item's own row, without its children.\n * @part toggle - the twisty, on an item that has children.\n * @part label - the label's box.\n * @part children - the box holding the nested items.\n */\n@Component({\n  tag: 'pf-tree-item',\n  styleUrl: 'pf-tree-item.css',\n  shadow: true,\n})\nexport class PfTreeItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the item in the tree's selection and open set.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-tree-item[value=\"...\"]` finds\n   * nothing. The tree reads the property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the tree's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Set by the tree: how deep this item sits, counting from 1. */\n  @Prop({ mutable: true }) level = 1;\n\n  /** Set by the tree. Reflected, so the stylesheet can mark the item. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the tree: whether this branch is open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /** Set by the tree: whether there is anything to open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) hasChildren = false;\n\n  /**\n   * Set by the tree: the item the keyboard is on, which is not always the\n   * selected one. Reflected, because the ring is drawn from it.\n   */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Asks the tree to select this item. The tree decides. */\n  @Event() pfTreeSelect!: EventEmitter<{ value: string }>;\n\n  /** Asks the tree to open or close this branch. */\n  @Event() pfTreeToggle!: EventEmitter<{ value: string }>;\n\n  /**\n   * Tells the tree that the items inside this one have changed.\n   *\n   * `slotchange` does not cross a shadow boundary — it is not composed — so a\n   * tree cannot hear its grandchildren arrive. Without this, an item appended\n   * to a branch is never given a level, an id or a place in the keyboard\n   * order; a browser test adds one.\n   */\n  @Event() pfTreeStructure!: EventEmitter<void>;\n\n  /** Whether anything is slotted into the badge, which carries layout. */\n  @State() hasBadge = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    this.hasBadge = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'badge',\n    );\n  };\n\n  private onRowClick = () => {\n    if (this.disabled) return;\n    this.pfTreeSelect.emit({ value: this.value });\n  };\n\n  private onToggleClick = (event: MouseEvent) => {\n    // The twisty opens the branch without also selecting the item.\n    event.stopPropagation();\n    this.pfTreeToggle.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"treeitem\"\n        aria-level={String(this.level)}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-expanded={this.hasChildren ? (this.expanded ? 'true' : 'false') : null}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {/*\n          A click surface rather than a button: the host is the treeitem, and\n          the tree holds the keys — a second focusable thing in here would be\n          a tab stop inside a treeitem, which the pattern does not have.\n        */}\n        <div class=\"row\" part=\"row\" onClick={this.onRowClick}>\n          <span class=\"twisty\" aria-hidden=\"true\">\n            {this.hasChildren && (\n              <button\n                type=\"button\"\n                class=\"toggle\"\n                part=\"toggle\"\n                tabindex=\"-1\"\n                onClick={this.onToggleClick}\n              >\n                {this.expanded ? '▾' : '▸'}\n              </button>\n            )}\n          </span>\n\n          {this.icon && <pf-icon class=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>}\n\n          <span class=\"label\" part=\"label\">\n            <slot name=\"label\" />\n          </span>\n\n          <span class={{ badge: true, empty: !this.hasBadge }}>\n            <slot name=\"badge\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        {/*\n          The nested items stay in the tree when the branch is closed and are\n          hidden instead: a slot that is not rendered never fires `slotchange`,\n          so an item added to a closed branch would stay invisible for good.\n          `role=\"group\"` is what makes the nesting a tree to a screen reader.\n        */}\n        <div class=\"children\" part=\"children\" role=\"group\" hidden={!this.expanded}>\n          <slot onSlotchange={() => this.pfTreeStructure.emit()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,o5C,MC4BfC,EAAU,M,kLAUIC,MAAQ,GAGRC,SAAW,MAG5BC,KAGiBC,MAAQ,EAGOC,SAAW,MAGXC,SAAW,MAGXC,YAAc,MAMdC,OAAS,MAGxCC,aAGAC,aAUAC,gBAGAC,SAAW,MAGpB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACbD,KAAKF,SAAWI,MAAMC,KAAKH,KAAKI,GAAGC,UAAUC,MAC1CC,GAAUA,EAAMC,aAAa,UAAY,SAC3C,EAGKC,WAAa,KACnB,GAAIT,KAAKZ,SAAU,OACnBY,KAAKL,aAAae,KAAK,CAAEvB,MAAOa,KAAKb,OAAQ,EAGvCwB,cAAiBC,IAEvBA,EAAMC,kBACNb,KAAKJ,aAAac,KAAK,CAAEvB,MAAOa,KAAKb,OAAQ,EAG/C,MAAA2B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WAAU,aACHC,OAAOnB,KAAKV,OAAM,gBACfU,KAAKT,SAAW,OAAS,QAAO,gBAChCS,KAAKP,YAAeO,KAAKR,SAAW,OAAS,QAAW,KAAI,gBAC5DQ,KAAKZ,SAAW,OAAS,MAOxC2B,EAAA,OAAAE,IAAA,2CAAKG,MAAM,MAAMC,KAAK,MAAMC,QAAStB,KAAKS,YACxCM,EAAA,QAAAE,IAAA,2CAAMG,MAAM,SAAQ,cAAa,QAC9BpB,KAAKP,aACJsB,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLH,MAAM,SACNC,KAAK,SACLG,SAAS,KACTF,QAAStB,KAAKW,eAEbX,KAAKR,SAAW,IAAM,MAK5BQ,KAAKX,MAAQ0B,EAAA,WAAAE,IAAA,2CAASG,MAAM,OAAOK,KAAMzB,KAAKX,KAAI,cAAc,SAEjE0B,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QAAQC,KAAK,SACvBN,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGbV,EAAA,QAAAE,IAAA,2CAAMG,MAAO,CAAEM,MAAO,KAAMC,OAAQ3B,KAAKF,WACvCiB,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,QAAQG,aAAc5B,KAAKC,SAU1Cc,EAAA,OAAAE,IAAA,2CAAKG,MAAM,WAAWC,KAAK,WAAWH,KAAK,QAAQW,QAAS7B,KAAKR,UAC/DuB,EAAA,QAAAE,IAAA,2CAAMW,aAAc,IAAM5B,KAAKH,gBAAgBa,U","ignoreList":[]}

package/dist/pitchfork/p-c82804d4.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as e,h as a,H as i}from"./p-Bm6UxEit.js";const s=()=>`:host{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between;padding-top:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row}}:host([divider]){border-top:1px solid var(--pf-section-footer-border)}:host([align='start']){justify-content:flex-start}:host([align='end']){justify-content:flex-end}.heading.empty,.actions.empty{display:none}.content{min-width:0}.heading{color:var(--pf-section-footer-text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-section-footer-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.4;margin:var(--space-1) 0 0}.actions{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2);width:100%}@media (min-width: 640px){.actions{width:auto}}`;const n=class{constructor(e){t(this,e)}get el(){return e(this)}divider=true;align="between";hasHeading=false;hasActions=false;componentWillLoad(){this.read()}read=()=>{const t=Array.from(this.el.children);this.hasHeading=t.some((t=>!t.hasAttribute("slot")))||Array.from(this.el.childNodes).some((t=>t.nodeType===3&&(t.textContent??"").trim()!==""));this.hasActions=t.some((t=>t.getAttribute("slot")==="actions"))};render(){return a(i,{key:"f25e894c4f0fe0dc340b29f448add3dc71afe52a"},a("div",{key:"51882857d07254c8998a34c5feaf281d55d87f51",class:"content",part:"content"},a("h3",{key:"9b67978a5a2824d5d9b8881e76c9d3ed9129ae3f",class:{heading:true,empty:!this.hasHeading},part:"heading"},a("slot",{key:"588df184573f0d84d0f0fa073e7ec7bc7007ba2f",onSlotchange:this.read})),a("slot",{key:"ab2749da402851c1dc922454db4188f1bed5fecf",name:"description"})),a("div",{key:"fa1cdc6a8a4301d6e61275998f7550057b6cd734",class:{actions:true,empty:!this.hasActions},part:"actions"},a("slot",{key:"b8585a98084951deb0d66c36a7c29a668d5f7dbc",name:"actions",onSlotchange:this.read})))}};n.style=s();export{n as pf_section_footer};
+//# sourceMappingURL=p-c82804d4.entry.js.map

package/dist/pitchfork/p-c82804d4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfSectionFooterCss","PfSectionFooter","divider","align","hasHeading","hasActions","componentWillLoad","this","read","children","Array","from","el","some","child","hasAttribute","childNodes","node","nodeType","textContent","trim","getAttribute","render","h","Host","key","class","part","heading","empty","onSlotchange","name","actions"],"sources":["src/components/pf-section-footer/pf-section-footer.css?tag=pf-section-footer&encapsulation=shadow","src/components/pf-section-footer/pf-section-footer.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n  padding-top: 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  }\n}\n\n:host([divider]) {\n  border-top: 1px solid var(--pf-section-footer-border);\n}\n\n:host([align='start']) {\n  justify-content: flex-start;\n}\n\n:host([align='end']) {\n  justify-content: flex-end;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because the actions box sets its own `display` below.\n */\n.heading.empty,\n.actions.empty {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-section-footer-text);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-section-footer-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.actions {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  width: 100%;\n}\n\n@media (--sm) {\n  .actions {\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nimport type { PfSectionHeaderAlign } from '../pf-section-header/pf-section-header';\n\n/**\n * The foot of a section: an optional heading and line of text, and the\n * controls that close it off.\n *\n * The same shape as `pf-section-header` with the rule on the other edge —\n * and, unlike the header, the heading is optional here, so its box is one of\n * the ones that can be empty.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding the heading and the description.\n * @part heading - the heading's box.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-footer',\n  styleUrl: 'pf-section-footer.css',\n  shadow: true,\n})\nexport class PfSectionFooter {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule above the footer. Defaults to true, as the React one does. */\n  @Prop({ reflect: true }) divider = true;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasHeading = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const children = Array.from(this.el.children);\n\n    // The heading is the default slot, so it is anything *without* a slot name\n    // — including a bare text node, which is why the text is counted too.\n    this.hasHeading =\n      children.some((child) => !child.hasAttribute('slot')) ||\n      Array.from(this.el.childNodes).some(\n        (node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '',\n      );\n    this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <h3 class={{ heading: true, empty: !this.hasHeading }} part=\"heading\">\n            <slot onSlotchange={this.read} />\n          </h3>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,IAAM,w4B,MCwBpBC,EAAe,M,iDAIDC,QAAU,KAGVC,MAA8B,UAG9CC,WAAa,MACbC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,MAAMC,KAAKJ,KAAKK,GAAGH,UAIpCF,KAAKH,WACHK,EAASI,MAAMC,IAAWA,EAAMC,aAAa,WAC7CL,MAAMC,KAAKJ,KAAKK,GAAGI,YAAYH,MAC5BI,GAASA,EAAKC,WAAa,IAAMD,EAAKE,aAAe,IAAIC,SAAW,KAEzEb,KAAKF,WAAaI,EAASI,MAAMC,GAAUA,EAAMO,aAAa,UAAY,WAAU,EAGtF,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACxBJ,EAAA,MAAAE,IAAA,2CAAIC,MAAO,CAAEE,QAAS,KAAMC,OAAQtB,KAAKH,YAAcuB,KAAK,WAC1DJ,EAAA,QAAAE,IAAA,2CAAMK,aAAcvB,KAAKC,QAE3Be,EAAA,QAAAE,IAAA,2CAAMM,KAAK,iBAGbR,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEM,QAAS,KAAMH,OAAQtB,KAAKF,YAAcsB,KAAK,WAC3DJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUD,aAAcvB,KAAKC,Q","ignoreList":[]}

package/dist/pitchfork/p-d4bbcba0.entry.js

@@ -0,0 +1,2 @@
+import{r as d,h as r,H as a}from"./p-Bm6UxEit.js";const o=()=>`:host{border-top:1px solid var(--pf-card-border);display:flex;gap:var(--pf-card-footer-gap);padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;const e=class{constructor(r){d(this,r)}render(){return r(a,{key:"94597fc7d75217bd21d063cb79f4e99dc4d4962b"},r("slot",{key:"6d37ed88a893134c4b4025ed4870993b9ea82812"}))}};e.style=o();export{e as pf_card_footer};
+//# sourceMappingURL=p-d4bbcba0.entry.js.map

package/dist/pitchfork/p-d4bbcba0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardFooterCss","PfCardFooter","render","h","Host","key"],"sources":["src/components/pf-card-footer/pf-card-footer.css?tag=pf-card-footer&encapsulation=shadow","src/components/pf-card-footer/pf-card-footer.tsx"],"sourcesContent":[":host {\n  border-top: 1px solid var(--pf-card-border);\n  display: flex;\n  gap: var(--pf-card-footer-gap);\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The bottom section of a `pf-card`, separated from what precedes it by a rule.\n * Lays its children out in a row, which is what makes it the natural home for\n * a card's actions.\n *\n * @slot - the footer's content, usually buttons.\n */\n@Component({\n  tag: 'pf-card-footer',\n  styleUrl: 'pf-card-footer.css',\n  shadow: true,\n})\nexport class PfCardFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,IAAM,mL,MCcjBC,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-d7ca4026.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as r,H as i}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{a as o}from"./p-Cr6IXrUk.js";import{c as d}from"./p-Cy_kHPeC.js";const l=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-textarea-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-textarea-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-textarea-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.textarea{background:var(--pf-textarea-bg);border:1px solid var(--pf-textarea-border);border-radius:var(--radius-md);color:var(--pf-textarea-text);font:inherit;line-height:1.45;min-height:96px;padding:var(--space-2) var(--space-3);resize:vertical;width:100%}.textarea:focus{outline:none}.textarea:focus-visible{border-color:var(--pf-textarea-focus-border);box-shadow:var(--pf-textarea-focus-ring, var(--pf-focus-ring))}.textarea::placeholder{color:var(--pf-textarea-text-muted)}.textarea--invalid{border-color:var(--pf-textarea-invalid-border)}.textarea:disabled{cursor:not-allowed;opacity:0.6}`;const n=class{constructor(a){e(this,a);this.pfInput=t(this,"pfInput");this.pfChange=t(this,"pfChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";rows=4;label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");o(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};componentDidRender(){const e=this.el.shadowRoot?.querySelector("textarea");if(e&&e.value!==(this.value??"")){e.value=this.value??""}}render(){const e=s(this.description&&"description",this.error&&"error");return r(i,{key:"80a5c7f53163f8336121fb8f37b9523e6bed32ab"},r("div",{key:"fa50dbbd2d5f9320d21abf12ee83edce19aee843",class:"field",part:"field"},this.label&&r("label",{key:"f38ae2638abf5eb7f646dac050fa4a8888c03c31",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&r("span",{key:"e7dbd26e3c88a3ab31eb0f2a578d07354c413efe",class:"required","aria-hidden":"true"},"*")),r("textarea",{key:"88c3b5be8039120c49e76a8099be97f2755f73b7",id:"input","aria-label":d(this.el,this.label),part:"textarea",class:{textarea:true,"textarea--invalid":Boolean(this.error)},name:this.name,rows:this.rows,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&r("p",{key:"4157ccc35337f16ca15b26e4442e260aa7f47019",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"04a8583bdde73b69402113a4659e00a316b330fc",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};n.style=l();export{n as pf_textarea};
+//# sourceMappingURL=p-d7ca4026.entry.js.map

package/dist/pitchfork/p-d7ca4026.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTextareaCss","PfTextarea","internals","name","value","rows","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","componentDidRender","control","el","shadowRoot","querySelector","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","controlAriaLabel","textarea","readOnly"],"sources":["src/components/pf-textarea/pf-textarea.css?tag=pf-textarea&encapsulation=shadow","src/components/pf-textarea/pf-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-textarea-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-textarea-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-textarea-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.textarea {\n  background: var(--pf-textarea-bg);\n  border: 1px solid var(--pf-textarea-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-textarea-text);\n  font: inherit;\n  line-height: 1.45;\n  min-height: 96px;\n  padding: var(--space-2) var(--space-3);\n  resize: vertical;\n  width: 100%;\n}\n\n.textarea:focus {\n  outline: none;\n}\n\n.textarea:focus-visible {\n  border-color: var(--pf-textarea-focus-border);\n  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));\n}\n\n.textarea::placeholder {\n  color: var(--pf-textarea-text-muted);\n}\n\n.textarea--invalid {\n  border-color: var(--pf-textarea-invalid-border);\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated multi-line text control.\n *\n * Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-textarea',\n  styleUrl: 'pf-textarea.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Visible rows. Mirrors the native attribute. */\n  @Prop() rows = 4;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  /**\n   * A textarea's value is its text content, not an attribute, so it cannot be\n   * rendered as a JSX child without Stencil replacing that text node on every\n   * keystroke. It is written through the DOM property instead, which is what\n   * the browser itself does.\n   *\n   * Guarded on inequality: assigning the same string still moves the caret to\n   * the end in some engines, which would make typing into the middle of a\n   * paragraph jump the cursor away on every character.\n   */\n  componentDidRender() {\n    const control = this.el.shadowRoot?.querySelector('textarea');\n    if (control && control.value !== (this.value ?? '')) {\n      control.value = this.value ?? '';\n    }\n  }\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <textarea\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"textarea\"\n            class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n            name={this.name}\n            rows={this.rows}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAgB,IAAM,smC,MCkCfC,EAAU,M,kRAGFC,UAWMC,KAGAC,MAAQ,GAGzBC,KAAO,EAGPC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA+BzB,MACnDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAa3C,kBAAA4B,GACE,MAAMC,EAAUhB,KAAKiB,GAAGC,YAAYC,cAAc,YAClD,GAAIH,GAAWA,EAAQ7B,SAAWa,KAAKb,OAAS,IAAK,CACnD6B,EAAQ7B,MAAQa,KAAKb,OAAS,E,EAIlC,MAAAiC,GAGE,MAAMC,EAAcC,EAClBtB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACEgC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrB3B,KAAKX,OACJkC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC5B,KAAKX,MACLW,KAAKP,UACJ8B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,YAAAE,IAAA,2CACEI,GAAG,QAAO,aACEC,EAAiB9B,KAAKiB,GAAIjB,KAAKX,OAC3CsC,KAAK,WACLD,MAAO,CAAEK,SAAU,KAAM,oBAAqB3B,QAAQJ,KAAKT,QAC3DL,KAAMc,KAAKd,KACXE,KAAMY,KAAKZ,KACXI,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfsC,SAAUhC,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtB8B,EAClBX,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJiC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1C7B,KAAKV,aAGTU,KAAKT,OACJgC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9B7B,KAAKT,Q","ignoreList":[]}

package/dist/pitchfork/p-dcaaedeb.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as t,H as e}from"./p-Bm6UxEit.js";import{f as i,s,c as r}from"./p-DVK0sUX2.js";const n=()=>`:host{align-items:center;color:var(--pf-rating-text);display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.track{display:inline-flex;gap:2px}.star{display:inline-flex;height:var(--pf-rating-size, var(--font-size-lg));position:relative;width:var(--pf-rating-size, var(--font-size-lg))}.icon{font-size:var(--pf-rating-size, var(--font-size-lg));height:1em;width:1em}.base{color:var(--pf-rating-star-empty)}.fill{display:inline-flex;inset:0;overflow:hidden;position:absolute;width:var(--pf-rating-fill, 0%)}.filled{color:var(--pf-rating-star-fill)}.value{color:var(--pf-rating-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}`;const l=class{constructor(t){a(this,t)}value=0;max=5;size=18;showValue=false;label;get count(){const a=Math.round(Number(this.max));return Number.isFinite(a)?Math.max(a,0):0}render(){const a=this.count;const n=r(Number(this.value),a);return t(e,{key:"01f323b4b49ee170a9849e74c14f4d13709b8e52",role:"img","aria-label":this.label??`Rating ${n} out of ${a}`},t("div",{key:"717c1eddcb89120cd107f0f2f57ed1e2d132e763",class:"track",part:"track","aria-hidden":"true"},Array.from({length:a},((a,e)=>t("span",{class:"star",part:"star",style:{"--pf-rating-fill":`${s(n,e)}%`,"--pf-rating-size":`${Number(this.size)}px`}},t("pf-icon",{class:"icon base",name:"star"}),t("span",{class:"fill"},t("pf-icon",{class:"icon filled",name:"star"})))))),this.showValue&&t("span",{key:"9f035bc5082e359f1c91a5a81af152f76d3371bf",class:"value",part:"value"},i(n)))}};l.style=n();export{l as pf_rating_stars};
+//# sourceMappingURL=p-dcaaedeb.entry.js.map

package/dist/pitchfork/p-dcaaedeb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRatingStarsCss","PfRatingStars","value","max","size","showValue","label","count","asNumber","Math","round","Number","this","isFinite","render","clampRating","h","Host","key","role","class","part","Array","from","length","_","index","style","starFillPercent","name","formatRating"],"sources":["src/components/pf-rating-stars/pf-rating-stars.css?tag=pf-rating-stars&encapsulation=shadow","src/components/pf-rating-stars/pf-rating-stars.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-rating-text);\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.track {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.star {\n  display: inline-flex;\n  height: var(--pf-rating-size, var(--font-size-lg));\n  position: relative;\n  width: var(--pf-rating-size, var(--font-size-lg));\n}\n\n.icon {\n  font-size: var(--pf-rating-size, var(--font-size-lg));\n  height: 1em;\n  width: 1em;\n}\n\n.base {\n  color: var(--pf-rating-star-empty);\n}\n\n/*\n * The filled star is the same glyph clipped to the fraction, which is what\n * makes a half star look like half a star rather than a different icon.\n */\n.fill {\n  display: inline-flex;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: var(--pf-rating-fill, 0%);\n}\n\n.filled {\n  color: var(--pf-rating-star-fill);\n}\n\n.value {\n  color: var(--pf-rating-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n","import { clampRating, formatRating, starFillPercent } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A row of stars showing a rating, filled to the fraction.\n *\n * One `role=\"img\"` with a name rather than a star-by-star reading: the stars\n * are an image of the rating, and the number is the thing worth announcing.\n * Every star inside is therefore `aria-hidden`.\n *\n * @part track - the row of stars.\n * @part star - one star, filled to its own share of the rating.\n * @part value - the rating written out, when `showValue` is set.\n */\n@Component({\n  tag: 'pf-rating-stars',\n  styleUrl: 'pf-rating-stars.css',\n  shadow: true,\n})\nexport class PfRatingStars {\n  /** The rating. Clamped into 0..max, so it cannot overfill the row. */\n  @Prop() value = 0;\n\n  /** How many stars there are. */\n  @Prop() max = 5;\n\n  /** Star size in pixels. */\n  @Prop() size = 18;\n\n  /** Write the rating out beside the stars. */\n  @Prop() showValue = false;\n\n  /** Overrides the generated name, for a rating that means something else. */\n  @Prop() label?: string;\n\n  /**\n   * Coerced, because the stars are built from it: `Number(max)` of an\n   * attribute string works by luck in a loop count and not at all in\n   * arithmetic, and a nonsense value would render an empty row rather than\n   * throwing.\n   */\n  private get count(): number {\n    const asNumber = Math.round(Number(this.max));\n    return Number.isFinite(asNumber) ? Math.max(asNumber, 0) : 0;\n  }\n\n  render() {\n    const max = this.count;\n    const value = clampRating(Number(this.value), max);\n\n    return (\n      <Host role=\"img\" aria-label={this.label ?? `Rating ${value} out of ${max}`}>\n        <div class=\"track\" part=\"track\" aria-hidden=\"true\">\n          {Array.from({ length: max }, (_, index) => (\n            <span\n              class=\"star\"\n              part=\"star\"\n              style={{\n                '--pf-rating-fill': `${starFillPercent(value, index)}%`,\n                '--pf-rating-size': `${Number(this.size)}px`,\n              }}\n            >\n              <pf-icon class=\"icon base\" name=\"star\"></pf-icon>\n              <span class=\"fill\">\n                <pf-icon class=\"icon filled\" name=\"star\"></pf-icon>\n              </span>\n            </span>\n          ))}\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {formatRating(value)}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAmB,IAAM,gqB,MCmBlBC,EAAa,M,yBAEhBC,MAAQ,EAGRC,IAAM,EAGNC,KAAO,GAGPC,UAAY,MAGZC,MAQR,SAAYC,GACV,MAAMC,EAAWC,KAAKC,MAAMC,OAAOC,KAAKT,MACxC,OAAOQ,OAAOE,SAASL,GAAYC,KAAKN,IAAIK,EAAU,GAAK,C,CAG7D,MAAAM,GACE,MAAMX,EAAMS,KAAKL,MACjB,MAAML,EAAQa,EAAYJ,OAAOC,KAAKV,OAAQC,GAE9C,OACEa,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,MAAK,aAAaP,KAAKN,OAAS,UAAUJ,YAAgBC,KACnEa,EAAA,OAAAE,IAAA,2CAAKE,MAAM,QAAQC,KAAK,QAAO,cAAa,QACzCC,MAAMC,KAAK,CAAEC,OAAQrB,IAAO,CAACsB,EAAGC,IAC/BV,EAAA,QACEI,MAAM,OACNC,KAAK,OACLM,MAAO,CACL,mBAAoB,GAAGC,EAAgB1B,EAAOwB,MAC9C,mBAAoB,GAAGf,OAAOC,KAAKR,YAGrCY,EAAA,WAASI,MAAM,YAAYS,KAAK,SAChCb,EAAA,QAAMI,MAAM,QACVJ,EAAA,WAASI,MAAM,cAAcS,KAAK,cAKzCjB,KAAKP,WACJW,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBS,EAAa5B,I","ignoreList":[]}

package/dist/pitchfork/p-dd0e0d79.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as r}from"./p-Bm6UxEit.js";import{m as i,f as d}from"./p-B8ulhYUJ.js";const t=()=>`:host{aspect-ratio:1.586;border:1px solid var(--pf-credit-card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--pf-credit-card-text-color);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;min-height:200px;padding:var(--space-4);position:relative;width:340px}:host([hidden]){display:none}.glare{background:radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:host([brand='generic']){background:var(--pf-credit-card-generic-gradient)}:host([brand='visa']){background:var(--pf-credit-card-visa-gradient)}:host([brand='mastercard']){background:var(--pf-credit-card-mastercard-gradient)}:host([brand='amex']){background:var(--pf-credit-card-amex-gradient)}.top-row{align-items:center;display:flex;justify-content:space-between;position:relative;z-index:1}.chip{background:var(--pf-credit-card-chip-gradient);border-radius:4px;display:inline-flex;height:28px;width:38px}.brand,.number,.label,.value{color:inherit}.brand{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.08em}.number{font-size:clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));font-weight:var(--font-weight-semibold);letter-spacing:0.08em;line-height:1.25;margin:0;position:relative;z-index:1}.meta{display:flex;gap:var(--space-4);position:relative;z-index:1}.field{display:flex;flex-direction:column;gap:var(--space-1)}.label{font-size:var(--font-size-2xs);letter-spacing:0.08em;opacity:0.85;text-transform:uppercase}.value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}`;const c=class{constructor(e){a(this,e)}brand="generic";cardNumber="";cardholderName="";expiry="";cvc;masked=true;render(){const a=this.masked?i(this.cardNumber):d(this.cardNumber);return e(r,{key:"2e9328d14c8cd6cd61def20a995c1f819fe44a59"},e("div",{key:"32e108a126843f362e308d906d665c7915af3c5e",class:"glare",part:"glare","aria-hidden":"true"}),e("div",{key:"52ec00756d657c30dc12c341897c200200ce66c7",class:"top-row"},e("span",{key:"33e023c6a52cf8a5fffc20e6e251b93a71d83fd5",class:"chip",part:"chip","aria-hidden":"true"}),e("span",{key:"6b838b1a3219311421a7e954456078f7ad03ad31",class:"brand",part:"brand"},this.brand.toUpperCase())),e("p",{key:"e72eef846f35d8c25c5cf236b75787632a63f984",class:"number",part:"number"},a),e("div",{key:"29f55616ce82112264d43cd6e1d3a7034afa96f7",class:"meta",part:"meta"},e("div",{key:"5bfc7e7d314ba0519633bcd95662ad3cf61fcd05",class:"field"},e("span",{key:"c4202038ed986c83aa5fff4e0db8264f4b4dd44f",class:"label",part:"label"},"Card holder"),e("span",{key:"8945817a864dbc9811a768e24c3d9dfba6befca1",class:"value",part:"value"},this.cardholderName)),e("div",{key:"65ae0ac19f77912769156a246382ae5f45c0776b",class:"field"},e("span",{key:"36b7781bcee6a5f62f1f81c22305545441f077ea",class:"label",part:"label"},"Expires"),e("span",{key:"b433e02c8749a5482b37eefbec420a98b7c53a4d",class:"value",part:"value"},this.expiry)),this.cvc&&e("div",{key:"7f19aabc157aba9999b31c13f65acea7bec0aeaf",class:"field"},e("span",{key:"9d2489d250a8d27cd2ee2f06af10e135b7927036",class:"label",part:"label"},"CVC"),e("span",{key:"85ae31a8929837c3b60840965fe5bb5badb1b96e",class:"value",part:"value"},this.masked?"***":this.cvc))))}};c.style=t();export{c as pf_credit_card};
+//# sourceMappingURL=p-dd0e0d79.entry.js.map

package/dist/pitchfork/p-dd0e0d79.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCreditCardCss","PfCreditCard","brand","cardNumber","cardholderName","expiry","cvc","masked","render","displayNumber","this","maskCardNumber","formatCardNumber","h","Host","key","class","part","toUpperCase"],"sources":["src/components/pf-credit-card/pf-credit-card.css?tag=pf-credit-card&encapsulation=shadow","src/components/pf-credit-card/pf-credit-card.tsx"],"sourcesContent":["/*\n * The --pf-credit-card-* colours live in theme.css rather than here, so a\n * scoped override (Storybook's CSS-variable controls, a consumer theming one\n * card) still reaches them by inheritance through the shadow boundary.\n */\n:host {\n  aspect-ratio: 1.586;\n  border: 1px solid var(--pf-credit-card-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  color: var(--pf-credit-card-text-color);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  max-width: 100%;\n  min-height: 200px;\n  padding: var(--space-4);\n  position: relative;\n  width: 340px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The React library draws this with `.pf-credit-card::before`. Here it is a\n * real element, so its position in the stacking order against the `z-index: 1`\n * content below is explicit rather than resting on how a host pseudo-element\n * participates in the shadow tree.\n */\n.glare {\n  background: radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);\n  border-radius: inherit;\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host([brand='generic']) {\n  background: var(--pf-credit-card-generic-gradient);\n}\n\n:host([brand='visa']) {\n  background: var(--pf-credit-card-visa-gradient);\n}\n\n:host([brand='mastercard']) {\n  background: var(--pf-credit-card-mastercard-gradient);\n}\n\n:host([brand='amex']) {\n  background: var(--pf-credit-card-amex-gradient);\n}\n\n.top-row {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  z-index: 1;\n}\n\n.chip {\n  background: var(--pf-credit-card-chip-gradient);\n  border-radius: 4px;\n  display: inline-flex;\n  height: 28px;\n  width: 38px;\n}\n\n.brand,\n.number,\n.label,\n.value {\n  color: inherit;\n}\n\n.brand {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n}\n\n.number {\n  font-size: clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n  line-height: 1.25;\n  margin: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.meta {\n  display: flex;\n  gap: var(--space-4);\n  position: relative;\n  z-index: 1;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.label {\n  font-size: var(--font-size-2xs);\n  letter-spacing: 0.08em;\n  opacity: 0.85;\n  text-transform: uppercase;\n}\n\n.value {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n","import { formatCardNumber, maskCardNumber } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfCreditCardBrand = 'generic' | 'visa' | 'mastercard' | 'amex';\n\n/**\n * A card-shaped display of payment details. Presentational only — it stores\n * nothing and submits nothing.\n *\n * @part glare - the decorative highlight overlay.\n * @part chip - the decorative chip.\n * @part brand - the brand wordmark.\n * @part number - the grouped card number.\n * @part meta - the row of labelled fields.\n * @part label - each field's caption.\n * @part value - each field's value.\n */\n@Component({\n  tag: 'pf-credit-card',\n  styleUrl: 'pf-credit-card.css',\n  shadow: true,\n})\nexport class PfCreditCard {\n  /** Card network. Reflected so the stylesheet can pick the gradient. */\n  @Prop({ reflect: true }) brand: PfCreditCardBrand = 'generic';\n\n  /** The number to display. Separators in the input are regrouped. */\n  @Prop() cardNumber = '';\n\n  /** Name on the card. */\n  @Prop() cardholderName = '';\n\n  /** Expiry, displayed as given. */\n  @Prop() expiry = '';\n\n  /** Security code. Omit it to leave the field out entirely. */\n  @Prop() cvc?: string;\n\n  /**\n   * Hide all but the last four digits, and the CVC with it. Defaults to true,\n   * so the careless case is the safe one. Reflected for the stylesheet.\n   */\n  @Prop({ reflect: true }) masked = true;\n\n  render() {\n    // Both layers go through core, so the same number is grouped identically.\n    const displayNumber = this.masked\n      ? maskCardNumber(this.cardNumber)\n      : formatCardNumber(this.cardNumber);\n\n    return (\n      <Host>\n        <div class=\"glare\" part=\"glare\" aria-hidden=\"true\" />\n        <div class=\"top-row\">\n          <span class=\"chip\" part=\"chip\" aria-hidden=\"true\" />\n          <span class=\"brand\" part=\"brand\">\n            {this.brand.toUpperCase()}\n          </span>\n        </div>\n\n        <p class=\"number\" part=\"number\">\n          {displayNumber}\n        </p>\n\n        <div class=\"meta\" part=\"meta\">\n          <div class=\"field\">\n            <span class=\"label\" part=\"label\">\n              Card holder\n            </span>\n            <span class=\"value\" part=\"value\">\n              {this.cardholderName}\n            </span>\n          </div>\n          <div class=\"field\">\n            <span class=\"label\" part=\"label\">\n              Expires\n            </span>\n            <span class=\"value\" part=\"value\">\n              {this.expiry}\n            </span>\n          </div>\n          {this.cvc && (\n            <div class=\"field\">\n              <span class=\"label\" part=\"label\">\n                CVC\n              </span>\n              <span class=\"value\" part=\"value\">\n                {this.masked ? '***' : this.cvc}\n              </span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,IAAM,8mD,MCsBjBC,EAAY,M,yBAEEC,MAA2B,UAG5CC,WAAa,GAGbC,eAAiB,GAGjBC,OAAS,GAGTC,IAMiBC,OAAS,KAElC,MAAAC,GAEE,MAAMC,EAAgBC,KAAKH,OACvBI,EAAeD,KAAKP,YACpBS,EAAiBF,KAAKP,YAE1B,OACEU,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,QAAO,cAAa,SAC5CJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,SAC3CJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBP,KAAKR,MAAMgB,gBAIhBL,EAAA,KAAAE,IAAA,2CAAGC,MAAM,SAASC,KAAK,UACpBR,GAGHI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAOC,KAAK,QACrBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SAAO,eAGhCJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBP,KAAKN,iBAGVS,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SAAO,WAGhCJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBP,KAAKL,SAGTK,KAAKJ,KACJO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SAAO,OAGhCJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBP,KAAKH,OAAS,MAAQG,KAAKJ,O","ignoreList":[]}

package/dist/pitchfork/p-dd48d94d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,a as i,h as t,H as a}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{a as o}from"./p-Cr6IXrUk.js";import{c as n}from"./p-Cy_kHPeC.js";const d=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-input-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-input-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-input-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.input{background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);font:inherit;min-height:40px;padding:0 var(--space-3);width:100%;transition:background 0.2s,     border 0.2s,     color 0.2s,     opacity 0.2s}.input:disabled{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);cursor:not-allowed;opacity:0.6}.input:focus{outline:none}.input:focus-visible{border-color:var(--pf-input-focus-border);box-shadow:var(--pf-input-focus-ring, var(--pf-focus-ring))}.input::placeholder{color:var(--pf-input-placeholder)}.input--invalid{border-color:var(--pf-input-invalid-border)}@media (prefers-reduced-motion: reduce){.input{transition:none}}`;const l=class{constructor(i){e(this,i);this.pfInput=r(this,"pfInput");this.pfChange=r(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";type="text";label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");o(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};render(){const e=s(this.description&&"description",this.error&&"error");return t(a,{key:"2eabd0d15d1a83b03064dee5feef9884a55a3c4c"},t("div",{key:"3c10b0b9d675eede30e34c27013d51713584baca",class:"field",part:"field"},this.label&&t("label",{key:"f0b9b45f307792a93190a354efcf0a980a326589",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&t("span",{key:"e3d8edb769ea8736ca485f5e539a0398ba1d1a33",class:"required","aria-hidden":"true"},"*")),t("input",{key:"419f2ba1f5a7b62b5042d1fd94b96a8abee829a7",id:"input","aria-label":n(this.el,this.label),part:"input",class:{input:true,"input--invalid":Boolean(this.error)},type:this.type,name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&t("p",{key:"c0d1323a34f5503a2049cc3ac5ef9e892cfb1cb6",class:"description",part:"description",id:"description"},this.description),this.error&&t("p",{key:"915301b580225bbf0b901c53f977b73a53fa94ee",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};l.style=d();export{l as pf_input};
+//# sourceMappingURL=p-dd48d94d.entry.js.map

package/dist/pitchfork/p-dd48d94d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfInputCss","PfInput","internals","name","value","type","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","controlAriaLabel","el","input","readOnly"],"sources":["src/components/pf-input/pf-input.css?tag=pf-input&encapsulation=shadow","src/components/pf-input/pf-input.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-input-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-input-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.input {\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  font: inherit;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n  width: 100%;\n  transition:\n    background 0.2s,\n    border 0.2s,\n    color 0.2s,\n    opacity 0.2s;\n}\n\n.input:disabled {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--pf-input-focus-border);\n  box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));\n}\n\n.input::placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.input--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-input',\n  styleUrl: 'pf-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfInput {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop({ reflect: true }) type: PfInputType = 'text';\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-input value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class={{ input: true, 'input--invalid': Boolean(this.error) }}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4KAAA,MAAMA,EAAa,IAAM,qxC,MCsCZC,EAAO,M,kRAGCC,UAWMC,KAGAC,MAAQ,GAERC,KAAoB,OAGrCC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA4BzB,MAChDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAG3C,MAAA4B,GAGE,MAAMC,EAAcC,EAClBjB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrBtB,KAAKX,OACJ6B,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvCvB,KAAKX,MACLW,KAAKP,UACJyB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,SAAAE,IAAA,2CACEI,GAAG,QAAO,aACEC,EAAiBzB,KAAK0B,GAAI1B,KAAKX,OAC3CiC,KAAK,QACLD,MAAO,CAAEM,MAAO,KAAM,iBAAkBvB,QAAQJ,KAAKT,QACrDH,KAAMY,KAAKZ,KACXF,KAAMc,KAAKd,KACXC,MAAOa,KAAKb,MACZK,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfkC,SAAU5B,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtByB,EAClBN,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJ4B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1CxB,KAAKV,aAGTU,KAAKT,OACJ2B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9BxB,KAAKT,Q","ignoreList":[]}

package/dist/pitchfork/p-e882124b.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as r}from"./p-Bm6UxEit.js";const s=()=>`:host{border-bottom:1px solid var(--pf-modal-border);display:block;padding:var(--space-4) var(--space-10) var(--space-4) var(--space-4)}:host([hidden]){display:none}`;const o=class{constructor(e){a(this,e)}render(){return e(r,{key:"d1ad25bd827a394611dec0358cba02bd73bbb104"},e("slot",{key:"4fe7116e3e9413e3b997cfaa92c97c245fc7a0b9"}))}};o.style=s();export{o as pf_modal_header};
+//# sourceMappingURL=p-e882124b.entry.js.map

package/dist/pitchfork/p-e882124b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfModalHeaderCss","PfModalHeader","render","h","Host","key"],"sources":["src/components/pf-modal-header/pf-modal-header.css?tag=pf-modal-header&encapsulation=shadow","src/components/pf-modal-header/pf-modal-header.tsx"],"sourcesContent":[":host {\n  border-bottom: 1px solid var(--pf-modal-border);\n  display: block;\n  /* Room for the close button, which is positioned over this corner. */\n  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The header section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-header',\n  styleUrl: 'pf-modal-header.css',\n  shadow: true,\n})\nexport class PfModalHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,IAAM,wK,MCgBlBC,EAAa,M,yBACxB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-e9d767df.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as d,H as o}from"./p-Bm6UxEit.js";const e=()=>`:host{border-top:1px solid var(--pf-modal-border);display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4)}:host([hidden]){display:none}`;const s=class{constructor(d){a(this,d)}render(){return d(o,{key:"435da74561bd7d3c7ffa98169048cda6832fe092"},d("slot",{key:"67fc15dd9d746e0bafab9126baf0438b20c249f6"}))}};s.style=e();export{s as pf_modal_footer};
+//# sourceMappingURL=p-e9d767df.entry.js.map

package/dist/pitchfork/p-e9d767df.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfModalFooterCss","PfModalFooter","render","h","Host","key"],"sources":["src/components/pf-modal-footer/pf-modal-footer.css?tag=pf-modal-footer&encapsulation=shadow","src/components/pf-modal-footer/pf-modal-footer.tsx"],"sourcesContent":[":host {\n  border-top: 1px solid var(--pf-modal-border);\n  display: flex;\n  gap: var(--space-2);\n  justify-content: flex-end;\n  padding: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The footer section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-footer',\n  styleUrl: 'pf-modal-footer.css',\n  shadow: true,\n})\nexport class PfModalFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,IAAM,kK,MCgBlBC,EAAa,M,yBACxB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-ea63c122.entry.js

@@ -0,0 +1,2 @@
+import{r as e,a,h as t,H as i}from"./p-Bm6UxEit.js";const r=()=>`:host{--pf-timeline-line:1.375rem;--pf-timeline-marker-size:16px;column-gap:var(--space-3);display:grid;grid-template-columns:auto 1fr}:host([hidden]){display:none}.rail{align-items:center;display:flex;flex-direction:column}.marker{align-items:center;border-radius:var(--radius-full);border-style:solid;border-width:2px;display:inline-flex;flex-shrink:0;height:var(--pf-timeline-marker-size);justify-content:center;margin-top:calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);width:var(--pf-timeline-marker-size)}.marker.with-icon{--pf-timeline-marker-size:28px}slot[name='icon']::slotted(*){align-items:center;display:inline-flex;font-size:0.8rem;justify-content:center}:host([tone='default']) .marker{background:var(--pf-timeline-default-bg);border-color:var(--pf-timeline-default-border);color:var(--pf-timeline-default-icon)}:host([tone='success']) .marker{background:var(--pf-timeline-success-bg);border-color:var(--pf-timeline-success-border);color:var(--pf-timeline-success-icon)}:host([tone='warning']) .marker{background:var(--pf-timeline-warning-bg);border-color:var(--pf-timeline-warning-border);color:var(--pf-timeline-warning-icon)}:host([tone='danger']) .marker{background:var(--pf-timeline-danger-bg);border-color:var(--pf-timeline-danger-border);color:var(--pf-timeline-danger-icon)}.connector{background:var(--pf-timeline-connector);flex:1;margin:var(--space-1) 0;min-height:var(--space-4);width:2px}.content{padding-bottom:var(--space-5)}:host([last]) .content{padding-bottom:0}.header{align-items:baseline;column-gap:var(--space-2);display:flex;flex-wrap:wrap;justify-content:space-between}.title{color:var(--pf-timeline-title);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--pf-timeline-line);margin:0}slot[name='timestamp']::slotted(*){color:var(--pf-timeline-timestamp);flex-shrink:0;font-size:var(--font-size-xs);white-space:nowrap}slot[name='description']::slotted(*){color:var(--pf-timeline-description);display:block;font-size:var(--font-size-sm);margin-top:var(--space-1)}`;const n=class{constructor(a){e(this,a)}get el(){return a(this)}tone="default";last=false;hasIcon=false;componentWillLoad(){this.readIcon()}readIcon=()=>{this.hasIcon=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="icon"))};render(){return t(i,{key:"91c65e90131294e08445c06cca82fe4dcc3ecb38",role:"listitem"},t("div",{key:"be5e941f568eddc14c8766fc74d4cd095acfa9fc",class:"rail",part:"rail","aria-hidden":"true"},t("span",{key:"40b410122f953312e3643fdf91882b219a6ea2e9",class:{marker:true,"with-icon":this.hasIcon},part:"marker"},t("slot",{key:"b1967cd74ed9468260edfd5375acfa5b8ea91bf6",name:"icon",onSlotchange:this.readIcon})),!this.last&&t("span",{key:"887e7fe2b3b1c22a859e2d0bad2a0769e1bbb3b1",class:"connector",part:"connector"})),t("div",{key:"d25ed21ad5337568a15190d86ccdda8704a09834",class:"content",part:"content"},t("div",{key:"59fa3448d18b10c0efc2d22ee09c0e673dd9cc28",class:"header",part:"header"},t("p",{key:"3458f24b4862ff112e917b9d0e8318ae3bee77f2",class:"title",part:"title"},t("slot",{key:"b220c2ee62e621e47387554a8776b7071e3802e3",name:"title"})),t("slot",{key:"55d4102ca0a1003056e4c5ca830b9161d1fa6ed8",name:"timestamp"})),t("slot",{key:"7ef43f007a4bab89ba3bfdb15ce37b0ebfc9bedd",name:"description"})))}};n.style=r();export{n as pf_timeline_item};
+//# sourceMappingURL=p-ea63c122.entry.js.map

package/dist/pitchfork/p-ea63c122.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTimelineItemCss","PfTimelineItem","tone","last","hasIcon","componentWillLoad","this","readIcon","Array","from","el","children","some","child","getAttribute","render","h","Host","key","role","class","part","marker","name","onSlotchange"],"sources":["src/components/pf-timeline-item/pf-timeline-item.css?tag=pf-timeline-item&encapsulation=shadow","src/components/pf-timeline-item/pf-timeline-item.tsx"],"sourcesContent":[":host {\n  /* The title's line height, which the marker centres itself on. */\n  --pf-timeline-line: 1.375rem;\n  --pf-timeline-marker-size: 16px;\n  column-gap: var(--space-3);\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.rail {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.marker {\n  align-items: center;\n  border-radius: var(--radius-full);\n  border-style: solid;\n  border-width: 2px;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--pf-timeline-marker-size);\n  justify-content: center;\n  /* Centred on the title's first line. */\n  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);\n  width: var(--pf-timeline-marker-size);\n}\n\n/*\n * A marker carrying an icon is larger to fit it. The class comes from JS,\n * because `:has(*)` on a wrapper around a slot always matches -- the slot is\n * itself a child.\n */\n.marker.with-icon {\n  --pf-timeline-marker-size: 28px;\n}\n\nslot[name='icon']::slotted(*) {\n  align-items: center;\n  display: inline-flex;\n  font-size: 0.8rem;\n  justify-content: center;\n}\n\n:host([tone='default']) .marker {\n  background: var(--pf-timeline-default-bg);\n  border-color: var(--pf-timeline-default-border);\n  color: var(--pf-timeline-default-icon);\n}\n\n:host([tone='success']) .marker {\n  background: var(--pf-timeline-success-bg);\n  border-color: var(--pf-timeline-success-border);\n  color: var(--pf-timeline-success-icon);\n}\n\n:host([tone='warning']) .marker {\n  background: var(--pf-timeline-warning-bg);\n  border-color: var(--pf-timeline-warning-border);\n  color: var(--pf-timeline-warning-icon);\n}\n\n:host([tone='danger']) .marker {\n  background: var(--pf-timeline-danger-bg);\n  border-color: var(--pf-timeline-danger-border);\n  color: var(--pf-timeline-danger-icon);\n}\n\n.connector {\n  background: var(--pf-timeline-connector);\n  flex: 1;\n  margin: var(--space-1) 0;\n  min-height: var(--space-4);\n  width: 2px;\n}\n\n.content {\n  padding-bottom: var(--space-5);\n}\n\n:host([last]) .content {\n  padding-bottom: 0;\n}\n\n.header {\n  align-items: baseline;\n  column-gap: var(--space-2);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.title {\n  color: var(--pf-timeline-title);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--pf-timeline-line);\n  margin: 0;\n}\n\nslot[name='timestamp']::slotted(*) {\n  color: var(--pf-timeline-timestamp);\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  white-space: nowrap;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-timeline-description);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin-top: var(--space-1);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfTimelineTone = 'default' | 'success' | 'warning' | 'danger';\n\n/**\n * One entry in a `pf-timeline`.\n *\n * @slot title - the entry's title.\n * @slot timestamp - short meta text beside the title.\n * @slot description - secondary text below the title.\n * @slot icon - an icon inside the marker, in place of the plain dot.\n * @part rail - the column holding the marker and the connector.\n * @part marker - the dot, or the circle around a slotted icon.\n * @part connector - the line down to the next entry. Absent on the last.\n * @part content - the box holding title, timestamp and description.\n * @part header - the row holding the title and the timestamp.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-timeline-item',\n  styleUrl: 'pf-timeline-item.css',\n  shadow: true,\n})\nexport class PfTimelineItem {\n  @Element() el!: HTMLElement;\n\n  /** Marker colour. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfTimelineTone = 'default';\n\n  /** Set by the group: the last entry has no connector and no space below. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /**\n   * Whether anything is slotted into the marker, which decides how big it is.\n   *\n   * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as \"is\n   * anything in here\" and always matches, because the `<slot>` is itself a\n   * child — measured, and the defect it caused in `pf-menu-item`. The marker\n   * is an ancestor of the slotted icon, so `::slotted()` cannot size it\n   * either, which leaves this.\n   */\n  @State() hasIcon = false;\n\n  /**\n   * The light DOM is readable here, so the marker is the right size at first\n   * paint — the mock DOM never fires `slotchange`, and a real one fires it\n   * after the first render.\n   */\n  componentWillLoad() {\n    this.readIcon();\n  }\n\n  private readIcon = () => {\n    this.hasIcon = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'icon',\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {/* Decorative: the marker repeats what the content already says. */}\n        <div class=\"rail\" part=\"rail\" aria-hidden=\"true\">\n          <span class={{ marker: true, 'with-icon': this.hasIcon }} part=\"marker\">\n            <slot name=\"icon\" onSlotchange={this.readIcon} />\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <div class=\"header\" part=\"header\">\n            <p class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </p>\n            {/*\n              No wrapper around the timestamp or the description: a box around\n              a slot cannot be collapsed from CSS, so an empty one would leave\n              its margin behind on every entry without them. An unassigned slot\n              generates nothing, so the styling goes on `::slotted(*)`.\n            */}\n            <slot name=\"timestamp\" />\n          </div>\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAoB,IAAM,2gE,MCuBnBC,EAAc,M,iDAIAC,KAAuB,UAGRC,KAAO,MAWtCC,QAAU,MAOnB,iBAAAC,GACEC,KAAKC,U,CAGCA,SAAW,KACjBD,KAAKF,QAAUI,MAAMC,KAAKH,KAAKI,GAAGC,UAAUC,MACzCC,GAAUA,EAAMC,aAAa,UAAY,QAC3C,EAGH,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAETH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OAAOC,KAAK,OAAM,cAAa,QACxCL,EAAA,QAAAE,IAAA,2CAAME,MAAO,CAAEE,OAAQ,KAAM,YAAahB,KAAKF,SAAWiB,KAAK,UAC7DL,EAAA,QAAAE,IAAA,2CAAMK,KAAK,OAAOC,aAAclB,KAAKC,aAErCD,KAAKH,MAAQa,EAAA,QAAAE,IAAA,2CAAME,MAAM,YAAYC,KAAK,eAG9CL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UAAUC,KAAK,WACxBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SAASC,KAAK,UACvBL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,QAAQC,KAAK,SACpBL,EAAA,QAAAE,IAAA,2CAAMK,KAAK,WAQbP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAEbP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iB","ignoreList":[]}

package/dist/pitchfork/p-ec8df806.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,a as i,h as s,H as r}from"./p-Bm6UxEit.js";import{o as a,p as o}from"./p-CC7AyfOt.js";import{c as n}from"./p-DfpCerXM.js";import{i as l,K as c}from"./p-g4FlTDZx.js";import{g as h,r as p}from"./p-CAz7-p8y.js";import{b as d,p as f,a as u,f as b}from"./p-BmcsJLdy.js";import{a as m}from"./p-Cr6IXrUk.js";import{c as v}from"./p-Cy_kHPeC.js";const g=()=>`:host{display:block;--pf-option-text:var(--pf-multiselect-text);--pf-option-text-disabled:var(--pf-multiselect-text-muted);--pf-option-active-bg:var(--pf-multiselect-active-bg);--pf-option-active-text:var(--pf-multiselect-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-multiselect-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-multiselect-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);color:var(--pf-multiselect-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-multiselect-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-multiselect-invalid-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}.chip{background:var(--pf-multiselect-bg-subtle);border-radius:var(--radius-sm);font-size:var(--font-size-xs);padding:2px var(--space-2)}.placeholder{color:var(--pf-multiselect-text-muted)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-multiselect-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-multiselect-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-multi-select-in var(--pf-transition-enter)}@keyframes pf-multi-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const y={[c.ArrowDown]:"next",[c.ArrowUp]:"previous",[c.Home]:"first",[c.End]:"last"};const x=class{constructor(i){t(this,i);this.pfChange=e(this,"pfChange");this.pfOpenChange=e(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;label;description;error;placeholder="Select options";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;chips=[];initialValue="";stopObserving;activeOption=null;warnedAboutSeparator=false;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){const t=this.values();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const e=new FormData;for(const i of t)e.append(this.name,i);this.internals.setFormValue(e)}m(this.internals,t.length>0,this.required,this.error)}syncOptions(){const t=this.values();const e=[];for(const e of this.options()){const i=t.includes(this.optionValue(e));e.selected=i}for(const i of t){const t=this.options().find((t=>this.optionValue(t)===i));if(t)e.push(t.textContent?.trim()??i)}this.chips=e;this.warnAboutSeparators()}warnAboutSeparators(){if(this.warnedAboutSeparator)return;const t=d(this.options().map((t=>this.optionValue(t))));if(t.length===0)return;this.warnedAboutSeparator=true;console.warn(`[pf-multi-select] option values cannot contain a comma, because \`value\` is a `+`comma-separated list: ${t.join(" ")}`)}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}async refresh(){this.syncOptions()}onSlotChange=()=>{this.syncOptions()};values(){return f(this.value)}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{o(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.values();const i=this.options().find((t=>e.includes(this.optionValue(t))&&!t.hasAttribute("disabled")))??this.enabled()[0];this.setActive(i??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}toggle(t){if(t.hasAttribute("disabled")||this.disabled)return;const e=u(this.values(),this.optionValue(t));this.value=b(e);this.pfChange.emit({value:this.value,values:e})}handleOptionSelect(t){t.stopPropagation();const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.toggle(e)}move(t){const e=this.options();const i=h(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=p(t,i,s);if(r!==-1)this.setActive(e[r]??null)}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=y[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(l(t.key)){t.preventDefault();if(!this.open)this.open=true;else if(this.activeOption)this.toggle(this.activeOption)}}render(){const t=n(this.description&&"description",this.error&&"error");return s(r,{key:"84f645358443d6dc41515a835cf0c7136a6f2a30"},s("div",{key:"2abaf9886654a5cef6756a4c566f61e37c7c876a",class:"field",part:"field"},this.label&&s("label",{key:"76f9cf451c6fba652494862a0fa05e320a4790c4",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&s("span",{key:"9f4a8074bc2ef06ae7256267bab07d9baf52dc2c",class:"required","aria-hidden":"true"},"*")),s("button",{key:"a5a15ff1c857e6f727bc43131741ee95ba345efd",id:"trigger","aria-label":v(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},this.chips.length>0?s("span",{class:"chips"},this.chips.map((t=>s("span",{key:t,class:"chip",part:"chip"},t)))):s("span",{class:"placeholder"},this.placeholder),s("span",{key:"9b662f3899c243059b07b4ecc0166b74b97501cc",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"5a869e8d9d1aa023e57ed556afc613544f54424f",name:"chevron-down"}))),this.description&&s("p",{key:"d231f94ad697dc52d3115cf13c0b47f0b20045a6",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"dcc0995d743ea214575031de7225f0bce71aebb6",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"c161c902c9859dd71dda4967dc4e074db29dd448",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-multiselectable":"true","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},s("slot",{key:"8fec52209e91211ba15d8c32f53d111b2058b76f",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};x.style=g();export{x as pf_multi_select};
+//# sourceMappingURL=p-ec8df806.entry.js.map

package/dist/pitchfork/p-ec8df806.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMultiSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfMultiSelect","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","chips","initialValue","stopObserving","activeOption","warnedAboutSeparator","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","values","length","setFormValue","data","FormData","append","applyControlValidity","chosen","labels","option","options","selected","includes","optionValue","find","candidate","push","textContent","trim","warnAboutSeparators","offenders","assertSeparableValues","map","o","console","warn","join","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","refresh","onSlotChange","parseValueList","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","first","setActive","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","toggle","toggleValueInList","formatValueList","handleOptionSelect","stopPropagation","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleKeyDown","defaultPrevented","key","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","controlAriaLabel","Boolean","type","role","onClick","chip","popover","maxHeight","overflowY","onSlotchange"],"sources":["src/components/pf-multi-select/pf-multi-select.css?tag=pf-multi-select&encapsulation=shadow","src/components/pf-multi-select/pf-multi-select.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-multiselect-text);\n  --pf-option-text-disabled: var(--pf-multiselect-text-muted);\n  --pf-option-active-bg: var(--pf-multiselect-active-bg);\n  --pf-option-active-text: var(--pf-multiselect-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-multiselect-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-multiselect-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-multiselect-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-multiselect-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-multiselect-invalid-border);\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.chip {\n  background: var(--pf-multiselect-bg-subtle);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  padding: 2px var(--space-2);\n}\n\n.placeholder {\n  color: var(--pf-multiselect-text-muted);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n.description {\n  color: var(--pf-multiselect-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-multiselect-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-multi-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-multi-select-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  formatValueList,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  observeAnchoredPosition,\n  parseValueList,\n  resolveListMove,\n  toggleValueInList,\n  assertSeparableValues,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated multi-choice select over `pf-option` children.\n *\n * **It submits one entry per chosen value from a single control.**\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n *\n * `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n *\n * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-*` set.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part chip - each chosen value's chip in the trigger.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-multi-select',\n  styleUrl: 'pf-multi-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfMultiSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per chosen value. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen values, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select options';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen set changes, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The labels of the chosen options, for the trigger's chips. */\n  @State() chips: string[] = [];\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private warnedAboutSeparator = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /*\n   * `name` is watched here and not on the controls that pass a plain string to\n   * `setFormValue`: those take their submission name from the reflected\n   * attribute, so the platform picks a change up by itself. This one builds\n   * the name *into* a FormData, so without the watch a name assigned after\n   * load would never reach the submission.\n   */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const values = this.values();\n\n    if (values.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      // One entry per value under the one name, which `data.getAll(name)`\n      // reads back as an array.\n      const data = new FormData();\n      for (const value of values) data.append(this.name, value);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the chips follow. */\n  @Watch('value')\n  syncOptions() {\n    const chosen = this.values();\n    const labels: string[] = [];\n\n    for (const option of this.options()) {\n      const selected = chosen.includes(this.optionValue(option));\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n    }\n\n    // Chips in the order they were chosen, not the options' order.\n    for (const value of chosen) {\n      const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n      if (option) labels.push(option.textContent?.trim() ?? value);\n    }\n\n    this.chips = labels;\n    this.warnAboutSeparators();\n  }\n\n  /**\n   * One warning naming every offending value.\n   *\n   * A value holding a comma cannot round-trip through `value`, and failing\n   * silently would show the right chips over a wrong submission.\n   */\n  private warnAboutSeparators() {\n    if (this.warnedAboutSeparator) return;\n    const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n    if (offenders.length === 0) return;\n\n    this.warnedAboutSeparator = true;\n    console.warn(\n      `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n        `comma-separated list: ${offenders.join(' ')}`,\n    );\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** Re-reads the options, for a label edited in place. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  private values(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\n    if (this.disabled || !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      matchAnchorWidth: true,\n      flip: true,\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    // Opens on the first chosen option, or the first selectable one.\n    const chosen = this.values();\n    const first =\n      this.options().find(\n        (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n      ) ?? this.enabled()[0];\n    this.setActive(first ?? null);\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.listbox;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  /**\n   * Toggles one value and keeps the listbox open — the difference from\n   * `pf-select`, and the whole point of a multi-choice control: closing after\n   * each pick would make choosing three things three round trips.\n   */\n  private toggle(option: HTMLElement) {\n    if (option.hasAttribute('disabled') || this.disabled) return;\n\n    const next = toggleValueInList(this.values(), this.optionValue(option));\n    this.value = formatValueList(next);\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.toggle(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else if (this.activeOption) this.toggle(this.activeOption);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the listbox, so this IDREF resolves. */\n            aria-controls=\"listbox\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            {this.chips.length > 0 ? (\n              <span class=\"chips\">\n                {this.chips.map((chip) => (\n                  <span key={chip} class=\"chip\" part=\"chip\">\n                    {chip}\n                  </span>\n                ))}\n              </span>\n            ) : (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          /* The one ARIA difference from pf-select, and the important one. */\n          aria-multiselectable=\"true\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-edb28479.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as a}from"./p-Bm6UxEit.js";const s=()=>`:host{display:block;overflow:auto;padding:var(--space-4)}:host([hidden]){display:none}`;const d=class{constructor(o){e(this,o)}render(){return o(a,{key:"da6957ef1b1462d731e4f7c6272a99ea4f9e8869"},o("slot",{key:"a06152e56c3408e56fe86a71f0672ddf8fb0c9ce"}))}};d.style=s();export{d as pf_modal_body};
+//# sourceMappingURL=p-edb28479.entry.js.map

package/dist/pitchfork/p-edb28479.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfModalBodyCss","PfModalBody","render","h","Host","key"],"sources":["src/components/pf-modal-body/pf-modal-body.css?tag=pf-modal-body&encapsulation=shadow","src/components/pf-modal-body/pf-modal-body.tsx"],"sourcesContent":[":host {\n  display: block;\n  overflow: auto;\n  padding: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The body section of a `pf-modal`.\n *\n * A separate element rather than a named slot, for the reason `pf-card` gives:\n * a named slot would need emptiness detection or leave a padded, bordered\n * strip when nothing was slotted into it.\n *\n * @slot - the section's content.\n */\n@Component({\n  tag: 'pf-modal-body',\n  styleUrl: 'pf-modal-body.css',\n  shadow: true,\n})\nexport class PfModalBody {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,IAAM,yF,MCgBhBC,EAAW,M,yBACtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-f0889512.entry.js

@@ -0,0 +1,2 @@
+import{r,h as a,H as d}from"./p-Bm6UxEit.js";const o=()=>`:host{border-bottom:1px solid var(--pf-card-border);display:block;padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;const s=class{constructor(a){r(this,a)}render(){return a(d,{key:"334c522bf5347bac313ff6fb75e1b21018911828"},a("slot",{key:"a69f1d5579125f7c71344fe5b92391a99dcf7066"}))}};s.style=o();export{s as pf_card_header};
+//# sourceMappingURL=p-f0889512.entry.js.map

package/dist/pitchfork/p-f0889512.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardHeaderCss","PfCardHeader","render","h","Host","key"],"sources":["src/components/pf-card-header/pf-card-header.css?tag=pf-card-header&encapsulation=shadow","src/components/pf-card-header/pf-card-header.tsx"],"sourcesContent":["/*\n * Reads pf-card's own variables rather than defining its own: a consumer who\n * sets --pf-card-section-padding on a card expects every section to follow,\n * and custom properties inherit through the shadow boundary.\n */\n:host {\n  border-bottom: 1px solid var(--pf-card-border);\n  display: block;\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The top section of a `pf-card`, separated from what follows by a rule.\n *\n * @slot - the header's content.\n */\n@Component({\n  tag: 'pf-card-header',\n  styleUrl: 'pf-card-header.css',\n  shadow: true,\n})\nexport class PfCardHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAkB,IAAM,yJ,MCYjBC,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-f3d80b42.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as t}from"./p-Bm6UxEit.js";const s=()=>`: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 d=class{constructor(a){e(this,a)}value=0;color;swatch="";share=0;drawn=false;render(){return a(t,{key:"122c85fbc58816acce27ac06547eb4f2adf63788",role:"listitem"},a("span",{key:"d2d41879c922a4b929b801e4e3b2add7227cd79f",class:"dot",part:"dot","aria-hidden":"true",style:{background:this.swatch}}),a("span",{key:"46ea91d2d36a9269558548f0c2bc446b7d556467",class:"label",part:"label"},a("slot",{key:"d8eb86e569151c9b26de626e6dd6c08feee8da75"})),a("span",{key:"cbf292f34e267cf4ff37bded7da86649d7ea9ed6",class:"value",part:"value"},this.share,"%"))}};d.style=s();export{d as pf_pie_slice};
+//# sourceMappingURL=p-f3d80b42.entry.js.map

package/dist/pitchfork/p-f3d80b42.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfPieSliceCss","PfPieSlice","value","color","swatch","share","drawn","render","h","Host","key","role","class","part","style","background","this"],"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"],"mappings":"kDAAA,MAAMA,EAAgB,IAAM,2a,MCwBfC,EAAU,M,yBAEIC,MAAQ,EAGRC,MAGAC,OAAS,GAGTC,MAAQ,EASOC,MAAQ,MAEhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,MAAK,cAAa,OAAOC,MAAO,CAAEC,WAAYC,KAAKZ,UAC1EI,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBG,KAAKX,MACD,K","ignoreList":[]}

package/dist/pitchfork/p-f5242cee.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as r}from"./p-Bm6UxEit.js";const a=()=>`@keyframes pf-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}:host{animation:pf-skeleton-shimmer 1.4s linear infinite;background:linear-gradient(     90deg,     color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 25%,     color-mix(in srgb, var(--pf-loading-border) 72%, var(--pf-mix-base) 28%) 37%,     color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 63%   );background-size:200% 100%;border-radius:var(--radius-sm);display:inline-block;height:var(--pf-skeleton-height, 16px);max-width:100%;width:var(--pf-skeleton-width, 100%)}:host([hidden]){display:none}:host([rounded]){border-radius:var(--radius-full)}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){:host{animation-duration:0.01ms;animation-iteration-count:1}}`;const t=class{constructor(i){e(this,i)}width="100%";height=16;rounded=false;label="Loading content";static toLength(e){if(typeof e==="number")return`${e}px`;return/^-?\d+(\.\d+)?$/.test(e.trim())?`${e.trim()}px`:e}render(){return i(r,{key:"f6eec1b4e1a78bb3fb748255f0a8d44e1c376dc0",role:"status","aria-label":this.label,style:{"--pf-skeleton-width":t.toLength(this.width),"--pf-skeleton-height":t.toLength(this.height)}},i("span",{key:"deb41107f434e94ae33feead768728756fc3fa87",class:"sr-only",part:"label"},this.label))}};t.style=a();export{t as pf_loading_skeleton};
+//# sourceMappingURL=p-f5242cee.entry.js.map

package/dist/pitchfork/p-f5242cee.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfLoadingSkeletonCss","PfLoadingSkeleton","width","height","rounded","label","toLength","value","test","trim","render","h","Host","key","role","this","style","class","part"],"sources":["src/components/pf-loading-skeleton/pf-loading-skeleton.css?tag=pf-loading-skeleton&encapsulation=shadow","src/components/pf-loading-skeleton/pf-loading-skeleton.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n:host {\n  animation: pf-skeleton-shimmer 1.4s linear infinite;\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 25%,\n    color-mix(in srgb, var(--pf-loading-border) 72%, var(--pf-mix-base) 28%) 37%,\n    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 63%\n  );\n  background-size: 200% 100%;\n  border-radius: var(--radius-sm);\n  display: inline-block;\n  height: var(--pf-skeleton-height, 16px);\n  max-width: 100%;\n  width: var(--pf-skeleton-width, 100%);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([rounded]) {\n  border-radius: var(--radius-full);\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A shimmering placeholder for content that has not arrived.\n *\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-skeleton',\n  styleUrl: 'pf-loading-skeleton.css',\n  shadow: true,\n})\nexport class PfLoadingSkeleton {\n  /** Width, as a CSS length. A bare number is read as pixels. */\n  @Prop() width: number | string = '100%';\n\n  /** Height, as a CSS length. A bare number is read as pixels. */\n  @Prop() height: number | string = 16;\n\n  /** Use a pill radius instead of the default. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) rounded = false;\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading content';\n\n  /**\n   * The React component branches on `typeof width === 'number'`. An attribute\n   * is always a string, so `width=\"120\"` would arrive as `\"120\"` and be used\n   * as an invalid bare length. Treating a numeric string as pixels keeps\n   * `width=\"120\"` and `width={120}` meaning the same thing, while `width=\"50%\"`\n   * and `width=\"4rem\"` pass through untouched.\n   */\n  private static toLength(value: number | string) {\n    if (typeof value === 'number') return `${value}px`;\n    return /^-?\\d+(\\.\\d+)?$/.test(value.trim()) ? `${value.trim()}px` : value;\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"status\"\n        aria-label={this.label}\n        style={{\n          '--pf-skeleton-width': PfLoadingSkeleton.toLength(this.width),\n          '--pf-skeleton-height': PfLoadingSkeleton.toLength(this.height),\n        }}\n      >\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAuB,IAAM,s7B,MCYtBC,EAAiB,M,yBAEpBC,MAAyB,OAGzBC,OAA0B,GAGTC,QAAU,MAG3BC,MAAQ,kBASR,eAAOC,CAASC,GACtB,UAAWA,IAAU,SAAU,MAAO,GAAGA,MACzC,MAAO,kBAAkBC,KAAKD,EAAME,QAAU,GAAGF,EAAME,WAAaF,C,CAGtE,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SAAQ,aACDC,KAAKV,MACjBW,MAAO,CACL,sBAAuBf,EAAkBK,SAASS,KAAKb,OACvD,uBAAwBD,EAAkBK,SAASS,KAAKZ,UAG1DQ,EAAA,QAAAE,IAAA,2CAAMI,MAAM,UAAUC,KAAK,SACxBH,KAAKV,O","ignoreList":[]}

package/dist/pitchfork/p-f5df568f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as i,H as o}from"./p-Bm6UxEit.js";import{l as s}from"./p-C-VLyxRR.js";var n=e=>{if(typeof e.checkVisibility==="function")return e.checkVisibility();return e.offsetParent!==null||e.getClientRects().length>0};var r=e=>{const t=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[tabindex]:not([tabindex="-1"])'].join(",");return Array.from(e.querySelectorAll(t)).filter((e=>{if(e.hasAttribute("disabled")||e.getAttribute("aria-hidden")==="true")return false;return n(e)}))};const l=()=>`:host{display:contents}.dialog{align-items:center;background:none;border:0;display:none;height:100%;justify-content:center;max-height:100%;max-width:100%;padding:var(--space-4);width:100%}.dialog[open]{display:flex}.dialog::backdrop{background:var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-modal-bg);border:1px solid var(--pf-modal-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--pf-modal-text);display:flex;flex-direction:column;max-height:100%;overflow:auto;position:relative;width:100%}:host([size='sm']) .panel{max-width:400px}:host([size='md']) .panel{max-width:560px}:host([size='lg']) .panel{max-width:800px}.close{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-modal-text-muted);cursor:pointer;display:inline-flex;inset-block-start:var(--space-3);inset-inline-end:var(--space-3);padding:var(--space-1);position:absolute}.close:hover{color:var(--pf-modal-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.dialog[open] .panel{animation:pf-modal-in var(--pf-transition-enter)}@keyframes pf-modal-in{from{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}`;const d=class{constructor(a){e(this,a);this.pfOpenChange=t(this,"pfOpenChange")}get el(){return a(this)}open=false;size="md";label;dismissable=true;showCloseButton=true;pfOpenChange;releaseScroll=null;componentDidLoad(){if(this.open)this.showDialog()}disconnectedCallback(){this.unlockScroll()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showDialog();else this.closeDialog();if(e!==t)this.pfOpenChange.emit({open:e})}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=s()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll();requestAnimationFrame((()=>this.ensureFocusInside()))}componentDidRender(){this.ensureFocusInside()}onFocusOut=e=>{if(!this.open||e.relatedTarget)return;requestAnimationFrame((()=>{if(document.hasFocus())this.ensureFocusInside()}))};ensureFocusInside(){const e=this.dialog;if(!this.open||!e?.isConnected||!e.open)return;if(e.matches(":focus-within"))return;const[t]=r(e);(t??e).focus()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable){e.preventDefault();return}};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};accessibleName(){if(this.label)return this.label;const e=this.el.textContent?.trim();return e?e.slice(0,120):undefined}render(){return i(o,{key:"bf6b14acf276e7e327dad4e2adb0759c5371caa0"},i("dialog",{key:"fa8836858cd2ac18fe270c860671e77f5f9f6b93",part:"dialog",class:"dialog","aria-label":this.accessibleName(),onCancel:this.onCancel,onFocusout:this.onFocusOut,onClose:this.onClose,onClick:this.onDialogClick},i("div",{key:"6bfce72c9c19619388b93e3385b2fa8fe8fecc8e",class:"panel",part:"panel"},this.showCloseButton&&i("button",{key:"f11faa39f8854d5dd6854bb3c6e8e8e2f1abc6e3",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},i("svg",{key:"7530bfc0821a2d09e6045589cbbf2d390e8c6897",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},i("path",{key:"74c4d8385baa9776cfdf23570f46fd1621bd3fa2",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"}))),i("slot",{key:"d11d9ae0716dc7f846ea05dc24689f0c6465057d"}))))}static get watchers(){return{open:[{syncOpen:0}]}}};d.style=l();export{d as pf_modal};
+//# sourceMappingURL=p-f5df568f.entry.js.map